@aurodesignsystem/auro-formkit 2.0.0-beta.2 → 2.0.0-beta.21

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/_responsive.scss

@@ -0,0 +1,249 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/deprecated';
+@import '../libSupport/manageScope';
+
+// sass-lint:disable mixins-before-declarations variable-for-property
+
+@import '../utilityVariables/important';
+
+/// Utility class to restrain visibility of UI element to __sm__ users only.
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-responsive
+/// @example scss - import mixin file and selector partial file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
+///
+/// @example scss - Default selector(s)
+///   .util_is-smOnly {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_is-smOnly {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_is-smOnly {}
+///
+
+#{$scope}.#{$prefix}util_is-smOnly {
+  @if variable-exists(ds-grid-breakpoint-sm) {
+    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
+      display: none $important;
+    }
+  }
+}
+
+/// Utility class to restrain `block` visibility of UI element between __sm__ and __md__ screens.
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-responsive
+/// @example scss - import mixin file and selector partial file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
+///
+/// @example scss - Default selector(s)
+///   .util_is-mdOnly {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_is-mdOnly {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_is-mdOnly {}
+///
+
+#{$scope}.#{$prefix}util_is-mdOnly {
+  @if variable-exists(ds-grid-breakpoint-sm) {
+    display: none $important;
+
+    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
+      display: block $important;
+    }
+    @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
+      display: none $important;
+    }
+  }
+}
+
+/// Utility class to restrain `inline-block` visibility of UI element between __sm__ and __md__ screens.
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-responsive
+/// @example scss - import mixin file and selector partial file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
+///
+/// @example scss - Default selector(s)
+///   .util_is-mdOnly--inline {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_is-mdOnly--inline {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_is-mdOnly--inline {}
+///
+#{$scope}.#{$prefix}util_is-mdOnly--inline {
+  @if variable-exists(ds-grid-breakpoint-sm) {
+    display: none $important;
+
+    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
+      display: inline-block $important;
+    }
+    @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
+      display: none $important;
+    }
+  }
+}
+
+/// Utility class to restrain `block` visibility of UI element for __md__ screens.
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-responsive
+/// @example scss - import mixin file and selector partial file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
+///
+/// @example scss - Default selector(s)
+///   .util_is-mdAppears {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_is-mdAppears {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_is-mdAppears {}
+///
+
+#{$scope}.#{$prefix}util_is-mdAppears {
+  @if variable-exists(ds-grid-breakpoint-sm) {
+    display: none $important;
+
+    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
+      display: block $important;
+    }
+  }
+}
+
+/// Utility class to restrain `block` visibility of UI element for __md__ screens.
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-responsive
+/// @example scss - import mixin file and selector partial file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
+///
+/// @example scss - Default selector(s)
+///   .util_is-mdAppears--inline {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_is-mdAppears--inline {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_is-mdAppears--inline {}
+///
+
+#{$scope}.#{$prefix}util_is-mdAppears--inline {
+  @if variable-exists(ds-grid-breakpoint-sm) {
+    display: none $important;
+
+    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
+      display: inline-block $important;
+    }
+  }
+}
+
+/// Utility class to restrain `block` visibility of UI element for __lg__ screens.
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-responsive
+/// @example scss - import mixin file and selector partial file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
+///
+/// @example scss - Default selector(s)
+///   .util_is-lgOnly {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_is-lgOnly {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_is-lgOnly {}
+///
+#{$scope}.#{$prefix}util_is-lgOnly {
+  @if variable-exists(ds-breakpoint-lg) {
+    display: none $important;
+
+    @include auro_breakpoint($min: $ds-breakpoint-lg) {
+      display: block $important;
+    }
+  }
+}
+
+/// Utility class to restrain `block` visibility of UI element for __lg__ screens.
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-responsive
+/// @example scss - import mixin file and selector partial file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
+///
+/// @example scss - Default selector(s)
+///   .util_is-lgOnly--inline {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_is-lgOnly--inline {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_is-lgOnly--inline {}
+///
+
+#{$scope}.#{$prefix}util_is-lgOnly--inline {
+  @if variable-exists(ds-breakpoint-lg) {
+    display: none $important;
+
+    @include auro_breakpoint($min: $ds-breakpoint-lg) {
+      display: inline-block $important;
+    }
+  }
+}
+
+
+/// Utility class that will allow img src to fill 100% of space for responsive characteristics
+///
+/// See [variable use](/#utility-variable-important) for managing the `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-responsive
+/// @example scss - import selector partial file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
+///
+/// @example scss - Default selector(s)
+///   .util_img-is-responsive {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_img-is-responsive {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_img-is-responsive {}
+///
+/// @example html - Example HTML selector use
+///   <img class="util_img-is-responsive" src=" ... " alt="" />
+///
+#{$scope}.#{$prefix}util_img-is-responsive {
+  width: 100% $important;
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/_typeProperties.scss

