@kaizen/components 1.4.13 → 1.4.15

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.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/TextArea.module-JLTW3M73.scss

@@ -0,0 +1,138 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "../../variables";
+@import "../mixins";
+
+// Vars
+$input-disabled-opacity: 0.3;
+$input-disabled-border-alpha: 50%;
+
+.wrapper {
+  position: relative;
+}
+
+.textarea {
+  @include form-input-reset;
+  border-radius: $border-solid-border-radius;
+  width: 100%;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+  padding: $spacing-sm;
+  color: $color-purple-800-rgb;
+  display: block;
+  resize: vertical;
+
+  @include form-input-placeholder {
+    line-height: 1.5;
+    color: $dt-color-form-text-color-placeholder;
+  }
+
+  &:disabled {
+    resize: none;
+  }
+}
+
+.textarea:focus + .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: transparent;
+  top: -$focus-ring-offset;
+  left: -$focus-ring-offset;
+  right: -$focus-ring-offset;
+  bottom: -$focus-ring-offset;
+  pointer-events: none;
+}
+
+.textarea.default {
+  @include form-input-focus-state {
+    background-color: $color-gray-200;
+    border-color: $color-gray-600;
+  }
+
+  &:focus + .focusRing {
+    border-color: $color-blue-500;
+  }
+
+  &:not(.error):not(.caution) {
+    &:disabled {
+      border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
+    }
+  }
+
+  &.error {
+    border-color: $color-red-500;
+
+    @include form-input-focus-state {
+      border-color: $color-red-500;
+    }
+  }
+
+  &.caution {
+    border-color: $color-yellow-600;
+
+    @include form-input-focus-state {
+      border-color: $color-yellow-600;
+    }
+  }
+
+  &.disabled {
+    background-color: $color-white;
+    border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
+    color: rgba($color-purple-800-rgb, $input-disabled-opacity);
+
+    @include form-input-placeholder {
+      opacity: $input-disabled-opacity;
+    }
+  }
+}
+
+// Reversed (Dark Backgrounds)
+.textarea.reversed {
+  @include form-input-focus-state {
+    background: rgba($color-white-rgb, 0.1);
+    border-color: $color-white;
+  }
+
+  border-color: rgba($color-white-rgb, 0.65);
+  background: transparent;
+  color: $color-white;
+
+  @include form-input-placeholder {
+    line-height: 1.5;
+    color: $color-white;
+  }
+
+  &:focus + .focusRing {
+    border-color: $color-blue-300;
+  }
+
+  &.error {
+    border-color: $color-red-300;
+
+    @include form-input-focus-state {
+      border-color: $color-red-300;
+    }
+  }
+
+  &.caution {
+    border-color: $color-yellow-400;
+
+    @include form-input-focus-state {
+      border-color: $color-yellow-400;
+    }
+  }
+
+  &.disabled {
+    background: transparent;
+    border-color: rgba($color-white-rgb, $input-disabled-opacity);
+    color: rgba($color-white-rgb, $input-disabled-opacity);
+
+    @include form-input-placeholder {
+      opacity: $input-disabled-opacity;
+    }
+  }
+}

package/dist/iife/TextAreaField.module-4K35MSCT.scss

@@ -0,0 +1,20 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+
+$input-disabled-background: $color-gray-300;
+$input-disabled-opacity: 0.3;
+$input-disabled-border-alpha: 50%;
+
+.message {
+  &.disabled {
+    opacity: $input-disabled-opacity;
+  }
+}
+
+.textareaLabel {
+  margin-bottom: $spacing-xs;
+}
+
+.textareaLabelProminent {
+  margin-bottom: 0;
+}

package/dist/iife/TextField.module-KFAPVZZK.scss

@@ -0,0 +1,49 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/component-library/styles/animation";
+@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
+@import "~@kaizen/deprecated-component-library-helpers/styles/type";
+@import "~@kaizen/deprecated-component-library-helpers/styles/color";
+@import "~@kaizen/component-library/styles/utils";
+@import "~@kaizen/component-library/styles/mixins/forms";
+
+@mixin input-icon($color, $reversed) {
+  color: $color;
+
+  .withReversed & {
+    color: $reversed;
+  }
+}
+
+$input-disabled-opacity: 0.3;
+
+///////////////////////////////////////////////////
+// VALIDATION STYLES
+///////////////////////////////////////////////////
+
+.success {
+  @include input-icon($color-green-500, $color-green-400);
+  @include ca-animation-fade(in);
+
+  &.disabled {
+    @include input-icon(
+      rgba($color-green-500-rgb, $input-disabled-opacity),
+      rgba($color-green-400-rgb, $input-disabled-opacity)
+    );
+  }
+}
+
+.error {
+  @include input-icon($color-red-100, $color-purple-700);
+  @include ca-animation-fade(in);
+}
+
+.caution {
+  @include input-icon($color-yellow-200, $color-purple-700);
+  @include ca-animation-fade(in);
+}
+
+.message {
+  &.disabled {
+    opacity: $input-disabled-opacity;
+  }
+}

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