Merge branch 'feat/redesign' into 'master'

Feat/redesign

See merge request !29

majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.yaml

+context:
+  title: 'KONEC MEZINÁRODNÍ OSTUDY. EVROPSKÁ KOMISE UZAVŘELA ŘÍZENÍ O STŘETU ZÁJMŮ'
+  date: '29. června 2023'
+  url: '#'

majak_uistyleguide/templates/patterns/molecules/blocks/icon_title_text_block.html

@@ -4,7 +4,7 @@
 {% else %}
   <div
 {% endif %}
-    class="hover:no-underline mb-12 flex gap-3 max-w-4xl"
+    class="hover:no-underline mb-12 flex gap-3"
   >
 
   {% if icon %}
@@ -15,7 +15,7 @@
     <h3 class="font-alt mb-4 text-4xl">
       {{ title }}
     </h3>
-    <div class="prose [&>div.content-block>p:first-child]:mt-0">
+    <div class="prose max-w-none [&>div.content-block>p:first-child]:mt-0">
       <div class="content-block">
         <p>
           {{ text }}

majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html

 <div class="flip-card" tabindex="0">
   <div class="flip-card-inner">
-    <div class="flip-card-front">
+    <div
+      class="flip-card-front rounded-3xl bg-cover"
+
+      {% if background_url %}
+        style="
+          background-image: url('{{ background_url }}')
+        "
+      {% endif %}
+    >
       <div
         class="relative h-[33rem] rounded-3xl overflow-hidden bg-cover"
         style="
+          {% if not background_url %}
             background-color: {{ bg_color }};
+          {% endif %}
 
           {% if image_url %}
             background-image: url('{{ image_url }}')
           {% endif %}
         "
       >
+        {% if not background_url %}
           <div
             class="
               absolute top-0 left-0
@@ -20,16 +31,22 @@
             "
             style="border-top-color: {{ bg_color }}"
           ></div>
+        {% endif %}
 
         <h1
           class="
             font-alt text-5xl whitespace-pre-line absolute top-10 left-10 max-w-[60%]
           "
+          {% if title_color %}
+            style="color: {{ title_color }}"
+          {% endif %}
         >{{ title }}</h1>
 
         <div
           class="
-            absolute bottom-4 right-4 block text-white opacity-75 text-right leading-5 font-condensed
+            bottom-8 left-8 text-left
+
+            absolute block text-white opacity-75 leading-5 font-condensed
 
             md:hidden
           "

majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml

@@ -3,6 +3,8 @@ context:
     Staň se členkou
     nebo členem
   image_url: '../../../../../static/images/onboarding/member.png'
+  title_color: ''
+  background_url: ''
   content: |-
     <h2>
       Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!

majak_uistyleguide/templates/patterns/molecules/boxes/image_with_button_box.html

@@ -8,7 +8,7 @@
     <h2 class="head-6xl">{{ desc_text }}</h2>
   </div>
 
-  <div class="text-center flex justify-center">
+  <div class="text-center flex justify-center mt-auto">
     {% include 'patterns/atoms/buttons/round_button.html' with classes='bg-white text-black' button_text=button_text %}
   </div>
 </div>

majak_uistyleguide/templates/patterns/molecules/candidates/elections/candidate_primary_box.html → majak_uistyleguide/templates/patterns/molecules/candidates/candidate_primary_box.html

 <ui-candidate-primary-box
   name="{{ name }}"
+  subheading="{{ subheading }}"
   position="{{ position }}"
   description="{{ description }}"
   url="{{ url }}"
   image-source="{{ image_source }}"
+  :social-links="{{ social_links }}"
 ></ui-candidate-primary-box>

majak_uistyleguide/templates/patterns/molecules/candidates/elections/candidate_primary_box.yaml → majak_uistyleguide/templates/patterns/molecules/candidates/candidate_primary_box.yaml

 context:
-  name: 'Mikuláš Peksa'
+  name: 'Ing. Mgr. et Mgr. Mikuláš Peksa'
+  subheading: 'Podnadpis'
   image_source: '../../../../../static/images/mikulas-arrow.png'
   position: 'Europoslanec'
   description: 'Mikuláš Peksa (18. 6. 1986) vystudoval fyziku na Matematicko-fyzikální fakultě Univerzity Karlovy. V Německu pracoval jako správce Linuxových serverů a programátor v C++. Po návratu do Čech byl v roce 2017 zvolen poslancem PSP ČR, následně v roce 2019 poslancem Evropského parlamentu. Věnuje se zejména tématům spojeným s fungováním společnosti v digitálním věku.'
