Skip to content

Commit d9dd8bf

Browse files
NeslihanUTUKFinnWard
NeslihanUTUK
and
FinnWard
authored
2267 accordion split component cssreact (#2298)
Co-authored-by: FinnWard <33222605+FinnWard@users.noreply.github.com>
1 parent 47b16df commit d9dd8bf

File tree

43 files changed

+728
-343
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+728
-343
lines changed

‎.changeset/funny-suns-admire.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@rijkshuisstijl-community/accordion-react': major
3+
'@rijkshuisstijl-community/accordion-css': major
4+
---
5+
6+
We hebben individuele packages aangemaakt om meer controle te geven over dependency maintenance en versie beheer duidelijker per component te omschrijven.

‎packages/components-css/accordion-css/README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!-- @license CC0-1.0 -->
2+
3+
# Omschrijving
4+
5+
Dit package bevat de specifieke code voor het component. Als je alle rijkshuisstijl community componenten wil kijk dan naar [https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-css/README.md]. Voor verdere informatie over het inzet van de component kijk naar onze documentatie [https://rijkshuisstijl-community.vercel.app/?path=/docs/css-accordion--docs]
6+
7+
## Installatie
8+
9+
```bash
10+
pnpm add @rijkshuisstijl-community/accordion-css
11+
```
12+
13+
## Gebruik
14+
15+
```html
16+
import '@rijkshuisstijl-community/accordion-css';
17+
<div class="utrecht-accordion">
18+
<div class="utrecht-accordion__section" body="Een doodsche stilte spande alom als een sluier van zwijgen, of, na de lange middagsiësta, de avondrust zonder overgang van leven begon.">
19+
<h1 class="utrecht-accordion__header">
20+
<button class="utrecht-button utrecht-button--subtle utrecht-accordion__button" type="button" aria-expanded="true" aria-controls="utrecht-accordion_R_d_-panel" id="utrecht-accordion_R_d_-button">
21+
<span class="utrecht-accordion__button-icon">
22+
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8" fill="currentColor">
23+
<defs>
24+
<clipPath id="clippath">
25+
<rect width="14" height="8" style="fill:none;stroke-width:0px">
26+
</rect>
27+
</clipPath>
28+
</defs>
29+
<g style="clip-path:url(#clippath)">
30+
<path d="m7,8c-.26,0-.51-.1-.71-.29L.29,1.71C-.1,1.32-.1.68.29.29S1.32-.1,1.71.29l5.29,5.29L12.29.29c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-6,6c-.2.2-.45.29-.71.29Z" style="stroke-width:0px">
31+
</path>
32+
</g>
33+
</svg>
34+
</span>
35+
<span class="utrecht-accordion__button-label">
36+
Nederlandse lorem ipsum
37+
</span>
38+
</button>
39+
</h1>
40+
<div id="utrecht-accordion_R_d_-panel" class="utrecht-accordion__panel utrecht-accordion__panel--expanded" aria-hidden="false">
41+
Een doodsche stilte spande alom als een sluier van zwijgen, of, na de lange middagsiësta, de avondrust zonder overgang van leven begon.
42+
</div>
43+
</div>
44+
</div>
45+
```
46+
47+
## Rijkshuisstijl Community Componenten
48+
49+
**Direct aan de slag met [CSS](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-css/README.md) | [React](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-react/README.md) | [Web Components](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/web-components/README.md) | [Twig](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-twig/README.md)**

‎packages/components-css/accordion-css/package.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"version": "1.0.0",
3+
"author": "Community for Rijkshuisstijl-Community Design System",
4+
"description": "Accordion component",
5+
"license": "EUPL-1.2",
6+
"name": "@rijkshuisstijl-community/accordion-css",
7+
"files": [
8+
"dist/",
9+
"docs/",
10+
"src/",
11+
"*.md"
12+
],
13+
"main": "dist/index.css",
14+
"scripts": {
15+
"build": "build-css-package",
16+
"clean": "rimraf dist",
17+
"watch": "build-css-package && chokidar 'src/**/*' --follow-symlinks --command 'build-css-package'"
18+
},
19+
"devDependencies": {
20+
"@rijkshuisstijl-community/build-utils-css": "workspace:*",
21+
"@utrecht/accordion-css": "3.0.1",
22+
"@utrecht/button-css": "3.1.0",
23+
"chokidar-cli": "3.0.0"
24+
},
25+
"keywords": [
26+
"rijkshuisstijl-community-design-system"
27+
],
28+
"publishConfig": {
29+
"access": "public"
30+
},
31+
"repository": {
32+
"type": "git+ssh",
33+
"url": "git@github.com:nl-design-system/rijkshuisstijl-community.git",
34+
"directory": "packages/components-css/accordion-css"
35+
}
36+
}

‎packages/components-css/accordion-css/src/index.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/**
2+
* @license EUPL-1.2
3+
* Copyright (c) 2026 Community for NL Design System
4+
*/
5+
6+
@forward "@utrecht/accordion-css/dist/index.css";
7+
@forward "@utrecht/button-css/dist/index.css";

‎packages/components-css/accordion-css/src/tokens.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎packages/components-css/alert-css/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"scripts": {
1515
"build": "build-css-package",
1616
"clean": "rimraf dist",
17-
"watch": "chokidar 'src/**/*' --follow-symlinks --command 'build-css-package'"
17+
"watch": "build-css-package && chokidar 'src/**/*' --follow-symlinks --command 'build-css-package'"
1818
},
1919
"devDependencies": {
2020
"@rijkshuisstijl-community/build-utils-css": "workspace:*",

‎packages/components-css/library-css/index.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Copyright (c) 2021 Community for NL Design System
44
*/
55

6-
@use "src/accordion/index" as accordion;
6+
@use "@rijkshuisstijl-community/accordion-css/src/index" as accordion;
77
@use "src/action-group/index" as actionGroup;
88
@use "@rijkshuisstijl-community/alert-css/src/index" as alert;
99
@use "src/article/index" as article;
@@ -59,7 +59,7 @@
5959
@use "src/wrapper/index" as wrapper;
6060
@use "src/data-summary/index" as dataSummary;
6161

62-
@import "@utrecht/accordion-css/dist/index.css";
62+
@import "@rijkshuisstijl-community/accordion-css";
6363
@import "@utrecht/action-group-css/dist/index.css";
6464
@import "@rijkshuisstijl-community/alert-css";
6565
@import "@utrecht/alert-css/dist/index.css";

‎packages/components-css/library-css/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@
4444
"@utrecht/badge-list-css": "2.2.1",
4545
"@utrecht/blockquote-css": "1.6.1",
4646
"@utrecht/breadcrumb-nav-css": "1.5.1",
47-
"@utrecht/button-css": "2.3.1",
47+
"@utrecht/button-css": "3.1.0",
4848
"@utrecht/button-link-css": "1.3.1",
4949
"@utrecht/checkbox-css": "1.6.1",
5050
"@utrecht/column-layout-css": "1.5.1",
51-
"@utrecht/component-library-css": "8.2.1",
51+
"@utrecht/component-library-css": "9.0.2",
5252
"@utrecht/custom-checkbox-css": "1.3.2",
5353
"@utrecht/data-badge-css": "1.0.1",
5454
"@utrecht/data-list-css": "1.4.1",
@@ -78,10 +78,11 @@
7878
"@utrecht/radio-button-css": "1.6.1",
7979
"@utrecht/select-css": "1.8.1",
8080
"@utrecht/separator-css": "1.5.1",
81-
"@utrecht/table-css": "1.6.1",
81+
"@utrecht/table-css": "2.0.2",
8282
"@utrecht/textarea-css": "2.3.2",
8383
"@utrecht/textbox-css": "2.0.0",
8484
"@utrecht/unordered-list-css": "1.5.1",
85+
"@rijkshuisstijl-community/accordion-css": "workspace:*",
8586
"@rijkshuisstijl-community/alert-css": "workspace:*"
8687
}
8788
}

