@progressiveui/styles 10.30.0

package/scss/_type.scss

@@ -0,0 +1,143 @@
+@use "@progressiveui/themes-core/dist/scss/tokensMapDeep" as *;
+@use "@progressiveui/themes-core/dist/scss/tokens" as tokens;
+@use "./breakpoint" as *;
+
+@mixin reset() {
+}
+
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+$code-font-family: var(--code-font-family);
+//$font-family-primary: var(--font-family-primary);
+
+@mixin font-family($family) {
+  @if $family == "code" {
+    /* font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;*/
+    font-family: tokens.$font-family-monospace;
+  } @else {
+    font-family: tokens.$font-family-primary;
+    //font-family: 'Open Sans', Arial, sans-serif;
+  }
+}
+
+@mixin type-style($style) {
+  $maped: map-deep-get($tokens, "typography", $style);
+
+  //@warn 'This is  a step of the WFP Type Scale!', $maped;
+  @if map-deep-get($tokens, "typography", $style) {
+    $typographyMap: map-get($tokens, "typography", $style);
+    font-size: map-get($typographyMap, "fontSize");
+    font-weight: map-get($typographyMap, "fontWeight");
+    letter-spacing: map-get($typographyMap, "letterSpacing");
+    text-transform: map-get($typographyMap, "textTransform");
+
+    @if map-deep-get($tokens, "typography", $style, "md") {
+      @include breakpoint-up("md") {
+        $typographyMapMd: map-get($tokens, "typography", $style, "md");
+        font-weight: map-get($typographyMapMd, "fontWeight");
+        letter-spacing: map-get($typographyMapMd, "letterSpacing");
+        text-transform: map-get($typographyMapMd, "textTransform");
+      }
+    }
+  }
+  /*@if map-has-key($typographyMap, 'body-short-02',$style) {
+      @warn 'This is  a step of the WFP Type Scale!';
+      $elements: map-get($tokens, $style);
+      font-family: map-get($elements, 'fontFamily');
+      font-size: map-get($elements, 'fontSize');
+    } @else {
+      //@warn 'This is  a step of the WFP Type Scale!';
+      //@warn 'This is not a step of the WFP Type Scale!' + $style;
+    }
+  } @else {
+    @warn 'No typography step found!';
+  }*/
+}
+
+// TODO: Temporary type scale
+$typescale-map: (
+  "giga": 4.625rem,
+  "mega": 3.625rem,
+  "alpha": 2.25rem,
+  "beta": 1.75rem,
+  "omicron": 1.5625rem,
+  "sigma": 1.375rem,
+  "gamma": 1.25rem,
+  "delta": 1.125rem,
+  "epsilon": 1rem,
+  "zeta": 0.875rem,
+  "omega": 0.75rem,
+  "theta": 0.6875rem,
+);
+
+@mixin typescale($size) {
+  @if map-has-key($typescale-map, $size) {
+    font-size: map-get($typescale-map, $size);
+  } @else {
+    @warn 'This is not a step of the WFP Type Scale!';
+  }
+}
+/*
+ <Text fontSize="6xl">In love with React & Next</Text>
+  <Text fontSize="5xl">In love with React & Next</Text>
+  <Text fontSize="4xl">In love with React & Next</Text>
+  <Text fontSize="3xl">In love with React & Next</Text>
+  <Text fontSize="2xl">In love with React & Next</Text>
+  <Text fontSize="xl">In love with React & Next</Text>
+  <Text fontSize="lg">In love with React & Next</Text>
+  <Text fontSize="md">In love with React & Next</Text>
+  <Text fontSize="sm">In love with React & Next</Text>
+  <Text fontSize="xs">In love with React & Next</Text>
+
+  */
+
+/*
+@use 'config';
+@forward '@un/type' show
+  // Mixins
+  reset,
+  type-style,
+  font-family,
+
+  // Variables
+  $caption-01,
+  $caption-02,
+  $label,
+  $label-02,
+  $helper-text-01,
+  $body-short,
+  $body-short-02,
+  $body-long-01,
+  $body-long-02,
+  $code-01,
+  $code-02,
+  $heading-01,
+  $heading-02,
+  $productive-heading-01,
+  $productive-heading-02,
+  $productive-heading-03,
+  $productive-heading-04,
+  $productive-heading-05,
+  $productive-heading-06,
+  $productive-heading-07,
+  $expressive-paragraph-01,
+  $expressive-heading-01,
+  $expressive-heading-02,
+  $expressive-heading-03,
+  $expressive-heading-04,
+  $expressive-heading-05,
+  $expressive-heading-06,
+  $quotation-01,
+  $quotation-02,
+  $display-01,
+  $display-02,
+  $display-03,
+  $display-04,
+  $tokens;
+*/

