@transferwise/components 0.0.0-experimental-751dc12 → 0.0.0-experimental-4341b9c
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/build/button/Button.js +0 -1
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +0 -1
- package/build/button/Button.mjs.map +1 -1
- package/build/common/RadioButton/RadioButton.js +2 -5
- package/build/common/RadioButton/RadioButton.js.map +1 -1
- package/build/common/RadioButton/RadioButton.mjs +2 -5
- package/build/common/RadioButton/RadioButton.mjs.map +1 -1
- package/build/common/initials.js +4 -1
- package/build/common/initials.js.map +1 -1
- package/build/common/initials.mjs +4 -1
- package/build/common/initials.mjs.map +1 -1
- package/build/i18n/de.json +2 -0
- package/build/i18n/de.json.js +2 -0
- package/build/i18n/de.json.js.map +1 -1
- package/build/i18n/de.json.mjs +2 -0
- package/build/i18n/de.json.mjs.map +1 -1
- package/build/i18n/fr.json +2 -0
- package/build/i18n/fr.json.js +2 -0
- package/build/i18n/fr.json.js.map +1 -1
- package/build/i18n/fr.json.mjs +2 -0
- package/build/i18n/fr.json.mjs.map +1 -1
- package/build/i18n/hu.json +2 -0
- package/build/i18n/hu.json.js +2 -0
- package/build/i18n/hu.json.js.map +1 -1
- package/build/i18n/hu.json.mjs +2 -0
- package/build/i18n/hu.json.mjs.map +1 -1
- package/build/i18n/it.json +2 -0
- package/build/i18n/it.json.js +2 -0
- package/build/i18n/it.json.js.map +1 -1
- package/build/i18n/it.json.mjs +2 -0
- package/build/i18n/it.json.mjs.map +1 -1
- package/build/i18n/ja.json +2 -0
- package/build/i18n/ja.json.js +2 -0
- package/build/i18n/ja.json.js.map +1 -1
- package/build/i18n/ja.json.mjs +2 -0
- package/build/i18n/ja.json.mjs.map +1 -1
- package/build/i18n/pl.json +2 -0
- package/build/i18n/pl.json.js +2 -0
- package/build/i18n/pl.json.js.map +1 -1
- package/build/i18n/pl.json.mjs +2 -0
- package/build/i18n/pl.json.mjs.map +1 -1
- package/build/i18n/pt.json +2 -0
- package/build/i18n/pt.json.js +2 -0
- package/build/i18n/pt.json.js.map +1 -1
- package/build/i18n/pt.json.mjs +2 -0
- package/build/i18n/pt.json.mjs.map +1 -1
- package/build/i18n/ro.json +2 -0
- package/build/i18n/ro.json.js +2 -0
- package/build/i18n/ro.json.js.map +1 -1
- package/build/i18n/ro.json.mjs +2 -0
- package/build/i18n/ro.json.mjs.map +1 -1
- package/build/i18n/ru.json +2 -0
- package/build/i18n/ru.json.js +2 -0
- package/build/i18n/ru.json.js.map +1 -1
- package/build/i18n/ru.json.mjs +2 -0
- package/build/i18n/ru.json.mjs.map +1 -1
- package/build/i18n/tr.json +2 -0
- package/build/i18n/tr.json.js +2 -0
- package/build/i18n/tr.json.js.map +1 -1
- package/build/i18n/tr.json.mjs +2 -0
- package/build/i18n/tr.json.mjs.map +1 -1
- package/build/i18n/zh-CN.json +2 -0
- package/build/i18n/zh-CN.json.js +2 -0
- package/build/i18n/zh-CN.json.js.map +1 -1
- package/build/i18n/zh-CN.json.mjs +2 -0
- package/build/i18n/zh-CN.json.mjs.map +1 -1
- package/build/i18n/zh-HK.json +2 -0
- package/build/i18n/zh-HK.json.js +2 -0
- package/build/i18n/zh-HK.json.js.map +1 -1
- package/build/i18n/zh-HK.json.mjs +2 -0
- package/build/i18n/zh-HK.json.mjs.map +1 -1
- package/build/iconButton/IconButton.js.map +1 -1
- package/build/iconButton/IconButton.mjs.map +1 -1
- package/build/image/Image.js.map +1 -1
- package/build/image/Image.mjs.map +1 -1
- package/build/index.js +0 -2
- package/build/index.js.map +1 -1
- package/build/index.mjs +0 -1
- package/build/index.mjs.map +1 -1
- package/build/main.css +0 -709
- package/build/styles/main.css +0 -709
- package/build/switch/Switch.js +0 -2
- package/build/switch/Switch.js.map +1 -1
- package/build/switch/Switch.mjs +0 -2
- package/build/switch/Switch.mjs.map +1 -1
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/button/Button.types.d.ts +1 -1
- package/build/types/button/Button.types.d.ts.map +1 -1
- package/build/types/button/index.d.ts +1 -1
- package/build/types/button/index.d.ts.map +1 -1
- package/build/types/common/RadioButton/RadioButton.d.ts +1 -3
- package/build/types/common/RadioButton/RadioButton.d.ts.map +1 -1
- package/build/types/common/initials.d.ts.map +1 -1
- package/build/types/iconButton/IconButton.d.ts +2 -2
- package/build/types/iconButton/IconButton.d.ts.map +1 -1
- package/build/types/image/Image.d.ts +0 -3
- package/build/types/image/Image.d.ts.map +1 -1
- package/build/types/image/index.d.ts +0 -1
- package/build/types/image/index.d.ts.map +1 -1
- package/build/types/index.d.ts +0 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/switch/Switch.d.ts +0 -2
- package/build/types/switch/Switch.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/button/Button.spec.tsx +0 -18
- package/src/button/Button.tsx +1 -5
- package/src/button/Button.types.ts +1 -1
- package/src/button/index.ts +1 -1
- package/src/checkboxButton/CheckboxButton.story.tsx +4 -4
- package/src/common/RadioButton/RadioButton.tsx +1 -6
- package/src/common/initials.spec.tsx +13 -0
- package/src/common/initials.ts +5 -0
- package/src/i18n/de.json +2 -0
- package/src/i18n/fr.json +2 -0
- package/src/i18n/hu.json +2 -0
- package/src/i18n/it.json +2 -0
- package/src/i18n/ja.json +2 -0
- package/src/i18n/pl.json +2 -0
- package/src/i18n/pt.json +2 -0
- package/src/i18n/ro.json +2 -0
- package/src/i18n/ru.json +2 -0
- package/src/i18n/tr.json +2 -0
- package/src/i18n/zh-CN.json +2 -0
- package/src/i18n/zh-HK.json +2 -0
- package/src/iconButton/IconButton.story.tsx +1 -1
- package/src/iconButton/IconButton.tsx +1 -1
- package/src/image/Image.tsx +0 -3
- package/src/image/index.ts +0 -1
- package/src/index.ts +0 -2
- package/src/main.css +0 -709
- package/src/main.less +0 -1
- package/src/switch/Switch.tsx +0 -4
- package/src/test-utils/Parameters.d.ts +77 -0
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js +0 -56
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js.map +0 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs +0 -54
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs.map +0 -1
- package/build/listItem/AvatarLayout/ListItemAvatarLayout.js +0 -23
- package/build/listItem/AvatarLayout/ListItemAvatarLayout.js.map +0 -1
- package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs +0 -21
- package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs.map +0 -1
- package/build/listItem/AvatarView/ListItemAvatarView.js +0 -23
- package/build/listItem/AvatarView/ListItemAvatarView.js.map +0 -1
- package/build/listItem/AvatarView/ListItemAvatarView.mjs +0 -21
- package/build/listItem/AvatarView/ListItemAvatarView.mjs.map +0 -1
- package/build/listItem/Button/ListItemButton.js +0 -43
- package/build/listItem/Button/ListItemButton.js.map +0 -1
- package/build/listItem/Button/ListItemButton.mjs +0 -41
- package/build/listItem/Button/ListItemButton.mjs.map +0 -1
- package/build/listItem/Checkbox/ListItemCheckbox.js +0 -30
- package/build/listItem/Checkbox/ListItemCheckbox.js.map +0 -1
- package/build/listItem/Checkbox/ListItemCheckbox.mjs +0 -28
- package/build/listItem/Checkbox/ListItemCheckbox.mjs.map +0 -1
- package/build/listItem/IconButton/ListItemIconButton.js +0 -42
- package/build/listItem/IconButton/ListItemIconButton.js.map +0 -1
- package/build/listItem/IconButton/ListItemIconButton.mjs +0 -40
- package/build/listItem/IconButton/ListItemIconButton.mjs.map +0 -1
- package/build/listItem/Image/ListItemImage.js +0 -31
- package/build/listItem/Image/ListItemImage.js.map +0 -1
- package/build/listItem/Image/ListItemImage.mjs +0 -29
- package/build/listItem/Image/ListItemImage.mjs.map +0 -1
- package/build/listItem/ListItem.js +0 -308
- package/build/listItem/ListItem.js.map +0 -1
- package/build/listItem/ListItem.mjs +0 -303
- package/build/listItem/ListItem.mjs.map +0 -1
- package/build/listItem/ListItemContext.js +0 -8
- package/build/listItem/ListItemContext.js.map +0 -1
- package/build/listItem/ListItemContext.mjs +0 -6
- package/build/listItem/ListItemContext.mjs.map +0 -1
- package/build/listItem/Navigation/ListItemNavigation.js +0 -45
- package/build/listItem/Navigation/ListItemNavigation.js.map +0 -1
- package/build/listItem/Navigation/ListItemNavigation.mjs +0 -43
- package/build/listItem/Navigation/ListItemNavigation.mjs.map +0 -1
- package/build/listItem/Prompt/ListItemPrompt.js +0 -59
- package/build/listItem/Prompt/ListItemPrompt.js.map +0 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +0 -54
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +0 -1
- package/build/listItem/Radio/ListItemRadio.js +0 -30
- package/build/listItem/Radio/ListItemRadio.js.map +0 -1
- package/build/listItem/Radio/ListItemRadio.mjs +0 -28
- package/build/listItem/Radio/ListItemRadio.mjs.map +0 -1
- package/build/listItem/Switch/ListItemSwitch.js +0 -30
- package/build/listItem/Switch/ListItemSwitch.js.map +0 -1
- package/build/listItem/Switch/ListItemSwitch.mjs +0 -28
- package/build/listItem/Switch/ListItemSwitch.mjs.map +0 -1
- package/build/listItem/_stories/images/landscape.svg +0 -1
- package/build/listItem/_stories/images/portrait.svg +0 -1
- package/build/listItem/useListItemControl.js +0 -22
- package/build/listItem/useListItemControl.js.map +0 -1
- package/build/listItem/useListItemControl.mjs +0 -20
- package/build/listItem/useListItemControl.mjs.map +0 -1
- package/build/listItem/useListItemMedia.js +0 -21
- package/build/listItem/useListItemMedia.js.map +0 -1
- package/build/listItem/useListItemMedia.mjs +0 -19
- package/build/listItem/useListItemMedia.mjs.map +0 -1
- package/build/styles/listItem/ListItem.css +0 -709
- package/build/styles/listItem/ListItem.grid.css +0 -368
- package/build/types/listItem/AdditionalInfo/ListItemAdditionalInfo.d.ts +0 -15
- package/build/types/listItem/AdditionalInfo/ListItemAdditionalInfo.d.ts.map +0 -1
- package/build/types/listItem/AdditionalInfo/index.d.ts +0 -3
- package/build/types/listItem/AdditionalInfo/index.d.ts.map +0 -1
- package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts +0 -18
- package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts.map +0 -1
- package/build/types/listItem/AvatarLayout/index.d.ts +0 -3
- package/build/types/listItem/AvatarLayout/index.d.ts.map +0 -1
- package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts +0 -16
- package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts.map +0 -1
- package/build/types/listItem/AvatarView/index.d.ts +0 -3
- package/build/types/listItem/AvatarView/index.d.ts.map +0 -1
- package/build/types/listItem/Button/ListItemButton.d.ts +0 -20
- package/build/types/listItem/Button/ListItemButton.d.ts.map +0 -1
- package/build/types/listItem/Button/index.d.ts +0 -3
- package/build/types/listItem/Button/index.d.ts.map +0 -1
- package/build/types/listItem/Checkbox/ListItemCheckbox.d.ts +0 -14
- package/build/types/listItem/Checkbox/ListItemCheckbox.d.ts.map +0 -1
- package/build/types/listItem/Checkbox/index.d.ts +0 -3
- package/build/types/listItem/Checkbox/index.d.ts.map +0 -1
- package/build/types/listItem/IconButton/ListItemIconButton.d.ts +0 -18
- package/build/types/listItem/IconButton/ListItemIconButton.d.ts.map +0 -1
- package/build/types/listItem/IconButton/index.d.ts +0 -3
- package/build/types/listItem/IconButton/index.d.ts.map +0 -1
- package/build/types/listItem/Image/ListItemImage.d.ts +0 -25
- package/build/types/listItem/Image/ListItemImage.d.ts.map +0 -1
- package/build/types/listItem/Image/index.d.ts +0 -3
- package/build/types/listItem/Image/index.d.ts.map +0 -1
- package/build/types/listItem/ListItem.d.ts +0 -113
- package/build/types/listItem/ListItem.d.ts.map +0 -1
- package/build/types/listItem/ListItemContext.d.ts +0 -22
- package/build/types/listItem/ListItemContext.d.ts.map +0 -1
- package/build/types/listItem/Navigation/ListItemNavigation.d.ts +0 -15
- package/build/types/listItem/Navigation/ListItemNavigation.d.ts.map +0 -1
- package/build/types/listItem/Navigation/index.d.ts +0 -3
- package/build/types/listItem/Navigation/index.d.ts.map +0 -1
- package/build/types/listItem/Prompt/ListItemPrompt.d.ts +0 -16
- package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +0 -1
- package/build/types/listItem/Prompt/index.d.ts +0 -3
- package/build/types/listItem/Prompt/index.d.ts.map +0 -1
- package/build/types/listItem/Radio/ListItemRadio.d.ts +0 -14
- package/build/types/listItem/Radio/ListItemRadio.d.ts.map +0 -1
- package/build/types/listItem/Radio/index.d.ts +0 -3
- package/build/types/listItem/Radio/index.d.ts.map +0 -1
- package/build/types/listItem/Switch/ListItemSwitch.d.ts +0 -14
- package/build/types/listItem/Switch/ListItemSwitch.d.ts.map +0 -1
- package/build/types/listItem/Switch/index.d.ts +0 -3
- package/build/types/listItem/Switch/index.d.ts.map +0 -1
- package/build/types/listItem/_stories/subcomponents.d.ts +0 -18
- package/build/types/listItem/_stories/subcomponents.d.ts.map +0 -1
- package/build/types/listItem/index.d.ts +0 -14
- package/build/types/listItem/index.d.ts.map +0 -1
- package/build/types/listItem/test-utils.d.ts +0 -7
- package/build/types/listItem/test-utils.d.ts.map +0 -1
- package/build/types/listItem/useListItemControl.d.ts +0 -5
- package/build/types/listItem/useListItemControl.d.ts.map +0 -1
- package/build/types/listItem/useListItemMedia.d.ts +0 -6
- package/build/types/listItem/useListItemMedia.d.ts.map +0 -1
- package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.spec.tsx +0 -56
- package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx +0 -145
- package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.tsx +0 -36
- package/src/listItem/AdditionalInfo/index.ts +0 -2
- package/src/listItem/AvatarLayout/ListItemAvatarLayout.spec.tsx +0 -59
- package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx +0 -118
- package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx +0 -27
- package/src/listItem/AvatarLayout/index.ts +0 -2
- package/src/listItem/AvatarView/ListItemAvatarView.spec.tsx +0 -75
- package/src/listItem/AvatarView/ListItemAvatarView.story.tsx +0 -318
- package/src/listItem/AvatarView/ListItemAvatarView.tsx +0 -27
- package/src/listItem/AvatarView/index.ts +0 -2
- package/src/listItem/Button/ListItemButton.spec.tsx +0 -68
- package/src/listItem/Button/ListItemButton.story.tsx +0 -408
- package/src/listItem/Button/ListItemButton.tsx +0 -56
- package/src/listItem/Button/index.ts +0 -2
- package/src/listItem/Checkbox/ListItemCheckbox.spec.tsx +0 -82
- package/src/listItem/Checkbox/ListItemCheckbox.story.tsx +0 -107
- package/src/listItem/Checkbox/ListItemCheckbox.tsx +0 -33
- package/src/listItem/Checkbox/index.ts +0 -2
- package/src/listItem/IconButton/ListItemIconButton.spec.tsx +0 -119
- package/src/listItem/IconButton/ListItemIconButton.story.tsx +0 -236
- package/src/listItem/IconButton/ListItemIconButton.tsx +0 -56
- package/src/listItem/IconButton/index.ts +0 -2
- package/src/listItem/Image/ListItemImage.spec.tsx +0 -30
- package/src/listItem/Image/ListItemImage.story.tsx +0 -56
- package/src/listItem/Image/ListItemImage.tsx +0 -48
- package/src/listItem/Image/index.ts +0 -2
- package/src/listItem/ListItem.css +0 -709
- package/src/listItem/ListItem.grid.css +0 -368
- package/src/listItem/ListItem.grid.less +0 -620
- package/src/listItem/ListItem.less +0 -346
- package/src/listItem/ListItem.spec.tsx +0 -1496
- package/src/listItem/ListItem.tsx +0 -441
- package/src/listItem/ListItemContext.tsx +0 -27
- package/src/listItem/Navigation/ListItemNavigation.spec.tsx +0 -59
- package/src/listItem/Navigation/ListItemNavigation.story.tsx +0 -106
- package/src/listItem/Navigation/ListItemNavigation.tsx +0 -40
- package/src/listItem/Navigation/index.ts +0 -2
- package/src/listItem/Prompt/ListItemPrompt.spec.tsx +0 -36
- package/src/listItem/Prompt/ListItemPrompt.story.tsx +0 -201
- package/src/listItem/Prompt/ListItemPrompt.tsx +0 -32
- package/src/listItem/Prompt/index.ts +0 -2
- package/src/listItem/Radio/ListItemRadio.spec.tsx +0 -66
- package/src/listItem/Radio/ListItemRadio.story.tsx +0 -98
- package/src/listItem/Radio/ListItemRadio.tsx +0 -33
- package/src/listItem/Radio/index.ts +0 -2
- package/src/listItem/Switch/ListItemSwitch.spec.tsx +0 -47
- package/src/listItem/Switch/ListItemSwitch.story.tsx +0 -69
- package/src/listItem/Switch/ListItemSwitch.tsx +0 -33
- package/src/listItem/Switch/index.ts +0 -2
- package/src/listItem/_stories/ListItem.focus.test.story.tsx +0 -250
- package/src/listItem/_stories/ListItem.layout.test.story.tsx +0 -338
- package/src/listItem/_stories/ListItem.story.tsx +0 -670
- package/src/listItem/_stories/ListItem.variants.test.story.tsx +0 -271
- package/src/listItem/_stories/images/landscape.svg +0 -1
- package/src/listItem/_stories/images/portrait.svg +0 -1
- package/src/listItem/_stories/subcomponents.tsx +0 -139
- package/src/listItem/index.ts +0 -14
- package/src/listItem/test-utils.tsx +0 -33
- package/src/listItem/useListItemControl.tsx +0 -18
- package/src/listItem/useListItemMedia.tsx +0 -13
package/src/main.less
CHANGED
package/src/switch/Switch.tsx
CHANGED
|
@@ -12,8 +12,6 @@ export type SwitchProps = CommonProps & {
|
|
|
12
12
|
'aria-label'?: string;
|
|
13
13
|
/** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */
|
|
14
14
|
'aria-labelledby'?: string;
|
|
15
|
-
/** Identifies the element(s) that describes the element on which the attribute is set */
|
|
16
|
-
'aria-describedby'?: string;
|
|
17
15
|
/** Whether the switch is checked or not */
|
|
18
16
|
checked?: boolean;
|
|
19
17
|
disabled?: boolean;
|
|
@@ -32,7 +30,6 @@ const Switch = (props: SwitchProps) => {
|
|
|
32
30
|
id = inputAttributes.id,
|
|
33
31
|
'aria-label': ariaLabel,
|
|
34
32
|
'aria-labelledby': ariaLabelledbyProp,
|
|
35
|
-
'aria-describedby': ariaDescribedbyProp,
|
|
36
33
|
onClick,
|
|
37
34
|
disabled,
|
|
38
35
|
} = props;
|
|
@@ -58,7 +55,6 @@ const Switch = (props: SwitchProps) => {
|
|
|
58
55
|
aria-checked={checked}
|
|
59
56
|
aria-label={ariaLabel}
|
|
60
57
|
aria-labelledby={ariaLabelledby}
|
|
61
|
-
aria-describedby={ariaDescribedbyProp}
|
|
62
58
|
disabled={disabled}
|
|
63
59
|
onClick={!disabled ? onClick : undefined}
|
|
64
60
|
>
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
declare module '@storybook/react' {
|
|
2
|
+
interface Parameters {
|
|
3
|
+
/** Prefer using `storyConfig` for configuring variants */
|
|
4
|
+
variants?: (
|
|
5
|
+
| 'default'
|
|
6
|
+
| 'light'
|
|
7
|
+
| 'dark'
|
|
8
|
+
| 'bright-green'
|
|
9
|
+
| 'forest-green'
|
|
10
|
+
| 'rtl'
|
|
11
|
+
| (string & Record<string, unknown>)
|
|
12
|
+
)[];
|
|
13
|
+
/** Used by Chromatic */
|
|
14
|
+
chromatic?: ChromaticParameters;
|
|
15
|
+
viewport?: {
|
|
16
|
+
viewports?: Record<string, unknown>;
|
|
17
|
+
defaultViewport?: string;
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Derived from Chromatic's config type definitions
|
|
24
|
+
*
|
|
25
|
+
* @see https://github.com/chromaui/chromatic-cli/blob/main/storybook-addon.d.ts
|
|
26
|
+
*/
|
|
27
|
+
export interface ChromaticParameters {
|
|
28
|
+
/**
|
|
29
|
+
* Prefer using `storyConfig` for configuring viewports if possible.
|
|
30
|
+
*
|
|
31
|
+
* To set a viewport, specify one or more screen widths to the
|
|
32
|
+
* `chromatic.viewports` parameter. When left unspecified, Chromatic
|
|
33
|
+
* uses a default value of `[1200]`. Use `[414]` for 'Large mobile'
|
|
34
|
+
* viewport width.
|
|
35
|
+
*
|
|
36
|
+
* @default [1200]
|
|
37
|
+
*/
|
|
38
|
+
viewports?: [414] | [414, 1200];
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* You can omit stories entirely from Chromatic testing using the disable story parameter.
|
|
42
|
+
*/
|
|
43
|
+
disable?: boolean;
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Chromatic will pause CSS animations and reset them to their beginning state.
|
|
47
|
+
*
|
|
48
|
+
* Some animations are used to "animate in" visible elements. To specify that Chromatic should pause the
|
|
49
|
+
* animation at the end, use the `pauseAnimationAtEnd` story parameter.
|
|
50
|
+
*/
|
|
51
|
+
pauseAnimationAtEnd?: boolean;
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Use story-level delay to ensure a minimum amount of time (in milliseconds) has passed before Chromatic takes a
|
|
55
|
+
* screenshot.
|
|
56
|
+
*/
|
|
57
|
+
delay?: number;
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before
|
|
61
|
+
* they’re flagged by Chromatic. Sometimes you need assurance to the sub-pixel and other times you want to skip
|
|
62
|
+
* visual noise generated by non-deterministic rendering such as anti-aliasing.
|
|
63
|
+
*
|
|
64
|
+
* 0 is the most accurate. 1 is the least accurate.
|
|
65
|
+
*
|
|
66
|
+
* @default 0.063
|
|
67
|
+
*/
|
|
68
|
+
diffThreshold?: number;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Modes for Chromatic testing.
|
|
72
|
+
*
|
|
73
|
+
* Specify the mode in which Chromatic should run tests. For example, 'light' for light mode,
|
|
74
|
+
* 'dark' for dark mode, or `rtl` for right to left content.
|
|
75
|
+
*/
|
|
76
|
+
modes?: object;
|
|
77
|
+
}
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var ListItemContext = require('../ListItemContext.js');
|
|
5
|
-
var Body = require('../../body/Body.js');
|
|
6
|
-
var Link = require('../../link/Link.js');
|
|
7
|
-
require('../../common/theme.js');
|
|
8
|
-
require('../../common/direction.js');
|
|
9
|
-
require('../../common/propsValues/control.js');
|
|
10
|
-
require('../../common/propsValues/breakpoint.js');
|
|
11
|
-
require('../../common/propsValues/size.js');
|
|
12
|
-
var typography = require('../../common/propsValues/typography.js');
|
|
13
|
-
require('../../common/propsValues/width.js');
|
|
14
|
-
require('../../common/propsValues/type.js');
|
|
15
|
-
require('../../common/propsValues/dateMode.js');
|
|
16
|
-
require('../../common/propsValues/monthFormat.js');
|
|
17
|
-
require('../../common/propsValues/position.js');
|
|
18
|
-
require('../../common/propsValues/layouts.js');
|
|
19
|
-
require('../../common/propsValues/status.js');
|
|
20
|
-
require('../../common/propsValues/sentiment.js');
|
|
21
|
-
require('../../common/propsValues/profileType.js');
|
|
22
|
-
require('../../common/propsValues/variant.js');
|
|
23
|
-
require('../../common/propsValues/scroll.js');
|
|
24
|
-
require('../../common/propsValues/markdownNodeType.js');
|
|
25
|
-
require('../../common/fileType.js');
|
|
26
|
-
require('@transferwise/icons');
|
|
27
|
-
require('clsx');
|
|
28
|
-
require('react-intl');
|
|
29
|
-
require('../../common/closeButton/CloseButton.messages.js');
|
|
30
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
31
|
-
|
|
32
|
-
const AdditionalInfo = function ({
|
|
33
|
-
children,
|
|
34
|
-
action
|
|
35
|
-
}) {
|
|
36
|
-
const {
|
|
37
|
-
ids
|
|
38
|
-
} = React.useContext(ListItemContext.ListItemContext);
|
|
39
|
-
return /*#__PURE__*/jsxRuntime.jsxs(Body.default, {
|
|
40
|
-
type: typography.Typography.BODY_DEFAULT,
|
|
41
|
-
id: ids.additionalInfo,
|
|
42
|
-
className: "wds-list-item-additional-info",
|
|
43
|
-
children: [children, action ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
44
|
-
children: [' ', /*#__PURE__*/jsxRuntime.jsx(Link.default, {
|
|
45
|
-
href: action.href,
|
|
46
|
-
target: action.target,
|
|
47
|
-
onClick: action.onClick,
|
|
48
|
-
children: action.label
|
|
49
|
-
})]
|
|
50
|
-
}) : null]
|
|
51
|
-
});
|
|
52
|
-
};
|
|
53
|
-
AdditionalInfo.displayName = 'ListItem.AdditionalInfo';
|
|
54
|
-
|
|
55
|
-
exports.AdditionalInfo = AdditionalInfo;
|
|
56
|
-
//# sourceMappingURL=ListItemAdditionalInfo.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAdditionalInfo.js","sources":["../../../src/listItem/AdditionalInfo/ListItemAdditionalInfo.tsx"],"sourcesContent":["import { PropsWithChildren, useContext } from 'react';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { Typography } from '../../common';\n\nexport type ListItemAdditionalInfoProps = PropsWithChildren<{\n /**\n * Props object to be passed to the [Link](https://storybook.wise.design/?path=/docs/typography-link--docs) component.\n */\n action?: { label: string } & Pick<LinkProps, 'href' | 'onClick' | 'target'>;\n}>;\n\nexport const AdditionalInfo = function ({ children, action }: ListItemAdditionalInfoProps) {\n const { ids } = useContext<ListItemContextData>(ListItemContext);\n\n return (\n <Body\n type={Typography.BODY_DEFAULT}\n id={ids.additionalInfo}\n className=\"wds-list-item-additional-info\"\n >\n {children}\n {action ? (\n <>\n {' '}\n <Link href={action.href} target={action.target} onClick={action.onClick}>\n {action.label}\n </Link>\n </>\n ) : null}\n </Body>\n );\n};\n\nAdditionalInfo.displayName = 'ListItem.AdditionalInfo';\n"],"names":["AdditionalInfo","children","action","ids","useContext","ListItemContext","_jsxs","Body","type","Typography","BODY_DEFAULT","id","additionalInfo","className","_Fragment","_jsx","Link","href","target","onClick","label","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,cAAc,GAAG,UAAU;EAAEC,QAAQ;AAAEC,EAAAA;AAAM,CAA+B,EAAA;EACvF,MAAM;AAAEC,IAAAA;AAAG,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EAEhE,oBACEC,eAAA,CAACC,YAAI,EAAA;IACHC,IAAI,EAAEC,qBAAU,CAACC,YAAa;IAC9BC,EAAE,EAAER,GAAG,CAACS,cAAe;AACvBC,IAAAA,SAAS,EAAC,+BAA+B;AAAAZ,IAAAA,QAAA,GAExCA,QAAQ,EACRC,MAAM,gBACLI,eAAA,CAAAQ,mBAAA,EAAA;AAAAb,MAAAA,QAAA,EAAA,CACG,GAAG,eACJc,cAAA,CAACC,YAAI,EAAA;QAACC,IAAI,EAAEf,MAAM,CAACe,IAAK;QAACC,MAAM,EAAEhB,MAAM,CAACgB,MAAO;QAACC,OAAO,EAAEjB,MAAM,CAACiB,OAAQ;QAAAlB,QAAA,EACrEC,MAAM,CAACkB;AAAK,OACT,CACR;KAAA,CAAG,GACD,IAAI;AAAA,GACJ,CAAC;AAEX;AAEApB,cAAc,CAACqB,WAAW,GAAG,yBAAyB;;;;"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { useContext } from 'react';
|
|
2
|
-
import { ListItemContext } from '../ListItemContext.mjs';
|
|
3
|
-
import Body from '../../body/Body.mjs';
|
|
4
|
-
import Link from '../../link/Link.mjs';
|
|
5
|
-
import '../../common/theme.mjs';
|
|
6
|
-
import '../../common/direction.mjs';
|
|
7
|
-
import '../../common/propsValues/control.mjs';
|
|
8
|
-
import '../../common/propsValues/breakpoint.mjs';
|
|
9
|
-
import '../../common/propsValues/size.mjs';
|
|
10
|
-
import { Typography } from '../../common/propsValues/typography.mjs';
|
|
11
|
-
import '../../common/propsValues/width.mjs';
|
|
12
|
-
import '../../common/propsValues/type.mjs';
|
|
13
|
-
import '../../common/propsValues/dateMode.mjs';
|
|
14
|
-
import '../../common/propsValues/monthFormat.mjs';
|
|
15
|
-
import '../../common/propsValues/position.mjs';
|
|
16
|
-
import '../../common/propsValues/layouts.mjs';
|
|
17
|
-
import '../../common/propsValues/status.mjs';
|
|
18
|
-
import '../../common/propsValues/sentiment.mjs';
|
|
19
|
-
import '../../common/propsValues/profileType.mjs';
|
|
20
|
-
import '../../common/propsValues/variant.mjs';
|
|
21
|
-
import '../../common/propsValues/scroll.mjs';
|
|
22
|
-
import '../../common/propsValues/markdownNodeType.mjs';
|
|
23
|
-
import '../../common/fileType.mjs';
|
|
24
|
-
import '@transferwise/icons';
|
|
25
|
-
import 'clsx';
|
|
26
|
-
import 'react-intl';
|
|
27
|
-
import '../../common/closeButton/CloseButton.messages.mjs';
|
|
28
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
29
|
-
|
|
30
|
-
const AdditionalInfo = function ({
|
|
31
|
-
children,
|
|
32
|
-
action
|
|
33
|
-
}) {
|
|
34
|
-
const {
|
|
35
|
-
ids
|
|
36
|
-
} = useContext(ListItemContext);
|
|
37
|
-
return /*#__PURE__*/jsxs(Body, {
|
|
38
|
-
type: Typography.BODY_DEFAULT,
|
|
39
|
-
id: ids.additionalInfo,
|
|
40
|
-
className: "wds-list-item-additional-info",
|
|
41
|
-
children: [children, action ? /*#__PURE__*/jsxs(Fragment, {
|
|
42
|
-
children: [' ', /*#__PURE__*/jsx(Link, {
|
|
43
|
-
href: action.href,
|
|
44
|
-
target: action.target,
|
|
45
|
-
onClick: action.onClick,
|
|
46
|
-
children: action.label
|
|
47
|
-
})]
|
|
48
|
-
}) : null]
|
|
49
|
-
});
|
|
50
|
-
};
|
|
51
|
-
AdditionalInfo.displayName = 'ListItem.AdditionalInfo';
|
|
52
|
-
|
|
53
|
-
export { AdditionalInfo };
|
|
54
|
-
//# sourceMappingURL=ListItemAdditionalInfo.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAdditionalInfo.mjs","sources":["../../../src/listItem/AdditionalInfo/ListItemAdditionalInfo.tsx"],"sourcesContent":["import { PropsWithChildren, useContext } from 'react';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { Typography } from '../../common';\n\nexport type ListItemAdditionalInfoProps = PropsWithChildren<{\n /**\n * Props object to be passed to the [Link](https://storybook.wise.design/?path=/docs/typography-link--docs) component.\n */\n action?: { label: string } & Pick<LinkProps, 'href' | 'onClick' | 'target'>;\n}>;\n\nexport const AdditionalInfo = function ({ children, action }: ListItemAdditionalInfoProps) {\n const { ids } = useContext<ListItemContextData>(ListItemContext);\n\n return (\n <Body\n type={Typography.BODY_DEFAULT}\n id={ids.additionalInfo}\n className=\"wds-list-item-additional-info\"\n >\n {children}\n {action ? (\n <>\n {' '}\n <Link href={action.href} target={action.target} onClick={action.onClick}>\n {action.label}\n </Link>\n </>\n ) : null}\n </Body>\n );\n};\n\nAdditionalInfo.displayName = 'ListItem.AdditionalInfo';\n"],"names":["AdditionalInfo","children","action","ids","useContext","ListItemContext","_jsxs","Body","type","Typography","BODY_DEFAULT","id","additionalInfo","className","_Fragment","_jsx","Link","href","target","onClick","label","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,cAAc,GAAG,UAAU;EAAEC,QAAQ;AAAEC,EAAAA;AAAM,CAA+B,EAAA;EACvF,MAAM;AAAEC,IAAAA;AAAG,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EAEhE,oBACEC,IAAA,CAACC,IAAI,EAAA;IACHC,IAAI,EAAEC,UAAU,CAACC,YAAa;IAC9BC,EAAE,EAAER,GAAG,CAACS,cAAe;AACvBC,IAAAA,SAAS,EAAC,+BAA+B;AAAAZ,IAAAA,QAAA,GAExCA,QAAQ,EACRC,MAAM,gBACLI,IAAA,CAAAQ,QAAA,EAAA;AAAAb,MAAAA,QAAA,EAAA,CACG,GAAG,eACJc,GAAA,CAACC,IAAI,EAAA;QAACC,IAAI,EAAEf,MAAM,CAACe,IAAK;QAACC,MAAM,EAAEhB,MAAM,CAACgB,MAAO;QAACC,OAAO,EAAEjB,MAAM,CAACiB,OAAQ;QAAAlB,QAAA,EACrEC,MAAM,CAACkB;AAAK,OACT,CACR;KAAA,CAAG,GACD,IAAI;AAAA,GACJ,CAAC;AAEX;AAEApB,cAAc,CAACqB,WAAW,GAAG,yBAAyB;;;;"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var AvatarLayout$1 = require('../../avatarLayout/AvatarLayout.js');
|
|
4
|
-
var clsx = require('clsx');
|
|
5
|
-
var useListItemMedia = require('../useListItemMedia.js');
|
|
6
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
-
|
|
8
|
-
const AvatarLayout = ({
|
|
9
|
-
className,
|
|
10
|
-
size = 48,
|
|
11
|
-
...props
|
|
12
|
-
}) => {
|
|
13
|
-
useListItemMedia.useListItemMedia(size);
|
|
14
|
-
return /*#__PURE__*/jsxRuntime.jsx(AvatarLayout$1.default, {
|
|
15
|
-
...props,
|
|
16
|
-
size: size,
|
|
17
|
-
className: clsx.clsx('wds-list-item-media-avatar-layout', className)
|
|
18
|
-
});
|
|
19
|
-
};
|
|
20
|
-
AvatarLayout.displayName = 'ListItem.AvatarLayout';
|
|
21
|
-
|
|
22
|
-
exports.AvatarLayout = AvatarLayout;
|
|
23
|
-
//# sourceMappingURL=ListItemAvatarLayout.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarLayout.js","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\ntype SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarLayoutComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-layout', className)}\n />\n );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;;;AAeO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,sBAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import AvatarLayout$1 from '../../avatarLayout/AvatarLayout.mjs';
|
|
2
|
-
import { clsx } from 'clsx';
|
|
3
|
-
import { useListItemMedia } from '../useListItemMedia.mjs';
|
|
4
|
-
import { jsx } from 'react/jsx-runtime';
|
|
5
|
-
|
|
6
|
-
const AvatarLayout = ({
|
|
7
|
-
className,
|
|
8
|
-
size = 48,
|
|
9
|
-
...props
|
|
10
|
-
}) => {
|
|
11
|
-
useListItemMedia(size);
|
|
12
|
-
return /*#__PURE__*/jsx(AvatarLayout$1, {
|
|
13
|
-
...props,
|
|
14
|
-
size: size,
|
|
15
|
-
className: clsx('wds-list-item-media-avatar-layout', className)
|
|
16
|
-
});
|
|
17
|
-
};
|
|
18
|
-
AvatarLayout.displayName = 'ListItem.AvatarLayout';
|
|
19
|
-
|
|
20
|
-
export { AvatarLayout };
|
|
21
|
-
//# sourceMappingURL=ListItemAvatarLayout.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarLayout.mjs","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\ntype SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarLayoutComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-layout', className)}\n />\n );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;AAeO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,cAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var clsx = require('clsx');
|
|
4
|
-
var AvatarView$1 = require('../../avatarView/AvatarView.js');
|
|
5
|
-
var useListItemMedia = require('../useListItemMedia.js');
|
|
6
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
-
|
|
8
|
-
const AvatarView = ({
|
|
9
|
-
className,
|
|
10
|
-
size = 48,
|
|
11
|
-
...props
|
|
12
|
-
}) => {
|
|
13
|
-
useListItemMedia.useListItemMedia(size);
|
|
14
|
-
return /*#__PURE__*/jsxRuntime.jsx(AvatarView$1.default, {
|
|
15
|
-
...props,
|
|
16
|
-
size: size,
|
|
17
|
-
className: clsx.clsx('wds-list-item-media-avatar-view', className)
|
|
18
|
-
});
|
|
19
|
-
};
|
|
20
|
-
AvatarView.displayName = 'ListItem.AvatarView';
|
|
21
|
-
|
|
22
|
-
exports.AvatarView = AvatarView;
|
|
23
|
-
//# sourceMappingURL=ListItemAvatarView.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarView.js","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?: 32 | 40 | 48 | 56 | 72;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarViewComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-view', className)}\n />\n );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;;;AAeO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { clsx } from 'clsx';
|
|
2
|
-
import AvatarView$1 from '../../avatarView/AvatarView.mjs';
|
|
3
|
-
import { useListItemMedia } from '../useListItemMedia.mjs';
|
|
4
|
-
import { jsx } from 'react/jsx-runtime';
|
|
5
|
-
|
|
6
|
-
const AvatarView = ({
|
|
7
|
-
className,
|
|
8
|
-
size = 48,
|
|
9
|
-
...props
|
|
10
|
-
}) => {
|
|
11
|
-
useListItemMedia(size);
|
|
12
|
-
return /*#__PURE__*/jsx(AvatarView$1, {
|
|
13
|
-
...props,
|
|
14
|
-
size: size,
|
|
15
|
-
className: clsx('wds-list-item-media-avatar-view', className)
|
|
16
|
-
});
|
|
17
|
-
};
|
|
18
|
-
AvatarView.displayName = 'ListItem.AvatarView';
|
|
19
|
-
|
|
20
|
-
export { AvatarView };
|
|
21
|
-
//# sourceMappingURL=ListItemAvatarView.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarView.mjs","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?: 32 | 40 | 48 | 56 | 72;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarViewComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-view', className)}\n />\n );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;AAeO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,YAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var clsx = require('clsx');
|
|
5
|
-
var Button_resolver = require('../../button/Button.resolver.js');
|
|
6
|
-
var useListItemControl = require('../useListItemControl.js');
|
|
7
|
-
var ListItemContext = require('../ListItemContext.js');
|
|
8
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
9
|
-
|
|
10
|
-
const Button = ({
|
|
11
|
-
priority = 'secondary-neutral',
|
|
12
|
-
partiallyInteractive,
|
|
13
|
-
...props
|
|
14
|
-
}) => {
|
|
15
|
-
const {
|
|
16
|
-
baseItemProps
|
|
17
|
-
} = useListItemControl.useListItemControl('button', {
|
|
18
|
-
partiallyInteractive,
|
|
19
|
-
...props
|
|
20
|
-
});
|
|
21
|
-
const {
|
|
22
|
-
ids,
|
|
23
|
-
describedByIds
|
|
24
|
-
} = React.useContext(ListItemContext.ListItemContext);
|
|
25
|
-
const commonProps = {
|
|
26
|
-
...props,
|
|
27
|
-
className: clsx.clsx('wds-list-item-control', !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element'),
|
|
28
|
-
id: ids.control,
|
|
29
|
-
priority,
|
|
30
|
-
v2: true,
|
|
31
|
-
size: 'sm',
|
|
32
|
-
disabled: baseItemProps.disabled
|
|
33
|
-
};
|
|
34
|
-
const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;
|
|
35
|
-
return /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
|
|
36
|
-
"aria-describedby": `${buttonContentId} ${describedByIds}`,
|
|
37
|
-
...commonProps
|
|
38
|
-
});
|
|
39
|
-
};
|
|
40
|
-
Button.displayName = 'ListItem.Button';
|
|
41
|
-
|
|
42
|
-
exports.Button = Button;
|
|
43
|
-
//# sourceMappingURL=ListItemButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemButton.js","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemButtonProps = Omit<\n NewButtonProps,\n 'v2' | 'size' | 'disabled' | 'block' | 'addonStart'\n> & {\n /**\n * Toggles the [interactivity strategy](https://storybook.wise.design/?path=/docs/content-listitem--docs#interactivity) for the whole ListItem.\n */\n partiallyInteractive?: boolean;\n addonStart?: ButtonAddonIcon;\n};\n\n/**\n * This component allows for rendering a Button control. It's a thin wrapper around the\n * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.\n */\nexport const Button = ({\n priority = 'secondary-neutral',\n partiallyInteractive,\n ...props\n}: ListItemButtonProps) => {\n const { baseItemProps } = useListItemControl('button', { partiallyInteractive, ...props });\n const { ids, describedByIds } = useContext(ListItemContext);\n\n const commonProps = {\n ...props,\n className: clsx(\n 'wds-list-item-control',\n !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n ),\n id: ids.control,\n priority,\n v2: true,\n size: 'sm',\n disabled: baseItemProps.disabled,\n };\n\n const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;\n\n return (\n <ButtonComp\n aria-describedby={`${buttonContentId} ${describedByIds}`}\n {...(commonProps as NewButtonProps)}\n />\n );\n};\n\nButton.displayName = 'ListItem.Button';\n"],"names":["Button","priority","partiallyInteractive","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","commonProps","className","clsx","href","id","control","v2","size","disabled","buttonContentId","_jsx","ButtonComp","displayName"],"mappings":";;;;;;;;;AAwBO,MAAMA,MAAM,GAAGA,CAAC;AACrBC,EAAAA,QAAQ,GAAG,mBAAmB;EAC9BC,oBAAoB;EACpB,GAAGC;AAAK,CACY,KAAI;EACxB,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,QAAQ,EAAE;IAAEH,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGP,KAAK;AACRQ,IAAAA,SAAS,EAAEC,SAAI,CACb,uBAAuB,EACvB,CAACV,oBAAoB,IAAIC,KAAK,CAACU,IAAI,IAAI,sCAAsC,CAC9E;IACDC,EAAE,EAAER,GAAG,CAACS,OAAO;IACfd,QAAQ;AACRe,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAEd,aAAa,CAACc;GACzB;AAED,EAAA,MAAMC,eAAe,GAAGhB,KAAK,CAACU,IAAI,IAAIX,oBAAoB,GAAG,EAAE,GAAG,CAAA,EAAGI,GAAG,CAACS,OAAO,CAAA,QAAA,CAAU;EAE1F,oBACEK,cAAA,CAACC,uBAAU,EAAA;AACT,IAAA,kBAAA,EAAkB,CAAA,EAAGF,eAAe,CAAA,CAAA,EAAIZ,cAAc,CAAA,CAAG;IAAA,GACpDG;AAA8B,GAAC,CACpC;AAEN;AAEAV,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { useContext } from 'react';
|
|
2
|
-
import { clsx } from 'clsx';
|
|
3
|
-
import Button$1 from '../../button/Button.resolver.mjs';
|
|
4
|
-
import { useListItemControl } from '../useListItemControl.mjs';
|
|
5
|
-
import { ListItemContext } from '../ListItemContext.mjs';
|
|
6
|
-
import { jsx } from 'react/jsx-runtime';
|
|
7
|
-
|
|
8
|
-
const Button = ({
|
|
9
|
-
priority = 'secondary-neutral',
|
|
10
|
-
partiallyInteractive,
|
|
11
|
-
...props
|
|
12
|
-
}) => {
|
|
13
|
-
const {
|
|
14
|
-
baseItemProps
|
|
15
|
-
} = useListItemControl('button', {
|
|
16
|
-
partiallyInteractive,
|
|
17
|
-
...props
|
|
18
|
-
});
|
|
19
|
-
const {
|
|
20
|
-
ids,
|
|
21
|
-
describedByIds
|
|
22
|
-
} = useContext(ListItemContext);
|
|
23
|
-
const commonProps = {
|
|
24
|
-
...props,
|
|
25
|
-
className: clsx('wds-list-item-control', !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element'),
|
|
26
|
-
id: ids.control,
|
|
27
|
-
priority,
|
|
28
|
-
v2: true,
|
|
29
|
-
size: 'sm',
|
|
30
|
-
disabled: baseItemProps.disabled
|
|
31
|
-
};
|
|
32
|
-
const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;
|
|
33
|
-
return /*#__PURE__*/jsx(Button$1, {
|
|
34
|
-
"aria-describedby": `${buttonContentId} ${describedByIds}`,
|
|
35
|
-
...commonProps
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
Button.displayName = 'ListItem.Button';
|
|
39
|
-
|
|
40
|
-
export { Button };
|
|
41
|
-
//# sourceMappingURL=ListItemButton.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemButton.mjs","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemButtonProps = Omit<\n NewButtonProps,\n 'v2' | 'size' | 'disabled' | 'block' | 'addonStart'\n> & {\n /**\n * Toggles the [interactivity strategy](https://storybook.wise.design/?path=/docs/content-listitem--docs#interactivity) for the whole ListItem.\n */\n partiallyInteractive?: boolean;\n addonStart?: ButtonAddonIcon;\n};\n\n/**\n * This component allows for rendering a Button control. It's a thin wrapper around the\n * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.\n */\nexport const Button = ({\n priority = 'secondary-neutral',\n partiallyInteractive,\n ...props\n}: ListItemButtonProps) => {\n const { baseItemProps } = useListItemControl('button', { partiallyInteractive, ...props });\n const { ids, describedByIds } = useContext(ListItemContext);\n\n const commonProps = {\n ...props,\n className: clsx(\n 'wds-list-item-control',\n !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n ),\n id: ids.control,\n priority,\n v2: true,\n size: 'sm',\n disabled: baseItemProps.disabled,\n };\n\n const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;\n\n return (\n <ButtonComp\n aria-describedby={`${buttonContentId} ${describedByIds}`}\n {...(commonProps as NewButtonProps)}\n />\n );\n};\n\nButton.displayName = 'ListItem.Button';\n"],"names":["Button","priority","partiallyInteractive","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","commonProps","className","clsx","href","id","control","v2","size","disabled","buttonContentId","_jsx","ButtonComp","displayName"],"mappings":";;;;;;;AAwBO,MAAMA,MAAM,GAAGA,CAAC;AACrBC,EAAAA,QAAQ,GAAG,mBAAmB;EAC9BC,oBAAoB;EACpB,GAAGC;AAAK,CACY,KAAI;EACxB,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,QAAQ,EAAE;IAAEH,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGP,KAAK;AACRQ,IAAAA,SAAS,EAAEC,IAAI,CACb,uBAAuB,EACvB,CAACV,oBAAoB,IAAIC,KAAK,CAACU,IAAI,IAAI,sCAAsC,CAC9E;IACDC,EAAE,EAAER,GAAG,CAACS,OAAO;IACfd,QAAQ;AACRe,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAEd,aAAa,CAACc;GACzB;AAED,EAAA,MAAMC,eAAe,GAAGhB,KAAK,CAACU,IAAI,IAAIX,oBAAoB,GAAG,EAAE,GAAG,CAAA,EAAGI,GAAG,CAACS,OAAO,CAAA,QAAA,CAAU;EAE1F,oBACEK,GAAA,CAACC,QAAU,EAAA;AACT,IAAA,kBAAA,EAAkB,CAAA,EAAGF,eAAe,CAAA,CAAA,EAAIZ,cAAc,CAAA,CAAG;IAAA,GACpDG;AAA8B,GAAC,CACpC;AAEN;AAEAV,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var CheckboxButton = require('../../checkboxButton/CheckboxButton.js');
|
|
5
|
-
var useListItemControl = require('../useListItemControl.js');
|
|
6
|
-
var ListItemContext = require('../ListItemContext.js');
|
|
7
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
-
|
|
9
|
-
const Checkbox = function (props) {
|
|
10
|
-
const {
|
|
11
|
-
baseItemProps
|
|
12
|
-
} = useListItemControl.useListItemControl('checkbox', {
|
|
13
|
-
...props
|
|
14
|
-
});
|
|
15
|
-
const {
|
|
16
|
-
ids,
|
|
17
|
-
describedByIds
|
|
18
|
-
} = React.useContext(ListItemContext.ListItemContext);
|
|
19
|
-
return /*#__PURE__*/jsxRuntime.jsx(CheckboxButton.default, {
|
|
20
|
-
...props,
|
|
21
|
-
className: "wds-list-item-control",
|
|
22
|
-
disabled: baseItemProps.disabled,
|
|
23
|
-
id: ids.control,
|
|
24
|
-
"aria-describedby": describedByIds
|
|
25
|
-
});
|
|
26
|
-
};
|
|
27
|
-
Checkbox.displayName = 'ListItem.Checkbox';
|
|
28
|
-
|
|
29
|
-
exports.Checkbox = Checkbox;
|
|
30
|
-
//# sourceMappingURL=ListItemCheckbox.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemCheckbox.js","sources":["../../../src/listItem/Checkbox/ListItemCheckbox.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport CheckboxButton, { type CheckboxButtonProps } from '../../checkboxButton/CheckboxButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemCheckboxProps = Pick<\n CheckboxButtonProps,\n 'checked' | 'indeterminate' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'name'\n>;\n\n/**\n * This component allows for rendering a checkbox control within a fully interactive ListItem. <br />It's a thin wrapper around the\n * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-checkboxbutton--docs),\n * but offers only a subset of its features in line with the ListItem's constraints. <br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item---checkbox) for details.\n */\nexport const Checkbox = function (props: ListItemCheckboxProps) {\n const { baseItemProps } = useListItemControl('checkbox', { ...props });\n const { ids, describedByIds } = useContext(ListItemContext);\n\n return (\n <CheckboxButton\n {...props}\n className=\"wds-list-item-control\"\n disabled={baseItemProps.disabled}\n id={ids.control}\n aria-describedby={describedByIds}\n />\n );\n};\n\nCheckbox.displayName = 'ListItem.Checkbox';\n"],"names":["Checkbox","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","_jsx","CheckboxButton","className","disabled","id","control","displayName"],"mappings":";;;;;;;;MAiBaA,QAAQ,GAAG,UAAUC,KAA4B,EAAA;EAC5D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,UAAU,EAAE;IAAE,GAAGF;AAAK,GAAE,CAAC;EACtE,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;EAE3D,oBACEC,cAAA,CAACC,sBAAc,EAAA;AAAA,IAAA,GACTR,KAAK;AACTS,IAAAA,SAAS,EAAC,uBAAuB;IACjCC,QAAQ,EAAET,aAAa,CAACS,QAAS;IACjCC,EAAE,EAAER,GAAG,CAACS,OAAQ;IAChB,kBAAA,EAAkBR;AAAe,GAAA,CACjC;AAEN;AAEAL,QAAQ,CAACc,WAAW,GAAG,mBAAmB;;;;"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { useContext } from 'react';
|
|
2
|
-
import CheckboxButton from '../../checkboxButton/CheckboxButton.mjs';
|
|
3
|
-
import { useListItemControl } from '../useListItemControl.mjs';
|
|
4
|
-
import { ListItemContext } from '../ListItemContext.mjs';
|
|
5
|
-
import { jsx } from 'react/jsx-runtime';
|
|
6
|
-
|
|
7
|
-
const Checkbox = function (props) {
|
|
8
|
-
const {
|
|
9
|
-
baseItemProps
|
|
10
|
-
} = useListItemControl('checkbox', {
|
|
11
|
-
...props
|
|
12
|
-
});
|
|
13
|
-
const {
|
|
14
|
-
ids,
|
|
15
|
-
describedByIds
|
|
16
|
-
} = useContext(ListItemContext);
|
|
17
|
-
return /*#__PURE__*/jsx(CheckboxButton, {
|
|
18
|
-
...props,
|
|
19
|
-
className: "wds-list-item-control",
|
|
20
|
-
disabled: baseItemProps.disabled,
|
|
21
|
-
id: ids.control,
|
|
22
|
-
"aria-describedby": describedByIds
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
Checkbox.displayName = 'ListItem.Checkbox';
|
|
26
|
-
|
|
27
|
-
export { Checkbox };
|
|
28
|
-
//# sourceMappingURL=ListItemCheckbox.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemCheckbox.mjs","sources":["../../../src/listItem/Checkbox/ListItemCheckbox.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport CheckboxButton, { type CheckboxButtonProps } from '../../checkboxButton/CheckboxButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemCheckboxProps = Pick<\n CheckboxButtonProps,\n 'checked' | 'indeterminate' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'name'\n>;\n\n/**\n * This component allows for rendering a checkbox control within a fully interactive ListItem. <br />It's a thin wrapper around the\n * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-checkboxbutton--docs),\n * but offers only a subset of its features in line with the ListItem's constraints. <br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item---checkbox) for details.\n */\nexport const Checkbox = function (props: ListItemCheckboxProps) {\n const { baseItemProps } = useListItemControl('checkbox', { ...props });\n const { ids, describedByIds } = useContext(ListItemContext);\n\n return (\n <CheckboxButton\n {...props}\n className=\"wds-list-item-control\"\n disabled={baseItemProps.disabled}\n id={ids.control}\n aria-describedby={describedByIds}\n />\n );\n};\n\nCheckbox.displayName = 'ListItem.Checkbox';\n"],"names":["Checkbox","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","_jsx","CheckboxButton","className","disabled","id","control","displayName"],"mappings":";;;;;;MAiBaA,QAAQ,GAAG,UAAUC,KAA4B,EAAA;EAC5D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,UAAU,EAAE;IAAE,GAAGF;AAAK,GAAE,CAAC;EACtE,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;EAE3D,oBACEC,GAAA,CAACC,cAAc,EAAA;AAAA,IAAA,GACTR,KAAK;AACTS,IAAAA,SAAS,EAAC,uBAAuB;IACjCC,QAAQ,EAAET,aAAa,CAACS,QAAS;IACjCC,EAAE,EAAER,GAAG,CAACS,OAAQ;IAChB,kBAAA,EAAkBR;AAAe,GAAA,CACjC;AAEN;AAEAL,QAAQ,CAACc,WAAW,GAAG,mBAAmB;;;;"}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var clsx = require('clsx');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var IconButton$1 = require('../../iconButton/IconButton.js');
|
|
6
|
-
var useListItemControl = require('../useListItemControl.js');
|
|
7
|
-
var ListItemContext = require('../ListItemContext.js');
|
|
8
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
9
|
-
|
|
10
|
-
const IconButton = function ({
|
|
11
|
-
priority = 'minimal',
|
|
12
|
-
...props
|
|
13
|
-
}) {
|
|
14
|
-
const {
|
|
15
|
-
partiallyInteractive,
|
|
16
|
-
...restProps
|
|
17
|
-
} = props;
|
|
18
|
-
const {
|
|
19
|
-
ids,
|
|
20
|
-
props: itemProps
|
|
21
|
-
} = React.useContext(ListItemContext.ListItemContext);
|
|
22
|
-
const {
|
|
23
|
-
baseItemProps
|
|
24
|
-
} = useListItemControl.useListItemControl('icon-button', {
|
|
25
|
-
partiallyInteractive,
|
|
26
|
-
...restProps
|
|
27
|
-
});
|
|
28
|
-
const descriptorIds = [itemProps.inverted ? ids.subtitle : ids.title, itemProps.inverted ? ids.title : ids.subtitle, itemProps.inverted ? ids.valueSubtitle : ids.valueTitle, itemProps.inverted ? ids.valueTitle : ids.valueSubtitle, ids.additionalInfo, ids.prompt].join(' ');
|
|
29
|
-
return /*#__PURE__*/jsxRuntime.jsx(IconButton$1.default, {
|
|
30
|
-
...restProps,
|
|
31
|
-
"aria-describedby": descriptorIds,
|
|
32
|
-
className: clsx.clsx('wds-list-item-control', !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element'),
|
|
33
|
-
id: ids.control,
|
|
34
|
-
size: 40,
|
|
35
|
-
priority: priority,
|
|
36
|
-
disabled: baseItemProps.disabled
|
|
37
|
-
});
|
|
38
|
-
};
|
|
39
|
-
IconButton.displayName = 'ListItem.IconButton';
|
|
40
|
-
|
|
41
|
-
exports.IconButton = IconButton;
|
|
42
|
-
//# sourceMappingURL=ListItemIconButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemIconButton.js","sources":["../../../src/listItem/IconButton/ListItemIconButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext, type ReactNode } from 'react';\nimport IconButtonComp, { type IconButtonProps } from '../../iconButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemIconButtonProps = Pick<\n IconButtonProps,\n 'priority' | 'type' | 'onClick' | 'href' | 'target' | 'aria-label'\n> & {\n children: ReactNode;\n partiallyInteractive?: boolean;\n};\n\n/**\n * This component allows for rendering a IconButton control. It's a thin wrapper around the\n * [IconButton component](https://storybook.wise.design/?path=/docs/actions-iconbutton--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---icon-button) for details.\n */\nexport const IconButton = function ({ priority = 'minimal', ...props }: ListItemIconButtonProps) {\n const { partiallyInteractive, ...restProps } = props;\n\n const { ids, props: itemProps } = useContext(ListItemContext);\n const { baseItemProps } = useListItemControl('icon-button', {\n partiallyInteractive,\n ...restProps,\n });\n\n const descriptorIds = [\n itemProps.inverted ? ids.subtitle : ids.title,\n itemProps.inverted ? ids.title : ids.subtitle,\n itemProps.inverted ? ids.valueSubtitle : ids.valueTitle,\n itemProps.inverted ? ids.valueTitle : ids.valueSubtitle,\n ids.additionalInfo,\n ids.prompt,\n ].join(' ');\n\n return (\n <IconButtonComp\n {...restProps}\n aria-describedby={descriptorIds}\n className={clsx(\n 'wds-list-item-control',\n !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n )}\n id={ids.control}\n size={40}\n priority={priority}\n disabled={baseItemProps.disabled}\n />\n );\n};\n\nIconButton.displayName = 'ListItem.IconButton';\n"],"names":["IconButton","priority","props","partiallyInteractive","restProps","ids","itemProps","useContext","ListItemContext","baseItemProps","useListItemControl","descriptorIds","inverted","subtitle","title","valueSubtitle","valueTitle","additionalInfo","prompt","join","_jsx","IconButtonComp","className","clsx","href","id","control","size","disabled","displayName"],"mappings":";;;;;;;;;AAqBO,MAAMA,UAAU,GAAG,UAAU;AAAEC,EAAAA,QAAQ,GAAG,SAAS;EAAE,GAAGC;AAAK,CAA2B,EAAA;EAC7F,MAAM;IAAEC,oBAAoB;IAAE,GAAGC;AAAS,GAAE,GAAGF,KAAK;EAEpD,MAAM;IAAEG,GAAG;AAAEH,IAAAA,KAAK,EAAEI;AAAS,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;EAC7D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,aAAa,EAAE;IAC1DP,oBAAoB;IACpB,GAAGC;AACJ,GAAA,CAAC;AAEF,EAAA,MAAMO,aAAa,GAAG,CACpBL,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACQ,QAAQ,GAAGR,GAAG,CAACS,KAAK,EAC7CR,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACS,KAAK,GAAGT,GAAG,CAACQ,QAAQ,EAC7CP,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACU,aAAa,GAAGV,GAAG,CAACW,UAAU,EACvDV,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACW,UAAU,GAAGX,GAAG,CAACU,aAAa,EACvDV,GAAG,CAACY,cAAc,EAClBZ,GAAG,CAACa,MAAM,CACX,CAACC,IAAI,CAAC,GAAG,CAAC;EAEX,oBACEC,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTjB,SAAS;AACb,IAAA,kBAAA,EAAkBO,aAAc;AAChCW,IAAAA,SAAS,EAAEC,SAAI,CACb,uBAAuB,EACvB,CAACpB,oBAAoB,IAAID,KAAK,CAACsB,IAAI,IAAI,sCAAsC,CAC7E;IACFC,EAAE,EAAEpB,GAAG,CAACqB,OAAQ;AAChBC,IAAAA,IAAI,EAAE,EAAG;AACT1B,IAAAA,QAAQ,EAAEA,QAAS;IACnB2B,QAAQ,EAAEnB,aAAa,CAACmB;AAAS,GAAA,CACjC;AAEN;AAEA5B,UAAU,CAAC6B,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { clsx } from 'clsx';
|
|
2
|
-
import { useContext } from 'react';
|
|
3
|
-
import IconButton$1 from '../../iconButton/IconButton.mjs';
|
|
4
|
-
import { useListItemControl } from '../useListItemControl.mjs';
|
|
5
|
-
import { ListItemContext } from '../ListItemContext.mjs';
|
|
6
|
-
import { jsx } from 'react/jsx-runtime';
|
|
7
|
-
|
|
8
|
-
const IconButton = function ({
|
|
9
|
-
priority = 'minimal',
|
|
10
|
-
...props
|
|
11
|
-
}) {
|
|
12
|
-
const {
|
|
13
|
-
partiallyInteractive,
|
|
14
|
-
...restProps
|
|
15
|
-
} = props;
|
|
16
|
-
const {
|
|
17
|
-
ids,
|
|
18
|
-
props: itemProps
|
|
19
|
-
} = useContext(ListItemContext);
|
|
20
|
-
const {
|
|
21
|
-
baseItemProps
|
|
22
|
-
} = useListItemControl('icon-button', {
|
|
23
|
-
partiallyInteractive,
|
|
24
|
-
...restProps
|
|
25
|
-
});
|
|
26
|
-
const descriptorIds = [itemProps.inverted ? ids.subtitle : ids.title, itemProps.inverted ? ids.title : ids.subtitle, itemProps.inverted ? ids.valueSubtitle : ids.valueTitle, itemProps.inverted ? ids.valueTitle : ids.valueSubtitle, ids.additionalInfo, ids.prompt].join(' ');
|
|
27
|
-
return /*#__PURE__*/jsx(IconButton$1, {
|
|
28
|
-
...restProps,
|
|
29
|
-
"aria-describedby": descriptorIds,
|
|
30
|
-
className: clsx('wds-list-item-control', !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element'),
|
|
31
|
-
id: ids.control,
|
|
32
|
-
size: 40,
|
|
33
|
-
priority: priority,
|
|
34
|
-
disabled: baseItemProps.disabled
|
|
35
|
-
});
|
|
36
|
-
};
|
|
37
|
-
IconButton.displayName = 'ListItem.IconButton';
|
|
38
|
-
|
|
39
|
-
export { IconButton };
|
|
40
|
-
//# sourceMappingURL=ListItemIconButton.mjs.map
|