@kaizen/components 1.70.7 → 1.70.9

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/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 **/
@@ -10198,6 +10198,8 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 /** THIS IS AN AUTOGENERATED FILE **/
 .TileGrid-module_grid__1WCNc {
   list-style-type: none;
+  padding-inline-start: 0;
+  margin-block: 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
   grid-gap: var(--spacing-md, 1.5rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.7",
+  "version": "1.70.9",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -117,8 +117,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
-    "@kaizen/package-bundler": "2.0.3",
-    "@kaizen/design-tokens": "10.8.6"
+    "@kaizen/design-tokens": "10.8.6",
+    "@kaizen/package-bundler": "2.0.3"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

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/Tile/TileGrid/TileGrid.module.scss

@@ -4,6 +4,8 @@
 
 .grid {
   list-style-type: none;
+  padding-inline-start: 0;
+  margin-block: 0;
   display: grid;
   // the more we shave off the width here,
   // the less the tiles will grow when they lose one from the row

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>
+    )
+  },
+}