7 |
9 |
--------------------------------------------------------------------------------
/packages/storybook/src/documentation/readme.mdx:
--------------------------------------------------------------------------------
1 | import { Markdown, Meta } from '@storybook/addon-docs/blocks';
2 | import markdown from '../../../../README.md?raw';
3 |
4 |
5 |
6 | -
8 |
2 |
4 | {{ organisation }}
6 | @if (subtitle) { 7 |{{ subtitle }}
8 | } 9 |-
3 | {% for item in items %}
4 | {% include '@rhc/OrderedListItem.twig' with {
5 | content: item
6 | } %}
7 | {% endfor %}
8 |
10 |
12 |
--------------------------------------------------------------------------------
/packages/components-angular/src/navbar-item/navbar-item.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'li[rhc-navbar-item]',
5 | imports: [],
6 | templateUrl: './navbar-item.component.html',
7 | host: {
8 | '[class.rhc-nav-bar__item]': 'true',
9 | },
10 | })
11 | export class NavbarItemComponent {
12 | @Input({ required: true }) href!: string;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/storybook/src/components-css/article.stories.tsx:
--------------------------------------------------------------------------------
1 | import reactMeta from '../components-react/article.stories';
2 | import * as ReactStories from '../components-react/article.stories';
3 | import { mergeCssMeta } from '../helpers/mergeCssMeta';
4 |
5 | export default {
6 | ...mergeCssMeta(reactMeta),
7 | title: 'Article',
8 | id: 'css-article',
9 | };
10 |
11 | export const Default = ReactStories.Default;
12 |
--------------------------------------------------------------------------------
/packages/components-react/src/Drawer.tsx:
--------------------------------------------------------------------------------
1 | import { Drawer as UtrechtDrawer } from '@utrecht/component-library-react';
2 | import React from 'react';
3 |
4 | export { type DrawerProps } from '@utrecht/component-library-react';
5 |
6 | export const Drawer: React.FC
13 |
15 |
--------------------------------------------------------------------------------
/packages/components-angular/src/action-group/action-group.component.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @license EUPL-1.2
3 | * Copyright (c) 2025 Community for NL Design System
4 | */
5 |
6 | import { Component, Input } from '@angular/core';
7 |
8 | @Component({
9 | selector: 'rhc-action-group',
10 | imports: [],
11 | templateUrl: './action-group.component.html',
12 | })
13 | export class ActionGroupComponent {
14 | @Input() direction: 'column' | 'row' | 'column-stretch' = 'row';
15 | }
16 |
--------------------------------------------------------------------------------
/packages/storybook/src/components-css/orderedListItem.stories.tsx:
--------------------------------------------------------------------------------
1 | import reactMeta from '../components-react/orderedListItem.stories';
2 | import * as ReactStories from '../components-react/orderedListItem.stories';
3 | import { mergeCssMeta } from '../helpers/mergeCssMeta';
4 |
5 | export default {
6 | ...mergeCssMeta(reactMeta),
7 | title: 'Ordered List/Ordered List Item',
8 | id: 'css-ordered-list-item',
9 | };
10 |
11 | export const Default = ReactStories.Default;
12 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "node_modules/@lerna-lite/cli/schemas/lerna-schema.json",
3 | "npmClient": "pnpm",
4 | "version": "independent",
5 | "useWorkspaces": true,
6 | "command": {
7 | "publish": {},
8 | "version": {
9 | "allowBranch": ["main"],
10 | "conventionalCommits": true,
11 | "exact": true,
12 | "message": "docs(release): design system packages\n\nskip-checks: true",
13 | "syncWorkspaceLock": true
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/components-angular/src/data-summary-item/data-summary-item.component.html:
--------------------------------------------------------------------------------
1 | - `
8 | - **list item**: uitgeschreven van van [HTML `
- `](https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element). Ook [in ARIA is het `role="listitem"`](https://www.w3.org/TR/wai-aria-1.2/#listitem)
9 |
--------------------------------------------------------------------------------
/packages/components-angular/src/logo/logo.component.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { Component, Input } from '@angular/core';
3 |
4 | @Component({
5 | selector: 'figure[rhc-logo]',
6 | imports: [CommonModule],
7 | templateUrl: './logo.component.html',
8 | host: { '[class.rhc-logo]': 'true' },
9 | })
10 | export class LogoComponent {
11 | @Input({ required: true }) organisation!: string;
12 | @Input({ required: false }) subtitle?: string | null;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/components-angular/src/unordered-list/unordered-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ul[rhc-unordered-list]',
5 | imports: [],
6 | templateUrl: './unordered-list.component.html',
7 | host: {
8 | '[class.utrecht-unordered-list]': 'true',
9 | '[class.utrecht-unordered-list--nested]': 'nested',
10 | },
11 | })
12 | export class UnorderedListComponent {
13 | @Input() nested?: boolean = false;
14 | }
15 |
--------------------------------------------------------------------------------
/packages/storybook/src/components-css/blockquote.stories.tsx:
--------------------------------------------------------------------------------
1 | import reactMeta from '../components-react/blockquote.stories';
2 | import * as ReactStories from '../components-react/blockquote.stories';
3 | import { mergeCssMeta } from '../helpers/mergeCssMeta';
4 |
5 | export default {
6 | ...mergeCssMeta(reactMeta),
7 | title: 'Blockquote',
8 | id: 'css-blockquote',
9 | };
10 |
11 | export const Default = ReactStories.Default;
12 | export const Attribution = ReactStories.Attribution;
13 |
--------------------------------------------------------------------------------
/packages/storybook/src/components-css/link-list.stories.tsx:
--------------------------------------------------------------------------------
1 | import reactMeta from '../components-react/link-list.stories';
2 | import * as ReactStories from '../components-react/link-list.stories';
3 | import { mergeCssMeta } from '../helpers/mergeCssMeta';
4 |
5 | export default {
6 | ...mergeCssMeta(reactMeta),
7 | title: 'Link List',
8 | id: 'css-link-list',
9 | };
10 |
11 | export const Default = ReactStories.Default;
12 | export const ColumnsLayout = ReactStories.ColumnsLayout;
13 |
--------------------------------------------------------------------------------
/packages/storybook/src/components-css/page-number-navigation.stories.tsx:
--------------------------------------------------------------------------------
1 | import reactMeta from '../components-react/page-number-navigation.stories';
2 | import * as ReactStories from '../components-react/page-number-navigation.stories';
3 | import { mergeCssMeta } from '../helpers/mergeCssMeta';
4 |
5 | export default {
6 | ...mergeCssMeta(reactMeta),
7 | title: 'Page Number Navigation',
8 | id: 'css-page-number-navigation',
9 | };
10 |
11 | export const Default = ReactStories.Default;
12 |
--------------------------------------------------------------------------------
/packages/storybook/src/components-react/drawer.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # Rijkshuisstijl Community Drawer component
4 |
5 | ## Usage
6 |
7 | Dit component is te gebruiken door de `Drawer` te importeren. Default is het `open=false` en is het aligned op `inline-start`.
8 |
9 | ```tsx
10 | import { Drawer } from '@rijkshuisstijl-community/components-react';
11 |
12 |
; 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/storybook/src/templates/collage.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from '@storybook/react-vite'; 2 | import Page from './collage'; 3 | import './globals.css'; 4 | 5 | const meta: Meta = { 6 | title: 'Collage', 7 | id: 'rhc-templates-collage', 8 | component: Page, 9 | parameters: { 10 | layout: 'fullscreen', 11 | isPage: true, 12 | }, 13 | }; 14 | export default meta; 15 | 16 | type Story = StoryObj ; 17 | 18 | export const Default: Story = {}; 19 | -------------------------------------------------------------------------------- /packages/storybook/src/templates/details.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from '@storybook/react-vite'; 2 | import Page from './details'; 3 | import './globals.css'; 4 | 5 | const meta: Meta = { 6 | title: 'Details', 7 | id: 'rhc-templates-details', 8 | component: Page, 9 | parameters: { 10 | layout: 'fullscreen', 11 | isPage: true, 12 | }, 13 | }; 14 | export default meta; 15 | 16 | type Story = StoryObj ; 17 | 18 | export const Default: Story = {}; 19 | -------------------------------------------------------------------------------- /packages/components-react/src/Figure.tsx: -------------------------------------------------------------------------------- 1 | export { FigureCaption, type FigureCaptionProps } from '@utrecht/component-library-react'; 2 | import { Figure as UtrechtFigure, FigureProps as UtrechtFigureProps } from '@utrecht/component-library-react'; 3 | import { PropsWithChildren } from 'react'; 4 | export type FigureProps = UtrechtFigureProps; 5 | 6 | export const Figure = ({ children, ...props }: PropsWithChildren ) => { 7 | return {children} ; 8 | }; 9 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/number-badge.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/number-badge.stories'; 2 | import * as ReactStories from '../components-react/number-badge.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Number Badge', 8 | id: 'css-number-badge', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const WithValue = ReactStories.WithValue; 13 | -------------------------------------------------------------------------------- /packages/storybook/src/components-react/dot-badge.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Rijkshuisstijl Community Dot Badge component 4 | 5 | ## Usage 6 | 7 | Dit component is te gebruiken door de `DotBadge` te importeren. De component heeft één (verplichte) property genaamd `label`. De tekst die hierin wordt gezet is alleen zichtbaar voor screen readers. 8 | 9 | ```tsx 10 | import { DotBadge } from '@rijkshuisstijl-community/components-react'; 11 | 12 |; 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/storybook/src/templates/rich-text.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from '@storybook/react-vite'; 2 | import Page from './rich-text'; 3 | import './globals.css'; 4 | 5 | const meta: Meta = { 6 | title: 'Rich Text', 7 | id: 'rhc-templates-rich-text', 8 | component: Page, 9 | parameters: { 10 | layout: 'fullscreen', 11 | isPage: true, 12 | }, 13 | }; 14 | export default meta; 15 | 16 | type Story = StoryObj ; 17 | 18 | export const Default: Story = {}; 19 | -------------------------------------------------------------------------------- /packages/storybook/src/types/drupal-attribute.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-unused-vars */ 2 | declare module 'drupal-attribute' { 3 | export default class DrupalAttribute { 4 | constructor(data?: Record ; 17 | 18 | export const Default: Story = {}; 19 | -------------------------------------------------------------------------------- /packages/components-css/src/breadcrumb-nav/index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license EUPL-1.2 3 | * Copyright (c) 2021 Community for NL Design System 4 | */ 5 | 6 | .utrecht-breadcrumb-nav { 7 | &__link { 8 | &--current { 9 | --utrecht-link-text-decoration: none; 10 | 11 | color: var(--rhc-breadcrumb-nav-link-current-color); 12 | } 13 | 14 | &--active { 15 | --utrecht-link-text-decoration: var(--utrecht-breadcrumb-nav-link-active-text-decoration, underline); 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/components-css/src/link/index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license EUPL-1.2 3 | * Copyright (c) 2021 Community for NL Design System 4 | */ 5 | 6 | @use "mixin"; 7 | @use "../../node_modules/@nl-design-system-candidate/link-css/dist/link.css"; 8 | 9 | .nl-link:any-link { 10 | @include mixin.rhc-link--any-link; 11 | } 12 | 13 | .nl-link .utrecht-icon, 14 | .rhc-link__icon { 15 | @include mixin.rhc-link__icon; 16 | } 17 | 18 | .nl-link:any-link.rhc-link--inline { 19 | @include mixin.rhc-link--inline; 20 | } 21 | -------------------------------------------------------------------------------- /packages/components-css/src/rounded-corner/_mixin.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | 3 | $rhc-rounded-corner-positions: ("start-start", "start-end", "end-start", "end-end") !default; 4 | $rhc-rounded-corner-sizes: ("sm", "md", "lg") !default; 5 | 6 | @mixin rhc-rounded-corner { 7 | overflow: var(--rhc-rounded-corner-overflow); 8 | } 9 | 10 | @mixin rhc-reset-border-radius { 11 | border-end-end-radius: 0; 12 | border-end-start-radius: 0; 13 | border-start-end-radius: 0; 14 | border-start-start-radius: 0; 15 | } 16 | -------------------------------------------------------------------------------- /packages/storybook-tooling/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Rijkshuisstijl Community - Storybook tooling 4 | 5 | In deze package is verschillende tooling beschikbaar die gebruikt wordt binnen de Storybook omgeving van de Rijkshuisstijl Community. 6 | 7 | De package is bedoeld voor intern gebruik, maar beschikbaar gesteld aan de community. 8 | 9 | Deze package is onderdeel van het [Rijkshuisstijl Community](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/README.md) project. 10 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/data-summary-item.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/data-summary-item.stories'; 2 | import * as ReactStories from '../components-react/data-summary-item.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Data Summary Item', 8 | id: 'css-data-summary-item', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const Row = ReactStories.Row; 13 | -------------------------------------------------------------------------------- /apps/rhc-templates/src/app/mijn-omgeving/page.tsx: -------------------------------------------------------------------------------- 1 | import PageContent from '@rijkshuisstijl-community/storybook/src/templates/mijn-omgeving'; 2 | import '@rijkshuisstijl-community/storybook/src/templates/globals.css'; 3 | import type { Metadata } from 'next'; 4 | 5 | export const metadata: Metadata = { 6 | title: 'Mijn Omgeving', 7 | description: 'Mijn Omgeving template voor de Rijkshuisstijl Community', 8 | }; 9 | 10 | const Page = () => { 11 | return ; 12 | }; 13 | 14 | export default Page; 15 | -------------------------------------------------------------------------------- /packages/components-angular/src/link-list-link/link-list-link.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'a[rhc-link-list-link]', 5 | imports: [], 6 | templateUrl: './link-list-link.component.html', 7 | host: { 8 | '[class.utrecht-link-list__link]': 'true', 9 | '[class.utrecht-link]': 'true', 10 | '[utrecht-link--html-a]': 'true', 11 | }, 12 | }) 13 | export class LinkListLinkComponent { 14 | @Input({ required: true }) href!: string; 15 | } 16 | -------------------------------------------------------------------------------- /packages/storybook/src/components-react/accordion-usage.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Usage 4 | 5 | ```tsx 6 | import { AccordionProvider } from '@rijkshuisstijl-community/components/react'; 7 | 8 | ; 24 | ``` 25 | -------------------------------------------------------------------------------- /packages/components-react/src/SideNav.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import { HTMLAttributes, Ref } from 'react'; 3 | 4 | export interface SideNavProps extends HTMLAttributes { 5 | ref?: Ref ; 6 | } 7 | 8 | export const SideNav = ({ ref, className, children, ...restProps }: SideNavProps) => { 9 | return ( 10 | 13 | ); 14 | }; 15 | 16 | SideNav.displayName = 'SideNav'; 17 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/navigation-list.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/navigation-list.stories'; 2 | import * as ReactStories from '../components-react/navigation-list.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Navigation List', 8 | id: 'css-navigation-list', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const SmallContainer = ReactStories.SmallContainer; 13 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/unorderedListItem.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/unorderedListItem.stories'; 2 | import * as ReactStories from '../components-react/unorderedListItem.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Unordered List/Unordered List Item', 8 | id: 'css-unordered-list-item', 9 | }; 10 | 11 | export const DefaultUnorderedListItem = ReactStories.DefaultUnorderedListItem; 12 | -------------------------------------------------------------------------------- /packages/components-css/src/link-list-card/index.scss: -------------------------------------------------------------------------------- 1 | .rhc-link-list-card { 2 | background-color: var(--rhc-link-list-card-background-color); 3 | display: flex; 4 | flex-direction: column; 5 | gap: var(--rhc-link-list-card-row-gap); 6 | padding-block-end: var(--rhc-link-list-card-padding-block-end); 7 | padding-block-start: var(--rhc-link-list-card-padding-block-start); 8 | padding-inline-end: var(--rhc-link-list-card-padding-inline-end); 9 | padding-inline-start: var(--rhc-link-list-card-padding-inline-start); 10 | } 11 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/orderedList.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/orderedList.stories'; 2 | import * as ReactStories from '../components-react/orderedList.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Ordered List', 8 | id: 'css-ordered-list', 9 | }; 10 | 11 | export const DefaultOrderedList = ReactStories.DefaultOrderedList; 12 | export const NestedOrderedList = ReactStories.NestedOrderedList; 13 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore 3rd party files 2 | node_modules/ 3 | vendor/ 4 | 5 | # Ignore generated files 6 | .angular/ 7 | build/ 8 | coverage/ 9 | dist/ 10 | tmp/ 11 | CHANGELOG.md 12 | 13 | # The indentation of dependency JSON files should only be updated by `yarn` and 14 | # `npm` commands, so dependency automation scripts (such as Dependabot and 15 | # Snyk) automatically use the correct indentation. 16 | package-lock.json 17 | yarn.lock 18 | pnpm-lock.yaml 19 | 20 | # Ignore files that are edited from Figma 21 | figma.tokens.json 22 | -------------------------------------------------------------------------------- /packages/components-react/src/Article.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render, screen } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { Article } from './Article'; 5 | 6 | describe('Article testcases', () => { 7 | it('should render successfully', () => { 8 | render(); 9 | const article = screen.getByRole('article'); 10 | expect(article).toBeInTheDocument(); 11 | }); 12 | }); 13 | 14 | afterEach(() => cleanup()); 15 | -------------------------------------------------------------------------------- /packages/storybook-tooling/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @rijkshuisstijl-community/storybook-tooling 2 | 3 | ## 1.1.1 4 | 5 | ### Patch Changes 6 | 7 | - 961ebbc: Fixed publishing to be public. 8 | 9 | ## 1.1.0 10 | 11 | ### Minor Changes 12 | 13 | - 3255616: Package renamed to '@rijkshuistijl-community/storybook-tooling' 14 | - 3255616: Publicly publish package 15 | 16 | ### Patch Changes 17 | 18 | - 3255616: Added tests for mergeMarkdown 19 | 20 | ## 1.0.1 21 | 22 | ### Patch Changes 23 | 24 | - 10ec55a: Release package with npm provenance. 25 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/icon.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/icon.stories'; 2 | import * as ReactStories from '../components-react/icon.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Icon', 8 | id: 'css-icon', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const CustomIcon = ReactStories.CustomIcon; 13 | export const FromDifferentIconSet = ReactStories.FromDifferentIconSet; 14 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/navbar.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/navbar.stories'; 2 | import * as ReactStories from '../components-react/navbar.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Navigation Bar', 8 | id: 'css-navbar', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const WithHeading = ReactStories.WithHeading; 13 | export const WithEndItems = ReactStories.WithEndItems; 14 | -------------------------------------------------------------------------------- /apps/rhc-templates/src/app/componenten/page.tsx: -------------------------------------------------------------------------------- 1 | import PageContent from '@rijkshuisstijl-community/storybook/src/templates/componenten'; 2 | import type { Metadata } from 'next'; 3 | 4 | export const metadata: Metadata = { 5 | title: 'Componenten overzicht', 6 | description: 7 | 'Filter op zoekterm en framework om componenten uit de Rijkshuisstijl Community te vinden. Bekijk direct de component in Storybook door de link in het zoekresultaat te volgen.', 8 | }; 9 | 10 | export default function Page() { 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/action-group.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/action-group.stories'; 2 | import * as ReactStories from '../components-react/action-group.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Action Group', 8 | id: 'css-action-group', 9 | }; 10 | 11 | export const Column = ReactStories.Column; 12 | export const ColumnStretch = ReactStories.ColumnStretch; 13 | export const Row = ReactStories.Row; 14 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/skip-link.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/skip-link.stories'; 2 | import * as ReactStories from '../components-react/skip-link.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Skip link', 8 | id: 'css-skip-link', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const RightToLeft = ReactStories.RightToLeft; 13 | export const FocusVisible = ReactStories.FocusVisible; 14 | -------------------------------------------------------------------------------- /packages/components-css/src/dot-badge/_mixin.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license EUPL-1.2 3 | * Copyright (c) 2021 Community for NL Design System 4 | */ 5 | 6 | @mixin rhc-dot-badge { 7 | block-size: var(--rhc-dot-badge-size, var(--rhc-size-quarter-lint)); 8 | border-radius: var(--rhc-dot-badge-border-radius, var(--rhc-border-radius-circle)); 9 | color: var(--rhc-dot-badge-color, var(--rhc-color-rood-500)); 10 | display: inline-flex; 11 | inline-size: var(--rhc-dot-badge-inline-size, var(--rhc-dot-badge-size, var(--rhc-size-quarter-lint))); 12 | } 13 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/card-as-link.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/card-as-link.stories'; 2 | import * as ReactStories from '../components-react/card-as-link.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Card as Link', 8 | id: 'css-card-as-link', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const FullBleed = ReactStories.FullBleed; 13 | export const Horizontal = ReactStories.Horizontal; 14 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/expandable-checkbox-group.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/expandable-checkbox-group.stories'; 2 | import * as ReactStories from '../components-react/expandable-checkbox-group.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Expandable Checkbox Group', 8 | id: 'css-expandable-checkbox-group', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const Open = ReactStories.Open; 13 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/unorderedList.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/unorderedList.stories'; 2 | import * as ReactStories from '../components-react/unorderedList.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Unordered List', 8 | id: 'css-unordered-list', 9 | }; 10 | 11 | export const DefaultUnorderedList = ReactStories.DefaultUnorderedList; 12 | export const NestedUnorderedList = ReactStories.NestedUnorderedList; 13 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/form-field.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/form-field.stories'; 2 | import * as ReactStories from '../components-react/form-field.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Form Field/Form Field', 8 | id: 'css-form-field', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const WithRadioGroup = ReactStories.WithRadioGroup; 13 | export const Invalid = ReactStories.Invalid; 14 | -------------------------------------------------------------------------------- /packages/components-angular/src/form-field-description/form-field-description.component.ts: -------------------------------------------------------------------------------- 1 | import { NgClass } from '@angular/common'; 2 | import { Component, Input } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'rhc-form-field-description', 6 | imports: [NgClass], 7 | templateUrl: './form-field-description.component.html', 8 | }) 9 | export class FormFieldDescriptionComponent { 10 | @Input() invalid?: boolean = false; 11 | @Input() valid?: boolean = false; 12 | @Input() warning?: boolean = false; 13 | @Input() class?: string; 14 | } 15 | -------------------------------------------------------------------------------- /packages/components-react/src/FormSummary.tsx: -------------------------------------------------------------------------------- 1 | export { 2 | DataList as FormSummary, 3 | type DataListProps as FormSummaryProps, 4 | DataListItem as FormSummaryItem, 5 | type DataListItemProps as FormSummaryItemProps, 6 | DataListKey as FormSummaryKey, 7 | type DataListKeyProps as FormSummaryKeyProps, 8 | DataListValue as FormSummaryValue, 9 | type DataListValueProps as FormSummaryValueProps, 10 | DataListActions as FormSummaryActions, 11 | type DataListActionsProps as FormSummaryActionsProps, 12 | } from '@utrecht/component-library-react'; 13 | -------------------------------------------------------------------------------- /packages/components-react/src/Toggletip.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { Toggletip } from '.'; 5 | 6 | describe('Toggletip', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render( ); 9 | 10 | const toggletip = container.querySelector(':only-child'); 11 | expect(toggletip).toBeInTheDocument(); 12 | }); 13 | }); 14 | 15 | afterEach(() => cleanup()); 16 | -------------------------------------------------------------------------------- /packages/storybook-angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "types": ["node"], 6 | "allowSyntheticDefaultImports": true, 7 | "esModuleInterop": true, 8 | "moduleResolution": "bundler", 9 | "resolveJsonModule": true, 10 | "target": "ES2022", 11 | "useDefineForClassFields": false 12 | }, 13 | "exclude": ["**/node_modules/*", "src/test.ts", "src/**/*.spec.ts"], 14 | "include": [".storybook/typings.d.ts", "config/**/*", "config/**/*.ts", "src/**/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/storybook/src/templates/mijn-omgeving.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta, StoryObj } from '@storybook/react-vite'; 2 | import './globals.css'; 3 | import MijnOmgeving from './mijn-omgeving'; 4 | 5 | const meta = { 6 | title: 'Mijn Omgeving', 7 | id: 'rhc-templates-mijn-omgeving', 8 | component: MijnOmgeving, 9 | parameters: { 10 | layout: 'fullscreen', 11 | isPage: true, 12 | }, 13 | } satisfies Meta ; 14 | 15 | export default meta; 16 | 17 | type Story = StoryObj ; 18 | 19 | export const Default: Story = {}; 20 | -------------------------------------------------------------------------------- /packages/components-react/src/SideNavItem.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import { HTMLAttributes, Ref } from 'react'; 3 | 4 | export interface SideNavItemProps extends HTMLAttributes { 5 | ref?: Ref ; 6 | } 7 | 8 | export const SideNavItem = ({ ref, className, children, ...restProps }: SideNavItemProps) => { 9 | return ( 10 | - 11 | {children} 12 |
13 | ); 14 | }; 15 | 16 | SideNavItem.displayName = 'SideNavItem'; 17 | -------------------------------------------------------------------------------- /packages/components-react/src/SideNavList.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import { HTMLAttributes, Ref } from 'react'; 3 | 4 | export interface SideNavListProps extends HTMLAttributes{ 5 | ref?: Ref ; 6 | } 7 | 8 | export const SideNavList = ({ ref, className, children, ...restProps }: SideNavListProps) => { 9 | return ( 10 | -
11 | {children}
12 |
); 9 | 10 | const radio = container.querySelector(':only-child'); 11 | 12 | expect(radio).toBeInTheDocument(); 13 | expect(radio).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/components-react/src/Table.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { Table } from '.'; 5 | 6 | describe('Table', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render( ); 9 | 10 | const table = container.querySelector(':only-child'); 11 | 12 | expect(table).toBeInTheDocument(); 13 | expect(table).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/storybook/src/components-react/form-field-textarea.md: -------------------------------------------------------------------------------- 1 | # Rijkshuisstijl Community FormFieldTextarea component 2 | 3 | ## Form field met [Textarea](/docs/rijkshuisstijl-textarea--docs) 4 | 5 | ## Usage 6 | 7 | ```jsx 8 | import { FormFieldTextarea } from '@rijkshuisstijl/community-components'; 9 | 10 |
; 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/storybook/src/components-react/form-field-text-input.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Rijkshuisstijl Community Form field with text input 4 | 5 | ## Form field met [Textbox](/docs/rijkshuisstijl-textbox--docs) 6 | 7 | ## Usage 8 | 9 | ```jsx 10 | import { FormFieldTextInput } from '@rijkshuisstijl/community-components'; 11 | 12 | ; 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/storybook/src/components-react/page-number-navigation.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Rijkshuisstijl Community Page Number Navigation component 4 | 5 | Page Number Navigation is a navigation element used to navigate between multiple pages of overview lists. This is commonly used for search results or a list of news articles. In cases where overview lists are too long to display on a single page, pagination can provide a clearer and more functional way to divide the content across multiple pages. Pagination indicates the current page and allows users to navigate to other pages. 6 | -------------------------------------------------------------------------------- /packages/components-angular/src/navbar/navbar.component.html: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /packages/components-twig/src/Image.twig: -------------------------------------------------------------------------------- 1 | {%- if src is defined -%}{%- set attributes = attributes.setAttribute('src', src) -%}{%- endif -%} 2 | {%- if alt is defined -%}{%- set attributes = attributes.setAttribute('alt', alt) -%}{%- else -%}{%- set attributes = attributes.setAttribute('alt', '') -%}{%- endif -%} 3 | {%- if width is defined -%}{%- set attributes = attributes.setAttribute('width', width) -%}{%- endif -%} 4 | {%- if height is defined -%}{%- set attributes = attributes.setAttribute('height', height) -%}{%- endif -%} 5 | 6 | -------------------------------------------------------------------------------- /packages/components-css/src/link-list/index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license EUPL-1.2 3 | * Copyright (c) 2021 Community for NL Design System 4 | */ 5 | 6 | .utrecht-link-list__link { 7 | align-items: flex-start; 8 | 9 | .utrecht-icon { 10 | flex-shrink: 0; 11 | } 12 | } 13 | 14 | .utrecht-link-list__item { 15 | display: inline-flex; 16 | font-family: var(--rhc-text-font-family-default, inherit); 17 | font-size: var(--rhc-text-font-size-max-md, inherit); 18 | } 19 | 20 | .utrecht-link-list__item .utrecht-link:any-link { 21 | line-height: var(--rhc-text-line-height-md, inherit); 22 | } 23 | -------------------------------------------------------------------------------- /packages/components-css/src/visually-hidden/_mixin.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license EUPL-1.2 3 | * Copyright (c) 2021 Community for NL Design System 4 | */ 5 | 6 | @mixin rhc-visually-hidden { 7 | block-size: 1px !important; 8 | border: 0 !important; 9 | clip: rect(0, 0, 0, 0) !important; 10 | inline-size: 1px !important; 11 | margin-block: -1px !important; 12 | margin-inline: -1px !important; 13 | opacity: 0%; 14 | overflow: hidden !important; 15 | padding-block: 0 !important; 16 | padding-inline: 0 !important; 17 | position: absolute; 18 | white-space: nowrap !important; 19 | } 20 | -------------------------------------------------------------------------------- /packages/components-react/src/Textarea.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { Textarea } from '.'; 5 | 6 | describe('Textarea', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render(); 9 | 10 | const textarea = container.querySelector(':only-child'); 11 | 12 | expect(textarea).toBeInTheDocument(); 13 | expect(textarea).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/components-react/src/SkipLink.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | SkipLink as NLSkipLink, 3 | type SkipLinkProps as NLSkipLinkProps, 4 | } from '@nl-design-system-candidate/skip-link-react'; 5 | import clsx from 'clsx'; 6 | import { PropsWithChildren, Ref } from 'react'; 7 | 8 | export interface SkipLinkProps extends NLSkipLinkProps { 9 | ref?: Ref
; 10 | } 11 | 12 | export const SkipLink = ({ className, ...restProps }: PropsWithChildren ) => ( 13 | 14 | ); 15 | 16 | SkipLink.displayName = 'SkipLink'; 17 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/data-summary.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/data-summary.stories'; 2 | import * as ReactStories from '../components-react/data-summary.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Data Summary', 8 | id: 'css-data-summary', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const Rows = ReactStories.Rows; 13 | export const NoActions = ReactStories.NoActions; 14 | export const NoActionsColumn = ReactStories.NoActionsColumn; 15 | -------------------------------------------------------------------------------- /packages/storybook/src/templates/homepage.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta, StoryObj } from '@storybook/react-vite'; 2 | import './globals.css'; 3 | import Homepage from './homepage'; 4 | 5 | const meta = { 6 | title: 'Homepage', 7 | id: 'rhc-templates-homepage', 8 | component: Homepage, 9 | parameters: { 10 | layout: 'fullscreen', 11 | isPage: true, 12 | }, 13 | } satisfies Meta ; 14 | 15 | export default meta; 16 | 17 | type Story = StoryObj ; 18 | 19 | export const Default: Story = { 20 | globals: { 21 | dir: 'ltr', 22 | lang: 'nl', 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /packages/storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react-jsx", 4 | "allowSyntheticDefaultImports": true, 5 | "skipLibCheck": true, 6 | "baseUrl": "./", 7 | "paths": { 8 | "@rijkshuisstijl-community/components-react": ["../components-react/src/index.ts"], 9 | "@rijkshuisstijl-community/components-twig/*": ["../components-twig/*"] 10 | } 11 | }, 12 | "extends": "../../tsconfig.json", 13 | "include": ["src/**/*.ts", "src/**/*.tsx", ".storybook/**/*.tsx", ".storybook/**/*.ts", "./types/twig.d.ts"], 14 | "exclude": ["**/node_modules/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/components-react/src/Paragraph.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { Paragraph } from '.'; 5 | 6 | describe('Paragraph', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render( ); 9 | 10 | const paragraph = container.querySelector(':only-child'); 11 | 12 | expect(paragraph).toBeInTheDocument(); 13 | expect(paragraph).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/components-react/src/SkipLink.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { SkipLink } from '.'; 5 | 6 | describe('SkipLink', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render( ); 9 | 10 | const skipLink = container.querySelector(':only-child'); 11 | 12 | expect(skipLink).toBeInTheDocument(); 13 | expect(skipLink).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/components-react/src/TextInput.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { TextInput } from '.'; 5 | 6 | describe('TextInput', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render( ); 9 | 10 | const textInput = container.querySelector(':only-child'); 11 | 12 | expect(textInput).toBeInTheDocument(); 13 | expect(textInput).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/hero.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/hero.stories'; 2 | import * as ReactStories from '../components-react/hero.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Hero', 8 | id: 'css-hero', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const CustomChildren = ReactStories.CustomChildren; 13 | export const TextAlignRight = ReactStories.TextAlignRight; 14 | export const AspectRatioFourToThree = ReactStories.AspectRatioFourToThree; 15 | -------------------------------------------------------------------------------- /packages/storybook/src/icon-sets/default-icon-set-page/index.tsx: -------------------------------------------------------------------------------- 1 | import { Icon, defaultIconSet as iconSet } from '@rijkshuisstijl-community/components-react'; 2 | import '../index.css'; 3 | 4 | export default function IconSet() { 5 | const iconIDs = Object.keys(iconSet).sort((a, b) => a.localeCompare(b)); 6 | 7 | return ( 8 | 9 | {iconIDs.map((iconID) => ( 10 |16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /proprietary/design-tokens/src/common/utrecht/focus.tokens.json: -------------------------------------------------------------------------------- 1 | { 2 | "utrecht": { 3 | "focus": { 4 | "background-color": {}, 5 | "outline-color": { "value": "{rhc.color.zwart}" }, 6 | "outline-offset": { 7 | "value": "3px", 8 | "comment": "This is only for buttons. Form fields (input, select and textarea) and links do not have an offset" 9 | }, 10 | "outline-style": { "value": "dashed" }, 11 | "outline-width": { "value": "2px" }, 12 | "inverse": { 13 | "outline-color": { "value": "{rhc.color.wit}" } 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/components-react/src/PageHeader.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { PageHeader } from '.'; 5 | 6 | describe('PageHeader', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render(11 |14 | ))} 15 |12 | {iconID} 13 | ); 9 | 10 | const pageHeader = container.querySelector(':only-child'); 11 | 12 | expect(pageHeader).toBeInTheDocument(); 13 | expect(pageHeader).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/storybook/src/icon-sets/flag-icon-set.md: -------------------------------------------------------------------------------- 1 | # Rijkshuisstijl Community Flag Icon Set 2 | 3 | Onderstaande iconen komen uit een losse icon set van de Rijkshuisstijl Commmunity. Voor gebruik moet deze set eerst geregistreerd worden. Zie ook de storybook pagina over de [Icon component](?path=/docs/rhc-icon--docs) en de [Standaard Icon set](?path=/docs/rhc-templates-default-icon-set--docs) 4 | 5 | ## Usage 6 | 7 | ```tsx 8 | import { Icon, flagIconSet as iconSet, registerIconSet } from '@rijkshuisstijl-community/components-react'; 9 | 10 | registerIconSet(iconSet); 11 | 12 | ; 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/components-react/src/FormSummary.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { FormSummary } from '.'; 5 | 6 | describe('FormSummary', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render( ); 9 | 10 | const formSummary = container.querySelector(':only-child'); 11 | 12 | expect(formSummary).toBeInTheDocument(); 13 | expect(formSummary).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/components-react/src/OrderedList.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { OrderedList } from '.'; 5 | 6 | describe('OrderedList', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render( ); 9 | 10 | const orderedList = container.querySelector(':only-child'); 11 | 12 | expect(orderedList).toBeInTheDocument(); 13 | expect(orderedList).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/components-react/src/PageContent.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { PageContent } from '.'; 5 | 6 | describe('PageContent', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render( ); 9 | 10 | const pageContent = container.querySelector(':only-child'); 11 | 12 | expect(pageContent).toBeInTheDocument(); 13 | expect(pageContent).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/components-css/src/data-badge-button/index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license EUPL-1.2 3 | * Copyright (c) 2021 Community for NL Design System 4 | */ 5 | 6 | @use "mixin"; 7 | 8 | .rhc-data-badge-button { 9 | @include mixin.rhc-data-badge-button; 10 | 11 | &:hover { 12 | @include mixin.rhc-data-badge-button--hover; 13 | } 14 | } 15 | 16 | .rhc-data-badge-button .rhc-data-badge-button__sr-only { 17 | @include mixin.rhc-data-badge-button__sr-only; 18 | } 19 | 20 | .rhc-data-badge-button:focus-visible, 21 | .rhc-data-badge-button--focus-visible { 22 | @include mixin.rhc-data-badge-button--focus-visible; 23 | } 24 | -------------------------------------------------------------------------------- /packages/components-react/src/ColumnLayout.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { ColumnLayout } from './ColumnLayout'; 5 | 6 | describe('ColumnLayout', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render( ); 9 | const columnLayout = container.querySelector(':only-child'); 10 | expect(columnLayout).toBeInTheDocument(); 11 | expect(columnLayout).toBeVisible(); 12 | }); 13 | }); 14 | 15 | afterEach(() => cleanup()); 16 | -------------------------------------------------------------------------------- /packages/components-react/src/HeadingGroup.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { HeadingGroup } from '.'; 5 | 6 | describe('Heading Group', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render( ); 9 | 10 | const headingGroup = container.querySelector(':only-child'); 11 | 12 | expect(headingGroup).toBeInTheDocument(); 13 | expect(headingGroup).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/components-react/src/TableCaption.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { TableCaption } from '.'; 5 | 6 | describe('TableCaption', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render( ); 9 | 10 | const tableCaption = container.querySelector(':only-child'); 11 | 12 | expect(tableCaption).toBeInTheDocument(); 13 | expect(tableCaption).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/storybook/src/components-react/text-input.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Rijkshuisstijl Community Text Input 4 | 5 | ## Terminologie 6 | 7 | - textbox: `role="textbox"` in WAI-ARIA, Text box lemma op Wikipedia. HTML noemt het "text control" en text edit control". MDN noemt het "text field" en "text input". 8 | - invalid: ... 9 | - disabled: ... 10 | - read-only: ... 11 | 12 | ## Privacy 13 | 14 | Gebruik `spellcheck="false"` voor velden die gevoelige informatie kunnen bevatten, zoals wachtwoorden en persoonsgegevens. Sommige browser extensions voor spellingcontrole sturen deze informatie naar externe servers. 15 | -------------------------------------------------------------------------------- /packages/components-css/src/blockquote/_mixin.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license EUPL-1.2 3 | * Copyright (c) 2021 Community for NL Design System 4 | */ 5 | 6 | @mixin rhc-blockquote__quote { 7 | margin-block-end: var(--utrecht-blockquote-margin-block-end, var(--rhc-blockquote-margin-block-end)); 8 | margin-block-start: var(--utrecht-blockquote-margin-block-start, var(--rhc-blockquote-margin-block-start)); 9 | margin-inline-end: var(--utrecht-blockquote-margin-inline-end, var(--rhc-blockquote-margin-inline-end)); 10 | margin-inline-start: var(--utrecht-blockquote-margin-inline-start, var(--rhc-blockquote-margin-inline-start)); 11 | } 12 | -------------------------------------------------------------------------------- /packages/storybook-angular/src/templates/betalingsregeling/betalingsregeling.component.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | -------------------------------------------------------------------------------- /packages/components-angular/src/form-field/form-field.component.ts: -------------------------------------------------------------------------------- 1 | import { NgClass } from '@angular/common'; 2 | import { Component, Input } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'rhc-form-field', 6 | imports: [NgClass], 7 | templateUrl: './form-field.component.html', 8 | }) 9 | export class FormFieldComponent { 10 | @Input() type?: 'checkbox' | 'radio' | 'text'; 11 | @Input() class?: string; 12 | @Input() invalid?: boolean = false; 13 | @Input() showInput?: boolean = true; 14 | @Input() showLabel?: boolean = true; 15 | @Input() showDescription?: boolean = false; 16 | 17 | constructor() {} 18 | } 19 | -------------------------------------------------------------------------------- /packages/components-react/src/Logo.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render, screen } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { Logo } from './Logo'; 5 | 6 | describe('Logo', () => { 7 | it('renders a logo role element', () => { 8 | render(3 |13 |Terug naar overzicht 4 |Betalingsregeling 5 |Wilt u uw boete in delen betalen? Vaak kan dat. Ga naar onze 7 | 12 |); 9 | 10 | const logo = screen.getByText('Voorbeeld organisatie'); 11 | 12 | expect(logo).toBeInTheDocument(); 13 | expect(logo).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/components-react/src/MessageList.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import { HTMLAttributes, Ref } from 'react'; 3 | 4 | export interface MessageListProps extends HTMLAttributes { 5 | ref?: Ref ; 6 | } 7 | 8 | export const MessageList = ({ ref, className, children, ...restProps }: MessageListProps) => { 9 | return ( 10 | -
16 | {children}
17 |
); 9 | 10 | const unorderedListItem = container.querySelector(':only-child'); 11 | 12 | expect(unorderedListItem).toBeInTheDocument(); 13 | expect(unorderedListItem).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/storybook/src/components-react/navigation-list.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Rijkshuisstijl Community Navigation List component 4 | 5 | ## Usage 6 | 7 | ```tsx 8 | import { NavigationList, NavigationListItem, NavigationListLink } from '@rijkshuisstijl-community/components-react'; 9 | 10 | 11 | ; 19 | ``` 20 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | updates: 4 | - package-ecosystem: "github-actions" 5 | directory: "/" 6 | schedule: 7 | interval: "monthly" 8 | - package-ecosystem: "npm" 9 | directory: "/" 10 | schedule: 11 | interval: "monthly" 12 | groups: 13 | patch-and-minor-dependencies: 14 | applies-to: "version-updates" 15 | update-types: 16 | - "patch" 17 | - "minor" 18 | ignore: 19 | - dependency-name: "@types/node" 20 | update-types: 21 | - "version-update:semver-major" 22 | versioning-strategy: "increase-if-necessary" 23 | open-pull-requests-limit: 20 24 | -------------------------------------------------------------------------------- /packages/components-react/src/DataSummary.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import { HTMLAttributes, PropsWithChildren, Ref } from 'react'; 3 | 4 | export interface DataSummaryProps extends HTMLAttributes12 | 18 | { 5 | appearance?: 'column' | 'row'; 6 | ref?: Ref ; 7 | } 8 | 9 | export function DataSummary({ 10 | ref, 11 | className, 12 | children, 13 | appearance = 'column', 14 | ...restProps 15 | }: PropsWithChildren ) { 16 | return ( 17 | -
18 | {children}
19 |
13 | ; 19 | ``` 20 | -------------------------------------------------------------------------------- /npmpackagejsonlint.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | 'no-caret-version-dependencies': 'error', 4 | 'no-caret-version-devDependencies': 'error', 5 | 'no-tilde-version-dependencies': 'error', 6 | 'no-tilde-version-devDependencies': 'error', 7 | 'require-repository-directory': 'error', 8 | 'valid-values-license': ['error', ['EUPL-1.2']], 9 | 'valid-values-name-scope': ['error', ['@rijkshuisstijl-community']], 10 | }, 11 | overrides: [ 12 | { 13 | patterns: ['proprietary/**/package.json'], 14 | rules: { 15 | 'valid-values-license': ['error', ['SEE LICENSE IN LICENSE.md']], 16 | }, 17 | }, 18 | ], 19 | }; 20 | -------------------------------------------------------------------------------- /packages/components-react/src/VisuallyHidden.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render, screen } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { VisuallyHidden } from '.'; 5 | 6 | describe('VisuallyHidden', () => { 7 | it('renders a visible element', () => { 8 | render( 9 |Column Layout example , 14 |15 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum magnam magni expedita modi sit quasi, natus nobis 16 | sint hic, eum illum quis laboriosam pariatur quo alias eaque qui quae recusandae? 17 | 18 |10 | This text is hidden 11 | , 12 | ); 13 | 14 | const visuallyHiddenSpan = screen.getByText('This text is hidden'); 15 | 16 | expect(visuallyHiddenSpan).toBeInTheDocument(); 17 | }); 18 | }); 19 | 20 | afterEach(() => cleanup()); 21 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/drawer.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/drawer.stories'; 2 | import * as ReactStories from '../components-react/drawer.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Drawer', 8 | id: 'css-drawer', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const InlineStart = ReactStories.InlineStart; 13 | export const InlineEnd = ReactStories.InlineEnd; 14 | export const BlockStart = ReactStories.BlockStart; 15 | export const BlockEnd = ReactStories.BlockEnd; 16 | export const OverflowY = ReactStories.OverflowY; 17 | -------------------------------------------------------------------------------- /packages/components-react/src/FormFieldErrorMessage.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { FormFieldErrorMessage } from '.'; 5 | 6 | describe('FormFieldErrorMessage', () => { 7 | it('renders a visible element', () => { 8 | const { container } = render(); 9 | 10 | const formFieldErrorMessage = container.querySelector(':only-child'); 11 | 12 | expect(formFieldErrorMessage).toBeInTheDocument(); 13 | expect(formFieldErrorMessage).toBeVisible(); 14 | }); 15 | }); 16 | 17 | afterEach(() => cleanup()); 18 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/code-input-group.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/code-input-group.stories'; 2 | import * as ReactStories from '../components-react/code-input-group.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Code Input Group', 8 | id: 'css-code-input-group', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const WithLabel = ReactStories.WithLabel; 13 | export const CapitalizedLetters = ReactStories.CapitalizedLetters; 14 | export const OnlyNumbers = ReactStories.OnlyNumbers; 15 | export const Invalid = ReactStories.Invalid; 16 | -------------------------------------------------------------------------------- /packages/storybook/vite.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import twig from 'vite-plugin-twig-drupal'; 3 | import { join } from 'node:path'; 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | // Support for Twig templates in Storybook with live reload and namespaces 8 | twig({ 9 | namespaces: { 10 | rhc: join(__dirname, '../components-twig/src'), 11 | }, 12 | framework: 'react', 13 | }), 14 | ], 15 | resolve: { 16 | // we set the rhc:source so that the react package resolves directly to the source files for development in this monorepo 17 | conditions: ['rhc:source', 'import', 'require', 'default'], 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/heading.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/heading.stories'; 2 | import * as ReactStories from '../components-react/heading.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Heading', 8 | id: 'css-heading', 9 | }; 10 | 11 | export const Heading1 = ReactStories.Heading1; 12 | export const Heading2 = ReactStories.Heading2; 13 | export const Heading3 = ReactStories.Heading3; 14 | export const Heading4 = ReactStories.Heading4; 15 | export const Heading5 = ReactStories.Heading5; 16 | export const Heading5Appearance = ReactStories.Heading5Appearance; 17 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/link-list-link.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/link-list-link.stories'; 2 | import * as ReactStories from '../components-react/link-list-link.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Link List/Link List Link', 8 | id: 'css-link-list-link', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const NoIcon = ReactStories.NoIcon; 13 | export const Hover = ReactStories.Hover; 14 | export const Active = ReactStories.Active; 15 | export const Focus = ReactStories.Focus; 16 | export const Visited = ReactStories.Visited; 17 | -------------------------------------------------------------------------------- /packages/components-css/src/link/_mixin.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license EUPL-1.2 3 | * Copyright (c) 2021 Community for NL Design System 4 | */ 5 | 6 | @mixin rhc-link--any-link { 7 | align-items: baseline; 8 | column-gap: var(--rhc-link-column-gap, inherit); 9 | display: inline-flex; 10 | } 11 | 12 | @mixin rhc-link__icon { 13 | --utrecht-icon-size: 1em; 14 | 15 | align-self: center; 16 | line-height: 1.25em; 17 | } 18 | 19 | /* For rhc-link, `inline-flex` was chosen as default, to enable control on positioning of an icon. 20 | To have a link in running text, please enable `inline` property and don't combine it with an icon. */ 21 | @mixin rhc-link--inline { 22 | display: inline; 23 | } 24 | -------------------------------------------------------------------------------- /packages/components-css/vite.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | import path from 'node:path'; 3 | import { defineConfig } from 'vite'; 4 | 5 | export default defineConfig({ 6 | build: { 7 | outDir: path.resolve(__dirname, 'dist'), // Output folder for compiled CSS 8 | rollupOptions: { 9 | input: path.resolve(__dirname, 'index.scss'), // Entry point for SCSS 10 | output: { 11 | // Disable JS output and ensure only CSS is generated 12 | format: 'es', 13 | assetFileNames: 'index.css', // Ensure the CSS file gets the correct name 14 | }, 15 | }, 16 | cssCodeSplit: false, // Avoid splitting the CSS file into multiple parts 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /packages/font/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @rijkshuisstijl-community/font 2 | 3 | ## 1.1.2 4 | 5 | ### Patch Changes 6 | 7 | - 10ec55a: Release package with npm provenance. 8 | 9 | ## 1.1.1 10 | 11 | ### Patch Changes 12 | 13 | - 3d9999c: Update patch & minor dependencies 14 | 15 | ## 1.1.0 16 | 17 | ### Minor Changes 18 | 19 | - d914771: Added the option to import dist/index.css 20 | 21 | ## 1.0.1 22 | 23 | ### Patch Changes 24 | 25 | - 1dc03fb: Wekelijkse package updates voor Rijkshuisstijl-componenten en design tokens (week 10) 26 | - b9a4945: Moved implementation documentation from repository README to package README. 27 | 28 | ## 1.0.0 29 | 30 | ### Patch Changes 31 | 32 | - ed83ac9: First full release 33 | -------------------------------------------------------------------------------- /packages/storybook/src/components-react/data-summary.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Rijkshuisstijl Community Data Summary component 4 | 5 | Lijst met eigenschappen en bijbehorende data over een onderwerp. 6 | 7 | ## Usage 8 | 9 | ```jsx 10 | import { DataSummary, DataSummaryItem } from '@rijkshuisstijl-community/components-react'; 11 | 12 | 13 | ; 20 | ``` 21 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/form-field-radio-group.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/form-field-radio-group.stories'; 2 | import * as ReactStories from '../components-react/form-field-radio-group.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Form Field/Form Field Radio Group', 8 | id: 'css-form-field-radio-group', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const Invalid = ReactStories.Invalid; 13 | export const Description = ReactStories.Description; 14 | export const Status = ReactStories.Status; 15 | export const RightToLeft = ReactStories.RightToLeft; 16 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/radio.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/radio.stories'; 2 | import * as ReactStories from '../components-react/radio.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Radio Button', 8 | id: 'css-radio', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const Active = ReactStories.Active; 13 | export const Hover = ReactStories.Hover; 14 | export const Focus = ReactStories.Focus; 15 | export const FocusVisible = ReactStories.FocusVisible; 16 | export const Disabled = ReactStories.Disabled; 17 | export const Invalid = ReactStories.Invalid; 18 | -------------------------------------------------------------------------------- /packages/components-css/src/form-field/index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license EUPL-1.2 3 | * Copyright (c) 2021 Community for NL Design System 4 | */ 5 | .utrecht-form-field { 6 | font-size: var(--rhc-text-font-size-max-md, inherit); 7 | line-height: var(--rhc-text-line-height-md, inherit); 8 | } 9 | 10 | .utrecht-rich-text .utrecht-form-field { 11 | margin-block-end: var(--utrecht-form-field-margin-block-end); 12 | } 13 | 14 | .utrecht-form-field__status { 15 | margin-block-end: var(--rhc-space-100, 0.5rem); 16 | margin-block-start: var(--rhc-space-100, 0.5rem); 17 | } 18 | 19 | .utrecht-form-field__description { 20 | --utrecht-form-field-description-margin-block-start: calc(-1 * var(--rhc-space-100)); 21 | } 22 | -------------------------------------------------------------------------------- /packages/components-react/src/NavigationList.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import { HTMLAttributes, Ref } from 'react'; 3 | 4 | export interface NavigationListProps extends HTMLAttributes14 | 15 | Bekijk alle dieren 16 | 18 |17 | 19 | { 5 | ref?: Ref ; 6 | } 7 | 8 | export const NavigationList = ({ ref, children, className, ...restProps }: NavigationListProps) => { 9 | return ( 10 | -
17 | {children}
18 |
13 | `, 14 | }), 15 | parameters: { 16 | docs: { 17 | page: null, 18 | }, 19 | isPage: true, 20 | layout: 'fullscreen', 21 | }, 22 | }; 23 | 24 | export default meta; 25 | 26 | export const Default: StoryObj = {}; 27 | -------------------------------------------------------------------------------- /packages/storybook/src/templates/shared/disclaimer.tsx: -------------------------------------------------------------------------------- 1 | import { Alert, Heading, Paragraph } from '@rijkshuisstijl-community/components-react'; 2 | 3 | export default function SharedDisclaimer() { 4 | return ( 5 | 6 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/components-angular/src/image/image.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { ImageComponent } from './image.component'; 3 | 4 | describe('ImageComponent', () => { 5 | let component: ImageComponent; 6 | let fixture: ComponentFixture7 | Let op: dit is een voorbeeldpagina! 8 | 9 |10 | Deze pagina is alleen bedoeld om te laten zien hoe Rijkshuisstijl Community-componenten eruitzien en werken. De 11 | informatie is niet echt en komt niet van een officiële bron. Sommige onderdelen werken mogelijk (nog) niet zoals 12 | op een echte website. 13 | 14 |; 7 | 8 | beforeEach(async () => { 9 | await TestBed.configureTestingModule({ 10 | imports: [ImageComponent], 11 | }).compileComponents(); 12 | 13 | fixture = TestBed.createComponent(ImageComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/navigation-list-item.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/navigation-list-item.stories'; 2 | import * as ReactStories from '../components-react/navigation-list-item.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Navigation List/Navigation List Item', 8 | id: 'css-navigation-list-item', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const WithCustomIcon = ReactStories.WithCustomIcon; 13 | export const WithCustomIconEnd = ReactStories.WithCustomIconEnd; 14 | export const Hover = ReactStories.Hover; 15 | export const Focus = ReactStories.Focus; 16 | -------------------------------------------------------------------------------- /packages/storybook/src/icon-sets/default-icon-set.md: -------------------------------------------------------------------------------- 1 | # Rijkshuisstijl Community Standaard Icon Set 2 | 3 | Onderstaande iconen zijn beschikbaar in de Rijkshuisstijl Community en bruikbaar in het [Icon](?path=/docs/rhc-icon--docs) component. De iconen zijn afkomstig uit de open source [Tabler Icons](https://tabler.io/icons) icon set of handmatig geïmplementeerd door contributors van de Rijkshuisstijl Community. Om een icon die hieronder staat te gebruiken, kan de icon ID toegewezen worden aan de `icon` property van de [Icon](?path=/docs/rhc-icon--docs) component. Er kunnen eigen iconen worden toegevoegd aan de standaard iconen set, zie hiervoor de instructies op de [storybook pagina van de Icon component](?path=/docs/rhc-icon--docs). 4 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/form-field-checkbox-group.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/form-field-checkbox-group.stories'; 2 | import * as ReactStories from '../components-react/form-field-checkbox-group.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Form Field/Form Field Checkbox Group', 8 | id: 'css-form-field-checkbox-group', 9 | }; 10 | 11 | export const Default = ReactStories.Default; 12 | export const Invalid = ReactStories.Invalid; 13 | export const Description = ReactStories.Description; 14 | export const Status = ReactStories.Status; 15 | export const RightToLeft = ReactStories.RightToLeft; 16 | -------------------------------------------------------------------------------- /apps/rhc-templates/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "target": "es5", 5 | "lib": ["dom", "dom.iterable", "esnext"], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "strict": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "dist/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /packages/components-react/src/FormFieldSelect.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { FormFieldSelect } from '.'; 5 | 6 | describe('FormFieldSelect', () => { 7 | const defaultProps = { 8 | label: 'Test Label', 9 | }; 10 | it('renders a visible element', () => { 11 | const { container } = render( ); 12 | 13 | const formFieldSelect = container.querySelector(':only-child'); 14 | 15 | expect(formFieldSelect).toBeInTheDocument(); 16 | expect(formFieldSelect).toBeVisible(); 17 | }); 18 | }); 19 | 20 | afterEach(() => cleanup()); 21 | -------------------------------------------------------------------------------- /packages/storybook/src/icon-sets/flag-icon-set.stories.tsx: -------------------------------------------------------------------------------- 1 | import { mergeMarkdown } from '@rijkshuisstijl-community/storybook-tooling/markdownUtils'; 2 | import { Meta, StoryObj } from '@storybook/react-vite'; 3 | import IconSet from './flag-icon-set-page'; 4 | import readme from './flag-icon-set.md?raw'; 5 | 6 | const meta = { 7 | title: 'Icon Sets/Flag Icon Set', 8 | id: 'rhc-templates-flag-icon-set', 9 | component: IconSet, 10 | parameters: { 11 | docs: { 12 | description: { 13 | component: mergeMarkdown([readme]), 14 | }, 15 | }, 16 | }, 17 | } satisfies Meta ; 18 | 19 | export default meta; 20 | 21 | type Story = StoryObj ; 22 | 23 | export const Default: Story = {}; 24 | -------------------------------------------------------------------------------- /packages/components-angular/src/paragraph/paragraph.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | export const appearanceOptions = [undefined, 'lead'] as const; 4 | export type AppearanceType = (typeof appearanceOptions)[number]; 5 | 6 | @Component({ 7 | selector: 'rhc-paragraph', 8 | imports: [], 9 | templateUrl: './paragraph.component.html', 10 | styleUrl: './paragraph.component.css', 11 | }) 12 | export class ParagraphComponent { 13 | @Input() appearance?: AppearanceType; 14 | 15 | computedClass = () => { 16 | switch (this.appearance) { 17 | case 'lead': 18 | return 'nl-paragraph nl-paragraph--lead'; 19 | default: 20 | return 'nl-paragraph'; 21 | } 22 | }; 23 | } 24 | -------------------------------------------------------------------------------- /packages/components-react/src/TableCaption.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | TableCaption as UtrechtTableCaption, 3 | TableCaptionProps as UtrechtTableCaptionProps, 4 | } from '@utrecht/component-library-react'; 5 | import { PropsWithChildren, Ref } from 'react'; 6 | 7 | interface TableCaptionProps extends UtrechtTableCaptionProps { 8 | ref?: Ref ; 9 | } 10 | 11 | export const TableCaption = ({ ref, dir, children, ...restProps }: PropsWithChildren ) => { 12 | return ( 13 | 14 | {children} 15 | 16 | ); 17 | }; 18 | 19 | TableCaption.displayName = 'TableCaption'; 20 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/footer.stories.tsx: -------------------------------------------------------------------------------- 1 | import reactMeta from '../components-react/footer.stories'; 2 | import * as ReactStories from '../components-react/footer.stories'; 3 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 4 | 5 | export default { 6 | ...mergeCssMeta(reactMeta), 7 | title: 'Footer', 8 | id: 'css-footer', 9 | }; 10 | 11 | export const DefaultFooter = ReactStories.DefaultFooter; 12 | export const PrimaryOutlinedFooter = ReactStories.PrimaryOutlinedFooter; 13 | export const PrimaryOutlinedFooterSubFooter = ReactStories.PrimaryOutlinedFooterSubFooter; 14 | export const ColumnLayoutFooter = ReactStories.ColumnLayoutFooter; 15 | export const CustomHeadingFooter = ReactStories.CustomHeadingFooter; 16 | -------------------------------------------------------------------------------- /packages/storybook/src/components-react/form-field.md: -------------------------------------------------------------------------------- 1 | # Rijkshuisstijl Community FormField component 2 | 3 | De `FormField` component is een wrapper voor invoervelden in formulieren. Het zorgt voor een consistente structuur met labels, beschrijvingen, foutmeldingen en statusberichten. Deze component is gebaseerd op de Utrecht component library 4 | 5 | ## Voorbeeld met verkeerde implementatie 6 | 7 | - Het `input` element, evenals `description` en `errorMessage`, moeten als props worden meegegeven en niet als children. 8 | 9 | ```jsx 10 | // Fout: input wordt direct als child geplaatst 11 |12 | 13 | 14 | 15 | // Correct: input wordt als prop meegegeven 16 |} /> 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/components-angular/src/form-label/form-label.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'label[rhc-form-label]', 5 | imports: [], 6 | templateUrl: './form-label.component.html', 7 | host: { 8 | '[class.utrecht-form-label]': 'true', 9 | '[class.utrecht-form-label--disabled]': 'disabled', 10 | '[class.utrecht-form-label--checked]': 'checked', 11 | '[class.utrecht-form-label--radio]': 'type === "radio"', 12 | '[class.utrecht-form-label--checkbox]': 'type === "checkbox"', 13 | }, 14 | }) 15 | export class FormLabelComponent { 16 | @Input() disabled?: boolean = false; 17 | @Input() checked?: boolean = false; 18 | @Input() type?: 'checkbox' | 'radio'; 19 | } 20 | -------------------------------------------------------------------------------- /packages/components-react/src/Drawer.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { cleanup, render, screen } from '@testing-library/react'; 3 | import { afterEach, describe, expect, it } from 'vitest'; 4 | import { Drawer } from './Drawer'; 5 | 6 | describe('Drawer testcases', () => { 7 | it('should render successfully', () => { 8 | render( ); 9 | const drawer = screen.getByRole('dialog'); 10 | expect(drawer).toBeInTheDocument(); 11 | }); 12 | 13 | it('should not be visible', () => { 14 | render( ); 15 | const drawer = screen.getByRole('dialog', { hidden: true }); 16 | expect(drawer).not.toBeVisible(); 17 | }); 18 | }); 19 | 20 | afterEach(() => cleanup()); 21 | -------------------------------------------------------------------------------- /packages/components-react/src/icon-sets/flag-icons/assets/uk-flag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/storybook-angular/src/templates/detailinformatie.stories.ts: -------------------------------------------------------------------------------- 1 | import { Meta, StoryObj } from '@storybook/angular'; 2 | import { DetailinformatieTemplate } from './detailinformatie/detailinformatie.component'; 3 | 4 | const meta: Meta = { 5 | title: 'Detailinformatie', 6 | id: 'rhc-templates-detailinformatie', 7 | render: () => ({ 8 | moduleMetadata: { 9 | imports: [DetailinformatieTemplate], 10 | }, 11 | template: ` 12 | 13 | `, 14 | }), 15 | parameters: { 16 | docs: { 17 | page: null, 18 | }, 19 | isPage: true, 20 | layout: 'fullscreen', 21 | }, 22 | }; 23 | 24 | export default meta; 25 | 26 | export const Default: StoryObj = {}; 27 | -------------------------------------------------------------------------------- /packages/storybook/src/icon-sets/default-icon-set.stories.tsx: -------------------------------------------------------------------------------- 1 | import { mergeMarkdown } from '@rijkshuisstijl-community/storybook-tooling/markdownUtils'; 2 | import { Meta, StoryObj } from '@storybook/react-vite'; 3 | import IconSet from './default-icon-set-page'; 4 | import readme from './default-icon-set.md?raw'; 5 | 6 | const meta = { 7 | title: 'Icon Sets/Default Icon Set', 8 | id: 'rhc-templates-default-icon-set', 9 | component: IconSet, 10 | parameters: { 11 | docs: { 12 | description: { 13 | component: mergeMarkdown([readme]), 14 | }, 15 | }, 16 | }, 17 | } satisfies Meta ; 18 | 19 | export default meta; 20 | 21 | type Story = StoryObj ; 22 | 23 | export const Default: Story = {}; 24 | -------------------------------------------------------------------------------- /packages/components-react/src/CodeInput.tsx: -------------------------------------------------------------------------------- 1 | import { TextboxProps } from '@utrecht/component-library-react'; 2 | import clsx from 'clsx'; 3 | import { ForwardedRef } from 'react'; 4 | import { TextInput } from './TextInput'; 5 | 6 | export interface CodeInputProps extends TextboxProps { 7 | capitalize?: boolean; 8 | ref: ForwardedRef ; 9 | } 10 | 11 | export const CodeInput = ({ capitalize = false, ref, className, ...restProps }: CodeInputProps) => { 12 | return ( 13 | 19 | ); 20 | }; 21 | 22 | CodeInput.displayName = 'CodeInput'; 23 | -------------------------------------------------------------------------------- /packages/components-angular/src/form-field/form-field.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { FormFieldComponent } from './form-field.component'; 3 | 4 | describe('FormFieldComponent', () => { 5 | let component: FormFieldComponent; 6 | let fixture: ComponentFixture ; 7 | 8 | beforeEach(async () => { 9 | await TestBed.configureTestingModule({ 10 | imports: [FormFieldComponent], 11 | }).compileComponents(); 12 | 13 | fixture = TestBed.createComponent(FormFieldComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/components-angular/src/form-label/form-label.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { FormLabelComponent } from './form-label.component'; 3 | 4 | describe('FormLabelComponent', () => { 5 | let component: FormLabelComponent; 6 | let fixture: ComponentFixture ; 7 | 8 | beforeEach(async () => { 9 | await TestBed.configureTestingModule({ 10 | imports: [FormLabelComponent], 11 | }).compileComponents(); 12 | 13 | fixture = TestBed.createComponent(FormLabelComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/components-angular/src/text-input/text-input.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { TextInputComponent } from './text-input.component'; 3 | 4 | describe('TextInputComponent', () => { 5 | let component: TextInputComponent; 6 | let fixture: ComponentFixture ; 7 | 8 | beforeEach(async () => { 9 | await TestBed.configureTestingModule({ 10 | imports: [TextInputComponent], 11 | }).compileComponents(); 12 | 13 | fixture = TestBed.createComponent(TextInputComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/storybook-angular/src/templates/betalingsregeling.stories.ts: -------------------------------------------------------------------------------- 1 | import { Meta, StoryObj } from '@storybook/angular'; 2 | import { BetalingsregelingTemplate } from './betalingsregeling/betalingsregeling.component'; 3 | 4 | const meta: Meta = { 5 | title: 'Betalingsregeling', 6 | id: 'rhc-templates-betalingsregeling', 7 | render: () => ({ 8 | moduleMetadata: { 9 | imports: [BetalingsregelingTemplate], 10 | }, 11 | template: ` 12 | 13 | `, 14 | }), 15 | parameters: { 16 | docs: { 17 | page: null, 18 | }, 19 | isPage: true, 20 | layout: 'fullscreen', 21 | }, 22 | }; 23 | 24 | export default meta; 25 | 26 | export const Default: StoryObj = {}; 27 | -------------------------------------------------------------------------------- /packages/storybook-tooling/src/markdownUtils/mergeMarkdown.ts: -------------------------------------------------------------------------------- 1 | import { remark } from 'remark'; 2 | import remarkNormalizeHeadings from 'remark-normalize-headings'; 3 | 4 | /** 5 | * Merges an array of markdown strings into a single string and normalizes the headings. 6 | * 7 | * The function joins the markdown array into a single string, using double newlines (`\n\n`) as separators between the elements. 8 | * 9 | * Use cases: 10 | * - Combines multiple markdown sections or chunks into one document. 11 | * - Normalizes headings in the merged markdown to maintain consistency in header formatting. 12 | */ 13 | 14 | export const mergeMarkdown = (markdown: string[]) => 15 | String(remark().use(remarkNormalizeHeadings).processSync(markdown.join('\n\n'))); 16 | -------------------------------------------------------------------------------- /packages/storybook/src/components-react/separator.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Rijkshuisstijl Community separator component 4 | 5 | Scheidingslijnen worden gebruikt om de scanbaarheid van een lange contentpagina te vergroten. 6 | 7 | ## Terminologie 8 | 9 | - **separator**, van de ARIA `role="separator"`. "hr" van `
` uit HTML is te onduidelijk buiten de context van code, "horizontal rule" te specifieke beschrijving van de originele rendering in HTML. De "separator" zou er ook heel anders uit kunnen zien dan een "rule" (lijn), en bovendien kan er voor andere tekstrichtingen wel eens een verticale variant komen. 10 | 11 | "Divider" is ook een vaak gehoorde term hiervoor, misschien moet deze voor vindbaarheid ook genoemd worden in de documentatie. 12 | -------------------------------------------------------------------------------- /packages/web-components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "allowSyntheticDefaultImports": true, 5 | "declaration": true, 6 | "outDir": "dist", 7 | "target": "esnext", 8 | "jsx": "react-jsx", 9 | "jsxImportSource": "preact", 10 | "skipLibCheck": true, 11 | "paths": { 12 | "react": ["./node_modules/preact/compat/"], 13 | "react/jsx-runtime": ["./node_modules/preact/jsx-runtime"], 14 | "react-dom": ["./node_modules/preact/compat/"], 15 | "react-dom/*": ["./node_modules/preact/compat/*"] 16 | } 17 | }, 18 | "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["**/node_modules/*", "dist", "loader", "**/*.spec.ts", "**/*.spec.tsx"] 20 | } 21 | -------------------------------------------------------------------------------- /packages/components-angular/src/heading/heading.component.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { Component, Input } from '@angular/core'; 3 | 4 | export const headingLevels = [1, 2, 3, 4, 5] as const; 5 | export type HeadingLevel = (typeof headingLevels)[number]; 6 | 7 | @Component({ 8 | selector: 'rhc-heading', 9 | imports: [CommonModule], 10 | templateUrl: './heading.component.html', 11 | styleUrl: './heading.component.css', 12 | }) 13 | export class HeadingComponent { 14 | @Input({ required: true }) level!: HeadingLevel; 15 | @Input() appearanceLevel?: HeadingLevel; 16 | 17 | stylingLevel = () => this.appearanceLevel ?? this.level; 18 | computedClasses = () => `nl-heading nl-heading--level-${this.stylingLevel()}`; 19 | } 20 | -------------------------------------------------------------------------------- /packages/components-react/src/Image.tsx: -------------------------------------------------------------------------------- 1 | import { Image as UtrechtImage, type ImageProps as UtrechtImageProps } from '@utrecht/component-library-react'; 2 | import { Ref } from 'react'; 3 | 4 | export interface ImageProps extends UtrechtImageProps { 5 | ref?: Ref; 6 | alt?: string; 7 | presentation?: boolean; 8 | } 9 | 10 | export const Image = ({ ref, className, alt, presentation, ...restProps }: ImageProps) => { 11 | if (!presentation && !alt) { 12 | console.warn('Images must always have an alt-text, unless the image is presentational.'); 13 | return null; 14 | } 15 | 16 | return ; 17 | }; 18 | 19 | Image.displayName = 'Image'; 20 | -------------------------------------------------------------------------------- /packages/components-react/src/Link.tsx: -------------------------------------------------------------------------------- 1 | import { Link as CandidateLink, type LinkProps as CandidateLinkProps } from '@nl-design-system-candidate/link-react'; 2 | import clsx from 'clsx'; 3 | import { PropsWithChildren, Ref } from 'react'; 4 | 5 | export interface LinkProps extends Omit ; 7 | inline?: boolean; 8 | } 9 | 10 | export const Link = ({ ref, children, className, inline, ...restProps }: PropsWithChildren ) => ( 11 | 17 | {children} 18 | 19 | ); 20 | 21 | Link.displayName = 'Link'; 22 | -------------------------------------------------------------------------------- /packages/storybook/src/components-twig/ordered-list-twig.stories.tsx: -------------------------------------------------------------------------------- 1 | import TwigOrderedList from '@rijkshuisstijl-community/components-twig/src/OrderedList.twig'; 2 | import type { Meta, StoryObj } from '@storybook/react-vite'; 3 | 4 | const meta = { 5 | title: 'Ordered List', 6 | id: 'rhc-twig-ordered-list', 7 | component: TwigOrderedList, 8 | parameters: { 9 | componentOrigin: 10 | 'Dit is een dummy component voor het toevoegen van support van nested Twig templates. Dit moet vervangen worden door het officiele component.', 11 | }, 12 | } satisfies Meta; 13 | 14 | export default meta; 15 | 16 | export const Default: StoryObj = { 17 | args: { 18 | items: ['Item 1', 'Item 2', 'Item 3'], 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /packages/components-angular/src/data-summary-item/data-summary-item.component.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { Component, Input } from '@angular/core'; 3 | import { LinkComponent } from '../link/link.component'; 4 | 5 | @Component({ 6 | selector: 'div[rhc-data-summary-item]', 7 | imports: [CommonModule, LinkComponent], 8 | templateUrl: './data-summary-item.component.html', 9 | host: { 10 | '[class.rhc-data-summary__item]': 'true', 11 | }, 12 | }) 13 | export class DataSummaryItemComponent { 14 | @Input() key: string = ''; 15 | @Input() value: string = ''; 16 | @Input() href?: string; 17 | @Input() target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop' = '_self'; 18 | @Input() actionLabel?: string; 19 | } 20 | -------------------------------------------------------------------------------- /packages/storybook/src/components-css/accordion.stories.tsx: -------------------------------------------------------------------------------- 1 | import readme from '@utrecht/components/accordion/README.md?raw'; 2 | import reactMeta from '../components-react/accordion.stories'; 3 | import * as ReactStories from '../components-react/accordion.stories'; 4 | import { mergeCssMeta } from '../helpers/mergeCssMeta'; 5 | 6 | export default { 7 | ...mergeCssMeta(reactMeta, { 8 | parameters: { 9 | docs: { 10 | description: { 11 | component: readme, 12 | }, 13 | }, 14 | }, 15 | }), 16 | title: 'Accordion', 17 | id: 'css-accordion', 18 | }; 19 | 20 | export const Default = ReactStories.Default; 21 | export const AccordionWithSections = ReactStories.AccordionWithSections; 22 | export const RTL = ReactStories.RTL; 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "allowUnreachableCode": false, 5 | "declaration": false, 6 | "downlevelIteration": true, 7 | "experimentalDecorators": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "importHelpers": true, 10 | "lib": ["es2020", "dom"], 11 | "module": "esnext", 12 | "moduleResolution": "bundler", 13 | "noFallthroughCasesInSwitch": true, 14 | "noImplicitOverride": true, 15 | "noImplicitReturns": true, 16 | "noPropertyAccessFromIndexSignature": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "sourceMap": true, 20 | "strict": true, 21 | "target": "es2020" 22 | }, 23 | "exclude": ["**/node_modules/*"] 24 | } 25 | --------------------------------------------------------------------------------