Merge pull request #14 from computas/implement-icon

Implement icon

.storybook/preview.ts

@@ -1,6 +1,7 @@
 import { withThemeByClassName } from '@storybook/addon-themes';
 import type { Preview } from '@storybook/web-components';
 import '../global-styles.css';
+import './registerIcons';
 
 const preview: Preview = {
   parameters: {

.storybook/registerIcons.ts

@@ -0,0 +1,8 @@
+import { addIcons } from '../src/components/icon';
+import * as cxIcons from '../src/components/icon/iconRegistry';
+
+const iconObj = Object.entries(cxIcons)
+  .map(([_, icon]) => icon as cxIcons.SVGIcon)
+  .filter((icon) => !!icon.name && !!icon.data);
+
+addIcons(...iconObj);

CONTRIBUTING.md

@@ -51,3 +51,9 @@ The web components are located in the `src/components` folder, where each compon
 2. Try to add your submissions through small, focused and well described commits. This makes it easier to do QA. Use the [conventional commit](https://www.conventionalcommits.org/en/v1.0.0/) syntax if you feel like doing so.
 3. When you're done implementing your feature, create a pull request for your branch to be merged into the `main` branch. This will automatically run linting, and will create a preview URL of your feature branch. At least one approval is required to merge the pull request.
 4. When a reviewer has approved your pull request; merge your branch and delete it.
+
+## How to add new icons
+
+1. Add the new or changed SVG icon to the folder `/src/components/icon/svg`.
+2. Ensure that the icon has a width and height of 24px, and that fill and/or stroke is defined as `currentColor`.
+3. Run the script `bun run create-icon-registry`.

biome.json

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["./src/routeTree.gen.ts", "./src/ui/Icon/name.d.ts"]
+    "ignore": ["./src/components/icon/iconRegistry.ts"]
   },
   "formatter": {
     "enabled": true,

dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@computas/designsystem",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "The Computas design system",
   "type": "module",
   "license": "MIT",

package.json

@@ -9,27 +9,28 @@
     "lint": "biome check ./src",
     "build-docs": "tsc && storybook build",
     "build-styles": "tsup global-styles.css --out-dir dist",
-    "build-designsystem": "bun run build-styles & bun --filter '*' build"
+    "build-designsystem": "bun run build-styles & bun --filter '*' build",
+    "create-icon-registry": "bun --filter '@computas/designsystem-icon' create-icon-registry"
   },
   "dependencies": {
     "@lit/react": "^1.0.6",
-    "@storybook/addon-themes": "^8.4.6",
     "lit": "^3.2.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@chromatic-com/storybook": "^3.2.2",
-    "@computas/designsystem-breadcrumbs": "workspace:*",
+    "@computas/designsystem-icon": "workspace:*",
     "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-themes": "^8.4.6",
     "@storybook/blocks": "^8.4.6",
     "@storybook/manager-api": "^8.4.6",
     "@storybook/test": "^8.4.6",
     "@storybook/theming": "^8.4.6",
     "@storybook/web-components": "^8.4.6",
     "@storybook/web-components-vite": "^8.4.6",
-    "@types/node": "^22.9.0",
+    "@types/node": "^22.10.1",
     "storybook": "^8.4.6",
-    "typescript": "~5.7.0",
-    "vite": "^6.0.0"
+    "typescript": "~5.7.2",
+    "vite": "^6.0.2"
   }
 }

src/components/button/button.css

@@ -5,7 +5,7 @@
   --cx-gradient-highlight-size: 500%;
 
   display: inline-flex;
-  gap: var(--cx-spacing-1);
+  gap: var(--cx-spacing-2);
   align-items: center;
   justify-content: center;
   text-align: center;

src/components/icon/Overview.mdx

@@ -0,0 +1,90 @@
+import {
+  Canvas,
+  Description,
+  IconGallery,
+  IconItem,
+  Meta,
+  Source,
+  Subtitle,
+  Title,
+} from "@storybook/blocks";
+
+import * as stories from "./icon.stories";
+import * as cxIcons from "./iconRegistry";
+
+<Meta of={stories} />
+
+<Title />
+
+The icon component is implemented as a web component where you manually register each icon you want to use in your application.
+This ensures that you only include the icons that you need in your bundle. To register an icon for use, please use the `addIcons()`
+function with a list of your icons, as such:
+
+<Source
+  code={`
+import { addIcons } from '@computas/designsystem/icon';
+import { bin, download } from '@computas/designsystem/icon/iconRegistry';
+
+addIcons(bin, download);
+`}
+language="typescript"
+dark
+/>
+
+The registration of icons is usually done at the root level of your application, and makes the icons globally available.
+After registering an icon, use it through the `cx-icon` component. Start by importing the component. If you use the 
+web component, you only need to import the component once in your app, preferably at the root level. If you use the
+React component, you must import the component in each place you need it.
+
+<Source
+  code={`
+// Web component
+import '@computas/designsystem/icon';
+
+// React
+import { CxIcon } from '@computas/designsystem/icon/react';
+`}
+language="typescript"
+dark
+/>
+
+Then simply use the component and provide the name of the icon you wish to display:
+
+<Source
+  code={`
+// Web component
+<cx-icon name="download" />
+
+// React
+<CxIcon name="download" />
+`} language="tsx" dark />
+
+If you try to use an icon that is not registered, the component throws an error.
+
+<br />
+## Icon overview
+
+<IconGallery>
+  {Object.entries(cxIcons)
+    .map(([, icon]) => icon)
+    .filter((icon) => !!icon.data)
+    .map((icon) => (
+      <IconItem name={icon.name} key={icon.name}>
+        <cx-icon name={icon.name} />
+      </IconItem>
+    ))}
+</IconGallery>
+
+## Sizing
+
+The icon component can be sized through the `size` prop. The prop accepts the same values as our spacing tokens, in other words a number between 1 and 20.
+The numbers are on a relative scale, and aligns with our 4px grid. If you want your icon to be 32px, use `size="8"` (since 32 / 4 = 8).
+
+<Canvas of={stories.Sizing} />
+
+## Color
+
+By default, the icon inherits the font color of the container it's within.
+If you want to use a custom color, apply a CSS class where you use the `color` property to colorize the icon.
+
+<Canvas of={stories.Color} />

src/components/icon/icon.stories.ts

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './icon';
+
+export default {
+  title: 'Components/Icon',
+} satisfies Meta;
+
+export const Sizing: StoryObj = {
+  render: () => html`
+    <cx-icon name="settings" size="1" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="2" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="3" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="4" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="5" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="6" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="7" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="8" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="9" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="10" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="11" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="12" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="13" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="14" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="15" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="16" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="17" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="18" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="19" class="cx-mr-4"></cx-icon>
+<cx-icon name="settings" size="20"></cx-icon>
+  `,
+};
+
+export const Color: StoryObj = {
+  render: () => html`
+    <style>
+  .danger-icon {
+    color: var(--cx-color-signal-danger);
+  }
+  
+  .info-icon {
+    color: var(--cx-color-signal-info);
+  }
+  
+  .success-icon {
+    color: var(--cx-color-signal-success);
+  }
+</style>
+
+<cx-icon name="star-added" size="10" class="cx-mr-4 danger-icon"></cx-icon>
+<cx-icon name="star-added" size="10" class="cx-mr-4 info-icon"></cx-icon>
+<cx-icon name="star-added" size="10" class="cx-mr-4 success-icon"></cx-icon>
+<button class="cx-btn__secondary">
+  Go forward
+  <cx-icon name="forward" size="4"></cx-icon>
+</button>
+  `,
+};