@kaizen/components 1.4.22-canary.0 → 1.4.22

package/dist/iife/Tabs.module-BUPNPYW4.scss

@@ -0,0 +1,172 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/component-library/styles/border";
+@import "~@kaizen/deprecated-component-library-helpers/styles/color";
+@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
+@import "~@kaizen/deprecated-component-library-helpers/styles/type";
+
+.container {
+  display: flex;
+}
+
+.tab {
+  @include ca-inherit-baseline;
+  font-family: $typography-heading-4-font-family;
+  font-size: $typography-heading-4-font-size;
+  line-height: $typography-heading-4-line-height;
+  letter-spacing: $typography-heading-4-letter-spacing;
+  text-decoration: none;
+  color: $color-purple-800;
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.1s;
+
+  &:hover {
+    color: $color-blue-500;
+    text-decoration: none;
+    background-color: $color-blue-100;
+    font-weight: $typography-heading-4-font-weight;
+  }
+
+  // Use JS polyfill to simulate :focus-visible, not yet supported by bhorizontalsers
+  // https://github.com/WICG/focus-visible#backwards-compatibility
+  :global(.js-focus-visible) & {
+    // hide native focus ring when :focus but not :focus-visible
+    &:focus {
+      outline: none;
+    }
+
+    &:global(.focus-visible) {
+      color: $color-blue-500;
+      text-decoration: none;
+      background-color: $color-blue-100;
+      font-weight: $typography-heading-4-font-weight;
+
+      &:after {
+        content: "";
+        position: absolute;
+        background: transparent;
+        $focus-ring-offset: calc(#{$border-focus-ring-border-width} - 1px);
+        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});
+      }
+    }
+  }
+}
+
+.horizontalTab {
+  composes: tab;
+  font-weight: $typography-heading-4-font-weight;
+  border-top-left-radius: $border-borderless-border-radius;
+  border-top-right-radius: $border-borderless-border-radius;
+  padding: 0 $ca-grid * 0.75;
+  height: 3 * $ca-grid;
+
+  top: 0; // this overrides baseline shift. @include ca-inherit-baseline does not work because
+  // we need to make this position: relative, for the absolutely positioned underline.
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 4.5rem - ($ca-grid * 0.75) * 2; // give tabs with short text some breathing room
+
+  :global(.js-focus-visible) &:global(.focus-visible):after {
+    border-radius: $border-borderless-border-radius
+      $border-borderless-border-radius 0 0;
+  }
+}
+
+.horizontalTabActive {
+  composes: tab;
+  composes: horizontalTab;
+  font-weight: $typography-heading-4-font-weight;
+  color: $color-blue-500;
+
+  &::before {
+    $underline-height: 5px;
+    content: "";
+    display: block;
+    border-top-left-radius: $underline-height;
+    border-top-right-radius: $underline-height;
+    background-color: currentColor;
+    height: $underline-height;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.horizontalTabDisabled {
+  composes: tab;
+  composes: horizontalTab;
+  cursor: inherit;
+  opacity: 0.3;
+  font-weight: normal;
+
+  &.horizontalTabActive:hover {
+    background-color: transparent;
+  }
+
+  &:hover:not(.horizontalTabActive) {
+    color: $color-purple-800;
+    background-color: transparent;
+  }
+}
+
+.horizontalTab + .horizontalTab {
+  @include ca-margin($start: $ca-grid * 0.5);
+}
+
+.verticalTab {
+  composes: tab;
+  min-height: $spacing-xl;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border-radius: $border-solid-border-radius;
+  font-weight: $typography-heading-4-font-weight;
+
+  [dir="rtl"] & {
+    padding-right: $spacing-sm;
+  }
+
+  [dir="ltr"] & {
+    padding-left: $spacing-sm;
+  }
+
+  :global(.js-focus-visible) &:global(.focus-visible):after {
+    border-radius: $border-borderless-border-radius;
+    z-index: 1; // pop the border out so sibling tabs don't overlap
+  }
+}
+
+.verticalTabActive {
+  composes: tab;
+  composes: verticalTab;
+  color: $color-blue-500;
+}
+
+.verticalTabDisabled {
+  composes: tab;
+  composes: verticalTab;
+  cursor: inherit;
+  opacity: 0.3;
+
+  &.verticalTabActive:hover {
+    background-color: transparent;
+  }
+
+  &:hover:not(.verticalTabActive) {
+    color: $color-purple-800;
+    background-color: transparent;
+  }
+}

package/dist/iife/Tag.module-T6PQJLSW.scss

@@ -0,0 +1,268 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+$medium: calc(#{$spacing-md} * 1.25);
+$small: $spacing-md;
+
+// reset user agent styles for button element type
+@mixin button-reset {
+  appearance: none;
+  background: transparent;
+  border: none;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  transition: none;
+}
+
+.root {
+  margin-inline-end: calc(#{$spacing-md} * 0.5);
+  font-size: $typography-paragraph-small-font-size;
+  font-weight: $typography-paragraph-small-font-weight;
+  letter-spacing: $typography-paragraph-small-letter-spacing;
+  color: $color-purple-800;
+  display: inline-block;
+  border: $border-borderless-border-width $border-borderless-border-style
+    $border-borderless-border-color;
+  border-radius: calc(#{$spacing-md} * 0.75);
+  padding: 0 calc(#{$spacing-md} * 0.4);
+  box-sizing: border-box;
+
+  &.profile {
+    padding-left: calc(#{$spacing-md} * 0.2);
+  }
+}
+
+.layoutContainer {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.validationIcon {
+  align-items: center;
+  display: flex;
+  margin-inline-start: calc(#{$spacing-md} * -0.15);
+  margin-inline-end: $spacing-xs;
+}
+
+.profile {
+  margin-inline-start: calc(#{$spacing-md} * -0.15);
+  margin-inline-end: $spacing-xs;
+  display: flex;
+  align-items: center;
+}
+
+.textContent {
+  margin-top: -1px;
+  font-family: $typography-paragraph-small-font-family;
+  font-weight: $typography-paragraph-small-font-weight;
+  font-size: $typography-paragraph-small-font-size;
+  line-height: $typography-paragraph-small-line-height;
+  letter-spacing: $typography-paragraph-small-letter-spacing;
+  white-space: nowrap;
+}
+
+.dismissButton {
+  @include button-reset;
+  position: relative;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding: 0 $spacing-xs;
+  margin-inline-end: -0.6625rem;
+  margin-inline-start: -0.225rem;
+  color: rgba($color-purple-800-rgb, 0.7);
+  cursor: pointer;
+
+  &:hover {
+    color: $color-purple-800;
+  }
+
+  &:active {
+    color: $color-purple-800;
+  }
+
+  svg {
+    position: relative;
+  }
+
+  :global(.js-focus-visible) & {
+    outline: none;
+
+    // show custom focus ring when :focus-visible
+    &:global(.focus-visible) .iconWrapper {
+      color: $color-purple-800;
+
+      &::after {
+        $focus-ring-offset: calc((#{$border-focus-ring-border-width}));
+        content: "";
+        position: absolute;
+        background: transparent;
+        border-radius: 50%;
+        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});
+      }
+    }
+  }
+}
+
+.background {
+  // As our icons are only one-tone, this span places
+  // a white background under the dismissible icon to
+  // give the illusion of a background colour that is
+  // different to the rest of the tag
+  position: absolute;
+  display: inline-block;
+  width: calc(#{$spacing-xs} + 0.125rem); // optical adjustment
+  height: calc(#{$spacing-xs} + 0.125rem); // optical adjustment
+  background-color: white;
+  left: 10px;
+  top: 10px;
+}
+
+.iconWrapper {
+  position: relative;
+  height: 16px;
+  width: 16px;
+}
+
+.truncate {
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
+.inline {
+  margin: 0;
+}
+
+.medium {
+  height: $medium;
+}
+
+.small {
+  height: $small;
+}
+
+.default {
+  background-color: $color-gray-300;
+}
+
+.sentimentPositive {
+  background-color: $color-green-100;
+}
+
+.sentimentNeutral {
+  background-color: $color-gray-300;
+}
+
+.sentimentNegative {
+  background-color: $color-red-100;
+}
+
+.sentimentNone {
+  background-color: $color-white;
+  border-color: $color-gray-300;
+}
+
+.validationPositive {
+  background-color: $color-green-100;
+
+  .validationIcon {
+    color: $color-green-500;
+  }
+}
+
+.validationInformative {
+  background-color: $color-blue-100;
+
+  .validationIcon {
+    color: $color-blue-500;
+  }
+}
+
+.validationNegative {
+  background-color: $color-red-100;
+
+  .validationIcon {
+    color: $color-red-500;
+  }
+}
+
+.validationCautionary {
+  background-color: $color-yellow-100;
+
+  .validationIcon {
+    color: $color-yellow-500;
+  }
+}
+
+.statusLive {
+  background-color: $color-green-100;
+  color: $color-purple-800;
+}
+
+.statusAction {
+  background-color: $color-orange-100;
+  color: $color-purple-800;
+}
+
+.statusClosed {
+  background-color: $color-red-100;
+}
+
+.statusDraft {
+  background-color: $color-blue-100;
+  color: $color-purple-800;
+}
+
+$pulse-size-initial: 2px;
+$pulse-scale-factor: 9;
+$pulse-size-after: $pulse-size-initial * $pulse-scale-factor;
+$pulse-ring-position: calc(
+  -1 * (#{$pulse-size-after} / 2) + (#{$pulse-size-initial} / 2)
+);
+
+.pulse {
+  margin-inline-start: calc(#{$spacing-md} * 0.35);
+  margin-inline-end: calc(#{$spacing-md} * 0.15);
+  width: $pulse-size-initial;
+  height: $pulse-size-initial;
+  border-radius: 50%;
+  background-color: $color-blue-500;
+  display: inline-block;
+  position: relative;
+  opacity: 0.5;
+}
+
+.pulseRing {
+  position: absolute;
+  width: $pulse-size-after;
+  height: $pulse-size-after;
+  // this positioning has to be calculated as an exact value as scaling will mess with percentage values
+  left: $pulse-ring-position;
+  top: $pulse-ring-position;
+  border-radius: 50%;
+  background-color: $color-green-500;
+  animation: pulsate infinite 2.5s ease-out;
+}
+
+@keyframes pulsate {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  50%,
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

package/dist/iife/Text.module-SXGFOHGJ-SXGFOHGJ.scss

@@ -0,0 +1,173 @@
+@import "~@kaizen/deprecated-component-library-helpers/styles/type";
+
+.page-title,
+h1.default-style {
+  @include ca-type-inter-page-title;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.title,
+h2.default-style {
+  @include ca-type-inter-title;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.display,
+h3.default-style {
+  @include ca-type-inter-display;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.heading,
+h4.default-style,
+h5.default-style,
+h6.default-style {
+  @include ca-type-inter-heading;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.lede {
+  @include ca-type-inter-lede;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.paragraph,
+p.default-style {
+  @include ca-type-inter-body;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.body,
+.default-style {
+  @include ca-type-inter-body;
+  margin: 0;
+}
+
+.body-bold {
+  @include ca-type-inter-body-bold;
+  margin: 0;
+}
+
+.small {
+  @include ca-type-inter-small;
+  margin: 0;
+}
+
+.small-bold {
+  @include ca-type-inter-small-bold;
+  margin: 0;
+}
+
+.notification {
+  @include ca-type-inter-notification;
+  margin: 0;
+}
+
+.label {
+  @include ca-type-inter-label;
+  margin: 0;
+}
+
+.control-action {
+  @include ca-type-inter-control-action;
+  margin: 0;
+}
+
+.button {
+  @include ca-type-inter-button;
+  margin: 0;
+}
+
+// We double the class selector to increase specificity above rules like `h1.default-style`
+.inheritBaseline.inheritBaseline {
+  @include ca-inherit-baseline;
+}
+
+// Required for aligning text alongside other elements e.g. Button
+.inline.inline {
+  display: inline-flex;
+  margin-bottom: 0;
+}
+
+// Alias classes for Elm CSS modules
+.defaultStyle {
+  composes: default-style;
+}
+.pageTitle {
+  composes: page-title;
+}
+.bodyBold {
+  composes: body-bold;
+}
+.smallBold {
+  composes: small-bold;
+}
+.controlAction {
+  composes: control-action;
+}
+
+.zen-display-0 {
+  @include kz-typography-display-0;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-heading-1 {
+  @include kz-typography-heading-1;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-heading-2 {
+  @include kz-typography-heading-2;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-heading-3 {
+  @include kz-typography-heading-3;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-large {
+  @include kz-typography-data-large;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-large-units {
+  @include kz-typography-data-large-units;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-medium {
+  @include kz-typography-data-medium;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-medium-units {
+  @include kz-typography-data-medium-units;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-small {
+  @include kz-typography-data-small;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-small-units {
+  @include kz-typography-data-small-units;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}

package/dist/iife/TileGrid.module-NJQFVYRS.scss

@@ -0,0 +1,23 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/component-library/styles/responsive";
+@import "./variables";
+
+.grid {
+  display: grid;
+  // the more we shave off the width here,
+  // the less the tiles will grow when they lose one from the row
+  grid-template-columns: repeat(auto-fill, minmax($tileWidth - 40px, 1fr));
+  grid-gap: $spacing-md;
+
+  @include ca-media-mobile {
+    grid-template-columns: repeat(2, minmax(226px, $tileHeight));
+
+    > * {
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 480px) {
+    grid-template-columns: repeat(1, 100%);
+  }
+}

package/dist/iife/TimeField.module-B4WNYAUE.scss

@@ -0,0 +1,75 @@
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+$input-height: 48px;
+
+// Classnames to simulate pseudo states in storybook
+$story-className--timefield-hover: ":global(.story__timefield-hover)";
+$story-className--timefield-focus: ":global(.story__timefield-focus)";
+
+.wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-family: $typography-paragraph-body-font-family;
+  font-weight: $typography-paragraph-body-font-weight;
+  font-size: $typography-paragraph-body-font-size;
+  line-height: $typography-paragraph-body-line-height;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  color: $color-purple-800;
+}
+
+.input {
+  display: inline-flex;
+  align-items: center;
+  background-color: $color-white;
+  background-clip: padding-box;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+  border-radius: $border-solid-border-radius;
+  font-size: $typography-paragraph-body-font-size;
+  line-height: $typography-paragraph-body-line-height;
+  padding: 0 $spacing-sm;
+  height: $input-height;
+  width: 100%;
+  box-sizing: border-box;
+
+  &:hover,
+  #{$story-className--timefield-hover} &,
+  &:focus-within,
+  #{$story-className--timefield-focus} & {
+    border-color: $color-gray-600;
+    background-color: $color-gray-200;
+  }
+}
+
+.input:focus-within,
+#{$story-className--timefield-focus} .input {
+  .focusRing {
+    $focus-ring-offset: 3px;
+    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;
+    left: -$focus-ring-offset;
+    right: -$focus-ring-offset;
+    bottom: -$focus-ring-offset;
+    pointer-events: none;
+  }
+}
+
+.isDisabled {
+  pointer-events: none;
+  background-color: transparent;
+  border-color: $color-gray-500;
+  opacity: 0.3;
+}
+
+.error {
+  border: $border-solid-border-width $border-solid-border-style $color-red-500;
+}