Merge branch 'main' into fix/card-nested-anchors

nl-design-system · Jan 15, 2025 · b2f745c · b2f745c
2 parents 30530e8 + 86ca6ab
commit b2f745c
Show file tree

Hide file tree

Showing 28 changed files with 1,119 additions and 107 deletions.
diff --git a/packages/components-css/package.json b/packages/components-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-css",
-  "version": "1.0.0-alpha.114",
+  "version": "1.0.0-alpha.116",
   "type": "module",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",

diff --git a/packages/components-css/src/pre-heading/index.scss b/packages/components-css/src/pre-heading/index.scss
@@ -11,11 +11,6 @@
 }
 
 .rhc-pre-heading {
-  --utrecht-pre-heading-color: var(--utrecht-heading-1-color, inherit);
-  --utrecht-pre-heading-font-weight: var(--rhc-font-weight-regular, inherit);
-  --utrecht-pre-heading-font-size: var(--rhc-font-size-xs-desktop, inherit);
-  --utrecht-pre-heading-line-height: var(--rhc-line-height-md, inherit);
-
   grid-area: preheading;
 }
 

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-react",
-  "version": "1.0.0-alpha.90",
+  "version": "1.0.0-alpha.92",
   "author": "Community for NL Design System",
   "description": "React component library for the Rijkshuisstijl Community repository, based on the NL Design System architecture",
   "license": "EUPL-1.2",

