Simplify JS, hook up remaning parts

gulpfile.js

@@ -419,7 +419,7 @@ gulp.task('rollup:build:production', buildJSBundle("production"));
 
 gulp.task(
   "site:build",
-  gulp.parallel("tailwind-postcss:build", "rollup:build")
+  gulp.parallel("tailwind-postcss:build", "patternlab:build", "rollup:build")
 );
 
 gulp.task(

source/_meta/_01-foot.mustache

@@ -2,7 +2,7 @@
   <!--DO NOT REMOVE-->
   {{{ patternLabFoot }}}
 
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
   <script src="../../js/main.bundle.js?{{ cacheBuster }}"></script>
 
   <script>

source/_patterns/00-atoms/02-contact-lines/basic-contact-line.mustache

-<a href="mailto:example@example.com" class="contact-line {{ classes }}">
-  <i class="{{ icon }}"></i>{{ caption }}{{^caption}}example@example.com{{/caption}}
+<a href="mailto:example@example.com" class="icon-link contact-line {{ classes }}">
+  <i class="{{ icon }}"></i>
+  <span>{{ caption }}{{^caption}}example@example.com{{/caption}}</span>
 </a>

source/_patterns/01-molecules/calendar/calendar-table-row.mustache

@@ -11,7 +11,7 @@
     </div>
   </div>
   <div class="col-span-2 text-center font-light calendar-table-row__col">
-    <a href="#">
+    <a href="#" class="icon-link">
       <i class="ico--location text-violet-300 mr-1" aria-hidden="true"></i>
       <span>Mapa</span>
     </a>

source/_patterns/01-molecules/calendar/js-calendar.mustache

+<div class="__js-root">
+  <ui-app inline-template>
+    <ui-calendar-dummy-provider v-slot="{ events, onShowMore, hasMore }">
+      <ui-calendar-renderer :events="events" :on-show-more="onShowMore" :has-more="hasMore" :name="'Krajský kalendář'"></ui-calendar-renderer>
+    </ui-calendar-dummy-provider>
+  </ui-app>
+</div>

source/_patterns/01-molecules/flip-clock/flip-clock.mustache

-<div class="flip-clock __js-root"
-  data-app="FlipClock"
-  data-clockclasses="{{ clockClasses }}"
-  data-slotclasses="{{ slotClasses }}"
-  data-deadline="2020-12-10 00:00:00"
-  {{# units }}data-units="{{ units }}"{{/ units }}
-></div>
+<div class="flip-clock __js-root">
+  <ui-flip-clock
+    clock-classes="{{ clockClasses }}"
+    slot-classes="{{ slotClasses }}"
+    deadline="2020-12-10 00:00:00"
+    {{# units }}units="{{ units }}"{{/ units }}
+  />
+</div>

source/_patterns/02-organisms/00-global/footer.mustache

-<footer class="footer bg-grey-700 text-white __js-root" data-app="Footer">
-  <ui-footer inline-template>
+<footer class="footer bg-grey-700 text-white __js-root">
+  <ui-app inline-template>
     <div>
       <div class="footer__main py-4 lg:py-16 container container--default">
         <section class="footer__brand">
@@ -101,5 +101,5 @@
         </div>
       </section>
     </div>
-  </ui-footer>
+  </ui-app>
 </footer>

source/_patterns/02-organisms/00-global/navbar.mustache

-<nav class="navbar __js-root" data-app="Navbar">
+<nav class="navbar __js-root">
+  <ui-app inline-template>
     <ui-navbar inline-template>
       <div>
         <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
@@ -37,15 +38,7 @@
                 </ui-navbar-subtitem>
               </li>
               <li class="navbar-menu__item">
-              <ui-navbar-subitem label="Volby">
-                <ul class="navbar-menu__submenu">
-                  <li><a href="#" data-href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a></li>
-                  <li><a href="#" data-href="{{ link.templates-elections-program }}" class="navbar-menu__link">Program</a></li>
-                </ul>
-              </ui-navbar-subtitem>
-            </li>
-            <li class="navbar-menu__item">
-              <a href="#" data-href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a>
+                <a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volby</a>
               </li>
               <li class="navbar-menu__item">
                 <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
@@ -62,4 +55,5 @@
         </div>
       </div>
     </ui-navbar>
+  </ui-app>
 </nav>

source/_patterns/02-organisms/00-global/subnav.mustache

-<div class="__js-root" data-app="Subnav">
-  <ui-subnav inline-template>
-    <ui-subnav-view-provider :initial="{regions: false, calendar: false}" v-slot="{ isCurrentView, toggleView }">
+<div class="__js-root">
+  <ui-app inline-template>
+    <ui-view-provider :initial="{regions: false, calendar: false}" v-slot="{ isCurrentView, toggleView }">
       <nav class="subnav">
         <div class="container container--wide">
           <div class="flex">
@@ -45,15 +45,17 @@
       <aside class="subnav-aside">
         <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
           <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--close"></i></a>
-          <ui-region-map class="container container--default" />
+          <ui-region-map class="container container--default"></ui-region-map>
         </div>
         <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
           <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--close"></i></a>
           <div class="container container--default">
-            {{> molecules-calendar }}
+            <ui-calendar-dummy-provider v-slot="{ events, onShowMore, hasMore }">
+              <ui-calendar-renderer :events="events" :on-show-more="onShowMore" :has-more="hasMore" :name="'Krajský kalendář'"></ui-calendar-renderer>
+            </ui-calendar-dummy-provider>
           </div>
         </div>
       </aside>
-    </ui-subnav-view-provider>
-  </ui-subnav>
+    </ui-view-provider>
+  </ui-app>
 </div>

source/_patterns/02-organisms/region-map/region-map.mustache

-<div class="region-map __js-root" data-app="RegionMap"></div>
+<div class="__js-root">
+  <ui-region-map />
+</div>

source/_patterns/03-templates/elections.mustache

 {{> organisms-header }}
 {{> organisms-elections-hero }}
 
-<div class="__js-root" data-app="ViewProvider">
-  <ui-view-provider inline-template :initial="{candidates: true, program: false}" v-slot="{ isCurrentView, toggleView }">
+<div class="__js-root">
+  <ui-view-provider :initial="{candidates: true, program: false}" v-slot="{ isCurrentView, toggleView }">
     <main>
       <div class="container container--default pt-8 lg:py-24">
         <div class="text-center">

source/css/atoms/icons.pcss

+[class^="ico--"],
 [class^="ico--"]:before,
 [class*=" ico--"]:before,
 [class^="ico--"]:hover:before,

source/css/molecules/calendar.pcss

@@ -21,4 +21,7 @@
     }
   }
 
+  &.calendar-table-row__col--norborder {
+    @apply border-r-0;
+  }
 }

source/css/style.pcss

@@ -81,3 +81,12 @@ body {
 a:hover {
   @apply underline;
 }
+
+a.icon-link:hover {
+  @apply no-underline;
+
+  span {
+    @apply underline;
+  }
+}
+

source/js/apps.js

-
-import FlipClock from './apps/flip-clock';
-import Footer from './apps/footer';
-import Navbar from './apps/navbar';
-import RegionMap from './apps/region-map';
-import Subnav from './apps/subnav';
-import ViewProvider from './apps/view-provider';
-
-export default {
-  FlipClock,
-  Footer,
-  Navbar,
-  RegionMap,
-  Subnav,
-  ViewProvider
-};

source/js/apps/flip-clock/index.js

-import Vue from 'vue';
-import FlipClock from './FlipClock.vue';
-
-const appFactory = (el, attrs) => {
-  // Bootstrap Vue.js.
-  new Vue({el, render: h => h(FlipClock, { attrs })});
-};
-
-export default appFactory;

source/js/apps/footer/Footer.vue

-<script>
-import UiFooterCollapsible from "./FooterCollapsible";
-
-export default {
-  components: {
-    UiFooterCollapsible,
-  },
-}
-</script>

source/js/apps/footer/index.js

-import Vue from 'vue';
-import UiFooter from './Footer.vue';
-
-const appFactory = (el, attrs) => {
-  // Bootstrap Vue.js.
-  new Vue({el, components: { UiFooter }});
-};
-
-export default appFactory;

source/js/apps/navbar/index.js

-import Vue from 'vue';
-import UiNavbar from './Navbar.vue';
-
-const appFactory = (el, attrs) => {
-  // Bootstrap Vue.js.
-  new Vue({el, components: { UiNavbar }});
-};
-
-export default appFactory;

source/js/apps/region-map/index.js

-import Vue from 'vue';
-import UiRegionMap from './RegionMap.vue';
-
-const appFactory = (el, attrs) => {
-  // Bootstrap Vue.js.
-  new Vue({el, render: h => h(UiRegionMap, { attrs })});
-};
-
-export default appFactory;