@ulu/frontend 0.0.22 → 0.1.0-beta.0

package/scss/components/_pull-quote.scss

@@ -0,0 +1,111 @@
+////
+/// @group pull-quote
+////
+/// Layout for a pull quote, relies on badge component for image
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "../selector";
+@use "../typography";
+@use "../utils";
+@use "../color";
+
+// Used for function fallback
+$-fallbacks: (
+  "body-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {} body-line-height [true]
+/// @prop {} image-margin-bottom [1rem]
+/// @prop {} image-margin-top [2.5rem]
+/// @prop {} name-margin-bottom [1rem]
+/// @prop {} padding-y [2em]
+/// @prop {} title-font-style [italic]
+/// @prop {} quote-mark-character ["\201c"]
+/// @prop {} quote-mark-color [null]
+/// @prop {} quote-mark-font-family ["Georgia"]
+/// @prop {} quote-mark-font-size [3.75em]
+/// @prop {} quote-mark-enabled [true]
+/// @prop {} quote-mark-line-height [0.35]
+
+$config: (
+  "body-line-height" : true,
+  "image-margin-bottom" : 1rem,
+  "image-margin-top" : 2.5rem,
+  "name-margin-bottom" : 1rem,
+  "padding-y" : 2em,
+  "title-font-style" : italic,
+
+  "quote-mark-character" : "\201c",
+  "quote-mark-color" : null,
+  "quote-mark-font-family" : "Georgia",
+  "quote-mark-font-size" : 3.75em,
+  "quote-mark-enabled" : true,
+  "quote-mark-line-height" : 0.35,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-pull-quote-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-pull-quote-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "pull-quote [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-pull-quote-styles();
+
+@mixin styles {
+  $prefix: selector.class("pull-quote");
+
+  #{ $prefix } {
+    padding: get("padding-y") 0;
+    text-align: center;
+  }
+  #{ $prefix }__body {
+    line-height: get("body-line-height");
+    @if (get("quote-mark-enabled")) {
+      &:before {
+        display: block;
+        position: relative;
+        // content: open-quote;
+        content: get("quote-mark-character");
+        font-family: get("quote-mark-font-family");
+        color: color.get(get("quote-mark-color"));
+        font-size: get("quote-mark-font-size");
+        margin: 0 auto;
+        line-height: get("quote-mark-line-height");
+      }
+    }
+  }
+  #{ $prefix }__author-name {
+    display: block;
+    margin-top: get("name-margin-bottom");
+  }
+  #{ $prefix }__author-title {
+    display: block;
+    font-style: get("title-font-style");
+  }
+  #{ $prefix }__author-image {
+    margin: get("image-margin-top") auto get("image-margin-bottom") auto;
+    width: min-content;
+  }
+}

package/scss/components/_ratio-box.scss

@@ -0,0 +1,64 @@
+////
+/// @group ratio-box
+////
+/// Uses padding trick to keep ratio. Defaults to 4:3 (standard). Used for responsive iframe or images (object-fit), etc
+
+@use "sass:map";
+@use "../utils";
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} size [75%] Default height ratio (of width 100%)
+/// @prop {Map} sizes [Map] Other ratios to add (apply with modifier class)
+
+$config: (
+  "size" : 75%,
+  "sizes" : (
+    "16x9" : 56.25%,
+    "9x16" : 177.77%,
+    "3x4" : 133.33%
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-ratio-box-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-ratio-box-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "ratio-box [config]");
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-ratio-box-styles();
+
+@mixin styles {
+  .ratio-box {
+    position: relative;
+    overflow: hidden;
+    padding: get("size") 0 0 0; 
+  }
+  .ratio-box__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+  @each $name, $size in get("sizes") {
+    .ratio-box--#{ $name } {
+      padding-top: $size; 
+    }
+  }
+}

package/scss/components/_rule.scss

