@kaizen/components 1.4.14 → 1.4.16

package/dist/iife/GuidanceBlock.module-FAHJFZMK.scss

@@ -0,0 +1,324 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/layout";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/animation";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/component-library/styles/responsive";
+@import "./mixins";
+
+$bannerPadding: $spacing-lg;
+$ca-banner-fade-out: opacity $animation-duration-slow ease;
+$ca-banner-collapse-height-delayed: margin-top $animation-duration-fast
+  $animation-duration-slow ease;
+$illustration-size: 155px;
+$scene-illustration-size: 300px;
+
+.banner.noMaxWidth {
+  max-width: inherit;
+}
+
+.banner {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  background: $color-white;
+  min-width: 320px;
+  max-width: $layout-breakpoints-large;
+  border: $border-borderless-border-width $border-borderless-border-style
+    $border-borderless-border-color;
+  border-radius: $border-solid-border-radius;
+  padding: $bannerPadding;
+  box-shadow: $shadow-small-box-shadow;
+  position: relative;
+  top: -1px;
+  transition: $ca-banner-fade-out, $ca-banner-collapse-height-delayed;
+  color: $color-purple-800;
+
+  @include ca-media-desktop {
+    min-height: calc(12rem - calc(#{$bannerPadding} * 2));
+    flex-direction: row;
+    gap: $spacing-md;
+    width: auto;
+    align-items: center;
+  }
+
+  @include ca-media-mobile {
+    min-width: unset;
+  }
+}
+
+.illustrationWrapper {
+  display: flex;
+
+  @include ca-media-tablet {
+    text-align: center;
+    justify-content: center;
+    align-self: center;
+    padding: $spacing-sm;
+  }
+
+  @include ca-media-mobile {
+    display: none;
+  }
+}
+
+.illustration {
+  width: $illustration-size;
+  height: $illustration-size;
+
+  // This has been created to handle scene illustrations consistently until the tile component is created
+  .hasSceneIllustration & {
+    display: flex;
+    justify-content: center;
+    max-width: $scene-illustration-size;
+    max-height: $scene-illustration-size;
+    width: $scene-illustration-size;
+    height: auto;
+
+    figure {
+      max-height: 100%;
+      max-width: 100%;
+      aspect-ratio: 4/3;
+    }
+
+    img {
+      height: 100%;
+      object-fit: contain;
+      object-position: center;
+    }
+  }
+}
+
+.descriptionContainer {
+  flex: 1;
+  text-align: center;
+  align-self: center;
+  max-width: 780px;
+
+  @include ca-media-desktop {
+    padding: 0 $spacing-sm;
+    text-align: left;
+  }
+
+  @include ca-media-mobile {
+    margin: $spacing-sm;
+    max-width: 100%;
+  }
+
+  [dir="rtl"] & {
+    @include ca-media-desktop {
+      padding: 0 $spacing-sm;
+      text-align: right;
+    }
+  }
+}
+
+.descriptionAndActions {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+
+  @include ca-media-tablet-and-under {
+    flex-direction: column;
+    width: 100%;
+    align-items: unset;
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: center;
+  flex-direction: row-reverse;
+  gap: $spacing-sm;
+  min-width: max-content;
+
+  @include ca-media-tablet-and-up {
+    text-align: center;
+  }
+
+  @include ca-media-mobile {
+    flex-direction: column;
+    width: 100%;
+    margin-top: $spacing-xs;
+  }
+
+  [dir="rtl"] & svg {
+    transform: rotate(180deg);
+  }
+}
+
+.hidden {
+  opacity: 0;
+  margin-bottom: 0;
+}
+
+.headingWrapper {
+  margin-bottom: $spacing-md;
+}
+
+.cancel {
+  @include button-reset;
+  composes: interactiveIconWrapper from "~@kaizen/component-library/components/Icon/Icon.module.scss";
+  position: absolute;
+  top: $spacing-sm;
+  right: $spacing-sm;
+  color: $color-purple-800;
+}
+
+.positive {
+  background: $color-green-100;
+}
+
+.negative {
+  background: $color-red-100;
+}
+
+.informative {
+  background: $color-blue-100;
+}
+
+.cautionary {
+  background: $color-yellow-100;
+}
+
+.assertive {
+  background: $color-orange-100;
+}
+
+.prominent {
+  background: $color-purple-100;
+}
+
+.inline,
+.stacked {
+  flex-direction: row;
+  align-items: unset;
+  gap: $spacing-md;
+  min-width: unset;
+  flex-wrap: wrap;
+
+  @include ca-media-tablet-and-under {
+    flex-direction: unset;
+  }
+
+  .illustrationWrapper {
+    margin-right: $spacing-sm;
+
+    [dir="rtl"] & {
+      margin-left: $spacing-sm;
+      margin-right: inherit;
+    }
+
+    @include ca-media-tablet {
+      padding: 0;
+    }
+
+    @include ca-media-mobile {
+      display: flex;
+    }
+  }
+
+  .descriptionAndActions {
+    margin: auto 0;
+  }
+
+  .descriptionContainer {
+    text-align: left;
+    max-width: unset;
+    min-width: 320px;
+
+    @include ca-media-desktop {
+      padding: 0;
+    }
+
+    @include ca-media-mobile {
+      margin: 0;
+    }
+
+    [dir="rtl"] & {
+      text-align: right;
+
+      @include ca-media-desktop {
+        padding: 0;
+      }
+    }
+  }
+
+  .buttonContainer {
+    padding-left: $spacing-sm;
+    justify-content: flex-start;
+    width: unset;
+    min-width: unset;
+
+    @include ca-media-mobile {
+      flex-direction: row-reverse;
+    }
+
+    [dir="rtl"] & {
+      padding-left: 0;
+      padding-right: $spacing-sm;
+    }
+
+    > * {
+      width: unset;
+    }
+  }
+
+  &.hasSceneIllustration {
+    justify-content: center;
+  }
+
+  &.centerContent {
+    flex-direction: column;
+
+    &.hasSceneIllustration .illustration {
+      width: 100%;
+    }
+
+    .illustrationWrapper {
+      margin: 0 auto;
+      align-self: center;
+    }
+
+    .descriptionContainer {
+      text-align: center;
+      min-width: unset;
+
+      [dir="rtl"] & {
+        text-align: center;
+      }
+    }
+
+    .buttonContainer {
+      padding: 0;
+      flex-direction: column;
+      min-width: unset;
+      justify-content: center;
+    }
+  }
+
+  &.centerContent.smallScreenTextAlignment {
+    .descriptionContainer {
+      text-align: left;
+
+      [dir="rtl"] & {
+        text-align: right;
+      }
+    }
+  }
+}
+
+.stacked {
+  .descriptionAndActions {
+    flex-direction: column;
+    align-items: unset;
+  }
+
+  .descriptionContainer {
+    align-self: flex-start;
+  }
+}

package/dist/iife/Heading.module-WIR3ANFU.scss

@@ -0,0 +1,104 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "../fonts.scss";
+
+.heading {
+  margin: 0;
+}
+
+.display-0 {
+  font-family: $typography-display-0-font-family;
+  font-weight: $typography-display-0-font-weight;
+  font-size: $typography-display-0-font-size;
+  line-height: $typography-display-0-line-height;
+  letter-spacing: $typography-display-0-letter-spacing;
+}
+
+.heading-1 {
+  font-family: $typography-heading-1-font-family;
+  font-weight: $typography-heading-1-font-weight;
+  font-size: $typography-heading-1-font-size;
+  line-height: $typography-heading-1-line-height;
+  letter-spacing: $typography-heading-1-letter-spacing;
+}
+
+.heading-2 {
+  font-family: $typography-heading-2-font-family;
+  font-weight: $typography-heading-2-font-weight;
+  font-size: $typography-heading-2-font-size;
+  line-height: $typography-heading-2-line-height;
+  letter-spacing: $typography-heading-2-letter-spacing;
+}
+
+.heading-3 {
+  font-family: $typography-heading-3-font-family;
+  font-weight: $typography-heading-3-font-weight;
+  font-size: $typography-heading-3-font-size;
+  line-height: $typography-heading-3-line-height;
+  letter-spacing: $typography-heading-3-letter-spacing;
+}
+
+.heading-4 {
+  font-family: $typography-heading-4-font-family;
+  font-weight: $typography-heading-4-font-weight;
+  font-size: $typography-heading-4-font-size;
+  line-height: $typography-heading-4-line-height;
+  letter-spacing: $typography-heading-4-letter-spacing;
+}
+
+.heading-5 {
+  font-family: $typography-heading-5-font-family;
+  font-weight: $typography-heading-5-font-weight;
+  font-size: $typography-heading-5-font-size;
+  line-height: $typography-heading-5-line-height;
+  letter-spacing: $typography-heading-5-letter-spacing;
+}
+
+.heading-6 {
+  font-family: $typography-heading-6-font-family;
+  font-weight: $typography-heading-6-font-weight;
+  font-size: $typography-heading-6-font-size;
+  line-height: $typography-heading-6-line-height;
+  letter-spacing: $typography-heading-6-letter-spacing;
+  // override Murmur global styles :(
+  text-transform: none;
+}
+
+.dark {
+  color: $color-purple-800;
+  opacity: 1;
+}
+
+.dark-reduced-opacity {
+  color: $color-purple-800;
+  opacity: 0.7;
+}
+
+.white {
+  color: $color-white;
+  opacity: 1;
+}
+
+.white-reduced-opacity {
+  color: $color-white;
+  opacity: 0.8;
+}
+
+.positive {
+  &.small {
+    color: $color-green-600;
+  }
+  &.large {
+    color: $color-green-500;
+  }
+}
+
+.negative {
+  &.small {
+    color: $color-red-600;
+  }
+
+  &.large {
+    color: $color-red-500;
+  }
+}

package/dist/iife/HeroCard.module-LXHTKJTW.scss

@@ -0,0 +1,106 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/typography";
+
+$badge__height: 80px;
+$left-content__width: 221px;
+
+.root {
+  font-family: $typography-paragraph-body-font-family;
+  font-size: $typography-paragraph-body-font-size;
+  font-weight: $typography-paragraph-body-font-weight;
+  line-height: $typography-paragraph-body-line-height;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  display: flex;
+  // this box shadow should change to small once the Zen look is adopted
+  box-shadow: $shadow-large-box-shadow;
+  background-color: transparent;
+  border-radius: $border-solid-border-radius;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.left {
+  display: flex;
+  border-radius: $border-solid-border-radius 0 0 $border-solid-border-radius;
+  color: $color-white;
+  padding: $spacing-sm $spacing-xl;
+  flex-direction: column;
+  flex-shrink: 0;
+  align-items: flex-start;
+  position: relative;
+  width: $left-content__width;
+
+  .fullWidth & {
+    width: 33%;
+    max-width: 450px;
+  }
+
+  &.wisteria700 {
+    background-color: $color-purple-700;
+  }
+
+  &.wisteria200 {
+    background-color: $color-purple-200;
+  }
+
+  &.cluny200 {
+    background-color: $color-blue-200;
+  }
+
+  &.seedling200 {
+    background-color: $color-green-200;
+  }
+}
+
+.withBadge {
+  margin-top: $badge__height + 24px;
+}
+
+.right {
+  border-radius: 0 $border-solid-border-radius $border-solid-border-radius 0;
+  display: flex;
+  flex-direction: column;
+  padding: 51px;
+  background-color: $color-white;
+  color: $color-purple-800;
+  width: 100%;
+}
+
+.rightContent {
+  height: 100%;
+}
+
+.title {
+  font-family: $typography-heading-3-font-family;
+  font-size: $typography-heading-3-font-size;
+  font-weight: $typography-heading-3-font-weight;
+  line-height: $typography-heading-3-line-height;
+  letter-spacing: $typography-heading-3-letter-spacing;
+  margin-bottom: $spacing-md;
+}
+
+.badge {
+  font-family: $typography-heading-3-font-family;
+  font-size: $typography-heading-3-font-size;
+  font-weight: $typography-heading-3-font-weight;
+  line-height: $typography-heading-3-line-height;
+  letter-spacing: $typography-heading-3-letter-spacing;
+  display: flex;
+  font-size: 42px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.1);
+  align-self: flex-start;
+  line-height: 80px;
+  min-width: 80px;
+  min-height: 80px;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: $spacing-md;
+  left: calc(#{$spacing-md} * 1.2);
+}

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