@kaizen/components 3.3.2 → 3.3.3

package/dist/types/Icon/CustomIcons.d.ts

@@ -0,0 +1,7 @@
+import type { FC, SVGProps } from 'react';
+type CustomIcon = FC<SVGProps<SVGSVGElement> & {
+    color?: string;
+    size?: number;
+}>;
+export declare const UserSettingsIcon: CustomIcon;
+export {};

package/dist/types/index.d.ts

@@ -25,6 +25,7 @@ export * from './Focusable';
 export * from './GuidanceBlock';
 export * from './Heading';
 export * from './Icon';
+export * from './Icon/CustomIcons';
 export * from './Illustration';
 export * from './Input';
 export * from './KaizenProvider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -132,6 +132,7 @@
     "@cultureamp/frontend-apis": "13.3.0",
     "@cultureamp/i18n-react-intl": "^4.1.6",
     "@cultureamp/package-bundler": "^4.0.1",
+    "@svgr/rollup": "^8.1.0",
     "cssnano": "^7.1.9",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
@@ -188,7 +189,8 @@
     "build:global-styles": "postcss ./styles/global.css --output dist/global.css",
     "build:combine-styles": "concat-cli -f ./dist/global.css ./dist/styles.css -o ./dist/styles.css && rm ./dist/global.css",
     "build:styles": "pnpm build:global-styles && pnpm build:combine-styles",
-    "test": "FORCE_COLOR=1 vitest --config ../../vite.config.ts",
+    "test": "FORCE_COLOR=1 vitest run --config ../../vite.config.ts",
+    "test:watch": "FORCE_COLOR=1 vitest --config ../../vite.config.ts",
     "update-icons": "./src/Icon/bin/update-icons.sh",
     "i18n:extract": "pnpm i18n-extract",
     "clean": "rimraf 'dist' 'node_modules' '.turbo'",

package/src/Icon/CustomIcons.ts

@@ -0,0 +1,8 @@
+import type { FC, SVGProps } from 'react'
+import _UserSettingsIcon from '../../assets/svgs/custom-icons/user-settings.svg'
+
+type CustomIcon = FC<SVGProps<SVGSVGElement> & { color?: string; size?: number }>
+
+// Cast forces tsc to emit the concrete FC type in .d.ts rather than a .svg path reference,
+// which consumers can't resolve (the declare module '*.svg' in types.d.ts is not included in the package output).
+export const UserSettingsIcon = _UserSettingsIcon as CustomIcon

package/src/Icon/_docs/Icon--api-specification.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
 import { ResourceLinks, KAIOInstallation } from '~storybook/components'
 import * as IconStories from './Icon.docs.stories'
+import * as IconsExtendedStories from './IconsCustom.stories'
 
 <Meta title="Components/Icon/API Specification" />
 
@@ -103,3 +104,22 @@ Whilst you have access to all Material Symbols, the following icons match the de
 Tip: Click on the icon you want for a quick copy!
 
 <Story of={IconStories.DefaultIconSet} />
+
+## Custom Icon
+
+Custom SVG icons that extend the icon set beyond Material Symbols. These are exported directly from `@kaizen/components` alongside `Icon`.
+
+`UserSettingsIcon` is the only custom icon currently available.
+
+```tsx
+import { UserSettingsIcon } from '@kaizen/components'
+;<UserSettingsIcon size={24} color="currentColor" />
+```
+
+Props:
+
+- **`size`** — sets both `width` and `height` in pixels. Defaults to `24`.
+- **`color`** — sets the icon color. Defaults to `currentColor`.
+
+<Canvas of={IconsExtendedStories.Playground} />
+<Controls of={IconsExtendedStories.Playground} />

package/src/Icon/_docs/Icon--usage-guidelines.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
 import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
 import * as IconStories from './Icon.docs.stories'
+import * as IconsExtendedStories from './IconsCustom.stories'
 
 <Meta title="Components/Icon/Usage Guidelines" />
 
@@ -144,3 +145,11 @@ Important information can be hidden if it's only explained in tooltips, leading
 Whilst you have access to all Material Symbols, the following icons match the default set we have in Figma.
 
 <Story of={IconStories.DefaultIconSet} />
+
+## Custom Icon
+
+Custom SVG icons that extend the icon set for use cases not covered by Material Symbols. Use these when a specific icon is required that does not exist in the Material Symbols library.
+
+`UserSettingsIcon` is the only custom icon currently available.
+
+<Canvas of={IconsExtendedStories.Playground} />

package/src/Icon/_docs/IconsCustom.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { UserSettingsIcon } from '../CustomIcons'
+
+const meta = {
+  title: 'Components/Icon/CustomIcons',
+  component: UserSettingsIcon,
+  args: {
+    size: 24,
+    color: '#000',
+  },
+} satisfies Meta<typeof UserSettingsIcon>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+}

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './Focusable'
 export * from './GuidanceBlock'
 export * from './Heading'
 export * from './Icon'
+export * from './Icon/CustomIcons'
 export * from './Illustration'
 export * from './Input'
 export * from './KaizenProvider'