@kaizen/components 1.4.22-canary.5 → 1.4.23

package/dist/iife/Popover.module-5ZQUBHXG.scss

@@ -0,0 +1,264 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+// Sync with PopoverModern.tsx
+$arrow-width: 14px;
+$arrow-height: 7px;
+
+$large-width: 450px;
+
+@mixin button-reset {
+  appearance: none;
+  display: inline;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+// Suggestion: with this implementation, the anchor point of the popover is at the base of the triangle. But,
+// we would ideally want it at the tip of the triangle. Otherwise, when using the popover, the consumer needs to manually
+// add something like a `margin-top: 8px` to get the popover properly positioned.
+// I didn't update this, as I didn't want to introduce a breaking change.
+@mixin arrow($background-color, $border-color) {
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    border-left: ($arrow-width / 2) solid transparent;
+    border-right: ($arrow-width / 2) solid transparent;
+    top: 0;
+    left: 0;
+  }
+
+  &::before {
+    border-top: $arrow-height solid $border-color;
+  }
+
+  /* The white fill of the triangle */
+  &::after {
+    border-top: $arrow-height solid $background-color;
+    margin-top: -2px;
+    z-index: 1;
+  }
+}
+
+.root {
+  width: 220px;
+  position: absolute;
+  left: 50%;
+  // also see the component file under getRootStyle, which will transform the element
+}
+
+%box {
+  background: $color-white;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-300;
+  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.1));
+  border-radius: $border-solid-border-radius;
+  color: $color-purple-800;
+  text-align: left;
+  padding: $spacing-sm 1rem 1rem;
+}
+
+.defaultBox {
+  @extend %box;
+}
+
+.defaultArrow {
+  @include arrow(white, $color-gray-300);
+}
+
+$informative-box-border-color: $color-blue-300;
+
+.informativeBox {
+  @extend %box;
+  background: $color-blue-100;
+  border-color: $informative-box-border-color;
+}
+
+.informativeArrow {
+  @include arrow($color-blue-100, $informative-box-border-color);
+}
+
+$positive-box-border-color: $color-green-300;
+
+.positiveBox {
+  @extend %box;
+  background: $color-green-100;
+  border-color: $positive-box-border-color;
+}
+
+.positiveArrow {
+  @include arrow($color-green-100, $positive-box-border-color);
+}
+
+$negative-box-border-color: $color-red-300;
+
+.negativeBox {
+  @extend %box;
+  background: $color-red-100;
+  border-color: $negative-box-border-color;
+}
+
+.negativeArrow {
+  @include arrow($color-red-100, $negative-box-border-color);
+}
+
+.cautionaryBox {
+  @extend %box;
+  background: $color-yellow-100;
+  border-color: $color-yellow-400;
+}
+
+.cautionaryArrow {
+  @include arrow($color-yellow-100, $color-yellow-400);
+}
+
+.header {
+  position: relative;
+  margin-bottom: $spacing-xs;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  padding-right: $spacing-md;
+}
+
+.container {
+  position: relative;
+  white-space: pre-line;
+}
+
+.icon {
+  display: inherit;
+  margin-right: $spacing-xs;
+}
+
+.informativeIcon {
+  color: $color-blue-500;
+}
+
+.positiveIcon {
+  color: $color-green-400;
+}
+
+.negativeIcon {
+  color: $color-red-500;
+}
+
+.cautionaryIcon {
+  color: $color-yellow-500;
+}
+
+.close {
+  @include button-reset;
+  position: absolute;
+  right: 0;
+  margin-left: auto;
+  display: inherit;
+  color: rgba($color-purple-800-rgb, 0.7);
+
+  &:hover {
+    color: $color-purple-800;
+  }
+
+  &:global(.focus-visible) {
+    color: $color-purple-800;
+    outline: $color-blue-500 $border-focus-ring-border-style
+      $border-focus-ring-border-width;
+    outline-offset: calc(-1 * #{$border-focus-ring-border-width});
+    border-radius: $border-borderless-border-radius;
+  }
+
+  :focus {
+    outline: none;
+  }
+}
+
+.arrowWrapper {
+  position: absolute;
+  // Needed by popper, so it measures the size of the arrow correctly
+  width: $arrow-width;
+  height: $arrow-height;
+}
+
+.arrow {
+  // Needed by popper, so it measures the size of the arrow correctly
+  width: $arrow-width;
+  height: $arrow-height;
+}
+
+/**
+ * In the legacy popover, the "side" described the location of the arrow, and
+ * we use css classes to determine the placement.
+ * In the modern popover, the "side" describes the location of the popover
+ * relative to the reference element, and we use data attributes to determine
+ * the placement.
+ * Hence, the confusion below.
+ */
+.arrowSideTop,
+[data-popper-placement^="bottom"] .arrowWrapper {
+  bottom: 100%;
+  left: 50%;
+  margin-top: -9px;
+
+  .arrow {
+    transform: rotate(180deg);
+  }
+}
+
+.arrowSideLeft,
+[data-popper-placement^="left"] .arrowWrapper {
+  right: 0;
+  margin-right: -10px;
+
+  .arrow {
+    transform: rotate(270deg);
+  }
+}
+.arrowSideRight,
+[data-popper-placement^="right"] .arrowWrapper {
+  left: 0;
+  margin-left: -10px;
+
+  .arrow {
+    transform: rotate(90deg);
+  }
+}
+
+.arrowSideBottom,
+[data-popper-placement^="top"] .arrowWrapper {
+  top: 100%;
+  left: 50%;
+}
+
+// Legacy component only
+.arrowPositionCenter {
+  transform: translateX(-50%);
+}
+
+// Legacy component only
+.arrowPositionStart {
+  left: $spacing-md;
+  right: auto;
+}
+
+// Legacy component only
+.arrowPositionEnd {
+  right: $spacing-md;
+  left: auto;
+}
+
+.large {
+  width: auto;
+  max-width: $large-width;
+}
+
+.singleLine {
+  text-overflow: ellipsis;
+  /* white-space and overflow are required for text-overflow to do anything */
+  white-space: nowrap;
+  overflow: hidden;
+}

package/dist/iife/ProgressBar.module-RL2UWVEH.scss

@@ -0,0 +1,91 @@
+@import "~@kaizen/design-tokens/sass/color";
+
+$height: 10px;
+
+@mixin animation-background($color) {
+  background: linear-gradient(90deg, transparent, #{$color} 75%, transparent);
+}
+
+.label {
+  color: $color-purple-800;
+  text-align: center;
+}
+
+.subtext {
+  color: $color-purple-800;
+  text-align: center;
+  opacity: 0.8;
+}
+
+.progressBackground {
+  width: 100%;
+  background: $color-gray-300;
+  border-radius: $height;
+  height: $height;
+  overflow: hidden;
+  position: relative;
+}
+
+@keyframes pulse {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(200%);
+  }
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  border-radius: $height;
+  overflow: hidden;
+  right: 0;
+  transition: transform 200ms ease;
+}
+
+.positive {
+  composes: progress;
+  background: $color-green-400;
+  &::after {
+    @include animation-background($color-green-300);
+  }
+}
+
+.informative {
+  composes: progress;
+  background: $color-blue-400;
+  &::after {
+    @include animation-background($color-blue-300);
+  }
+}
+
+.cautionary {
+  composes: progress;
+  background: $color-yellow-400;
+  &::after {
+    @include animation-background($color-yellow-300);
+  }
+}
+
+.negative {
+  composes: progress;
+  background: $color-red-400;
+}
+
+.isAnimating {
+  &::after {
+    opacity: 1;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 50%;
+    animation: pulse 2s infinite;
+    transition: opacity 0.2s;
+  }
+}

package/dist/iife/Radio.module-DCWPHVKW.scss

@@ -0,0 +1,99 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/component-library/styles/mixins/forms";
+@import "../../variables";
+
+$radio-size: 24px;
+$icon-size: 10px;
+$icon-offset: 5px;
+$focus-ring-offset: 2px;
+
+$dt-color-radio-background-color-hover: $color-gray-100;
+$dt-color-radio-disc-color-base: $color-gray-600;
+$dt-color-radio-border-color-focus: $color-blue-500;
+$dt-color-radio-border-color-focus-reversed: $color-blue-300;
+
+.radioInput {
+  @include form-input-visually-hidden();
+}
+
+.icon {
+  top: $icon-offset;
+  left: $icon-offset;
+  width: $icon-size;
+  height: $icon-size;
+  border-radius: 50%;
+  background: $dt-color-radio-disc-color-base;
+  position: absolute;
+
+  &.reversed {
+    background: $color-white;
+  }
+}
+
+.box {
+  display: block;
+  position: relative;
+  background: $color-white;
+  height: $radio-size;
+  width: $radio-size;
+  top: 0;
+  border: $border-solid-border-width $border-solid-border-style
+    $dt-color-form-border-color;
+  box-sizing: border-box;
+  border-radius: 50%;
+
+  .radioInput:focus:not([disabled]) + & {
+    border-color: $dt-color-radio-disc-color-base;
+  }
+
+  .radioInput:focus:not([disabled]) + &::after {
+    pointer-events: none;
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    background: transparent;
+    border-radius: $radio-size + $focus-ring-offset;
+    border-width: $border-focus-ring-border-width;
+    border-style: $border-focus-ring-border-style;
+    border-color: $dt-color-radio-border-color-focus;
+    top: -$focus-ring-offset - ($radio-size / 8);
+    left: -$focus-ring-offset - ($radio-size / 8);
+    width: calc(
+      #{$radio-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2
+    );
+    height: calc(
+      #{$radio-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2
+    );
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .radioInput:not([disabled]) + &:hover {
+      border-color: $dt-color-form-border-color-hover;
+      background-color: $dt-color-radio-background-color-hover;
+    }
+  }
+
+  &.reversed {
+    border: $border-solid-border-width $border-solid-border-style
+      rgba($color-white-rgb, 0.65);
+    background: transparent;
+
+    .radioInput:focus:not([disabled]) + & {
+      border-color: $color-white;
+    }
+    .radioInput:focus:not([disabled]) + &::after {
+      border-color: $dt-color-radio-border-color-focus-reversed;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .radioInput:not([disabled]) + &:hover {
+        border-color: $color-white;
+        background-color: transparent;
+      }
+    }
+  }
+  &.error {
+    border-color: $color-red-500;
+  }
+}

package/dist/iife/RadioField.module-C2XRADW5.scss

@@ -0,0 +1,50 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "../variables";
+
+$dt-color-radio-background-color-hover: $color-gray-100;
+
+.container {
+  position: relative;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  margin-bottom: $spacing-sm;
+
+  label {
+    -webkit-tap-highlight-color: transparent;
+
+    :global(.ideal-sans) & {
+      // This is to override bootstrap styles. Remove when appropriate
+      font-size: $typography-paragraph-body-font-size;
+      padding-top: 0;
+    }
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    &:not(.reversed) label:hover {
+      input:not([disabled]) + span {
+        border-color: $dt-color-form-border-color-hover;
+        background-color: $dt-color-radio-background-color-hover;
+      }
+    }
+    &.reversed label:hover {
+      input:not([disabled]) + span {
+        border-color: $color-white;
+        background-color: transparent;
+      }
+    }
+  }
+
+  &.selected {
+    label {
+      font-family: $typography-paragraph-body-font-family;
+      font-size: $typography-paragraph-body-font-size;
+      line-height: $typography-paragraph-body-line-height;
+      letter-spacing: $typography-paragraph-body-letter-spacing;
+      font-weight: $typography-paragraph-bold-font-weight;
+      position: static;
+    }
+  }
+}

package/dist/iife/RadioGroup.module-PDLRO572.scss

@@ -0,0 +1,23 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.radioGroupLabel {
+  margin-bottom: $spacing-sm;
+  label {
+    :global(.ideal-sans) & {
+      // This is to override bootstrap styles. Remove when appropriate
+      padding-top: 0;
+    }
+  }
+  &.reversed {
+    color: $color-white;
+  }
+}
+.radioGroupContainer {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: $spacing-sm;
+  &.noBottomMargin {
+    margin-bottom: 0;
+  }
+}

package/dist/iife/RemovableFilterTrigger.module-SJ37V6UZ.scss

@@ -0,0 +1,29 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "../mixins";
+
+.trigger {
+  display: inline-flex;
+
+  .triggerButton {
+    border-top-left-radius: $border-solid-border-radius;
+    border-bottom-left-radius: $border-solid-border-radius;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .removeButton {
+    @include button;
+    width: $spacing-xl;
+    justify-content: center;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: $border-solid-border-radius;
+    border-bottom-right-radius: $border-solid-border-radius;
+  }
+
+  .divider {
+    border-left: 1px solid $color-blue-300;
+  }
+}

package/dist/iife/RichTextContent.module-4HA44IM4.scss

@@ -0,0 +1,5 @@
+@import "../mixins";
+
+.content > :global(.ProseMirror) {
+  @include contentStyles;
+}

package/dist/iife/RichTextEditor.module-ZHXEK4XJ.scss

@@ -0,0 +1,97 @@
+@import "@kaizen/design-tokens/sass/animation";
+@import "@kaizen/design-tokens/sass/border";
+@import "@kaizen/design-tokens/sass/color";
+@import "@kaizen/design-tokens/sass/spacing";
+@import "@kaizen/design-tokens/sass/typography";
+@import "../mixins";
+
+.editor > :global(.ProseMirror) {
+  @include contentStyles;
+  border-radius: $border-solid-border-radius;
+  padding: $spacing-sm calc(#{$spacing-xs} * 3);
+  position: relative;
+  transition: background-color $animation-duration-immediate,
+    border-color $animation-duration-immediate;
+
+  &:hover,
+  &:focus {
+    border-color: $color-gray-600;
+    background: $color-gray-200;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:global(.focus-visible)::after {
+    $focus-ring-offset: 5px;
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    background: transparent;
+    border-radius: 2px 2px $border-focus-ring-border-radius
+      $border-focus-ring-border-radius;
+    border-width: $border-focus-ring-border-width;
+    border-style: $border-focus-ring-border-style;
+    border-color: $color-blue-500;
+    top: calc(-1 * #{$focus-ring-offset});
+    left: calc(-1 * #{$focus-ring-offset});
+    right: calc(-1 * #{$focus-ring-offset});
+    bottom: calc(-1 * #{$focus-ring-offset});
+  }
+}
+
+.editor.hasToolbar > :global(.ProseMirror) {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+.editorWrapper {
+  position: relative;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+  background: $color-white;
+  border-radius: $border-solid-border-radius;
+  word-wrap: break-word;
+
+  &:hover,
+  &:focus-within {
+    border-color: $color-gray-600;
+    .toolbar {
+      border-color: $color-gray-600;
+    }
+  }
+
+  &.error {
+    &,
+    .toolbar {
+      border-color: $color-red-500;
+    }
+
+    &:hover {
+      &,
+      .toolbar {
+        border-color: $color-red-600;
+      }
+    }
+  }
+
+  &.caution {
+    &,
+    .toolbar {
+      border-color: $color-yellow-600;
+    }
+
+    &:hover {
+      &,
+      .toolbar {
+        border-color: $color-yellow-700;
+      }
+    }
+  }
+}
+
+@for $i from 1 through 20 {
+  .editor.rows#{$i} > :global(.ProseMirror) {
+    min-height: calc(#{$typography-paragraph-body-line-height} * #{$i});
+  }
+}

package/dist/iife/RoadblockModal.module-KVZCYLF2.scss

@@ -0,0 +1,45 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/deprecated-component-library-helpers/styles/color";
+@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
+@import "~@kaizen/component-library/styles/responsive";
+
+$dt-roadblock-header-background: $color-orange-100;
+
+.modal {
+  composes: genericModal from "../Primitives/GenericModal.module.scss";
+  min-width: 300px;
+  max-width: 600px;
+}
+
+.header {
+  padding: $spacing-lg $spacing-md $spacing-sm;
+  text-align: center;
+  position: relative;
+}
+
+.headerBackground {
+  background-color: $dt-roadblock-header-background;
+  height: 120px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
+}
+
+.body {
+  padding: $spacing-md $spacing-xxxxl $spacing-sm;
+}
+
+.iconContainer {
+  position: relative;
+  margin-bottom: $spacing-sm;
+}
+
+.spotIcon {
+  width: 155px;
+  height: 155px;
+  margin: 0 auto;
+}

package/dist/iife/SearchField.module-2EV6HGZE.scss

@@ -0,0 +1,6 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.label {
+  display: block;
+  margin-bottom: $spacing-xs; // @note: add gap between label and input
+}