@@ -0,0 +1,49 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/manageScope';
+@import '../utilityVariables/important';
+
+/// Utility class force no wrap on content
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-type
+/// @example scss - Default selector(s)
+///   .util_nowrap {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_nowrap {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_nowrap {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";
+#{$scope}.#{$prefix}util_nowrap {
+  white-space: nowrap $important;
+}
+
+/// Utility class to capitalize a string
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-type
+/// @example scss - Default selector(s)
+///   .util_capitalize {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_capitalize {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_capitalize {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";
+#{$scope}.#{$prefix}util_capitalize {
+  text-transform: capitalize $important;
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityFunctions/_capitalize.scss

@@ -0,0 +1,20 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+// Variables are defined by baseline Design Tokens
+
+/// The purpose of this function is to take a string and capitalize the first letter on output
+/// @group utility
+/// @parameter {String} $string [null] - pass in string to be capitolized
+/// @example scss - pass string into function
+///   capitalize('foo') => Foo
+/// @example scss - import dependency
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/capitalize";
+
+@function auro_capitalize($string) {
+  @if type-of($string) == string {
+    @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
+  }
+  @return #{$string};
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityFunctions/_contains.scss

@@ -0,0 +1,26 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+// Variables are defined by baseline Design Tokens
+
+/// The purpose of this function is to evaluate if a requested var is in the supplied array
+/// @group utility
+/// @parameter {Variable} $list [null] - variable list to be evaluated
+/// @parameter {Item} $var [] - item in list
+/// @example scss - pass string into function
+///   ods-contains($options, $value)
+/// @example scss - import dependency
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/contains";
+
+@function auro_contains($list, $var) {
+  $eval: false;
+
+  @each $item in $list {
+    @if $item == $var {
+      $eval: true;
+    }
+  }
+
+  @return $eval;
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityFunctions/_map-deep-get.scss

@@ -0,0 +1,29 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+// Variables are defined by baseline Design Tokens
+
+/// This function is to be used to return nested key values within a nested map
+/// @group utility
+/// @parameter {Variable} $map [null] - pass in map to be evaluated
+/// @parameter {Variable} $keys [null] - pass in keys to be evaluated
+/// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Article from CSS-Tricks
+/// @example scss - pass map and strings/variables into function
+///   $tokens: (
+///     'size': (
+///       'eighth': $size-eighth,
+///       'quarter': $size-quarter
+///     )
+///   );
+///   $var: auro_map-deep-get($tokens, 'size', 'eighth'); => $size-eighth
+/// @example scss - import dependency
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/map-deep-get";
+
+@function auro_map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+
+  @return $map;
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityMixins/_anchor-roleButton.scss

@@ -0,0 +1,76 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/deprecated';
+
+/// Creates Sass variable or custom property output for multi-use button shape
+/// @group utility-mixins
+/// @param {string} $style [] - Specifies the style type (sass, css)
+/// @param {string} $env [] - Specifies the style environment (component, noncomponent)
+/// @param {string} $display [inline-block] - Specifies display type
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleButton";
+/// @example scss - Set properties for Sass output that is NOT within a component
+///   .auro_roleButton {
+///       @include auro_anchorButton(sass, noncomponent);
+///   }
+/// @example scss - Set properties for CSS output that IS within a component
+///   .button {
+///       @include auro_anchorButton(css, component)
+///   }
+@mixin auro_anchorButton($style, $env, $display: inline-block) {
+  $color: null;
+  $hover-color: null;
+  $line-height: null;
+  $padding: null;
+  $hover-color: null;
+
+  @if $style == css {
+    $color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);
+    $hover-color: var(--ds-color-container-ui-primary-hover-default, $ds-color-container-ui-primary-hover-default);
+    $line-height: var(--ds-unitless-scale-300, $ds-unitless-scale-300);
+    $padding: 0 var(--ds-size-200, $ds-size-200);
+  } @else if $style == sass or $style == scss {
+    $color: $ds-color-text-ui-default-default;
+    $hover-color: $ds-color-container-ui-primary-hover-default;
+    $line-height: $ds-unitless-scale-300;
+    $padding: 0 $ds-size-200;
+  } @else {
+    @error 'Invalid $style option. Please use `css` or `sass`';
+  }
+
+  display: $display;
+
+  padding: $padding;
+
+  text-decoration: none;
+
+  color: $color;
+  border: 1px solid transparent;
+
+  line-height: $line-height;
+
+  @if $env == component {
+    :host(:not(.is-touching)) & {
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+
+        color: $hover-color;
+      }
+    }
+  } @else if $env == noncomponent {
+    @media (hover: hover) {
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+
+        color: $hover-color;
+      }
+    }
+  } @else {
+    @error 'Invalid $env option. Please use `component` or `noncomponent`';
+  }
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityMixins/_anchor-roleTab.scss

