@kaizen/components 1.4.20-canary.3469 → 1.4.21

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;
+}

package/dist/iife/GenericTile.module-ZXQ4XWP4.scss

@@ -0,0 +1,136 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
+@import "~@kaizen/component-library/styles/animation";
+@import "~@kaizen/component-library/styles/responsive";
+@import "../variables";
+
+$tilePaddingTop: $spacing-xl;
+
+.root {
+  perspective: 800px;
+}
+
+.tile {
+  width: $tileWidth;
+
+  [data-tile-grid] & {
+    width: auto;
+  }
+
+  height: $tileHeight;
+  position: relative;
+  box-shadow: $shadow-small-box-shadow;
+  background-color: $color-white;
+  transition: transform $ca-duration-slow $ca-default;
+  transform-style: preserve-3d;
+  border-radius: 7px;
+
+  @include ca-media-mobile {
+    width: 100%;
+    min-width: 226px;
+    max-width: $tileHeight;
+  }
+
+  @media (max-width: 480px) {
+    max-width: 100%;
+  }
+}
+
+.face {
+  position: absolute;
+  background-color: $color-white;
+  border-radius: 7px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+
+  * {
+    backface-visibility: hidden;
+  }
+}
+
+.faceFront {
+  justify-content: space-between;
+  padding: $tilePaddingTop $spacing-md $spacing-md;
+}
+
+.faceBack {
+  padding-top: $tilePaddingTop;
+  transform: rotateY(180deg);
+  background-color: $color-blue-100;
+}
+
+.faceMoodPositive {
+  background-color: $color-green-100;
+}
+
+.faceMoodInformative {
+  background-color: $color-blue-100;
+}
+
+.faceMoodCautionary {
+  background-color: $color-yellow-100;
+}
+
+.faceMoodAssertive {
+  background-color: $color-orange-100;
+}
+
+.faceMoodNegative {
+  background-color: $color-red-100;
+}
+
+.faceMoodProminent {
+  background-color: $color-purple-100;
+}
+
+.isFlipped {
+  transform: rotateY(179deg);
+}
+
+.title {
+  text-align: center;
+  padding-bottom: $spacing-sm;
+  backface-visibility: hidden;
+}
+
+.actions {
+  display: flex;
+}
+
+.informationBtn {
+  @include ca-position($top: 0, $end: 0);
+  position: absolute;
+  color: rgba($color-purple-800-rgb, 0.5);
+}
+
+.information {
+  @include ca-padding(
+    $bottom: $spacing-md,
+    $start: $spacing-md,
+    $end: $spacing-md
+  );
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+  border-radius: 0 0 7px 7px;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: $spacing-sm;
+  height: $spacing-xl;
+}