feat: create @utrecht/icon-css package

.changeset/angry-terms-compete.md

@@ -0,0 +1,9 @@
+---
+"@utrecht/icon": major
+"@utrecht/icon-css": major
+---
+
+Split `@utrecht/icon` into two packages:
+
+- `@utrecht/icon-css` for the CSS and SCSS.
+- `@utrecht/icon` for the Icon SVGs.

components/icon/CHANGELOG.md

@@ -1,4 +1,4 @@
-# @utrecht/icon
+# @utrecht/icon-css
 
 ## 1.3.0
 

components/icon/README.md

@@ -1,75 +1,5 @@
 <!-- @license CC0-1.0 -->
 
-# Iconen in code
+# Icon
 
-## Iconen gebruiken als Custom Element
-
-Eén van de makkelijkste manieren om iconen te gebruiken is door ze te includen in de web component library, zodat je ze als custom element kan gebruiken. Elk icoon is beschikbaar als custom element. De naam van van het icoon (`utrecht-icon-...`) is ook de naam van het custom-element. Voorbeeld:
-
-```html
-<div>
-  <utrecht-icon-loupe></utrecht-icon-loupe>
-</div>
-```
-
-Verander de kleur van het icoon via de CSS-eigenschap `color` op een parent element of via de custom eigenschap `--utrecht-icon-color`.
-
-### `color` van de omgevings content
-
-Op onderstaande manier kan je het makkelijkst de kleur aanpassen. De kleur van de bestaande tekst zal ook op het icoon toegepast worden.
-
-```html
-<button>
-  <utrecht-icon-loupe></utrecht-icon-loupe>
-  Search
-</button>
-
-<style>
-  button {
-    background-color: rgb(0, 0, 0);
-    color: rgb(255, 255, 255);
-  }
-</style>
-```
-
-### `--utrecht-icon-color` als custom icoon kleur
-
-Deze manier is handig als je een klein verschil wilt aanbrengen tussen de tekst kleur en de kleur van het icoon. Het gebruikt een CSS custom property `--utrecht-icon-color` als de kleur van het icoon.
-
-```html
-<button>
-  <utrecht-icon-loupe></utrecht-icon-loupe>
-  Search
-</button>
-
-<style>
-  button {
-    --utrecht-icon-color: rgba(255, 255, 255, 0.75);
-    background-color: rgb(0, 0, 0);
-    color: rgb(255, 255, 255);
-  }
-</style>
-```
-
-### Icoon grootte aanpassen
-
-De grootte van het icoon kan aangepast worden met de `--utrecht-icon-size` CSS eigenschap:
-
-```html
-<button>
-  <utrecht-icon-loupe></utrecht-icon-loupe>
-  Search
-</button>
-
-<style>
-  button {
-    --utrecht-icon-size: 42px;
-    background-color: rgb(0, 0, 0);
-    color: rgb(255, 255, 255);
-  }
-</style>
-```
-
-## Overzicht van icons
-
-Wanneer het nodig is een overzicht te hebben van de beschikbare icons, gebruik dan als basis de meegeleverde JSON informatie in `dist/index.json`. Het bevat een array met onder andere de ID van elke icoon. Op dit moment is de naam van de custom element altijd gelijk aan de ID.
+Grafisch symbool dat visueel informatie geeft over een actie, onderwerp of status.

components/icon/package.json

