@dep-dio/dio-designsystem 0.2.0 → 0.3.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.
- package/README.md +151 -1
- package/designsystemet.config.json +56 -0
- package/dist/assets/icons/floppydisk.svg +3 -0
- package/dist/assets/icons/menu-hamburger.svg +3 -0
- package/dist/assets/icons/pencil.svg +3 -0
- package/dist/assets/icons/social-facebook.svg +3 -0
- package/dist/assets/icons/social-flickr.svg +3 -0
- package/dist/assets/icons/social-instagram.svg +3 -0
- package/dist/assets/icons/social-linkedin.svg +3 -0
- package/dist/assets/icons/social-x.svg +3 -0
- package/dist/assets/icons/upload.svg +3 -0
- package/dist/{newsletter-subscribe/NewsletterSubscribe.d.ts → news-alert-subscribe/NewsAlertSubscribe.d.ts} +1 -1
- package/dist/styles/main.css +644 -4370
- package/dist/styles/scss-utils.scss +153 -0
- package/dist/styles.d.ts +1 -0
- package/dist/types.d.ts +18 -0
- package/dist/vite-icons-plugin.d.ts +1 -1
- package/dist/vite-icons-plugin.js.map +2 -2
- package/dist/web.d.ts +2 -2
- package/dist/web.js +14 -14
- package/dist/web.js.map +3 -3
- package/package.json +83 -70
- package/dist/styles/_mixins.scss +0 -48
package/README.md
CHANGED
|
@@ -1,3 +1,153 @@
|
|
|
1
1
|
# @dep-dio/dio-designsystem
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
DIO design system built on [Designsystemet](https://designsystemet.no).
|
|
4
|
+
|
|
5
|
+
Storybook and repository docs: [dio-designsystemet README](../../README.md).
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @dep-dio/dio-designsystem
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Peer dependencies for Vite sprite icons (optional):
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install -D vite vite-plugin-svg-icons
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
### Styles
|
|
22
|
+
|
|
23
|
+
Same stylesheet, two entry points (same idea as `@digdir/designsystemet-css`):
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
import "@dep-dio/dio-designsystem/styles"
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import "@dep-dio/dio-designsystem/styles.css";
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Web components
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import "@dep-dio/dio-designsystem/web"
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Registers Designsystemet web components and DIO custom elements.
|
|
40
|
+
|
|
41
|
+
### Nav icons (Aksel)
|
|
42
|
+
|
|
43
|
+
```ts
|
|
44
|
+
import { StarIcon } from "@dep-dio/dio-designsystem/icons"
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Vite SVG sprite
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
// vite.config.ts
|
|
51
|
+
import { createDioSvgIconsPlugin } from "@dep-dio/dio-designsystem/vite-icons-plugin"
|
|
52
|
+
|
|
53
|
+
export default defineConfig({
|
|
54
|
+
plugins: [createDioSvgIconsPlugin()],
|
|
55
|
+
})
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
import "@dep-dio/dio-designsystem/svg-icons-register"
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<svg width="24" height="24" aria-hidden="true">
|
|
64
|
+
<use href="#dio-chevron-right" />
|
|
65
|
+
</svg>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### SCSS utils
|
|
69
|
+
|
|
70
|
+
```scss
|
|
71
|
+
@use "@dep-dio/dio-designsystem/scss-utils" as *;
|
|
72
|
+
|
|
73
|
+
.my-link {
|
|
74
|
+
@include dio-text-small;
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Publishing
|
|
79
|
+
|
|
80
|
+
The package is published to [npm](https://www.npmjs.com/package/@dep-dio/dio-designsystem) as a public scoped package. Only `@dep-dio/dio-designsystem` is versioned and published; Storybook and other workspace packages are private and listed in `.changeset/config.json` under `ignore`.
|
|
81
|
+
|
|
82
|
+
### Versioning
|
|
83
|
+
|
|
84
|
+
Versions follow [Semantic Versioning](https://semver.org/):
|
|
85
|
+
|
|
86
|
+
- **patch** — bug fixes, internal refactors, non-breaking style tweaks
|
|
87
|
+
- **minor** — new components, new exports, backward-compatible features
|
|
88
|
+
- **major** — breaking API, class name, or markup changes for consumers
|
|
89
|
+
|
|
90
|
+
Each release gets a changelog entry in [`CHANGELOG.md`](./CHANGELOG.md) (created when versions are bumped).
|
|
91
|
+
|
|
92
|
+
### Changesets workflow
|
|
93
|
+
|
|
94
|
+
Releases use [Changesets](https://github.com/changesets/changesets). Contributors describe their change when opening a PR:
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
npx changeset
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
1. Choose **@dep-dio/dio-designsystem**
|
|
101
|
+
2. Pick **patch**, **minor**, or **major**
|
|
102
|
+
3. Write a short summary (becomes the changelog line)
|
|
103
|
+
|
|
104
|
+
This adds a markdown file under `.changeset/`. Commit it with the code change.
|
|
105
|
+
|
|
106
|
+
When changesets on `main` are ready to release:
|
|
107
|
+
|
|
108
|
+
1. **Version** — bump `package.json` and update changelogs:
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
npm run version-packages
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Or merge the **“chore: version packages”** PR that the release workflow opens (see below).
|
|
115
|
+
|
|
116
|
+
2. **Publish** — build and push to npm:
|
|
117
|
+
|
|
118
|
+
```bash
|
|
119
|
+
npm run release
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
This runs `npm run build:package` then `changeset publish`. You need `npm login` or an `NPM_TOKEN` with publish access to the `@dep-dio` scope.
|
|
123
|
+
|
|
124
|
+
### Automated release (GitHub Actions)
|
|
125
|
+
|
|
126
|
+
The [Release workflow](../../.github/workflows/release.yml) uses [changesets/action](https://github.com/changesets/action). It is triggered manually (**Actions → Release → Run workflow**).
|
|
127
|
+
|
|
128
|
+
With pending changesets on `main`, the workflow either:
|
|
129
|
+
|
|
130
|
+
- opens a PR that runs `npm run version-packages` (version bump + changelog), or
|
|
131
|
+
- runs `npm run release` and publishes to npm if versions were already bumped and no unpublished changesets remain
|
|
132
|
+
|
|
133
|
+
Repository setup:
|
|
134
|
+
|
|
135
|
+
1. Add an **`NPM_TOKEN`** secret (npm automation token with publish rights for `@dep-dio/dio-designsystem`)
|
|
136
|
+
2. Ensure GitHub Actions can create pull requests (default `GITHUB_TOKEN` is used by the action)
|
|
137
|
+
|
|
138
|
+
Typical flow:
|
|
139
|
+
|
|
140
|
+
1. Merge feature PRs that include `.changeset/*.md` files
|
|
141
|
+
2. Run the Release workflow
|
|
142
|
+
3. Merge the version PR if one is opened
|
|
143
|
+
4. Run the Release workflow again to publish (or let it publish in the same run if nothing is left to version)
|
|
144
|
+
|
|
145
|
+
### Local publish check
|
|
146
|
+
|
|
147
|
+
Verify the package builds before releasing:
|
|
148
|
+
|
|
149
|
+
```bash
|
|
150
|
+
npm run build:package
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
Inspect `dist/` — that is what npm consumers receive (`files` in `package.json` is `dist` only).
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
|
|
3
|
+
"clean": true,
|
|
4
|
+
"outDir": "./design-tokens",
|
|
5
|
+
"themes": {
|
|
6
|
+
"theme": {
|
|
7
|
+
"colors": {
|
|
8
|
+
"primary": "#3867C8",
|
|
9
|
+
"accent1": "#11846b",
|
|
10
|
+
"regjeringsbla": "#002E5E",
|
|
11
|
+
"neutral": "#333333"
|
|
12
|
+
},
|
|
13
|
+
"overrides": {
|
|
14
|
+
"colors": {
|
|
15
|
+
"primary": {
|
|
16
|
+
"base-hover": {
|
|
17
|
+
"light": "#CD4658"
|
|
18
|
+
},
|
|
19
|
+
"base-active": {
|
|
20
|
+
"light": "#BC3345"
|
|
21
|
+
},
|
|
22
|
+
"text-subtle": {
|
|
23
|
+
"light": "#3867C8"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"accent1": {
|
|
27
|
+
"base-active": {
|
|
28
|
+
"light": "#BC3345"
|
|
29
|
+
},
|
|
30
|
+
"base-hover": {
|
|
31
|
+
"light": "#CD4658"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"neutral": {
|
|
35
|
+
"surface-default": {
|
|
36
|
+
"light": "#EDEDED"
|
|
37
|
+
},
|
|
38
|
+
"base-active": {
|
|
39
|
+
"light": "#BC3345"
|
|
40
|
+
},
|
|
41
|
+
"base-hover": {
|
|
42
|
+
"light": "#CD4658"
|
|
43
|
+
},
|
|
44
|
+
"text-default": {
|
|
45
|
+
"light": "#333333"
|
|
46
|
+
},
|
|
47
|
+
"text-subtle": {
|
|
48
|
+
"light": "#333333"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"borderRadius": 0
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3.25C3.58579 3.25 3.25 3.58579 3.25 4V20C3.25 20.4142 3.58579 20.75 4 20.75H20C20.4142 20.75 20.75 20.4142 20.75 20V6C20.75 5.80109 20.671 5.61032 20.5303 5.46967L18.5303 3.46967C18.3897 3.32902 18.1989 3.25 18 3.25H4ZM19.25 6.31066L17.6893 4.75H16.75V7C16.75 7.41421 16.4142 7.75 16 7.75H8C7.58579 7.75 7.25 7.41421 7.25 7V4.75H4.75V19.25H6.25V11C6.25 10.5858 6.58579 10.25 7 10.25H17C17.4142 10.25 17.75 10.5858 17.75 11V19.25H19.25V6.31066ZM16.25 19.25H7.75V11.75H16.25V19.25ZM15.25 4.75V6.25H8.75V4.75H15.25ZM9.25 14C9.25 13.5858 9.58579 13.25 10 13.25H14C14.4142 13.25 14.75 13.5858 14.75 14C14.75 14.4142 14.4142 14.75 14 14.75H10C9.58579 14.75 9.25 14.4142 9.25 14ZM9.25 17C9.25 16.5858 9.58579 16.25 10 16.25H13C13.4142 16.25 13.75 16.5858 13.75 17C13.75 17.4142 13.4142 17.75 13 17.75H10C9.58579 17.75 9.25 17.4142 9.25 17Z" />
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 6C2.75 5.58579 3.08579 5.25 3.5 5.25H20.5C20.9142 5.25 21.25 5.58579 21.25 6C21.25 6.41421 20.9142 6.75 20.5 6.75H3.5C3.08579 6.75 2.75 6.41421 2.75 6ZM2.75 12C2.75 11.5858 3.08579 11.25 3.5 11.25H20.5C20.9142 11.25 21.25 11.5858 21.25 12C21.25 12.4142 20.9142 12.75 20.5 12.75H3.5C3.08579 12.75 2.75 12.4142 2.75 12ZM3.5 17.25C3.08579 17.25 2.75 17.5858 2.75 18C2.75 18.4142 3.08579 18.75 3.5 18.75H20.5C20.9142 18.75 21.25 18.4142 21.25 18C21.25 17.5858 20.9142 17.25 20.5 17.25H3.5Z"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6381 4.41742C18.3693 3.13949 16.3036 3.13578 15.0302 4.40915L5.65182 13.7876C5.56169 13.8777 5.49602 13.9893 5.461 14.1118L4.04679 19.0616C3.97205 19.3232 4.04482 19.6047 4.23693 19.7973C4.42905 19.9899 4.7104 20.0634 4.97215 19.9893L9.91261 18.5912C10.0359 18.5563 10.1481 18.4904 10.2387 18.3999L19.6298 9.00875C20.8967 7.74183 20.9004 5.68889 19.6381 4.41742ZM16.0909 5.46981C16.777 4.78372 17.89 4.78571 18.5736 5.47427C19.2538 6.15934 19.2518 7.26547 18.5692 7.94809L18.3397 8.17752L15.8615 5.69924L16.0909 5.46981ZM14.8008 6.7599L6.8499 14.7108L5.85885 18.1795L9.31619 17.2011L17.2791 9.23818L14.8008 6.7599Z" />
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
2
|
+
<path transform="matrix(1 0 0 -1 0 960)" d="M591.744-64h-213.248c-17.707 0-32 14.293-32 32v458.453h-95.915c-17.707 0-32 14.293-32 32v170.581c0 17.707 14.293 32 32 32h95.957v59.691c-0.043 56.107 16.64 239.275 231.125 239.275h184.661c17.707 0 32-14.293 32-32v-170.581c0-17.707-14.293-32-32-32h-127.957c-6.272-0.555-11.307-6.699-10.795-11.733l0.085-52.651h149.76c9.045 0 17.707-3.84 23.765-10.581 6.059-6.699 9.003-15.701 8.107-24.704l-17.493-170.624c-1.707-16.299-15.445-28.715-31.829-28.715h-132.181v-458.411c-0.043-17.707-14.379-32-32.043-32zM410.496 0h149.205v458.453c0 17.707 14.293 32 32 32h135.296l10.923 106.581h-146.261c-17.707 0-32 14.293-32 32v81.451c-3.925 37.76 26.069 74.453 66.987 78.549 1.067 0.085 6.613 0.384 7.637 0.384h95.957v106.581h-152.661c-145.451 0-167.168-109.824-167.168-175.275v-91.691c0-17.707-14.293-32-32-32h-95.829v-106.581h95.957c17.707 0 32-14.293 32-32v-458.453z"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
2
|
+
<path transform="matrix(1 0 0 -1 0 960)" d="M783.36 207.36c-132.693 0-240.64 107.947-240.64 240.64s107.947 240.64 240.64 240.64 240.64-107.947 240.64-240.64-107.947-240.64-240.64-240.64zM783.36 624.64c-97.365 0-176.64-79.232-176.64-176.64s79.232-176.64 176.64-176.64 176.64 79.232 176.64 176.64-79.232 176.64-176.64 176.64zM240.64 207.36c-132.693 0-240.64 107.947-240.64 240.64s107.947 240.64 240.64 240.64 240.64-107.947 240.64-240.64-107.947-240.64-240.64-240.64zM240.64 624.64c-97.408 0-176.64-79.232-176.64-176.64s79.232-176.64 176.64-176.64 176.64 79.232 176.64 176.64-79.275 176.64-176.64 176.64z"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
2
|
+
<path transform="matrix(1 0 0 -1 0 960)" d="M783.36-64h-542.72c-132.693 0-240.64 107.989-240.64 240.64v542.72c0 132.693 107.947 240.64 240.64 240.64h542.72c132.693 0 240.64-107.947 240.64-240.64v-542.72c0-132.651-107.947-240.64-240.64-240.64zM240.64 896c-97.408 0-176.64-79.232-176.64-176.64v-542.72c0-97.408 79.232-176.64 176.64-176.64h542.72c97.365 0 176.64 79.232 176.64 176.64v542.72c0 97.408-79.232 176.64-176.64 176.64h-542.72zM512 266.667c-100.011 0-181.333 81.323-181.333 181.333s81.323 181.333 181.333 181.333c100.011 0 181.333-81.323 181.333-181.333 0-99.968-81.323-181.333-181.333-181.333zM512 565.333c-64.683 0-117.333-52.608-117.333-117.333 0-64.683 52.608-117.333 117.333-117.333s117.333 52.608 117.333 117.333c0 64.725-52.651 117.333-117.333 117.333zM682.667 74.667h-341.333c-111.787 0-202.667 90.923-202.667 202.667v341.333c0 111.787 90.88 202.667 202.667 202.667h341.333c111.787 0 202.667-90.88 202.667-202.667v-341.333c0-111.744-90.88-202.667-202.667-202.667zM341.333 757.333c-76.459 0-138.667-62.165-138.667-138.667v-341.333c0-76.459 62.208-138.667 138.624-138.667h341.376c76.459 0 138.624 62.208 138.624 138.667v341.333c0 76.459-62.208 138.667-138.624 138.667h-341.333zM709.76 688c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667z"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
2
|
+
<path transform="matrix(1 0 0 -1 0 960)" d="M992-37.12h-229.035c-17.707 0-32 14.293-32 32v309.205c0.085 16-6.016 30.891-17.152 42.155-10.24 10.325-23.595 16.427-37.973 17.408-1.323-0.171-2.731-0.299-4.139-0.299-32.683 0-59.264-26.581-59.264-59.264v-309.205c0-17.707-14.293-32-32-32h-217.899c-17.707 0-32 14.293-32 32v594.048c0 17.707 14.293 32 32 32h217.899c17.707 0 32-14.293 32-32v-7.168c45.781 25.131 97.408 38.955 150.144 39.637 161.408 0 261.419-123.563 261.419-322.432v-304.043c0-17.749-14.293-32.043-32-32.043zM794.965 26.88h165.035v272.043c0 164.267-71.808 258.432-197.035 258.432-58.923-0.768-116.565-22.315-161.835-60.672-9.515-7.979-22.869-9.813-34.176-4.608-11.307 5.248-18.517 16.555-18.517 29.013v35.84h-153.899v-530.048h153.899v277.205c0 66.005 52.139 120.021 117.376 123.136 1.92 0.341 3.883 0.512 5.888 0.512 33.493-0.171 64.427-13.099 87.552-36.48 23.168-23.424 35.84-54.4 35.669-87.339v-277.035zM671.701 395.733v0zM241.408-37.12h-207.275c-17.707 0-32 14.293-32 32v594.048c0 17.707 14.293 32 32 32h207.275c17.707 0 32-14.293 32-32v-594.048c0-17.707-14.293-32-32-32zM66.133 26.88h143.275v530.048h-143.275v-530.048zM138.624 655.872c-76.416 0-138.624 62.208-138.624 138.624s62.208 138.624 138.624 138.624c73.301-0.597 133.291-58.368 137.515-130.432 0.768-2.645 1.109-5.376 1.109-8.192 0-76.416-62.165-138.624-138.624-138.624zM138.368 869.12c-40.917 0-74.368-33.451-74.368-74.624s33.451-74.624 74.624-74.624c39.040 0 71.168 30.123 74.368 68.352-0.427 2.048-0.64 4.139-0.64 6.272 0.043 40.832-33.152 74.325-73.984 74.624z"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.96967 9.03033C7.26256 9.32322 7.73744 9.32322 8.03033 9.03033L11.25 5.81066V14.5C11.25 14.9142 11.5858 15.25 12 15.25C12.4142 15.25 12.75 14.9142 12.75 14.5V5.81066L15.9697 9.03033C16.2626 9.32322 16.7374 9.32322 17.0303 9.03033C17.3232 8.73744 17.3232 8.26256 17.0303 7.96967L12.5303 3.46967C12.2374 3.17678 11.7626 3.17678 11.4697 3.46967L6.96967 7.96967C6.67678 8.26256 6.67678 8.73744 6.96967 9.03033ZM4.75 15.5C4.75 15.0858 4.41421 14.75 4 14.75C3.58579 14.75 3.25 15.0858 3.25 15.5V19C3.25 19.9665 4.0335 20.75 5 20.75H19C19.9665 20.75 20.75 19.9665 20.75 19V15.5C20.75 15.0858 20.4142 14.75 20 14.75C19.5858 14.75 19.25 15.0858 19.25 15.5V19C19.25 19.1381 19.1381 19.25 19 19.25H5C4.86193 19.25 4.75 19.1381 4.75 19V15.5Z" />
|
|
3
|
+
</svg>
|