@kaizen/components 1.4.20-canary.2 → 1.4.20

package/dist/iife/EmptyState.module-DOSURL5X.scss

@@ -0,0 +1,156 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "./mixins";
+
+.container {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  padding-top: 2%;
+  padding-bottom: 2%;
+  padding-left: $spacing-md;
+  padding-right: $spacing-md;
+  color: $color-purple-800;
+  border: $border-solid-border-width $border-solid-border-style
+    $border-borderless-border-color-id;
+  border-radius: $border-solid-border-radius;
+
+  @include small {
+    flex-direction: column;
+    align-items: center;
+    padding-top: $spacing-md;
+    padding-bottom: $spacing-md;
+  }
+
+  &.straightCorners {
+    border-radius: 0;
+  }
+
+  // These class names must match the possible values of the component's layoutContext prop
+  &.sidebarAndContent {
+    @include large-sidebar-and-content {
+      padding-top: $spacing-md;
+      padding-bottom: $spacing-md;
+    }
+  }
+
+  &.contentOnly {
+    @include large-content-only {
+      padding-top: $spacing-md;
+      padding-bottom: $spacing-md;
+    }
+  }
+
+  &.positive {
+    background-color: $color-green-100;
+  }
+  &.negative {
+    background-color: $color-red-100;
+  }
+  &.action {
+    background-color: $color-orange-100;
+  }
+  &.neutral {
+    background-color: $color-purple-100;
+  }
+  &.informative {
+    background-color: $color-blue-100;
+  }
+}
+
+.illustrationSide,
+.textSide {
+  display: inline-block;
+}
+
+.illustrationSide {
+  min-width: 224px;
+  flex-grow: 0;
+  flex-shrink: 1;
+  margin-bottom: $spacing-md;
+
+  @include small {
+    width: 224px;
+  }
+
+  @include medium {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    margin-bottom: 0;
+    min-width: 40%;
+    max-width: 50%;
+    flex-grow: 1;
+    box-sizing: border-box;
+    padding-inline-end: $spacing-md;
+  }
+
+  .sidebarAndContent & {
+    @include large-sidebar-and-content {
+      flex-shrink: 1;
+      flex-basis: auto;
+    }
+  }
+
+  .contentOnly & {
+    @include large-content-only {
+      flex-shrink: 1;
+      flex-basis: auto;
+    }
+  }
+}
+
+.illustration,
+.illustrationSide > video {
+  max-width: 100%;
+  max-height: 366px;
+  width: auto;
+
+  // Fixes for IE11 Flexbox issues
+  min-height: 196px;
+
+  @include small {
+    max-height: 196px;
+  }
+}
+
+.textSide {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  align-items: center;
+  -webkit-font-smoothing: antialiased;
+
+  @include medium {
+    flex-basis: 50%;
+    flex-grow: 0;
+  }
+}
+
+.textSideInner {
+  flex-grow: 0;
+  height: auto;
+  margin: 0 $spacing-sm;
+
+  @include small {
+    margin-bottom: 0;
+  }
+
+  @include medium {
+    max-width: 426px;
+  }
+}
+
+.heading {
+  margin-bottom: $spacing-md;
+
+  @media (max-width: (375px)) {
+    @include typography-heading-3-sm;
+  }
+}
+
+.description {
+  margin-bottom: $spacing-md;
+}

package/dist/iife/ExpertAdviceCollapsible.module-L554JCXB.scss

