started work on Nástěnka styles

majak_uistyleguide/settings/base.py

@@ -78,6 +78,9 @@ TEMPLATES = [
             "builtins": [
                 "pattern_library.loader_tags"
             ],
+            "libraries": {
+                "random": "majak_uistyleguide.templatetags.random"
+            }
         },
     },
 ]

majak_uistyleguide/templates/patterns/atoms/nastenka/sidebar_button.html

+{% load random %}
+
+{% random_uuid as generated_uuid %}
+
+<button
+  class="p-5 rounded-tl-lg rounded-bl-lg bg-white __tooltip"
+  id="{{ generated_uuid }}"
+  aria-label="{{ name }}"
+>
+  {% if icon_text_class %}
+    <i class="text-4xl {{ icon_text_class }}"></i>
+  {% elif icon_image_source %}
+    <img src="{{ icon_image_source }}">
+  {% endif %}
+</button>

majak_uistyleguide/templates/patterns/atoms/nastenka/sidebar_button.yaml

+context:
+  icon_text_class: "ico--bullhorn"
+  icon_image_source: ""
+  name: "Notifikace a globální oznámení"

majak_uistyleguide/templates/patterns/templates/nastenka/nastenka.html

+ 

majak_uistyleguide/templatetags/random.py

+from uuid import uuid4
+
+from django import template
+
+register = template.Library()
+
+
+@register.simple_tag
+def random_uuid():
+    return str(uuid4())

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@vitejs/plugin-vue2": "^2.0.0",
     "tailwindcss-elevation": "^0.3.4",
+    "tippy.js": "^6.3.7",
     "vue": "^2.6.11",
     "vue-slick-carousel": "^1.0.6"
   },

src/js/main.js

@@ -16,6 +16,9 @@ import FooterCollapsible from "./components/footer/FooterCollapsible";
 import FlipClock from "./components/FlipClock";
 import HorizontalScrollable from "./components/HorizontalScrollable";
 
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+
 
 Vue.component("ui-article-carousel", ArticleCarousel);
 Vue.component("ui-header-carousel", HeaderCarousel);
@@ -55,15 +58,28 @@ const appFactory = (el, attrs) => {
  *
  * @param {Element} el DOM Element
  */
-function renderVueAppElement(el) {
+const renderVueAppElement = el => {
   const attrs = Object.assign({}, el.dataset);
   return appFactory(el, attrs);
 }
 
+/**
+ * Add a Tippy.js tooltip to the given element, containing its ARIA label.
+ * 
+ * @param {Element} el DOM Element
+ */
+const addTooltip = el => {
+  tippy(
+    el,
+    {content: el.getAttribute("aria-label")}
+  )
+}
+
 
-function init(event) {
+const init = event => {
   // Initialize Vue.js apps.
-  forEachNode(document.querySelectorAll('.__js-root'), renderVueAppElement)
+  forEachNode(document.querySelectorAll('.__js-root'), renderVueAppElement);
+  forEachNode(document.querySelectorAll('.__tooltip'), addTooltip);
 }
 
 document.addEventListener('DOMContentLoaded', init);