@duro-app/ui 3.4.2 → 3.5.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/components/Icon/Icon.d.ts +1 -1
- package/dist/components/Icon/Icon.d.ts.map +1 -1
- package/dist/components/InputGroup/InputGroup.stories.d.ts +1 -0
- package/dist/components/InputGroup/InputGroup.stories.d.ts.map +1 -1
- package/dist/index.js +126 -113
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Icon/Icon.tsx +20 -0
- package/src/components/InputGroup/InputGroup.stories.tsx +21 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@duro-app/ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
66
|
"@tanstack/react-virtual": "^3.14.6",
|
|
67
|
-
"@duro-app/tokens": "^3.
|
|
67
|
+
"@duro-app/tokens": "^3.5.0"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@babel/preset-typescript": "^7.28.0",
|
|
@@ -37,6 +37,9 @@ export type IconName =
|
|
|
37
37
|
| 'mail'
|
|
38
38
|
| 'file-text'
|
|
39
39
|
| 'plug'
|
|
40
|
+
// Input / action glyphs
|
|
41
|
+
| 'search'
|
|
42
|
+
| 'mic'
|
|
40
43
|
// Color-mode glyphs
|
|
41
44
|
| 'sun'
|
|
42
45
|
| 'moon'
|
|
@@ -264,6 +267,23 @@ const strokeIcons: Partial<Record<IconName, ReactNode>> = {
|
|
|
264
267
|
<path d="M9 10.76V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6.76a2 2 0 0 0 .55 1.38l1.68 1.78A1 1 0 0 1 16.5 16h-9a1 1 0 0 1-.73-1.68l1.68-1.78A2 2 0 0 0 9 10.76z" />
|
|
265
268
|
</>
|
|
266
269
|
),
|
|
270
|
+
// ---- input / action ----
|
|
271
|
+
// Magnifying glass — search fields, find actions.
|
|
272
|
+
search: (
|
|
273
|
+
<>
|
|
274
|
+
<circle cx="11" cy="11" r="8" />
|
|
275
|
+
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
276
|
+
</>
|
|
277
|
+
),
|
|
278
|
+
// Microphone — voice input, dictation.
|
|
279
|
+
mic: (
|
|
280
|
+
<>
|
|
281
|
+
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
|
|
282
|
+
<path d="M19 10v2a7 7 0 0 1-14 0v-2" />
|
|
283
|
+
<line x1="12" y1="19" x2="12" y2="23" />
|
|
284
|
+
<line x1="8" y1="23" x2="16" y2="23" />
|
|
285
|
+
</>
|
|
286
|
+
),
|
|
267
287
|
// ---- color mode ----
|
|
268
288
|
sun: (
|
|
269
289
|
<>
|
|
@@ -3,6 +3,7 @@ import {expect, fn} from 'storybook/test'
|
|
|
3
3
|
import {css, html} from 'react-strict-dom'
|
|
4
4
|
import {InputGroup} from './InputGroup'
|
|
5
5
|
import {Input} from '../Input/Input'
|
|
6
|
+
import {Icon} from '../Icon/Icon'
|
|
6
7
|
import {spacing} from '@duro-app/tokens/tokens/spacing.css'
|
|
7
8
|
|
|
8
9
|
const meta: Meta = {
|
|
@@ -64,6 +65,26 @@ export const BothSides: Story = {
|
|
|
64
65
|
},
|
|
65
66
|
}
|
|
66
67
|
|
|
68
|
+
export const SearchField: Story = {
|
|
69
|
+
render: () => (
|
|
70
|
+
<html.div style={layoutStyles.container}>
|
|
71
|
+
<InputGroup.Root>
|
|
72
|
+
<InputGroup.Addon position="start">
|
|
73
|
+
<Icon name="search" size="sm" />
|
|
74
|
+
</InputGroup.Addon>
|
|
75
|
+
<Input type="search" name="q" aria-label="Search" placeholder="Search" />
|
|
76
|
+
<InputGroup.Addon>
|
|
77
|
+
<Icon name="mic" size="sm" />
|
|
78
|
+
</InputGroup.Addon>
|
|
79
|
+
</InputGroup.Root>
|
|
80
|
+
</html.div>
|
|
81
|
+
),
|
|
82
|
+
play: async ({canvas}) => {
|
|
83
|
+
const input = canvas.getByRole('searchbox', {name: 'Search'})
|
|
84
|
+
await expect(input).toHaveAttribute('name', 'q')
|
|
85
|
+
},
|
|
86
|
+
}
|
|
87
|
+
|
|
67
88
|
export const ClickableAddon: Story = {
|
|
68
89
|
render: () => (
|
|
69
90
|
<html.div style={layoutStyles.container}>
|