Merge pull request #424 from yalesites-org/event-calendar-display

YOR-11: Event Calendar Display Mode

components/01-atoms/lists/taxonomy/yds-tags-list.twig

@@ -1,11 +1,16 @@
+{% set visible_items = visible_items|default(3) %}
 <ul {{ bem('taxonomy-list', ['tags'], '') }}>
-  {% for item in items|slice(0, 3) %}
-    <li {{ bem('item', [], 'taxonomy-list') }}>{{ item.content }}</li>
+  {% for item in items|slice(0, visible_items) %}
+    <li {{ bem('item', [], 'taxonomy-list') }}>
+      {% block list_item %}
+        {{ item.content }}
+      {% endblock %}
+    </li>
     <li aria-hidden="true" {{ bem('divider', [], 'taxonomy-list') }}>{{ '|' }}</li>
   {% endfor %}
-  {% if items|length > 3 %}
+  {% if items|length > visible_items %}
     <li {{ bem('item', ['more'], 'taxonomy-list') }}>
-      <a href="{{ url }}">{{ '+' }}{{ items|length - 3 }}{{ " more"|t }}</a>
+      <a href="{{ url }}">{{ '+' }}{{ items|length - visible_items }}{{ " more"|t }}</a>
     </li>
   {% endif %}
 </ul>

components/02-molecules/cards/reference-card/event/_yds-calendar-cell-event.twig

@@ -0,0 +1,38 @@
+{% set event__base_class = 'calendar-event' %}
+<li {{ bem(event__base_class, [], '') }}>
+  <span {{ bem('category', [], event__base_class) }}>{{ category }}</span>
+  {% if title and url %}
+    <div {{ bem('title', [], event__base_class) }}>
+      {% include "@atoms/controls/text-link/yds-text-link.twig" with {
+        link__content: title,
+        link__url: url,
+      } %}
+    </div>
+  {% endif %}
+  <time>{{ time }}</time>
+  {% embed "@atoms/lists/taxonomy/yds-tags-list.twig" with {
+    items: type,
+    visible_items: 2,
+    url: url,
+  } %}
+
+    {% block list_item %}
+      {{ item }}
+    {% endblock %}
+  {% endembed %}
+  {% if description %}
+    {% include "@atoms/typography/text/yds-text.twig" with {
+      text__base_class: 'description',
+      text__blockname: event__base_class,
+      text__content: description,
+    } %}
+  {% endif %}
+  {% if optional_link__content and optional_link__url %}
+    <div {{ bem('optional-link', [], event__base_class) }}>
+      {% include "@atoms/controls/text-link/yds-text-link.twig" with {
+        link__content: optional_link__content,
+        link__url: optional_link__url,
+      } %}
+    </div>
+  {% endif %}
+</li>

components/02-molecules/cards/reference-card/examples/event-calendar-card.yml

@@ -0,0 +1,7 @@
+title: BINYA! A celebration of the legacy of Binyavanga Wainaina at Yale
+category: A panel celebrating the legacy of author Binyavanga Wainaina.
+type: 'type'
+url: 'https://google.com/download.pdf'
+date: 2022-03-30 13:00
+optional_link__content: 'optional_link__content'
+optional_link__url: '/'

components/02-molecules/modal/_yds-modal.scss

@@ -0,0 +1,56 @@
+@use '../../00-tokens/tokens';
+@use '../../01-atoms/atoms';
+
+.modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgb(0 0 0 / 25%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal__container {
+  background-color: var(--color-basic-white);
+  box-shadow: var(--drop-shadow-level-1);
+  padding: var(--size-spacing-7);
+  width: 100%;
+  margin: var(--size-spacing-site-gutter);
+  max-height: calc(100vh - var(--size-spacing-site-gutter));
+  overflow-y: auto;
+
+  @media (min-width: tokens.$break-m) {
+    width: 42rem;
+  }
+}
+
+.modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--size-spacing-4);
+  margin-bottom: var(--size-spacing-8);
+}
+
+.micromodal-slide {
+  display: none;
+}
+
+.micromodal-slide.is-open {
+  display: block;
+}
+
+.modal__title {
+  @include tokens.h4-yale-new;
+
+  color: var(--color-gray-800);
+}
+
+.modal__close {
+  @include atoms.button-reset;
+
+  cursor: pointer;
+}

components/02-molecules/modal/modal.stories.js

