Feat/tilburg config

.stylelintrc.json

@@ -8,13 +8,13 @@
     "scss/at-rule-no-unknown": true,
     "scss/dollar-variable-default": true,
     "scss/dollar-variable-first-in-block": [true, { "ignore": ["comments", "imports"] }],
-    "scss/dollar-variable-pattern": "^(example|utrecht)-[a-z0-9-]+$",
-    "scss/percent-placeholder-pattern": "^(example|utrecht)-[a-z0-9-]+$",
+    "scss/dollar-variable-pattern": "^(tilburg|utrecht)-[a-z0-9-]+$",
+    "scss/percent-placeholder-pattern": "^(tilburg|utrecht)-[a-z0-9-]+$",
     "scss/operator-no-newline-after": null,
     "scss/at-extend-no-missing-placeholder": null,
-    "custom-property-pattern": "^_?(example|denhaag|utrecht)-[a-z0-9-]+$",
-    "selector-class-pattern": "^(example|denhaag|utrecht)-[a-z0-9_-]+$",
-    "keyframes-name-pattern": "^(example|utrecht)-[a-z0-9-]+$",
+    "custom-property-pattern": "^_?(tilburg|denhaag|utrecht)-[a-z0-9-]+$",
+    "selector-class-pattern": "^(tilburg|denhaag|utrecht)-[a-z0-9_-]+$",
+    "keyframes-name-pattern": "^(tilburg|utrecht)-[a-z0-9-]+$",
     "at-rule-no-unknown": null,
     "block-no-empty": [true],
     "color-no-invalid-hex": [true],

package.json

@@ -8,10 +8,6 @@
     "nl-design-system"
   ],
   "private": true,
