@kaizen/components 1.4.13 → 1.4.15

package/dist/iife/Tab.module-4S535DQG.scss

@@ -0,0 +1,105 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  border-top: 2px solid transparent;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  border-top-left-radius: $border-borderless-border-radius;
+  border-top-right-radius: $border-borderless-border-radius;
+  background: $color-white;
+  white-space: nowrap;
+  text-decoration: none;
+  padding: $spacing-md $spacing-md;
+  margin: 0;
+  font-family: $typography-heading-4-font-family;
+  font-size: $typography-heading-4-font-size;
+  font-weight: $typography-heading-4-font-weight;
+  line-height: $typography-heading-4-line-height;
+  letter-spacing: $typography-heading-4-letter-spacing;
+  color: $color-purple-800;
+
+  &:not(:first-child) {
+    margin-inline-start: $spacing-xs;
+  }
+
+  &:not(:disabled):hover {
+    background: $color-blue-100;
+    color: $color-blue-500;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:global(.focus-visible) {
+    background: $color-blue-100;
+    color: $color-blue-500;
+    border-color: $color-blue-500;
+  }
+}
+
+.tab[data-selected] {
+  position: relative;
+  color: $color-blue-500;
+
+  &::before {
+    content: "";
+    display: block;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    background-color: currentColor;
+    height: 5px;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.tab:disabled {
+  opacity: 0.3;
+}
+
+.badge {
+  margin-inline-start: $spacing-sm;
+  display: inline-flex;
+  align-items: center;
+}
+
+@media (forced-colors: active) {
+  .tab {
+    border: 2px solid transparent;
+
+    &:global(.focus-visible)::after {
+      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+      content: "";
+      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: calc(-1 * #{$focus-ring-offset});
+      left: calc(-1 * #{$focus-ring-offset});
+      right: calc(-1 * #{$focus-ring-offset});
+      bottom: calc(-1 * #{$focus-ring-offset});
+    }
+  }
+
+  .tab.selected::before {
+    // High contrast also doesn't see the pseudo element created to show the active tab.
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: 2px solid transparent;
+  }
+}

package/dist/iife/TabList.module-FVWF5RCV.scss

@@ -0,0 +1,11 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+
+.tabList {
+  border-bottom: 1px solid rgba($color-gray-600-rgb, 0.1);
+  padding: $spacing-xs $spacing-md 0;
+}
+
+.tabList.noPadding {
+  padding: 0;
+}

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