package/scss/_zone.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use './config';
+@use './themes';
+@use './theme';
+@use './utilities/custom-property';
+
+/// Specify a Map of zones where the key will be used as part of the selector
+/// and the value will be a map used to emit CSS Custom Properties for all color
+/// values
+$zones: (
+  wfp: themes.$wfp,
+  /*g10: themes.$g10,
+  g90: themes.$g90,
+  g100: themes.$g100,*/
+) !default;
+
+@each $name, $theme in $zones {
+  .#{config.$prefix}--#{'' + $name} {
+    @each $key, $value in $theme {
+      @if type-of($value) == color {
+        @include custom-property.declaration($key, $value);
+      }
+    }
+  }
+}

package/scss/components/_index.scss

@@ -0,0 +1,82 @@
+@use "accordion";
+@use "anchor-navigation";
+@use "auth-layout";
+@use "avatar";
+@use "button";
+@use "banner-navigation";
+@use "blockquote";
+@use "breadcrumb";
+@use "checkbox";
+@use "card";
+@use "content-switcher";
+@use "context-menu";
+@use "credits";
+@use "date-picker";
+@use "date-picker-new";
+@use "empty";
+@use "file-uploader";
+@use "form";
+@use "form-controls";
+@use "form-error";
+@use "form-group";
+@use "form-hint";
+@use "form-wizard";
+@use "hero";
+@use "inline-loading";
+@use "link";
+@use "list";
+@use "loading"; // TODO look into it more
+@use "input";
+@use "notification";
+@use "text-input";
+@use "text-area";
+@use "modal";
+@use "module";
+
+/*
+@use 'list-box';
+@use 'menu';
+@use 'multiselect';
+@use 'overflow-menu';
+@use 'pagination-nav';
+@use 'popover';
+@use 'progress-bar';
+@use 'progress-indicator';
+@use 'structured-list';
+@use 'tile';
+@use 'time-picker';
+@use 'treeview';
+@use 'ui-shell';
+*/
+
+@use "pagination";
+@use "select";
+@use "secondary-navigation";
+@use "story";
+@use "slider";
+@use "sidebar";
+@use "step-navigation";
+@use "step-navigation-item";
+@use "sub-navigation";
+@use "table";
+@use "tabs";
+@use "tag";
+@use "tooltip";
+@use "toggle";
+@use "number-input";
+@use "radio-button";
+@use "main-navigation";
+@use "wrapper";
+@use "footer";
+@use "read-more";
+@use "react-select";
+@use "react-dropzone";
+@use "search";
+@use "info-bar";
+@use "item";
+@use "unit";
+@use "user";
+@use "value";
+@use "col";
+@use "grid";
+@use "skeleton-text";

package/scss/components/accordion/_accordion.legacy.scss