‎packages/components-css/library-css/src/accordion/index.scss‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎packages/components-react/accordion-react/README.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!-- @license CC0-1.0 -->
2+
3+
# Omschrijving
4+
5+
Dit package bevat de specifieke code voor het component. Als je alle rijkshuisstijl community componenten wil kijk dan naar [https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-react/README.md]. Voor verdere informatie over het inzet van de component kijk naar onze documentatie [https://rijkshuisstijl-community.vercel.app/?path=/docs/rhc-accordion--docs]
6+
7+
## Installatie
8+
9+
```bash
10+
pnpm add @rijkshuisstijl-community/accordion-react
11+
```
12+
13+
## Gebruik
14+
15+
```tsx
16+
import { Accordion } from '@rijkshuisstijl-community/accordion-react';
17+
<AccordionProvider
18+
sections={[
19+
{
20+
body: 'Antwoord 1',
21+
label: 'Vraag 1',
22+
},
23+
{
24+
body: 'Antwoord 2',
25+
label: 'Vraag 2',
26+
},
27+
{
28+
body: 'Antwoord 3',
29+
label: 'Vraag 3',
30+
},
31+
]}
32+
/>;
33+
```
34+
35+
## Rijkshuisstijl Community Componenten
36+
37+
**Direct aan de slag met [CSS](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-css/README.md) | [React](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-react/README.md) | [Web Components](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/web-components/README.md) | [Twig](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-twig/README.md)**

0 commit comments

Comments
 (0)
⚡