@kaizen/components 1.4.22-canary.5 → 1.4.23

package/dist/iife/TabPanel.module-2YHJE4CY.scss

@@ -0,0 +1,14 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+
+.tabPanel {
+  border: 2px solid transparent;
+
+  &:focus {
+    outline: none;
+  }
+  &:global(.focus-visible) {
+    border-color: $color-blue-500;
+    border-radius: $border-focus-ring-border-radius;
+  }
+}

package/dist/iife/Table.module-LCDRXCBP.scss

@@ -0,0 +1,233 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/animation";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "./mixins";
+
+// Taken from design-tokens/sass/shadow
+// we need control of the x and y offset in this component
+$box-shadow-color-sm: rgba(53, 55, 74, 0.09);
+$row-height: 60px;
+$row-height-data-variant: 48px;
+
+.anchorReset {
+  text-decoration: none;
+  color: $color-purple-800;
+  display: block;
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
+  }
+
+  &.headerRowCellButtonReversed {
+    color: $color-white;
+  }
+}
+
+.container {
+  width: 100%;
+  margin-bottom: $spacing-sm;
+}
+
+.headerRowCell {
+  display: flex;
+  align-items: stretch;
+  text-align: start;
+  justify-content: flex-start;
+  // The 8px usually makes the height of the header cell 40px
+  padding: 8px $spacing-md;
+  // This is required as so the tooltip will display directly above the header cell
+  position: relative;
+}
+
+.headerRowCellNoWrap {
+  .headerRowCellLabel {
+    // It appears that this ellipsis is not showing 🤔
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+.headerRowCellAlignCenter {
+  .headerRowCellLabelAndIcons {
+    text-align: center;
+    justify-content: center;
+  }
+}
+
+.headerRowCellAlignEnd {
+  .headerRowCellLabelAndIcons {
+    text-align: end;
+    justify-content: flex-end;
+  }
+}
+
+.headerRowCellCheckbox {
+  margin-right: 10px;
+}
+
+// The .headerRowCell wrapper is required to increase the specificity, as so
+// we can override the `Tooltip` component's styling.
+.headerRowCell .headerRowCellTooltip {
+  flex: 1 1 100%;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+}
+
+.headerRowCellButton {
+  @include button-reset;
+  composes: anchorReset;
+}
+
+.headerRowCellButton,
+.headerRowCellNoButton {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  // Ensures that the 100% doesn't go outside of the `headerRowCell` width
+  box-sizing: border-box;
+}
+
+.headerRowCellLabelAndIcons {
+  display: flex;
+  align-items: center;
+  flex: 1 1 100%;
+  width: 100%;
+}
+
+.headerRowCellTooltipIcon {
+  color: $color-blue-500;
+  margin-right: $spacing-xs;
+}
+
+.headerRowCellIcon {
+  color: rgba($color-purple-800-rgb, 0.7);
+  height: 20px;
+
+  .headerRowCellActive & {
+    color: $color-purple-800;
+  }
+}
+
+.card {
+  @include button-reset;
+  background: $color-white;
+  border: solid 1px rgba($color-purple-700-rgb, 0.1);
+  transition: box-shadow $animation-duration-rapid,
+    border-color $animation-duration-rapid, margin $animation-duration-rapid,
+    padding $animation-duration-rapid, width $animation-duration-rapid;
+
+  // This is an optical hack to stop the card shadow from overlapping over
+  // the proceeding cards
+  box-shadow: 0px 4px 6px rgba(53, 55, 74, 0.04);
+
+  // These css properties are required for when the rows are anchor elements
+  composes: anchorReset;
+
+  &:not(:first-child) {
+    margin-top: -1px;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: $border-solid-border-radius;
+    border-bottom-right-radius: $border-solid-border-radius;
+  }
+
+  &:hover {
+    will-change: box-shadow, border-color, margin, padding, width;
+  }
+
+  &.well {
+    margin-top: $spacing-sm;
+  }
+}
+
+// target the first child card when there is a heading present
+[role="rowgroup"] + .card {
+  border-top-left-radius: $border-solid-border-radius;
+  border-top-right-radius: $border-solid-border-radius;
+  box-shadow: $shadow-small-box-shadow;
+}
+
+.card:first-child {
+  border-top-left-radius: $border-solid-border-radius;
+  border-top-right-radius: $border-solid-border-radius;
+  box-shadow: $shadow-small-box-shadow;
+}
+
+.row {
+  display: flex;
+}
+
+.well {
+  border-color: $border-borderless-border-color;
+  box-shadow: none;
+  border-radius: $border-solid-border-radius;
+  background-color: $color-gray-300;
+  margin-bottom: $spacing-sm;
+}
+
+.popout {
+  box-shadow: $shadow-large-box-shadow;
+}
+
+.expanded {
+  position: relative;
+  z-index: 1;
+  margin-left: calc(#{$spacing-sm} * -1);
+  margin-right: calc(#{$spacing-sm} * -1);
+  padding-left: $spacing-sm;
+  padding-right: $spacing-sm;
+}
+
+.hasHoverState {
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+
+  &.expanded {
+    width: calc(100% + #{$spacing-md});
+  }
+
+  &:focus,
+  &:hover {
+    background-color: $color-gray-100;
+  }
+}
+
+.rowCell {
+  min-height: $row-height;
+  padding: 0 $spacing-md;
+  display: flex;
+  align-items: center;
+  // These css properties are required for when the cells are anchor elements
+  composes: anchorReset;
+
+  .defaultSpacing & {
+    padding: $spacing-sm $spacing-md;
+  }
+
+  .dataVariant & {
+    min-height: $row-height-data-variant;
+  }
+}
+
+.rowCellAlignCenter {
+  justify-content: center;
+  text-align: center;
+}
+
+.rowCellAlignEnd {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.headerRowCellIconAlignCenter,
+.headerRowCellIconAlignEnd {
+  //makes sure the label doesn't move on hover when not left aligned
+  margin-right: -20px;
+}

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