@@ -0,0 +1,348 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use "../../breakpoint" as *;
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../theme" as *;
+@use "../../spacing" as *;
+@use "../../type" as *;
+@use "../../utilities/button-reset";
+@use "../../utilities/component-reset";
+@use "../../utilities/convert";
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/high-contrast-mode" as *;
+
+/// @type Value
+/// @access public
+/// @group accordion
+$flex-direction: row-reverse !default;
+
+/// @type Value
+/// @access public
+/// @group accordion
+$justify-content: flex-start !default;
+
+/// @type Value
+/// @access public
+/// @group accordion
+$arrow-margin: 2px $spacing-05 0 0 !default;
+
+/// @type Value
+/// @access public
+/// @group accordion
+$title-margin: 0 0 0 $spacing-05 !default;
+
+/// @type Value
+/// @access public
+/// @group accordion
+$content-padding: 0 0 0 $spacing-05 !default;
+
+@mixin accordion {
+  .chevron-down {
+    margin-left: auto;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  .szh-accordion {
+    border-bottom: 1px solid #ccc;
+    &__item {
+      border-top: 1px solid #ccc;
+
+      &-btn {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        margin: 0;
+        padding: 1rem;
+        font-size: 1rem;
+        font-weight: 400;
+        text-align: left;
+        color: #007bff;
+        background-color: transparent;
+        border: none;
+        &:hover {
+          background-color: #f3f3f3;
+        }
+      }
+
+      &-content {
+        transition: height 0.2s ease-in-out;
+      }
+
+      &-panel {
+        padding: 1rem;
+      }
+
+      &--expanded {
+        .szh-accordion__item-btn {
+          background-color: #e7e7e7;
+        }
+        .chevron-down {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--accordion {
+    @include component-reset.reset;
+
+    width: 100%;
+    list-style: none;
+  }
+
+  .#{$prefix}--accordion__item {
+    overflow: visible;
+    border-top: 1px solid $border-subtle;
+    transition: all $duration-fast-02 motion(standard, productive);
+
+    &:last-child {
+      border-bottom: 1px solid $border-subtle;
+    }
+  }
+
+  .#{$prefix}--accordion__heading {
+    @include button-reset.reset;
+
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-height: convert.rem(40px);
+    flex-direction: $flex-direction;
+    align-items: flex-start;
+    justify-content: $justify-content;
+    padding: convert.rem(10px) 0;
+    margin: 0;
+    color: $text-body-default;
+    cursor: pointer;
+    transition: background-color motion(standard, productive) $duration-fast-02;
+
+    &:hover::before,
+    &:focus::before {
+      position: absolute;
+      top: -1px;
+      left: 0;
+      width: 100%;
+      height: calc(100% + 2px);
+      content: "";
+    }
+
+    &:hover::before {
+      background-color: $background-hover;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus::before {
+      @include focus-outline("outline-compat");
+    }
+  }
+
+  // Size styles
+  .#{$prefix}--accordion--lg .#{$prefix}--accordion__heading {
+    min-height: convert.rem(48px);
+  }
+
+  .#{$prefix}--accordion--sm .#{$prefix}--accordion__heading {
+    min-height: convert.rem(32px);
+    padding: convert.rem(5px) 0;
+  }
+
+  // Disabled styles
+  .#{$prefix}--accordion__heading[disabled] {
+    color: $text-disabled;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--accordion__heading[disabled] .#{$prefix}--accordion__arrow {
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--accordion__heading[disabled]:hover::before {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--accordion__item--disabled,
+  .#{$prefix}--accordion__item--disabled + .#{$prefix}--accordion__item {
+    border-top: 1px solid $border-disabled;
+  }
+
+  li.#{$prefix}--accordion__item--disabled:last-of-type {
+    border-bottom: 1px solid $border-disabled;
+  }
+
+  .#{$prefix}--accordion__arrow {
+    @include focus-outline("reset");
+
+    width: 1rem;
+    height: 1rem;
+    // Without flex basis and flex shrink being set here, our icon width can go
+    // <16px and cause the icon to render in the incorrect artboard size
+    flex: 0 0 1rem;
+    margin: $arrow-margin;
+    fill: $icon-primary;
+    transform: rotate(-270deg) #{"/*rtl:ignore*/"};
+    transition: all $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--accordion__title {
+    @include type-style("body-long-01");
+
+    z-index: 1;
+    width: 100%;
+    margin: $title-margin;
+    text-align: left;
+  }
+
+  .#{$prefix}--accordion__content {
+    display: none;
+    padding-right: $spacing-05;
+    padding-left: $spacing-05;
+    // Transition property for when the accordion closes
+    transition: padding motion(standard, productive) $duration-fast-02;
+
+    // Custom breakpoints based on issue #4993
+    @include breakpoint-up(480px) {
+      padding-right: $spacing-09;
+    }
+
+    @include breakpoint-up(640px) {
+      padding-right: 25%;
+    }
+
+    > p {
+      @include type-style("body-long-01");
+    }
+  }
+
+  .#{$prefix}--accordion--start .#{$prefix}--accordion__heading {
+    // Reverse `$flex-direction` token:
+    flex-direction: row;
+  }
+
+  .#{$prefix}--accordion--start .#{$prefix}--accordion__arrow {
+    // Alters `$arrow-margin` token:
+    margin: 2px 0 0 $spacing-03;
+  }
+
+  .#{$prefix}--accordion--start .#{$prefix}--accordion__content {
+    margin-left: $spacing-06;
+  }
+
+  .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content,
+  .#{$prefix}--accordion__item--expanding .#{$prefix}--accordion__content {
+    display: block;
+  }
+
+  @keyframes collapse-accordion {
+    0% {
+      @include -content-visible;
+    }
+    100% {
+      @include -content-hidden;
+    }
+  }
+
+  @keyframes expand-accordion {
+    0% {
+      @include -content-hidden;
+    }
+    100% {
+      @include -content-visible;
+    }
+  }
+
+  .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content {
+    animation: $duration-fast-02 motion(standard, productive) collapse-accordion;
+  }
+
+  .#{$prefix}--accordion__item--expanding .#{$prefix}--accordion__content {
+    animation: $duration-fast-02 motion(standard, productive) expand-accordion;
+  }
+
+  .#{$prefix}--accordion__item--active {
+    overflow: visible;
+
+    .#{$prefix}--accordion__content {
+      display: block;
+      padding-top: $spacing-03;
+      padding-bottom: $spacing-06;
+      // Transition property for when the accordion opens
+      transition: padding-top motion(entrance, productive) $duration-fast-02,
+        padding-bottom motion(entrance, productive) $duration-fast-02;
+    }
+
+    .#{$prefix}--accordion__arrow {
+      fill: $icon-primary;
+      transform: rotate(-90deg) #{"/*rtl:ignore*/"};
+    }
+  }
+
+  // Skeleton state
+  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__heading,
+  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__button {
+    cursor: default;
+  }
+
+  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__arrow {
+    cursor: default;
+    fill: $icon-primary;
+    pointer-events: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      border: none;
+      cursor: default;
+      outline: none;
+    }
+  }
+
+  .#{$prefix}--accordion.#{$prefix}--skeleton
+    .#{$prefix}--accordion__heading:hover::before {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--accordion--end.#{$prefix}--skeleton
+    .#{$prefix}--accordion__arrow {
+    margin-left: $spacing-05;
+  }
+
+  .#{$prefix}--skeleton
+    .#{$prefix}--accordion__heading:focus
+    .#{$prefix}--accordion__arrow {
+    border: none;
+    cursor: default;
+    outline: none;
+  }
+
+  .#{$prefix}--accordion__title.#{$prefix}--skeleton__text {
+    margin-bottom: 0;
+  }
+
+  // Windows HCM fix
+  .#{$prefix}--accordion__arrow,
+  .#{$prefix}--accordion__item--active .#{$prefix}--accordion__arrow {
+    @include high-contrast-mode("icon-fill");
+  }
+}
+
+@mixin -content-visible {
+  height: 100%;
+  opacity: 1;
+  visibility: inherit;
+}
+
+@mixin -content-hidden {
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+}