@@ -0,0 +1,47 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.expertAdviceContainer {
+  background-color: $color-purple-100;
+  border: 2px $border-solid-border-style $color-purple-300;
+  box-shadow: none;
+  color: $color-purple-800;
+  > div {
+    &:first-of-type {
+      background-color: $color-purple-100;
+      border-radius: $border-borderless-border-radius;
+      &:hover {
+        background-color: $color-purple-100;
+      }
+    }
+  }
+}
+
+.expertAdviceContainer:hover {
+  border-color: $color-purple-500;
+}
+
+.expertAdviceHeader {
+  background-color: $color-purple-100;
+  flex: 1 1 auto;
+  align-items: center;
+  display: flex;
+}
+
+.expertAdviceHeading {
+  color: $color-purple-600;
+  .expertAdviceContainer:hover & {
+    color: $color-purple-700;
+  }
+}
+
+.expertAdviceIcon {
+  margin-inline-end: $spacing-sm;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.expertAdviceSection {
+  padding: 0 $spacing-md $spacing-md;
+}

package/dist/iife/FilterMenuButton.module-26EL5K3H.scss

@@ -0,0 +1,19 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+@import "@kaizen/deprecated-component-library-helpers/styles/type";
+
+$gap: $spacing-sm;
+$menuContentHorizontalPadding: 4px; // this comes from the MenuContent component, which should be using tokens
+$menuContentVerticalPadding: 6px; // this comes from the MenuContent component, which should be using tokens
+
+.filterMenuButton {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0 calc(#{$gap} / -2);
+
+  > * {
+    margin: 0 calc(#{$gap} / 2);
+  }
+}

package/dist/iife/FilterSplitButton.module-LMMEHFXQ.scss

@@ -0,0 +1,133 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+// The styling and mixin in this file originally comes from @kaizen/draft-button styles.module.scss and I modify it to suit with the `SplitButton` for `FilterMenuButton`.
+
+@mixin button-reset {
+  appearance: none;
+  background: transparent;
+  border: none;
+  font: inherit;
+  margin: 0;
+  transition: none; // override Murmur global styles :(
+}
+
+@mixin button-base {
+  font-family: $typography-button-primary-font-family;
+  line-height: $typography-button-primary-line-height;
+  letter-spacing: $typography-button-primary-letter-spacing;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: $spacing-xl;
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  overflow: visible;
+  color: $color-blue-500;
+  background: $color-blue-100;
+  border-color: $border-borderless-border-color;
+
+  &:hover {
+    background: $color-blue-200;
+  }
+}
+
+.filterSelectButton {
+  display: flex;
+}
+
+.primaryActionButton {
+  @include button-reset;
+  @include button-base;
+
+  padding-right: calc(#{$spacing-md} * 0.75);
+  padding-left: calc(#{$spacing-md} * 0.75);
+  border-top-left-radius: $border-solid-border-radius;
+  border-bottom-left-radius: $border-solid-border-radius;
+
+  &:hover {
+    color: $color-blue-600;
+  }
+}
+
+.primaryActionButton.splitButtonFocus {
+  border: $border-solid-border-width $border-solid-border-style;
+  border-color: $color-blue-400;
+  border-right-width: 0;
+  border-radius: $border-solid-border-radius;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  &:hover {
+    background: $color-blue-100;
+  }
+}
+
+.primaryActionButton.noClearButton.splitButtonFocus {
+  border-right-width: $border-solid-border-width;
+  border-radius: $border-solid-border-radius;
+
+  &:hover {
+    background: $color-blue-100;
+  }
+}
+
+.clearButton {
+  @include button-reset;
+  @include button-base;
+
+  width: 50px;
+  justify-content: center;
+  border-top-right-radius: $border-solid-border-radius;
+  border-bottom-right-radius: $border-solid-border-radius;
+}
+
+.clearButton.splitButtonFocus {
+  border: $border-solid-border-width $border-solid-border-style;
+  border-color: $color-blue-400;
+  border-left-width: 0;
+  border-radius: $border-solid-border-radius;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  &:hover {
+    background: $color-blue-100;
+    color: $color-blue-500;
+  }
+}
+
+.noClearButton {
+  border-top-right-radius: $border-solid-border-radius;
+  border-bottom-right-radius: $border-solid-border-radius;
+
+  &:focus {
+    border: $border-solid-border-width $border-solid-border-style;
+  }
+}
+
+.filterName {
+  font-weight: $typography-button-primary-font-weight;
+  margin-right: calc(#{$spacing-md} / 3);
+}
+
+.metadata {
+  font-size: $typography-button-secondary-font-size;
+  font-weight: $typography-button-secondary-font-weight;
+  letter-spacing: $typography-button-secondary-letter-spacing;
+}
+
+.button {
+  border: $border-solid-border-width $border-solid-border-style;
+  border-radius: $border-solid-border-radius;
+  border-color: transparent;
+}
+
+// This is a temporary solution to mark an active state of the button
+// until it's decided whether this should be part of kaizen button or not
+.buttonActive {
+  border-color: $color-blue-400;
+  background: $color-blue-100;
+}

package/dist/iife/FloatingCalendarWrapper.module-62NLSOUD.scss

@@ -0,0 +1,12 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.calendarWrapper {
+  background-color: $color-white;
+  z-index: 1010;
+  box-shadow: $shadow-large-box-shadow;
+  border-radius: $border-borderless-border-radius;
+  padding: $spacing-md;
+}

package/dist/iife/GenericModal.module-DW6NSOGA.scss

@@ -0,0 +1,110 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/component-library/styles/animation";
+@import "~@kaizen/component-library/styles/border";
+@import "~@kaizen/component-library/styles/layers";
+@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
+@import "~@kaizen/component-library/styles/responsive";
+@import "~@kaizen/deprecated-component-library-helpers/styles/color";
+
+.defaultModalWidth {
+  min-width: 300px;
+  max-width: 600px;
+}
+
+.backdropLayer {
+  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
+  position: fixed;
+  background-color: $black;
+  opacity: 0.5;
+  z-index: $ca-z-index-modal-backdrop;
+}
+
+.scrollLayer {
+  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
+  position: fixed;
+  display: flex;
+  align-items: center;
+  z-index: $ca-z-index-modal;
+  overflow-y: auto;
+}
+
+.modalLayer {
+  // use flexbox auto margins to horizontally and vertically centre the modal
+  // because in IE11, `align-items: center` and `justify-content: center` cause
+  // long modal content to become unreachable if they go off-screen
+  margin: auto;
+
+  padding: $ca-grid 0;
+  width: 100%;
+}
+
+.genericModal {
+  margin: auto;
+  background-color: $color-white;
+  border-radius: $border-solid-border-radius;
+  box-shadow: $shadow-large-box-shadow;
+  position: relative;
+  width: 90%;
+  -webkit-font-smoothing: antialiased;
+  color: $color-purple-800;
+
+  @include ca-media-tablet-and-up {
+    width: 100%;
+  }
+}
+
+.animatingEnter {
+  transition-duration: $ca-duration-fast;
+
+  .backdropLayer {
+    /*
+      There's a weird bug in Chrome/Blink 102.x that animates the opacity
+      all the way to 1 with 200ms ("rapid" token), but is fine with
+      201ms, see Jira [KDS-523]
+    */
+    @include ca-animation-fade($duration: 201ms, $from: 0, $to: 0.5);
+  }
+
+  .genericModal {
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+    animation-duration: $ca-duration-fast;
+    animation-fill-mode: forwards;
+    animation-timing-function: $ca-bounce-in;
+  }
+}
+
+.animatingLeave {
+  transition-duration: $ca-duration-rapid;
+
+  .backdropLayer {
+    @include ca-animation-fade(
+      $duration: $ca-duration-rapid,
+      $from: 0.5,
+      $to: 0
+    );
+  }
+
+  .genericModal {
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
+    animation-duration: $ca-duration-rapid;
+    animation-fill-mode: forwards;
+    animation-timing-function: $ca-bounce-out;
+  }
+}
+
+.unscrollable {
+  /* Tech debt - this !important existed before Stylelint rules */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.pseudoScrollbar {
+  /* Tech debt - this !important existed before Stylelint rules */
+  padding-right: 15px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.hide {
+  opacity: 0;
+  pointer-events: none;
+}

package/dist/iife/GenericModalSection.module-MJ4MTMSP.scss

@@ -0,0 +1,7 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+
+.inputEdit {
+  background-color: $color-gray-200;
+  border-radius: $border-solid-border-radius;
+}

package/dist/iife/GenericNotification.module-DAERSOHE.scss

@@ -0,0 +1,115 @@
+@import "../styles";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+
+.notification {
+  @extend %ca-notification;
+}
+
+// Structure
+
+.icon {
+  @extend %ca-notification__icon;
+}
+
+.textContainer {
+  @extend %ca-notification__text-container;
+}
+
+.title {
+  @extend %ca-notification__title;
+}
+
+.text {
+  @extend %ca-notification__text;
+}
+
+.cancel {
+  @extend %ca-notification__cancel;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:focus {
+    outline: none;
+  }
+  &:global(.focus-visible)::after {
+    content: "";
+    $focus-ring-offset: 6px;
+    pointer-events: none;
+    position: absolute;
+    background: transparent;
+    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: $focus-ring-offset;
+    bottom: $focus-ring-offset;
+    left: $focus-ring-offset;
+    right: $focus-ring-offset;
+  }
+}
+
+.cancelLabel {
+  @extend %ca-notification__cancel__label;
+}
+.notificationTitle {
+  top: 0.42em;
+  position: relative;
+  padding-right: 6px;
+  line-height: $typography-heading-6-line-height;
+}
+
+@container (max-width: 25rem) {
+  .notificationTitle {
+    width: 100%;
+  }
+}
+// Animation
+
+.hidden {
+  @extend %ca-notification---hidden;
+}
+
+// Variant
+
+.inline {
+  @extend %ca-notification---inline;
+}
+
+.toast {
+  @extend %ca-notification---toast;
+}
+
+.global {
+  @extend %ca-notification---global;
+}
+
+// Type
+
+.positive {
+  @extend %ca-notification---positive;
+}
+
+.informative {
+  @extend %ca-notification---informative;
+}
+
+.cautionary {
+  @extend %ca-notification---cautionary;
+}
+
+.negative {
+  @extend %ca-notification---negative;
+}
+
+// Modifiers
+
+.noBottomMargin {
+  @extend %ca-notification---noBottomMargin;
+}
+
+.forceMultiline {
+  @extend %ca-notification---forceMultiline;
+}