@designsystem-se/af 31.3.1-beta.0 → 31.3.1-beta.10
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
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<div align="center">
|
|
4
|
+
<p>Arbetsförmedlingens designsystem finns för att utvecklare, designers och produktledare tillsammans ska kunna skapa bättre tjänster för den svenska arbetsmarknaden.</p>
|
|
5
|
+
<p>Utvecklas som öppen källkod tillsammans med andra myndigheter, utbildningsanordnare och kommersiella aktörer.</p>
|
|
6
|
+
<p>Stöd för React, Angular, Web Components och Figma.</p>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<div align="center">
|
|
10
|
+
<a href="https://designsystem.arbetsformedlingen.se">Dokumentation ↗</a>
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
## Kom igång
|
|
14
|
+
|
|
15
|
+
Installera designsystemet genom att köra en av följande rader
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
# React
|
|
19
|
+
npm install @designsystem-se/af-react @designsystem-se/af
|
|
20
|
+
|
|
21
|
+
# Angular
|
|
22
|
+
npm install @designsystem-se/af-angular @designsystem-se/af
|
|
23
|
+
|
|
24
|
+
# Inget ramverk
|
|
25
|
+
npm install @designsystem-se/af
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Lägg till följande rader i projektets globala css-fil
|
|
29
|
+
|
|
30
|
+
```css
|
|
31
|
+
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css';
|
|
32
|
+
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css';
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Det var allt! 🚀
|
|
36
|
+
|
|
37
|
+
## Exempel
|
|
38
|
+
|
|
39
|
+
### React
|
|
40
|
+
|
|
41
|
+
```jsx
|
|
42
|
+
// App.tsx
|
|
43
|
+
import { DigiButton } from '@designsystem-se/af-react';
|
|
44
|
+
import { ButtonVariation } from '@designsystem-se/af';
|
|
45
|
+
|
|
46
|
+
export function App() {
|
|
47
|
+
const handleClick = () => console.log('👋 Hallå Världen');
|
|
48
|
+
return (
|
|
49
|
+
<DigiButton afVariation={ButtonVariation.PRIMARY} onAfOnClick={handleClick}>
|
|
50
|
+
Hälsa
|
|
51
|
+
</DigiButton>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Angular
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
// app.component.ts
|
|
60
|
+
import { Component } from '@angular/core';
|
|
61
|
+
import { DigiArbetsformedlingenAngularModule } from '@designsystem-se/af-angular';
|
|
62
|
+
import { ButtonVariation } from '@designsystem-se/af';
|
|
63
|
+
|
|
64
|
+
@Component({
|
|
65
|
+
selector: 'app-root',
|
|
66
|
+
standalone: true,
|
|
67
|
+
imports: [DigiArbetsformedlingenAngularModule],
|
|
68
|
+
templateUrl: './app.component.html'
|
|
69
|
+
})
|
|
70
|
+
export class AppComponent {
|
|
71
|
+
buttonVariation = ButtonVariation.PRIMARY;
|
|
72
|
+
handleClick() {
|
|
73
|
+
console.log('👋 Hallå Världen');
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<!--app.component.html-->
|
|
80
|
+
<digi-button afVariation="buttonVariation" (afOnClick)="handleClick"
|
|
81
|
+
>Hälsa</digi-button
|
|
82
|
+
>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Old School
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
<!--index.html-->
|
|
89
|
+
<!doctype html>
|
|
90
|
+
<html>
|
|
91
|
+
<head>
|
|
92
|
+
<link
|
|
93
|
+
rel="stylesheet"
|
|
94
|
+
href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css" />
|
|
95
|
+
<link
|
|
96
|
+
rel="stylesheet"
|
|
97
|
+
href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css" />
|
|
98
|
+
<script
|
|
99
|
+
type="module"
|
|
100
|
+
src="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js"></script>
|
|
101
|
+
</head>
|
|
102
|
+
<body>
|
|
103
|
+
<digi-button af-variation="primary">Hälsa</digi-button>
|
|
104
|
+
<script>
|
|
105
|
+
let btn = document.querySelector('digi-button');
|
|
106
|
+
btn.addEventListener('afOnClick', () => {
|
|
107
|
+
console.log('👋 Hallå Världen');
|
|
108
|
+
});
|
|
109
|
+
</script>
|
|
110
|
+
</body>
|
|
111
|
+
</html>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Bidra till Designsystemet
|
|
115
|
+
|
|
116
|
+
Är du nyfiken på att hjälpa till med att bygga ett av sveriges mest tillgängliga och flexibla designsystem? Say no more. ✨
|
|
117
|
+
|
|
118
|
+
Vi behöver hjälp med allt ifrån kod, design, tillgänglighetsarbete, copywriting och marknadsföring.
|
|
119
|
+
|
|
120
|
+
- Läs [Contribution Guidelines](/CONTRIBUTING.md)
|
|
121
|
+
- Kolla igenom [issue tracker](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues). 💡 Nybörjartips, [filtrera efter "Mindre uppgift"](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/?sort=created_date&state=opened&label_name[]=Mindre%20uppgift)
|
|
122
|
+
|
|
123
|
+
## Kommunikation & Forum
|
|
124
|
+
|
|
125
|
+
⚠️ Observera: Dela inte känslig information eller personuppgifter. Allting i GitLab är tillgängligt för alla besökare. Vid övriga ärenden var god använd kontaktuppgifter som finns tillgängliga på [dokumentationswebben](https://designsystem.arbetsformedlingen.se).
|
|
126
|
+
|
|
127
|
+
- Har du upptäckt ett problem med designsystemet? [Skapa issue 🐛](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/new?issuable_template=bug)
|
|
128
|
+
|
|
129
|
+
- Tycker du att något saknas i designsystemet? [Skicka in önskemål 🎁](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/new?issuable_template=feature)
|
|
130
|
+
|
|
131
|
+
- Har du fastnat på något som inte känns helt rätt eller är oklart? [Ställ fråga 🙋](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/new?issuable_template=question)
|
|
132
|
+
|
|
133
|
+
## Om designsystemet
|
|
134
|
+
|
|
135
|
+
Designsystemet är välbeprövat i myndighetsvärlden sen flera år tillbaka. Komponenterna visas flera miljoner gånger per månad till olika användare.
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
Team Designsystem @ Arbetsförmedlingen 2025
|
|
@@ -109,4 +109,12 @@
|
|
|
109
109
|
* @prop --digi--navigation-context-menu--item--border-top: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-4);
|
|
110
110
|
* @prop --digi--navigation-context-menu--items--margin: 0;
|
|
111
111
|
* @prop --digi--navigation-context-menu--items--padding: var(--digi--gutter--large) 0;
|
|
112
|
+
*/ont-size--desktop: var(--digi--typography--body--font-size--desktop-large);
|
|
113
|
+
* @prop --digi--navigation-context-menu--item--background-color--active: var(--digi--color--background--neutral-6);
|
|
114
|
+
* @prop --digi--navigation-context-menu--item--display: flex;
|
|
115
|
+
* @prop --digi--navigation-context-menu--item--font-family: var(--digi--global--typography--font-family--default);
|
|
116
|
+
* @prop --digi--navigation-context-menu--item--font-wight--selected: 600;
|
|
117
|
+
* @prop --digi--navigation-context-menu--item--border-top: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-4);
|
|
118
|
+
* @prop --digi--navigation-context-menu--items--margin: 0;
|
|
119
|
+
* @prop --digi--navigation-context-menu--items--padding: var(--digi--gutter--large) 0;
|
|
112
120
|
*/
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@designsystem-se/af",
|
|
3
3
|
"author": "Arbetsförmedlingen",
|
|
4
|
-
"version": "31.3.1-beta.
|
|
4
|
+
"version": "31.3.1-beta.10",
|
|
5
5
|
"description": "Web Components for Digi Designsystem",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"main": "./dist/index.cjs.js",
|
|
@@ -30,11 +30,26 @@
|
|
|
30
30
|
"access": "public",
|
|
31
31
|
"registry": "https://registry.npmjs.org/"
|
|
32
32
|
},
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "git+https://gitlab.com/arbetsformedlingen/designsystem/digi.git"
|
|
36
|
+
},
|
|
37
|
+
"homepage": "https://designsystem.arbetsformedlingen.se/",
|
|
38
|
+
"keywords": [
|
|
39
|
+
"designsystem",
|
|
40
|
+
"Design System",
|
|
41
|
+
"Stencil",
|
|
42
|
+
"Web Components",
|
|
43
|
+
"Angular",
|
|
44
|
+
"React",
|
|
45
|
+
"Open Source"
|
|
46
|
+
],
|
|
33
47
|
"files": [
|
|
34
48
|
"components/",
|
|
35
49
|
"custom-elements.json",
|
|
36
50
|
"dist/",
|
|
37
51
|
"hydrate/",
|
|
38
|
-
"loader/"
|
|
52
|
+
"loader/",
|
|
53
|
+
"README.md"
|
|
39
54
|
]
|
|
40
55
|
}
|