@ks-digital/designsystem-react 0.0.1-alpha.1 → 0.0.1-alpha.2
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/dist/README.md +49 -0
- package/dist/components/Alert/Alert.d.ts +2 -0
- package/dist/components/Avatar/Avatar.d.ts +2 -0
- package/dist/components/Badge/Badge.d.ts +2 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +2 -0
- package/dist/components/Button/Button.d.ts +2 -0
- package/dist/components/Card/Card.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.d.ts +2 -0
- package/dist/components/Chip/Chip.d.ts +2 -0
- package/dist/components/Details/Details.d.ts +2 -0
- package/dist/components/Dialog/Dialog.d.ts +2 -0
- package/dist/components/Divider/Divider.d.ts +2 -0
- package/dist/components/Dropdown/Dropdown.d.ts +2 -0
- package/dist/components/ErrorSummary/ErrorSummary.d.ts +2 -0
- package/dist/components/Field/Field.d.ts +2 -0
- package/dist/components/Fieldset/Fieldset.d.ts +2 -0
- package/dist/components/Heading/Heading.d.ts +2 -0
- package/dist/components/Input/Input.d.ts +2 -0
- package/dist/components/Label/Label.d.ts +2 -0
- package/dist/components/Link/Link.d.ts +2 -0
- package/dist/components/List/List.d.ts +2 -0
- package/dist/components/Loaders/index.d.ts +2 -0
- package/dist/components/Loaders/skeleton/Skeleton.d.ts +2 -0
- package/dist/components/Loaders/spinner/Spinner.d.ts +2 -0
- package/dist/components/MultiSuggestion/MultiSuggestion.d.ts +2 -0
- package/dist/components/Pagination/Pagination.d.ts +2 -0
- package/dist/components/Paragraph/Paragraph.d.ts +2 -0
- package/dist/components/Popover/Popover.d.ts +2 -0
- package/dist/components/Radio/Radio.d.ts +2 -0
- package/dist/components/Search/Search.d.ts +2 -0
- package/dist/components/Select/Select.d.ts +2 -0
- package/dist/components/SkipLink/SkipLink.d.ts +2 -0
- package/dist/components/Suggestion/Suggestion.d.ts +2 -0
- package/dist/components/Switch/Switch.d.ts +2 -0
- package/dist/components/Table/Table.d.ts +2 -0
- package/dist/components/Tabs/Tabs.d.ts +2 -0
- package/dist/components/Tag/Tag.d.ts +2 -0
- package/dist/components/Textarea/Textarea.d.ts +2 -0
- package/dist/components/Textfield/Textfield.d.ts +2 -0
- package/dist/components/ToggleGroup/ToggleGroup.d.ts +2 -0
- package/dist/components/Tooltip/Tooltip.d.ts +2 -0
- package/dist/components/ValidationMessage/ValidationMessage.d.ts +2 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +39 -0
- package/dist/index.js +62 -0
- package/dist/package.json +36 -0
- package/package.json +1 -1
package/dist/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# KS Digital Designsystem for React
|
|
2
|
+
|
|
3
|
+
This library provides React components for KS Digital, designed to align closely with the components from [Designsystemet.no](https://www.designsystemet.no/komponenter).
|
|
4
|
+
|
|
5
|
+
## Installation (WIP)
|
|
6
|
+
|
|
7
|
+
Install the required packages using your preferred package manager:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @ks-digital/designsystem-react @ks-digital/designsystem-themes
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Setup
|
|
14
|
+
|
|
15
|
+
### 1. Include the Inter Font
|
|
16
|
+
|
|
17
|
+
Add the Inter font to your `index.html`. This API supports the same parameters as the Google Fonts API, allowing you to customize the font weights as needed:
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<link
|
|
21
|
+
href="https://static.fiks.ks.no/googlefonts/googleapis/css2?family=Inter&display=swap"
|
|
22
|
+
rel="stylesheet"
|
|
23
|
+
/>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### 2. Import Base Styles and Themes
|
|
27
|
+
|
|
28
|
+
Import the base styles and the theme you want to use in your application:
|
|
29
|
+
|
|
30
|
+
```javascript
|
|
31
|
+
import '@ks-digital/designsystem-themes/base.css'
|
|
32
|
+
import '@ks-digital/designsystem-themes/ledsagerbevis.css'
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### 3. Use Components
|
|
36
|
+
|
|
37
|
+
Import and use the components you need. You can explore the available components at [Designsystemet.no](https://www.designsystemet.no/komponenter):
|
|
38
|
+
|
|
39
|
+
```javascript
|
|
40
|
+
import { Button } from '@ks-digital/designsystem-react'
|
|
41
|
+
|
|
42
|
+
function MyComponent() {
|
|
43
|
+
return <Button data-size="lg">My Button</Button>
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Example
|
|
48
|
+
|
|
49
|
+
A complete example setup is available in the `react-demo-app` located under the `apps` folder.
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { Chip, ChipButton, ChipButtonProps, ChipCheckbox, ChipCheckboxProps, ChipRadio, ChipRadioProps, ChipRemovable, ChipRemovableProps } from '@digdir/designsystemet-react';
|
|
2
|
+
export { Chip, ChipButton, ChipButtonProps, ChipCheckbox, ChipCheckboxProps, ChipRadio, ChipRadioProps, ChipRemovable, ChipRemovableProps, };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { EXPERIMENTAL_MultiSuggestion, EXPERIMENTAL_MultiSuggestionInput, EXPERIMENTAL_MultiSuggestionList, EXPERIMENTAL_MultiSuggestionOption, EXPERIMENTAL_MultiSuggestionChips, EXPERIMENTAL_MultiSuggestionEmpty, EXPERIMENTAL_MultiSuggestionClear, MultiSuggestionProps, MultiSuggestionInputProps, MultiSuggestionListProps, MultiSuggestionOptionProps, MultiSuggestionChipsProps, MultiSuggestionEmptyProps, MultiSuggestionClearProps } from '@digdir/designsystemet-react';
|
|
2
|
+
export { EXPERIMENTAL_MultiSuggestion, EXPERIMENTAL_MultiSuggestionInput, EXPERIMENTAL_MultiSuggestionList, EXPERIMENTAL_MultiSuggestionOption, EXPERIMENTAL_MultiSuggestionChips, EXPERIMENTAL_MultiSuggestionEmpty, EXPERIMENTAL_MultiSuggestionClear, MultiSuggestionProps, MultiSuggestionInputProps, MultiSuggestionListProps, MultiSuggestionOptionProps, MultiSuggestionChipsProps, MultiSuggestionEmptyProps, MultiSuggestionClearProps, };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { EXPERIMENTAL_Suggestion, EXPERIMENTAL_SuggestionList, EXPERIMENTAL_SuggestionInput, EXPERIMENTAL_SuggestionEmpty, EXPERIMENTAL_SuggestionOption, EXPERIMENTAL_SuggestionClear, SuggestionProps, SuggestionListProps, SuggestionInputProps, SuggestionEmptyProps, SuggestionOptionProps, SuggestionClearProps } from '@digdir/designsystemet-react';
|
|
2
|
+
export { EXPERIMENTAL_Suggestion, EXPERIMENTAL_SuggestionList, EXPERIMENTAL_SuggestionInput, EXPERIMENTAL_SuggestionEmpty, EXPERIMENTAL_SuggestionOption, EXPERIMENTAL_SuggestionClear, SuggestionProps, SuggestionListProps, SuggestionInputProps, SuggestionEmptyProps, SuggestionOptionProps, SuggestionClearProps, };
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@digdir/designsystemet-css");const e=require("@digdir/designsystemet-react");Object.defineProperty(exports,"Alert",{enumerable:!0,get:()=>e.Alert});Object.defineProperty(exports,"Avatar",{enumerable:!0,get:()=>e.Avatar});Object.defineProperty(exports,"Badge",{enumerable:!0,get:()=>e.Badge});Object.defineProperty(exports,"Breadcrumbs",{enumerable:!0,get:()=>e.Breadcrumbs});Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>e.Button});Object.defineProperty(exports,"Card",{enumerable:!0,get:()=>e.Card});Object.defineProperty(exports,"Checkbox",{enumerable:!0,get:()=>e.Checkbox});Object.defineProperty(exports,"Chip",{enumerable:!0,get:()=>e.Chip});Object.defineProperty(exports,"ChipButton",{enumerable:!0,get:()=>e.ChipButton});Object.defineProperty(exports,"ChipCheckbox",{enumerable:!0,get:()=>e.ChipCheckbox});Object.defineProperty(exports,"ChipRadio",{enumerable:!0,get:()=>e.ChipRadio});Object.defineProperty(exports,"ChipRemovable",{enumerable:!0,get:()=>e.ChipRemovable});Object.defineProperty(exports,"Details",{enumerable:!0,get:()=>e.Details});Object.defineProperty(exports,"Dialog",{enumerable:!0,get:()=>e.Dialog});Object.defineProperty(exports,"Divider",{enumerable:!0,get:()=>e.Divider});Object.defineProperty(exports,"Dropdown",{enumerable:!0,get:()=>e.Dropdown});Object.defineProperty(exports,"EXPERIMENTAL_MultiSuggestion",{enumerable:!0,get:()=>e.EXPERIMENTAL_MultiSuggestion});Object.defineProperty(exports,"EXPERIMENTAL_MultiSuggestionChips",{enumerable:!0,get:()=>e.EXPERIMENTAL_MultiSuggestionChips});Object.defineProperty(exports,"EXPERIMENTAL_MultiSuggestionClear",{enumerable:!0,get:()=>e.EXPERIMENTAL_MultiSuggestionClear});Object.defineProperty(exports,"EXPERIMENTAL_MultiSuggestionEmpty",{enumerable:!0,get:()=>e.EXPERIMENTAL_MultiSuggestionEmpty});Object.defineProperty(exports,"EXPERIMENTAL_MultiSuggestionInput",{enumerable:!0,get:()=>e.EXPERIMENTAL_MultiSuggestionInput});Object.defineProperty(exports,"EXPERIMENTAL_MultiSuggestionList",{enumerable:!0,get:()=>e.EXPERIMENTAL_MultiSuggestionList});Object.defineProperty(exports,"EXPERIMENTAL_MultiSuggestionOption",{enumerable:!0,get:()=>e.EXPERIMENTAL_MultiSuggestionOption});Object.defineProperty(exports,"EXPERIMENTAL_Suggestion",{enumerable:!0,get:()=>e.EXPERIMENTAL_Suggestion});Object.defineProperty(exports,"EXPERIMENTAL_SuggestionClear",{enumerable:!0,get:()=>e.EXPERIMENTAL_SuggestionClear});Object.defineProperty(exports,"EXPERIMENTAL_SuggestionEmpty",{enumerable:!0,get:()=>e.EXPERIMENTAL_SuggestionEmpty});Object.defineProperty(exports,"EXPERIMENTAL_SuggestionInput",{enumerable:!0,get:()=>e.EXPERIMENTAL_SuggestionInput});Object.defineProperty(exports,"EXPERIMENTAL_SuggestionList",{enumerable:!0,get:()=>e.EXPERIMENTAL_SuggestionList});Object.defineProperty(exports,"EXPERIMENTAL_SuggestionOption",{enumerable:!0,get:()=>e.EXPERIMENTAL_SuggestionOption});Object.defineProperty(exports,"ErrorSummary",{enumerable:!0,get:()=>e.ErrorSummary});Object.defineProperty(exports,"Field",{enumerable:!0,get:()=>e.Field});Object.defineProperty(exports,"Fieldset",{enumerable:!0,get:()=>e.Fieldset});Object.defineProperty(exports,"Heading",{enumerable:!0,get:()=>e.Heading});Object.defineProperty(exports,"Input",{enumerable:!0,get:()=>e.Input});Object.defineProperty(exports,"Label",{enumerable:!0,get:()=>e.Label});Object.defineProperty(exports,"Link",{enumerable:!0,get:()=>e.Link});Object.defineProperty(exports,"List",{enumerable:!0,get:()=>e.List});Object.defineProperty(exports,"ListItem",{enumerable:!0,get:()=>e.ListItem});Object.defineProperty(exports,"ListOrdered",{enumerable:!0,get:()=>e.ListOrdered});Object.defineProperty(exports,"ListUnordered",{enumerable:!0,get:()=>e.ListUnordered});Object.defineProperty(exports,"Pagination",{enumerable:!0,get:()=>e.Pagination});Object.defineProperty(exports,"Paragraph",{enumerable:!0,get:()=>e.Paragraph});Object.defineProperty(exports,"Popover",{enumerable:!0,get:()=>e.Popover});Object.defineProperty(exports,"Radio",{enumerable:!0,get:()=>e.Radio});Object.defineProperty(exports,"Search",{enumerable:!0,get:()=>e.Search});Object.defineProperty(exports,"Select",{enumerable:!0,get:()=>e.Select});Object.defineProperty(exports,"Skeleton",{enumerable:!0,get:()=>e.Skeleton});Object.defineProperty(exports,"SkipLink",{enumerable:!0,get:()=>e.SkipLink});Object.defineProperty(exports,"Spinner",{enumerable:!0,get:()=>e.Spinner});Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>e.Switch});Object.defineProperty(exports,"Table",{enumerable:!0,get:()=>e.Table});Object.defineProperty(exports,"Tabs",{enumerable:!0,get:()=>e.Tabs});Object.defineProperty(exports,"Tag",{enumerable:!0,get:()=>e.Tag});Object.defineProperty(exports,"Textarea",{enumerable:!0,get:()=>e.Textarea});Object.defineProperty(exports,"Textfield",{enumerable:!0,get:()=>e.Textfield});Object.defineProperty(exports,"ToggleGroup",{enumerable:!0,get:()=>e.ToggleGroup});Object.defineProperty(exports,"Tooltip",{enumerable:!0,get:()=>e.Tooltip});Object.defineProperty(exports,"ValidationMessage",{enumerable:!0,get:()=>e.ValidationMessage});
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export * from './components/Alert/Alert';
|
|
2
|
+
export * from './components/Avatar/Avatar';
|
|
3
|
+
export * from './components/Badge/Badge';
|
|
4
|
+
export * from './components/Breadcrumbs/Breadcrumbs';
|
|
5
|
+
export * from './components/Button/Button';
|
|
6
|
+
export * from './components/Card/Card';
|
|
7
|
+
export * from './components/Checkbox/Checkbox';
|
|
8
|
+
export * from './components/Chip/Chip';
|
|
9
|
+
export * from './components/Details/Details';
|
|
10
|
+
export * from './components/Dialog/Dialog';
|
|
11
|
+
export * from './components/Divider/Divider';
|
|
12
|
+
export * from './components/Dropdown/Dropdown';
|
|
13
|
+
export * from './components/ErrorSummary/ErrorSummary';
|
|
14
|
+
export * from './components/Field/Field';
|
|
15
|
+
export * from './components/Fieldset/Fieldset';
|
|
16
|
+
export * from './components/Input/Input';
|
|
17
|
+
export * from './components/Link/Link';
|
|
18
|
+
export * from './components/List/List';
|
|
19
|
+
export * from './components/Loaders';
|
|
20
|
+
export * from './components/MultiSuggestion/MultiSuggestion';
|
|
21
|
+
export * from './components/Pagination/Pagination';
|
|
22
|
+
export * from './components/Popover/Popover';
|
|
23
|
+
export * from './components/Radio/Radio';
|
|
24
|
+
export * from './components/Search/Search';
|
|
25
|
+
export * from './components/Select/Select';
|
|
26
|
+
export * from './components/SkipLink/SkipLink';
|
|
27
|
+
export * from './components/Suggestion/Suggestion';
|
|
28
|
+
export * from './components/Switch/Switch';
|
|
29
|
+
export * from './components/Table/Table';
|
|
30
|
+
export * from './components/Tabs/Tabs';
|
|
31
|
+
export * from './components/Tag/Tag';
|
|
32
|
+
export * from './components/Textarea/Textarea';
|
|
33
|
+
export * from './components/Textfield/Textfield';
|
|
34
|
+
export * from './components/ToggleGroup/ToggleGroup';
|
|
35
|
+
export * from './components/Tooltip/Tooltip';
|
|
36
|
+
export * from './components/Paragraph/Paragraph';
|
|
37
|
+
export * from './components/ValidationMessage/ValidationMessage';
|
|
38
|
+
export * from './components/Label/Label';
|
|
39
|
+
export * from './components/Heading/Heading';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import "@digdir/designsystemet-css";
|
|
2
|
+
import { Alert as E, Avatar as o, Badge as g, Breadcrumbs as n, Button as a, Card as u, Checkbox as r, Chip as s, ChipButton as l, ChipCheckbox as p, ChipRadio as L, ChipRemovable as M, Details as S, Dialog as T, Divider as I, Dropdown as d, EXPERIMENTAL_MultiSuggestion as P, EXPERIMENTAL_MultiSuggestionChips as R, EXPERIMENTAL_MultiSuggestionClear as A, EXPERIMENTAL_MultiSuggestionEmpty as N, EXPERIMENTAL_MultiSuggestionInput as X, EXPERIMENTAL_MultiSuggestionList as _, EXPERIMENTAL_MultiSuggestionOption as h, EXPERIMENTAL_Suggestion as C, EXPERIMENTAL_SuggestionClear as m, EXPERIMENTAL_SuggestionEmpty as b, EXPERIMENTAL_SuggestionInput as c, EXPERIMENTAL_SuggestionList as k, EXPERIMENTAL_SuggestionOption as x, ErrorSummary as v, Field as B, Fieldset as D, Heading as y, Input as O, Label as f, Link as w, List as F, ListItem as G, ListOrdered as H, ListUnordered as U, Pagination as V, Paragraph as j, Popover as q, Radio as z, Search as J, Select as K, Skeleton as Q, SkipLink as W, Spinner as Y, Switch as Z, Table as $, Tabs as ii, Tag as ti, Textarea as ei, Textfield as Ei, ToggleGroup as oi, Tooltip as gi, ValidationMessage as ni } from "@digdir/designsystemet-react";
|
|
3
|
+
export {
|
|
4
|
+
E as Alert,
|
|
5
|
+
o as Avatar,
|
|
6
|
+
g as Badge,
|
|
7
|
+
n as Breadcrumbs,
|
|
8
|
+
a as Button,
|
|
9
|
+
u as Card,
|
|
10
|
+
r as Checkbox,
|
|
11
|
+
s as Chip,
|
|
12
|
+
l as ChipButton,
|
|
13
|
+
p as ChipCheckbox,
|
|
14
|
+
L as ChipRadio,
|
|
15
|
+
M as ChipRemovable,
|
|
16
|
+
S as Details,
|
|
17
|
+
T as Dialog,
|
|
18
|
+
I as Divider,
|
|
19
|
+
d as Dropdown,
|
|
20
|
+
P as EXPERIMENTAL_MultiSuggestion,
|
|
21
|
+
R as EXPERIMENTAL_MultiSuggestionChips,
|
|
22
|
+
A as EXPERIMENTAL_MultiSuggestionClear,
|
|
23
|
+
N as EXPERIMENTAL_MultiSuggestionEmpty,
|
|
24
|
+
X as EXPERIMENTAL_MultiSuggestionInput,
|
|
25
|
+
_ as EXPERIMENTAL_MultiSuggestionList,
|
|
26
|
+
h as EXPERIMENTAL_MultiSuggestionOption,
|
|
27
|
+
C as EXPERIMENTAL_Suggestion,
|
|
28
|
+
m as EXPERIMENTAL_SuggestionClear,
|
|
29
|
+
b as EXPERIMENTAL_SuggestionEmpty,
|
|
30
|
+
c as EXPERIMENTAL_SuggestionInput,
|
|
31
|
+
k as EXPERIMENTAL_SuggestionList,
|
|
32
|
+
x as EXPERIMENTAL_SuggestionOption,
|
|
33
|
+
v as ErrorSummary,
|
|
34
|
+
B as Field,
|
|
35
|
+
D as Fieldset,
|
|
36
|
+
y as Heading,
|
|
37
|
+
O as Input,
|
|
38
|
+
f as Label,
|
|
39
|
+
w as Link,
|
|
40
|
+
F as List,
|
|
41
|
+
G as ListItem,
|
|
42
|
+
H as ListOrdered,
|
|
43
|
+
U as ListUnordered,
|
|
44
|
+
V as Pagination,
|
|
45
|
+
j as Paragraph,
|
|
46
|
+
q as Popover,
|
|
47
|
+
z as Radio,
|
|
48
|
+
J as Search,
|
|
49
|
+
K as Select,
|
|
50
|
+
Q as Skeleton,
|
|
51
|
+
W as SkipLink,
|
|
52
|
+
Y as Spinner,
|
|
53
|
+
Z as Switch,
|
|
54
|
+
$ as Table,
|
|
55
|
+
ii as Tabs,
|
|
56
|
+
ti as Tag,
|
|
57
|
+
ei as Textarea,
|
|
58
|
+
Ei as Textfield,
|
|
59
|
+
oi as ToggleGroup,
|
|
60
|
+
gi as Tooltip,
|
|
61
|
+
ni as ValidationMessage
|
|
62
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@ks-digital/designsystem-react",
|
|
3
|
+
"repository": {
|
|
4
|
+
"type": "git",
|
|
5
|
+
"url": "https://github.com/ks-no/designsystem.git",
|
|
6
|
+
"directory": "packages/react"
|
|
7
|
+
},
|
|
8
|
+
"version": "0.0.1-alpha.2",
|
|
9
|
+
"license": "MIT",
|
|
10
|
+
"private": false,
|
|
11
|
+
"publishConfig": {
|
|
12
|
+
"access": "public"
|
|
13
|
+
},
|
|
14
|
+
"type": "module",
|
|
15
|
+
"main": "./dist/index.js",
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
17
|
+
"exports": {
|
|
18
|
+
".": {
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"import": "./dist/index.js",
|
|
21
|
+
"require": "./dist/index.js"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"./dist"
|
|
26
|
+
],
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@digdir/designsystemet-css": "1.0.5",
|
|
29
|
+
"@digdir/designsystemet-react": "1.0.5",
|
|
30
|
+
"@navikt/aksel-icons": "^7.21.1"
|
|
31
|
+
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"react": ">=18.3.1",
|
|
34
|
+
"react-dom": ">=18.3.1"
|
|
35
|
+
}
|
|
36
|
+
}
|