@@ -0,0 +1,86 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/deprecated';
+
+/// Creates Sass variable or custom property output for multi-use tab shape
+/// @group utility-mixins
+/// @param {string} $style [] - Specifies the style type (sass, css)
+/// @param {string} $env [] - Specifies the style environment (component, noncomponent)
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleTab";
+/// @example scss - Set properties for Sass output that is NOT within a component
+///   .auro_roleTab {
+///      @include auro_anchorTab(sass, noncomponent);
+///   }
+/// @example scss - Set properties for CSS output that IS within a component
+///   .hyperlink--tab {
+///       @include auro_anchorTab(css, component)
+///   }
+@mixin auro_anchorTab($style, $env) {
+  $color: null;
+  $border-color: null;
+  $padding: null;
+  $hover-color: null;
+  $isactive-color: null;
+
+  @if $style == css {
+    $color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);
+    $border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default);
+    $padding: var(--ds-size-200, $ds-size-200, $ds-size-200, $ds-size-200);
+    $hover-color: var(--ds-color-container-ui-primary-hover-default, $ds-color-container-ui-primary-hover-default);
+    $isactive-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+  } @else if $style == sass or $style == scss {
+    $color: $ds-color-text-ui-default-default;
+    $border-color: $ds-color-border-primary-default;
+    $padding: $ds-size-200;
+    $hover-color: $ds-color-container-ui-primary-hover-default;
+    $isactive-color: $ds-color-text-primary-default;
+  } @else {
+    @error 'Invalid $style option. Please use `css` or `sass`';
+  }
+
+  padding: $ds-size-200;
+
+  color: $color;
+  border-width: 0 0 1px;
+  border-style: solid;
+  border-color: $border-color;
+
+  @if $env == component {
+    :host(:not(.is-touching)) & {
+      &:hover {
+        cursor: pointer;
+        text-decoration: none;
+
+        color: $hover-color;
+        border-width: 0 0 2px;
+        border-color: currentColor;
+      }
+    }
+  } @else if $env == noncomponent {
+    &:not(.is-touching) {
+      &:hover {
+        cursor: pointer;
+        text-decoration: none;
+
+        color: $hover-color;
+        border-width: 0 0 2px;
+        border-color: currentColor;
+      }
+    }
+  } @else {
+    @error 'Invalid $env option. Please use `component` or `noncomponent`';
+  }
+
+  &.is-active {
+    cursor: pointer;
+    text-decoration: none;
+
+    color: $isactive-color;
+    border-width: 0 0 2px;
+    border-color: currentColor;
+  }
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityMixins/_insetUtility.scss

@@ -0,0 +1,9 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+// The previous inset utility mixin as been fully deprecated and is no longer available for use.
+// In its place is a static generated series of utility selectors that will be removed
+// with the next major release of Auro's web core style sheets.
+
+@import '../utilityClasses/inset';

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityMixins/_layoutPropertiesGenerator.scss

@@ -0,0 +1,75 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+// Variables are defined by baseline Design Tokens
+
+@import '../utilityVariables/important';
+@import '../libSupport/manageScope';
+
+
+// Utility layout selector mixin
+// ---------------------------------------------------------------------
+
+$layout-properties: margin padding !default;
+$layout-extensions: Top Left Bottom Right !default;
+$layout-modifiers: (
+  'none': 0,
+  '100': $ds-size-100,
+  '200': $ds-size-200,
+  '300': $ds-size-300,
+  '400': $ds-size-400,
+) !default;
+
+/// Mixin auto-generates all available utility selectors. This mixin is NOT for general use and will produce selectors with the import of this Sass file. Output can be configured by redefining default values prior to import. See default value examples below.
+///
+/// DO NOT execute mixin, this is already included with the import of the file dependency
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-layout
+/// @example scss - Default values
+///   $layout-properties: margin padding !default;
+///   $layout-extensions: Top Left Bottom Right !default;
+///   $layout-modifiers: (
+///     "none": 0,
+///     "100": $ds-size-100,
+///     "200": $ds-size-200,
+///     "300": $ds-size-300,
+///     "400": $ds-size-400
+///   ) !default;
+/// @example scss - example default output selector
+///   .util_paddingLeft--none {}
+///
+/// @example scss - example output selector when $scope: true;
+///   .auro .util_paddingLeft--none {}
+///
+/// @example scss - example output selector when $prefix: true;
+///   .auro_util_paddingLeft--none {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator";
+/// @example scss - import mixin file with altered output values prior to import
+///   $layout-properties: margin;
+///   $layout-extensions: Right;
+///   $layout-modifiers: (
+///     "25": $ds-size-25,
+///     "50": $ds-size-50,
+///     "600": $ds-size-600,
+///     "800": $ds-size-800,
+///   );
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator";
+@mixin auro_layoutPropertiesGenerator() {
+  @each $property in $layout-properties {
+    @each $extension in $layout-extensions {
+      @each $type, $value in $layout-modifiers {
+        #{$scope}.#{$prefix}util_#{$property}#{$extension}--#{$type} {
+          #{$property}-#{to-lower-case($extension)}: $value $important;
+        }
+      }
+    }
+  }
+}
+
+@include auro_layoutPropertiesGenerator();