@ulu/frontend 0.0.22 → 0.1.0-beta.0

package/scss/components/_overlay-section.scss

@@ -0,0 +1,122 @@
+////
+/// @group overlay-section
+////
+
+// NOTE: This is an updated version that uses floating UI
+
+@use "sass:math";
+@use "sass:map";
+@use "../utils";
+@use "../breakpoint";
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} content-background-color [white] The background color of the content.
+/// @prop {CssValue} content-border [1px solid rgb(227, 227, 227)] The border of the content
+/// @prop {Dimension} content-padding [2.5rem] The padding of the content.
+/// @prop {Dimension} content-width [34rem] The width of the content.
+/// @prop {Dimension} min-height [75vh] the min-height of the section.
+/// @prop {Dimension} padding [6rem] The padding of the container.
+/// @prop {Map} breakpoints [Map] The breakpoints of the section.
+
+$config: (
+  "content-background-color" : white,
+  "content-border" : 1px solid rgb(227, 227, 227),
+  "content-padding" : 2.5rem,
+  "content-width" : 34rem,
+  "min-height" : 75vh,
+  "padding" : 6rem,
+  "breakpoints" : (
+    "medium" : (
+      "direction" : "down",
+      "padding" : 4rem,
+    ),
+    "small" : (
+      "direction" : "down",
+      "padding" : 2rem,
+      "content-padding" : 1.5rem
+    )
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-overlay-section-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-overlay-section-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "overlay-section [config]");
+}
+
+/// Prints component styles
+/// @example scss
+/// @example scss
+///  @include ulu.component-overlay-section-styles();
+
+@mixin styles {
+
+  .overlay-section {
+    position: relative;
+    display: flex;
+    min-height: get("min-height");
+    align-items: center;
+    justify-content: center;
+    padding: get("padding");
+
+    @each $breakpoint, $props in get("breakpoints") {
+      $direction: map.get($props, "direction");
+      @include breakpoint.from($breakpoint, $direction) {
+        padding: map.get($props, "padding");
+        min-height: map.get($props, "min-height");
+      }
+    }
+  }
+  .overlay-section__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    img, 
+    video {
+      object-fit: cover;
+      height: 100%;
+      width: 100%;
+    }
+  }
+  .overlay-section__content {
+    position: relative;
+    z-index: 2;
+    background-color: get("content-background-color");
+    border: get("content-border");
+    flex: 0 1 get("content-width");
+    padding: get("content-padding");
+    @each $breakpoint, $props in get("breakpoints") {
+      $direction: map.get($props, "direction");
+      @include breakpoint.from($breakpoint, $direction) {
+        padding: map.get($props, "content-padding");
+      }
+    }
+  }
+  .overlay-section--top {
+    align-items: flex-start;
+  }
+  .overlay-section--bottom {
+    align-items: flex-end;
+  }
+  .overlay-section--left {
+    justify-content: flex-start;
+  }
+  .overlay-section--right {
+    justify-content: flex-end;
+  }
+}

package/scss/components/_pager.scss

