@kaizen/components 1.4.22-canary.5 → 1.4.23

package/dist/iife/Label.module-QP4J7I5H.scss

@@ -0,0 +1,118 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/color";
+@import "../../variables";
+
+$label-start-margin: $spacing-xs;
+
+.label,
+:global(.ideal-sans) .label {
+  // override Murmur global styles :(
+  opacity: inherit;
+  color: $dt-color-form-text-color;
+  visibility: visible;
+  width: 100%;
+  text-align: left; // fallback for IE and Edge
+  text-align: start;
+
+  &[dir="rtl"],
+  [dir="rtl"] & {
+    text-align: right; // fallback for IE and Edge
+    text-align: start;
+  }
+}
+
+.reversed {
+  color: $color-white;
+  a {
+    color: $color-white;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.disabled {
+  opacity: 0.3;
+}
+
+///////////////////////////////////////////////////
+// LABEL TYPES
+///////////////////////////////////////////////////
+
+// This is to override bootstrap styles. Remove when appropriate
+.text,
+:global(.ideal-sans) .text {
+  font-family: $typography-heading-6-font-family;
+  font-size: $typography-heading-6-font-size;
+  line-height: $typography-heading-6-line-height;
+  letter-spacing: $typography-heading-6-letter-spacing;
+  font-weight: $typography-heading-6-font-weight;
+}
+
+%checkboxOrRadio,
+:global(.ideal-sans) %checkboxOrRadio {
+  display: flex;
+  font-family: $typography-paragraph-body-font-family;
+  font-size: $typography-paragraph-body-font-size;
+  line-height: $typography-paragraph-body-line-height;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  font-weight: $typography-paragraph-body-font-weight;
+}
+
+.checkbox {
+  @extend %checkboxOrRadio;
+}
+
+.radio {
+  @extend %checkboxOrRadio;
+}
+
+.toggle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: $typography-paragraph-body-font-family;
+  font-size: $typography-paragraph-body-font-size;
+  line-height: $typography-paragraph-body-line-height;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  font-weight: $typography-paragraph-body-font-weight;
+}
+
+.checkbox,
+.radio,
+.toggle {
+  // apply padding when label is inline with form control
+  .prependedLabel {
+    order: -1; // place label before the control
+    margin-right: $label-start-margin;
+    margin-left: 0;
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      margin-right: 0;
+      margin-left: $label-start-margin;
+    }
+  }
+
+  .appendedLabel {
+    margin-right: 0;
+    margin-left: $label-start-margin;
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      margin-right: $label-start-margin;
+      margin-left: 0;
+    }
+  }
+}
+
+.prominent {
+  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;
+  display: block;
+  margin-bottom: $spacing-xs;
+}

package/dist/iife/Layout.module-MZ6JYT46.scss