-  "engines": {
-    "node": "^20",
-    "pnpm": "^8"
-  },
   "workspaces": [
     "./packages/*",
     "./proprietary/*"

packages/components-css/button/index.scss

@@ -3,10 +3,10 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 
-.example-button {
-  background-color: var(--example-button-background-color);
+.tilburg-button {
+  background-color: var(--tilburg-button-background-color);
   border: 0;
-  color: var(--example-button-color);
+  color: var(--tilburg-button-color);
   font-family: system-ui;
   font-size: 1rem;
   padding-block-end: 1ex;

packages/components-react/src/Button.tsx

@@ -7,7 +7,7 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 export const Button = forwardRef(
   ({ children, className, ...restProps }: PropsWithChildren<ButtonProps>, ref: ForwardedRef<HTMLButtonElement>) => {
     return (
-      <button ref={ref} className={clsx('example-button', className)} {...restProps}>
+      <button ref={ref} className={clsx('tilburg-button', className)} {...restProps}>
         {children}
       </button>
     );

packages/storybook/config/ParametersArgsDecorator.tsx

@@ -4,7 +4,7 @@ export const ParametersArgsDecorator: Decorator = (Story, context) => {
   context.parameters['args'] = context.args;
 
   return (
-    <div className="example-theme">
+    <div className="tilburg-theme">
       <Story />
     </div>
   );

packages/storybook/config/preview-head.html

@@ -1 +1,5 @@
-<link rel="icon" type="image/svg+xml" href="favicon.svg" />
+<link rel="preconnect" href="https://cdn.fonts.net">
+<link rel="preconnect" href="https://fonts.bunny.net">
+
+<link href="https://cdn.fonts.net/kit/98d15e86-0ba4-4c49-97a9-a796340ef3f3/98d15e86-0ba4-4c49-97a9-a796340ef3f3.css" rel="stylesheet" />
+<link href="https://fonts.bunny.net/css?family=roboto:500,700" rel="stylesheet" />

packages/storybook/package.json

@@ -20,12 +20,6 @@
     "storybook": "storybook dev --config-dir config/ --port 6006"
   },
   "devDependencies": {
-    "@tilburg/assets": "workspace:*",
-    "@tilburg/components-css": "workspace:*",
-    "@tilburg/design-tokens": "workspace:*",
-    "@tilburg/font": "workspace:*",
-    "@tilburg/web-components-react": "workspace:*",
-    "@tilburg/web-components-stencil": "workspace:*",
     "@storybook/addon-a11y": "8.0.9",
     "@storybook/addon-actions": "8.0.9",
     "@storybook/addon-docs": "8.0.9",
@@ -34,8 +28,16 @@
     "@storybook/addon-viewport": "8.0.9",
     "@storybook/react": "8.0.9",
     "@storybook/react-vite": "8.0.9",
+    "@tilburg/assets": "workspace:*",
+    "@tilburg/components-css": "workspace:*",
+    "@tilburg/design-tokens": "workspace:*",
+    "@tilburg/font": "workspace:*",
+    "@tilburg/web-components-react": "workspace:*",
+    "@tilburg/web-components-stencil": "workspace:*",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
+    "@utrecht/component-library-react": "3.0.1-alpha.33",
+    "@utrecht/components": "3.0.1-alpha.33",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "5.0.5",

packages/storybook/src/button.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# Button
+
+Button component for Tilburg

packages/storybook/src/css-utrecht-button.stories.tsx

@@ -0,0 +1,97 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@utrecht/component-library-react/dist/css-module';
+import readme from './button.md?raw';
+
+const meta = {
+  title: 'CSS Component/Button',
+  id: 'css-utrecht-button',
+  component: Button,
+  argTypes: {
+    children: {
+      name: 'Content',
+      description: 'Button text',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: '',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    bugs: 'https://github.com/nl-design-system/tilburg/labels/component%2Fbutton',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?type=design&node-id=847%3A865&mode=design&t=FsnygCvT6dNHH48s-1',
+    },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultButton: Story = {
+  name: 'Default button',
+  args: {
+    children: 'Label',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?type=design&node-id=153%3A1140&mode=design&t=FsnygCvT6dNHH48s-1',
+    },
+  },
+};
+
+export const PrimaryActionButton: Story = {
+  name: 'Primary action button',
+  args: {
+    appearance: 'primary-action-button',
+    children: 'Label',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?type=design&node-id=153%3A1140&mode=design&t=FsnygCvT6dNHH48s-1',
+    },
+  },
+};
+
+export const SecondaryActionButton: Story = {
+  name: 'Secondary action button',
+  args: {
+    appearance: 'secondary-action-button',
+    children: 'Label',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?type=design&node-id=153%3A1140&mode=design&t=FsnygCvT6dNHH48s-1',
+    },
+  },
+};
+
+export const SubtleButton: Story = {
+  name: 'Subtle button',
+  args: {
+    appearance: 'subtle-button',
+    children: 'Label',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?type=design&node-id=153%3A1140&mode=design&t=FsnygCvT6dNHH48s-1',
+    },
+  },
+};

packages/storybook/src/documentation/introduction.mdx

@@ -1,6 +1,6 @@
 import { Markdown, Meta } from "@storybook/addon-docs";
 import markdown from "./introduction.md?raw";
 
-<Meta title="Example/Intro" />
+<Meta title="Tilburg/Intro" />
 
 <Markdown>{markdown}</Markdown>

packages/storybook/src/documentation/license.mdx

@@ -1,6 +1,6 @@
 import { Markdown, Meta } from "@storybook/addon-docs";
 import markdown from "../../../../LICENSE.md?raw";
 
-<Meta title="Example/Open Source License" />
+<Meta title="Tilburg/Open Source License" />
 
 <Markdown>{markdown}</Markdown>

packages/storybook/src/documentation/notice.mdx

@@ -1,6 +1,6 @@
 import { Markdown, Meta } from "@storybook/addon-docs";
 import markdown from "../../../../NOTICE.md?raw";
 
-<Meta title="Example/Toestemming voor gebruik" />
+<Meta title="Tilburg/Toestemming voor gebruik" />
 
 <Markdown>{markdown}</Markdown>

packages/storybook/src/web-component-button.stories.tsx

@@ -2,10 +2,10 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@tilburg/components-css/button/README.md?raw';
-import { ExampleButton } from '@tilburg/web-components-react';
+import { TilburgButton } from '@tilburg/web-components-react/src';
 import { PropsWithChildren } from 'react';
 
-const Button = ({ children }: PropsWithChildren<{}>) => <ExampleButton>{children}</ExampleButton>;
+const Button = ({ children }: PropsWithChildren<{}>) => <TilburgButton>{children}</TilburgButton>;
 
 const meta = {
   title: 'Web Component/Button',

packages/web-components-stencil/package.json

@@ -13,7 +13,7 @@
   "types": "./dist/types/components.d.ts",
   "collection": "./dist/collection/collection-manifest.json",
   "collection:main": "./dist/collection/collection-manifest.json",
-  "unpkg": "./dist/example/example.esm.js",
+  "unpkg": "./dist/tilburg/tilburg.esm.js",
   "files": [
     "dist/",
     "loader/"

packages/web-components-stencil/src/button/stencil.tsx

@@ -6,15 +6,15 @@
 import { Component, h } from '@stencil/core';
 
 @Component({
-  tag: 'example-button',
+  tag: 'tilburg-button',
   styleUrl: 'index.scss',
   shadow: true,
 })
 export class Button {
   render() {
     return (
-      <button class="example-button" type="button">
-        <span class="example-button__text">
+      <button class="tilburg-button" type="button">
+        <span class="tilburg-button__text">
           <slot></slot>
         </span>
       </button>

packages/web-components-stencil/stencil.config.ts

@@ -3,7 +3,7 @@ import { reactOutputTarget } from '@stencil/react-output-target';
 import { sass } from '@stencil/sass';
 
 export const config: Config = {
-  namespace: 'example',
+  namespace: 'tilburg',
   srcDir: './src/',
   outputTargets: [
     {

proprietary/.npmpackagejsonlintrc.json

@@ -1,5 +1,6 @@
 {
   "rules": {
-    "valid-values-license": ["error", ["SEE LICENSE IN LICENSE.md"]]
+    "valid-values-license": ["error", ["SEE LICENSE IN LICENSE.md"]],
+    "valid-values-name-scope": ["tilburg"]
   }
 }

proprietary/design-tokens/src/brand/tilburg/border-radius.tokens.json

@@ -0,0 +1,22 @@
+{
+  "tilburg": {
+    "border-radius": {
+      "sm": {
+        "value": "4px",
+        "type": "borderRadius"
+      },
+      "md": {
+        "value": "8px",
+        "type": "borderRadius"
+      },
+      "lg": {
+        "value": "16px",
+        "type": "borderRadius"
+      },
+      "round": {
+        "value": "999px",
+        "type": "borderRadius"
+      }
+    }
+  }
+}

proprietary/design-tokens/src/brand/tilburg/border-width.tokens.json

@@ -0,0 +1,18 @@
+{
+  "tilburg": {
+    "border-width": {
+      "sm": {
+        "value": "1px",
+        "type": "borderWidth"
+      },
+      "md": {
+        "value": "2px",
+        "type": "borderWidth"
+      },
+      "lg": {
+        "value": "4px",
+        "type": "borderWidth"
+      }
+    }
+  }
+}