@@ -0,0 +1,168 @@
+////
+/// @group pager
+////
+
+
+@use "sass:map";
+
+@use "../utils";
+@use "../color";
+
+// Markup Matches Drupal Pager
+
+// todo [joe-check] for config options, active comes before (active-color) in this module while other modules have it come afer(color-active) Line 30
+
+/// Module Settings
+/// @type Map
+/// @prop {String} background-color [link] The background color of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} background-color-hover [linkhover] The background color of the pager when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} border-color [link] The border color of the pager item. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} border-color-hover [linkhover] The border color of the pager item when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {Dimension} border-radius [50%] The border radius of the pager item.
+/// @prop {Dimension} border-width [1px] The border width of the pager item.
+/// @prop {Color} color [white] The type color of the pager item.
+/// @prop {Color} color-hover [white] The type color of the pager item when covered and focused.
+/// @prop {CssValue} font-weight [bold] Font-weight of the pager.
+/// @prop {Dimension} item-margin [0.17rem] The item margin.
+/// @prop {Dimension} margin-bottom [2rem] The bottom margin of the pager.
+/// @prop {Dimension} margin-top [1rem] The top margin of the pager.
+/// @prop {Dimension} width [2.5rem] The width of the pager items.
+/// @prop {Color} active-background-color [#ccc] The background color of the pager when active.
+/// @prop {Color} active-border-color [#ccc] The border color of the pager when active.
+/// @prop {Color} active-color [type] The type color when active. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {CssValue} active-font-weight [bold] The font weight of the pager when focused or hovered.
+/// @prop {String} action-background-color [link] The background color of the actions options of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} action-background-color-hover [linkhover] The background color of the actions options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {Color} action-border-color [transparent] The border color of the action options of the pager.
+/// @prop {String} action-border-color-hover [link] The border color of the action options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {Color} action-color [white] The type color of the actions options of the pager.
+/// @prop {Color} action-color-hover [white] The type color of the actions options of the pager when focused or hovered.
+/// @prop {Dimension} action-margin [0.8rem] The margin of the action options of the pager.
+/// @prop {Dimension} action-width [2.5rem] The width of the action options of the pager.
+
+$config: (
+  "background-color":              "link",
+  "background-color-hover":        "link-hover",
+  "border-color":                  "link",
+  "border-color-hover":            "link-hover",
+  "border-radius":                 50%,
+  "border-width":                  1px,
+  "color":                         white,
+  "color-hover":                   white,
+  "font-weight":                   bold,
+  "item-margin":                   0.17rem,
+  "margin-bottom":                 2rem,
+  "margin-top":                    1rem,
+  "width":                         2.5rem,
+
+  "active-background-color":       #ccc,
+  "active-border-color":           #ccc,
+  "active-color":                  "type",
+  "active-font-weight":            bold,
+  
+  "action-background-color":       "link",
+  "action-background-color-hover": "link-hover",
+  "action-border-color":           transparent,
+  "action-border-color-hover":     "link",
+  "action-color":                  white,
+  "action-color-hover":            white,
+  "action-margin":                 0.8rem,
+  "action-width":                  2.5rem,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-pager-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-pager-get("property");
+
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "card [config]");
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-pager-styles();
+
+@mixin styles {
+  .pager {
+    font-weight: get("font-weight");
+    margin-top: get("margin-top");
+    margin-bottom: get("margin-bottom");
+  }
+  .pager__items {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .pager__item {
+    margin: get("item-margin");
+    a {
+      
+      display: block;
+      text-align: center;
+      width: get("width");
+      height: get("width");
+      line-height: get("width");
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: get("border-radius");
+      border: get("border-width") solid color.get(get("border-color"));
+      background-color: color.get(get("background-color"));
+      color: get("color");
+      &:hover {
+        color: get("color-hover");
+        border-color: color.get(get("border-color-hover"));
+        background-color: color.get(get("background-color-hover"));
+      }
+    }
+    &.is-active,
+    &--current {
+      a, 
+      a:hover,
+      span {
+        font-weight: get("font-weight");
+        color: color.get(get("active-color"));
+        background-color: get("active-background-color");
+        border-color: get("active-border-color");
+      }
+    }
+  }
+  .pager__item--first,
+  .pager__item--previous,
+  .pager__item--next,
+  .pager__item--last {
+    a {
+      width: get("action-width");
+      height: get("action-width");
+      line-height: get("action-width");
+      background-color: color.get(get("action-background-color"));
+      color: get("action-color");
+      font-size: 1.2rem;
+      line-height: 2.8rem;
+      font-weight: bold;
+      &:hover {
+        border-color: color.get(get("action-border-color-hover"));
+        background-color: color.get(get("action-background-color-hover"));
+        color: get("action-color-hover");
+      }
+    }
+  }
+  .pager__item--previous {
+    margin-right: get("action-margin")
+  }
+  .pager__item--next {
+    margin-left: get("action-margin")
+  }
+}

package/scss/components/_placeholder-block.scss

@@ -0,0 +1,121 @@
+////
+/// @group placeholder-block
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../element";
+
+// Used for function fallback
+$-fallbacks: (
+  "border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius-large"
+  ),
+  "color" : (
+    "function" : meta.get-function("get", false, "color"),
+    "property" : "type-tertiary"
+  ),
+  "margin-bottom": (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "margin"
+  ),
+);
+
+// todos [joe-check] for the config options, compact is at the end in this module (padding-compact) but at the beginning in card-grid(gap-compact) Line 35
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color [rgba(0,0,0,0.15)] The background color of the placeholder.
+/// @prop {Color} color [true] The type color of the placeholder. If set to true, will use the "type-tertiary" variable from color.scss.
+/// @prop {Dimension} margin-bottom [true] The bottom margin of the placeholder. If set to true, will use the "margin" variable from element.scss.
+/// @prop {Dimension} padding [2em] The padding of the placeholder.
+/// @prop {Dimension} padding-compact [(0.5em 1em)] The padding of the placeholder when using the compact option.
+/// @prop {Dimension} expanded-height [15rem] The height of the placeholder when using the expanded option.
+/// @prop {Color} border-color [rgba(0,0,0,0.3)] The border color.
+/// @prop {Dimension} border-radius [true] The border radius of the placeholder. If set to true, will use the "border-radius-large" variable from element.scss.
+/// @prop {CssValue} border-style [dashed] The border style of the placeholder border.
+/// @prop {Dimension} border-width [2px] The border width of the placeholder.
+/// @prop {Dimension} border-width-compact [1px] The border width of the placeholder when using the compact option.
+/// @prop {Dimension} icon-font-size [3em] The font-size of the placeholder icon.
+/// @prop {Dimension} icon-margin [0.25em] The margin of the placeholder icon.
+/// @prop {Color} icon-color [rgba(0, 0, 0, 0.5)] The icon type color.
+
+
+$config: (
+  "background-color" : rgba(0,0,0,0.15),
+  "color" : true,
+  "expanded-height" : 15rem,
+  "margin-bottom" : true,
+  "padding" : 2em,
+  "padding-compact" : (0.5em 1em),
+
+  "border-color" : rgba(0,0,0,0.3),
+  "border-radius" : true,
+  "border-style" : dashed,
+  "border-width" : 2px,
+  "border-width-compact" : 1px,
+  "icon-color" : rgba(0, 0, 0, 0.5),
+  "icon-font-size" : 3em,
+  "icon-margin" : 0.25em,
+) !default;
+
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-placeholder-block-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-placeholder-block-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "placeholder [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-placeholder-block-styles();
+
+@mixin styles {
+  $prefix: selector.class("placeholder-block");
+
+  #{ $prefix } {
+    background-color: get("background-color");
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: get("padding");
+    color: get("color");
+    border: get("border-width") get("border-style") get("border-color");
+    margin-bottom: get("margin-bottom");
+    border-radius: get("border-radius");
+  }
+  #{ $prefix }__icon {
+    color: get("icon-color");
+    display: block;
+    margin: 0 auto get("icon-margin") auto;
+    font-size: get("icon-font-size");
+  }
+  #{ $prefix }--compact {
+    padding: get("padding-compact");
+    display: block;
+    border-width: get("border-width-compact");
+  }
+  #{ $prefix }--expanded {
+    min-height: get("expanded-height");
+  }
+}

