@kaizen/components 1.4.22-canary.0 → 1.4.22-canary.3

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.22](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.21...@kaizen/components@1.4.22) (2023-03-02)
+
+**Note:** Version bump only for package @kaizen/components
+
+
+
+
+
 ## [1.4.21](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.20...@kaizen/components@1.4.21) (2023-03-02)
 
 **Note:** Version bump only for package @kaizen/components

package/dist/__future__/index.d.ts

@@ -1,3 +1 @@
 export { E as ExampleComponent } from '../ExampleComponent-9afabffa.js';
-export * from '@kaizen/select';
-export * from '@kaizen/tabs';

package/dist/__future__/index.js

@@ -1,10 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _createStarExport(obj) { Object.keys(obj) .filter((key) => key !== "default" && key !== "__esModule") .forEach((key) => { if (exports.hasOwnProperty(key)) { return; } Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]}); }); }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 var _chunkGOA67MI6js = require('../chunk-GOA67MI6.js');
 
-// src/__future__/index.ts
-var _select = require('@kaizen/select'); _createStarExport(_select);
-var _tabs = require('@kaizen/tabs'); _createStarExport(_tabs);
-
 
 exports.ExampleComponent = _chunkGOA67MI6js.ExampleComponent;

package/dist/esm/__future__/index.js

@@ -1,10 +1,6 @@
 import {
   ExampleComponent
 } from "../chunk-GOA67MI6.js";
-
-// src/__future__/index.ts
-export * from "@kaizen/select";
-export * from "@kaizen/tabs";
 export {
   ExampleComponent
 };

package/dist/iife/Dropdown.module-4CIBZTRZ-4CIBZTRZ.scss

@@ -0,0 +1,100 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/deprecated-component-library-helpers/styles/color";
+@import "../../styles/layers";
+@import "~@kaizen/deprecated-component-library-helpers/styles/type";
+
+$width: 248px;
+$caButton-border-width: $border-solid-border-width;
+$caButton-verticalPadding: calc(
+  calc(#{$ca-grid} / 2) - #{$caButton-border-width}
+);
+
+.dropdown {
+  position: relative;
+  padding: $caButton-verticalPadding
+    calc(#{$ca-grid * 1} - #{$caButton-border-width});
+}
+
+.buttonReset {
+  appearance: none;
+  display: inline;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+// @TODO - this should be using Kaizen's button
+.dropdownButton {
+  @include kz-type-inter-button-primary;
+  @include ca-inherit-baseline;
+  composes: buttonReset;
+  cursor: pointer;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropdownControlAction {
+  @include kz-type-inter-button-primary;
+  @include ca-inherit-baseline;
+}
+
+.dropdownIcon {
+  box-sizing: border-box;
+  width: $ca-grid;
+  height: $ca-grid;
+  padding: 2px;
+}
+
+.dropdownIcon + .dropdownLabel {
+  margin-left: calc(#{$ca-grid} / 2 - 2px);
+
+  [dir="rtl"] & {
+    margin-left: 0;
+    margin-right: calc(#{$ca-grid} / 2 - 2px);
+  }
+}
+
+// If you would like the dropdown icon to only be visible when a certain area is hovered,
+// have you hover area use (or compose) the `dropdownHoverArea` class. The label will
+// always be visible.
+.dropdownHoverArea {
+  .dropdownIcon {
+    opacity: 0;
+    &.isOpen,
+    &:focus {
+      opacity: 1;
+    }
+  }
+  &:hover .dropdownIcon {
+    opacity: 1;
+  }
+}
+
+.chevronIcon {
+  position: relative;
+  top: 4px;
+}
+
+.menuContainer {
+  position: absolute;
+  width: $width;
+  z-index: $ca-z-index-dropdown;
+  right: 0;
+
+  [dir="rtl"] & {
+    right: auto;
+    left: 0;
+  }
+}
+
+.reversedColor {
+  color: $color-white;
+}

package/dist/iife/Layout.module-MZ6JYT46-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/Menu.module-N76N74LN-N76N74LN.scss

@@ -0,0 +1,111 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@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 "../../styles/border";
+@import "../../styles/layers";
+@import "../../styles/animation";
+
+$side-padding: calc(calc(3 / 4) * #{$ca-grid});
+
+.menuList {
+  background: white;
+  border: $border-solid-border-width $border-solid-border-style
+    $color-purple-200;
+  box-shadow: $shadow-small-box-shadow;
+  line-height: 40px;
+}
+
+.header {
+  padding: 10px $side-padding;
+  text-align: left;
+  color: rgba($color-purple-800-rgb, 0.4);
+  border-bottom: $ca-border-color 1px solid;
+}
+
+.header__title {
+  @include kz-typography-heading-6;
+  @include ca-inherit-baseline;
+  display: block;
+}
+
+.menuItem {
+  @include kz-typography-paragraph-body;
+  @include ca-inherit-baseline;
+  composes: interactiveIconWrapper from "../Icon/Icon.module.scss";
+  background: transparent;
+  color: $color-purple-800;
+  cursor: pointer;
+  text-align: left;
+
+  transition: $ca-duration-immediate background-color ease,
+    $ca-duration-immediate color ease;
+
+  padding: 10px $side-padding;
+  text-decoration: none;
+  display: flex;
+  flex: 0 0 100%;
+
+  [dir="rtl"] & {
+    text-align: right;
+  }
+
+  &.menuItem--active,
+  &:hover,
+  &:focus {
+    background: $color-gray-100;
+    color: $color-blue-500;
+    // override Murmur global styles :(
+    text-decoration: none;
+
+    .menuItem__Icon {
+      color: $color-blue-500;
+    }
+  }
+}
+
+.menuItem--active {
+  composes: active from "../Icon/Icon.module.scss";
+}
+
+.menuItem--destructive {
+  color: $color-red-600;
+  .menuItem__Icon {
+    color: $color-red-600;
+  }
+}
+
+.menuItem__Label {
+  flex: 1;
+
+  :not(:only-child) {
+    @include ca-margin($end: calc(#{$ca-grid} / 2));
+  }
+}
+
+.menuItem__Icon {
+  text-align: right;
+  color: $color-purple-800;
+  position: relative;
+  top: 3px;
+
+  .hoverIcon & {
+    opacity: 0;
+  }
+  .menuItem--active &,
+  .hoverIcon:hover &,
+  .hoverIcon:focus & {
+    opacity: 1;
+  }
+}
+
+.separator {
+  height: 1px;
+  width: 100%;
+  border: 0;
+  background: $color-purple-200;
+  visibility: visible;
+  margin: 5px 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;
+}