@@ -1,30 +1,22 @@
 {
   "version": "1.3.0",
   "author": "Community for NL Design System",
-  "description": "Icons for the Municipality of Utrecht based on the NL Design System architecture",
+  "description": "Icon component for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
-  "name": "@utrecht/icon",
+  "name": "@utrecht/icon-css",
   "files": [
     "dist/",
     "docs/",
-    "loader/",
+    "src/",
     "*.md"
   ],
   "main": "dist/index.css",
   "scripts": {
-    "build": "pnpm run build:css && pnpm run build:svg && pnpm run build:components",
-    "build:components": "node src/build.js $1 --prefix utrecht-icon --path ../../packages/web-component-library-stencil/src/components/generated/",
-    "build:css": "build-css-package",
-    "build:svg": "svgo --recursive --folder ./src/svg --output ./tmp/optimized-svgs --quiet",
-    "clean": "rimraf dist/ tmp/ ../../packages/web-component-library-stencil/src/generated/ ../../packages/web-component-library-stencil/src/components/generated/"
+    "build": "build-css-package",
+    "clean": "rimraf dist/"
   },
   "devDependencies": {
-    "@unicode/unicode-15.1.0": "1.5.2",
-    "jsdom": "20.0.3",
-    "lodash": "4.17.21",
-    "minimist": "1.2.8",
-    "@utrecht/build-utils-css": "workspace:*",
-    "svgo": "3.1.0"
+    "@utrecht/build-utils-css": "workspace:*"
   },
   "keywords": [
     "nl-design-system"

components/icon/project.json

@@ -6,14 +6,11 @@
   "targets": {
     "build": {
       "executor": "@nrwl/workspace:run-commands",
-      "outputs": [
-        "{projectRoot}/dist",
-        "{workspaceRoot}/packages/web-component-library-stencil/src/components/generated"
-      ],
+      "outputs": ["{projectRoot}/dist"],
       "options": {
         "command": "npm run build",
         "cwd": "components/icon",
-        "outputPath": "componentss/icon/dist"
+        "outputPath": "components/icon/dist"
       },
       "dependsOn": ["^build"]
     }

packages/component-library-css/package.json

@@ -68,7 +68,7 @@
     "@utrecht/heading-group-css": "workspace:*",
     "@utrecht/html-content-css": "workspace:*",
     "@utrecht/iban-data-css": "workspace:*",
-    "@utrecht/icon": "workspace:*",
+    "@utrecht/icon-css": "workspace:*",
     "@utrecht/img-css": "workspace:*",
     "@utrecht/index-char-nav-css": "workspace:*",
     "@utrecht/link-button-css": "workspace:*",

packages/component-library-css/src/index.scss

@@ -63,7 +63,7 @@
 @import "~@utrecht/heading-6-css/src/index";
 @import "~@utrecht/heading-group-css/src/index";
 @import "~@utrecht/iban-data-css/src/index";
-@import "~@utrecht/icon/src/index";
+@import "~@utrecht/icon-css/src/index";
 @import "~@utrecht/img-css/src/index";
 @import "~@utrecht/index-char-nav-css/src/index";
 @import "~@utrecht/link-button-css/src/index";

packages/component-library-react/package.json

@@ -180,7 +180,7 @@
     "@utrecht/heading-group-css": "workspace:*",
     "@utrecht/html-content-css": "workspace:*",
     "@utrecht/iban-data-css": "workspace:*",
-    "@utrecht/icon": "workspace:*",
+    "@utrecht/icon-css": "workspace:*",
     "@utrecht/img-css": "workspace:*",
     "@utrecht/index-char-nav-css": "workspace:*",
     "@utrecht/link-button-css": "workspace:*",

packages/component-library-react/src/css-module/Icon.tsx

@@ -4,7 +4,7 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import css from '@utrecht/icon/dist/index.mjs';
+import css from '@utrecht/icon-css/dist/index.mjs';
 import { insertStyle } from './insert-style';
 insertStyle(css);
 

packages/icon/CHANGELOG.md

@@ -0,0 +1,35 @@
+# @utrecht/icon
+
+## 1.3.0
+
+### Minor Changes
+
+- 725617a: Add `tokens.mjs` and `tokens.d.mts` files to CSS packages.
+- a63d0ef: Add `iconset.mjs` and `iconset.d.mts` files.
+
+## 1.2.0
+
+### Minor Changes
+
+- 888bc9b: Added metadata for icon tokens.
+
+## 1.1.0
+
+### Minor Changes
+
+- 5e6f551: Add support for bidirectional icons: icons that adapt to `dir="ltr"` and `dir="rtl"`. The following two icons are now bidirectional icons:
+
+  - `<utrecht-icon-chevron-left></utrecht-icon-chevron-left>`
+  - `<utrecht-icon-chevron-right></utrecht-icon-chevron-right>`
+
+  This behavior can be turned off with the `direction="ltr"` attribute:
+
+  ```html
+  <utrecht-icon-chevron-left direction="ltr"></utrecht-icon-chevron-left>
+  ```
+
+## 1.0.0
+
+### Minor Changes
+
+- 62f1157: Add SCSS files to `src/` directory of CSS component packages.

packages/icon/README.md

@@ -0,0 +1,75 @@
+<!-- @license CC0-1.0 -->
+
+# Iconen in code
+
+## Iconen gebruiken als Custom Element
+
+Eén van de makkelijkste manieren om iconen te gebruiken is door ze te includen in de web component library, zodat je ze als custom element kan gebruiken. Elk icoon is beschikbaar als custom element. De naam van van het icoon (`utrecht-icon-...`) is ook de naam van het custom-element. Voorbeeld:
+
+```html
+<div>
+  <utrecht-icon-loupe></utrecht-icon-loupe>
+</div>
+```
+
+Verander de kleur van het icoon via de CSS-eigenschap `color` op een parent element of via de custom eigenschap `--utrecht-icon-color`.
+
+### `color` van de omgevings content
+
+Op onderstaande manier kan je het makkelijkst de kleur aanpassen. De kleur van de bestaande tekst zal ook op het icoon toegepast worden.
+
+```html
+<button>
+  <utrecht-icon-loupe></utrecht-icon-loupe>
+  Search
+</button>
+
+<style>
+  button {
+    background-color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
+  }
+</style>
+```
+
+### `--utrecht-icon-color` als custom icoon kleur
+
+Deze manier is handig als je een klein verschil wilt aanbrengen tussen de tekst kleur en de kleur van het icoon. Het gebruikt een CSS custom property `--utrecht-icon-color` als de kleur van het icoon.
+
+```html
+<button>
+  <utrecht-icon-loupe></utrecht-icon-loupe>
+  Search
+</button>
+
+<style>
+  button {
+    --utrecht-icon-color: rgba(255, 255, 255, 0.75);
+    background-color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
+  }
+</style>
+```
+
+### Icoon grootte aanpassen
+
+De grootte van het icoon kan aangepast worden met de `--utrecht-icon-size` CSS eigenschap:
+
+```html
+<button>
+  <utrecht-icon-loupe></utrecht-icon-loupe>
+  Search
+</button>
+
+<style>
+  button {
+    --utrecht-icon-size: 42px;
+    background-color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
+  }
+</style>
+```
+
+## Overzicht van icons
+
+Wanneer het nodig is een overzicht te hebben van de beschikbare icons, gebruik dan als basis de meegeleverde JSON informatie in `dist/index.json`. Het bevat een array met onder andere de ID van elke icoon. Op dit moment is de naam van de custom element altijd gelijk aan de ID.

packages/icon/package.json

@@ -0,0 +1,42 @@
+{
+  "version": "1.3.0",
+  "author": "Community for NL Design System",
+  "description": "Icons for the Municipality of Utrecht based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "name": "@utrecht/icon",
+  "files": [
+    "dist/",
+    "docs/",
+    "loader/",
+    "*.md"
+  ],
+  "main": "dist/index.css",
+  "scripts": {
+    "build": "pnpm run build:svg && pnpm run build:components",
+    "build:components": "node src/build.js $1 --prefix utrecht-icon --path ../web-component-library-stencil/src/components/generated/",
+    "build:css": "build-css-package",
+    "build:svg": "svgo --recursive --folder ./src/svg --output ./tmp/optimized-svgs --quiet",
+    "clean": "rimraf dist/ tmp/ ../../packages/web-component-library-stencil/src/generated/ ../web-component-library-stencil/src/components/generated/"
+  },
+  "devependencies": {
+    "@utrecht/icon-css": "workspace:*"
+  },
+  "devDependencies": {
+    "@unicode/unicode-15.1.0": "1.5.2",
+    "jsdom": "20.0.3",
+    "lodash": "4.17.21",
+    "minimist": "1.2.8",
+    "svgo": "3.1.0"
+  },
+  "keywords": [
+    "nl-design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "[email protected]:nl-design-system/utrecht.git",
+    "directory": "packages/icon"
+  }
+}

packages/icon/project.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "root": "{workspaceRoot}/packages/icon",
+  "sourceRoot": "{projectRoot}",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/workspace:run-commands",
+      "outputs": [
+        "{projectRoot}/dist",
+        "{workspaceRoot}/packages/web-component-library-stencil/src/components/generated"
+      ],
+      "options": {
+        "command": "npm run build",
+        "cwd": "components/icon",
+        "outputPath": "packages/icon/dist"
+      },
+      "dependsOn": ["^build"]
+    }
+  }
+}

