finish popout program points

.gitignore

@@ -25,6 +25,7 @@ share/python-wheels/
 .installed.cfg
 *.egg
 MANIFEST
+package-lock.json
 
 # Environments
 .env

majak_uistyleguide/templates/patterns/atoms/text/prose.html

+<div class="prose">
+  {% include 'patterns/atoms/text/paragraph.html' with text=text %}
+</div> 

majak_uistyleguide/templates/patterns/atoms/text/prose.yaml

+context:
+  text: 'Illo eligendi ipsa qui. Sunt sint earum sint. Nostrum 
+    aut sapiente rerum consequatur corporis in. Praesentium 
+    asperiores voluptatibus enim qui velit quaerat. Perspiciatis 
+    eum autem quidem et beatae quia dolore. Esse fuga architecto 
+    delectus tenetur nesciunt aut aut dolore.'

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

+<ui-popout>
+  <template slot="toggler">
+    {{ name }}
+  </template>
+  <ui-popout-content>
+    <div class="prose max-w-screen-lg">
+      <p>{{ text }}</p>
+    </div>
+  </ui-popout-content>
+</ui-popout>

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

+context:
+  name: 'Vyskakovací bod programu'
+  text: 'Illo eligendi ipsa qui. Sunt sint earum sint. Nostrum 
+    aut sapiente rerum consequatur corporis in. Praesentium 
+    asperiores voluptatibus enim qui velit quaerat. Perspiciatis 
+    eum autem quidem et beatae quia dolore. Esse fuga architecto 
+    delectus tenetur nesciunt aut aut dolore.'

majak_uistyleguide/templates/patterns/organisms/popouts/popout_list.html

+<ul class="flex flex-col gap-6">
+  {% for category in categories %}
+    <li class="grow">
+      <div class="flex gap-3 mb-3 items-center bg-grey-100 p-5">
+        <i class="text-2xl {{ category.icon }}"></i>
+        <h2 class="font-alt text-2xl">{{ category.name }}</h2>
+      </div>
+      {% for point in category.points %}
+        {% include 'patterns/molecules/popouts/popout_point.html' with name=point.name %}
+      {% endfor %}
+    </li>
+  {% endfor %}
+</ul>

majak_uistyleguide/templates/patterns/organisms/popouts/popout_list.yaml

+context:
+  categories:
+    -
+      name: 'Kategorie 1'
+      icon: 'ico--question'
+      points:
+        -
+          name: 'Dlouhodobý bod 1'
+        -
+          name: 'Dlouhodobý bod 2'
+        -
+          name: 'Dlouhodobý bod 3'
+    -
+      name: 'Kategorie 2'
+      icon: 'ico--open-source'
+      points:
+        -
+          name: 'Dlouhodobý bod 4'
+        -
+          name: 'Dlouhodobý bod 5'
+        -
+          name: 'Dlouhodobý bod 6'

majak_uistyleguide/templates/patterns/organisms/program/popout_point.html

-<ui-popout>
-  <span v-slot="button">Title</span>
-  <span v-slot="content">Dropdown</span>
-</ui-popout>

majak_uistyleguide/templates/patterns/organisms/program/popout_point.yaml

-context:
-  slug: 'example_slug'
-  name: 'Vyskakovací bod programu'
-  text: 'Lorem ipsum dolor sit amet...'

majak_uistyleguide/templates/patterns/templates/program/program.html

@@ -5,11 +5,7 @@
   <div class="grid-container">
     <div class="grid-content">
       <div class="prose max-w-none font-condensed text-xl text-black leading-7 mb-12 program-perex">
