rk-designsystem 1.4.1 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +59 -40
  2. package/dist/components/Chip/index.js +7 -3
  3. package/dist/components/Details/index.js +5 -3
  4. package/dist/components/Dialog/index.js +6 -3
  5. package/dist/components/ErrorSummary/index.js +7 -3
  6. package/dist/components/Field/index.js +10 -7
  7. package/dist/components/Fieldset/index.js +5 -3
  8. package/dist/components/Footer/index.js +221 -644
  9. package/dist/components/Footer/styles.module.css.js +56 -56
  10. package/dist/components/Header/index.js +406 -648
  11. package/dist/components/Header/styles.module.css.js +94 -88
  12. package/dist/components/List/index.js +6 -3
  13. package/dist/components/Popover/index.js +5 -3
  14. package/dist/components/Search/index.js +9 -5
  15. package/dist/components/Select/index.js +5 -3
  16. package/dist/components/Suggestion/index.js +25 -4
  17. package/dist/components/Suggestion/preserveSuggestionQuery.js +31 -0
  18. package/dist/components/Table/index.js +9 -3
  19. package/dist/components/Tabs/index.js +6 -3
  20. package/dist/components/ToggleGroup/index.js +4 -3
  21. package/dist/context/LanguageContext.js +13 -11
  22. package/dist/fonts/LICENSE.txt +93 -0
  23. package/dist/fonts/source-sans-3-latin-italic.woff2 +0 -0
  24. package/dist/fonts/source-sans-3-latin.woff2 +0 -0
  25. package/dist/index.d.ts +234 -9
  26. package/dist/index.js +147 -109
  27. package/dist/rk-designsystem.css +1 -1
  28. package/dist/styles.css +38 -7
  29. package/dist/styles.d.ts +3 -0
  30. package/dist/translations/index.js +4 -2242
  31. package/package.json +11 -8
package/README.md CHANGED
@@ -1,8 +1,19 @@
1
1
  # Røde Kors Design System Component Library (Norwegian Red Cross)
2
2
 
3
- ## Live Documentation URL
3
+ ## Documentation and development tools
4
4
 