@@ -10,19 +10,20 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} $config.short-width Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output
-/// @prop {Number} $config.short-border-width Short rule width of border
+/// @prop {Number} short-border-width [4px] Short rule width of border
+/// @prop {Number} short-modifiers [false] @joe-check
+/// @prop {Number} short-width [2.75rem] Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output
 
 $config: (
-  "short-width" : 2.75rem,
   "short-border-width" : 4px,
-  "short-modifiers" : false
+  "short-modifiers" : false,
+  "short-width" : 2.75rem,
 ) !default;
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example scss - General example, replace module-name with module's name
-///   @include module-name.set(( "property" : value ));
+/// @example
+///   @include ulu.component-rule-set(( "property" : value ));
 
 @mixin set($changes) {
   $config: map.merge($config, $changes) !global;
@@ -30,14 +31,16 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example scss - General example, replace module-name with module's name
-///   @include module-name.get("property");
+/// @example
+///   @include ulu.component-rule-get("property");
 
 @function get($name) {
   @return utils.require-map-get($config, $name, "rule [config]");
 }
 
 /// Output styles
+/// @example scss
+///  @include ulu.component-rule-styles();
 
 @mixin styles {
 
@@ -73,7 +76,7 @@ $config: (
     }
   }
 
-  // Meant to be user by tself without content
+  // Meant to be user by itself without content
   $short-width: get("short-width");
   @if ($short-width) {
     #{ $class }--short {

package/scss/components/_scroll-slider.scss

@@ -0,0 +1,204 @@
+////
+/// @group scroll-slider
+/// Overflow scrolling slider component (use with ui/overflow-scroller.js)
+////
+
+@use "sass:map";
+
+@use "../element";
+@use "../color";
+@use "../utils";
+@use "../layout";
+@use "../breakpoint";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color  [false]
+/// @prop {String} container  ["container"]
+/// @prop {List} containers  [("container",)]
+/// @prop {Dimension} margin-bottom  [3rem]
+/// @prop {Dimension} margin-top  [1rem]
+/// @prop {Dimension} padding-bottom  [0]
+/// @prop {Dimension} padding-top  [0]
+/// @prop {String} prefix ["scroll-slide"]
+/// @prop {Color} button-background-color  [white]
+/// @prop {Color} button-background-color-hover  [white]
+/// @prop {CssValue} button-border  [2px solid white]
+/// @prop {Color} button-border-color-hover  [white]
+/// @prop {Dimension} button-border-radius  [50%]
+/// @prop {CssValue} button-box-shadow  [element.get("box-shadow")]
+/// @prop {Color} button-color  [color.get("type")]
+/// @prop {Color} button-color-hover  [color.get("link")]
+/// @prop {Dimension} button-font-size  [1.35rem]
+/// @prop {Dimension} button-indent  [1.5rem]
+/// @prop {Dimension} button-indent-small  [0.5rem]
+/// @prop {Dimension} button-size  [3rem]
+/// @prop {Dimension} button-icon-offset-x  [false]
+/// @prop {Dimension} button-icon-offset-y  [false]
+
+$config: (
+  "background-color" : false,
+  "container" : "container",
+  "containers" : ("container",),
+  "margin-bottom" : 3rem,
+  "margin-top" : 1rem,
+  "padding-bottom" : 0,
+  "padding-top" : 0,
+  "prefix": "scroll-slider",
+  "button-background-color" : white,
+  "button-background-color-hover" : white,
+  "button-border" : 2px solid white,
+  "button-border-color-hover" : white,
+  "button-border-radius" : 50%,
+  "button-box-shadow" : element.get("box-shadow"),
+  "button-color" : color.get("type"),
+  "button-color-hover" : color.get("link"),
+  "button-font-size" : 1.35rem,
+  "button-icon-offset-x" : false,
+  "button-icon-offset-y" : false,
+  "button-indent" : 1.5rem,
+  "button-indent-small" : 0.5rem,
+  "button-size" : 3rem,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss - General example
+///   @include ulu.component-scroll-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-scroll-slider-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "scroll-slider [config]");
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-scroll-slider-styles();
+
+@mixin styles {
+  $prefix: selector.class(get("prefix"));
+  
+  #{ $prefix } {
+    position: relative; // for controls
+    background-color: get("background-color");
+    margin: get("margin-top") 0 get("margin-bottom") 0;
+  }
+  #{ $prefix }--cards {
+    #{ $prefix }__slide {
+      margin-right: 1.35rem;
+      > .card {
+        width: 100%;
+        max-width: none;
+        height: calc(100% - 2rem);
+        margin: 1rem 0 1rem 0;// For shadows
+      }
+    }
+    #{ $prefix }__slide--empty {
+      margin-right: 0;
+    }
+  }
+  #{ $prefix }__track {
+    display: flex;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    // scroll-padding-left: calc(((100vw - vars.$site-max-width) / 2) + vars.$site-margin);
+    // switch below to a modifier (like #{ $prefix }--in-container, #{ $prefix }--in-container-large-x) Default is container
+    
+    // scroll-padding-right: 1rem;
+    // Hide scrollbars
+    -ms-overflow-style: none; /* for Internet Explorer, Edge */
+    scrollbar-width: none; /* for Firefox */
+    &::-webkit-scrollbar {
+      display: none; /* for Chrome, Safari, and Opera */
+    }
+    @include layout.match-container-margin("scroll-padding-left", get("container"));
+    // padding: 1rem;
+    // Add space to end of list
+    // &:after {
+    //   content: "\00a0";
+    //   display: block;
+    //   width: 1rem;
+    //   height: 100%;
+    //   flex: 0 0 1rem;
+    // }
+  }
+  #{ $prefix }__slide {
+    
+    flex: 0 0 450px;
+    max-width: 90vw;
+    scroll-snap-align: start;
+
+    $containerBreakpoint: layout.get-container("container", $breakpoint: "small", $required: false);
+    // Only if this container has this breakpoint
+    @if ($containerBreakpoint) {
+      @include breakpoint.max("small") {
+        $pad: layout.get-container-padding-x("container", "small");
+        max-width: none;
+        flex-basis: calc(100vw - ($pad * 2) - var(--ulu-scrollbar-width));
+      }
+    }
+  }
+  #{ $prefix }__slide--empty {
+    scroll-snap-align: none;
+    // flex-basis: calc(((100vw - vars.$site-max-width) / 2) + vars.$site-margin);
+    @include layout.match-container-margin("flex-basis", get("container"));
+    & {
+      margin-right: 0;
+    }
+    // @include ulu.breakpoint-max("small") {
+    //   &:last-child {
+    //     display: none;
+    //   }
+    // }
+  }
+  #{ $prefix }__controls {
+    list-style: none !important;
+    padding: 0;
+  }
+  .OverflowScroller__control-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+  }
+  @if get("button-icon-offset-y") {
+    .OverflowScroller__control-icon {
+      margin-top: get("button-icon-offset-y");
+    }
+  }
+  .OverflowScroller__control-button--previous {
+    left: get("button-indent");
+    @if get("button-icon-offset-x")  {
+      .OverflowScroller__control-icon {
+        margin-left: get("button-icon-offset-x");
+        
+      }
+    }
+  }
+  .OverflowScroller__control-button--next {
+    right: get("button-indent");
+    @if get("button-icon-offset-x")  {
+      .OverflowScroller__control-icon {
+        margin-right: get("button-icon-offset-x");
+      }
+    }
+  }
+  @include breakpoint.max("small") {
+    .OverflowScroller__control-button--previous {
+      left: get("button-indent-small");
+    }
+    .OverflowScroller__control-button--next {
+      right: get("button-indent-small");
+    }
+  }
+}

