@ulu/frontend 0.1.0-beta.99 → 0.2.0-beta.10

package/resources/drupal/twig-macros/layout.twig

@@ -1,338 +0,0 @@
-{# 
-  Usage: 
-  {% import directory ~ '/templates/_macros/layout.twig' as layoutMacros %}
-#}
-
-{% macro quote(options) %}
-  {% set defaults = {
-    body: null,
-    author: null,
-    authorTitle: null,
-    authorPhoto: null,
-    bodyClasses: "type-large-x"
-  } %}
-  {% set options = defaults|merge(options) %}
-  <figure class="site-quote">
-    {# inline all was added incase editor field is output in here #}
-    <blockquote class="site-quote__body display-inline-all {{ options.bodyClasses }}">
-      {{ options.body }}
-    </blockquote>
-    {% if options.author %}
-      <figcaption class="site-quote__author">
-        {% if options.authorPhoto %}
-          <div class="site-quote__author-photo">
-            <div class="badge badge--small">
-              <div class="badge__inner">
-                {{ options.authorPhoto }}
-              </div>
-            </div>
-          </div>
-        {% endif %}
-        <strong class="site-quote__author-name">
-          {{ options.author }}
-        </strong>
-        {% if options.authorTitle %}
-          <span class="site-quote__author-title">
-            <span class="visually-hidden">, </span>
-            {{ options.authorTitle }}
-          </span>
-        {% endif %}
-        
-      </figcaption>
-    {% endif %}
-  </figure>
-{% endmacro %}
-
-{% macro videoSection(options) %}
-  {% set defaults = {
-    title: null,
-    body: null,
-    url: null,
-    image: null
-  } %}
-  {% set options = defaults|merge(options) %}
-  <div class="video-section">
-    <div data-grid="columns: 12, gutters-row: true">
-      <div data-grid-item="width: 6">
-        {% if options.title %}
-          <h2 class="h2">{{ options.title }}</h2>
-        {% endif %}
-        {% if options.body %}
-          <div class="wysiwyg crop-margins margin-bottom">
-            {{ options.body }}
-          </div>
-        {% endif %}
-        <a class="button" href="{{ options.url }}">
-          Watch Video
-          <span class="fas fa-play-circle" aria-hidden="true"></span>
-        </a>
-      </div>
-      {% if options.image %}
-        <div data-grid-item="width: 5, offset: 1">
-          <a class="video-section__link-image" href="{{ options.url }}">
-            {{ options.image }}
-          </a>
-        </div>
-      {% endif %}
-    </div>
-  </div>
-{% endmacro %}
-
-{% macro card(ctx, options) %}
-  {% set defaults = {
-    class: null,
-    title: null,
-    titleElement: "h3",
-    titleHref: null,
-    titleLabel: null,
-    titleClass: null,
-    aboveTitle: null,
-    content: null,
-    footer: null,
-    image: null,
-    iconClass: null,
-    proxyClick: true
-  } %}
-  {% set options = defaults|merge(options) %}
-  {% set hasProxyClick = options.proxyClick and options.titleHref %}
-  {% set attributes = create_attribute({ class: [ "card", "site-card", options.class ] }) %}
-  {% if hasProxyClick %}
-    {% set attributes = attributes.setAttribute("data-proxy-click", "") %}
-  {% endif %}
-  
-  {% set title %}
-    {% if options.titleLabel %}
-      <span class="site-card__label">{{  options.titleLabel }}</span>
-    {% endif %}
-    {{ options.aboveTitle }}
-    <span class="site-card__title">{{ options.title }}</span>
-  {% endset %}
-
-  <article {{ attributes }}>
-    <div class="card__body">
-      <{{ options.titleElement }} class="site-card__header">
-        {% if options.titleHref %}
-
-          {% set linkAttrs = create_attribute({ class: "site-card__link", href: options.titleHref }) %}
-          {% if options.proxyClick %}
-             {% set linkAttrs = linkAttrs.setAttribute("data-proxy-click-source", "") %}
-          {% endif %}
-          
-          <a {{ linkAttrs }}>{{ title  }}</a>
-        {% else %}
-          {{ title  }}
-        {% endif %}
-      </{{ options.titleElement }}>
-      {% if options.content %}
-        <div class="site-card__body">
-          {{ options.content }}
-        </div>
-      {% endif %}
-    </div>
-    <div class="card__image site-card__image">
-      {% if options.image %}
-        {{ options.image }}
-      {% else %}
-        <img src="/{{ ctx.directory }}/dist/images/default-card.svg"  alt="">
-      {% endif %}
-      {% if options.iconClass %}
-        <span class="site-card__image-icon {{ options.iconClass }}" aria-hidden="true"></span>
-      {% endif %}
-    </div>
-    {% if options.footer %}
-      <div class="card__footer">
-        {{ options.footer }}
-      </div>
-    {% endif %}
-  </article>
-{% endmacro %}
-
-{% macro sidebar(body, sidebar, options = {}) %}
-  {% set defaults = {
-    reversed: false,
-    reversedMobile: false,
-    bodyClasses: "",
-    sidebarClasses: "",
-    large: false
-  } %}
-  {% set options = defaults|merge(options) %}
-
-  {% set sidebarWidth = options.large ?  "width: 5" : "width: 4" %}
-  {% set bodyWidth = options.large ?  "width: 7" : "width: 8" %}
-  {% set classes = [
-    "layout-sidebar",
-    options.reversed ? "layout-sidebar--reversed",
-    options.reversedMobile ? "layout-sidebar--reversed-mobile",
-  ]|join(" ") %}
-  {% set bodyClasses = ["layout-sidebar__body", "crop-margins", options.bodyClasses]|join(" ") %}
-  {% set sidebarClasses = ["layout-sidebar__sidebar", "crop-margins", options.sidebarClasses ]|join(" ") %}
-  <div 
-    class="{{ classes }}"
-    data-grid="columns: 12; align: start, gutters-row: true, rules-column: right"
-  >
-    {% if options.reversed or options.reversedMobile %}
-      {# note: reversedMobile will set the order so that when the grid is active display: flex it
-      will appear on the side but on mobile non-grid sizes the order will not be used (on top) #}
-      <div 
-        class="{{ sidebarClasses }}" 
-        data-grid-item="{{ sidebarWidth }}"
-        style="{{ options.reversedMobile ? 'order: 2' }}"
-      >
-        {{ sidebar }}
-      </div>
-      <div class="{{ bodyClasses }}" data-grid-item="{{ bodyWidth }}">
-        {{ body }}
-      </div>
-    {% else %}
-      <div class="{{ bodyClasses }}" data-grid-item="{{ bodyWidth }}">
-        {{ body }}
-      </div>
-      {% if sidebar %}
-        <div class="{{ sidebarClasses }}" data-grid-item="{{ sidebarWidth }}">
-          {{ sidebar }}
-        </div>
-      {% endif %}
-    {% endif %}
-  </div>
-{% endmacro %}
-
-{% macro node(ctx, options = {}) %}
-  {% from _self import sidebar, responsiveImage %}
-  {% set defaults = {
-    label:              ctx.label,
-    
-    attributes:         ctx.attributes ? 
-                          ctx.attributes|without("role") : create_attribute(),
-    content_attributes: ctx.content_attributes ? 
-                          ctx.content_attributes : create_attribute(),
-    title_attributes:   ctx.title_attributes ? 
-                          ctx.title_attributes : create_attribute(),
-    parentTitle:        not ctx.menu_parent_title is empty ? 
-                          ctx.menu_parent_title : null,
-    body:               ctx.content.body|field_value is not empty ? 
-                          ctx.content.body|field_value : null,
-    sectioned_header:     ctx.content.field_header is not empty ? 
-                          ctx.content.field_header : null,
-    sectioned_body:     ctx.content.field_sectioned_content is not empty ? 
-                          ctx.content.field_sectioned_content : null,
-    sidebar:                  null,
-    sidebarOptions:           {},
-    badgeImage:               null,
-    bodyClass:                null,
-    belowBody:                null,
-    aboveBody:                null,
-    beforeBody:               null,
-    afterBody:                null,
-    beforeHeader:             null,
-    afterHeader:              null,
-    bodyContained:            true,
-    showBodyField:            true,
-    showSectionedBodyField:   true,
-    showHeaderField:          true,
-    showParentTitle:          true,
-  } %}
-
-  {% set options = defaults|merge(options) %}
-  {% set hasFieldBody = options.showBodyField and options.body %}
-  {% set hasFieldSectionedHeader = options.showHeaderField and options.sectioned_header %}
-  {% set hasFieldSectionedBody = options.showSectionedBodyField and options.sectioned_body %}
-  {% set hasBodyContent = hasFieldBody or hasFieldSectionedBody or options.aboveBody or options.belowBody  %}
-
-
-  {% set body %}
-    {{ options.aboveBody }}
-    {% if hasFieldSectionedBody %}
-      {{ options.sectioned_body }}
-    {% endif %}
-    {% if hasFieldBody %}
-      <div class="wysiwyg crop-margins crop-margins--first">
-        {{ options.body }}
-      </div>
-    {% endif %}
-    {{ options.belowBody }}
-  {% endset %}
-
-
-  {% set introClasses = [
-    "page__intro",
-  ] %}
-  <div{{ options.attributes }}>
-    <div class="{{ introClasses|join(' ') }}">
-      {% if hasFieldSectionedHeader %}
-        {{ options.beforeHeader }}
-        {{ options.sectioned_header }}
-        {{ options.afterHeader }}
-      {% else %}
-        {{ options.beforeHeader }}
-        <div class="">
-          <div class="">
-            <h1 {{ options.title_attributes.addClass("h1 page-title") }}>
-              {% if options.showParentTitle and options.parentTitle %}
-                <span class="headline-label">
-                  {{ options.parentTitle }}<span class="hidden-visually">:</span>
-                </span>
-              {% endif %}
-              {{ options.label }}
-            </h1>
-          </div>
-        </div>
-        {{ options.afterHeader }}
-      {% endif %}
-    </div>
-
-    <div class="page__content">
-      {{ options.beforeBody }}
-      {% if options.sidebar or hasBodyContent %}
-        <div class="page__content-body {{ options.bodyClass }}">
-          <div {{ options.content_attributes.addClass([
-            'page__content-body-inner', 
-            options.bodyContained and not hasFieldSectionedBody ? 'container'
-          ]) }}>
-            {% if options.sidebar %}
-              {{ sidebar(body, options.sidebar, options.sidebarOptions) }}
-            {% else %}
-              {{ body }}
-            {% endif %}
-          </div>
-        </div>
-      {% endif %}
-      {{ options.afterBody }}
-    </div>
-  </div>
-{% endmacro %} 
-
-
-{% macro responsiveImage(options) %}
-  {% set defaults = {
-    alt: "",
-    class: null,
-    classImage: null,
-    src: null,
-    srcMedium: null,
-    srcLarge: null
-  } %}
-  {% set options = defaults|merge(options) %}
-  {% if options.src %}
-    <picture class="{{ options.class }}">
-      {# These line up to the breakpoints in Sass #}
-      {% if options.srcMedium %}
-        <source srcset="{{ options.srcMedium }}" media="(min-width: 53.5em)">
-      {% endif %}
-      {% if options.srcLarge %}
-        <source srcset="{{ options.srcLarge }}" media="(min-width: 76em)">
-      {% endif %}
-      <img 
-        class="{{ options.classImage }}" 
-        src="{{ options.src }}" 
-        alt="{{ options.alt }}"
-      >
-    </picture>
-  {% elseif options.debug %}
-    {{ kint(options) }}
-  {% endif %}
-{% endmacro %}
-
-{#
-Usage:
-{% import directory ~ '/templates/_macros/element.twig' as elementMacros %}
-#}

package/resources/drupal/twig-macros/slider.twig

@@ -1,214 +0,0 @@
-{#
-* ==============================================================================
-* Slider
-* ==============================================================================
-*
-* @version 1.0.0
-*
-* @example
-*   {% import directory ~ '/templates/_macros/slider.twig' as sliderMacros %}
-* 
-*  @param {String} modifier Slider modifier class (BEM)
-*  @param {String} titleClass Class that goes on the slider's title (title is required)
-*  @param {String} titleElement Element for the title
-*  @param {Array<Markup>} slides Array of slides markup/HTML
-#}
-
-{% macro slider(options = {}) %}
-  {% set defaults = {
-    modifier: "default",
-    title: null,
-    titleClass: "hidden-visually",
-    titleElement: "h2",
-    slides: [],
-    slideClass: null,
-    pluginOptions: {}
-  } %}
-  {% set options = defaults|merge(options) %}
-  {% if options.slides|length %}
-    {% set markup %}
-      <div 
-        class="site-slider site-slider--{{ options.modifier }}" 
-        data-site-slider="{{ options.pluginOptions|json_encode }}"
-      >
-        <div class="site-slider__control-context" data-site-slider-control-context>
-          <div class="site-slider__track-crop" data-site-slider-track-container>
-            <ul class="site-slider__track" data-site-slider-track>
-              {% for slide in options.slides %}
-                <li class="site-slider__slide {{ options.slideClass }}" data-site-slider-slide>
-                  {{ slide }}
-                </li>
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-      </div>
-    {% endset %}
-    {# 
-      We define the region if the user passes a title (which is hidden) 
-      - else user needs to define the region and title so we just output the functional inner markup
-    #}
-    {% if options.title %}
-      {% set titleId = ctwig_uniqid("slider-title") %}
-      <section class="site-slider-region" aria-labelledby="{{ titleId }}">
-        <{{ options.titleElement }} class="{{ options.titleClass }}" id="{{ titleId }}">
-          {{ options.title }}
-        </{{ options.titleElement }}>
-        {{ markup }}
-      </section>
-    {% else %}
-      {{ markup }}
-    {% endif %}
-  {% endif %}
-{% endmacro %}
-
-{% macro sectionLayout(options) %}
-  {% from _self import slider %}
-  {% set defaults = {
-    title: null,
-    titleClass: "h2",
-    titleElement: "h2",
-    slides: [],
-    class: null,
-    modifier: "in-content"
-  } %}
-  {% set options = defaults|merge(options) %}
-  {% if options.slides|length %}
-    {% set titleId = ctwig_uniqid("slider-title") %}
-    <section class="slider-section-layout {{ options.class }}" aria-labelledby="{{ titleId }}">
-      <div class="slider-section-layout__title container-small no-padding-bottom">
-        <{{ options.titleElement }} class="{{ options.titleClass }}" id="{{ titleId }}">
-          {{ options.title }}
-        </{{ options.titleElement }}>
-      </div>
-      <div class="slider-section-layout__slides container no-padding-top">
-        {{ slider({ 
-          slides: options.slides, 
-          modifier: options.modifier,
-          pluginOptions: {
-            transitionFade: false
-          }
-        })}}
-      </div>
-    </section>
-  {% endif %}
-{% endmacro %}
-
-
-{% macro scrollSliderSection(options = {}) %}
-  {% from _self import scrollSlider %}
-  {% set defaults = {
-    title: null,
-    titleClass: "h2 h2--no-rule no-margin-bottom",
-    titleElement: "h2",
-    slides: [],
-    modifier: null,
-    titleContainerClasses: null
-  } %}
-  {% set options = defaults|merge(options) %}
-  {% if options.slides|length %}
-    {% set titleId = ctwig_uniqid("slider-title") %}
-    <section class="scroll-slider-section container-full" aria-labelledby="{{ titleId }}">
-      <div class="scroll-slider-section__title container-fit">
-        <{{ options.titleElement }} class="{{ options.titleClass }}" id="{{ titleId }}">
-          {{ options.title }}
-        </{{ options.titleElement }}>
-      </div>
-      <div class="scroll-slider-section__slides">
-        {{ scrollSlider({ 
-          slides: options.slides, 
-          modifier: options.modifier,
-          addEmptyEnds: true
-        })}}
-      </div>
-    </section>
-  {% endif %}
-{% endmacro %}
-
-{% macro scrollSlider(options = {}) %}
-  {% set defaults = {
-    modifier: "default",
-    slides: [],
-    slideClass: null,
-    addEmptyEnds: false,
-    pluginOptions: {}
-  } %}
-  {% set options = defaults|merge(options) %}
-  {% set emptySlide %}
-    <li 
-      class="scroll-slider__slide scroll-slider__slide--empty" 
-      role="presentation"
-      data-scroll-slider-slide
-    >
-      &nbsp;
-    </li>
-  {% endset %}
-  {% if options.slides|length %}
-    <div 
-      class="scroll-slider scroll-slider--{{ options.modifier }}" 
-      data-scroll-slider="{{ options.pluginOptions|json_encode }}"
-    >
-      <div class="scroll-slider__control-context" data-scroll-slider-control-context>
-        <div class="scroll-slider__track-crop" data-scroll-slider-track-container>
-          <ul class="scroll-slider__track" data-scroll-slider-track>
-            {% if options.addEmptyEnds %}
-              {{ emptySlide }}
-            {% endif %}
-            {% for slide in options.slides %}
-              <li class="scroll-slider__slide {{ options.slideClass }}" data-scroll-slider-slide>
-                {{ slide }}
-              </li>
-            {% endfor %}
-            {% if options.addEmptyEnds %}
-              {{ emptySlide }}
-            {% endif %}
-          </ul>
-        </div>
-      </div>
-    </div>
-  {% endif %}
-{% endmacro %}
-
-{# Note: From success gaps, scrapped for now #}
-{# {% macro imageLayout(options = {}) %}
-  {% set defaults = {
-    image: null,
-    title: null,
-    titleElement: "h3",
-    titleClass: "h3",
-    body: null,
-    bodyClass: "wysiwyg",
-    linkHref: null,
-    linkText: null,
-    linkClass: "button",
-    imageBefore: false
-  } %}
-  {% set options = defaults|merge(options) %}
-  <div class="site-slider__slide-inner">
-    
-    <div class="site-slider__slide-content">
-      {% if options.title %}
-        <{{ options.titleElement }} class="site-slider__slide-title {{ options.titleClass }}">
-          {{ options.title  }}
-        </{{ options.titleElement }}>
-      {% endif %}
-      {% if options.body %}
-        <div class="{{ options.bodyClass }}">
-          {{ options.body }}
-        </div>
-      {% endif %}
-      {% if options.linkText and options.linkHref %}
-        <p>
-          <a href="{{ options.linkHref }}" class="{{ options.linkClass }}">
-            {{ options.linkText }}
-          </a>
-        </p>
-      {% endif %}
-    </div>
-    {% if options.image %}
-      <div class="site-slider__slide-image {{ options.imageClass }}" style="{{ options.imageBefore ? 'order: -1;' }}">
-        {{ options.image }}
-      </div>
-    {% endif %}
-  </div>
-{% endmacro %} #}

package/resources/drupal/twig-macros/tabs.twig

@@ -1,84 +0,0 @@
-{#
-* ==============================================================================
-* Interactive tab Interface (Aria-tablist implementation)
-* ==============================================================================
-*
-* @version 1.0.2
-*
-* @example
-  {% import directory ~ '/templates/_macros/tabs.twig' as tabMacros %}
-  {{ set tabs = [
-    {
-      tab: "About",
-      panel: aboutMarkup
-    },
-    {
-      tab: "Directions",
-      panel: directionsMarkup
-    }
-  ] }}
-  {{ tabMacros.tabs(tabs, {} ) }}
-* @version 1.0.0
-* @param {Array[Tab]} tabs Array of config objects per tab/panel
-* @property {Object} item Config object example
-* @property {Markup} item.tab Markup to be included in tab button (no interactive)
-* @property {Markup} item.panel Markup to be included in panel
-* @property {Boolean} item.open This panel should be open by default
-* @param {Object} options Configuration
-* @param {Object} options.modifier Modifer class (needs to correspond with styling)
-#}
-
-{% macro tabs(tabs, options = {}) %}
-  {% set defaults = {
-    modifier: "default",
-    equalHeights: false,
-    openByUrlHash: false,
-    vertical: false,
-    fullpage: false,
-    panelContainer: false,
-    class: null,
-  } %}
-  {% set options = defaults|merge(options) %}
-  {% set idPrefix = ctwig_uniqid("site-tabs--") %}
-  {% set attributes = create_attribute({
-    class: [
-      "site-tabs",
-      options.vertical ? 'site-tabs--' ~ 'vertical',
-      options.fullpage ? 'site-tabs--' ~ 'fullpage',
-      options.modifier ? 'site-tabs--' ~ options.modifier,
-      options.class
-    ]
-  }) %}
-  {# {% set mods = mods|map((m) => "site-tabs--#{ m }")|join(" ") %} #}
-  <div {{ attributes }}>
-    <div 
-      class="site-tabs__tablist" 
-      data-site-tablist="{{ options|json_encode }}"
-      {{ options.vertical ? 'aria-orientation="vertical"' }}
-    >
-      {% for item in tabs %}
-        <button 
-          type="button"
-          id="{{ idPrefix }}-{{ loop.index }}"
-          {{ item.open ? 'aria-selected="true"' }}
-        >
-          {{ item.tab }}
-        </button>
-      {% endfor %}
-    </div>
-    {% for item in tabs %}
-      <div
-        class="site-tabs__tabpanel"
-        aria-labelledby="{{ idPrefix }}-{{ loop.index }}"
-      >
-        {% if options.fullpage or options.panelContainer %}
-          <div class="site-tabs__tabpanel-container">
-            {{ item.panel }}
-          </div>
-        {% else %}
-          {{ item.panel }}
-        {% endif %}
-      </div>
-    {% endfor %}
-  </div>
-{% endmacro %}