@ulu/frontend 0.0.23 → 0.1.0-beta.1

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

@@ -0,0 +1,214 @@
+{#
+* ==============================================================================
+* 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

@@ -0,0 +1,84 @@
+{#
+* ==============================================================================
+* 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 %}

package/scss/README.md

@@ -55,4 +55,16 @@
     - Could use a global config/theme and allow that to be set with "with"
     - Or allow the user to configure the modules and not try and group modules
       - One flat list
-    - Needs more thought
+    - Needs more thought
+
+  ### Naming Convention for Config Options
+
+  - When naming config options, the hierarchy is: Element, Styling, State of Element
+    - For Example: icon-color-hover = element-styling-state
+  
+  ### Organizing Config Options
+  
+  - Config options are alphabetized with the following exceptions.
+    - If the options has 3 or more matching first word, they are grouped together at the bottom. (ie: icon-background-color, icon-margin, icon-size)
+    - Any maps go at the very bottom. This is to help with scanning the rest of the options
+    <!-- add a section about how to document the modules. Add the naming convention rules and the alphabetizing rules -->

package/scss/_breakpoint.scss

@@ -1,28 +1,28 @@
 ////
 /// @group breakpoint
+/// Utilities for working with breakpoints
 ////
 
 @use "sass:map";
-@use "calculate";
 @use "utils";
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} base  [16px] Assumed pixel base, can change based on users font settings so this is just o get us in the ballpark). Note this is not the base font size but the user agent's or user's browser preferernce. This number is just being used for calculating estimated em sizes from average base. Since pixels are easier to understand but since we allow the user to set their font size. All of our css is relative to that, including most of the layout (rems, other relative units)
-/// @prop {Number} gap  [0.01em] The amount to offset min from max media queries incase you are using both (ie prevent overlap)
-/// @prop {String} null-name ["none"] The name of the space from 0 to the first breakpoint (doesn't really matter) used when passing breakpoints to JS via content property
-/// @prop {String} default ["small"] The name of the breakpont that is considered the major change (ie desktop to mobile) used by other modules/components
+/// @prop {Number} base  [16px] Assumed pixel base, can change based on users font settings so this is just to get us in the ballpark. Note this is not the base font size but the user agent's or user's browser preference. This number is just being used for calculating estimated em sizes from average base. Since pixels are easier to understand but since we allow the user to set their font size. All of our css is relative to that, including most of the layout (rems, other relative units)
+/// @prop {Number} gap  [0.01em] The amount to offset min from max media queries incase you are using both (prevent overlap)
+/// @prop {String} null-name ["none"] The name of the space from 0 to the first breakpoint (doesn't really matter) used when passing breakpoints to JS via content property (see breakpoint.embed-for-scripts() or cssvar.declare-breakpoint-sizes()) to pass breakpoints to JS. The js ui/breakpoints.js module provides methods for interacting with breakpoints in JS.
+/// @prop {String} default ["small"] The name of the breakpoint that is considered the major change (ie desktop to mobile) used by other modules/components
 
 $config: (
   "base":      16px,
+  "default" :  "small",
   "gap":       0.01em,
   "null-name": "none",
-  "default" :  "small"
 ) !default;
 
 /// Change modules $config
 /// @example scss Change default name
