@ulu/frontend 0.0.23 → 0.1.0-beta.1

package/scss/components/_slider.scss

@@ -0,0 +1,241 @@
+////
+/// @group slider
+/// Slider/Carousal component that works with the ui/slider.js script
+////
+
+@use "sass:map";
+
+@use "../color";
+@use "../utils";
+@use "../breakpoint";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color [transparent] Background color for the entire slider section.
+/// @prop {List} breakpoint ["small"] Currently commented out @joe-check
+/// @prop {Dimension} margin-bottom [3rem] Bottom margin color for the entire slider section.
+/// @prop {Dimension} margin-top [1rem] Top margin color for the entire slider section.
+/// @prop {Dimension} padding-bottom [0] Bottom padding for individual slides.
+/// @prop {Dimension} padding-bottom-small [0] Smaller option for bottom padding for individual slides. Currently commented out @joe-check
+/// @prop {Dimension} padding-top [0] Top padding for individual slides.
+/// @prop {Dimension} padding-top-small [0] Smaller option for top padding for individual slides. Currently commented out @joe-check
+/// @prop {Color} button-background-color [transparent] Currently unused @joe-check
+/// @prop {Color} button-background-color-hover [color.get("link-hover")] Currently unused @joe-check
+/// @prop {CssValue} button-border [2px solid color.get("link")] Currently unused @joe-check
+/// @prop {Color} button-border-color-hover  [color.get("link-hover")] Currently unused @joe-check
+/// @prop {Dimension} button-border-radius [50%] Currently unused @joe-check
+/// @prop {Color} button-color [color.get("link")] Currently unused @joe-check
+/// @prop {Color} button-color-hover [white] Currently unused @joe-check
+/// @prop {Dimension} button-font-size [1.35rem] Currently unused @joe-check
+/// @prop {Dimension} button-font-size-small [false] Currently unused @joe-check
+/// @prop {Dimension} button-icon-offset-x [false] Offsets the control icons in from their respective sides. @joe-check
+/// @prop {Dimension} button-icon-offset-y [false] Offsets the control options down by adding a margin. 
+/// @prop {Dimension} button-margin [0.75rem] The margin between the controls and the slide content when using .slider__slide-gap-for-controls
+/// @prop {Dimension} button-margin-small [0.75rem] Currently commented out @joe-check
+/// @prop {Dimension} button-size [3rem] Size of the button. Likely antiquated and replaced with button-width and button-height
+/// @prop {Dimension} button-size-small [false] Currently commented out @joe-check
+/// @prop {Color} dot-background-color [transparent] The color of the dot when unselected.
+/// @prop {Color} dot-background-color-hover [color.get("link")] The color of the dot when hovered.
+/// @prop {Color} dot-background-color-selected [color.get("link")] The color of the dot when selected.
+/// @prop {Dimension} dot-border-radius [50%] The border-radius of the dot.
+/// @prop {Color} dot-border-color [color.get("link")] The border color of the dot.
+/// @prop {Color} dot-border-color-hover [color.get("link")] The border color of the dot when hovered.
+/// @prop {Color} dot-border-color-selected [color.get("link")] The border color of the dot when selected.
+/// @prop {Dimension} dot-border-width [2px] The border width of the dot.
+/// @prop {Dimension} dot-size  [1rem] The height and width of the dot.
+/// @prop {Dimension} button-height  [1rem] The height of the button.
+/// @prop {Dimension} button-width  [1rem] The width of the button.
+
+$config: (
+  "background-color" : transparent,
+  "breakpoint" : "small",
+  "margin-bottom" : 3rem,
+  "margin-top" : 1rem,
+  "button-background-color" : transparent,
+  "button-border" : 2px solid color.get("link"),
+  "button-border-color-hover" :  color.get("link-hover"),
+  "button-border-radius" : 50%,
+  "button-color-hover" : white,
+  "button-background-color-hover" : color.get("link-hover"),
+  "button-color" : color.get("link"),
+  "button-font-size" : 1.35rem,
+  "button-icon-offset-x" : 2rem,
+  "button-icon-offset-y" : false,
+  "button-font-size-small" : false,
+  "button-margin" : 2rem,
+  "button-margin-small" : 0.75rem,
+  "button-size" : 3rem,
+  "button-size-small" : false,
+  "button-height": 2.5rem,
+  "button-width": 2.5rem,
+  "dot-background-color" : transparent,
+  "dot-background-color-hover" : color.get("link"),
+  "dot-background-color-selected" : color.get("link"),
+  "dot-border-color" : color.get("link"),
+  "dot-border-color-hover" : color.get("link"),
+  "dot-border-color-selected" : color.get("link"),
+  "dot-border-radius" : 50%,
+  "dot-border-width" : 2px,
+  "dot-size" :  1rem,
+  "padding-bottom" : 0,
+  "padding-bottom-small" : 0,
+  "padding-top" : 0,
+  "padding-top-small" : 0,
+  ) !default;
+  
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss - General example
+///   @include ulu.component-slider-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss - General example
+///   @include ulu.component-slider-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, 'slider [config]');
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-slider-styles();
+
+@mixin styles {
+  $prefix: selector.class("slider");
+  $prefix-plugin: selector.class("Slider");
+  $slide-padding-x: get("button-width") + get("button-margin");
+  #{ $prefix } {
+    position: relative; // for controls
+    background-color: get("background-color");
+    margin: get("margin-top") 0 get("margin-bottom") 0;
+  }
+  #{ $prefix }__track,
+  #{ $prefix-plugin }__controls,
+  #{ $prefix-plugin }__nav {
+    list-style: none !important;
+    padding-left: 0;
+  }
+  #{ $prefix-plugin }__control-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+  }
+  @if get("button-icon-offset-y") {
+    #{ $prefix-plugin }__control-icon {
+      margin-top: get("button-icon-offset-y");
+    }
+  }
+  #{ $prefix-plugin }__nav {
+    display: flex;
+    justify-content: center;
+    li {
+      margin: 0.5rem 0.15rem;
+    }
+  }
+  #{ $prefix-plugin }__nav-button {
+    display: block;
+    width: get("dot-size");
+    height: get("dot-size");
+    background-color: get("dot-background-color");
+    border: get("dot-border-width") solid get("dot-border-color");
+    border-radius: get("dot-border-radius");
+    &:hover {
+      background-color: get("dot-background-color-hover");
+    }
+  }
+  #{ $prefix-plugin }__nav-button--active,
+  #{ $prefix-plugin }__nav-button--active:hover {
+    background-color: get("dot-background-color-selected");
+    border-color: get("dot-border-color-selected");
+  }
+  #{ $prefix-plugin }__control-button,
+  #{ $prefix-plugin }__nav-button {
+    transition-property: color, background-color, border-color;
+    transition-duration: 300ms;
+  }
+  #{ $prefix }__title {
+    margin-top: -1.5rem !important;
+    margin-bottom: 1rem !important;
+    padding-bottom: 1rem;
+    text-align: center;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+  }
+  #{ $prefix }__track {
+    // @daniel test this
+    #{ $prefix }--vertical-center & {
+      align-items: center;
+    }
+  }
+  // Options inner container to limit the controls to the just the track aria
+  // in order to exclude the dots/nav from the positioning of the controls
+  #{ $prefix }__control-context {
+    position: relative;
+  }
+  #{ $prefix }__slide {
+    margin: 0;
+    // @if (get("button-size-small")) {
+    //   @include breakpoint.max(get("breakpoint")) {
+    //     $bp-slide-padding: get("button-size-small") + get("button-margin-small");
+    //     padding: get("padding-top-small") $bp-slide-padding get("padding-bottom-small") $bp-slide-padding;
+    //   }
+    // }
+  }
+  // @joe-check should we remove this modifier for universal slide padding in favor of the individualized modifiers below?
+  #{ $prefix }--slide-control-margins {
+    #{ $prefix }__slide {
+      padding: get("padding-top") $slide-padding-x get("padding-bottom") $slide-padding-x;
+    }
+  }
+  #{ $prefix }__slide-gap-for-controls {
+    $padding:  get("button-width") + get("button-margin");
+    padding-left: $padding;
+    padding-right: $padding;
+  }
+  #{ $prefix-plugin }__control-button--previous {
+    left: 0;
+    @if get("button-icon-offset-x")  {
+      #{ $prefix-plugin }__control-icon {
+        margin-left: get("button-icon-offset-x");
+      }
+    }
+  }
+  #{ $prefix-plugin }__control-button--next {
+    right: 0;
+    @if get("button-icon-offset-x")  {
+      #{ $prefix-plugin }__control-icon {
+        margin-right: get("button-icon-offset-x");
+      }
+    }
+  }
+  #{ $prefix }--inset-controls {
+    #{ $prefix }__slide-gap-for-controls {
+      $padding: get("button-width") + get("button-margin") + get("button-icon-offset-x");
+      padding-left: $padding;
+      padding-right: $padding;
+    }
+    #{ $prefix-plugin }__control-button--previous {
+      left: 0;
+      @if get("button-icon-offset-x")  {
+        &#{ $prefix-plugin }__control-icon {
+          margin-left: get("button-icon-offset-x");
+          
+        }
+      }
+    }
+    #{ $prefix-plugin }__control-button--next {
+      right: 0;
+      @if get("button-icon-offset-x")  {
+        &#{ $prefix-plugin }__control-icon {
+          margin-right: get("button-icon-offset-x");
+        }
+      }
+    }
+  }
+}