5
- [https://norwegianredcross.github.io/DesignSystem/#](https://norwegianredcross.github.io/DesignSystem/#)
5
+ - **Public documentation** belongs in [norwegianredcross/designportal](https://github.com/norwegianredcross/designportal) (local checkout: `Desktop/designsystem-docs`), public address to come. It owns authored component guidance, design direction, guides, tokens documentation and release-note presentation.
6
+ - **[Storybook workbench](https://norwegianredcross.github.io/DesignSystem/storybook/)** is a development and test tool: component states, controls, interaction tests and accessibility checks.
7
+ - **[Legacy documentation app](https://norwegianredcross.github.io/DesignSystem/#)** remains available while the portal migration is in progress.
8
+
9
+ Existing app pages, MDX references and published context URLs remain available until the portal can serve their replacements. Component source comments and generated metadata stay tied to the library; the portal consumes that contract.
10
+
11
+ ### Build ownership
12
+
13
+ - `npm run build` uses the root `vite.config.ts` to produce the npm package, declarations and styles in `dist/`.
14
+ - Storybook and its three browser-test projects share `.storybook/vite.config.ts`, which contains React tooling only. They must not run the package's declaration generator or change its build output.
15
+ - `npm run build-storybook` continues publishing the guide, metadata and manifest together for existing consumers. This compatibility endpoint is separate from ownership of authored portal content.
16
+ - `npm run build:app` continues building the legacy documentation app until its removal is complete.
6
17
 
7
18
  ## Overview
8
19
 
@@ -71,21 +82,34 @@ npm install rk-designsystem
71
82
  > React `^18.3.1`. npm 7+ installs peers automatically; with older
72
83
  > setups install them alongside the package.
73
84
 
74
- ### 2. Setup Layout with Font
85
+ ### Temporary workaround for Aksel 8.17.1
75
86
 
76
- For Next.js projects, use `next/font` for optimal font loading:
87
+ The `@navikt/aksel-icons@8.17.1` release is missing compiled icon files. If a fresh
88
+ install fails to resolve `Airplane.js` (or another icon), add this to the consuming
89
+ application's root `package.json`, then run `npm install`:
90
+
91
+ ```json
92
+ {
93
+ "overrides": {
94
+ "@navikt/aksel-icons@8.17.1": "^8.16.1 <8.17.1 || ^8.17.2"
95
+ }
96
+ }
97
+ ```
98
+
99
+ If the application also declares `@navikt/aksel-icons` directly, use the same
100
+ allowed range for that dependency to avoid npm's `EOVERRIDE` error.
101
+
102
+ This also covers Digdir's dependency on the icons. Overrides in a library's own
103
+ manifest do not propagate to consuming applications. The replacement range excludes
104
+ only `8.17.1` from the supported 8.x range; newer releases remain eligible. Remove the workaround once a fixed
105
+ release is available. Our fresh consumer tests use the same temporary exception
106
+ and report it in their output; they do not validate the broken release.
107
+
108
+ ### 2. Import Styles
77
109
 
78
110
  ```tsx
79
111
  // src/app/layout.tsx (App Router)
80
- import '@digdir/designsystemet-css/index.css';
81
- import 'rk-design-tokens/design-tokens-build/theme.css';
82
- import { Source_Sans_3 } from 'next/font/google';
83
-
84
- const sourceSans3 = Source_Sans_3({
85
- subsets: ['latin'],
86
- weight: ['200', '300', '400', '500', '600', '700', '800', '900'],
87
- style: ['normal', 'italic'],
88
- });
112
+ import 'rk-designsystem/styles';
89
113
 
90
114
  export default function RootLayout({
91
115
  children,
@@ -94,13 +118,16 @@ export default function RootLayout({
94
118
  }) {
95
119
  return (
96
120
  <html lang="no">
97
- <body className={sourceSans3.className}>{children}</body>
121
+ <body>{children}</body>
98
122
  </html>
99
123
  );
100
124
  }
101
125
  ```
102
126
 
103
- **Important:** Use `className`, NOT `variable`. The `variable` option only creates a CSS custom property without actually applying the font.
127
+ That one import is everything: Digdir base styles, the Røde Kors theme, the
128
+ component CSS and Source Sans 3. The font ships inside the package and Next
129
+ copies it into the build, so there is no Google Fonts request and nothing to
130
+ configure with `next/font`.
104
131
 
105
132
  ### 3. Use Components
106
133
 
@@ -135,7 +162,8 @@ npm install rk-designsystem
135
162
  import 'rk-designsystem/styles';
136
163
  ```
137
164
 
138
- This single import includes base styles, theme, and loads the font via Google Fonts.
165
+ This single import includes base styles, theme, component CSS and Source Sans 3
166
+ (shipped with the package, no Google Fonts request).
139
167
 
140
168
  ### 3. Use Components
141
169
 
@@ -157,23 +185,11 @@ function App() {
157
185
 
158
186
  ```tsx
159
187
  // pages/_app.tsx
160
- import '@digdir/designsystemet-css/index.css';
161
- import 'rk-design-tokens/design-tokens-build/theme.css';
162
- import { Source_Sans_3 } from 'next/font/google';
188
+ import 'rk-designsystem/styles';
163
189
  import type { AppProps } from 'next/app';
164
190
 
165
- const sourceSans3 = Source_Sans_3({
166
- subsets: ['latin'],
167
- weight: ['200', '300', '400', '500', '600', '700', '800', '900'],
168
- style: ['normal', 'italic'],
169
- });
170
-
171
191
  export default function App({ Component, pageProps }: AppProps) {
172
- return (
173
- <main className={sourceSans3.className}>
174
- <Component {...pageProps} />
175
- </main>
176
- );
192
+ return <Component {...pageProps} />;
177
193
  }
178
194
  ```
179
195
 
@@ -207,11 +223,12 @@ Invoke-WebRequest -Uri "https://norwegianredcross.github.io/DesignSystem/storybo
207
223
 
208
224
  ### Published Context Bundle
209
225
 
210
- The Storybook publish step ships three downstream-facing artifacts together:
226
+ The Storybook publish step ships four downstream-facing artifacts together:
211
227
 
212
228
  - `AI_DESIGN_SYSTEM_GUIDE.md`
213
229
  - `metadata.json`
214
230
  - `ai-context.manifest.json`
231
+ - `CHANGELOG.md` (rendered as "Hva er nytt" by the documentation site)
215
232
 
216
233
  The guide remains the main human-readable reference. The manifest is additive and exists so downstream repos can refresh local rules and detect drift without scraping the full guide.
217
234
 
@@ -262,16 +279,18 @@ Button prop removals, mislabeled as a patch — 1.2.5 is deprecated.)
262
279
  Follow these steps to get the local development environment running. All commands should be run from the root of the project.
263
280
 
264
281
  ```bash
265
- # 1. Install dependencies
266
- pnpm i
282
+ # 1. Install dependencies (npm; the lockfile is package-lock.json)
283
+ npm ci
267
284
 
268
- # 2. Build all packages
269
- pnpm build
285
+ # 2. Build the library
286
+ npm run build
270
287
 
271
- # 3. Start the local Storybook server
288
+ # 3. Start Storybook, the component development and test workbench
272
289
  pnpm storybook
273
290
  ```
274
291
 
292
+ Node 24 (see `.nvmrc`). The browser tests need Chromium, Firefox and WebKit: `npx playwright install chromium firefox webkit`. On Linux, add `--with-deps` to install their system dependencies.
293
+
275
294
  ## Testing
276
295
 
277
296
  Testing i dette repoet følger Norges Røde Kors' testpolicy og overordnede teststrategi. Se **[TESTING.md](./TESTING.md)** for testplanen: testnivåer, risikobasert prioritering, kriterier for «klar til produksjon», feilhåndtering og rapportering. Kort versjon:
@@ -287,7 +306,7 @@ Every component we build should adhere to these core principles:
287
306
  1. **Accessibility (A11y):** Components must be usable by everyone, including people with disabilities. This means proper ARIA attributes, keyboard navigation, and semantic HTML.
288
307
  2. **Reusability:** Components should be generic enough to be used in multiple contexts without modification.
289
308
  3. **Consistency:** Components should follow our established design tokens (colors, spacing, typography) and have a consistent API and structure.
290
- 4. **Documentation:** Every component must be documented in Storybook to make it discoverable and easy for other developers to use.
309
+ 4. **Documentation:** Public usage guidance belongs in the documentation portal. Every component must also have executable Storybook examples for development and testing; retain existing MDX references until their portal replacements are available.
291
310
 
292
311
  ## When to Create a New Component
293
312
 
@@ -318,7 +337,7 @@ src/
318
337
  └── MyNewComponent/
319
338
  ├── index.ts // Public API - exports the component and props
320
339
  ├── MyNewComponent.tsx // The React component logic and JSX
321
- ├── MyNewComponent.stories.tsx // Storybook stories for documentation
340
+ ├── MyNewComponent.stories.tsx // Executable examples and interaction tests
322
341
  ├── styles.module.css // Scoped CSS (only for custom components)
323
342
  └── MyNewComponent.test.tsx // (Optional but Recommended) Unit tests
324
343
  ```
@@ -343,9 +362,9 @@ src/
343
362
  * **Design Tokens:** Always use our design system tokens (`var(--ds-...)`) for colors, spacing, fonts, etc. Do not use hardcoded values (e.g., `#FFF`, `16px`).
344
363
  * **Overriding Wrapped Components:** For **wrapped components**, use a standard CSS file. Use the `@layer` and `composes` keywords to extend base Digdir styles without increasing CSS specificity unnecessarily.
345
364
 
346
- ### 3. Documentation (`MyNewComponent.stories.tsx`)
365
+ ### 3. Workbench stories (`MyNewComponent.stories.tsx`)
347
366
 
348
- Your Storybook file is the official documentation. It must be clear and comprehensive.
367
+ Your Storybook file is the executable development and test reference. Keep its examples clear and representative; maintain authored public guidance in the documentation portal.
349
368
 
350
369
  * **`meta` Object:** Define the component's title, component reference, and `tags: ['autodocs']` to enable automatic documentation.
351
370
  * **`argTypes`:** Document every single prop. Provide a `description`, `control` type (e.g., `select`, `boolean`, `text`), and `options` if applicable. This powers the interactive controls in Storybook.
package/dist/components/Chip/index.js CHANGED
@@ -1,6 +1,10 @@
1
1
  "use client";
2
- import { Chip as i } from "@digdir/designsystemet-react";
3
- const o = i;
2
+ import { Chip as i, ChipButton as o, ChipCheckbox as h, ChipRadio as C, ChipRemovable as p } from "@digdir/designsystemet-react";
3
+ const e = i, a = o, s = h, c = C, n = p;
4
4
  export {
5
- o as Chip
5
+ e as Chip,
6
+ a as ChipButton,
7
+ s as ChipCheckbox,
8
+ c as ChipRadio,
9
+ n as ChipRemovable
6
10
  };
package/dist/components/Details/index.js CHANGED
@@ -1,6 +1,8 @@
1
1
  "use client";
2
- import { Details as t } from "@digdir/designsystemet-react";
3
- const s = t;
2
+ import { Details as t, DetailsContent as s, DetailsSummary as a } from "@digdir/designsystemet-react";
3
+ const i = t, l = s, n = a;
4
4
  export {
5
- s as Details
5
+ i as Details,
6
+ l as DetailsContent,
7
+ n as DetailsSummary
6
8
  };
package/dist/components/Dialog/index.js CHANGED
@@ -1,6 +1,9 @@
1
1
  "use client";
2
- import { Dialog as o } from "@digdir/designsystemet-react";
3
- const a = o;
2
+ import { Dialog as o, DialogBlock as g, DialogTrigger as i, DialogTriggerContext as a } from "@digdir/designsystemet-react";
3
+ const r = o, t = g, e = i, D = a;
4
4
  export {
5
- a as Dialog
5
+ r as Dialog,
6
+ t as DialogBlock,
7
+ e as DialogTrigger,
8
+ D as DialogTriggerContext
6
9
  };
package/dist/components/ErrorSummary/index.js CHANGED
@@ -1,6 +1,10 @@
1
1
  "use client";
2
- import { ErrorSummary as r } from "@digdir/designsystemet-react";
3
- const o = r;
2
+ import { ErrorSummary as r, ErrorSummaryHeading as m, ErrorSummaryItem as a, ErrorSummaryLink as o, ErrorSummaryList as u } from "@digdir/designsystemet-react";
3
+ const E = r, S = m, s = a, t = o, n = u;
4
4
  export {
5
- o as ErrorSummary
5
+ E as ErrorSummary,
6
+ S as ErrorSummaryHeading,
7
+ s as ErrorSummaryItem,
8
+ t as ErrorSummaryLink,
9
+ n as ErrorSummaryList
6
10
  };
package/dist/components/Field/index.js CHANGED
@@ -1,10 +1,13 @@
1
1
  "use client";
2
- import { Field as e, FieldCounter as i, FieldDescription as l } from "@digdir/designsystemet-react";
3
- const s = e, o = l, t = i;
4
- o.displayName = "Field.Description";
5
- t.displayName = "Field.Counter";
2
+ import { Field as i, FieldAffix as e, FieldAffixes as l, FieldCounter as s, FieldDescription as d } from "@digdir/designsystemet-react";
3
+ const n = i, F = d, o = s;
4
+ F.displayName = "Field.Description";
5
+ o.displayName = "Field.Counter";
6
+ const f = e, r = l;
6
7
  export {
7
- s as Field,
8
- t as FieldCounter,
9
- o as FieldDescription
8
+ n as Field,
9
+ f as FieldAffix,
10
+ r as FieldAffixes,
11
+ o as FieldCounter,
12
+ F as FieldDescription
10
13
  };
package/dist/components/Fieldset/index.js CHANGED
@@ -1,6 +1,8 @@
1
1
  "use client";
2
- import { Fieldset as e } from "@digdir/designsystemet-react";
3
- const s = e;
2
+ import { Fieldset as e, FieldsetDescription as s, FieldsetLegend as t } from "@digdir/designsystemet-react";
3
+ const d = e, l = s, n = t;
4
4
  export {
5
- s as Fieldset
5
+ d as Fieldset,
6
+ l as FieldsetDescription,
7
+ n as FieldsetLegend
6
8
  };