@@ -0,0 +1,58 @@
+@import "./styles";
+@import "~@kaizen/component-library/styles/utils";
+
+.root {
+  @extend %root;
+}
+
+.navigationBar {
+  @extend %navigation-bar;
+  box-sizing: border-box;
+  top: 0;
+  z-index: $ca-z-index-fixed;
+}
+
+.page {
+  @extend %page;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.header {
+  @extend %header;
+  box-sizing: border-box;
+}
+
+.body {
+  @extend %body;
+  box-sizing: border-box;
+}
+
+.bodyInner {
+  @extend %body-inner;
+}
+
+.sidebar {
+  @extend %sidebar;
+  box-sizing: border-box;
+}
+
+.content {
+  @extend %content;
+  box-sizing: border-box;
+}
+
+.footer {
+  @extend %footer;
+  box-sizing: border-box;
+}
+
+.toasts {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.announcers {
+  @include sr-only();
+}

package/dist/iife/LikertScaleLegacy.module-JYCJ5CON.scss

@@ -0,0 +1,298 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+@mixin respond-to($media) {
+  @if $media == print {
+    @media only print {
+      @content;
+    }
+  } @else if $media == iphone {
+    @media only screen and (max-width: 767px) {
+      @content;
+    }
+  } @else if $media == ipad {
+    @media only screen and (max-width: 959px) {
+      @content;
+    }
+  }
+}
+
+$block-height: 35px;
+$desktop-rater-width: 220px;
+$desktop-rater-height: 63px;
+
+$first: $color-yellow-300;
+$second: $color-yellow-400;
+$third: $color-orange-400;
+$fourth: $color-orange-500;
+$fifth: $color-red-500;
+
+@mixin pop {
+  -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
+}
+
+@mixin fill($height) {
+  &:first-child .likertItemFill {
+    border-top-left-radius: $height;
+    border-bottom-left-radius: $height;
+
+    [dir="rtl"] & {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-right-radius: $height;
+      border-bottom-right-radius: $height;
+    }
+
+    &:after {
+      border-top-left-radius: $height;
+      border-bottom-left-radius: $height;
+
+      [dir="rtl"] & {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: $height;
+        border-bottom-right-radius: $height;
+      }
+    }
+  }
+
+  &:last-child .likertItemFill {
+    border-top-right-radius: $height;
+    border-bottom-right-radius: $height;
+
+    [dir="rtl"] & {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-top-left-radius: $height;
+      border-bottom-left-radius: $height;
+    }
+
+    &:after {
+      border-top-right-radius: $height;
+      border-bottom-right-radius: $height;
+
+      [dir="rtl"] & {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: $height;
+        border-bottom-left-radius: $height;
+      }
+    }
+  }
+}
+
+@keyframes pop {
+  0% {
+    opacity: 0.5;
+    -webkit-transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(1.78);
+  }
+}
+
+.container {
+  width: $desktop-rater-width;
+  position: relative;
+  box-sizing: border-box;
+
+  @include respond-to(iphone) {
+    width: 258px;
+    position: static;
+  }
+
+  &.rated .likertItem.unselected .likertItemFill {
+    transition: background 0.1s;
+  }
+
+  &.reversed.rated .likertItem.unselected .likertItemFill {
+    background-color: transparent;
+    border-color: rgba($color-white-rgb, 0.65);
+  }
+}
+
+:global(.js-focus-visible) {
+  .likertItem:focus,
+  .likertItemFill:focus {
+    outline: none;
+  }
+
+  .reversed:not(.rated)
+    :global([data-focus-visible-added]).likertItem:focus
+    .likertItemFill {
+    outline-color: $color-blue-300;
+  }
+
+  // React seems to be causing the .focus-visible class to only be added sometimes,
+  // so we need to use [data-focus-visible-added] here instead.
+  // See https://github.com/WICG/focus-visible#2-update-your-css
+
+  :global([data-focus-visible-added]).likertItem .likertItemFill {
+    outline-offset: 1px;
+    outline: $color-blue-500 $border-focus-ring-border-style
+      $border-focus-ring-border-width;
+  }
+
+  .reversed :global([data-focus-visible-added]).likertItem .likertItemFill {
+    outline-color: $color-blue-300;
+  }
+}
+
+.itemContainer {
+  width: 100%;
+  white-space: nowrap;
+  display: inline-block;
+  height: $block-height + 2px;
+  font-size: 0;
+}
+
+.legend {
+  text-align: center;
+  position: absolute;
+  top: calc(-1 * #{$spacing-md});
+  left: 0;
+  right: 0;
+
+  @include respond-to(iphone) {
+    position: initial;
+    top: 0;
+  }
+}
+
+.likertItem {
+  margin-right: 2px;
+  margin-left: 2px;
+
+  &[dir="rtl"],
+  [dir="rtl"] & {
+    margin-right: 2px;
+    margin-left: 2px;
+  }
+
+  @include fill($block-height);
+  font-size: 1px;
+  line-height: 1;
+  padding: 0;
+  overflow-x: visible;
+  display: inline-block;
+  width: 18.5%; // 5 columns
+  position: relative;
+
+  &:first-child {
+    margin-right: 2px;
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-left: 2px;
+    margin-right: 0;
+  }
+
+  &.suggested,
+  &.selected {
+    .field1 {
+      background-color: $first;
+      &:after {
+        background-color: $first;
+      }
+    }
+    .field2 {
+      background-color: $second;
+      &:after {
+        background-color: $second;
+      }
+    }
+    .field3 {
+      background-color: $third;
+      &:after {
+        background-color: $third;
+      }
+    }
+    .field4 {
+      background-color: $fourth;
+      &:after {
+        background-color: $fourth;
+      }
+    }
+    .field5 {
+      background-color: $fifth;
+      &:after {
+        background-color: $fifth;
+      }
+    }
+  }
+}
+
+.likertItemFill {
+  transition: background 0.1s, border-color 0.1s;
+  height: $block-height;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+
+  &:hover {
+    transition: background 0s, border-color 0s;
+  }
+  &:after {
+    content: " ";
+    display: block;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  &.pop:after {
+    @include pop;
+  }
+}
+
+.reversed .likertItemFill {
+  border-color: rgba($color-white-rgb, 0.65);
+}
+
+@media only screen and (max-width: 767px) {
+  $block-height: 48px;
+
+  .container {
+    min-width: 258px;
+  }
+
+  .itemContainer {
+    height: $block-height + 2px;
+  }
+
+  .likertItem {
+    @include fill($block-height);
+  }
+
+  .likertItemFill {
+    height: $block-height;
+  }
+}
+
+@media print {
+  .legend {
+    display: none;
+  }
+
+  .container {
+    top: 1em;
+    right: 2em;
+    width: 150px;
+
+    .likertItem {
+      .likertItemFill {
+        height: 25px;
+        background: white;
+        border: 1px solid #d7d8d8;
+      }
+
+      &:first-child,
+      &:last-child {
+        .likertItemFill {
+          background: white;
+          border-width: 2px;
+        }
+      }
+    }
+  }
+}

package/dist/iife/LinkPopover-7NCAPCQ3.scss

@@ -0,0 +1,22 @@
+@import "~@kaizen/design-tokens/sass/color";
+
+.popoverContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.popoverLink {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.paragraphFlex {
+  display: inline-flex;
+}
+
+.popoverActions {
+  border-left: 1px solid rgba($color-gray-600-rgb, 0.1);
+}

package/dist/iife/ListBox.module-5GNTZUCX.scss

@@ -0,0 +1,18 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.listBox {
+  list-style: none;
+  padding: $spacing-sm;
+  margin: 0 $spacing-sm 0 0;
+  display: grid;
+  max-height: 22rem;
+  overflow-y: auto;
+}
+
+.overflown {
+  padding-right: $spacing-sm;
+}
+
+.hidden {
+  display: none;
+}

package/dist/iife/ListBox.module-RXUZV2C4.scss

@@ -0,0 +1,14 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.listBox {
+  list-style: none;
+  padding: $spacing-sm;
+  margin-top: 0;
+  margin-bottom: 0;
+  display: grid;
+  max-height: 22rem;
+
+  &.focus {
+    outline: none;
+  }
+}

package/dist/iife/ListBoxSection.module-53ABDKRS.scss

@@ -0,0 +1,3 @@
+.listBoxSection {
+  display: grid;
+}

package/dist/iife/ListBoxSection.module-D2PXJRKU.scss

@@ -0,0 +1,20 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.sectionWrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.sectionHeading {
+  padding-left: 4px;
+}
+
+.sectionList {
+  display: flex;
+  flex-direction: column;
+  padding: $spacing-xs 0px 0px 0px;
+}
+
+.sectionWrapper + .sectionWrapper {
+  margin-top: 0.5rem;
+}

package/dist/iife/LoadMoreButton.module-ANUUS5ER.scss

@@ -0,0 +1,5 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.container {
+  padding: $spacing-sm $spacing-sm 0;
+}

package/dist/iife/LoadingGraphic.module-URCRSF4P.scss

@@ -0,0 +1,10 @@
+@import "~@kaizen/design-tokens/sass/color";
+
+.graphic {
+  background-color: rgba($color-gray-600-rgb, 0.1);
+  border-radius: 50%;
+
+  &.reversed {
+    background-color: rgba($color-white-rgb, 0.1);
+  }
+}

package/dist/iife/LoadingHeading.module-OV5P5QHZ.scss

@@ -0,0 +1,67 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.heading {
+  background-color: rgba($color-gray-500-rgb, 0.2);
+
+  &.display-0 {
+    height: $typography-display-0-font-size;
+    margin-bottom: calc(
+      #{$typography-display-0-line-height} - #{$typography-display-0-font-size}
+    );
+  }
+
+  &.heading-1 {
+    height: $typography-heading-1-font-size;
+    margin-bottom: calc(
+      #{$typography-heading-1-line-height} - #{$typography-heading-1-font-size}
+    );
+  }
+
+  &.heading-2 {
+    height: $typography-heading-2-font-size;
+    margin-bottom: calc(
+      #{$typography-heading-2-line-height} - #{$typography-heading-2-font-size}
+    );
+  }
+
+  &.heading-3 {
+    height: $typography-heading-3-font-size;
+    margin-bottom: calc(
+      #{$typography-heading-3-line-height} - #{$typography-heading-3-font-size}
+    );
+  }
+
+  &.heading-4 {
+    height: $typography-heading-4-font-size;
+    margin-bottom: calc(
+      #{$typography-heading-4-line-height} - #{$typography-heading-4-font-size}
+    );
+  }
+
+  &.heading-5 {
+    height: $typography-heading-5-font-size;
+    margin-bottom: calc(
+      #{$typography-heading-5-line-height} - #{$typography-heading-5-font-size}
+    );
+  }
+
+  &.heading-6 {
+    height: $typography-heading-6-font-size;
+    margin-bottom: calc(
+      #{$typography-heading-6-line-height} - #{$typography-heading-6-font-size}
+    );
+  }
+
+  &.reversed:not(.link) {
+    background-color: rgba($color-white-rgb, 0.2);
+  }
+
+  &.link {
+    background-color: rgba($color-blue-500-rgb, 0.2);
+  }
+
+  &.link.reversed {
+    background-color: rgba($color-white-rgb, 0.65);
+  }
+}

package/dist/iife/LoadingInput.module-7NL2PX46.scss

@@ -0,0 +1,9 @@
+@import "~@kaizen/design-tokens/sass/color";
+
+.input {
+  background-color: rgba($color-gray-600-rgb, 0.1);
+
+  &.reversed {
+    background-color: rgba($color-white-rgb, 0.1);
+  }
+}

package/dist/iife/LoadingParagraph.module-43NZVIEE.scss

@@ -0,0 +1,50 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.paragraph {
+  background-color: $color-gray-300;
+  height: calc(#{$spacing-md} * 0.625);
+  margin-bottom: calc(#{$spacing-md} * 0.5);
+
+  &.reversed:not(.link) {
+    background-color: rgba($color-white-rgb, 0.1);
+  }
+
+  &.link {
+    background-color: rgba($color-blue-500-rgb, 0.2);
+  }
+
+  &.link.reversed {
+    background-color: rgba($color-white-rgb, 0.65);
+  }
+}
+
+.centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.inline {
+  display: inline-block;
+  margin-bottom: calc(#{$spacing-md} * 0.35);
+}
+
+.inline + .inline {
+  margin-right: 0;
+  margin-left: $spacing-md;
+
+  &[dir="rtl"],
+  [dir="rtl"] & {
+    margin-right: $spacing-md;
+    margin-left: 0;
+  }
+}
+
+.noBottomMargin {
+  margin-bottom: 0;
+}
+
+// We double the class selector to increase specificity above rules like `h1.default-style`
+.inheritBaseline.inheritBaseline {
+  position: static;
+}