@ably/ui 14.0.4 → 14.0.5
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/core/styles/forms.css +4 -4
- package/core/styles/toggles.css +38 -0
- package/core/styles.components.css +1 -0
- package/package.json +9 -10
- package/src/core/styles/forms.css +4 -4
- package/src/core/styles/toggles.css +38 -0
- package/src/core/styles.components.css +1 -0
- package/src/pages/Forms.mdx +48 -2
- package/src/pages/Toggles.mdx +42 -0
- package/src/pages/utils.ts +10 -0
- package/tailwind.config.js +3 -0
package/core/styles/forms.css
CHANGED
|
@@ -31,10 +31,6 @@
|
|
|
31
31
|
@apply text-p2 font-medium text-cool-black;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
|
35
|
-
@apply bg-gui-unavailable border;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
34
|
.ui-checkbox-input:focus + .ui-checkbox-styled {
|
|
39
35
|
border-width: 0.125rem;
|
|
40
36
|
@apply border-gui-focus;
|
|
@@ -48,6 +44,10 @@
|
|
|
48
44
|
@apply block;
|
|
49
45
|
}
|
|
50
46
|
|
|
47
|
+
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
|
48
|
+
@apply bg-gui-unavailable border;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
51
|
.ui-textarea {
|
|
52
52
|
@apply font-sans font-medium text-cool-black text-p1;
|
|
53
53
|
@apply p-input mb-16;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.ui-toggle {
|
|
3
|
+
@apply h-32 w-[56px] rounded-full relative inline-block;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.ui-toggle:has(:disabled) {
|
|
7
|
+
@apply pointer-events-none;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.ui-toggle input {
|
|
11
|
+
@apply w-0 h-0 opacity-0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ui-toggle-slider {
|
|
15
|
+
@apply absolute cursor-pointer inset-0 transition-all bg-neutral-600 rounded-full;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ui-toggle-slider:before {
|
|
19
|
+
@apply absolute h-[28px] w-[28px] left-2 bottom-2 bg-white rounded-full transition-transform drop-shadow-toggle;
|
|
20
|
+
content: "";
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.ui-toggle input:checked + .ui-toggle-slider {
|
|
24
|
+
@apply bg-orange-600;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.ui-toggle input:disabled + .ui-toggle-slider {
|
|
28
|
+
@apply bg-gui-unavailable;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.ui-toggle input:checked + .ui-toggle-slider:before {
|
|
32
|
+
@apply translate-x-24;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.ui-toggle input:disabled + .ui-toggle-slider:before {
|
|
36
|
+
@apply bg-neutral-500;
|
|
37
|
+
}
|
|
38
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "14.0.
|
|
3
|
+
"version": "14.0.5",
|
|
4
4
|
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -15,15 +15,14 @@
|
|
|
15
15
|
"tailwind.extend.js"
|
|
16
16
|
],
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@chromatic-com/storybook": "^1",
|
|
19
18
|
"@mrtkrcm/cypress-plugin-snapshots": "https://github.com/mrtkrcm/cypress-plugin-snapshots#v1.13.0",
|
|
20
|
-
"@storybook/addon-essentials": "^8.1.
|
|
21
|
-
"@storybook/addon-interactions": "^8.1.
|
|
22
|
-
"@storybook/addon-links": "^8.1.
|
|
23
|
-
"@storybook/blocks": "^8.1.
|
|
24
|
-
"@storybook/react": "^8.1.
|
|
25
|
-
"@storybook/react-vite": "^8.1.
|
|
26
|
-
"@storybook/test": "^8.1.
|
|
19
|
+
"@storybook/addon-essentials": "^8.1.7",
|
|
20
|
+
"@storybook/addon-interactions": "^8.1.7",
|
|
21
|
+
"@storybook/addon-links": "^8.1.7",
|
|
22
|
+
"@storybook/blocks": "^8.1.7",
|
|
23
|
+
"@storybook/react": "^8.1.7",
|
|
24
|
+
"@storybook/react-vite": "^8.1.7",
|
|
25
|
+
"@storybook/test": "^8.1.7",
|
|
27
26
|
"@swc/cli": "^0.3.10",
|
|
28
27
|
"@swc/core": "^1.4.11",
|
|
29
28
|
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
|
@@ -39,7 +38,7 @@
|
|
|
39
38
|
"msw": "2.3.1",
|
|
40
39
|
"msw-storybook-addon": "^2.0.2",
|
|
41
40
|
"prettier": "^3.2.5",
|
|
42
|
-
"storybook": "^8.1.
|
|
41
|
+
"storybook": "^8.1.7",
|
|
43
42
|
"svg-sprite": "^2.0.4",
|
|
44
43
|
"tailwindcss": "^3.3.6",
|
|
45
44
|
"typescript": "5.4.5",
|
|
@@ -31,10 +31,6 @@
|
|
|
31
31
|
@apply text-p2 font-medium text-cool-black;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
|
35
|
-
@apply bg-gui-unavailable border;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
34
|
.ui-checkbox-input:focus + .ui-checkbox-styled {
|
|
39
35
|
border-width: 0.125rem;
|
|
40
36
|
@apply border-gui-focus;
|
|
@@ -48,6 +44,10 @@
|
|
|
48
44
|
@apply block;
|
|
49
45
|
}
|
|
50
46
|
|
|
47
|
+
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
|
48
|
+
@apply bg-gui-unavailable border;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
51
|
.ui-textarea {
|
|
52
52
|
@apply font-sans font-medium text-cool-black text-p1;
|
|
53
53
|
@apply p-input mb-16;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.ui-toggle {
|
|
3
|
+
@apply h-32 w-[56px] rounded-full relative inline-block;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.ui-toggle:has(:disabled) {
|
|
7
|
+
@apply pointer-events-none;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.ui-toggle input {
|
|
11
|
+
@apply w-0 h-0 opacity-0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ui-toggle-slider {
|
|
15
|
+
@apply absolute cursor-pointer inset-0 transition-all bg-neutral-600 rounded-full;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ui-toggle-slider:before {
|
|
19
|
+
@apply absolute h-[28px] w-[28px] left-2 bottom-2 bg-white rounded-full transition-transform drop-shadow-toggle;
|
|
20
|
+
content: "";
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.ui-toggle input:checked + .ui-toggle-slider {
|
|
24
|
+
@apply bg-orange-600;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.ui-toggle input:disabled + .ui-toggle-slider {
|
|
28
|
+
@apply bg-gui-unavailable;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.ui-toggle input:checked + .ui-toggle-slider:before {
|
|
32
|
+
@apply translate-x-24;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.ui-toggle input:disabled + .ui-toggle-slider:before {
|
|
36
|
+
@apply bg-neutral-500;
|
|
37
|
+
}
|
|
38
|
+
}
|
package/src/pages/Forms.mdx
CHANGED
|
@@ -82,7 +82,7 @@ import Icon from "../core/Icon";
|
|
|
82
82
|
<h4 className="ui-text-h3 mb-16">
|
|
83
83
|
Checkboxes with P2 size text and tighter spacing
|
|
84
84
|
</h4>
|
|
85
|
-
<div className="
|
|
85
|
+
<div className="ui-checkbox-p2">
|
|
86
86
|
<input
|
|
87
87
|
data-ui-checkbox-native=""
|
|
88
88
|
type="checkbox"
|
|
@@ -108,7 +108,7 @@ import Icon from "../core/Icon";
|
|
|
108
108
|
this privacy policy.
|
|
109
109
|
</label>
|
|
110
110
|
</div>
|
|
111
|
-
<div className="
|
|
111
|
+
<div className="ui-checkbox-p2">
|
|
112
112
|
<input
|
|
113
113
|
data-ui-checkbox-native=""
|
|
114
114
|
type="checkbox"
|
|
@@ -150,6 +150,52 @@ import Icon from "../core/Icon";
|
|
|
150
150
|
</label>
|
|
151
151
|
</div>
|
|
152
152
|
</div>
|
|
153
|
+
<div className="mb-40">
|
|
154
|
+
<h4 className="ui-text-h3 mb-16">Disabled checkboxes</h4>
|
|
155
|
+
<div className="ui-checkbox-p2">
|
|
156
|
+
<input
|
|
157
|
+
data-ui-checkbox-native=""
|
|
158
|
+
type="checkbox"
|
|
159
|
+
id="checkbox-example-7"
|
|
160
|
+
name="checkbox-example-7"
|
|
161
|
+
value="yes"
|
|
162
|
+
className="ui-checkbox-input"
|
|
163
|
+
disabled
|
|
164
|
+
/>
|
|
165
|
+
<div data-ui-checkbox-styled="" className="ui-checkbox-styled">
|
|
166
|
+
<Icon
|
|
167
|
+
name="icon-gui-tick"
|
|
168
|
+
size="1rem"
|
|
169
|
+
additionalCSS="ui-checkbox-styled-tick"
|
|
170
|
+
/>
|
|
171
|
+
</div>
|
|
172
|
+
<label htmlFor="checkbox-example-7" className="ui-checkbox-label-p2">
|
|
173
|
+
Disabled checkbox
|
|
174
|
+
</label>
|
|
175
|
+
</div>
|
|
176
|
+
<div className="ui-checkbox-p2">
|
|
177
|
+
<input
|
|
178
|
+
data-ui-checkbox-native=""
|
|
179
|
+
type="checkbox"
|
|
180
|
+
id="checkbox-example-8"
|
|
181
|
+
name="checkbox-example-8"
|
|
182
|
+
value="yes"
|
|
183
|
+
className="ui-checkbox-input"
|
|
184
|
+
checked
|
|
185
|
+
disabled
|
|
186
|
+
/>
|
|
187
|
+
<div data-ui-checkbox-styled="" className="ui-checkbox-styled">
|
|
188
|
+
<Icon
|
|
189
|
+
name="icon-gui-tick"
|
|
190
|
+
size="1rem"
|
|
191
|
+
additionalCSS="ui-checkbox-styled-tick"
|
|
192
|
+
/>
|
|
193
|
+
</div>
|
|
194
|
+
<label htmlFor="checkbox-example-8" className="ui-checkbox-label-p2">
|
|
195
|
+
Disabled checkbox with a checked state
|
|
196
|
+
</label>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
153
199
|
<h3 className="ui-text-h2 mb-24">Textarea</h3>
|
|
154
200
|
<div className="mb-40">
|
|
155
201
|
<label className="ui-text-p1 block mb-24" htmlFor="example-text-area">
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { Meta, Unstyled } from "@storybook/blocks";
|
|
2
|
+
import { togglesHtml } from "./utils.ts";
|
|
3
|
+
import Code from "../core/Code";
|
|
4
|
+
|
|
5
|
+
<Meta title="Brand/Toggles" />
|
|
6
|
+
|
|
7
|
+
<Unstyled>
|
|
8
|
+
<h1 className="ui-text-h1 mb-32">Toggles</h1>
|
|
9
|
+
|
|
10
|
+
<div className="flex items-center gap-24 mb-24">
|
|
11
|
+
<label className="ui-toggle">
|
|
12
|
+
<input type="checkbox" />
|
|
13
|
+
<span className="ui-toggle-slider"></span>
|
|
14
|
+
</label>
|
|
15
|
+
Default
|
|
16
|
+
</div>
|
|
17
|
+
<div className="flex items-center gap-24 mb-24">
|
|
18
|
+
<label className="ui-toggle">
|
|
19
|
+
<input type="checkbox" checked />
|
|
20
|
+
<span className="ui-toggle-slider"></span>
|
|
21
|
+
</label>
|
|
22
|
+
Toggled
|
|
23
|
+
</div>
|
|
24
|
+
<div className="flex items-center gap-24 mb-24">
|
|
25
|
+
<label className="ui-toggle">
|
|
26
|
+
<input type="checkbox" disabled />
|
|
27
|
+
<span className="ui-toggle-slider"></span>
|
|
28
|
+
</label>
|
|
29
|
+
Disabled
|
|
30
|
+
</div>
|
|
31
|
+
<div className="flex items-center gap-24 mb-24">
|
|
32
|
+
<label className="ui-toggle">
|
|
33
|
+
<input type="checkbox" />
|
|
34
|
+
<span className="ui-toggle-slider bg-neutral-800"></span>
|
|
35
|
+
</label>
|
|
36
|
+
Customised slider colour
|
|
37
|
+
</div>
|
|
38
|
+
<div className="ui-divider-spacing">
|
|
39
|
+
<h4 className="ui-text-h3 mb-16">Example HTML</h4>
|
|
40
|
+
<Code language="html" snippet={togglesHtml} />
|
|
41
|
+
</div>
|
|
42
|
+
</Unstyled>
|
package/src/pages/utils.ts
CHANGED
|
@@ -68,3 +68,13 @@ export const formsHtml = `
|
|
|
68
68
|
<label for="checkbox-example" class="ui-checkbox-label-p1">Yes</label>
|
|
69
69
|
</div>
|
|
70
70
|
`;
|
|
71
|
+
|
|
72
|
+
export const togglesHtml = `
|
|
73
|
+
<div className="flex items-center gap-24 mb-16">
|
|
74
|
+
<label className="ui-toggle">
|
|
75
|
+
<input type="checkbox" />
|
|
76
|
+
<span className="ui-toggle-slider"></span>
|
|
77
|
+
</label>
|
|
78
|
+
Default
|
|
79
|
+
</div>
|
|
80
|
+
`;
|
package/tailwind.config.js
CHANGED
|
@@ -271,6 +271,9 @@ module.exports = {
|
|
|
271
271
|
quote: "0rem 1.5rem 2rem 0rem #0000000d",
|
|
272
272
|
// opacity
|
|
273
273
|
},
|
|
274
|
+
dropShadow: {
|
|
275
|
+
toggle: ["0 4px 4px rgba(0,0,0,0.25)", "0 4px 8px rgba(0,0,0,0.15)"],
|
|
276
|
+
},
|
|
274
277
|
letterSpacing: {
|
|
275
278
|
"tighten-0.025": "var(--ls-tighten-0_025)",
|
|
276
279
|
"tighten-0.02": "var(--ls-tighten-0_02)",
|