diff --git a/packages/components-css/accordion/index.scss b/packages/components-css/accordion/index.scss
new file mode 100644
index 000000000..34456d7df
--- /dev/null
+++ b/packages/components-css/accordion/index.scss
@@ -0,0 +1,5 @@
+@import "../node_modules/@utrecht/components/accordion/src/";
+
+.utrecht-accordion__button {
+ --utrecht-button-border-radius: var(--utrecht-accordion-border-radius);
+}
diff --git a/packages/components-css/index.scss b/packages/components-css/index.scss
index 629c323d1..c8d5e94aa 100644
--- a/packages/components-css/index.scss
+++ b/packages/components-css/index.scss
@@ -2,5 +2,5 @@
* @license EUPL-1.2
* Copyright (c) 2021 Community for NL Design System
*/
-
+@import "accordion/index";
@import "logo/index";
diff --git a/packages/components-css/package.json b/packages/components-css/package.json
index 81955c7fc..6f256143e 100644
--- a/packages/components-css/package.json
+++ b/packages/components-css/package.json
@@ -12,6 +12,9 @@
"access": "restricted",
"registry": "https://registry.npmjs.org/"
},
+ "devDependencies": {
+ "@utrecht/components": "6.0.0"
+ },
"repository": {
"type": "git+ssh",
"url": "git@github.com:nl-design-system/rijkshuisstijl-community.git",
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 62d8163b8..4ab25928c 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -34,6 +34,7 @@
],
"sideEffects": false,
"dependencies": {
+ "@rijkshuisstijl-community/components-css": "workspace:*",
"@utrecht/component-library-react": "5.0.0",
"clsx": "2.1.1",
"date-fns": "3.6.0",
diff --git a/packages/components-react/src/Accordion.tsx b/packages/components-react/src/Accordion.tsx
new file mode 100644
index 000000000..d8e007b5b
--- /dev/null
+++ b/packages/components-react/src/Accordion.tsx
@@ -0,0 +1,11 @@
+import '@rijkshuisstijl-community/components-css/index.scss';
+
+export {
+ Accordion,
+ type AccordionProps,
+ AccordionProvider,
+ type AccordionProviderProps,
+ AccordionSection,
+ type AccordionSectionProps,
+ type AccordionSectionProviderProps,
+} from '@utrecht/component-library-react/';
diff --git a/packages/components-react/src/index.ts b/packages/components-react/src/index.ts
index 9225549e5..3c0aa533b 100644
--- a/packages/components-react/src/index.ts
+++ b/packages/components-react/src/index.ts
@@ -1,5 +1,15 @@
// Export all Utrecht components
export * from '@utrecht/component-library-react/dist/css-module';
+// Export overwrites and new components
+export {
+ Accordion,
+ type AccordionProps,
+ AccordionProvider,
+ type AccordionProviderProps,
+ AccordionSection,
+ type AccordionSectionProps,
+ type AccordionSectionProviderProps,
+} from './Accordion';
export { Logo } from './Logo';
export type { LogoProps } from './Logo';
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 002198b62..a054818e4 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -27,6 +27,7 @@
"@nl-rvo/assets": "1.0.0-alpha.360",
"@rijkshuisstijl-community/assets": "workspace:*",
"@rijkshuisstijl-community/components-css": "workspace:*",
+ "@rijkshuisstijl-community/components-react": "workspace:*",
"@rijkshuisstijl-community/design-tokens": "workspace:*",
"@rijkshuisstijl-community/digid-design-tokens": "workspace:*",
"@rijkshuisstijl-community/font": "workspace:*",
@@ -51,7 +52,7 @@
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"@utrecht/component-library-css": "4.0.0",
- "@utrecht/component-library-react": "4.1.0",
+ "@utrecht/component-library-react": "5.0.0",
"@utrecht/web-component-library-react": "1.2.0",
"@utrecht/web-component-library-stencil": "1.3.0",
"@whitespace/storybook-addon-html": "6.1.1",
diff --git a/packages/storybook/src/community/accordion.md b/packages/storybook/src/community/accordion.md
new file mode 100644
index 000000000..aac3a530e
--- /dev/null
+++ b/packages/storybook/src/community/accordion.md
@@ -0,0 +1,3 @@
+
+
+# Rijkshuisstijl Community accordion component
diff --git a/packages/storybook/src/community/accordion.stories.tsx b/packages/storybook/src/community/accordion.stories.tsx
new file mode 100644
index 000000000..a7467e39e
--- /dev/null
+++ b/packages/storybook/src/community/accordion.stories.tsx
@@ -0,0 +1,137 @@
+import { AccordionProvider, AccordionSectionProps } from '@rijkshuisstijl-community/components-react';
+import { Meta, StoryObj } from '@storybook/react';
+import { UtrechtIconChevronDown } from '@utrecht/web-component-library-react';
+import { ReactNode } from 'react';
+import readme from './accordion.md?raw';
+
+interface AccordionStoryProps {
+ label: string;
+ body: ReactNode;
+ expanded?: boolean;
+ expandedAccordion?: boolean;
+ icon?: ReactNode;
+ appearance?: string;
+ sections?: AccordionSectionProps[];
+}
+
+const AccordionStory = ({ expanded, label, body, appearance, icon, sections }: AccordionStoryProps) => (
+
+);
+
+const meta = {
+ title: 'Rijkshuisstijl/Accordion',
+ id: 'react-accordion',
+ args: {
+ label: '',
+ body: '',
+ expandedAccordion: false,
+ appearance: '',
+ icon: undefined,
+ },
+ argTypes: {
+ label: {
+ name: 'label',
+ type: { name: 'string', required: true },
+ table: {
+ defaultValue: { summary: '' },
+ category: 'API',
+ },
+ },
+ body: {
+ name: 'body',
+ type: { name: 'string', required: true },
+ table: {
+ defaultValue: { summary: '' },
+ category: 'API',
+ },
+ },
+ expandedAccordion: {
+ name: 'expandedAccordion',
+ type: { name: 'boolean', required: false },
+ table: {
+ defaultValue: { summary: false },
+ category: 'API',
+ },
+ },
+ appearance: {
+ description: 'Appearance',
+ control: { type: 'select' },
+ options: ['', 'utrecht'],
+ },
+ icon: {
+ name: 'icon',
+ description: 'Icon at the start',
+ control: { type: 'select' },
+ options: {
+ '': undefined,
+ null: null,
+ 'utrecht-icon-chevron-down': ,
+ },
+ },
+ },
+ parameters: {
+ tokensPrefix: 'utrecht-accordion',
+ docs: {
+ description: {
+ component: readme,
+ },
+ },
+ },
+ render: AccordionStory,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+const accordionDefaultDataAR = {
+ label: 'ما هو "لوريم إيبسوم" ؟',
+ body: ' المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" (Letraset) البلاستيكية تحوي مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker) والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.',
+};
+const accordionData = [
+ {
+ label: 'Lorem ipsum 1',
+ body: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+ laborum.`,
+ expandedAccordion: true,
+ },
+ {
+ label: 'Lorem ipsum 2',
+ body: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+ laborum.`,
+ expandedAccordion: false,
+ },
+ {
+ label: 'Lorem ipsum 3',
+ body: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+ laborum.`,
+ expandedAccordion: false,
+ },
+];
+
+export const Default: Story = {
+ args: {
+ sections: accordionData,
+ },
+};
+
+export const RTL: Story = {
+ args: accordionDefaultDataAR,
+ decorators: [
+ (Story) => (
+
+ {Story()}
+
+ ),
+ ],
+ name: 'Right-to-left',
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e5b4ec4f5..140d8721e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -202,10 +202,17 @@ importers:
specifier: 5.5.3
version: 5.5.3
- packages/components-css: {}
+ packages/components-css:
+ devDependencies:
+ '@utrecht/components':
+ specifier: 6.0.0
+ version: 6.0.0
packages/components-react:
dependencies:
+ '@rijkshuisstijl-community/components-css':
+ specifier: workspace:*
+ version: link:../components-css
'@utrecht/component-library-react':
specifier: 5.0.0
version: 5.0.0(@babel/runtime@7.24.8)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -342,6 +349,9 @@ importers:
'@rijkshuisstijl-community/components-css':
specifier: workspace:*
version: link:../components-css
+ '@rijkshuisstijl-community/components-react':
+ specifier: workspace:*
+ version: link:../components-react
'@rijkshuisstijl-community/design-tokens':
specifier: workspace:*
version: link:../../proprietary/design-tokens
@@ -415,8 +425,8 @@ importers:
specifier: 4.0.0
version: 4.0.0
'@utrecht/component-library-react':
- specifier: 4.1.0
- version: 4.1.0(@babel/runtime@7.24.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: 5.0.0
+ version: 5.0.0(@babel/runtime@7.24.8)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@utrecht/web-component-library-react':
specifier: 1.2.0
version: 1.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
index 85051e0eb..31d10a6d8 100644
--- a/proprietary/design-tokens/figma/figma.tokens.json
+++ b/proprietary/design-tokens/figma/figma.tokens.json
@@ -805,14 +805,6 @@
}
},
"utrecht/document": {
- "background-color": {
- "value": "{rhc.color.wit}",
- "type": "other"
- },
- "color": {
- "value": "{rhc.color.zwart}",
- "type": "other"
- },
"font-family": {
"value": "{rhc.font-family.primary}",
"type": "other"
@@ -1281,7 +1273,7 @@
"type": "color"
}
},
- "body": {
+ "panel": {
"border-color": {
"value": "{rhc.color.border.subdued}",
"type": "color"
@@ -1316,6 +1308,10 @@
"value": "{rhc.line-height.md}",
"type": "lineHeights"
},
+ "gap": {
+ "value": "{rhc.space.100}",
+ "type": "spacing"
+ },
"icon": {
"margin-inline": {
"value": "{rhc.space.100}",
@@ -1625,7 +1621,7 @@
},
"text": {
"font-family": {
- "value": "{utrecht.document.font-family}",
+ "value": "{rhc.font-family.primary}",
"type": "fontFamilies"
},
"font-weight": {
@@ -2789,7 +2785,7 @@
"header": {
"label": {
"font-family": {
- "value": "{utrecht.document.font-family}",
+ "value": "{rhc.font-family.primary}",
"type": "fontFamilies"
},
"font-size": {
@@ -2879,7 +2875,7 @@
"type": "color"
},
"font-family": {
- "value": "{utrecht.document.font-family}",
+ "value": "{rhc.font-family.primary}",
"type": "fontFamilies"
},
"font-size": {
@@ -3284,7 +3280,7 @@
"type": "color"
},
"font-family": {
- "value": "{utrecht.document.font-family}",
+ "value": "{rhc.font-family.primary}",
"type": "fontFamilies"
},
"font-weight": {
@@ -3686,7 +3682,7 @@
}
},
"font-family": {
- "value": "{utrecht.document.font-family}",
+ "value": "{rhc.font-family.primary}",
"type": "fontFamilies"
},
"line-height": {
@@ -4126,7 +4122,7 @@
"type": "borderWidth"
},
"font-family": {
- "value": "{utrecht.document.font-family}",
+ "value": "{rhc.font-family.primary}",
"type": "fontFamilies"
},
"font-weight": {
@@ -4856,7 +4852,7 @@
}
},
"font-family": {
- "value": "{utrecht.document.font-family}",
+ "value": "{rhc.font-family.primary}",
"type": "fontFamilies"
},
"font-size": {
@@ -5028,7 +5024,7 @@
"type": "borderWidth"
},
"font-family": {
- "value": "{utrecht.document.font-family}",
+ "value": "{rhc.font-family.primary}",
"type": "fontFamilies"
},
"font-weight": {
diff --git a/proprietary/design-tokens/token-transformer.mjs b/proprietary/design-tokens/token-transformer.mjs
index a523c0601..0d67fe986 100644
--- a/proprietary/design-tokens/token-transformer.mjs
+++ b/proprietary/design-tokens/token-transformer.mjs
@@ -11,7 +11,6 @@ const init = async ({ input, output }) => {
// The following components didn't work yet because of broken design token references.
// You can remove excludes from this list at any time, as long as they don't break the build.
const excludes = [
- 'components/accordion',
'components/alert',
'components/avatar',
'components/backdrop',