package/scss/components/_popover.scss

@@ -0,0 +1,263 @@
+////
+/// @group popover
+////
+
+// NOTE: This is an updated version that uses floating UI
+
+@use "sass:math";
+@use "sass:map";
+@use "sass:meta";
+
+@use "../selector";
+@use "../typography";
+@use "../utils";
+@use "../color";
+@use "../layout";
+@use "../element";
+
+// Used for function fallback
+$-fallbacks: (
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow-above",
+  ),
+  "z-index" : (
+    "function" : meta.get-function("get", false, "layout"),
+    "property" : "z-index-fixed",
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} arrow-size [16px]
+/// @prop {Color} background-color [white]
+/// @prop {Dimension} border-radius [6px]
+/// @prop {Color} color [inherit]
+/// @prop {Dimension} max-width [90vw]
+/// @prop {Dimension} max-height [25rem]
+/// @prop {Dimension} padding [1rem]
+/// @prop {Dimension} padding-large [2rem]
+/// @prop {Dimension} type-size [null]
+/// @prop {Number} z-index [true]
+/// @prop {CssValue} box-shadow [true]
+/// @prop {CssValue} box-shadow-footer [0 0 4px]
+/// @prop {String} box-shadow-footer-color ["box-shadow"]
+/// @prop {Color} header-background-color [#ccc]
+/// @prop {Color} header-color [null]
+/// @prop {Color} header-media-background-color [black]
+/// @prop {Dimension} header-padding-y [0.25rem]
+/// @prop {Color} footer-background-color [#ccc]
+/// @prop {Color} footer-color [null]
+/// @prop {Dimension} footer-padding-y [0.25rem]
+/// @prop {Dimension} footer-padding-y-large [0.5rem]
+/// @prop {Color} tooltip-background-color [white]
+/// @prop {Color} tooltip-color [null]
+/// @prop {Dimension} tooltip-max-width [20rem]
+/// @prop {Dimension} tooltip-padding [0.5rem]
+/// @prop {Dimension} tooltip-width [auto]
+/// @prop {Dimension} width [15rem]
+/// @prop {Dimension} width-large [30rem]
+/// @prop {Dimension} width-large-x [50rem]
+
+$config: (
+  "arrow-size"                   : 16px,
+  "background-color"             : white,
+  "border-radius"                : 6px,
+  "color"                        : inherit,
+  "max-width"                    : 90vw,
+  "max-height"                   : 25rem,
+  "padding"                      : 1rem,
+  "padding-large"                : 2rem,
+  "type-size"                    : null,
+  "z-index"                      : true,
+  
+  "box-shadow"                   : true,
+  "box-shadow-footer"            : 0 0 4px,
+  "box-shadow-footer-color"      : "box-shadow",
+  "header-background-color"      : #ccc,
+  "header-color"                 : null,
+  "header-media-background-color": black,
+  "header-padding-y"             : 0.25rem,
+  "footer-background-color"      : #ccc,
+  "footer-color"                 : null,
+  "footer-padding-y"             : 0.25rem,
+  "footer-padding-y-large"       : 0.5rem,
+  "tooltip-background-color"     : white,
+  "tooltip-color"                : null,
+  "tooltip-max-width"            : 20rem,
+  "tooltip-padding"              : 0.5rem,
+  "tooltip-width"                : auto,
+  "width"                        : 15rem,
+  "width-large"                  : 30rem,
+  "width-large-x"                : 50rem,
+  ) !default;
+  
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-popover-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-popover-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "component-popover [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-popover-styles();
+
+@mixin styles {
+  $prefix: selector.class("popover");
+  $arrow-size-half: math.div(get("arrow-size"), 2);
+
+  @if (get("arrow-size")) {
+    #{ $prefix }__arrow {
+      display: block;
+      visibility: hidden;
+      z-index: 1;
+      &,
+      &:before {
+        position: absolute;
+        width: get("arrow-size");
+        height: get("arrow-size");
+        background: inherit;
+      }
+      &:before {
+        visibility: visible;
+        content: '';
+        transform: rotate(45deg);
+        // box-shadow: $box-shadow;
+      }
+      [data-placement^='top'] > & {
+        bottom: -($arrow-size-half);
+      }
+      [data-placement^='bottom'] > & {
+        top: -($arrow-size-half);
+      }
+      [data-placement^='left'] > & {
+        right: -($arrow-size-half);
+      }
+      [data-placement^='right'] > & {
+        left: -($arrow-size-half);
+      }
+    }
+  }
+  // Default position is on the right of the container (Popper handles positioning)
+  #{ $prefix } {
+    display: none;
+    position: absolute;
+    z-index: get("z-index") + 1;
+    background-color: get("background-color");
+    color: get("color");
+    width: get("width");
+    max-width: get("max-width");
+    box-shadow: get("box-shadow");
+    border-radius: get("border-radius");
+    text-align: left;
+    @if (get("type-size")) {
+      @include typography.size(get("type-size"));
+    }
+    &.is-active {
+      display: block;
+    }
+  }
+  #{ $prefix }__inner,
+  #{ $prefix }__header,
+  #{ $prefix }__footer {
+    display: block;
+    border-radius: get("border-radius");
+    position: relative;
+    z-index: 2; // Above arrow
+    flex: 0;
+  }
+  #{ $prefix }__inner {
+    overflow-y: auto;
+    max-height: get("max-height");
+    padding: get("padding");
+    flex: 1; // When used with footer
+  }
+  // Image, video above content
+  #{ $prefix }__header {
+    overflow: hidden;
+    padding: get("header-padding-y") get("padding");
+    color: get("header-color");
+    background-color: get("header-background-color");
+  }
+  #{ $prefix }__header--media {
+    padding: 0;
+    background-color: get("header-media-background-color");
+  }
+  #{ $prefix }__footer {
+    box-shadow: get("box-shadow-footer") color.get(get("box-shadow-footer-color"));
+    padding: get("footer-padding-y") get("padding");
+    color: get("footer-color");
+    background-color: get("footer-background-color");
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  #{ $prefix }__header:has(+ #{ $prefix }__inner),
+  #{ $prefix }__header:has(+ #{ $prefix }__footer),
+  #{ $prefix }__inner:has(+ #{ $prefix }__footer) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  // Modifiers
+  #{ $prefix }--tooltip {
+    width: get("tooltip-width");
+    max-width: min(get("max-width"), get("tooltip-max-width"));
+    color: get("tooltip-color");
+    background-color: get("tooltip-background-color");
+    pointer-events: none;
+    #{ $prefix }__inner {
+      padding: get("tooltip-padding");
+      min-height: 0;
+    }
+  }
+  // For fixed strategy
+  #{ $prefix }--fixed {
+    position: fixed;
+  }
+  // If you want to do something custom (and have it touch the edges)
+  #{ $prefix }--no-padding {
+    #{ $prefix }__inner {
+      padding: 0;
+    }
+  }
+  #{ $prefix }--large {
+    width: get("width-large");
+  }
+  #{ $prefix }--large-x {
+    width: get("width-large-x");
+  }
+  #{ $prefix }--large,
+  #{ $prefix }--large-x {
+    #{ $prefix }__inner {
+      padding: get("padding-large");
+    }
+    #{ $prefix }__footer {
+      padding: get("footer-padding-y-large") get("padding-large");
+    }
+  }
+  #{ $prefix }--prints {
+    @media print {
+      display: block;
+      position: static;
+      width: auto;
+      box-shadow: none;
+      max-width: none;
+      #{ $prefix }__arrow  {
+        display: none;
+      }
+    }
+  }
+}