packages/storybook-css/package.json

@@ -93,6 +93,7 @@
     "@utrecht/heading-group-css": "workspace:*",
     "@utrecht/html-content-css": "workspace:*",
     "@utrecht/icon": "workspace:*",
+    "@utrecht/icon-css": "workspace:*",
     "@utrecht/img-css": "workspace:*",
     "@utrecht/index-char-nav-css": "workspace:*",
     "@utrecht/link-button-css": "workspace:*",

packages/storybook-css/src/Icon.stories.tsx

@@ -3,8 +3,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Icon } from '@utrecht/component-library-react';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import readme from '@utrecht/icon/README.md?raw';
 import tokensDefinition from '@utrecht/icon/src/tokens.json';
+import readme from '@utrecht/icon-css/README.md?raw';
 import React from 'react';
 // import { Icon } from '@utrecht/component-library-react';
 import { designTokenStory } from './design-token-story';

packages/storybook-react/package.json

@@ -107,6 +107,7 @@
     "@utrecht/html-content-css": "workspace:*",
     "@utrecht/iban-data-css": "workspace:*",
     "@utrecht/icon": "workspace:*",
+    "@utrecht/icon-css": "workspace:*",
     "@utrecht/img-css": "workspace:*",
     "@utrecht/index-char-nav-css": "workspace:*",
     "@utrecht/link-css": "workspace:*",

packages/storybook-react/src/stories/Icon.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Icon } from '@utrecht/component-library-react/dist/css-module';
 import tokens from '@utrecht/design-tokens/dist/list.mjs';
-import readme from '@utrecht/icon/README.md?raw';
-import tokensDefinition from '@utrecht/icon/src/tokens.json';
+import readme from '@utrecht/icon-css/README.md?raw';
+import tokensDefinition from '@utrecht/icon-css/src/tokens.json';
 import React from 'react';
 import { designTokenStory } from './util.js';