@ulu/frontend 0.0.23 → 0.1.0-beta.0

package/scss/components/_data-table.scss

@@ -0,0 +1,180 @@
+////
+/// @group data-table
+/// For tabular data in native HTML tables. Note, this component can be used with the Vue sticky table plugin.
+////
+
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:selector" as sassSelector;
+
+@use "../selector";
+@use "../color";
+@use "../utils";
+@use "../typography";
+
+// Used for function fallback
+$-fallbacks: (
+  // // Example mapping fallback to another modules config value
+  "line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+
+$config: (
+  "cell-padding" : (0.5em,),
+  "text-align" : left,
+  "type-size" : "small",
+  "background-color" : white,
+  "header-background-color" : #eeeeee,
+  "body-background-color" : white,
+  "footer-background-color" : #f3f3f3,
+  "color" : "type-secondary",
+  "line-height" : true,
+  "column-min-width" : 6em,
+  "first-column-large-min-width" : 15em,
+  "border-width" : 1px,
+  "border-color" : #dddddd,
+  "striped-row-background-color" : #eeeeee,
+  "muted-row-background-color" : #ccc,
+  "muted-row-border-color" : null,
+  "highlighted-row-background-color" : #ccc,
+  "highlighted-row-border-color" : null,
+  "large-header-cell-padding-y" : 1em,
+  "caption-type-size" : "large",
+  "caption-font-weight" : bold,
+  "caption-margin" : (0 0 1em 0),
+  "caption-padding" : (0,),
+  "extra-selector" : ".wysiwyg table"
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-data-table-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-data-table-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "data-table [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-data-table-styles();
+
+@mixin styles {
+  $prefix: selector.class("data-table");
+  $border: get("border-width") solid color.get(get("border-color"));
+  
+  $selector-table: sassSelector.parse("#{ $prefix } table, table#{ $prefix }");
+  $selector-inner: sassSelector.parse($prefix);
+  $extra-selector: get("extra-selector");
+
+  // Allow this to work with wysiwyg class, or as "table" for editor stylesheet
+  @if ($extra-selector) {
+    $selector-table: sassSelector.parse("#{ $selector-table }, #{ $extra-selector }");
+    $selector-inner: sassSelector.parse("#{ $selector-inner }, #{ $extra-selector }");
+  }
+
+  // Selector can be on table or wrapping table for convenience
+  #{ $selector-table } {
+    background-color: color.get(get("background-color"));
+    border-collapse: collapse;
+    border: $border;
+    color: color.get(get("color"));
+  }
+  #{ $selector-inner } {
+    @if (get("type-size") and typography.has-size(get("type-size"))) {
+      @include typography.size(get("type-size"), $only-font-size: true);
+    }
+    line-height: get("line-height");
+
+    caption {
+      @if (get("caption-type-size") and typography.has-size(get("caption-type-size"))) {
+        @include typography.size(get("caption-type-size"));
+      }
+      font-weight: get("caption-font-weight");
+      text-align: left;
+      margin: get("caption-margin");
+      padding: get("caption-padding");
+    }
+    th,
+    tr,
+    td {
+      text-align: get("text-align");
+    }
+    th {
+      min-width: get("column-min-width");
+    }
+    td:not(:last-child), 
+    th:not(:last-child) {
+      border-right: $border;
+    }
+    // This makes it work for nested headers last child that aren't the last in the table
+    th:not(:first-child) {
+      border-left: $border;
+    }
+    tr + tr {
+      border-top: $border;
+    }
+    thead tr {
+      background-color: color.get(get("header-background-color"));
+    }
+    tbody tr {
+      background-color: color.get(get("body-background-color"));
+    }
+    tfoot tr {
+      background-color: color.get(get("footer-background-color"));
+    }
+    th,
+    td {
+      padding: get("cell-padding");
+    }
+  }
+  #{ $prefix }__row-muted {
+    background-color: color.get(get("muted-row-background-color"));
+    td {
+      border-color: color.get(get("muted-row-border-color"));
+    }
+  }
+  #{ $prefix }__row-highlighted {
+    background-color: color.get(get("highlighted-row-background-color"));
+    td {
+      border-color: color.get(get("highlighted-row-border-color"));
+    }
+  }
+  #{ $prefix }--striped {
+    tbody tr:nth-child(even) {
+      background-color: color.get(get("striped-row-background-color"));
+    }
+  }
+  #{ $prefix }--large-first {
+    thead tr:first-child th:first-child,
+    tbody td:first-child {
+      min-width: get("first-column-large-min-width");
+    }
+  }
+  #{ $prefix }--large-header {
+    thead th {
+      padding-top: get("large-header-cell-padding-y");
+      padding-bottom: get("large-header-cell-padding-y");
+    }
+  }
+  #{ $prefix }--no-border table,
+  table#{ $prefix }--no-border  {
+    border: none;
+  }
+}

