@designsystem-se/af-react 31.1.1-beta.1 → 31.1.1-beta.3
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 +142 -0
- package/package.json +5 -5
package/README.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<div align="center">
|
|
4
|
+
<p>Robust Designsystem som säkerställer hög tillgänglighet, stabil drift och effektiv livscykelhantering för digitala tjänster.</p>
|
|
5
|
+
<p>Stöd för React, Angular, Web Components och Figma.</p>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
<div align="center">
|
|
9
|
+
<a href="https://designsystem.arbetsformedlingen.se">Dokumentation ↗</a>
|
|
10
|
+
|
|
11
|
+
<a href="https://designsystem.arbetsformedlingen.se/komponenter/om-komponenter">Komponenter ↗</a>
|
|
12
|
+
|
|
13
|
+
<a href="#exempel">Exempel</a>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
## Kom igång
|
|
17
|
+
|
|
18
|
+
Installera designsystemet genom att köra en av följande rader
|
|
19
|
+
|
|
20
|
+
```sh
|
|
21
|
+
# React
|
|
22
|
+
npm install @designsystem-se/af-react @designsystem-se/af
|
|
23
|
+
|
|
24
|
+
# Angular
|
|
25
|
+
npm install @designsystem-se/af-angular @designsystem-se/af
|
|
26
|
+
|
|
27
|
+
# Inget ramverk
|
|
28
|
+
npm install @designsystem-se/af
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Lägg till följande rader i projektets globala css-fil
|
|
32
|
+
|
|
33
|
+
```css
|
|
34
|
+
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css';
|
|
35
|
+
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Det var allt! 🚀
|
|
39
|
+
|
|
40
|
+
## Exempel
|
|
41
|
+
|
|
42
|
+
### React
|
|
43
|
+
|
|
44
|
+
```jsx
|
|
45
|
+
// App.tsx
|
|
46
|
+
import { DigiButton } from '@designsystem-se/af-react';
|
|
47
|
+
import { ButtonVariation } from '@designsystem-se/af';
|
|
48
|
+
|
|
49
|
+
export function App() {
|
|
50
|
+
const handleClick = () => console.log('👋 Hallå Världen');
|
|
51
|
+
return (
|
|
52
|
+
<DigiButton afVariation={ButtonVariation.PRIMARY} onAfOnClick={handleClick}>
|
|
53
|
+
Hälsa
|
|
54
|
+
</DigiButton>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Angular
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
// app.component.ts
|
|
63
|
+
import { Component } from '@angular/core';
|
|
64
|
+
import { DigiArbetsformedlingenAngularModule } from '@designsystem-se/af-angular';
|
|
65
|
+
import { ButtonVariation } from '@designsystem-se/af';
|
|
66
|
+
|
|
67
|
+
@Component({
|
|
68
|
+
selector: 'app-root',
|
|
69
|
+
standalone: true,
|
|
70
|
+
imports: [DigiArbetsformedlingenAngularModule],
|
|
71
|
+
templateUrl: './app.component.html'
|
|
72
|
+
})
|
|
73
|
+
export class AppComponent {
|
|
74
|
+
buttonVariation = ButtonVariation.PRIMARY;
|
|
75
|
+
handleClick() {
|
|
76
|
+
console.log('👋 Hallå Världen');
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<!--app.component.html-->
|
|
83
|
+
<digi-button afVariation="buttonVariation" (afOnClick)="handleClick"
|
|
84
|
+
>Hälsa</digi-button
|
|
85
|
+
>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Old School
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<!--index.html-->
|
|
92
|
+
<!doctype html>
|
|
93
|
+
<html>
|
|
94
|
+
<head>
|
|
95
|
+
<link
|
|
96
|
+
rel="stylesheet"
|
|
97
|
+
href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css" />
|
|
98
|
+
<link
|
|
99
|
+
rel="stylesheet"
|
|
100
|
+
href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css" />
|
|
101
|
+
<script
|
|
102
|
+
type="module"
|
|
103
|
+
src="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js"></script>
|
|
104
|
+
</head>
|
|
105
|
+
<body>
|
|
106
|
+
<digi-button af-variation="primary">Hälsa</digi-button>
|
|
107
|
+
<script>
|
|
108
|
+
let btn = document.querySelector('digi-button');
|
|
109
|
+
btn.addEventListener('afOnClick', () => {
|
|
110
|
+
console.log('👋 Hallå Världen');
|
|
111
|
+
});
|
|
112
|
+
</script>
|
|
113
|
+
</body>
|
|
114
|
+
</html>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Bidra till Designsystemet
|
|
118
|
+
|
|
119
|
+
Är du nyfiken på att hjälpa till med att bygga ett av sveriges mest tillgängliga och flexibla designsystem? Say no more. ✨
|
|
120
|
+
|
|
121
|
+
Vi behöver hjälp med allt ifrån kod, design, tillgänglighetsarbete, copywriting och marknadsföring.
|
|
122
|
+
|
|
123
|
+
- Läs [Contribution Guidelines](/CONTRIBUTING.md)
|
|
124
|
+
- 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)
|
|
125
|
+
|
|
126
|
+
## Kommunikation & Forum
|
|
127
|
+
|
|
128
|
+
⚠️ 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).
|
|
129
|
+
|
|
130
|
+
- Har du upptäckt ett problem med designsystemet? [Skapa issue 🐛](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/new?issuable_template=bug)
|
|
131
|
+
|
|
132
|
+
- Tycker du att något saknas i designsystemet? [Skicka in önskemål 🎁](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/new?issuable_template=feature)
|
|
133
|
+
|
|
134
|
+
- 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)
|
|
135
|
+
|
|
136
|
+
## Om designsystemet
|
|
137
|
+
|
|
138
|
+
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.
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
Team Designsystem @ Arbetsförmedlingen 2025 🦝
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@designsystem-se/af-react",
|
|
3
3
|
"author": "Arbetsförmedlingen",
|
|
4
|
-
"version": "31.1.1-beta.
|
|
4
|
+
"version": "31.1.1-beta.3",
|
|
5
5
|
"description": "React Components for Digi Designsystem",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"sideEffect": false,
|
|
8
8
|
"peerDependencies": {
|
|
9
|
-
"@designsystem-se/af": "31.3.1-beta.
|
|
9
|
+
"@designsystem-se/af": "31.3.1-beta.3",
|
|
10
10
|
"react": "^19.0.0 || ^18.0.0 || ^17.0.0",
|
|
11
11
|
"react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0"
|
|
12
12
|
},
|
|
13
13
|
"devDependencies": {
|
|
14
|
-
"
|
|
15
|
-
"@
|
|
14
|
+
"@designsystem-se/af": "file: ../package/",
|
|
15
|
+
"@stencil/react-output-target": "1.2.0"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"
|
|
18
|
+
"tslib": "^2.3.0"
|
|
19
19
|
},
|
|
20
20
|
"publishConfig": {
|
|
21
21
|
"access": "public",
|