package/scss/components/_skip-link.scss

@@ -0,0 +1,92 @@
+
+////
+/// @group skip-link
+/// Accessible skip link component (works in combination with .hidden-visually-focusable)
+////
+
+@use "sass:meta";
+
+@use "../element";
+@use "../layout";
+@use "../selector";
+@use "../utils";
+
+// Used for function fallback
+$-fallbacks: (
+  "border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius"
+  ),
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow"
+  ),
+  "z-index" : (
+    "function" : meta.get-function("get", false, "layout"),
+    "property" : "z-index-fixed"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+
+$config: (
+  "padding" : (1em 2em),
+  "background-color" : white,
+  "box-shadow" : true,
+  "border-radius" : true,
+  "z-index" : true
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-skip-link-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-skip-link-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "button-verbose [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Output component stylesheet
+/// - Note: This needs to be paired with the display helper class "hidden-visually-focusable"
+/// - Note: Remember to add an id to the content you want to skip to. Often this will go to the content after the nav menu.
+/// @example scss
+///  @include ulu.component-skip-link-styles();
+/// @example html
+///   <a 
+///     class="skip-link hidden-visually-focusable" 
+///     href="#main-content"
+///   >
+///     Skip to main content
+///   </a>
+///   ...
+///   <main id="main-content">...</main>
+
+@mixin styles {
+  $prefix: selector.class("skip-link");
+
+  #{ $prefix } {
+    display: block;
+    position: fixed;
+    z-index: get("z-index");
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: get("padding");
+    background-color: get("background-color");
+    font-weight: bold;
+    box-shadow: get("box-shadow");
+    border-bottom-left-radius: get("border-radius");
+    border-bottom-right-radius: get("border-radius");
+  }
+}