rk-designsystem 1.1.97 → 1.1.99

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 (5) hide show
  1. package/README.md +103 -103
  2. package/dist/componentlibrary.es.js +186 -186
  3. package/dist/componentlibrary.umd.js +8 -8
  4. package/dist/styles.css +20 -0
  5. package/package.json +15 -7
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # Røde Kors Design System Component Library (Norwegian Red Cross)
2
2
 
3
- ## Live Storybook URL
3
+ ## Live Documentation URL
4
4
 
5
- [https://norwegianredcross.github.io/DesignSystem/storybook/?path=/docs/welcome--docs](https://norwegianredcross.github.io/DesignSystem/storybook/?path=/docs/welcome--docs)
5
+ [https://norwegianredcross.github.io/DesignSystem/#](https://norwegianredcross.github.io/DesignSystem/#)
6
6
 
7
7
  ## Overview
8
8
 
@@ -12,137 +12,137 @@ 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
- Storybook serves as the interactive documentation and development environment for viewing and testing these components.
16
-
17
- ## Consuming This Library (For Application Developers)
18
-
19
- To use the Røde Kors Design System in your Next.js (or any React) application:
20
-
21
- ### 1. Installation
22
-
23
- Install the necessary npm packages for your project. You will need three packages: the component library itself (`rk-designsystem`), the base styles from Digdir, and the Røde Kors theme package (`rk-design-tokens`).
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 |
60
+
61
+ ## Quick Start (Recommended)
62
+
63
+ The simplest way to get started with the Røde Kors Design System:
64
+
65
+ ### 1. Install
24
66
 
25
67
  ```bash
26
- # npm
27
- npm install rk-designsystem @digdir/designsystemet-css rk-design-tokens
28
-
29
- # yarn
30
- yarn add rk-designsystem @digdir/designsystemet-css rk-design-tokens
31
-
32
- # pnpm
33
- pnpm add rk-designsystem @digdir/designsystemet-css rk-design-tokens
68
+ npm install rk-designsystem
34
69
  ```
35
70
 
36
- **Note:** You do not need to install `@digdir/designsystemet-react` separately, as all required components are included within the `rk-designsystem` package.
71
+ ### 2. Import Styles
37
72
 
38
- ### 2. Including Styles (CSS)
73
+ Add this import once at the top level of your app (e.g., `layout.tsx`, `_app.tsx`, or `main.tsx`):
39
74
 
40
- For the components to be styled correctly, you must import the stylesheets at the highest level of your application, for instance, in your `layout.tsx` (for Next.js App Router) or `_app.tsx` (for Next.js Pages Router).
75
+ ```typescript
76
+ import 'rk-designsystem/styles';
77
+ ```
41
78
 
42
- **Crucial Order:** It's vital that the base stylesheet (`@digdir/designsystemet-css`) is loaded **before** the Røde Kors theme file (`rk-design-tokens`). This ensures our theme's tokens can correctly override the default values.
79
+ This single import includes:
80
+ - All component styles
81
+ - Røde Kors theme (colors, spacing, etc.)
82
+ - Source Sans 3 font
43
83
 
44
- #### Example for Next.js (App Router - `src/app/layout.tsx`):
84
+ ### 3. Use Components
45
85
 
46
86
  ```tsx
47
- import './globals.css'; // Your own global styles (if any)
48
- import '@digdir/designsystemet-css/index.css'; // Base stylesheet for components
49
- import 'rk-design-tokens/design-tokens-build/theme.css'; // Røde Kors theme
50
-
51
- export default function RootLayout({
52
- children,
53
- }: {
54
- children: React.ReactNode;
55
- }) {
87
+ import { Button, Alert } from 'rk-designsystem';
88
+
89
+ function MyComponent() {
56
90
  return (
57
- <html lang="en">
58
- <body>{children}</body>
59
- </html>
91
+ <Alert variant="success">
92
+ Welcome to Røde Kors Design System!
93
+ </Alert>
60
94
  );
61
95
  }
62
96
  ```
63
97
 
64
- #### Example for Next.js (Pages Router - `pages/_app.tsx`):
65
-
66
- ```tsx
67
- import '../styles/globals.css'; // Your own global styles (if any)
68
- import '@digdir/designsystemet-css/index.css'; // Base stylesheet for components
69
- import 'rk-design-tokens/design-tokens-build/theme.css'; // Røde Kors theme
70
- import type { AppProps } from 'next/app';
71
-
72
- function MyApp({ Component, pageProps }: AppProps) {
73
- return <Component {...pageProps} />;
74
- }
98
+ That's it! You're ready to go.
75
99
 
76
- export default MyApp;
77
- ```
100
+ ---
78
101
 
79
- ### 3. Using Components
102
+ ## Advanced Installation (Manual Control)
80
103
 
81
- 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.
104
+ If you need more control over the CSS or want to manage dependencies separately:
82
105
 
83
- #### 3.1 Import and Use Røde Kors Design System Components
106
+ ### 1. Installation
84
107
 
85
- Import components directly from the `rk-designsystem` package:
108
+ ```bash
109
+ npm install rk-designsystem @digdir/designsystemet-css rk-design-tokens
110
+ ```
86
111
 
87
- ```tsx
88
- import { Alert } from 'rk-designsystem'; // Import necessary components
112
+ ### 2. Import Styles (Order Matters!)
89
113
 
90
- function MyComponent() {
91
- return (
92
- <>
93
- <Alert variant="info" onClose={() => console.log('Alert closed!')}>
94
- This is an informational message from the Red Cross Design System.
95
- </Alert>
96
- </>
97
- );
98
- }
114
+ ```typescript
115
+ import '@digdir/designsystemet-css/index.css'; // Base styles FIRST
116
+ import 'rk-design-tokens/design-tokens-build/theme.css'; // Theme SECOND
99
117
  ```
100
118
 
101
- #### 3.2 Example Usage in a Next.js Page
102
-
103
- Here's an example of how to use multiple Alert components from the Røde Kors Design System within a Next.js page/component:
119
+ ---
104
120
 
105
- ```tsx
106
- 'use client'; // Remember 'use client' for interactive components in App Router
121
+ ## AI-Assisted Development
107
122
 
108
- import React from 'react';
109
- import { Alert } from 'rk-designsystem'; // Import the components you need
123
+ For AI assistants (Claude Code, Cursor, etc.) working with this design system, an AI Design System Guide is available:
110
124
 
111
- export default function Home() {
112
- return (
113
- <div className="container mx-auto p-8">
114
- <h1 className="text-3xl font-bold mb-8">
115
- Røde Kors Design System Example
116
- </h1>
117
-
118
- <section>
119
- <h2 className="text-2xl font-semibold mb-4">Alerts</h2>
120
- {/* Røde Kors Design System Alerts */}
121
- <Alert variant="success">
122
- <p>
123
- Welcome! This message is styled with the official Røde Kors theme.
124
- </p>
125
- </Alert>
126
-
127
- <Alert variant="warning" className="mt-4">
128
- <p>
129
- Important information using the official Røde Kors theme.
130
- </p>
131
- </Alert>
132
- </section>
133
-
134
- {/* More Røde Kors components can be added here as needed */}
135
- </div>
136
- );
137
- }
125
+ **Direct URL:**
126
+ ```
127
+ https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md
138
128
  ```
139
129
 
140
- The appearance of all components is fully controlled by the `rk-design-tokens` package. To receive any visual updates to the brand theme (like a new primary color), simply update the package to its latest version:
130
+ ### Fetching the Guide
141
131
 
142
132
  ```bash
143
- npm update rk-design-tokens
133
+ # macOS/Linux/Git Bash
134
+ curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md
135
+
136
+ # Windows PowerShell
137
+ Invoke-WebRequest -Uri "https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md" -OutFile "AI_DESIGN_SYSTEM_GUIDE.md"
144
138
  ```
145
139
 
140
+ ### Related Resources
141
+
142
+ - **Component Metadata**: https://norwegianredcross.github.io/DesignSystem/storybook/metadata.json
143
+ - **Design Tokens**: https://norwegianredcross.github.io/design-tokens/theme.css
144
+ - **GitHub Repository**: https://github.com/norwegianredcross/DesignSystem
145
+
146
146
  ---
147
147
 
148
148
  # Contributing to the Component Library
@@ -296,11 +296,11 @@ export function IconsExample() {
296
296
 
297
297
  ### Accessibility guidance
298
298
 
299
- - Icon + visible text: set `aria-hidden` on the icon so screen readers don’t announce it twice.
299
+ - Icon + visible text: set `aria-hidden` on the icon so screen readers don't announce it twice.
300
300
  - 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’s variant/color to control it (e.g., button variants, tag colors).
301
+ - Color: icons inherit `currentColor`; use the component's variant/color to control it (e.g., button variants, tag colors).
302
302
  - Size: set `fontSize` (e.g., `fontSize="1.25rem"`) or inline style (e.g., `style={{ fontSize: '1.25rem' }}`).
303
303
 
304
304
  ### Performance
305
305
 
306
- Use named imports from `@navikt/aksel-icons` to keep bundles small—unused icons are tree‑shaken by modern bundlers.
306
+ Use named imports from `@navikt/aksel-icons` to keep bundles small—unused icons are tree‑shaken by modern bundlers.