rk-designsystem 1.1.97 → 1.1.98
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.
- package/README.md +120 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# Røde Kors Design System Component Library (Norwegian Red Cross)
|
|
2
2
|
|
|
3
|
-
## Live
|
|
3
|
+
## Live Documentation URL
|
|
4
4
|
|
|
5
|
-
[https://norwegianredcross.github.io/DesignSystem
|
|
5
|
+
[https://norwegianredcross.github.io/DesignSystem/#](https://norwegianredcross.github.io/DesignSystem/#)
|
|
6
6
|
|
|
7
7
|
## Overview
|
|
8
8
|
|
|
@@ -12,7 +12,51 @@ It's developed leveraging the foundational components from Digdir's Designsystem
|
|
|
12
12
|
|
|
13
13
|
The primary goal is to ensure brand consistency, improve development efficiency, and maintain high accessibility standards across all Røde Kors applications.
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
## Available Components
|
|
16
|
+
|
|
17
|
+
The design system includes the following components:
|
|
18
|
+
|
|
19
|
+
| Component | Description |
|
|
20
|
+
|-----------|-------------|
|
|
21
|
+
| Alert | Display important messages and notifications |
|
|
22
|
+
| Avatar | Represent users or entities with images/initials |
|
|
23
|
+
| Badge | Show status indicators or counts |
|
|
24
|
+
| Breadcrumbs | Navigation showing current location in hierarchy |
|
|
25
|
+
| Button | Interactive buttons for actions |
|
|
26
|
+
| Card | Container for grouping related content |
|
|
27
|
+
| Carousel | Image gallery with navigation |
|
|
28
|
+
| Checkbox | Multi-select form inputs |
|
|
29
|
+
| Chip | Compact interactive elements for filtering |
|
|
30
|
+
| DateInput | Text input for dates with Norwegian formatting |
|
|
31
|
+
| DatePicker | Visual calendar for date selection |
|
|
32
|
+
| Details | Expandable/collapsible content sections |
|
|
33
|
+
| Dialog | Modal and non-modal dialog windows |
|
|
34
|
+
| Divider | Visual separator between content |
|
|
35
|
+
| Dropdown | Dropdown menus and action lists |
|
|
36
|
+
| ErrorSummary | Summary of form validation errors |
|
|
37
|
+
| Field | Form field wrapper with label and validation |
|
|
38
|
+
| Fieldset | Group related form fields |
|
|
39
|
+
| Header | Global application header |
|
|
40
|
+
| Input | Basic text input field |
|
|
41
|
+
| Link | Navigation links |
|
|
42
|
+
| List | Ordered and unordered lists |
|
|
43
|
+
| Pagination | Navigate between pages of content |
|
|
44
|
+
| Popover | Contextual overlays |
|
|
45
|
+
| Radio | Single-select form inputs |
|
|
46
|
+
| Search | Search input with button |
|
|
47
|
+
| Select | Dropdown selection |
|
|
48
|
+
| Skeleton | Loading placeholder |
|
|
49
|
+
| SkipLink | Accessibility skip navigation |
|
|
50
|
+
| Spinner | Loading indicator |
|
|
51
|
+
| Suggestion | Searchable select with autocomplete |
|
|
52
|
+
| Switch | Toggle on/off settings |
|
|
53
|
+
| Table | Structured data display |
|
|
54
|
+
| Tabs | Tabbed content navigation |
|
|
55
|
+
| Tag | Static labels for categorization |
|
|
56
|
+
| Textarea | Multi-line text input |
|
|
57
|
+
| Textfield | Text input with label and validation |
|
|
58
|
+
| ToggleGroup | Grouped toggle buttons |
|
|
59
|
+
| Tooltip | Hover/focus information overlays |
|
|
16
60
|
|
|
17
61
|
## Consuming This Library (For Application Developers)
|
|
18
62
|
|
|
@@ -76,11 +120,51 @@ function MyApp({ Component, pageProps }: AppProps) {
|
|
|
76
120
|
export default MyApp;
|
|
77
121
|
```
|
|
78
122
|
|
|
79
|
-
### 3.
|
|
123
|
+
### 3. Adding the Font
|
|
124
|
+
|
|
125
|
+
The design system uses **Source Sans 3** font. Add the following to your HTML `<head>` or root layout:
|
|
126
|
+
|
|
127
|
+
```html
|
|
128
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
129
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
130
|
+
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
#### For Next.js (App Router - `src/app/layout.tsx`):
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
import './globals.css';
|
|
137
|
+
import '@digdir/designsystemet-css/index.css';
|
|
138
|
+
import 'rk-design-tokens/design-tokens-build/theme.css';
|
|
139
|
+
|
|
140
|
+
export default function RootLayout({
|
|
141
|
+
children,
|
|
142
|
+
}: {
|
|
143
|
+
children: React.ReactNode;
|
|
144
|
+
}) {
|
|
145
|
+
return (
|
|
146
|
+
<html lang="en">
|
|
147
|
+
<head>
|
|
148
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
149
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
150
|
+
<link
|
|
151
|
+
href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
|
|
152
|
+
rel="stylesheet"
|
|
153
|
+
/>
|
|
154
|
+
</head>
|
|
155
|
+
<body>{children}</body>
|
|
156
|
+
</html>
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
The CSS variable `--ds-font-family` from `rk-design-tokens` will automatically use this font.
|
|
162
|
+
|
|
163
|
+
### 4. Using Components
|
|
80
164
|
|
|
81
165
|
Once the stylesheets are included, you can start importing and using components in your project. All components you need are available directly from the `rk-designsystem` package.
|
|
82
166
|
|
|
83
|
-
####
|
|
167
|
+
#### 4.1 Import and Use Røde Kors Design System Components
|
|
84
168
|
|
|
85
169
|
Import components directly from the `rk-designsystem` package:
|
|
86
170
|
|
|
@@ -98,7 +182,7 @@ function MyComponent() {
|
|
|
98
182
|
}
|
|
99
183
|
```
|
|
100
184
|
|
|
101
|
-
####
|
|
185
|
+
#### 4.2 Example Usage in a Next.js Page
|
|
102
186
|
|
|
103
187
|
Here's an example of how to use multiple Alert components from the Røde Kors Design System within a Next.js page/component:
|
|
104
188
|
|
|
@@ -145,6 +229,33 @@ npm update rk-design-tokens
|
|
|
145
229
|
|
|
146
230
|
---
|
|
147
231
|
|
|
232
|
+
## AI-Assisted Development
|
|
233
|
+
|
|
234
|
+
For AI assistants (Claude Code, Cursor, etc.) working with this design system, an AI Design System Guide is available:
|
|
235
|
+
|
|
236
|
+
**Direct URL:**
|
|
237
|
+
```
|
|
238
|
+
https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
### Fetching the Guide
|
|
242
|
+
|
|
243
|
+
```bash
|
|
244
|
+
# macOS/Linux/Git Bash
|
|
245
|
+
curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md
|
|
246
|
+
|
|
247
|
+
# Windows PowerShell
|
|
248
|
+
Invoke-WebRequest -Uri "https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md" -OutFile "AI_DESIGN_SYSTEM_GUIDE.md"
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
### Related Resources
|
|
252
|
+
|
|
253
|
+
- **Component Metadata**: https://norwegianredcross.github.io/DesignSystem/storybook/metadata.json
|
|
254
|
+
- **Design Tokens**: https://norwegianredcross.github.io/design-tokens/theme.css
|
|
255
|
+
- **GitHub Repository**: https://github.com/norwegianredcross/DesignSystem
|
|
256
|
+
|
|
257
|
+
---
|
|
258
|
+
|
|
148
259
|
# Contributing to the Component Library
|
|
149
260
|
|
|
150
261
|
This guide provides a set of standards and best practices for creating new components. Following these guidelines ensures that our component library remains consistent, accessible, and easy to maintain.
|
|
@@ -296,11 +407,11 @@ export function IconsExample() {
|
|
|
296
407
|
|
|
297
408
|
### Accessibility guidance
|
|
298
409
|
|
|
299
|
-
- Icon + visible text: set `aria-hidden` on the icon so screen readers don
|
|
410
|
+
- Icon + visible text: set `aria-hidden` on the icon so screen readers don't announce it twice.
|
|
300
411
|
- Icon‑only triggers (e.g., a button): add a descriptive `aria-label` to the trigger, keep the icon `aria-hidden`.
|
|
301
|
-
- Color: icons inherit `currentColor`; use the component
|
|
412
|
+
- Color: icons inherit `currentColor`; use the component's variant/color to control it (e.g., button variants, tag colors).
|
|
302
413
|
- Size: set `fontSize` (e.g., `fontSize="1.25rem"`) or inline style (e.g., `style={{ fontSize: '1.25rem' }}`).
|
|
303
414
|
|
|
304
415
|
### Performance
|
|
305
416
|
|
|
306
|
-
Use named imports from `@navikt/aksel-icons` to keep bundles small—unused icons are tree‑shaken by modern bundlers.
|
|
417
|
+
Use named imports from `@navikt/aksel-icons` to keep bundles small—unused icons are tree‑shaken by modern bundlers.
|