Card component

.github/dependabot.yml

@@ -14,4 +14,4 @@ updates:
     versioning-strategy: "increase-if-necessary"
     open-pull-requests-limit: 20
     reviewers:
-      - "nl-design-system/kernteam-sysadmin"
+      - "nl-design-system/kernteam-dependabot"

README.md

@@ -1,81 +1,18 @@
 <!-- @license CC0-1.0 -->
 
-# Example Design System
+# nldesignsystem.nl-storybook
 
-This design system is based on the NL Design System architecture.
+This is template of the page ["Kleuren"](https://nldesignsystem.nl/richtlijnen/stijl/kleuren)
+made with web-components where possible. this template is made in storybook.
 
-For more info about the NL Design System and learn about things happening in our open source community, join the `#nl-design-system` Slack via [praatmee.codefor.nl](https://praatmee.codefor.nl)!
-
----
-
-✂ In your own repository: **remove the "Getting started" section below!**
-
----
-
-## Getting started with the NL Design System template
-
-This template contains all relevant linting rules used by the NL Design System repository.
-It also contains the Storybook setup with two example components and two example general documentation page.
-Feel free to add or modify those documentation pages and use the example components as an initial template to create your own storybook components.
+!note: this is not the official source code of nldesignsystem.nl, you can find it here <https://github.com/nl-design-system/documentatie> !
 
-### Install prerequisites
-
-You need to have the following tools installed to run Storybook locally:
-
-- Git
-- [Node.js and npm](https://nodejs.org/en/)
-- `pnpm`, `npm install -g pnpm`
-
-### Customize organization settings
-
-1. Choose a prefix for your organisation. For example: the main NL Design System uses `nl-`, The Hague uses `denhaag-`, and you can choose something unique for you to use.
-2. Modify `.stylelintrc.json` by replacing the prefix `example` with the prefix you have chosen, in the following rules: `custom-property-pattern`, `selector-class-pattern`, `keyframes-name-pattern`, `scss/dollar-variable-pattern` and `scss/percent-placeholder-pattern`.
-3. Choose and register an npm organisation on [npmjs.com](https://www.npmjs.com/org/create), if you haven't already. This is very important to keep your project secure. The core NL Design System uses `@nl-design-system/`, and you can choose something for yourself. This prevents others from adding their code to your teams codebase.
-4. Modify all `package.json` files to use your npm organisation scope. Don't forget the locally linked packages under `devDependencies`.
-5. Modify `.npmpackagejsonlintrc.json` to require your organisation scope in package names, by configuring the `valid-values-name-scope` property.
-6. Modify the imports in `/packages/storybook/config/preview.tsx` and `packages/web-components-stencil/src/button/index.scss` to use your prefix.
+For more info about the NL Design System and learn about things happening in our open source community, join the `#nl-design-system` Slack via [praatmee.codefor.nl](https://praatmee.codefor.nl)!
 
-### Run storybook
+## Run storybook
 
 - Install dependencies: `pnpm install`
-- Run storybook: `npm run storybook`
-
-### Change the theme of your storybook to match your brand
-
-In `.storybook/customTheme.js` the theme used by NL Design System can be found. By changing those properties one can style the storybook to match ones brand. Checkout [https://storybook.js.org/docs/react/configure/theming](https://storybook.js.org/docs/react/configure/theming) to learn more about all the possible configurations to brand this storybook.
-
-### Adding UX and other documentation without a component implementation
-
-1. In `src/demo-empty-component` an example story of a documentation first (or documentation only) component can be found.
-2. Copy this folder
-3. Rename to match your component
-   - The folder
-   - The `x.stories.mdx` to `component-name.stories.mdx`
-   - The title of the `Meta` component in `component-name.stories.mdx`
-4. Add the UX guidelines in`README.md`
-5. Optionally add the component specific accessibility or content guidelines in `docs/accessibility-guidelines` or `docs/content-guidelines`.
-6. Optionally add the Figma component in `component-name.stories.mdx` by adding part of the Figma url to the Figma component `<Figma title="Link" url="file/..." />`
-
-### Adding design tokens
-
-Add global tokens to `/brand.css`. Add tags to make them appear in the Storybook Design token addon. For example `@tokens Colors` and `@presenter Color`. See [https://storybook.js.org/addons/@tommyem/storybook-design-token](https://storybook.js.org/addons/@tommyem/storybook-design-token) for more details.
-
-### Adding the component implementation to storybook
-
-In `src/demo-link-component` an example story and web-component can be found. All steps below are represented in this `demo-link.stories.mdx` example.
-To add a component implementation to storybook, we use the `<component-name>-stories.mdx` which already contains the documentation pages or create one with placeholder documentation by following step 1-3 from the `Adding UX and other documentation without a component implementation` chapter.
-
-- Create a component template function that takes variable arguments. If an argument might contain childnodes, use the `sanatize` package to prevent unsafe content and injections. Place this `Template` function above the `Meta` component
-- Declare a story for each component variation and bind the template
-- Declare the possible inputs, with types and a description in the `argTypes` property of the `Meta` component in `stories.mdx`.
-- Add an `Argstable` component in your `stories.mdx`
-- Optionally add a different `status` to the `Meta` parameters. The options and colors can be found in `storybook/config/preview.tsx`
-
----
-
-✂ In your own repository: **remove the "Getting started" section above!**
-
----
+- Run storybook: `pnpm run storybook`
 
 ## Code of Conduct
 

packages/components-react/package.json

@@ -56,6 +56,7 @@
     "@types/lodash.chunk": "4.2.9",
     "@types/react": "18.2.39",
     "@types/testing-library__jest-dom": "5.14.9",
+    "@utrecht/component-library-react": "2.0.0",
     "@vitejs/plugin-react": "4.2.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",

packages/components-react/src/Card.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Heading2, Link, Paragraph } from '@utrecht/component-library-react';
+import clsx from 'clsx';
+import React, { FC, HTMLAttributes } from 'react';
+import './Card.css';
+
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  title: string;
+  description: string;
+  link: {
+    href: string;
+  };
+}
+
+export const Card: FC<CardProps> = ({ description, title, link: { href }, ...props }) => {
+  const linkRef = React.useRef<HTMLAnchorElement>(null);
+
+  return (
+    <div {...props} className={clsx('utrecht-card', props.className)} onClick={() => linkRef.current?.click()}>
+      <div className={'utrecht-card__content'}>
+        <Heading2 className="utrecht-card__title">
+          {title}
+          <Paragraph className="utrecht-card__body">{description}</Paragraph>
+          <Link ref={linkRef} href={href} className={'utrecht-link utrecht-link--html-a'}></Link>
+        </Heading2>
+      </div>
+    </div>
+  );
+};
+
+Card.displayName = 'Card';

packages/storybook/src/Template/kernteam-kleuren-template.css

@@ -3,4 +3,14 @@
   --utrecht-page-content-padding-block-end: 32px;
   --utrecht-page-padding-inline-start: 32px;
   --utrecht-page-padding-inline-end: 32px;
+
+  max-inline-size: 95ch;
+}
+
+.utrecht-heading-1 {
+  --utrecht-heading-1-margin-block-start: 16px --utrecht-heading-1-margin-block-end: 16px;
+}
+
+.utrecht-unordered-list {
+  max-inline-size: 95ch;
 }