@purpurds/checkbox 3.5.1 → 3.6.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/dist/LICENSE.txt +4 -4
- package/package.json +8 -8
- package/readme.mdx +7 -19
package/dist/LICENSE.txt
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
Name: @purpurds/field-error-text
|
|
2
|
-
Version: 3.5.
|
|
2
|
+
Version: 3.5.1
|
|
3
3
|
License: AGPL-3.0-only
|
|
4
4
|
Private: false
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
Name: @purpurds/icon
|
|
9
|
-
Version: 3.5.
|
|
9
|
+
Version: 3.5.1
|
|
10
10
|
License: AGPL-3.0-only
|
|
11
11
|
Private: false
|
|
12
12
|
|
|
13
13
|
---
|
|
14
14
|
|
|
15
15
|
Name: @purpurds/label
|
|
16
|
-
Version: 3.5.
|
|
16
|
+
Version: 3.5.1
|
|
17
17
|
License: AGPL-3.0-only
|
|
18
18
|
Private: false
|
|
19
19
|
|
|
20
20
|
---
|
|
21
21
|
|
|
22
22
|
Name: @purpurds/paragraph
|
|
23
|
-
Version: 3.5.
|
|
23
|
+
Version: 3.5.1
|
|
24
24
|
License: AGPL-3.0-only
|
|
25
25
|
Private: false
|
|
26
26
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/checkbox",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/checkbox.cjs.js",
|
|
6
6
|
"types": "./dist/checkbox.d.ts",
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
"classnames": "~2.5.0",
|
|
19
19
|
"@radix-ui/react-checkbox": "~1.0.4",
|
|
20
20
|
"@storybook/client-api": "~7.6.0",
|
|
21
|
-
"@purpurds/
|
|
22
|
-
"@purpurds/icon": "3.
|
|
23
|
-
"@purpurds/
|
|
24
|
-
"@purpurds/
|
|
25
|
-
"@purpurds/
|
|
21
|
+
"@purpurds/paragraph": "3.6.0",
|
|
22
|
+
"@purpurds/icon": "3.6.0",
|
|
23
|
+
"@purpurds/field-error-text": "3.6.0",
|
|
24
|
+
"@purpurds/tokens": "3.6.0",
|
|
25
|
+
"@purpurds/label": "3.6.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@rushstack/eslint-patch": "~1.7.0",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"prettier": "~2.8.8",
|
|
44
44
|
"react-dom": "~18.2.0",
|
|
45
45
|
"react": "~18.2.0",
|
|
46
|
-
"typescript": "~5.
|
|
47
|
-
"vite": "~5.
|
|
46
|
+
"typescript": "~5.4.2",
|
|
47
|
+
"vite": "~5.2.2",
|
|
48
48
|
"vitest": "~1.4.0",
|
|
49
49
|
"@purpurds/component-rig": "1.0.0"
|
|
50
50
|
},
|
package/readme.mdx
CHANGED
|
@@ -21,24 +21,12 @@ import packageInfo from "./package.json";
|
|
|
21
21
|
|
|
22
22
|
#### Via NPM
|
|
23
23
|
|
|
24
|
-
Add the dependency to your consumer app like `"@purpurds/
|
|
25
|
-
|
|
26
|
-
#### From outside the monorepo (build-time)
|
|
27
|
-
|
|
28
|
-
To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
|
|
29
|
-
|
|
30
|
-
---
|
|
24
|
+
Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
|
|
31
25
|
|
|
32
26
|
In MyApp.tsx
|
|
33
27
|
|
|
34
28
|
```tsx
|
|
35
|
-
import "@purpurds/
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
and
|
|
39
|
-
|
|
40
|
-
```tsx
|
|
41
|
-
import "@purpurds/checkbox/styles";
|
|
29
|
+
import "@purpurds/purpur/styles";
|
|
42
30
|
```
|
|
43
31
|
|
|
44
32
|
### Examples
|
|
@@ -52,7 +40,7 @@ In MyComponent.tsx
|
|
|
52
40
|
For when you have to controll and use the state of the checkbox.
|
|
53
41
|
|
|
54
42
|
```tsx
|
|
55
|
-
import { Checkbox } from "@purpurds/
|
|
43
|
+
import { Checkbox } from "@purpurds/purpur";
|
|
56
44
|
|
|
57
45
|
export const MyComponent = () => {
|
|
58
46
|
const [checked, setChecked] = useState(false);
|
|
@@ -77,7 +65,7 @@ export const MyComponent = () => {
|
|
|
77
65
|
When using the Indeterminate state, the toggle must be controlled.
|
|
78
66
|
|
|
79
67
|
```tsx
|
|
80
|
-
import { Checkbox } from "@purpurds/
|
|
68
|
+
import { Checkbox } from "@purpurds/purpur";
|
|
81
69
|
|
|
82
70
|
export const MyComponent = () => {
|
|
83
71
|
const [checked, setChecked] = useState(false);
|
|
@@ -111,7 +99,7 @@ export const MyComponent = () => {
|
|
|
111
99
|
For when you don't have to controll state of the checkbox, e.g. when in a form.
|
|
112
100
|
|
|
113
101
|
```tsx
|
|
114
|
-
import { Checkbox } from "@purpurds/
|
|
102
|
+
import { Checkbox } from "@purpurds/purpur";
|
|
115
103
|
|
|
116
104
|
export const MyComponent = () => {
|
|
117
105
|
/**
|
|
@@ -135,7 +123,7 @@ export const MyComponent = () => {
|
|
|
135
123
|
Use the `aria-labelledby` property and pass the id of the label.
|
|
136
124
|
|
|
137
125
|
```tsx
|
|
138
|
-
import { Checkbox } from "@purpurds/
|
|
126
|
+
import { Checkbox } from "@purpurds/purpur";
|
|
139
127
|
|
|
140
128
|
export const MyComponent = () => {
|
|
141
129
|
return (
|
|
@@ -156,7 +144,7 @@ export const MyComponent = () => {
|
|
|
156
144
|
If there should be no label at all, use the `aria-label` to label the checkbox for screen readers.
|
|
157
145
|
|
|
158
146
|
```tsx
|
|
159
|
-
import { Checkbox } from "@purpurds/
|
|
147
|
+
import { Checkbox } from "@purpurds/purpur";
|
|
160
148
|
|
|
161
149
|
export const MyComponent = () => {
|
|
162
150
|
return (
|