@kaizen/components 1.4.26 → 1.5.0

package/dist/iife/FilterButton.module-HA7A5HIZ.scss

@@ -0,0 +1,22 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.filterButton {
+  gap: $spacing-xs;
+}
+
+.labelContainer {
+  display: inline-flex;
+}
+
+.hasSelectedValues {
+  font-weight: $typography-button-primary-font-weight;
+}
+
+.labelSeparator {
+  margin-inline-end: $spacing-xs;
+
+  [dir="ltr"] [dir="rtl"] & {
+    margin-right: 0;
+  }
+}

package/dist/iife/FilterButtonBase.module-KNRAMYSJ.scss

@@ -0,0 +1,65 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "../../../_mixins/button-reset";
+@import "./variables";
+
+.filterButtonBase {
+  @include button-reset;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  height: 3rem; // 48px
+  padding: $spacing-sm;
+
+  border-width: 0;
+  border-radius: $border-solid-border-radius;
+
+  background-color: $color-blue-100;
+
+  font-family: $typography-button-secondary-font-family;
+  font-weight: $typography-button-secondary-font-weight;
+  font-size: $typography-button-secondary-font-size;
+  line-height: $typography-button-secondary-line-height;
+  letter-spacing: $typography-button-secondary-letter-spacing;
+  color: $color-blue-500;
+  white-space: nowrap;
+
+  #{$selectors--filter-button-base--hover},
+  #{$selectors--filter-button-base--active} {
+    z-index: 2;
+  }
+
+  #{$selectors--filter-button-base--hover},
+  #{$selectors--filter-button-base--active},
+  #{$selectors--filter-button-base--focus} {
+    background-color: $color-blue-200;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  #{$selectors--filter-button-base--focus} {
+    outline: none;
+
+    &::after {
+      content: "";
+      z-index: 3;
+      position: absolute;
+      top: $focus-ring-offset-outer;
+      bottom: $focus-ring-offset-outer;
+      left: $focus-ring-offset-outer;
+      right: $focus-ring-offset-outer;
+      border-radius: $border-focus-ring-border-radius;
+      border: $border-focus-ring-border-width $border-focus-ring-border-style
+        $color-blue-500;
+    }
+  }
+}

package/dist/iife/FilterContents.module-VKPAJKDG.scss

@@ -0,0 +1,5 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.filterContents {
+  padding: $spacing-md;
+}

package/dist/iife/FilterPopover.module-2NVOPVIT.scss

@@ -0,0 +1,11 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/shadow";
+
+.filterPopover {
+  background-color: $color-white;
+  z-index: 1010;
+  box-shadow: $shadow-large-box-shadow;
+  border-radius: $border-borderless-border-radius;
+  display: inline-flex;
+}

package/dist/iife/Icon.module-VD7NKLAR.scss