+  social_links:
+    -
+      icon: 'ico--facebook'
+      name: 'Facebook'
+      url: 'https://example.com'
+    -
+      icon: 'ico--instagram'
+      name: 'Instagram'
+      url: 'https://example.com'
+    -
+      icon: 'ico--web'
+      name: 'Stránky'
+      url: 'https://example.com'

majak_uistyleguide/templates/patterns/molecules/dropdown/dropdown.html

+<div
+  class="dropdown nav-link js-scroll-anchor"
+  tabindex="0"
+>
+  <div class="dropbtn">
+    {{ name }}
+
+    <span class="drop-arrow">
+      <i class="ico--chevron-down"></i>
+    </span>
+  </div>
+
+  <ul class="dropdown-content">
+    {% for nested_item in menu_items %}
+      {% include "patterns/atoms/dropdown/dropdown_item.html" with name=nested_item.name url=nested_item.url %}
+    {% endfor %}
+  </ul>
+</div>
\ No newline at end of file

majak_uistyleguide/templates/patterns/molecules/gallery/gallery.html

+<div
+  class="
+    flex flex-wrap items-center gap-2 my-8 justify-center
+
+    lg:justify-start
+  "
+>
+  {% for image in images %}
+    <a
+      class="w-40"
+      href="{{ image.source }}"
+      data-fancybox="gallery"
+      data-caption="{{ image.caption }}"
+    >
+      <img class="rounded" src="{{ image.source }}" />
+    </a>
+  {% endfor %}
+</div>

majak_uistyleguide/templates/patterns/molecules/gallery/gallery.yaml

+context:
+  images:
+    -
+      source: https://picsum.photos/536/354
+      caption: 'Example image 1'
+    -
+      source: https://picsum.photos/536/355
+      caption: 'Example image 2'
+    -
+      source: https://picsum.photos/536/356
+      caption: 'Example image 3'
+    -
+      source: https://picsum.photos/536/354
+      caption: 'Example image 1'
+    -
+      source: https://picsum.photos/536/355
+      caption: 'Example image 2'
+    -
+      source: https://picsum.photos/536/356
+      caption: 'Example image 3'

majak_uistyleguide/templates/patterns/molecules/lists/image_list.html

+<ul class="flex flex-col gap-2">
+  {% include "patterns/atoms/lists/image_list_item.html" %}
+  {% include "patterns/atoms/lists/image_list_item.html" %}
+  {% include "patterns/atoms/lists/image_list_item.html" %}
+  {% include "patterns/atoms/lists/image_list_item.html" %}
+  {% include "patterns/atoms/lists/image_list_item.html" %}
+</ul>
\ No newline at end of file

majak_uistyleguide/templates/patterns/molecules/menus/carousel.html

 <div class="__js-root">
   <div class="header-carousel">
-    <div class="block h-[700px] xl:h-screen relative group cursor-pointer">
+    <div
+      class="
+        {% block wrapper_classes %}
+          block h-[700px] xl:h-screen relative
+        {% endblock %}
+
+        group cursor-pointer
+      "
+    >
       <video
         class="
           header-carousel--image
@@ -35,24 +43,38 @@
         {% endif %}
       </video>
 
-      <div class="header-carousel--text-wrapper" style="box-sizing: border-box">
-        <div class="container--wide px-0 h-full flex flex-col justify-end items-start" style="box-sizing: border-box">
+      <div
+        class="
+          {% block text_wrapper_class %}
+            header-carousel--text-wrapper
+          {% endblock %}
+        "
+        style="box-sizing: border-box"
+      >
+        <h1
+          class="
+            {% block text_inner_wrapper_classes %}
+              container--wide px-0 h-full flex flex-col justify-end items-start
+            {% endblock %}
+          "
+          style="box-sizing: border-box"
+        >
 
-          <h1 class="mb-4 px-5 flex flex-col text-black block lg:hidden">
+          <div class="mb-4 px-5 flex flex-col text-black lg:hidden">
             <div>{{ mobile_label_first }}</div>
             <div>{{ mobile_label_second }}</div>
             <div>{{ mobile_label_third }}</div>
-          </h1>
+          </div>
 
-          <h1 class="mb-4 px-5 flex flex-col text-black hidden lg:block">
+          <div class="mb-4 px-5 flex-col text-black hidden lg:flex">
             <div>{{ desktop_label_first }}</div>
             <div>{{ desktop_label_second }}</div>
-          </h1>
+          </div>
 
           <div class="ml-4 text-lg group">
             {% include "patterns/atoms/buttons/round_button.html" with button_text=button_text %}
           </div>
-        </div>
+        </h1>
       </div>
     </div>
   </div>