@@ -0,0 +1,14 @@
+import modalTwig from './yds-modal.twig';
+import modalData from './modal.yml';
+import './yds-modal';
+
+export default {
+  title: 'Molecules/Modal',
+};
+
+export const Modal = (args) => {
+  return `
+    <button class="" data-micromodal-trigger="yds-modal" role="button"> Demo Modal </button>
+    ${modalTwig({ ...modalData, ...args })}
+`;
+};

components/02-molecules/modal/modal.yml

@@ -0,0 +1,3 @@
+id: 'yds-modal'
+title: 'Modal title'
+content: 'Modal content'

components/02-molecules/modal/yds-modal.js

@@ -0,0 +1,4 @@
+import MicroModal from 'micromodal';
+
+// Initialize MicroModal
+MicroModal.init();

components/02-molecules/modal/yds-modal.twig

@@ -0,0 +1,22 @@
+{% set modal__base_class = 'modal' %}
+{% set modal__attributes = {
+  class: bem(modal__base_class, [], [], ['micromodal-slide']),
+} %}
+<div {{ add_attributes(modal__attributes) }} id="{{ id }}" aria-hidden="true">
+  <div {{ bem('overlay', [], modal__base_class) }} tabindex="-1" data-micromodal-close>
+    <div {{ bem('container', [], modal__base_class) }} role="dialog" aria-modal="true" aria-labelledby="calendar-modal-title">
+      <div {{ bem('header', [], modal__base_class) }}>
+        <h4 {{ bem('title', [], modal__base_class) }}>{{ title }}</h4>
+        <button {{ bem('close', [], modal__base_class) }} aria-label="Close dialog" data-micromodal-close>
+          <i class="fa fa-close fa-1x"></i>
+        </button>
+      </div>
+      <div {{ bem('content', [], modal__base_class) }}>
+        {% if id == 'calendar-modal' %}
+          <ul {{ bem('calendar-events', [], modal__base_class) }}></ul>
+        {% endif %}
+        {{ content }}
+      </div>
+    </div>
+  </div>
+</div>

components/02-molecules/molecules.scss

@@ -15,6 +15,7 @@
 @forward './meta/basic-meta/yds-basic-meta';
 @forward './meta/event-meta/yds-event-meta';
 @forward './meta/profile-meta/yds-profile-meta';
+@forward './modal/yds-modal';
 @forward './page-title/yds-page-title';
 @forward './pager/yds-pager';
 @forward './wrapped-image/yds-wrapped-image';

components/03-organisms/calendar/_yds-calendar-cell.twig

@@ -0,0 +1,42 @@
+{% set modifier_classes = [] %}
+{% if is_today %}
+  {% set modifier_classes = modifier_classes|merge(['today']) %}
+{% endif %}
+{% if events is not empty %}
+  {% set modifier_classes = modifier_classes|merge(['events']) %}
+{% endif %}
+{% if is_disabled %}
+  {% set modifier_classes = modifier_classes|merge(['disabled']) %}
+{% endif %}
+<li {{ bem('day', modifier_classes, 'calendar') }} tabindex="-1" data-day="{{ data_day }}">
+  {% if year and month and day %}
+    <time datetime="{{ year ~ '-' ~ month ~ '-' ~ day }}">
+      <span {{ bem('day-name', [], 'calendar') }} aria-hidden="true" >{{ data_day }}</span>
+      <span {{ bem('day-date', [], 'calendar') }} aria-hidden="true">{{ day }}</span>
+      <span {{ bem('dialog-title', [], 'calendar', ['sr-only']) }}>{{ day }} {{ month_name }}, {{ year }}</span></time>
+  {% endif %}
+  {% if events is not empty %}
+    <ul {{ bem('day-events', [], 'calendar') }}>
+    {% for event in events %}
+      {% include "@molecules/cards/reference-card/event/_yds-calendar-cell-event.twig" with {
+        category: event.category,
+        title: event.title,
+        url: event.url,
+        time: event.time,
+        type: event.type,
+        description: event.description,
+        optional_link__content: event.optional_link__content,
+        optional_link__url: event.optional_link__url,
+      } %}
+    {% endfor %}
+  </ul>
+  {% endif %}
+  {% if events|length > 1 %}
+    {% include "@atoms/controls/base/yds-control.twig" with {
+      control__content: (events|length - 1) ~ ' more events'|t,
+      control__base_class: 'toggle',
+      control__blockname: 'calendar-event',
+      control__attributes: {'data-micromodal-trigger': 'calendar-modal'},
+    } %}
+  {% endif %}
+</li>