-        {# BEGIN Cast generovana Majakem #}<div class="content-block">
-          <p>
-            {{ program_text }}
-          </p>
-        </div>{# END Cast generovana Majakem #}
+        {% include 'patterns/atoms/text/prose.html' with text=program_text %}
       </div>
     </div>
   </div>
@@ -49,19 +45,13 @@
                 {% include 'patterns/molecules/blocks/icon_title_text_block.html' with icon=None %}
               {% elif program.type == 'popout' %}
                 <div class="grid-container mb-12">
-                  <div class="grid-full">
-                    <ul>
-                      <li>
-                        {% for point in program.points %}
-                          {% include 'patterns/organisms/program/popout_point.html' with name=point.name text=point.text slug=forloop.counter %}
-                        {% endfor %}
-                      </li>
-                    </ul>
+                  <div class="grid-left-side-with-content">
+                    {% include 'patterns/organisms/popouts/popout_list.html' %}
                   </div>
                 </div>
               {% elif program.type == 'crossroad' %}
                 <div class="grid-container mb-12">
-                  <div class="grid-full">
+                  <div class="grid-left-side-with-content">
                     {% include 'patterns/organisms/cards/card_list.html' %}
                   </div>
                 </div>

majak_uistyleguide/templates/patterns/templates/program/program.yaml

@@ -13,7 +13,7 @@ context:
       type: 'concise'
       perex: 'Lorem ipsum dolor sit amet 3, který vysvětluje tuto sekci programu.'
     -
-      name: 'Sněmovní volby 2019'
+      name: 'Stanoviska'
       type: 'crossroad'
       perex: 'Lorem ipsum dolor sit amet 4, který vysvětluje tuto sekci programu.'
     -
@@ -21,13 +21,3 @@ context:
       type: 'popout'
       perex: 'Lorem ipsum dolor sit amet 5, který vysvětluje důležitost dlouhodobého
         programu.'
-      points:
-        -
-          name: 'Dlouhodobý bod 1'
-          text: 'Lorem ipsum dolor sit amet, shizzle wazzle something something.'
-        -
-          name: 'Dlouhodobý bod 2'
-          text: 'Lorem ipsum dolor sit amet, shizzle wazzle something something.'
-        -
-          name: 'Dlouhodobý bod 3'
-          text: 'Lorem ipsum dolor sit amet, shizzle wazzle something something.'

package.json

@@ -8,7 +8,9 @@
     "@vitejs/plugin-vue2": "^2.0.0",
     "tailwindcss-elevation": "^0.3.4",
     "vue": "^2.6.11",
-    "vue-slick-carousel": "^1.0.6"
+    "vue-clickaway": "^2.2.2",
+    "vue-slick-carousel": "^1.0.6",
+    "vue-slide-up-down": "^2.0.1"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.8",

src/css/organisms/popout.pcss

+.popout__toggle-wrapper {
+  @apply px-5 py-4 font-alt text-xl flex justify-between cursor-pointer duration-100 hover:bg-grey-100;
+}
+
+.popout__content-wrapper {
+  @apply px-5 py-4 flex flex-col gap-3;
+}

src/css/style.pcss

@@ -40,6 +40,7 @@
 @import "organisms/navbar.pcss";
 @import "organisms/newsletter.pcss";
 @import "organisms/region-map.pcss";
+@import "organisms/popout.pcss";
 
 
 /**

src/js/components/popout/Popout.vue

 <template>
-  <div @click="toggle" v-on-clickaway="away">
-    <slot name="toggler">
-      <button>Toggle</button>
-    </slot>
-    <slot/>
+  <div
+    class="popout"
+    @click="toggle"
+    v-on-clickaway="away"
+  >
+    <div class="popout__toggle-wrapper">
+      <div class="popout__toggle-name">
+        <slot name="toggler"></slot>
+      </div>
+      <div class="popout__toggle-arrow">
+        <i class="ico--chevron-down" v-if="!active"></i>
+        <i class="ico--chevron-up" v-if="active"></i>
+      </div>
+    </div>
+    <ui-slide-up-down :active="active" :duration="200">
+      <slot></slot>
+    </ui-slide-up-down>
   </div>
 </template>
 
 <script>
   import { mixin as clickaway } from 'vue-clickaway';
+
   export default {
     name: 'Popout',
     mixins: [ clickaway ],
@@ -31,6 +44,11 @@
       away () {
         this.sharedState.active = false
       }
+    },
+    computed: {
+      active () {
+        return this.sharedState.active
+      }
     }
   }
 </script>

src/js/components/popout/PopoutContent.vue

 <template>
-  <div v-if="active">
-    <slot/>
-  </div>
+  <ul class="popout__content-wrapper" v-if="active">
+    <slot></slot>
+  </ul>
 </template>
 
 <script>

src/js/components/popout/PopoutItem.vue

+<template>
+  <li>
+    <slot></slot>
+  </li>
+</template>
+
+<script>
+  export default {
+    name: 'PopoutItem'
+  }
+</script>

src/js/main.js

@@ -11,11 +11,16 @@ import GoogleProvider from "./components/calendar/GoogleProvider";
 import RegionMap from "./components/RegionMap";
 import TwitterCarousel from "./components/TwitterCarousel";
 import ViewProvider from "./components/ViewProvider";
+import Popout from "./components/popout/Popout";
+import PopoutContent from "./components/popout/PopoutContent";
+import PopoutItem from "./components/popout/PopoutItem";
 import Navbar from "./components/navbar/Navbar";
 import FooterCollapsible from "./components/footer/FooterCollapsible";
 import FlipClock from "./components/FlipClock";
 import HorizontalScrollable from "./components/HorizontalScrollable";
 
+import SlideUpDown from 'vue-slide-up-down';
+
 
 Vue.component("ui-article-carousel", ArticleCarousel);
 Vue.component("ui-header-carousel", HeaderCarousel);
@@ -25,11 +30,16 @@ Vue.component("ui-calendar-google-provider", GoogleProvider);
 Vue.component("ui-region-map", RegionMap);
 Vue.component("ui-twitter-carousel", TwitterCarousel);
 Vue.component("ui-view-provider", ViewProvider);
+Vue.component("ui-popout", Popout);
+Vue.component("ui-popout-content", PopoutContent);
+Vue.component("ui-popout-item", PopoutItem);
 Vue.component("ui-navbar", Navbar);
 Vue.component("ui-footer-collapsible", FooterCollapsible);
 Vue.component("ui-flip-clock", FlipClock);
 Vue.component("ui-horizontal-scrollable", HorizontalScrollable);
 
+Vue.component("ui-slide-up-down", SlideUpDown);
+
 
 import UiApp from "./components/UiApp.vue";