@kaizen/components 1.70.6 → 1.70.8

package/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts

@@ -5,7 +5,7 @@ import { type StringSuggestions } from '~components/types/StringSuggestions'
 // `undefined` means the icon has no usage, thus is not available in the new icon set
 type NewIconProps = { name: IconNames; isFilled?: boolean } | undefined
 
-const iconMap = new Map<keyof typeof OLD_ICONS, NewIconProps>([
+export const iconMap = new Map<keyof typeof OLD_ICONS, NewIconProps>([
   ['AcademyIcon', { name: 'school' }],
   ['ActionOffIcon', undefined],
   ['ActionOffWhiteIcon', undefined],

package/dist/cjs/Filter/Filter/subcomponents/FilterContents/FilterContents.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var FilterContents_module = require('./FilterContents.module.scss.cjs');
+var FilterContents_module = require('./FilterContents.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/Filter/Filter/subcomponents/FilterContents/FilterContents.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "filterContents": "FilterContents-module_filterContents__LEVFe"
+};
+module.exports = styles;

package/dist/cjs/Filter/Filter/subcomponents/FilterPopover/FilterPopover.cjs

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var reactPopper = require('react-popper');
-var FilterPopover_module = require('./FilterPopover.module.scss.cjs');
+var FilterPopover_module = require('./FilterPopover.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/Filter/Filter/subcomponents/FilterPopover/FilterPopover.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "filterPopover": "FilterPopover-module_filterPopover__ZAkra"
+};
+module.exports = styles;

package/dist/cjs/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.cjs

@@ -6,7 +6,7 @@ var classnames = require('classnames');
 var Button = require('../../../../Button/Button/Button.cjs');
 require('../../../../Button/IconButton/IconButton.cjs');
 var FilterBarContext = require('../../context/FilterBarContext.cjs');
-var ClearAllButton_module = require('./ClearAllButton.module.scss.cjs');
+var ClearAllButton_module = require('./ClearAllButton.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "clearAllButton": "ClearAllButton-module_clearAllButton__dl4nS",
+  "hidden": "ClearAllButton-module_hidden__guVNI"
+};
+module.exports = styles;

package/dist/cjs/Filter/FilterSelect/FilterSelect.cjs

@@ -19,7 +19,7 @@ var SelectPopoverContents = require('../../__rc__/Select/subcomponents/SelectPop
 require('../../__rc__/Select/subcomponents/SelectToggle/SelectToggle.cjs');
 var getDisabledKeysFromItems = require('../../__rc__/Select/utils/getDisabledKeysFromItems.cjs');
 var transformSelectItemToCollectionElement = require('../../__rc__/Select/utils/transformSelectItemToCollectionElement.cjs');
-var FilterSelect_module = require('./FilterSelect.module.scss.cjs');
+var FilterSelect_module = require('./FilterSelect.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/Filter/FilterSelect/FilterSelect.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "filterContents": "FilterSelect-module_filterContents__--oQN"
+};
+module.exports = styles;

package/dist/esm/Filter/Filter/subcomponents/FilterContents/FilterContents.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import styles from './FilterContents.module.scss.mjs';
+import styles from './FilterContents.module.css.mjs';
 const FilterContents = /*#__PURE__*/function () {
   const FilterContents = function (_a) {
     var children = _a.children,

package/dist/esm/Filter/Filter/subcomponents/FilterContents/FilterContents.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "filterContents": "FilterContents-module_filterContents__LEVFe"
+};
+export { styles as default };

package/dist/esm/Filter/Filter/subcomponents/FilterPopover/FilterPopover.mjs

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { useState } from 'react';
 import classnames from 'classnames';
 import { usePopper } from 'react-popper';
-import styles from './FilterPopover.module.scss.mjs';
+import styles from './FilterPopover.module.css.mjs';
 const FilterPopover = /*#__PURE__*/function () {
   const FilterPopover = function (_a) {
     var children = _a.children,

package/dist/esm/Filter/Filter/subcomponents/FilterPopover/FilterPopover.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "filterPopover": "FilterPopover-module_filterPopover__ZAkra"
+};
+export { styles as default };

package/dist/esm/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.mjs

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { Button } from '../../../../Button/Button/Button.mjs';
 import '../../../../Button/IconButton/IconButton.mjs';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
-import styles from './ClearAllButton.module.scss.mjs';
+import styles from './ClearAllButton.module.css.mjs';
 const ClearAllButton = /*#__PURE__*/function () {
   const ClearAllButton = function () {
     var _a;

package/dist/esm/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.css.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "clearAllButton": "ClearAllButton-module_clearAllButton__dl4nS",
+  "hidden": "ClearAllButton-module_hidden__guVNI"
+};
+export { styles as default };

package/dist/esm/Filter/FilterSelect/FilterSelect.mjs

@@ -17,7 +17,7 @@ import { SelectPopoverContents } from '../../__rc__/Select/subcomponents/SelectP
 import '../../__rc__/Select/subcomponents/SelectToggle/SelectToggle.mjs';
 import { getDisabledKeysFromItems } from '../../__rc__/Select/utils/getDisabledKeysFromItems.mjs';
 import { transformSelectItemToCollectionElement } from '../../__rc__/Select/utils/transformSelectItemToCollectionElement.mjs';
-import styles from './FilterSelect.module.scss.mjs';
+import styles from './FilterSelect.module.css.mjs';
 const FilterSelect = /*#__PURE__*/function () {
   const FilterSelect = function (_a) {
     var isOpen = _a.isOpen,

package/dist/esm/Filter/FilterSelect/FilterSelect.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "filterContents": "FilterSelect-module_filterContents__--oQN"
+};
+export { styles as default };

package/dist/styles.css

@@ -2358,12 +2358,12 @@
 /** THIS IS AN AUTOGENERATED FILE **/
 .Content-module_content__ZeTRs {
   max-width: 1392px;
-  margin: 0 72px;
+  padding: 0 72px;
   width: 100%;
 }
 @media (max-width: calc(1080px - 1px)) {
   .Content-module_content__ZeTRs {
-    margin: 0 12px;
+    padding: 0 12px;
   }
 }
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -3565,26 +3565,24 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   display: inline;
   margin-bottom: 0;
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-.FilterPopover-module_filterPopover__eVkH6 {
-  background-color: var(--color-white, #ffffff);
+.FilterPopover-module_filterPopover__ZAkra {
+  background-color: var(--color-white);
   z-index: 1010;
-  box-shadow: var(--shadow-large-box-shadow, 0 3px 9px 0 rgba(0, 0, 0, 0.1), 0 8px 40px 0 rgba(0, 0, 0, 0.08));
-  border-radius: var(--border-borderless-border-radius, 7px);
+  box-shadow: var(--shadow-large-box-shadow);
+  border-radius: var(--border-borderless-border-radius);
   display: inline-flex;
 }
+
 @media (width < 768px) {
   .Filter-module_filter__u3IkC {
     flex-basis: 100%;
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
-.FilterContents-module_filterContents__tQWu8 {
-  padding: var(--spacing-md, 1.5rem);
+.FilterContents-module_filterContents__LEVFe {
+  padding: var(--spacing-24);
 }
+
 .DateInputField-module_disabled__gfago {
   opacity: 0.3;
 }
@@ -4160,14 +4158,15 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   text-overflow: ellipsis;
   padding-inline-end: var(--spacing-12);
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-.FilterSelect-module_filterContents__p7Kgc {
+/*  This a temporary fix to increase specificity, until we figure out why this CSS is being compiled later than the padding in the FilterContents sub-component */
+.FilterSelect-module_filterContents__--oQN.FilterSelect-module_filterContents__--oQN {
   box-sizing: border-box;
-  min-width: 12.25rem;
-  max-width: 25rem;
+  min-width: 12.25rem; /* 196px */
+  max-width: 25rem; /* 400px */
   overflow: auto;
-  padding: unset;
+  padding: unset; /* Padding is added by <SelectPopoverContents> */
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -4304,13 +4303,14 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   display: block;
   margin: 5px 0;
 }
-.ClearAllButton-module_clearAllButton__XNkm2 {
+.ClearAllButton-module_clearAllButton__dl4nS {
   white-space: nowrap;
 }
 
-.ClearAllButton-module_hidden__-L2eA {
+.ClearAllButton-module_hidden__guVNI {
   visibility: hidden;
 }
+
 .FilterBar-module_filterBar__JEVKL {
   display: flex;
   padding: var(--spacing-8);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.6",
+  "version": "1.70.8",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Content/Content.module.scss

@@ -3,10 +3,10 @@
 
 .content {
   max-width: $layout-content-max-width;
-  margin: 0 $layout-content-side-margin;
+  padding: 0 $layout-content-side-margin;
   width: 100%;
 
   @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
-    margin: 0 $content-margin-width-on-medium-and-small;
+    padding: 0 $content-margin-width-on-medium-and-small;
   }
 }

package/src/Filter/Filter/subcomponents/FilterContents/FilterContents.module.css

@@ -0,0 +1,3 @@
+.filterContents {
+  padding: var(--spacing-24);
+}

package/src/Filter/Filter/subcomponents/FilterContents/FilterContents.tsx

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './FilterContents.module.scss'
+import styles from './FilterContents.module.css'
 
 export type FilterContentsProps = {
   children: React.ReactNode

package/src/Filter/Filter/subcomponents/FilterPopover/FilterPopover.module.css

@@ -0,0 +1,7 @@
+.filterPopover {
+  background-color: var(--color-white);
+  z-index: 1010;
+  box-shadow: var(--shadow-large-box-shadow);
+  border-radius: var(--border-borderless-border-radius);
+  display: inline-flex;
+}

package/src/Filter/Filter/subcomponents/FilterPopover/FilterPopover.tsx

@@ -3,7 +3,7 @@ import { type Options } from '@popperjs/core'
 import classnames from 'classnames'
 import { usePopper } from 'react-popper'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './FilterPopover.module.scss'
+import styles from './FilterPopover.module.css'
 
 export type FilterPopoverProps = {
   children: React.ReactNode

package/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx

@@ -3,7 +3,7 @@ import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { Button } from '~components/Button'
 import { useFilterBarContext } from '../../context/FilterBarContext'
-import styles from './ClearAllButton.module.scss'
+import styles from './ClearAllButton.module.css'
 
 export const ClearAllButton = (): JSX.Element => {
   const { formatMessage } = useIntl()

package/src/Filter/FilterSelect/FilterSelect.module.css

@@ -0,0 +1,8 @@
+/*  This a temporary fix to increase specificity, until we figure out why this CSS is being compiled later than the padding in the FilterContents sub-component */
+.filterContents.filterContents {
+  box-sizing: border-box;
+  min-width: 12.25rem; /* 196px */
+  max-width: 25rem; /* 400px */
+  overflow: auto;
+  padding: unset; /* Padding is added by <SelectPopoverContents> */
+}

package/src/Filter/FilterSelect/FilterSelect.tsx

@@ -17,7 +17,7 @@ import { getDisabledKeysFromItems } from '~components/__rc__/Select/utils/getDis
 import { transformSelectItemToCollectionElement } from '~components/__rc__/Select/utils/transformSelectItemToCollectionElement'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { type SelectItem, type SelectOption } from './types'
-import styles from './FilterSelect.module.scss'
+import styles from './FilterSelect.module.css'
 
 type OmittedAriaSelectProps =
   | 'label'

package/src/__rc__/Icon/_docs/Icon--migration-guide.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as IconStories from './Icon.docs.stories'
+
+<Meta title="Components/Icon/Icon (Future)/Migration Guide" />
+
+# Icon Migration Guide
+
+This is a short guide to assist in migration from the old to new Icon component.
+
+## Codemod
+
+To assist in migration we have created the `upgradeiconv1` codemod. This will loop through the given directory and update all instances of Icon to the latest implementation. You can refer to this [README](https://github.com/cultureamp/kaizen-design-system/blob/main/packages/components/codemods/README.md#upgradeiconv1) on how to run this within your repository.
+
+For more information on the changes to the API, we recommend referring the <LinkTo pageId="components-icon-icon-future-api-specification--docs">API Specification</LinkTo>.
+
+## Changes to Icon exportNames
+
+The following table outlines the changes to the Icons names and whether the new `isFilled` prop is required. This can be used if you are manually migrating components.
+
+Where `N/A` is shown, this indicates that an equivalent icon does not exist or has been made redundant by the new API, ie:
+
+- `ActionOffIcon` is not needed as the new `ActionOnIcon` (`flash_on`) can be used with the `isFilled` to handle the toggled states.
+- `ActionOffIconActionOffWhiteIcon` is not needed as the API allows for color to be set via `className` or inherited via it's parent element.
+
+You will need to discuss alternative with your design team or reach out in the #help_design_system channel if an equivalent icon does not exist.
+
+<Story of={IconStories.IconTableComparison} />

package/src/__rc__/Icon/_docs/Icon.docs.stories.tsx

@@ -15,6 +15,7 @@ import { ToggleSwitchField } from '~components/ToggleSwitch'
 import { Button } from '~components/__rc__/Button'
 import { Tag } from '~components/__rc__/Tag'
 import { StickerSheet } from '~storybook/components/StickerSheet'
+import { iconMap } from '../../../../codemods/upgradeIconV1/getNewIconPropsFromOldIconName'
 import { iconDefaultSet } from '../constants'
 import { Icon } from '../index'
 import imgInterfaceDont from './assets/interface-dont.png'
@@ -476,3 +477,40 @@ export const TooltipDont: Story = {
     />
   ),
 }
+
+export const IconTableComparison: Story = {
+  render: () => {
+    return (
+      <TableContainer>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderRowCell width={4 / 12} labelText="Old name" />
+            <TableHeaderRowCell width={4 / 12} labelText="New name" />
+            <TableHeaderRowCell width={4 / 12} labelText="isFilled" />
+          </TableRow>
+        </TableHeader>
+        {Array.from(iconMap).map(([key, value]) => (
+          <TableCard key={key}>
+            <TableRow>
+              <TableRowCell width={4 / 12}>
+                <Text tag="div" variant="body">
+                  {key}
+                </Text>
+              </TableRowCell>
+              <TableRowCell width={4 / 12}>
+                <Text tag="div" variant="body">
+                  {value?.name ?? 'N/A'}
+                </Text>
+              </TableRowCell>
+              <TableRowCell width={4 / 12}>
+                <Text tag="div" variant="body">
+                  {value?.isFilled ? 'true' : value?.name ? 'false' : 'N/A'}
+                </Text>
+              </TableRowCell>
+            </TableRow>
+          </TableCard>
+        ))}
+      </TableContainer>
+    )
+  },
+}

package/dist/cjs/Filter/Filter/subcomponents/FilterContents/FilterContents.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterContents": "FilterContents-module_filterContents__tQWu8"
-};
-module.exports = styles;

package/dist/cjs/Filter/Filter/subcomponents/FilterPopover/FilterPopover.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterPopover": "FilterPopover-module_filterPopover__eVkH6"
-};
-module.exports = styles;

package/dist/cjs/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "clearAllButton": "ClearAllButton-module_clearAllButton__XNkm2",
-  "hidden": "ClearAllButton-module_hidden__-L2eA"
-};
-module.exports = styles;

package/dist/cjs/Filter/FilterSelect/FilterSelect.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterContents": "FilterSelect-module_filterContents__p7Kgc"
-};
-module.exports = styles;

package/dist/esm/Filter/Filter/subcomponents/FilterContents/FilterContents.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "filterContents": "FilterContents-module_filterContents__tQWu8"
-};
-export { styles as default };

package/dist/esm/Filter/Filter/subcomponents/FilterPopover/FilterPopover.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "filterPopover": "FilterPopover-module_filterPopover__eVkH6"
-};
-export { styles as default };

package/dist/esm/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "clearAllButton": "ClearAllButton-module_clearAllButton__XNkm2",
-  "hidden": "ClearAllButton-module_hidden__-L2eA"
-};
-export { styles as default };

package/dist/esm/Filter/FilterSelect/FilterSelect.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "filterContents": "FilterSelect-module_filterContents__p7Kgc"
-};
-export { styles as default };

package/src/Filter/Filter/subcomponents/FilterContents/FilterContents.module.scss

@@ -1,5 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-
-.filterContents {
-  padding: $spacing-md;
-}

package/src/Filter/Filter/subcomponents/FilterPopover/FilterPopover.module.scss

@@ -1,11 +0,0 @@
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/shadow';
-
-.filterPopover {
-  background-color: $color-white;
-  z-index: 1010;
-  box-shadow: $shadow-large-box-shadow;
-  border-radius: $border-borderless-border-radius;
-  display: inline-flex;
-}

package/src/Filter/FilterSelect/FilterSelect.module.scss

@@ -1,10 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-
-.filterContents {
-  box-sizing: border-box;
-  min-width: 12.25rem; // 196px
-  max-width: 25rem; // 400px
-  overflow: auto;
-  // Padding is added by <SelectPopoverContents>
-  padding: unset;
-}