@sikt/sds-filter-list 0.1.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/CHANGELOG.md +10 -0
- package/README.md +63 -0
- package/dist/index.css +197 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +45 -0
- package/dist/index.d.ts +45 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +55 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
|
+
|
|
5
|
+
## 0.1.0 (2025-05-20)
|
|
6
|
+
|
|
7
|
+
### Features
|
|
8
|
+
|
|
9
|
+
- **filter-list:** add package ([6b744a6](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/6b744a6a2433b41af38a703c9e1d4299ff5c5e54))
|
|
10
|
+
- **filter-list:** update with new typography ([f4993fb](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/f4993fb090e4e558b6d1d8b45024950f58b95545))
|
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# `@sikt/sds-filter-list`
|
|
2
|
+
|
|
3
|
+
## Consume
|
|
4
|
+
|
|
5
|
+
```sh
|
|
6
|
+
npm i -s @sikt/sds-filter-list
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
### React
|
|
10
|
+
|
|
11
|
+
```js
|
|
12
|
+
import {
|
|
13
|
+
FilterList,
|
|
14
|
+
FilterListCategory,
|
|
15
|
+
FilterListItem,
|
|
16
|
+
FilterListSection,
|
|
17
|
+
} from "@sikt/sds-filter-list";
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
```css
|
|
21
|
+
@import url("@sikt/sds-filter-list");
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Stylesheets & custom markup
|
|
25
|
+
|
|
26
|
+
The FilterList component is a container of elements to present a list of filter-options.
|
|
27
|
+
|
|
28
|
+
`<FilterList/>` is the header section.
|
|
29
|
+
|
|
30
|
+
`<FilterListItem />` renders an option of type checkbox or radio
|
|
31
|
+
|
|
32
|
+
`<FilterListCategory />` is a container of typeFilterListItem.
|
|
33
|
+
|
|
34
|
+
`<FilterListSection>` is a container of typeFilterListItem.
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<FilterList>
|
|
38
|
+
<FilterListItem />
|
|
39
|
+
<FilterListItem />
|
|
40
|
+
|
|
41
|
+
<FilterListCategory>
|
|
42
|
+
<FilterListItem />
|
|
43
|
+
<FilterListItem />
|
|
44
|
+
</FilterListCategory>
|
|
45
|
+
|
|
46
|
+
<FilterListSection>
|
|
47
|
+
<FilterListItem />
|
|
48
|
+
<FilterListItem />
|
|
49
|
+
</FilterListSection>
|
|
50
|
+
|
|
51
|
+
<FilterListCategory>
|
|
52
|
+
<FilterListSection>
|
|
53
|
+
<FilterListItem />
|
|
54
|
+
<FilterListItem />
|
|
55
|
+
</FilterListSection>
|
|
56
|
+
|
|
57
|
+
<FilterListSection>
|
|
58
|
+
<FilterListItem />
|
|
59
|
+
<FilterListItem />
|
|
60
|
+
</FilterListSection>
|
|
61
|
+
</FilterListCategory>
|
|
62
|
+
</FilterList>
|
|
63
|
+
```
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
/* src/FilterList/filter-list.pcss */
|
|
2
|
+
.sds-filter-list {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
padding: var(--sds-space-padding-tiny);
|
|
6
|
+
background: var(--sds-color-layout-background-default);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* src/FilterListItem/filter-list-item.pcss */
|
|
10
|
+
.sds-filter-list-item {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: row;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: space-between;
|
|
15
|
+
gap: var(--sds-space-gap-tiny);
|
|
16
|
+
border-radius: var(--sds-space-border-radius-small);
|
|
17
|
+
padding-right: var(--sds-space-padding-small);
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
20
|
+
.sds-filter-list-item:hover,
|
|
21
|
+
.sds-filter-list-item:focus-visible {
|
|
22
|
+
}
|
|
23
|
+
.sds-filter-list-item__input {
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: row;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: flex-start;
|
|
28
|
+
gap: var(--sds-space-gap-tiny);
|
|
29
|
+
}
|
|
30
|
+
.sds-filter-list-item__count {
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: row;
|
|
33
|
+
align-items: center;
|
|
34
|
+
justify-content: flex-end;
|
|
35
|
+
padding-right: var(--sds-space-padding-tiny);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* src/components/FilterListIconLabel/filter-list-icon-label.pcss */
|
|
39
|
+
.sds-filter-list-icon-label {
|
|
40
|
+
align-items: center;
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: row;
|
|
43
|
+
gap: var(--sds-space-gap-tiny);
|
|
44
|
+
justify-content: flex-start;
|
|
45
|
+
}
|
|
46
|
+
.sds-filter-list-icon-label__icon {
|
|
47
|
+
align-items: center;
|
|
48
|
+
display: flex;
|
|
49
|
+
font-size: var(--sds-typography-fontsize-700);
|
|
50
|
+
justify-content: center;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* src/FilterListCategory/filter-list-category.pcss */
|
|
54
|
+
.sds-filter-list-category__header {
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-direction: row;
|
|
57
|
+
align-items: center;
|
|
58
|
+
justify-content: space-between;
|
|
59
|
+
gap: var(--sds-space-gap-tiny);
|
|
60
|
+
width: 100%;
|
|
61
|
+
}
|
|
62
|
+
.sds-filter-list-category__header-label {
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-direction: row;
|
|
65
|
+
align-items: center;
|
|
66
|
+
justify-content: flex-start;
|
|
67
|
+
gap: var(--sds-space-gap-tiny);
|
|
68
|
+
}
|
|
69
|
+
.sds-filter-list-category__content {
|
|
70
|
+
padding-left: var(--sds-space-padding-small);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* src/components/FilterListExpand/filter-list-expand.pcss */
|
|
74
|
+
.sds-filter-list-expand {
|
|
75
|
+
display: flex;
|
|
76
|
+
width: 100%;
|
|
77
|
+
justify-content: flex-start;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
}
|
|
80
|
+
.sds-filter-list-expand__header {
|
|
81
|
+
display: flex;
|
|
82
|
+
width: 100%;
|
|
83
|
+
flex-direction: row;
|
|
84
|
+
justify-content: space-between;
|
|
85
|
+
gap: var(--sds-space-gap-small);
|
|
86
|
+
border-radius: var(--sds-space-border-radius-small);
|
|
87
|
+
padding-right: var(--sds-space-padding-minimal);
|
|
88
|
+
}
|
|
89
|
+
.sds-filter-list-expand__header-clickable:hover,
|
|
90
|
+
.sds-filter-list-expand__header-clickable:focus-visible {
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
background: var(--sds-color-interaction-primary-subtle-highlight);
|
|
93
|
+
}
|
|
94
|
+
.sds-filter-list-expand--button-container,
|
|
95
|
+
.sds-filter-list-expand--icon-container {
|
|
96
|
+
display: flex;
|
|
97
|
+
justify-content: center;
|
|
98
|
+
align-items: center;
|
|
99
|
+
}
|
|
100
|
+
.sds-filter-list-expand--icon-container {
|
|
101
|
+
font-size: var(--sds-typography-fontsize-700);
|
|
102
|
+
}
|
|
103
|
+
.sds-filter-list-expand__icon--closed-no-anim,
|
|
104
|
+
.sds-filter-list-expand__icon--closed {
|
|
105
|
+
rotate: 0deg;
|
|
106
|
+
}
|
|
107
|
+
.sds-filter-list-expand__icon--open-no-anim,
|
|
108
|
+
.sds-filter-list-expand__icon--open {
|
|
109
|
+
rotate: 180deg;
|
|
110
|
+
}
|
|
111
|
+
.sds-filter-list-expand__icon--closed,
|
|
112
|
+
.sds-filter-list-expand__icon--open {
|
|
113
|
+
animation: var(--sds-effect-animation-duration-medium) forwards;
|
|
114
|
+
}
|
|
115
|
+
.sds-filter-list-expand__icon--closed {
|
|
116
|
+
animation-name: icon-close-keyframes;
|
|
117
|
+
}
|
|
118
|
+
.sds-filter-list-expand__icon--open {
|
|
119
|
+
animation-name: icon-open-keyframes;
|
|
120
|
+
}
|
|
121
|
+
@keyframes icon-close-keyframes {
|
|
122
|
+
from {
|
|
123
|
+
rotate: 180deg;
|
|
124
|
+
}
|
|
125
|
+
to {
|
|
126
|
+
rotate: 0deg;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
@keyframes icon-open-keyframes {
|
|
130
|
+
from {
|
|
131
|
+
rotate: 0deg;
|
|
132
|
+
}
|
|
133
|
+
to {
|
|
134
|
+
rotate: 180deg;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
.sds-filter-list-expand__content {
|
|
138
|
+
overflow: hidden;
|
|
139
|
+
max-height: none;
|
|
140
|
+
}
|
|
141
|
+
.sds-filter-list-expand__content--closed-no-anim,
|
|
142
|
+
.sds-filter-list-expand__content--closed {
|
|
143
|
+
max-height: 0;
|
|
144
|
+
display: none;
|
|
145
|
+
}
|
|
146
|
+
.sds-filter-list-expand__content--open-no-anim,
|
|
147
|
+
.sds-filter-list-expand__content--open {
|
|
148
|
+
display: inline;
|
|
149
|
+
}
|
|
150
|
+
.sds-filter-list-expand__content--closed,
|
|
151
|
+
.sds-filter-list-expand__content--open {
|
|
152
|
+
animation: var(--sds-effect-animation-duration-medium) forwards;
|
|
153
|
+
}
|
|
154
|
+
.sds-filter-list-expand__content--closed {
|
|
155
|
+
animation-name: content-close-keyframes;
|
|
156
|
+
}
|
|
157
|
+
.sds-filter-list-expand__content--open {
|
|
158
|
+
animation-name: content-open-keyframes;
|
|
159
|
+
}
|
|
160
|
+
@keyframes content-close-keyframes {
|
|
161
|
+
from {
|
|
162
|
+
max-height: none;
|
|
163
|
+
display: inline;
|
|
164
|
+
}
|
|
165
|
+
to {
|
|
166
|
+
max-height: 0;
|
|
167
|
+
display: none;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
@keyframes content-open-keyframes {
|
|
171
|
+
0% {
|
|
172
|
+
max-height: 0;
|
|
173
|
+
display: none;
|
|
174
|
+
}
|
|
175
|
+
1%, 100% {
|
|
176
|
+
max-height: none;
|
|
177
|
+
display: inline;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* src/FilterListSection/filter-list-section.pcss */
|
|
182
|
+
.sds-filter-list-section__header {
|
|
183
|
+
display: flex;
|
|
184
|
+
flex-direction: row;
|
|
185
|
+
align-items: center;
|
|
186
|
+
justify-content: space-between;
|
|
187
|
+
gap: var(--sds-space-gap-tiny);
|
|
188
|
+
width: 100%;
|
|
189
|
+
padding: var(--sds-space-padding-small) 0;
|
|
190
|
+
}
|
|
191
|
+
.sds-filter-list-section__header--expandable {
|
|
192
|
+
padding-left: var(--sds-space-padding-small);
|
|
193
|
+
}
|
|
194
|
+
.sds-filter-list-section__header--default {
|
|
195
|
+
padding: var(--sds-space-padding-small);
|
|
196
|
+
}
|
|
197
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/FilterList/filter-list.pcss","../src/FilterListItem/filter-list-item.pcss","../src/components/FilterListIconLabel/filter-list-icon-label.pcss","../src/FilterListCategory/filter-list-category.pcss","../src/components/FilterListExpand/filter-list-expand.pcss","../src/FilterListSection/filter-list-section.pcss"],"sourcesContent":[".sds-filter-list {\n display: flex;\n flex-direction: column;\n padding: var(--sds-space-padding-tiny);\n background: var(--sds-color-layout-background-default);\n}\n",".sds-filter-list-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: var(--sds-space-gap-tiny);\n border-radius: var(--sds-space-border-radius-small);\n padding-right: var(--sds-space-padding-small);\n width: 100%;\n}\n\n .sds-filter-list-item:hover,\n .sds-filter-list-item:focus-visible {\n /* todo - uncomment when clickable */\n\n /* background: var(--sds-color-interaction-primary-subtle-highlight); */\n }\n\n .sds-filter-list-item__input {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n gap: var(--sds-space-gap-tiny);\n }\n\n .sds-filter-list-item__count {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n padding-right: var(--sds-space-padding-tiny);\n }\n",".sds-filter-list-icon-label {\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: var(--sds-space-gap-tiny);\n justify-content: flex-start;\n}\n\n .sds-filter-list-icon-label__icon {\n align-items: center;\n display: flex;\n font-size: var(--sds-typography-fontsize-700);\n justify-content: center;\n }\n",".sds-filter-list-category__header {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: var(--sds-space-gap-tiny);\n width: 100%;\n }\n\n .sds-filter-list-category__header-label {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n gap: var(--sds-space-gap-tiny);\n }\n .sds-filter-list-category__content {\n padding-left: var(--sds-space-padding-small);\n }\n",".sds-filter-list-expand {\n display: flex;\n width: 100%;\n justify-content: flex-start;\n flex-direction: column;\n}\n\n .sds-filter-list-expand__header {\n display: flex;\n width: 100%;\n flex-direction: row;\n justify-content: space-between;\n gap: var(--sds-space-gap-small);\n border-radius: var(--sds-space-border-radius-small);\n padding-right: var(--sds-space-padding-minimal);\n }\n\n .sds-filter-list-expand__header-clickable:hover,\n .sds-filter-list-expand__header-clickable:focus-visible {\n cursor: pointer;\n background: var(--sds-color-interaction-primary-subtle-highlight);\n }\n\n .sds-filter-list-expand--button-container,\n .sds-filter-list-expand--icon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .sds-filter-list-expand--icon-container {\n font-size: var(--sds-typography-fontsize-700);\n }\n\n .sds-filter-list-expand__icon--closed-no-anim,\n .sds-filter-list-expand__icon--closed {\n rotate: 0deg;\n }\n\n .sds-filter-list-expand__icon--open-no-anim,\n .sds-filter-list-expand__icon--open {\n rotate: 180deg;\n }\n\n .sds-filter-list-expand__icon--closed,\n .sds-filter-list-expand__icon--open {\n animation: var(--sds-effect-animation-duration-medium) forwards;\n }\n\n .sds-filter-list-expand__icon--closed {\n animation-name: icon-close-keyframes;\n }\n\n .sds-filter-list-expand__icon--open {\n animation-name: icon-open-keyframes;\n }\n\n @keyframes icon-close-keyframes {\n from {\n rotate: 180deg;\n }\n\n to {\n rotate: 0deg;\n }\n }\n\n @keyframes icon-open-keyframes {\n from {\n rotate: 0deg;\n }\n\n to {\n rotate: 180deg;\n }\n }\n\n .sds-filter-list-expand__content {\n overflow: hidden;\n max-height: none;\n }\n\n .sds-filter-list-expand__content--closed-no-anim,\n .sds-filter-list-expand__content--closed {\n max-height: 0;\n display: none;\n }\n\n .sds-filter-list-expand__content--open-no-anim,\n .sds-filter-list-expand__content--open {\n display: inline;\n }\n\n .sds-filter-list-expand__content--closed,\n .sds-filter-list-expand__content--open {\n animation: var(--sds-effect-animation-duration-medium) forwards;\n }\n\n .sds-filter-list-expand__content--closed {\n animation-name: content-close-keyframes;\n }\n\n .sds-filter-list-expand__content--open {\n animation-name: content-open-keyframes;\n }\n\n @keyframes content-close-keyframes {\n from {\n max-height: none;\n display: inline;\n }\n\n to {\n max-height: 0;\n display: none;\n }\n }\n\n @keyframes content-open-keyframes {\n 0% {\n max-height: 0;\n display: none;\n }\n\n 1%,\n 100% {\n max-height: none;\n display: inline;\n }\n }\n",".sds-filter-list-section__header {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: var(--sds-space-gap-tiny);\n width: 100%;\n padding: var(--sds-space-padding-small) 0;\n }\n\n .sds-filter-list-section__header--expandable {\n padding-left: var(--sds-space-padding-small);\n }\n\n .sds-filter-list-section__header--default {\n padding: var(--sds-space-padding-small);\n }\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,WAAS,IAAI;AACb,cAAY,IAAI;AAClB;;;ACLA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACT,iBAAe,IAAI;AACnB,iBAAe,IAAI;AACnB,SAAO;AACT;AAEE,CAXD,oBAWsB;AACrB,CAZD,oBAYsB;AAIrB;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACX;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,iBAAe,IAAI;AACrB;;;AChCF,CAAC;AACC,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACnB;AAEE,CAAC;AACC,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACnB;;;ACbF,CAAC;AACG,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACT,SAAO;AACT;AAEE,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACX;AACF,CAAC;AACC,gBAAc,IAAI;AACpB;;;AClBF,CAAC;AACC,WAAS;AACT,SAAO;AACP,mBAAiB;AACjB,kBAAgB;AAClB;AAEE,CAAC;AACC,WAAS;AACT,SAAO;AACP,kBAAgB;AAChB,mBAAiB;AACjB,OAAK,IAAI;AACT,iBAAe,IAAI;AACnB,iBAAe,IAAI;AACrB;AAEA,CAAC,wCAAwC;AACrC,CADH,wCAC4C;AACvC,UAAQ;AACR,cAAY,IAAI;AAClB;AAEJ,CAAC;AACD,CAAC;AACC,WAAS;AACT,mBAAiB;AACjB,eAAa;AACf;AAEA,CANC;AAOC,aAAW,IAAI;AACjB;AAEA,CAAC;AACC,CAAC;AACC,UAAQ;AACV;AAEF,CAAC;AACC,CAAC;AACC,UAAQ;AACV;AAEF,CATG;AAUD,CALC;AAMC,aAAW,IAAI,wCAAwC;AACzD;AAEF,CAdG;AAeC,kBAAgB;AAClB;AAEF,CAbG;AAcC,kBAAgB;AAClB;AAEF,WAPoB;AAQhB;AACE,YAAQ;AACV;AAEA;AACE,YAAQ;AACV;AACF;AAEF,WAboB;AAchB;AACE,YAAQ;AACV;AAEA;AACE,YAAQ;AACV;AACF;AAEF,CAAC;AACC,YAAU;AACV,cAAY;AACd;AAEA,CAAC;AACC,CAAC;AACC,cAAY;AACZ,WAAS;AACX;AAEF,CAAC;AACC,CAAC;AACC,WAAS;AACX;AAEF,CAVG;AAWD,CALC;AAMC,aAAW,IAAI,wCAAwC;AACzD;AAEF,CAfG;AAgBC,kBAAgB;AAClB;AAEF,CAbG;AAcC,kBAAgB;AAClB;AAEF,WAPoB;AAQhB;AACE,gBAAY;AACZ,aAAS;AACX;AAEA;AACE,gBAAY;AACZ,aAAS;AACX;AACF;AAEF,WAfoB;AAgBhB;AACE,gBAAY;AACZ,aAAS;AACX;AAEA;AAEE,gBAAY;AACZ,aAAS;AACX;AACF;;;ACjIJ,CAAC;AACG,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACT,SAAO;AACP,WAAS,IAAI,2BAA2B;AAC1C;AAEE,CAAC;AACC,gBAAc,IAAI;AACpB;AAEA,CAAC;AACC,WAAS,IAAI;AACf;","names":[]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, ReactElement, ChangeEvent } from 'react';
|
|
3
|
+
|
|
4
|
+
interface FilterListProps {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
declare const FilterList: ({ children, className }: FilterListProps) => react_jsx_runtime.JSX.Element;
|
|
9
|
+
|
|
10
|
+
interface FilterListItemProps {
|
|
11
|
+
type: "radio" | "checkbox";
|
|
12
|
+
label: string;
|
|
13
|
+
icon?: ReactElement;
|
|
14
|
+
value: string;
|
|
15
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
16
|
+
checked?: boolean;
|
|
17
|
+
count?: number;
|
|
18
|
+
}
|
|
19
|
+
declare const FilterListItem: ({ type, label, icon, value, onChange, checked, count, }: FilterListItemProps) => react_jsx_runtime.JSX.Element;
|
|
20
|
+
|
|
21
|
+
interface FilterListCategoryProps {
|
|
22
|
+
label: string;
|
|
23
|
+
icon?: ReactNode;
|
|
24
|
+
expanded?: boolean;
|
|
25
|
+
onExpandToggle?: (expanded: boolean) => void;
|
|
26
|
+
onCategoryToggle?: (checked: boolean) => void;
|
|
27
|
+
indeterminate: boolean;
|
|
28
|
+
checked: boolean;
|
|
29
|
+
count?: number;
|
|
30
|
+
children: ReactNode;
|
|
31
|
+
}
|
|
32
|
+
declare const FilterListCategory: ({ label, icon, expanded, onExpandToggle, onCategoryToggle, indeterminate, checked, count, children, }: FilterListCategoryProps) => react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
interface FilterListSectionProps {
|
|
35
|
+
label: string;
|
|
36
|
+
children: ReactNode;
|
|
37
|
+
expandable?: {
|
|
38
|
+
expanded: boolean;
|
|
39
|
+
onExpandToggle?: (expanded: boolean) => void;
|
|
40
|
+
};
|
|
41
|
+
count?: number;
|
|
42
|
+
}
|
|
43
|
+
declare const FilterListSection: ({ label, children, expandable, count, }: FilterListSectionProps) => react_jsx_runtime.JSX.Element;
|
|
44
|
+
|
|
45
|
+
export { FilterList, FilterListCategory, FilterListItem, type FilterListItemProps, type FilterListProps, FilterListSection };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, ReactElement, ChangeEvent } from 'react';
|
|
3
|
+
|
|
4
|
+
interface FilterListProps {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
declare const FilterList: ({ children, className }: FilterListProps) => react_jsx_runtime.JSX.Element;
|
|
9
|
+
|
|
10
|
+
interface FilterListItemProps {
|
|
11
|
+
type: "radio" | "checkbox";
|
|
12
|
+
label: string;
|
|
13
|
+
icon?: ReactElement;
|
|
14
|
+
value: string;
|
|
15
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
16
|
+
checked?: boolean;
|
|
17
|
+
count?: number;
|
|
18
|
+
}
|
|
19
|
+
declare const FilterListItem: ({ type, label, icon, value, onChange, checked, count, }: FilterListItemProps) => react_jsx_runtime.JSX.Element;
|
|
20
|
+
|
|
21
|
+
interface FilterListCategoryProps {
|
|
22
|
+
label: string;
|
|
23
|
+
icon?: ReactNode;
|
|
24
|
+
expanded?: boolean;
|
|
25
|
+
onExpandToggle?: (expanded: boolean) => void;
|
|
26
|
+
onCategoryToggle?: (checked: boolean) => void;
|
|
27
|
+
indeterminate: boolean;
|
|
28
|
+
checked: boolean;
|
|
29
|
+
count?: number;
|
|
30
|
+
children: ReactNode;
|
|
31
|
+
}
|
|
32
|
+
declare const FilterListCategory: ({ label, icon, expanded, onExpandToggle, onCategoryToggle, indeterminate, checked, count, children, }: FilterListCategoryProps) => react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
interface FilterListSectionProps {
|
|
35
|
+
label: string;
|
|
36
|
+
children: ReactNode;
|
|
37
|
+
expandable?: {
|
|
38
|
+
expanded: boolean;
|
|
39
|
+
onExpandToggle?: (expanded: boolean) => void;
|
|
40
|
+
};
|
|
41
|
+
count?: number;
|
|
42
|
+
}
|
|
43
|
+
declare const FilterListSection: ({ label, children, expandable, count, }: FilterListSectionProps) => react_jsx_runtime.JSX.Element;
|
|
44
|
+
|
|
45
|
+
export { FilterList, FilterListCategory, FilterListItem, type FilterListItemProps, type FilterListProps, FilterListSection };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("clsx/lite"),s=require("react/jsx-runtime"),i=require("@sikt/sds-checkbox"),t=require("@sikt/sds-radio"),a=require("react"),d=require("@sikt/sds-badge"),l=require("@sikt/sds-button"),n=require("@sikt/sds-icons"),r=require("clsx");function c(e){return e&&e.__esModule?e:{default:e}}var o=c(r),x=({icon:e,label:i})=>s.jsxs("div",{className:"sds-filter-list-icon-label","data-testid":"filter-list-icon-label",children:[s.jsx("span",{className:"sds-filter-list-icon-label__icon",children:e}),s.jsx("span",{children:i})]});function h({header:e,clickableHeader:i=!1,buttonTitle:t,initialExpanded:d=!1,onExpandToggle:r,ariaLabelExpandToggle:c,children:x}){const[h,p]=a.useState(d),[b,u]=a.useState(!1),_=()=>{const e=!h;u(!0),p(e),r&&r(e)},g=()=>{_()},f=s.jsx(n.ExpandShowIcon,{className:o.default("sds-filter-list-expand__icon",h&&(b?"sds-filter-list-expand__icon--open":"sds-filter-list-expand__icon--open-no-anim"),!h&&(b?"sds-filter-list-expand__icon--closed":"sds-filter-list-expand__icon--closed-no-anim"))});return s.jsxs("div",{className:"sds-filter-list-expand",children:[i?s.jsxs("div",{onClick:g,onKeyDown:e=>{const s=e.key;"Enter"!=s&&" "!==s||_()},tabIndex:0,role:"button","data-testid":"toggle-expand-button",className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable","aria-expanded":!!h,"aria-label":c,children:[e,s.jsx("div",{className:"sds-filter-list-expand--icon-container",children:f})]}):s.jsxs("div",{className:"sds-filter-list-expand__header",children:[e,s.jsx("div",{className:"sds-filter-list-expand--button-container",children:s.jsx(l.Button,{tabIndex:0,onClick:g,className:"sds-filter-list-expand__button","data-testid":"toggle-expand-button",title:t,"aria-expanded":h,"aria-label":c,icon:f,iconVariant:"only",size:"small",variant:"transparent",children:t})})]}),s.jsx("div",{"data-testid":"content",className:o.default("sds-filter-list-expand__content",h&&(b?"sds-filter-list-expand__content--open":"sds-filter-list-expand__content--open-no-anim"),!h&&(b?"sds-filter-list-expand__content--closed":"sds-filter-list-expand__content--closed-no-anim")),children:x})]})}exports.FilterList=({children:i,className:t})=>s.jsx("div",{className:e.clsx("sds-filter-list",t),children:i}),exports.FilterListCategory=({label:e,icon:t,expanded:l,onExpandToggle:n,onCategoryToggle:r,indeterminate:c,checked:o,count:p,children:b})=>{const u=a.useId();return s.jsx(h,{ariaLabelExpandToggle:e,initialExpanded:l,onExpandToggle:n,header:s.jsxs("div",{className:"sds-filter-list-category__header",children:[s.jsx("div",{className:"sds-filter-list-category__header-label",children:s.jsx(i.CheckboxInput,{tabIndex:0,"data-testid":"filter-list-category_check","aria-describedby":u,label:t?s.jsx(x,{label:e,icon:t}):e,onChange:e=>{r&&r(e.target.checked)},indeterminate:c,checked:o})}),void 0!==p&&p>0?s.jsx(d.Badge,{id:u,visibility:"strong",children:p}):""]}),children:s.jsx("div",{className:"sds-filter-list-category__content",children:b})})},exports.FilterListItem=({type:e,label:d,icon:l,value:n,onChange:r,checked:c,count:o})=>{const h=a.useId(),p=l?s.jsx(x,{label:d,icon:l}):d;return s.jsxs("div",{className:"sds-filter-list-item",children:[s.jsxs("div",{className:"sds-filter-list-item__input",children:["radio"===e&&s.jsx(t.RadioInput,{tabIndex:0,"data-testid":"filter-list-item-input",label:p,value:n,checked:c,"aria-describedby":h}),"checkbox"===e&&s.jsx(i.CheckboxInput,{tabIndex:0,"data-testid":"filter-list-item-input",label:p,value:n,onChange:r,checked:c,"aria-describedby":h})]}),void 0!==o&&s.jsx("div",{className:"sds-filter-list-item__count",id:h,children:o})]})},exports.FilterListSection=({label:e,children:i,expandable:t,count:l})=>{const n=a.useId(),c=s.jsxs("div",{"aria-describedby":n,"data-testid":"filter-list-section-header",className:r.clsx("sds-filter-list-section__header",t?"sds-filter-list-section__header--expandable":"sds-filter-list-section__header--default"),children:[s.jsx("span",{className:"sds-typography--strong",children:e}),void 0!==l&&l>0?s.jsx(d.Badge,{visibility:"strong","data-testid":"header-badge",id:n,children:l}):""]});return s.jsx("div",{children:t?s.jsx(h,{header:c,clickableHeader:!0,ariaLabelExpandToggle:e,initialExpanded:t.expanded,onExpandToggle:t.onExpandToggle,children:i}):s.jsxs(s.Fragment,{children:[c,i]})})};//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/FilterList/FilterList.tsx","../src/components/FilterListIconLabel/FilterListIconLabel.tsx","../src/FilterListItem/FilterListItem.tsx","../src/components/FilterListExpand/FilterListExpand.tsx","../src/FilterListCategory/FilterListCategory.tsx","../src/FilterListSection/FilterListSection.tsx"],"names":["clsx","jsxs","jsx","useId","RadioInput","CheckboxInput","useState","ExpandShowIcon","Button","Badge","Fragment"],"mappings":";AAUO,IAAM,UAAa,GAAA,CAAC,EAAE,QAAA,EAAU,WAAiC,KAAA;AACtE,EAAA,sCAAQ,KAAI,EAAA,EAAA,SAAA,EAAWA,UAAK,iBAAmB,EAAA,SAAS,GAAI,QAAS,EAAA,CAAA;AACvE;ACHO,IAAM,sBAAsB,CAAC;AAAA,EAClC,IAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,4BAAA;AAAA,MACV,aAAY,EAAA,wBAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAC,cAAC,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,kCAAA,EAAoC,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,wBACzDA,cAAC,CAAA,MAAA,EAAA,EAAM,QAAM,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GACf;AAEJ,CAAA;ACNO,IAAM,iBAAiB,CAAC;AAAA,EAC7B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,KAAKC,WAAM,EAAA;AACjB,EAAA,MAAM,YAAY,IAChB,mBAAAD,eAAC,mBAAoB,EAAA,EAAA,KAAA,EAAc,MAAY,CAE/C,GAAA,KAAA;AAGF,EAAA,uBACED,eAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,sBACb,EAAA,QAAA,EAAA;AAAA,oBAAAA,eAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,6BACZ,EAAA,QAAA,EAAA;AAAA,MAAA,IAAA,KAAS,2BACRC,cAAAA;AAAA,QAACE,mBAAA;AAAA,QAAA;AAAA,UACC,QAAU,EAAA,CAAA;AAAA,UACV,aAAY,EAAA,wBAAA;AAAA,UACZ,KAAO,EAAA,SAAA;AAAA,UACP,KAAA;AAAA,UACA,OAAA;AAAA,UACA,kBAAkB,EAAA;AAAA;AAAA,OACpB;AAAA,MAGD,IAAA,KAAS,8BACRF,cAAAA;AAAA,QAACG,yBAAA;AAAA,QAAA;AAAA,UACC,QAAU,EAAA,CAAA;AAAA,UACV,aAAY,EAAA,wBAAA;AAAA,UACZ,KAAO,EAAA,SAAA;AAAA,UACP,KAAA;AAAA,UACA,QAAA;AAAA,UACA,OAAA;AAAA,UACA,kBAAkB,EAAA;AAAA;AAAA;AACpB,KAEJ,EAAA,CAAA;AAAA,IAEC,KAAA,KAAU,0BACTH,cAAAA,CAAC,SAAI,SAAU,EAAA,6BAAA,EAA8B,IAC1C,QACH,EAAA,KAAA,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;ACjDO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,MAAA;AAAA,EACA,eAAkB,GAAA,KAAA;AAAA,EAClB,WAAA;AAAA,EACA,eAAkB,GAAA,KAAA;AAAA,EAClB,cAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAA0B,EAAA;AACxB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAII,eAAS,eAAe,CAAA;AACxD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,MAAM,WAAW,CAAC,QAAA;AAClB,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,WAAA,CAAY,QAAQ,CAAA;AACpB,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAA,cAAA,CAAe,QAAQ,CAAA;AAAA;AACzB,GACF;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAS,QAAA,EAAA;AAAA,GACX;AAEA,EAAM,MAAA,qBAAA,GAAwB,CAAC,KAAyB,KAAA;AACtD,IAAA,MAAM,MAAM,KAAM,CAAA,GAAA;AAClB,IAAI,IAAA,GAAA,IAAO,OAAW,IAAA,GAAA,KAAQ,GAAK,EAAA;AACjC,MAAS,QAAA,EAAA;AAAA;AACX,GACF;AAEA,EAAA,MAAM,uBACJJ,cAAAA;AAAA,IAACK,uBAAA;AAAA,IAAA;AAAA,MACC,SAAWP,EAAAA,sBAAAA;AAAA,QACT,8BAAA;AAAA,QAEA,QAAA,KACG,UACG,oCACA,GAAA,4CAAA,CAAA;AAAA,QACN,CAAC,QACE,KAAA,OAAA,GACG,sCACA,GAAA,8CAAA;AAAA;AACR;AAAA,GACF;AAGF,EAAA,uBACEC,eAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wBACZ,EAAA,QAAA,EAAA;AAAA,IAAA,eAAA,mBACCA,eAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,mBAAA;AAAA,QACT,SAAW,EAAA,qBAAA;AAAA,QACX,QAAU,EAAA,CAAA;AAAA,QACV,IAAK,EAAA,QAAA;AAAA,QACL,aAAY,EAAA,sBAAA;AAAA,QACZ,SAAU,EAAA,yEAAA;AAAA,QACV,eAAA,EAAe,CAAC,CAAC,QAAA;AAAA,QACjB,YAAY,EAAA,qBAAA;AAAA,QAEX,QAAA,EAAA;AAAA,UAAA,MAAA;AAAA,0BACDC,cAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,0CAA0C,QAAK,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA,KAGhE,mBAAAD,eAAC,CAAA,KAAA,EAAA,EAAI,WAAU,gCACZ,EAAA,QAAA,EAAA;AAAA,MAAA,MAAA;AAAA,sBACDC,cAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,4CACb,QAAAA,kBAAAA,cAAAA;AAAA,QAACM,gBAAA;AAAA,QAAA;AAAA,UACC,QAAU,EAAA,CAAA;AAAA,UACV,OAAS,EAAA,mBAAA;AAAA,UACT,SAAU,EAAA,gCAAA;AAAA,UACV,aAAY,EAAA,sBAAA;AAAA,UACZ,KAAO,EAAA,WAAA;AAAA,UACP,eAAe,EAAA,QAAA;AAAA,UACf,YAAY,EAAA,qBAAA;AAAA,UACZ,IAAA;AAAA,UACA,WAAY,EAAA,MAAA;AAAA,UACZ,IAAK,EAAA,OAAA;AAAA,UACL,OAAQ,EAAA,aAAA;AAAA,UAEP,QAAA,EAAA;AAAA;AAAA,OAEL,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,oBAGFN,cAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,SAAA;AAAA,QACZ,SAAWF,EAAAA,sBAAAA;AAAA,UACT,iCAAA;AAAA,UACA,QAAA,KACG,UACG,uCACA,GAAA,+CAAA,CAAA;AAAA,UACN,CAAC,QACE,KAAA,OAAA,GACG,yCACA,GAAA,iDAAA;AAAA,SACR;AAAA,QAEC;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;ACxGO,IAAM,qBAAqB,CAAC;AAAA,EACjC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAA+B,KAAA;AAC7B,EAAA,MAAM,KAAKG,WAAM,EAAA;AAEjB,EAAA,uBACED,cAAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,qBAAuB,EAAA,KAAA;AAAA,MACvB,eAAiB,EAAA,QAAA;AAAA,MACjB,cAAA;AAAA,MACA,MACE,kBAAAD,eAAC,CAAA,KAAA,EAAA,EAAI,WAAU,kCACb,EAAA,QAAA,EAAA;AAAA,wBAAAC,cAAC,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,wCAAA,EACb,QAAAA,kBAAAA,cAAAA;AAAA,UAACG,yBAAAA;AAAA,UAAA;AAAA,YACC,QAAU,EAAA,CAAA;AAAA,YACV,aAAY,EAAA,4BAAA;AAAA,YACZ,kBAAkB,EAAA,EAAA;AAAA,YAClB,OACE,IAAO,mBAAAH,eAAC,mBAAoB,EAAA,EAAA,KAAA,EAAc,MAAY,CAAK,GAAA,KAAA;AAAA,YAE7D,QAAA,EAAU,CAAC,KAAU,KAAA;AACnB,cAAA,IAAI,gBAAkB,EAAA;AACpB,gBAAiB,gBAAA,CAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AACvC,aACF;AAAA,YACA,aAAA;AAAA,YACA;AAAA;AAAA,SAEJ,EAAA,CAAA;AAAA,QACC,KAAA,KAAU,MAAa,IAAA,KAAA,GAAQ,CAC9B,mBAAAA,cAAC,CAAAO,cAAA,EAAA,EAAM,EAAQ,EAAA,UAAA,EAAW,QACvB,EAAA,QAAA,EAAA,KAAA,EACH,CAEA,GAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,MAGF,QAAAP,kBAAAA,cAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qCAAqC,QAAS,EAAA;AAAA;AAAA,GAC/D;AAEJ;ACpDO,IAAM,oBAAoB,CAAC;AAAA,EAChC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,KAAKC,WAAM,EAAA;AAEjB,EAAA,MAAM,yBACJF,eAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,kBAAkB,EAAA,EAAA;AAAA,MAClB,aAAY,EAAA,4BAAA;AAAA,MACZ,SAAWD,EAAAA,UAAAA;AAAA,QACT,iCAAA;AAAA,QACA,aACI,6CACA,GAAA;AAAA,OACN;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAE,cAAC,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,wBAAA,EAA0B,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,QAE/C,KAAU,KAAA,MAAA,IAAa,KAAQ,GAAA,CAAA,mBAC9BA,cAACO,CAAAA,cAAAA,EAAA,EAAM,UAAA,EAAW,QAAS,EAAA,aAAA,EAAY,cAAe,EAAA,EAAA,EACnD,iBACH,CAEA,GAAA;AAAA;AAAA;AAAA,GAEJ;AAGF,EAAA,uBACEP,cAAAA,CAAC,KACE,EAAA,EAAA,QAAA,EAAA,UAAA,mBACCA,cAAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,eAAe,EAAA,IAAA;AAAA,MACf,qBAAuB,EAAA,KAAA;AAAA,MACvB,iBAAiB,UAAW,CAAA,QAAA;AAAA,MAC5B,gBAAgB,UAAW,CAAA,cAAA;AAAA,MAE1B;AAAA;AAAA,GACH,mBAEAD,eAAAA,CAAAS,mBACG,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA;AAAA,IACA;AAAA,GAAA,EACH,CAEJ,EAAA,CAAA;AAEJ","file":"index.js","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport { ReactNode } from \"react\";\n\nimport \"./filter-list.pcss\";\n\nexport interface FilterListProps {\n children: ReactNode;\n className?: string;\n}\n\nexport const FilterList = ({ children, className }: FilterListProps) => {\n return <div className={clsx(\"sds-filter-list\", className)}>{children}</div>;\n};\n","import { ReactNode } from \"react\";\n\nimport \"./filter-list-icon-label.pcss\";\n\nexport interface FilterListIconLabelProps {\n icon: ReactNode;\n label: string;\n}\n\nexport const FilterListIconLabel = ({\n icon,\n label,\n}: FilterListIconLabelProps) => {\n return (\n <div\n className=\"sds-filter-list-icon-label\"\n data-testid=\"filter-list-icon-label\"\n >\n <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n <span>{label}</span>\n </div>\n );\n};\n","import \"./filter-list-item.pcss\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, useId } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\n\nexport interface FilterListItemProps {\n type: \"radio\" | \"checkbox\";\n label: string;\n icon?: ReactElement;\n value: string;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n checked?: boolean;\n count?: number;\n}\n\nexport const FilterListItem = ({\n type,\n label,\n icon,\n value,\n onChange,\n checked,\n count,\n}: FilterListItemProps) => {\n const id = useId();\n const iconLabel = icon ? (\n <FilterListIconLabel label={label} icon={icon} />\n ) : (\n label\n );\n\n return (\n <div className=\"sds-filter-list-item\">\n <div className=\"sds-filter-list-item__input\">\n {type === \"radio\" && (\n <RadioInput\n tabIndex={0}\n data-testid=\"filter-list-item-input\"\n label={iconLabel}\n value={value}\n checked={checked}\n aria-describedby={id}\n />\n )}\n\n {type === \"checkbox\" && (\n <CheckboxInput\n tabIndex={0}\n data-testid=\"filter-list-item-input\"\n label={iconLabel}\n value={value}\n onChange={onChange}\n checked={checked}\n aria-describedby={id}\n />\n )}\n </div>\n\n {count !== undefined && (\n <div className=\"sds-filter-list-item__count\" id={id}>\n {count}\n </div>\n )}\n </div>\n );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ExpandShowIcon } from \"@sikt/sds-icons\";\nimport clsx from \"clsx\";\n\nimport \"./filter-list-expand.pcss\";\nimport { ReactNode, useState } from \"react\";\n\ninterface FilterListExpandProps {\n header: ReactNode;\n clickableHeader?: boolean;\n buttonTitle?: string;\n initialExpanded?: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n ariaLabelExpandToggle: string;\n children: ReactNode;\n}\n\nexport function FilterListExpand({\n header,\n clickableHeader = false,\n buttonTitle,\n initialExpanded = false,\n onExpandToggle,\n ariaLabelExpandToggle,\n children,\n}: FilterListExpandProps) {\n const [expanded, setExpanded] = useState(initialExpanded);\n const [animate, setAnimate] = useState(false);\n\n const onToggle = () => {\n const newState = !expanded;\n setAnimate(true);\n setExpanded(newState);\n if (onExpandToggle) {\n onExpandToggle(newState);\n }\n };\n\n const handleToggleByClick = () => {\n onToggle();\n };\n\n const handleToggleByKeyDown = (event: KeyboardEvent) => {\n const key = event.key;\n if (key == \"Enter\" || key === \" \") {\n onToggle();\n }\n };\n\n const icon = (\n <ExpandShowIcon\n className={clsx(\n \"sds-filter-list-expand__icon\",\n\n expanded &&\n (animate\n ? \"sds-filter-list-expand__icon--open\"\n : \"sds-filter-list-expand__icon--open-no-anim\"),\n !expanded &&\n (animate\n ? \"sds-filter-list-expand__icon--closed\"\n : \"sds-filter-list-expand__icon--closed-no-anim\"),\n )}\n />\n );\n\n return (\n <div className=\"sds-filter-list-expand\">\n {clickableHeader ? (\n <div\n onClick={handleToggleByClick}\n onKeyDown={handleToggleByKeyDown}\n tabIndex={0}\n role=\"button\"\n data-testid=\"toggle-expand-button\"\n className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n aria-expanded={!!expanded}\n aria-label={ariaLabelExpandToggle}\n >\n {header}\n <div className=\"sds-filter-list-expand--icon-container\">{icon}</div>\n </div>\n ) : (\n <div className=\"sds-filter-list-expand__header\">\n {header}\n <div className=\"sds-filter-list-expand--button-container\">\n <Button\n tabIndex={0}\n onClick={handleToggleByClick}\n className=\"sds-filter-list-expand__button\"\n data-testid=\"toggle-expand-button\"\n title={buttonTitle}\n aria-expanded={expanded}\n aria-label={ariaLabelExpandToggle}\n icon={icon as ReactNode}\n iconVariant=\"only\"\n size=\"small\"\n variant=\"transparent\"\n >\n {buttonTitle}\n </Button>\n </div>\n </div>\n )}\n\n <div\n data-testid=\"content\"\n className={clsx(\n \"sds-filter-list-expand__content\",\n expanded &&\n (animate\n ? \"sds-filter-list-expand__content--open\"\n : \"sds-filter-list-expand__content--open-no-anim\"),\n !expanded &&\n (animate\n ? \"sds-filter-list-expand__content--closed\"\n : \"sds-filter-list-expand__content--closed-no-anim\"),\n )}\n >\n {children}\n </div>\n </div>\n );\n}\n","import { Badge } from \"@sikt/sds-badge\";\nimport \"./filter-list-category.pcss\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\n\nexport interface FilterListCategoryProps {\n label: string;\n icon?: ReactNode;\n expanded?: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n onCategoryToggle?: (checked: boolean) => void;\n indeterminate: boolean;\n checked: boolean;\n count?: number;\n children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n label,\n icon,\n expanded,\n onExpandToggle,\n onCategoryToggle,\n indeterminate,\n checked,\n count,\n children,\n}: FilterListCategoryProps) => {\n const id = useId();\n\n return (\n <FilterListExpand\n ariaLabelExpandToggle={label}\n initialExpanded={expanded}\n onExpandToggle={onExpandToggle}\n header={\n <div className=\"sds-filter-list-category__header\">\n <div className=\"sds-filter-list-category__header-label\">\n <CheckboxInput\n tabIndex={0}\n data-testid=\"filter-list-category_check\"\n aria-describedby={id}\n label={\n icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n }\n onChange={(event) => {\n if (onCategoryToggle) {\n onCategoryToggle(event.target.checked);\n }\n }}\n indeterminate={indeterminate}\n checked={checked}\n />\n </div>\n {count !== undefined && count > 0 ? (\n <Badge id={id} visibility=\"strong\">\n {count}\n </Badge>\n ) : (\n \"\"\n )}\n </div>\n }\n >\n <div className=\"sds-filter-list-category__content\">{children}</div>\n </FilterListExpand>\n );\n};\n","import { Badge } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx\";\nimport { ReactNode, useId } from \"react\";\n\nimport \"./filter-list-section.pcss\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\n\nexport interface FilterListSectionProps {\n label: string;\n children: ReactNode;\n expandable?: {\n expanded: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n };\n count?: number;\n}\n\nexport const FilterListSection = ({\n label,\n children,\n expandable,\n count,\n}: FilterListSectionProps) => {\n const id = useId();\n\n const header = (\n <div\n aria-describedby={id}\n data-testid=\"filter-list-section-header\"\n className={clsx(\n \"sds-filter-list-section__header\",\n expandable\n ? \"sds-filter-list-section__header--expandable\"\n : \"sds-filter-list-section__header--default\",\n )}\n >\n <span className=\"sds-typography--strong\">{label}</span>\n\n {count !== undefined && count > 0 ? (\n <Badge visibility=\"strong\" data-testid=\"header-badge\" id={id}>\n {count}\n </Badge>\n ) : (\n \"\"\n )}\n </div>\n );\n\n return (\n <div>\n {expandable ? (\n <FilterListExpand\n header={header}\n clickableHeader\n ariaLabelExpandToggle={label}\n initialExpanded={expandable.expanded}\n onExpandToggle={expandable.onExpandToggle}\n >\n {children}\n </FilterListExpand>\n ) : (\n <>\n {header}\n {children}\n </>\n )}\n </div>\n );\n};\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{clsx as e}from"clsx/lite";import{jsx as i,jsxs as t,Fragment as a}from"react/jsx-runtime";import{CheckboxInput as l}from"@sikt/sds-checkbox";import{RadioInput as s}from"@sikt/sds-radio";import{useId as d,useState as n}from"react";import{Badge as r}from"@sikt/sds-badge";import{Button as c}from"@sikt/sds-button";import{ExpandShowIcon as o}from"@sikt/sds-icons";import p,{clsx as h}from"clsx";var m=({children:t,className:a})=>i("div",{className:e("sds-filter-list",a),children:t}),b=({icon:e,label:a})=>t("div",{className:"sds-filter-list-icon-label","data-testid":"filter-list-icon-label",children:[i("span",{className:"sds-filter-list-icon-label__icon",children:e}),i("span",{children:a})]}),x=({type:e,label:a,icon:n,value:r,onChange:c,checked:o,count:p})=>{const h=d(),m=n?i(b,{label:a,icon:n}):a;return t("div",{className:"sds-filter-list-item",children:[t("div",{className:"sds-filter-list-item__input",children:["radio"===e&&i(s,{tabIndex:0,"data-testid":"filter-list-item-input",label:m,value:r,checked:o,"aria-describedby":h}),"checkbox"===e&&i(l,{tabIndex:0,"data-testid":"filter-list-item-input",label:m,value:r,onChange:c,checked:o,"aria-describedby":h})]}),void 0!==p&&i("div",{className:"sds-filter-list-item__count",id:h,children:p})]})};function _({header:e,clickableHeader:a=!1,buttonTitle:l,initialExpanded:s=!1,onExpandToggle:d,ariaLabelExpandToggle:r,children:h}){const[m,b]=n(s),[x,_]=n(!1),f=()=>{const e=!m;_(!0),b(e),d&&d(e)},g=()=>{f()},v=i(o,{className:p("sds-filter-list-expand__icon",m&&(x?"sds-filter-list-expand__icon--open":"sds-filter-list-expand__icon--open-no-anim"),!m&&(x?"sds-filter-list-expand__icon--closed":"sds-filter-list-expand__icon--closed-no-anim"))});return t("div",{className:"sds-filter-list-expand",children:[t("div",a?{onClick:g,onKeyDown:e=>{const i=e.key;"Enter"!=i&&" "!==i||f()},tabIndex:0,role:"button","data-testid":"toggle-expand-button",className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable","aria-expanded":!!m,"aria-label":r,children:[e,i("div",{className:"sds-filter-list-expand--icon-container",children:v})]}:{className:"sds-filter-list-expand__header",children:[e,i("div",{className:"sds-filter-list-expand--button-container",children:i(c,{tabIndex:0,onClick:g,className:"sds-filter-list-expand__button","data-testid":"toggle-expand-button",title:l,"aria-expanded":m,"aria-label":r,icon:v,iconVariant:"only",size:"small",variant:"transparent",children:l})})]}),i("div",{"data-testid":"content",className:p("sds-filter-list-expand__content",m&&(x?"sds-filter-list-expand__content--open":"sds-filter-list-expand__content--open-no-anim"),!m&&(x?"sds-filter-list-expand__content--closed":"sds-filter-list-expand__content--closed-no-anim")),children:h})]})}var f=({label:e,icon:a,expanded:s,onExpandToggle:n,onCategoryToggle:c,indeterminate:o,checked:p,count:h,children:m})=>{const x=d();return i(_,{ariaLabelExpandToggle:e,initialExpanded:s,onExpandToggle:n,header:t("div",{className:"sds-filter-list-category__header",children:[i("div",{className:"sds-filter-list-category__header-label",children:i(l,{tabIndex:0,"data-testid":"filter-list-category_check","aria-describedby":x,label:a?i(b,{label:e,icon:a}):e,onChange:e=>{c&&c(e.target.checked)},indeterminate:o,checked:p})}),void 0!==h&&h>0?i(r,{id:x,visibility:"strong",children:h}):""]}),children:i("div",{className:"sds-filter-list-category__content",children:m})})},g=({label:e,children:l,expandable:s,count:n})=>{const c=d(),o=t("div",{"aria-describedby":c,"data-testid":"filter-list-section-header",className:h("sds-filter-list-section__header",s?"sds-filter-list-section__header--expandable":"sds-filter-list-section__header--default"),children:[i("span",{className:"sds-typography--strong",children:e}),void 0!==n&&n>0?i(r,{visibility:"strong","data-testid":"header-badge",id:c,children:n}):""]});return i("div",{children:s?i(_,{header:o,clickableHeader:!0,ariaLabelExpandToggle:e,initialExpanded:s.expanded,onExpandToggle:s.onExpandToggle,children:l}):t(a,{children:[o,l]})})};export{m as FilterList,f as FilterListCategory,x as FilterListItem,g as FilterListSection};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/FilterList/FilterList.tsx","../src/components/FilterListIconLabel/FilterListIconLabel.tsx","../src/FilterListItem/FilterListItem.tsx","../src/components/FilterListExpand/FilterListExpand.tsx","../src/FilterListCategory/FilterListCategory.tsx","../src/FilterListSection/FilterListSection.tsx"],"names":["jsx","jsxs","clsx","useId","CheckboxInput","Badge"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport { ReactNode } from \"react\";\n\nimport \"./filter-list.pcss\";\n\nexport interface FilterListProps {\n children: ReactNode;\n className?: string;\n}\n\nexport const FilterList = ({ children, className }: FilterListProps) => {\n return <div className={clsx(\"sds-filter-list\", className)}>{children}</div>;\n};\n","import { ReactNode } from \"react\";\n\nimport \"./filter-list-icon-label.pcss\";\n\nexport interface FilterListIconLabelProps {\n icon: ReactNode;\n label: string;\n}\n\nexport const FilterListIconLabel = ({\n icon,\n label,\n}: FilterListIconLabelProps) => {\n return (\n <div\n className=\"sds-filter-list-icon-label\"\n data-testid=\"filter-list-icon-label\"\n >\n <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n <span>{label}</span>\n </div>\n );\n};\n","import \"./filter-list-item.pcss\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, useId } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\n\nexport interface FilterListItemProps {\n type: \"radio\" | \"checkbox\";\n label: string;\n icon?: ReactElement;\n value: string;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n checked?: boolean;\n count?: number;\n}\n\nexport const FilterListItem = ({\n type,\n label,\n icon,\n value,\n onChange,\n checked,\n count,\n}: FilterListItemProps) => {\n const id = useId();\n const iconLabel = icon ? (\n <FilterListIconLabel label={label} icon={icon} />\n ) : (\n label\n );\n\n return (\n <div className=\"sds-filter-list-item\">\n <div className=\"sds-filter-list-item__input\">\n {type === \"radio\" && (\n <RadioInput\n tabIndex={0}\n data-testid=\"filter-list-item-input\"\n label={iconLabel}\n value={value}\n checked={checked}\n aria-describedby={id}\n />\n )}\n\n {type === \"checkbox\" && (\n <CheckboxInput\n tabIndex={0}\n data-testid=\"filter-list-item-input\"\n label={iconLabel}\n value={value}\n onChange={onChange}\n checked={checked}\n aria-describedby={id}\n />\n )}\n </div>\n\n {count !== undefined && (\n <div className=\"sds-filter-list-item__count\" id={id}>\n {count}\n </div>\n )}\n </div>\n );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ExpandShowIcon } from \"@sikt/sds-icons\";\nimport clsx from \"clsx\";\n\nimport \"./filter-list-expand.pcss\";\nimport { ReactNode, useState } from \"react\";\n\ninterface FilterListExpandProps {\n header: ReactNode;\n clickableHeader?: boolean;\n buttonTitle?: string;\n initialExpanded?: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n ariaLabelExpandToggle: string;\n children: ReactNode;\n}\n\nexport function FilterListExpand({\n header,\n clickableHeader = false,\n buttonTitle,\n initialExpanded = false,\n onExpandToggle,\n ariaLabelExpandToggle,\n children,\n}: FilterListExpandProps) {\n const [expanded, setExpanded] = useState(initialExpanded);\n const [animate, setAnimate] = useState(false);\n\n const onToggle = () => {\n const newState = !expanded;\n setAnimate(true);\n setExpanded(newState);\n if (onExpandToggle) {\n onExpandToggle(newState);\n }\n };\n\n const handleToggleByClick = () => {\n onToggle();\n };\n\n const handleToggleByKeyDown = (event: KeyboardEvent) => {\n const key = event.key;\n if (key == \"Enter\" || key === \" \") {\n onToggle();\n }\n };\n\n const icon = (\n <ExpandShowIcon\n className={clsx(\n \"sds-filter-list-expand__icon\",\n\n expanded &&\n (animate\n ? \"sds-filter-list-expand__icon--open\"\n : \"sds-filter-list-expand__icon--open-no-anim\"),\n !expanded &&\n (animate\n ? \"sds-filter-list-expand__icon--closed\"\n : \"sds-filter-list-expand__icon--closed-no-anim\"),\n )}\n />\n );\n\n return (\n <div className=\"sds-filter-list-expand\">\n {clickableHeader ? (\n <div\n onClick={handleToggleByClick}\n onKeyDown={handleToggleByKeyDown}\n tabIndex={0}\n role=\"button\"\n data-testid=\"toggle-expand-button\"\n className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n aria-expanded={!!expanded}\n aria-label={ariaLabelExpandToggle}\n >\n {header}\n <div className=\"sds-filter-list-expand--icon-container\">{icon}</div>\n </div>\n ) : (\n <div className=\"sds-filter-list-expand__header\">\n {header}\n <div className=\"sds-filter-list-expand--button-container\">\n <Button\n tabIndex={0}\n onClick={handleToggleByClick}\n className=\"sds-filter-list-expand__button\"\n data-testid=\"toggle-expand-button\"\n title={buttonTitle}\n aria-expanded={expanded}\n aria-label={ariaLabelExpandToggle}\n icon={icon as ReactNode}\n iconVariant=\"only\"\n size=\"small\"\n variant=\"transparent\"\n >\n {buttonTitle}\n </Button>\n </div>\n </div>\n )}\n\n <div\n data-testid=\"content\"\n className={clsx(\n \"sds-filter-list-expand__content\",\n expanded &&\n (animate\n ? \"sds-filter-list-expand__content--open\"\n : \"sds-filter-list-expand__content--open-no-anim\"),\n !expanded &&\n (animate\n ? \"sds-filter-list-expand__content--closed\"\n : \"sds-filter-list-expand__content--closed-no-anim\"),\n )}\n >\n {children}\n </div>\n </div>\n );\n}\n","import { Badge } from \"@sikt/sds-badge\";\nimport \"./filter-list-category.pcss\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\n\nexport interface FilterListCategoryProps {\n label: string;\n icon?: ReactNode;\n expanded?: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n onCategoryToggle?: (checked: boolean) => void;\n indeterminate: boolean;\n checked: boolean;\n count?: number;\n children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n label,\n icon,\n expanded,\n onExpandToggle,\n onCategoryToggle,\n indeterminate,\n checked,\n count,\n children,\n}: FilterListCategoryProps) => {\n const id = useId();\n\n return (\n <FilterListExpand\n ariaLabelExpandToggle={label}\n initialExpanded={expanded}\n onExpandToggle={onExpandToggle}\n header={\n <div className=\"sds-filter-list-category__header\">\n <div className=\"sds-filter-list-category__header-label\">\n <CheckboxInput\n tabIndex={0}\n data-testid=\"filter-list-category_check\"\n aria-describedby={id}\n label={\n icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n }\n onChange={(event) => {\n if (onCategoryToggle) {\n onCategoryToggle(event.target.checked);\n }\n }}\n indeterminate={indeterminate}\n checked={checked}\n />\n </div>\n {count !== undefined && count > 0 ? (\n <Badge id={id} visibility=\"strong\">\n {count}\n </Badge>\n ) : (\n \"\"\n )}\n </div>\n }\n >\n <div className=\"sds-filter-list-category__content\">{children}</div>\n </FilterListExpand>\n );\n};\n","import { Badge } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx\";\nimport { ReactNode, useId } from \"react\";\n\nimport \"./filter-list-section.pcss\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\n\nexport interface FilterListSectionProps {\n label: string;\n children: ReactNode;\n expandable?: {\n expanded: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n };\n count?: number;\n}\n\nexport const FilterListSection = ({\n label,\n children,\n expandable,\n count,\n}: FilterListSectionProps) => {\n const id = useId();\n\n const header = (\n <div\n aria-describedby={id}\n data-testid=\"filter-list-section-header\"\n className={clsx(\n \"sds-filter-list-section__header\",\n expandable\n ? \"sds-filter-list-section__header--expandable\"\n : \"sds-filter-list-section__header--default\",\n )}\n >\n <span className=\"sds-typography--strong\">{label}</span>\n\n {count !== undefined && count > 0 ? (\n <Badge visibility=\"strong\" data-testid=\"header-badge\" id={id}>\n {count}\n </Badge>\n ) : (\n \"\"\n )}\n </div>\n );\n\n return (\n <div>\n {expandable ? (\n <FilterListExpand\n header={header}\n clickableHeader\n ariaLabelExpandToggle={label}\n initialExpanded={expandable.expanded}\n onExpandToggle={expandable.onExpandToggle}\n >\n {children}\n </FilterListExpand>\n ) : (\n <>\n {header}\n {children}\n </>\n )}\n </div>\n );\n};\n"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@sikt/sds-filter-list",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"license": "UNLICENSED",
|
|
5
|
+
"homepage": "https://designsystem.sikt.no/",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://gitlab.sikt.no/designsystem/sds-komponentbibliotek.git"
|
|
9
|
+
},
|
|
10
|
+
"type": "commonjs",
|
|
11
|
+
"main": "dist/index.js",
|
|
12
|
+
"module": "dist/index.mjs",
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"style": "./dist/index.css",
|
|
16
|
+
"import": {
|
|
17
|
+
"types": "./dist/index.d.mts",
|
|
18
|
+
"default": "./dist/index.mjs"
|
|
19
|
+
},
|
|
20
|
+
"require": {
|
|
21
|
+
"types": "./dist/index.d.ts",
|
|
22
|
+
"default": "./dist/index.js"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"./dist/*": "./dist/*"
|
|
26
|
+
},
|
|
27
|
+
"types": "dist/index.d.ts",
|
|
28
|
+
"style": "dist/index.css",
|
|
29
|
+
"files": [
|
|
30
|
+
"CHANGELOG.md",
|
|
31
|
+
"dist",
|
|
32
|
+
"README.md"
|
|
33
|
+
],
|
|
34
|
+
"scripts": {
|
|
35
|
+
"build": "tsup"
|
|
36
|
+
},
|
|
37
|
+
"dependencies": {
|
|
38
|
+
"@sikt/sds-badge": "^2.0.3",
|
|
39
|
+
"@sikt/sds-button": "^4.0.1",
|
|
40
|
+
"@sikt/sds-checkbox": "^3.1.4",
|
|
41
|
+
"@sikt/sds-core": "^4.4.0",
|
|
42
|
+
"@sikt/sds-icons": "^3.1.0",
|
|
43
|
+
"@sikt/sds-radio": "^3.0.4"
|
|
44
|
+
},
|
|
45
|
+
"peerDependencies": {
|
|
46
|
+
"@types/react": "^18.0.0 || ^19.0.0",
|
|
47
|
+
"@types/react-dom": "^18.0.0 || ^19.0.0",
|
|
48
|
+
"clsx": "^2.1.0",
|
|
49
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
50
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@sikt/sds-tokens": "^3.0.0"
|
|
54
|
+
}
|
|
55
|
+
}
|