@kaizen/components 1.4.14 → 1.4.16

package/dist/iife/CheckboxField.module-MS76TDL7.scss

@@ -0,0 +1,46 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "../variables";
+
+// -----------------------------------------------
+// Checkbox Field
+// -----------------------------------------------
+///////////////////////////////////////////////////
+// LAYOUT
+///////////////////////////////////////////////////
+.container {
+  position: relative;
+  margin-bottom: $spacing-xs;
+
+  label {
+    // This is to override bootstrap styles. Remove when appropriate
+    padding-top: 0;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  &.noBottomMargin {
+    margin-bottom: 0;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    label:hover {
+      input:not([disabled]) + div {
+        border-color: $dt-color-form-border-color;
+        background-color: $color-gray-100;
+      }
+    }
+  }
+
+  &.checked,
+  &.mixed {
+    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/CheckboxGroup.module-AHAPICAN.scss

@@ -0,0 +1,13 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.checkboxGroupLabel {
+  margin-bottom: $spacing-sm;
+}
+.checkboxGroupContainer {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: $spacing-sm;
+  &.noBottomMargin {
+    margin-bottom: 0;
+  }
+}

package/dist/iife/ClearButton.module-KVNHOLVT.scss

@@ -0,0 +1,79 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "../../mixins";
+
+// Polyfill
+$polyfill--focus-visible: ":global(.js-focus-visible) &:global(.focus-visible)";
+
+// Classnames to simulate pseudo states in storybook
+$story-className--clear-button-hover: ":global(.story__clear-button-hover)";
+
+// Combined pseudo state classes
+$selectors--clear-button-hover: "&:hover, &#{$story-className--clear-button-hover}";
+$selectors--clear-button-focus: "&:focus-visible, #{$polyfill--focus-visible}";
+
+.clearButton {
+  @include button-reset;
+
+  position: relative;
+  display: inline-flex;
+
+  #{$selectors--clear-button-hover} {
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  #{$selectors--clear-button-focus} {
+    &::after {
+      $focus-ring-offset: -1px;
+
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      border-radius: 50%;
+      top: $focus-ring-offset;
+      left: $focus-ring-offset;
+      right: $focus-ring-offset;
+      bottom: $focus-ring-offset;
+    }
+  }
+}
+
+///////////////////////////////////////////////////
+// THEMES
+///////////////////////////////////////////////////
+
+.default {
+  color: $color-gray-500;
+
+  #{$selectors--clear-button-hover},
+  #{$selectors--clear-button-focus} {
+    color: $color-purple-800;
+  }
+
+  #{$selectors--clear-button-focus} {
+    &::after {
+      border-color: $color-blue-500;
+    }
+  }
+}
+
+.reversed {
+  color: rgba($color-white-rgb, 0.8);
+
+  #{$selectors--clear-button-hover},
+  #{$selectors--clear-button-focus} {
+    color: $color-white;
+  }
+
+  #{$selectors--clear-button-focus} {
+    &::after {
+      border-color: $color-blue-300;
+    }
+  }
+}

package/dist/iife/Collapsible.module-ZJNVWQIB.scss