-///   @include breakpoint.set(( "default" : "mini" ));
+///   @include ulu.breakpoint-set(( "default" : "mini" ));
 /// @param {Map} $changes Map of changes
 
 @mixin set($changes) {
@@ -31,7 +31,7 @@ $config: (
 
 /// Get a config option
 /// @example scss Get default breakpoint name
-///   $default: breakpoint.get("default");
+///   $default: ulu.breakpoint-get("default");
 /// @param {Map} $name Name of property
 /// @return {*} Property Value
 
@@ -39,38 +39,39 @@ $config: (
   @return utils.require-map-get($config, $name, 'breakpoint [config]');
 }
 
-
-/// The default breakpoint sizes (targets are not precise, using em's)
+/// The default breakpoint sizes
 /// - Map of breakpoints
 /// - Each property is the breakpoints name
-/// - Each value is that breakpoints point (set in em)
+/// - Each value is that breakpoints point (set in em by default)
 /// @type Map
 
 $sizes: (
-  "small"  : calculate.pixel-to-em(680px, get("base")),
-  "medium" : calculate.pixel-to-em(1200px, get("base")),
-  "large"  : calculate.pixel-to-em(1500px, get("base"))
+  "small"  : utils.pixel-to-em(680px, get("base")),
+  "medium" : utils.pixel-to-em(1200px, get("base")),
+  "large"  : utils.pixel-to-em(1500px, get("base"))
 ) !default;
 
 /// Update the breakpoint sizes map
 /// @example scss Changing the medium breakpoint and adding jumbo
-///   @include breakpoints.set((
+///   @include ulu.breakpoints-set-sizes((
 ///     "medium" : 50em,
 ///     "jumbo" : 100em
 ///   ));
 /// @param {Map} $changes A map to merge into the breakpoints map
-/// @param {Map} $merge-mode [null] Merge stradegy see, utils.map-merge options
+/// @param {Map} $merge-mode [null] Merge strategy see, utils.map-merge options
 
 @mixin set-sizes($changes, $merge-mode: null) {
   $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
 }
 
-/// Get all breakpoint sizes (ie. $sizes) 
+/// Get all breakpoint sizes
+/// @return {Map} Map of breakpoints (equivalent to $sizes)
+
 @function get-sizes() {
   @return $sizes;
 }
 
-/// Geta a specific size
+/// Get a specific breakpoint's raw value/size
 /// @param {String} $size The name of the size to get
 /// @return {Number} The sizes value
  
@@ -78,6 +79,18 @@ $sizes: (
   @return utils.require-map-get($sizes, $size, "breakpoint size");
 }
 
+/// Get a specific breakpoint's size's value and optionally specify max to get the ending/max value for a breakpoint
+/// @param {Boolean} $max [false] Get the max value
+/// @return {Number} The value for the given size
+
+@function get-size-value($size, $max: false) {
+  @if ($max) {
+    @return get-size($size) - get("gap");
+  } @else {
+    @return get-size($size);
+  }
+}
+
 /// Check if a specific size exist
 /// @param {String} $name The breakpoint size to check if exists
 /// @return {Boolean} 
@@ -89,7 +102,7 @@ $sizes: (
 
 /// Create a media query that matches the min-width for a given size
 /// @example scss
-///   @include breakpoints.min("small") {
+///   @include ulu.breakpoints-min("small") {
 ///     // Your styles
 ///   }
 /// @example css
@@ -100,7 +113,7 @@ $sizes: (
 
 @mixin min($size) {
   // Adding the small fraction to prevent overlap
-  $min: get-size($size); 
+  $min: get-size-value($size); 
   @media screen and (min-width: $min) {
     @content;
   }
@@ -119,7 +132,7 @@ $sizes: (
 
 @mixin max($size) {
   // Adding the small fraction to prevent overlap
-  $max: get-size($size) - get("gap"); 
+  $max: get-size-value($size, true); 
   @media screen and (max-width: $max) {
     @content;
   }
@@ -147,7 +160,7 @@ $sizes: (
 }
 
 /// Create a media query from a specific size in either direction 
-/// - This is for mostly programmatic usage, so that a user could pass a breakpoint confiuration in either direction
+/// - This is for mostly programmatic usage, so that a user could pass a breakpoint configuration that may contain values that go in either direction
 /// - This way you don't need to repeat conditions (ie if min ... else ...)
 /// @example scss
 ///   $size: map.get($user-breakpoint, "size");
@@ -172,9 +185,39 @@ $sizes: (
   }
 }
 
-/// Attaches breakpoints to an element psuedo content for access via script
-/// - Note you can also use cssvar.declare-breakpoints to get a similiar implementation with css custom-properties
-/// - Use with ulu/js/breakpoints. Breakpoints always min-width (upwards) for javascript setup
+/// Utility Method for iterating over a map of breakpoints and apply styles
+/// @example scss
+///   @include breakpoints.fromEach($breakpoints) using ($props) {
+///     width: map.get($props, "width");
+///   }
+/// @param {String} $breakpoints A map with breakpoints direction will be pulled from each items "direction" property, if direction is missing and no breakpoint will wrap the code
+/// @param {String} $options A map with options to change the behavior
+/// @param {Boolean} $options.directionRequired Require direction throw error if missing direction
+
+@mixin from-each($breakpoints, $options: ()) {
+  $directionRequired: map.get($options, "directionRequired");
+  @each $name, $props in $breakpoints {
+    $direction: map.get($props, "direction");
+    // If direction print with breakpoint
+    @if ($direction) {
+      @include from($name, $direction) {
+        @content($props);
+      }
+    // If user requires direction throw error if missing
+    } @else if ($directionRequired) {
+      @debug $breakpoints;
+      @error 'ULU: Missing required "direction" in breakpoints map (above).';
+    // Else direction wasn't required print without media query (useful for default style)
+    } @else {
+      @content($props);
+    }
+  }
+}
+
+/// Attaches breakpoints to an element pseudo content for access via script
+/// - Note you can also use cssvar.declare-breakpoints to get a similar implementation with css custom-properties
+/// - Use with ulu/js/breakpoints (class has options for content property or css custom property)
+/// - Breakpoints always min-width (upwards) for javascript setup
 
 @mixin embed-for-scripts() {
   &:before {
@@ -186,4 +229,4 @@ $sizes: (
       }
     }
   }
-}
+}