@@ -0,0 +1,72 @@
+@import "~@kaizen/design-tokens/sass/animation";
+@import "./styles";
+
+.icon {
+  @extend %caIcon;
+
+  // Set sensible defaults for icon colours when
+  // windows high-contrast mode is enabled. These
+  // should be overridden by the consumer when the
+  // icon colour conveys information, such as mood.
+  @media screen and (-ms-high-contrast: active) {
+    color: black;
+  }
+
+  @media screen and (-ms-high-contrast: white-on-black) {
+    color: white;
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    color: black;
+  }
+}
+
+.inheritSize {
+  @extend %caIconInheritSize;
+}
+
+.interactiveIconWrapper {
+  cursor: pointer;
+  .icon {
+    opacity: 0.7;
+    transition: $animation-duration-fast opacity;
+  }
+  &:disabled,
+  &.disabled {
+    .icon {
+      opacity: 0.3;
+    }
+  }
+  &:not(:disabled):not(.disabled) {
+    &:hover,
+    &:focus,
+    &.hover {
+      .icon {
+        opacity: 1;
+      }
+    }
+    &:active,
+    &.active {
+      .icon {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// On dark backgrounds, icons are fully opaque by default and half opacity when active.
+// Hover and disabled states are the same.
+.reversedInteractiveIconWrapper {
+  composes: interactiveIconWrapper;
+  .icon {
+    opacity: 1;
+  }
+  &:not(:disabled, .disabled) {
+    &:active,
+    &.active {
+      .icon {
+        opacity: 0.5;
+      }
+    }
+  }
+}

package/dist/iife/Tooltip.module-YU7VOTNZ.scss

@@ -0,0 +1,184 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/animation";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/component-library/styles/layers";
+@import "./variables";
+
+.tooltip {
+  position: relative; // Make this a positioned element so z-index works. (Note: Popper overrides this to absolute.)
+  pointer-events: none;
+  z-index: $ca-z-index-tooltip;
+}
+
+.tooltipContent {
+  max-width: 400px;
+  padding: 0.4375rem 0.53125rem;
+  color: $color-purple-800;
+  text-align: center;
+  font-family: $typography-paragraph-body-font-family;
+  font-size: $typography-heading-6-font-size;
+  font-weight: $typography-paragraph-body-font-weight;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  line-height: $typography-paragraph-small-line-height;
+  border-radius: $border-solid-border-radius;
+  transition: opacity $animation-duration-fast,
+    transform $animation-duration-fast;
+  box-shadow: $shadow-small-box-shadow;
+
+  &.default {
+    background-color: $color-white;
+    border: $border-solid-border-width $border-solid-border-style
+      $color-gray-300;
+  }
+
+  &.informative {
+    background-color: $color-blue-100;
+    border: $border-solid-border-width $border-solid-border-style
+      $color-blue-300;
+  }
+
+  &.positive {
+    background-color: $color-green-100;
+    border: $border-solid-border-width $border-solid-border-style
+      $color-green-300;
+  }
+
+  &.cautionary {
+    background-color: $color-yellow-100;
+    border: $border-solid-border-width $border-solid-border-style
+      $color-yellow-300;
+  }
+
+  &.highlight {
+    background-color: $color-purple-100;
+    border: $border-solid-border-width $border-solid-border-style
+      $color-purple-300;
+  }
+}
+
+.arrow {
+  // Ensure the arrow always sits on top of the tooltipContent
+  z-index: 1;
+
+  // This is required by popper, otherwise positioning issues will exist.
+  // https://github.com/popperjs/react-popper/issues/354#issuecomment-616540651
+  position: absolute;
+
+  [data-popper-placement^="top"] & {
+    bottom: 0;
+  }
+
+  [data-popper-placement^="bottom"] & {
+    top: 0;
+
+    // There is a conflict with the popper arrow styling, which also
+    // adds a transform to the arrow. Hence, we need this additional
+    // wrapper, just to rotate it.
+    .arrowInner {
+      transform: rotate(180deg);
+    }
+  }
+
+  [data-popper-placement^="left"] & {
+    right: 0;
+    .arrowInner {
+      transform: rotate(270deg);
+    }
+  }
+  [data-popper-placement^="right"] & {
+    left: 0;
+    .arrowInner {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+.arrowMain::before,
+.arrowMain::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  border-left: calc(#{$arrow-width} / 2) solid transparent;
+  border-right: calc(#{$arrow-width} / 2) solid transparent;
+  margin-left: calc(#{$arrow-width} / -2);
+}
+
+.arrowMain {
+  // before styles
+  &.default::before {
+    border-top: $arrow-height solid $color-gray-300;
+  }
+
+  &.informative::before {
+    border-top: $arrow-height solid $color-blue-300;
+  }
+
+  &.positive::before {
+    border-top: $arrow-height solid $color-green-300;
+  }
+
+  &.highlight::before {
+    border-top: $arrow-height solid $color-purple-300;
+  }
+
+  &.cautionary::before {
+    border-top: $arrow-height solid $color-yellow-300;
+  }
+  // after styles
+  &:after {
+    margin-top: -3px;
+  }
+
+  &.default::after {
+    border-top: $arrow-height solid white;
+  }
+
+  &.informative::after {
+    border-top: $arrow-height solid $color-blue-100;
+  }
+
+  &.positive::after {
+    border-top: $arrow-height solid $color-green-100;
+  }
+
+  &.highlight::after {
+    border-top: $arrow-height solid $color-purple-100;
+  }
+
+  &.cautionary::after {
+    border-top: $arrow-height solid $color-yellow-100;
+  }
+}
+
+.arrowShadow::before {
+  border-top: 0px solid $color-gray-300;
+}
+
+// Triangle portion is a little darker to bring out shadow
+.arrowShadow::after {
+  border-top: $arrow-height solid rgba($color-purple-800-rgb, 0.09);
+  margin-top: 1px;
+  filter: blur(4px);
+}
+
+.displayInline {
+  display: inline;
+}
+
+.displayBlock {
+  display: block;
+}
+
+.displayInlineBlock {
+  display: inline-block;
+}
+
+.displayFlex {
+  display: flex;
+}
+
+.displayInlineFlex {
+  display: inline-flex;
+}

package/dist/iife/chevron-down.icon-COG3GAYR.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>Icons/Directional/chevron-down</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="6.17916667 6.84500003 10 10.746733 13.8208333 6.84500003 15 8.04913353 10 13.155 5 8.04913353"></polygon>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icons/Directional/chevron-down">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use fill="#000000" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>

package/dist/iife/chevron-up.icon-O5VRF5BX.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>Icons/Directional/chevron-up</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="6.17865149 13.155 10 9.25326703 13.8213485 13.155 15.0006742 11.9508665 10 6.84500003 4.99932583 11.9508665"></polygon>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icons/Directional/chevron-up">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use fill="#000000" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>

package/dist/iife/clear.icon-OD6PWTJH.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>clear</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M10,2 C5.576,2 2,5.576 2,10 C2,14.424 5.576,18 10,18 C14.424,18 18,14.424 18,10 C18,5.576 14.424,2 10,2 L10,2 Z M14,12.872 L12.872,14 L10,11.128 L7.128,14 L6,12.872 L8.872,10 L6,7.128 L7.128,6 L10,8.872 L12.872,6 L14,7.128 L11.128,10 L14,12.872 L14,12.872 Z" id="path-1"></path>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="clear">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="Icons/Actions/clear" fill="#000000" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>