@@ -0,0 +1,119 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/animation";
+
+$heading-active-color: $color-gray-200;
+// ^This is just a temporary hex to get us by for now until we rearrange our neutrals and introduce something that can used here.
+$border-color: rgba($color-gray-600-rgb, 0.2);
+
+// We need a full border radius on this container element, then have classes
+// beneath to toggle nested borders off and on for different use cases.
+.container {
+  background-color: $color-white;
+  box-shadow: $shadow-small-box-shadow;
+  border-radius: $border-borderless-border-radius;
+}
+
+.single {
+  .header {
+    border-radius: $border-borderless-border-radius;
+  }
+}
+
+.separated {
+  & + .separated {
+    margin-top: calc(#{$spacing-md} * 0.3);
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .header {
+    border-radius: $border-borderless-border-radius;
+  }
+}
+
+// When a collapsible group is rendered, we need the first group to have a rounded
+// on top and the last group to have a rounded bottom edge. Then when the last group
+// is open we remove the rounded edge as the content sits beneath and needs to be straight.
+.groupItem {
+  & + .groupItem {
+    border-top: 1px $border-solid-border-style $border-color;
+  }
+
+  &:first-of-type > .header {
+    border-top-left-radius: $border-borderless-border-radius;
+    border-top-right-radius: $border-borderless-border-radius;
+  }
+
+  &:last-of-type > .header:not(.open) {
+    border-bottom-left-radius: $border-borderless-border-radius;
+    border-bottom-right-radius: $border-borderless-border-radius;
+  }
+}
+
+// Round the bottom corners of the header so when the container is open, the
+// header background is not rounded on the corners and flush with the content beneath.
+.open .header {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  text-align: left;
+  background-color: $color-white;
+  border: none;
+  transition: background-color $animation-duration-rapid;
+  padding-top: $spacing-sm;
+  padding-bottom: $spacing-sm;
+  padding-left: $spacing-md;
+  padding-right: $spacing-sm;
+
+  &:hover {
+    background-color: $heading-active-color;
+  }
+
+  [dir="rtl"] & {
+    text-align: right;
+    padding-left: $spacing-sm;
+    padding-right: $spacing-md;
+  }
+}
+
+.chevronButton:hover {
+  // hack to get rid of the IconButton hover styling because it clashes with the hover styling on the Collapsible header
+  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.title {
+  flex: 1 1 auto;
+}
+
+.defaultVariant {
+  background-color: $heading-active-color;
+}
+
+.clearVariant {
+  border-bottom: 1px $border-solid-border-style $border-color;
+}
+
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 10;
+}
+
+.section {
+  padding: $spacing-md;
+}
+
+.noPadding {
+  padding: 0;
+}
+
+.hide {
+  display: none;
+}

package/dist/iife/CollapsibleGroup.module-UR2SIYLJ.scss

@@ -0,0 +1,10 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/shadow";
+
+// We need a full border radius on this container element, then have classes
+// beneath to toggle nested borders off and on for different use cases.
+.container {
+  background-color: white;
+  box-shadow: $shadow-small-box-shadow;
+  border-radius: $border-borderless-border-radius;
+}

package/dist/iife/ConfirmationModal.module-RN2H7KPL.scss

@@ -0,0 +1,157 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/layout";
+
+$dt-positive-header-background: $color-green-100;
+$dt-informative-header-background: $color-blue-100;
+$dt-negative-header-background: $color-red-100;
+$dt-cautionary-header-background: $color-yellow-100;
+$dt-heading-text-color: $color-purple-800;
+$dt-cautionary-heading-text-color: $color-purple-800;
+$dt-assertive-header-background: $color-orange-100;
+
+.modal {
+  composes: genericModal from "../Primitives/GenericModal.module.scss";
+  min-width: 300px;
+  max-width: 600px;
+}
+
+.header {
+  color: $color-white;
+  text-align: left;
+  border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
+
+  &.padded {
+    padding: $spacing-md $spacing-lg;
+    @media (max-width: $layout-breakpoints-medium) {
+      padding: $spacing-md;
+    }
+  }
+
+  // override Murmur global styles :(
+  h1 {
+    color: $dt-heading-text-color;
+  }
+}
+
+.positiveHeader,
+.informativeHeader,
+.negativeHeader,
+.cautionaryHeader,
+.assertiveHeader {
+  display: grid;
+  grid-template-columns: 0.2fr 2fr;
+  align-items: center;
+  &.prominent {
+    grid-template-columns: 1.1fr 2fr;
+    @media (max-width: $layout-breakpoints-medium) {
+      display: flex;
+      flex-direction: column;
+      align-content: flex-start;
+      justify-content: center;
+      align-items: flex-start;
+    }
+    .iconContainer {
+      position: absolute;
+      top: 8%;
+      @media (max-width: $layout-breakpoints-medium) {
+        position: relative;
+        top: 0;
+        margin-bottom: $spacing-sm;
+      }
+    }
+    .spotIcon,
+    .svgIcon > svg {
+      width: 155px;
+      height: 155px;
+      margin: 0 auto;
+      color: $color-purple-800;
+      @media (max-width: $layout-breakpoints-medium) {
+        width: 86px;
+        height: 86px;
+      }
+    }
+  }
+  .iconContainer {
+    align-self: flex-start;
+    @media (min-width: $layout-breakpoints-medium) {
+      align-self: center;
+    }
+  }
+  .spotIcon,
+  .svgIcon > svg {
+    width: 30px;
+    height: 30px;
+    @media (max-width: $layout-breakpoints-medium) {
+      margin-right: 0.9375rem;
+      position: relative;
+      top: 0.125rem;
+    }
+  }
+}
+
+.positiveHeader {
+  background-color: $dt-positive-header-background;
+
+  .spotIcon,
+  .svgIcon > svg {
+    color: $color-green-500;
+  }
+}
+
+.assertiveHeader {
+  background-color: $dt-assertive-header-background;
+
+  .spotIcon,
+  .svgIcon > svg {
+    color: $color-orange-500;
+  }
+}
+
+.informativeHeader {
+  background-color: $dt-informative-header-background;
+
+  .spotIcon,
+  .svgIcon > svg {
+    color: $color-blue-500;
+  }
+}
+
+.negativeHeader {
+  background-color: $dt-negative-header-background;
+
+  .spotIcon,
+  .svgIcon > svg {
+    color: $color-red-500;
+  }
+}
+
+.cautionaryHeader {
+  background-color: $dt-cautionary-header-background;
+
+  .spotIcon,
+  .svgIcon > svg {
+    color: $color-yellow-500;
+  }
+}
+
+.prominent {
+  display: grid;
+  grid-template-columns: 1.1fr 2fr;
+  align-items: center;
+  @media (max-width: $layout-breakpoints-medium) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.padded {
+  padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
+  @media (max-width: $layout-breakpoints-medium) {
+    padding: $spacing-md;
+  }
+}
+
+.iconContainer {
+  position: relative;
+}

package/dist/iife/Content.module-6CTLBAHR.scss

@@ -0,0 +1,25 @@
+@import "~@kaizen/design-tokens/sass/layout";
+@import "../variables";
+
+.container {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  * {
+    &,
+    &:after,
+    &:before {
+      box-sizing: border-box;
+    }
+  }
+}
+
+.content {
+  max-width: $layout-content-max-width;
+  margin: 0 $layout-content-side-margin;
+  width: 100%;
+
+  @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
+    margin: 0 $content-margin-width-on-medium-and-small;
+  }
+}

package/dist/iife/ContextModal.module-TTFVPUPU.scss

@@ -0,0 +1,77 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/layout";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.modal {
+  composes: genericModal from "../Primitives/GenericModal.module.scss";
+  min-width: 300px;
+  max-width: 840px;
+
+  @media (min-width: $layout-breakpoints-medium) {
+    width: 90%;
+  }
+}
+
+.header {
+  color: $color-purple-800;
+  text-align: left;
+  &.padded {
+    padding: $spacing-md;
+    @media (min-width: $layout-breakpoints-medium) {
+      padding: $spacing-md $spacing-lg;
+    }
+  }
+}
+
+.footer {
+  white-space: initial;
+  @media (min-width: $layout-breakpoints-medium) {
+    white-space: nowrap;
+  }
+}
+
+.footerWithSecondaryAction {
+  composes: footer;
+  margin-left: calc(-1 * #{$spacing-sm});
+}
+
+.emptyFooter {
+  height: $spacing-sm;
+}
+
+.portraitContentlayout {
+  padding: $spacing-md;
+  display: block;
+  box-sizing: content-box;
+  @media (min-width: $layout-breakpoints-medium) {
+    display: grid;
+    max-width: 800px;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    column-gap: $spacing-xl;
+    padding: $spacing-md $spacing-lg;
+  }
+}
+
+.landscapeContentlayout {
+  display: flex;
+  padding: $spacing-md;
+  flex-direction: column;
+  @media (min-width: $layout-breakpoints-medium) {
+    padding: $spacing-md $spacing-lg;
+  }
+
+  .image {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .content {
+    padding-left: 0rem;
+    @media (min-width: $layout-breakpoints-medium) {
+      max-width: 100%;
+    }
+  }
+}

package/dist/iife/DateInput.module-YBXARKD2.scss

@@ -0,0 +1,3 @@
+.dateInput {
+  width: 100%;
+}

package/dist/iife/DateInputDescription.module-SGAJNB7K.scss

@@ -0,0 +1,19 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.dateInputDescription {
+  display: inline;
+}
+
+.dateInputFormatContainer {
+  margin-inline-start: $spacing-xs;
+  white-space: nowrap;
+}
+
+.descriptionInputFormat {
+  display: inline-flex;
+  white-space: nowrap;
+}
+
+.labelSeparator {
+  margin-inline-end: $spacing-xs;
+}

package/dist/iife/DateInputField.module-2LG4I24X.scss

@@ -0,0 +1,5 @@
+$input-disabled-opacity: 0.3;
+
+.disabled {
+  opacity: $input-disabled-opacity;
+}

package/dist/iife/DateInputWithIconButton.module-RSUEQ345.scss

@@ -0,0 +1,53 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/component-library/styles/animation";
+@import "../../mixins";
+
+$input-disabled-opacity: 0.3;
+
+.iconButton {
+  @include button-reset;
+
+  display: inherit;
+  padding: 0.25rem $spacing-xs;
+  border: $border-solid-border-width $border-solid-border-style transparent;
+  border-radius: $border-solid-border-radius;
+  position: relative;
+  right: -0.35rem;
+  top: -40%;
+
+  [dir="rtl"] & {
+    right: 0.25rem;
+  }
+
+  &:hover:not([disabled]) {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
+  }
+
+  :focus {
+    outline: none;
+  }
+
+  &:focus-visible,
+  :global(.js-focus-visible) &:global(.focus-visible) {
+    outline-offset: -2px;
+    outline: $color-blue-500 $border-focus-ring-border-style
+      $border-focus-ring-border-width;
+  }
+
+  svg {
+    position: relative;
+    top: 2px;
+  }
+}
+
+.calendarActive {
+  color: $color-blue-500;
+  background-color: $color-blue-100;
+}
+
+.disabled {
+  opacity: $input-disabled-opacity;
+}