diff --git a/packages/components-react/src/FileInput.tsx b/packages/components-react/src/FileInput.tsx
@@ -61,7 +61,7 @@ export const FileInput = ({
       <div className="rhc-file-input__button-feedback-container">
         <Button
           appearance={buttonAppearance ?? 'secondary-action-button'}
-          onClick={() => inputElement?.current.click()}
+          onClick={() => inputElement!.current.click()}
         >
           {buttonText}
         </Button>

diff --git a/packages/font/package.json b/packages/font/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/font",
-  "version": "1.0.0-alpha.114",
+  "version": "1.0.0-alpha.116",
   "author": "Community for NL Design System",
   "description": "Font assets",
   "license": "EUPL-1.2",

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -43,6 +43,7 @@
     "@rijkshuisstijl-community/logius-design-tokens": "workspace:*",
     "@rijkshuisstijl-community/mijnoverheid-design-tokens": "workspace:*",
     "@rijkshuisstijl-community/rivm-design-tokens": "workspace:*",
+    "@rijkshuisstijl-community/web-components": "workspace:*",
     "@rijkshuisstijl-community/web-components-react": "workspace:*",
     "@rijkshuisstijl-community/web-components-stencil": "workspace:*",
     "@storybook/addon-a11y": "8.4.7",
@@ -59,6 +60,7 @@
     "@storybook/test-runner": "0.21.0",
     "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "8.4.7",
+    "@storybook/web-components": "8.4.7",
     "@tabler/icons-react": "3.23.0",
     "@types/react": "19.0.1",
     "@types/react-dom": "19.0.1",

diff --git a/packages/storybook/src/web-components/accordion.stories.tsx b/packages/storybook/src/web-components/accordion.stories.tsx
@@ -0,0 +1,89 @@
+import { AccordionWebComponent } from '@rijkshuisstijl-community/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import readme from '@utrecht/components/accordion/README.md?raw';
+import { mergeMarkdown } from '../../helpers/merge-markdown';
+
+AccordionWebComponent.define();
+
+const meta = {
+  title: 'Web Components/Accordion',
+  id: 'rhc-accordion-web',
+  component: 'rhc-accordion',
+  argTypes: {
+    appearance: {
+      description: 'Appearance of the component',
+      type: { name: 'string' },
+      control: { type: 'select' },
+      options: ['default', 'utrecht'],
+    },
+    heading: {
+      type: { name: 'string' },
+      control: 'text',
+      description: 'Heading for the accordion, also needs a headingLevel',
+    },
+    headingLevel: {
+      name: 'Heading Level',
+      type: { name: 'string' },
+      control: 'select',
+      options: [1, 2, 3, 4, 5, 6],
+      description: 'Heading level for the accordion, also needs a heading text',
+    },
+    icon: {
+      name: 'icon',
+      description: 'Icon at the start',
+      control: { type: 'select' },
+      options: ['default', 'delta-omlaag'],
+      mapping: {
+        default: '',
+      },
+    },
+    sections: {
+      control: 'object',
+      description: 'Array of sections in the accordion',
+    },
+  },
+  args: {
+    icon: 'default',
+    heading: '',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    tokensPrefix: 'utrecht-accordion',
+    status: {
+      type: 'STABLE',
+    },
+    docs: {
+      description: {
+        // TODO: restructure this, but not until readme is correctly structurized in the Utrecht documentation source
+        component: mergeMarkdown([readme]),
+      },
+    },
+    // TODO: add Figma, GitHub and NL DesignSystem links
+    componentOrigin:
+      'Dit component is overgenomen van de Gemeente Utrecht, met styling van de Rijkshuisstijl Community.',
+  },
+} as Meta<typeof AccordionWebComponent>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    sections: JSON.stringify([
+      {
+        label: 'Lorem ipsum 1',
+        body: `Lorem ipsum dolor sit amet.`,
+        expanded: true,
+      },
+      {
+        label: 'Lorem ipsum 2',
+        body: `Lorem ipsum dolor sit amet.`,
+        expanded: false,
+      },
+      {
+        label: 'Lorem ipsum 3',
+        body: `Lorem ipsum dolor sit amet.`,
+        expanded: false,
+      },
+    ]),
+  },
+} as StoryObj<typeof meta>;
diff --git a/packages/storybook/src/web-components/hero.stories.tsx b/packages/storybook/src/web-components/hero.stories.tsx
@@ -0,0 +1,121 @@
+import { HeroWebComponent } from '@rijkshuisstijl-community/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+HeroWebComponent.define();
+
+const meta = {
+  title: 'Web Components/Hero',
+  id: 'rhc-hero-web',
+  component: 'rhc-hero',
+  argTypes: {
+    aspectRatio: {
+      name: 'Aspect Ratio',
+      type: { name: 'string' },
+      control: 'select',
+      options: ['16 / 9', '1 / 1', '4 / 3'],
+      table: {
+        category: 'Attributes',
+        defaultValue: { summary: '16 / 9' },
+      },
+    },
+    heading: {
+      name: 'Heading Text',
+      type: { name: 'string' },
+      control: 'text',
+      table: {
+        category: 'Attributes',
+      },
+    },
+    heroMessage: {
+      name: 'Show Hero Message',
+      type: { name: 'string' },
+      control: 'select',
+      options: ['true', 'false'],
+      table: {
+        category: 'Attributes',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    imageAlt: {
+      name: 'Image Alt Text',
+      type: { name: 'string' },
+      control: 'text',
+      table: {
+        category: 'Attributes',
+      },
+    },
+    subHeading: {
+      name: 'Sub Heading Text',
+      type: { name: 'string' },
+      control: 'text',
+      table: {
+        category: 'Attributes',
+      },
+    },
+    textAlign: {
+      name: 'Text Alignment',
+      type: { name: 'string' },
+      control: 'select',
+      options: ['start', 'end'],
+      table: {
+        category: 'Attributes',
+        defaultValue: { summary: 'start' },
+      },
+    },
+    borderRadiusCorner: {
+      name: 'Border Radius Corner',
+      type: { name: 'string' },
+      control: 'select',
+      options: ['start-start', 'start-end', 'end-start', 'end-end'],
+      table: {
+        category: 'Attributes',
+        defaultValue: { summary: 'null' },
+      },
+    },
+    headingLevel: {
+      name: 'Heading Level',
+      type: { name: 'string' },
+      control: 'select',
+      options: [1, 2, 3, 4, 5, 6],
+      table: {
+        category: 'Attributes',
+        defaultValue: { summary: '3' },
+      },
+    },
+    imageSrc: {
+      name: 'Image Source URL',
+      type: { name: 'string' },
+      control: 'text',
+      table: {
+        category: 'Attributes',
+      },
+    },
+  },
+  args: {
+    aspectRatio: '16 / 9',
+    heading: 'heading text',
+    heroMessage: 'true',
+    imageAlt: 'image alt text',
+    subHeading: 'sub heading text',
+    textAlign: 'start',
+    borderRadiusCorner: 'start-start',
+    headingLevel: 3,
+    imageSrc:
+      'https://raw.githubusercontent.com/nl-design-system/rijkshuisstijl-community/main/proprietary/assets/src/placeholder.jpg',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    status: {
+      type: 'UNSTABLE',
+    },
+    docs: {
+      description: {
+        component: 'Hero',
+      },
+    },
+  },
+} as Meta<typeof HeroWebComponent>;
+
+export default meta;
+
+export const Default = {} as StoryObj<typeof meta>;
diff --git a/packages/web-components-react/package.json b/packages/web-components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/web-components-react",
-  "version": "1.0.0-alpha.96",
+  "version": "1.0.0-alpha.98",
   "author": "Community for NL Design System",
   "description": "React web components bundle based on the NL Design System architecture",
   "license": "EUPL-1.2",

diff --git a/packages/web-components-stencil/package.json b/packages/web-components-stencil/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/web-components-stencil",
-  "version": "1.0.0-alpha.96",
+  "version": "1.0.0-alpha.98",
   "author": "Community for NL Design System",
   "description": "Stencil web components bundle based on the NL Design System architecture",
   "license": "EUPL-1.2",

diff --git a/packages/web-components/index.html b/packages/web-components/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Web Component Test</title>
+    <script type="module" src="./dist/index.mjs"></script>
+    <script type="module">
+      import { HeroWebComponent } from './dist/index.mjs';
+      HeroWebComponent.define();
+    </script>
+    <link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/design-tokens/dist/index.css" />
+  </head>
+  <body class="rhc-theme">
+    <rhc-hero heading="heading wc" />
+  </body>
+</html>
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@rijkshuisstijl-community/web-components",
+  "version": "1.0.1-alpha.1",
+  "author": "Community for NL Design System",
+  "description": "Generic web components bundle based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "keywords": [
+    "nl-design-system"
+  ],
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "unpkg": "dist/yyyy/yyyy.esm.js",
+  "files": [
+    "dist/"
+  ],
+  "repository": {
+    "type": "git+ssh",
+    "url": "[email protected]:nl-design-system/rijkshuisstijl-community.git",
+    "directory": "packages/web-components"
+  },
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "vite build",
+    "clean": "rimraf dist/",
+    "start": "vite"
+  },
+  "devDependencies": {
+    "@rijkshuisstijl-community/components-css": "workspace:*",
+    "@rijkshuisstijl-community/components-react": "workspace:*",
+    "@rijkshuisstijl-community/design-tokens": "workspace:*",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
+    "@utrecht/component-library-css": "7.0.0",
+    "@vitejs/plugin-react": "4.3.4",
+    "rimraf": "6.0.1",
+    "tslib": "2.8.1",
+    "typescript": "5.7.2",
+    "vite": "6.0.3",
+    "vite-plugin-dts": "4.3.0",
+    "vite-plugin-static-copy": "2.2.0"
+  },
+  "dependencies": {
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
+  }
+}