package/scss/components/_fill-context.scss

@@ -3,14 +3,16 @@
 ////
 /// Setup images or videos to behave like background images (object-fit).
 
-
-@use "../grid";
+@use "data-grid";
 @use "../breakpoint";
+@use "../selector";
 
-
-/// Use the parent selector '.fill-context' on the element that should be the 
-/// frame for the child object (img,video).  Can be used within the grid with 
-/// modifier (see in example below).
+/// Output component stylesheet
+/// - Use the parent selector '.fill-context' on the element that should be the 
+///   frame for the child object (img,video).  
+/// - Can be used within the grid with modifier (see in example below).
+/// @example scss
+///   @include ulu.component-fill-context-styles();
 /// @example html {preview}
 ///   <div class="fill-context">
 ///     <img class="fill-context__object" src="background.jpg">
@@ -24,37 +26,33 @@
 ///   <div data-grid-item="width: 6" class="fill-context fill-context--in-grid fill-context--contain">
 ///     <img src="background.jpg">
 ///   </div>
-/// 
-
-
-/// Prints fill context styles
-/// @example scss
-///   @include ulu.component-fill-context-styles();
 
 @mixin styles {
-  .fill-context {
+  $prefix: selector.class("fill-context");
+
+  #{ $prefix } {
     position: relative;
   }
-  .fill-context__object,
-  .fill-context--auto img {
+  #{ $prefix }__object,
+  #{ $prefix }--auto img {
     position: absolute;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
 
-  .fill-context--contain {
-    &.fill-context--auto img,
-    .fill-context__object {
+  #{ $prefix }--contain {
+    &#{ $prefix }--auto img,
+    #{ $prefix }__object {
       object-fit: contain;
     }
   }
 
-  .fill-context--in-grid {
-    $breakpoint: grid.get-default-breakpoint();
+  #{ $prefix }--in-grid {
+    $breakpoint: data-grid.get-default-breakpoint();
     @include breakpoint.max($breakpoint) {
-      .fill-context__object,
-      &.fill-context--auto img {
+      #{ $prefix }__object,
+      &#{ $prefix }--auto img {
         position: static;
         height: auto;
         object-fit: fill;

package/scss/components/_flipcard-grid.scss

@@ -0,0 +1,66 @@
+////
+/// @group flipcard-grid
+////
+/// Creates adaptive (changing at breakpoints)n between items (vertical/horizontal layout)
+
+@use "sass:map";
+
+@use "../breakpoint";
+@use "../utils";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} gutter [1rem] The gutter between grid items.
+/// @prop {CssValue} grid-template-columns [1fr 1fr] The size ratio of items in the grid.
+
+
+$config: (
+  "gutter" : 1rem,
+  "grid-template-columns" : 1fr 1fr,
+  "breakpoint" : "small"
+);
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-flipcard-grid-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-flipcard-grid-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "flipcard-grid [config]");
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-flipcard-grid-styles();
+
+@mixin styles {
+  $prefix: selector.class("flipcard-grid");
+
+  #{ $prefix } {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: 1fr;
+    justify-items: stretch;
+    gap: get("gutter");
+    list-style: none !important; // B/c in Editor
+    padding: 0 !important; // B/c in Editor
+    @if (breakpoint.exists(get("breakpoint"))) {
+      @include breakpoint.min(get("breakpoint")) {
+        grid-template-columns: get("grid-template-columns");
+      }
+    }
+  }
+  #{ $prefix }__item {
+    margin: 0 !important; // B/c in Editor
+  }
+}

package/scss/components/_flipcard.scss

@@ -0,0 +1,304 @@
+
+////
+/// @group flipcard
+////
+/// Creates adaptive (changing at breakpoints)n between items (vertical/horizontal layout)
+
+@use "sass:map";
+@use "../utils";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color [white] Background color of the text-only flipcard front.
+/// @prop {Color} background-color-image [rgba(96, 255, 255, 0.89)] Background color of the image flipcard front.
+/// @prop {Number} image-opacity [0.7] Opacity of the image to allow shading from the background color.
+/// @prop {Color} background-color-back [rgb(178, 178, 178)] Background color on the back of the flipcard.
+/// @prop {Color} border [1px solid black] Flipcard border.
+/// @prop {Dimension} border-radius [6px] Border radius for flipcard.
+/// @prop {Color} border-color-hover [black] border color when hovered.
+/// @prop {CssValue} control-button-border-focus [2px solid blue] Border that shows when focused.
+/// @prop {Time} anim-duration [430ms] Animation duration.
+/// @prop {Time} anim-delay [200ms] Animation delay.
+/// @prop {Dimension} padding [1.5rem] Padding for the flipcard.
+/// @prop {Color} title-color [red] Color of the front page text.
+/// @prop {Color} title-color-hover [green] Color of the front page text when hovered or focused.
+/// @prop {Color} icon-color [pink] Color of the icon.
+/// @prop {Color} icon-color-hover [aqua] Color of the icon when hovered or focused.
+/// @prop {Color} icon-color-image [aqua] Color of the icon when using an image.
+/// @prop {Color} icon-color-image-hover [pink] Color of the icon when using an image and hovered or focused.
+/// @prop {Color} title-color-image [black] Color of the front page text when using an image.
+/// @prop {Color} title-color-image-hover [blue] Color of the front page text when using an image and hovered or focused.
+/// @prop {Boolean} bottom-shadow [true] Boolean that enables a bottom shadow to the image flipcard.
+
+
+$config: (
+  "anim-delay" : 200ms,
+  "anim-duration" : 430ms,
+  "anim-front-close": "FlipcardFrontClose",
+  "anim-front-open": "FlipcardFrontOpen",
+  "anim-back-open": "FlipcardBackOpen",
+  "anim-timing-function": ease-out,
+  "background-color" : white,
+  "background-color-image" : rgba(96, 255, 255, 0.89),
+  "background-color-back" : rgb(178, 178, 178),
+  "bottom-shadow" : true,
+  "border" : 1px solid black,
+  "border-color-hover" : black,
+  "border-radius" : 6px,
+  "control-button-border-focus" : 2px solid blue,
+  "icon-color" : pink,
+  "icon-color-hover" : aqua,
+  "icon-color-image" : aqua,
+  "icon-color-image-hover" : pink,
+  "image-opacity" : 0.7,
+  "padding" : 1.5rem,
+  "title-color" : red,
+  "title-color-hover" : green,
+  "title-color-image" : black,
+  "title-color-image-hover" : blue,
+);
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-flipcard-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Set sizes map
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-flipcard-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "flipcard [config]");
+}
+
+@mixin styles {
+  $prefix: selector.class("flipcard");
+
+  #{ $prefix } {
+    height: 100%;
+    background-color: get("background-color");
+    line-height: 1.4;
+    overflow: hidden;
+    position: relative;
+    border: get("border");
+    border-radius: get("border-radius");
+    &#{ $prefix }:hover {
+      border-color: get("border-color-hover");
+    }
+    #{ $prefix }__control-button:focus {
+      border: get("control-button-border-focus");
+    }
+  }
+  #{ $prefix }__front,
+  #{ $prefix }__back {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+  
+  #{ $prefix }__front {
+    // To lay the image out on top of the text
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-items: stretch;
+    grid-template-areas: "flipcard-front";
+    &:hover {
+      #{ $prefix }__front-image {
+        transition-duration: 8000ms;
+        transition-delay: 0;
+        transform: scale(1.15);
+      }
+      #{ $prefix }__front-content {
+        color: get("title-color-hover");
+      }
+      #{ $prefix }__icon {
+        color: get("icon-color-hover");
+      }
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      [data-flipcard-state="open"] & {
+        opacity: 0;
+        animation: get("anim-front-close") get('anim-duration') get("anim-timing-function") forwards;
+      }
+      [data-flipcard-state="closed"] & {
+        animation: get("anim-front-open") get('anim-duration') get("anim-timing-function") forwards;
+      }
+    }
+  }
+  #{ $prefix }--w-image {
+    background-color: get("background-color-image");
+
+    &:hover {
+      #{ $prefix }__front-content {
+        color: get("title-color-image-hover");
+      }
+      #{ $prefix }__icon {
+        color: get("icon-color-image-hover");
+      }
+    }
+  }
+  #{ $prefix }__front-image,
+  #{ $prefix }__front-content {
+    grid-area: flipcard-front / flipcard-front / flipcard-front / flipcard-front;
+  }
+  #{ $prefix }__front-image {
+    display: block;
+    @media (prefers-reduced-motion) {
+      transition: transform 1000ms 200ms get("anim-timing-function");
+    }
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      opacity: get("image-opacity");
+    }
+  }
+  #{ $prefix }__icon {
+    color: get('icon-color');
+    display: block;
+    margin-top: 0.5rem;
+  }
+  #{ $prefix }__front-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    color: get("title-color");
+    position: relative;
+    z-index: 2;
+    padding: get('padding');
+    align-self: end;
+    transition: transform 350ms get("anim-timing-function");    
+  }
+  #{ $prefix }--w-image {
+    #{ $prefix }__icon {
+      color: get("icon-color-image");
+    }
+    #{ $prefix }__front-content {
+      color: get("title-color-image");
+      @if(get("bottom-shadow")) {
+        // bottom position includes padding so that the shadow 
+        &:after {
+          content: '';
+          display: block;
+          position: absolute;
+          bottom: calc(0rem - get('padding'));
+          top: 0;
+          left: 0;
+          right: 0;
+          background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
+          z-index: -1;
+        }
+      }
+    }
+  }
+  #{ $prefix }__back {
+    background-color: get("background-color-back");
+    padding: get('padding');
+    justify-content: flex-end;
+    [data-flipcard-state="open"] & {
+      animation: get("anim-back-open") get('anim-duration') get("anim-timing-function") forwards;
+      @media (prefers-reduced-motion) {
+        animation: UluFadeIn 430ms get("anim-timing-function");
+      }
+    }
+  }
+  @keyframes FlipcardBackOpen {
+    0% {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    30% {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes FlipcardFrontClose {
+    0% {
+      opacity: 1;
+    }
+    80% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes FlipcardFrontOpen {
+    0% {
+      opacity: 0;
+    }
+    30% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  #{ $prefix }--center-title {
+    #{ $prefix }__front-content {
+      justify-content: center;
+      align-items: center;
+    }
+    #{ $prefix }__back-content {
+      #{ $prefix }__icon-container {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+      }
+    }
+  }
+  #{ $prefix }--bottom-title {
+    #{ $prefix }__front-content {
+      justify-content: flex-end;
+    }
+  }
+  #{ $prefix }:not(#{ $prefix }--bottom-title, #{ $prefix }--center-title) {
+    #{ $prefix }__front-content {
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      padding-top: calc(get("padding") + 1.2rem);
+      padding-bottom: calc(get("padding") + 1.2rem);
+      #{ $prefix }__icon-container {
+        position: absolute;
+        bottom: get("padding");
+        right: get("padding");
+      }
+    }
+    #{ $prefix }__back {
+      position: relative;
+      padding-top: calc(get("padding") + 1.2rem);
+      padding-bottom: calc(get("padding") + 1.2rem);
+      #{ $prefix }__icon-container {
+        position: absolute;
+        bottom: get("padding");
+        right: get("padding");
+      }
+    }
+  }
+  // modifier for animations
+  #{ $prefix }--animation:hover {
+    #{ $prefix }__front-content {
+      transform: translateY(-(get('padding') * 0.5));
+    }
+  }
+}