package/scss/components/_spoke-spinner.scss

@@ -0,0 +1,193 @@
+////
+/// @group spoke-spinner
+/// A spoke style spinner/loader icon, requires ulu.base-keyframes
+////
+
+@use "sass:map";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+
+/// Module Settings
+/// @type Map
+
+$config: (
+  "size" : 48px,
+  "spoke-width" : 3px,
+  "spoke-height" : 12px,
+  "color" : "accent",
+  "border-radius" : 2px,
+  "duration" :  1.2s
+) !default;
+
+/// Map of other sizes (use as modifiers), same properties as config/defaults
+$styles: () !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-spoke-spinner-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Set tag styles 
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-styles($changes, $merge-mode: null) {
+  $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-spoke-spinner-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "spoke-spinner [config]");
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-spoke-spinner-styles();
+/// @example html Example markup
+/// <div class="spoke-spinner">
+///   <div class="spoke-spinner__spinner">
+///     <div></div>
+///     <div></div>
+///     <div></div>
+///     <div></div>
+///     <div></div>
+///     <div></div>
+///     <div></div>
+///     <div></div>
+///     <div></div>
+///     <div></div>
+///     <div></div>
+///     <div></div>
+///   </div>
+/// </div>
+
+@mixin styles {
+  $prefix: selector.class("spoke-spinner");
+
+
+  $size: get("size");
+  $sizeHalf: math.div($size, 2);
+
+  $spoke-width: get("spoke-width");
+  $spoke-widthHalf: math.div($spoke-width, 2);
+
+  #{ $prefix } {
+    position: relative;
+    vertical-align: middle; // When used as inline-block
+  }
+  #{ $prefix }__spinner {
+    display: inline-block;
+    position: relative;
+    width: $size;
+    height: $size;
+  }
+  #{ $prefix }__spinner div {
+    transform-origin: $sizeHalf $sizeHalf;
+    animation: UluFadeOut get("duration") linear infinite;
+  }
+  #{ $prefix }__spinner div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: $sizeHalf - $spoke-widthHalf;
+    width: $spoke-width;
+    height: get("spoke-height");
+    border-radius: get("border-radius");
+    background: color.get(get("color"));
+  }
+  #{ $prefix }__spinner div:nth-child(1) {
+    transform: rotate(0deg);
+    animation-delay: -1.1s;
+  }
+  #{ $prefix }__spinner div:nth-child(2) {
+    transform: rotate(30deg);
+    animation-delay: -1s;
+  }
+  #{ $prefix }__spinner div:nth-child(3) {
+    transform: rotate(60deg);
+    animation-delay: -0.9s;
+  }
+  #{ $prefix }__spinner div:nth-child(4) {
+    transform: rotate(90deg);
+    animation-delay: -0.8s;
+  }
+  #{ $prefix }__spinner div:nth-child(5) {
+    transform: rotate(120deg);
+    animation-delay: -0.7s;
+  }
+  #{ $prefix }__spinner div:nth-child(6) {
+    transform: rotate(150deg);
+    animation-delay: -0.6s;
+  }
+  #{ $prefix }__spinner div:nth-child(7) {
+    transform: rotate(180deg);
+    animation-delay: -0.5s;
+  }
+  #{ $prefix }__spinner div:nth-child(8) {
+    transform: rotate(210deg);
+    animation-delay: -0.4s;
+  }
+  #{ $prefix }__spinner div:nth-child(9) {
+    transform: rotate(240deg);
+    animation-delay: -0.3s;
+  }
+  #{ $prefix }__spinner div:nth-child(10) {
+    transform: rotate(270deg);
+    animation-delay: -0.2s;
+  }
+  #{ $prefix }__spinner div:nth-child(11) {
+    transform: rotate(300deg);
+    animation-delay: -0.1s;
+  }
+  #{ $prefix }__spinner div:nth-child(12) {
+    transform: rotate(330deg);
+    animation-delay: 0s;
+  }
+
+  // Map of config props needed for a new style, omitting props like color that aren't required
+  $required: (
+    "size" : get("size"),
+    "spoke-width" : get("spoke-width"),
+    "spoke-height" : get("spoke-height"),
+  );
+
+  @each $name, $style in $styles {
+    $merged: map.merge($required, $style);
+
+    $size: map.get($merged, "size");
+    $sizeHalf: math.div($size, 2);
+
+    $spoke-width: map.get($merged, "spoke-width");
+    $spoke-widthHalf: math.div($spoke-width, 2);
+
+    #{ $prefix }--#{ $name } {
+      #{ $prefix }__spinner {
+        width: $size;
+        height: $size;
+      }
+      #{ $prefix }__spinner div {
+        transform-origin: $sizeHalf $sizeHalf;
+        animation-duration: map.get($merged, "duration");
+      }
+      #{ $prefix }__spinner div:after {
+        left: $sizeHalf - $spoke-widthHalf;
+        width: $spoke-width;
+        height: map.get($merged, "spoke-height");
+        border-radius: map.get($merged, "border-radius");
+        background: color.get(map.get($merged, "color"));
+      }
+    }
+  }
+}