majak_uistyleguide/templates/patterns/molecules/menus/district/carousel.html

 {% extends 'patterns/molecules/menus/carousel.html' %}
+
+{% block wrapper_classes %}
+  block h-[600px] xl:h-[620px] relative group cursor-pointer
+{% endblock %}
+
+{% block text_wrapper_class %}
+  header-carousel--text-wrapper
+
+  !bottom-[0] !h-full
+{% endblock %}
+
+{% block text_inner_wrapper_classes %}
+  container--wide px-0 h-full flex flex-col justify-end items-start
+
+  py-[200px] flex flex-col justify-center
+
+  xl:pb-[110px]
+{% endblock %}

majak_uistyleguide/templates/patterns/molecules/navbar/additional_button.html

 <a
   class="
+    navbar__border-button__wrapper
+
     hover:no-underline
 
     hidden lg:inline
@@ -8,7 +10,7 @@
 >
   <div
     class="
-      navbar__border-button
+      navbar__border-button {{ extra_classes }}
 
       flex items-center justify-center border-none duration-150 border-4 w-24 h-11 py-4 px-6
 

majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.html

@@ -4,9 +4,37 @@
       {{ name }}
     </template>
     <ui-popout-content>
+      <div>
+        {% if guarantor_name %}
+          <div
+            class="
+              !text-grey-250 [&_*]:!text-grey-250
+
+              mb-3 flex gap-2 items-center justify-end
+            "
+          >
+            <div class="mr-2">
+              Garant programového bodu:
+            </div>
+
+            <img
+              alt="Obrázek osoby {{ guarantor_name }}"
+              class="w-10 h-10 opacity-75 m-0 p-0 rounded-full"
+              src="{{ guarantor_image_url }}"
+            >
+
+            <strong>
+              <a href="{{ guarantor_url }}">
+                {{ guarantor_name }}
+              </a>
+            </strong>
+          </div>
+        {% endif %}
+
         <div class="prose max-w-screen-lg">
           {% include "patterns/atoms/text/paragraph.html" with text=text %}
         </div>
+      </div>
     </ui-popout-content>
   </ui-popout>
 </div>

majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.yaml

@@ -5,3 +5,6 @@ context:
     asperiores voluptatibus enim qui velit quaerat. Perspiciatis 
     eum autem quidem et beatae quia dolore. Esse fuga architecto 
     delectus tenetur nesciunt aut aut dolore.'
+  guarantor_name: 'Petr Vepřový'
+  guarantor_url: 'https://example.com'
+  guarantor_image_url: '../../../../../static/images/person-table.png'

majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.html

+<div class="bg-grey-180">
+  <div
+    class="__js-root container--wide"
+    id="{{ id }}"
+  >
+    <ui-card-program
+      background-class="bg-grey-180"
+      open-point-background-class=""
+      :points="{{ program_data }}"
+    ></ui-card-program>
+  </div>
+</div>

majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.yaml

+context:
+  program_data: "[
+    {
+      'slug': '1',
+      'number': 1,
+      'title': 'Cowork',
+      'renderedContent': '<small>test</small>'
+    },
+    {
+      'slug': '2',
+      'number': 2,
+      'title': 'Dětský koutek',
+      'renderedContent': '<strong>test</strong>'
+    },
+    {
+      'slug': '3',
+      'number': 3,
+      'title': 'Pořádání akcí',
+      'renderedContent': '<strong>test</strong>'
+    },
+    {
+      'slug': '4',
+      'number': 4,
+      'title': 'Cokoliv dalšího',
+      'renderedContent': '<strong>test</strong>'
+    }
+  ]"

majak_uistyleguide/templates/patterns/molecules/tags/tags.html

-<div class="flex gap-2 flex-wrap max-w-[550px] {{ classes }}">
+<div
+  class="
+    flex gap-2 flex-wrap
+
+    {% if size_classes %}
+      max-w-[550px]
+    {% else %}
+      {{ size_classes }}
+    {% endif %}
+
+    {{ classes }}
+  "
+>
   {% for tag in tags %}
     {% include 'patterns/atoms/tags/tag.html' with text=tag color_classes=tag_color_classes %}
   {% endfor %}

majak_uistyleguide/templates/patterns/molecules/tags/tags.yaml

@@ -8,3 +8,11 @@ context:
     - 'legalizace'
     - 'digitalizace'
     - 'volby do Evropy'
+    - 'schvalování zákonů'
+    - 'legislativa'
+    - 'lidská práva'
+    - 'LGBT+'
+    - 'europarlament'
+    - 'legalizace'
+    - 'digitalizace'
+    - 'volby do Evropy'