package/scss/components/accordion/_accordion.scss

@@ -0,0 +1,118 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use "../../breakpoint" as *;
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../theme" as *;
+@use "../../spacing" as *;
+@use "../../type" as *;
+@use "../../utilities/button-reset";
+@use "../../utilities/component-reset";
+@use "../../utilities/convert";
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/high-contrast-mode" as *;
+
+/// @type Value
+/// @access public
+/// @group accordion
+$flex-direction: row-reverse !default;
+
+/// @type Value
+/// @access public
+/// @group accordion
+$justify-content: flex-start !default;
+
+/// @type Value
+/// @access public
+/// @group accordion
+$arrow-margin: 2px $spacing-05 0 0 !default;
+
+/// @type Value
+/// @access public
+/// @group accordion
+$title-margin: 0 0 0 $spacing-05 !default;
+
+/// @type Value
+/// @access public
+/// @group accordion
+$content-padding: 0 0 0 $spacing-05 !default;
+
+@mixin accordion {
+  .#{$prefix}--accordion--button {
+    margin-left: -0.2em;
+    margin-right: 0.5em;
+    transform: rotate(-90deg);
+
+    transition: transform 0.1s ease-in-out;
+    &__expanded {
+      transform: rotate(0deg);
+    }
+  }
+
+  .szh-accordion {
+    @include reset;
+    @include font-family("sans");
+    width: 100%;
+    border-bottom: 1px solid $border-strong;
+    &__item {
+      border-top: 1px solid $border-strong;
+
+      &-btn {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        margin: 0;
+        padding: 1rem;
+        font-size: 1rem;
+        font-weight: 400;
+        text-align: left;
+        color: $action-default-fill-primary-default;
+        background-color: transparent;
+        border: none;
+        &:hover {
+          background-color: $layer-primary;
+        }
+      }
+
+      &-content {
+        transition: height 0.2s ease-in-out;
+      }
+
+      &-panel {
+        padding: 1rem;
+      }
+
+      &--expanded {
+        .szh-accordion__item-btn {
+          background-color: #e7e7e7;
+        }
+        .chevron-down {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--accordion {
+    @include component-reset.reset;
+
+    width: 100%;
+    list-style: none;
+  }
+
+  .#{$prefix}--accordion__item {
+    overflow: visible;
+    border-top: 1px solid $border-subtle;
+    transition: all $duration-fast-02 motion(standard, productive);
+
+    &:last-child {
+      border-bottom: 1px solid $border-subtle;
+    }
+  }
+}