@purpurds/toggle 3.5.0 → 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 +3 -3
- package/package.json +7 -7
- package/readme.mdx +6 -18
package/dist/LICENSE.txt
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
Name: @purpurds/icon
|
|
2
|
-
Version: 3.
|
|
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/label
|
|
9
|
-
Version: 3.
|
|
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/paragraph
|
|
16
|
-
Version: 3.
|
|
16
|
+
Version: 3.5.1
|
|
17
17
|
License: AGPL-3.0-only
|
|
18
18
|
Private: false
|
|
19
19
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/toggle",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/toggle.cjs.js",
|
|
6
6
|
"types": "./dist/toggle.d.ts",
|
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
"@radix-ui/react-switch": "~1.0.3",
|
|
19
19
|
"classnames": "~2.5.0",
|
|
20
20
|
"@storybook/client-api": "~7.6.0",
|
|
21
|
-
"@purpurds/
|
|
22
|
-
"@purpurds/
|
|
23
|
-
"@purpurds/
|
|
24
|
-
"@purpurds/
|
|
21
|
+
"@purpurds/icon": "3.6.0",
|
|
22
|
+
"@purpurds/paragraph": "3.6.0",
|
|
23
|
+
"@purpurds/tokens": "3.6.0",
|
|
24
|
+
"@purpurds/label": "3.6.0"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@rushstack/eslint-patch": "~1.7.0",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"prettier": "~2.8.8",
|
|
43
43
|
"react-dom": "~18.2.0",
|
|
44
44
|
"react": "~18.2.0",
|
|
45
|
-
"typescript": "~5.
|
|
46
|
-
"vite": "~5.
|
|
45
|
+
"typescript": "~5.4.2",
|
|
46
|
+
"vite": "~5.2.2",
|
|
47
47
|
"vitest": "~1.4.0",
|
|
48
48
|
"@purpurds/component-rig": "1.0.0"
|
|
49
49
|
},
|
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/toggle/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 toggle.
|
|
53
41
|
|
|
54
42
|
```tsx
|
|
55
|
-
import { Toggle } from "@purpurds/
|
|
43
|
+
import { Toggle } from "@purpurds/purpur";
|
|
56
44
|
|
|
57
45
|
export const MyComponent = () => {
|
|
58
46
|
const [isChecked, setIsChecked] = useState(false);
|
|
@@ -79,7 +67,7 @@ For when you don't have to controll state of the toggle, e.g. when in a form.
|
|
|
79
67
|
_NOTE: do not use toggles instead of checkboxes or radio buttons!_
|
|
80
68
|
|
|
81
69
|
```tsx
|
|
82
|
-
import { Toggle } from "@purpurds/
|
|
70
|
+
import { Toggle } from "@purpurds/purpur";
|
|
83
71
|
|
|
84
72
|
export const MyComponent = () => {
|
|
85
73
|
/**
|
|
@@ -103,7 +91,7 @@ export const MyComponent = () => {
|
|
|
103
91
|
Use the `aria-labelledby` property and pass the id of the label.
|
|
104
92
|
|
|
105
93
|
```tsx
|
|
106
|
-
import { Toggle } from "@purpurds/
|
|
94
|
+
import { Toggle } from "@purpurds/purpur";
|
|
107
95
|
|
|
108
96
|
export const MyComponent = () => {
|
|
109
97
|
return (
|
|
@@ -124,7 +112,7 @@ export const MyComponent = () => {
|
|
|
124
112
|
If there should be no label at all, use the `aria-label` to label the toggle for screen readers.
|
|
125
113
|
|
|
126
114
|
```tsx
|
|
127
|
-
import { Toggle } from "@purpurds/
|
|
115
|
+
import { Toggle } from "@purpurds/purpur";
|
|
128
116
|
|
|
129
117
|
export const MyComponent = () => {
|
|
130
118
|
return (
|