package/scss/components/_tabs.scss

@@ -0,0 +1,179 @@
+////
+/// @group tabs
+/// Tab interface component styles, for aria based tab interface
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "../color";
+@use "../selector";
+@use "../breakpoint";
+@use "../element";
+@use "../utils";
+
+// Used for function fallback
+$-fallbacks: (
+  "tablist-border-bottom" : (
+    "function" : meta.get-function("get-rule-style", false, "element"),
+    "arguments" : ("light",)
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} border-radius [8px] The border radius of the tabs.
+/// @prop {Dimension} border-width [0.25em] The width of the tab border.
+/// @prop {Dimension} margin [2rem] The gap between tabs and above and below tabs.
+/// @prop {Dimension} print-margin [1.5em] Margin between tabs when stacked for print
+/// @prop {CssValue} tablist-border-bottom [true] The bottom border of the tabs. If set to true, will use the element.scss property for "get-rule-style".
+/// @prop {Color} tabpanel-background-color [rgb(245, 245, 245)] The tabpanel background color.
+/// @prop {Color} tab-border-color-selected [currentColor] The border color when selected.
+/// @prop {String} tab-color [link] The type color for the tabs. This uses color.scss, so the value of this options should be a variable from color.scss.
+/// @prop {String} tab-color-hover [link-hover] The type color for the tabs when hovered or focused. This uses color.scss, so the value of this options should be a variable from color.scss.
+/// @prop {String} tab-color-selected [selected] The tab type color when selected. This uses color.scss, so the value of this options should be a variable from color.scss.
+
+$config: (
+  "border-radius" : 8px,
+  "border-width" : 0.25em,
+  "margin" : 2rem,
+  "print-margin" : 1.5em,
+  "tablist-border-bottom" : true,
+  "tabpanel-background-color" : rgb(245, 245, 245),
+  "tab-border-color-selected" : currentColor,
+  "tab-color" : "link",
+  "tab-color-hover" : "link-hover",
+  "tab-color-selected" : "selected",
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-tabs-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-tabs-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "component-tabs [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-tabs-styles();
+
+@mixin styles {
+  @include utils.file-header("component", "tabs");
+
+  $prefix: selector.class("tabs");
+
+  #{ $prefix } {
+    margin-bottom: get("margin");
+    margin-top: get("margin");
+    [role="tablist"] {
+      position: relative;
+      z-index: 2;
+      display: flex; 
+      overflow-x: auto;
+      margin-bottom: -1px;
+      border-bottom: get("tablist-border-bottom");
+    }
+    [role="tab"] {
+      display: block;
+      position: relative; 
+      cursor: pointer;
+      padding: 0.75em 0.1em 0.75em 0.1em;
+      color: color.get(get("tab-color"));
+      font-weight: bold;
+      border-bottom: get("border-width") solid transparent;
+      text-align: center;
+      white-space: nowrap;
+      &:not(:first-child) {
+        margin-left: 1.25em;
+        @include breakpoint.min("small") {
+          margin-left: 2em;
+        }
+      }
+      &:hover {
+        color: color.get(get("tab-color-hover"));
+      }
+      &:hover,
+      &:focus,
+      &[aria-selected="true"] {
+        border-bottom-color: currentColor;
+      }
+      &[aria-selected="true"] {
+        color: color.get(get("tab-color-selected"));
+        border-bottom-color: get("tab-border-color-selected");
+        opacity: 1;
+      }
+    }
+    [role="tabpanel"] {
+      position: relative;
+      z-index: 1;
+      padding: 2rem get("margin");
+      margin-bottom: -1px;
+      overflow: hidden;
+
+      background-color: get("tabpanel-background-color");
+      [class*="video-embed"],
+      .full-width-image {
+        margin-left: -(get("margin"));
+        margin-right: -(get("margin"));
+        width: calc(100% + #{ get("margin")  * 2 });
+        max-width: none;
+        &:first-child {
+          margin-top: -2rem;
+        }
+        &:last-child {
+          margin-bottom: -2rem;
+        }
+      }
+    }
+  }
+  #{ $prefix }--transparent {
+    [role="tablist"] {
+      background-color: transparent;
+      box-shadow: none;
+      padding-left: 0;
+      padding-right: 0;
+    }
+    [role="tabpanel"] {
+      background-color: transparent;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  #{ $prefix }--full-width {
+    > [role="tablist"] {
+      justify-content: safe center;
+      box-shadow: 0 4px 4px rgba(0,0,0,0.2);
+    }
+    >[role="tabpanel"] {
+      background-color: transparent;
+      padding: 0;
+    }
+  }
+  // Display all tabs during print
+  #{ $prefix }--print {
+    @media print {
+      [role="tablist"] {
+        display: none;
+      }
+      [role="tabpanel"] {
+        display: block;
+        + [role="tabpanel"] {
+          margin-top: get("print-margin");
+        }
+      }
+    }
+  }
+}