@transferwise/components 0.0.0-experimental-639ea61 → 0.0.0-experimental-b7b754c
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/i18n/es.json +0 -2
- package/build/i18n/es.json.js +0 -2
- package/build/i18n/es.json.js.map +1 -1
- package/build/i18n/es.json.mjs +0 -2
- package/build/i18n/es.json.mjs.map +1 -1
- package/build/index.js +2 -0
- package/build/index.js.map +1 -1
- package/build/index.mjs +1 -0
- package/build/index.mjs.map +1 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js +56 -0
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js.map +1 -0
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs +54 -0
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs.map +1 -0
- package/build/listItem/AvatarLayout/ListItemAvatarLayout.js +23 -0
- package/build/listItem/AvatarLayout/ListItemAvatarLayout.js.map +1 -0
- package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs +21 -0
- package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs.map +1 -0
- package/build/listItem/AvatarView/ListItemAvatarView.js +23 -0
- package/build/listItem/AvatarView/ListItemAvatarView.js.map +1 -0
- package/build/listItem/AvatarView/ListItemAvatarView.mjs +21 -0
- package/build/listItem/AvatarView/ListItemAvatarView.mjs.map +1 -0
- package/build/listItem/Button/ListItemButton.js +43 -0
- package/build/listItem/Button/ListItemButton.js.map +1 -0
- package/build/listItem/Button/ListItemButton.mjs +41 -0
- package/build/listItem/Button/ListItemButton.mjs.map +1 -0
- package/build/listItem/Checkbox/ListItemCheckbox.js +30 -0
- package/build/listItem/Checkbox/ListItemCheckbox.js.map +1 -0
- package/build/listItem/Checkbox/ListItemCheckbox.mjs +28 -0
- package/build/listItem/Checkbox/ListItemCheckbox.mjs.map +1 -0
- package/build/listItem/IconButton/ListItemIconButton.js +56 -0
- package/build/listItem/IconButton/ListItemIconButton.js.map +1 -0
- package/build/listItem/IconButton/ListItemIconButton.mjs +54 -0
- package/build/listItem/IconButton/ListItemIconButton.mjs.map +1 -0
- package/build/listItem/Image/ListItemImage.js +31 -0
- package/build/listItem/Image/ListItemImage.js.map +1 -0
- package/build/listItem/Image/ListItemImage.mjs +29 -0
- package/build/listItem/Image/ListItemImage.mjs.map +1 -0
- package/build/listItem/ListItem.js +309 -0
- package/build/listItem/ListItem.js.map +1 -0
- package/build/listItem/ListItem.mjs +304 -0
- package/build/listItem/ListItem.mjs.map +1 -0
- package/build/listItem/ListItemContext.js +8 -0
- package/build/listItem/ListItemContext.js.map +1 -0
- package/build/listItem/ListItemContext.mjs +6 -0
- package/build/listItem/ListItemContext.mjs.map +1 -0
- package/build/listItem/Navigation/ListItemNavigation.js +44 -0
- package/build/listItem/Navigation/ListItemNavigation.js.map +1 -0
- package/build/listItem/Navigation/ListItemNavigation.mjs +42 -0
- package/build/listItem/Navigation/ListItemNavigation.mjs.map +1 -0
- package/build/listItem/Prompt/ListItemPrompt.js +59 -0
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -0
- package/build/listItem/Prompt/ListItemPrompt.mjs +54 -0
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -0
- package/build/listItem/Radio/ListItemRadio.js +30 -0
- package/build/listItem/Radio/ListItemRadio.js.map +1 -0
- package/build/listItem/Radio/ListItemRadio.mjs +28 -0
- package/build/listItem/Radio/ListItemRadio.mjs.map +1 -0
- package/build/listItem/Switch/ListItemSwitch.js +30 -0
- package/build/listItem/Switch/ListItemSwitch.js.map +1 -0
- package/build/listItem/Switch/ListItemSwitch.mjs +28 -0
- package/build/listItem/Switch/ListItemSwitch.mjs.map +1 -0
- package/build/listItem/useListItemControl.js +22 -0
- package/build/listItem/useListItemControl.js.map +1 -0
- package/build/listItem/useListItemControl.mjs +20 -0
- package/build/listItem/useListItemControl.mjs.map +1 -0
- package/build/listItem/useListItemMedia.js +21 -0
- package/build/listItem/useListItemMedia.js.map +1 -0
- package/build/listItem/useListItemMedia.mjs +19 -0
- package/build/listItem/useListItemMedia.mjs.map +1 -0
- package/build/main.css +770 -0
- package/build/styles/listItem/ListItem.css +770 -0
- package/build/styles/listItem/ListItem.grid.css +370 -0
- package/build/styles/listItem/Prompt/ListItemPrompt.css +157 -0
- package/build/styles/main.css +770 -0
- package/build/types/index.d.ts +2 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/types/listItem/AdditionalInfo/ListItemAdditionalInfo.d.ts +15 -0
- package/build/types/listItem/AdditionalInfo/ListItemAdditionalInfo.d.ts.map +1 -0
- package/build/types/listItem/AdditionalInfo/index.d.ts +3 -0
- package/build/types/listItem/AdditionalInfo/index.d.ts.map +1 -0
- package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts +18 -0
- package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts.map +1 -0
- package/build/types/listItem/AvatarLayout/index.d.ts +3 -0
- package/build/types/listItem/AvatarLayout/index.d.ts.map +1 -0
- package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts +16 -0
- package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts.map +1 -0
- package/build/types/listItem/AvatarView/index.d.ts +3 -0
- package/build/types/listItem/AvatarView/index.d.ts.map +1 -0
- package/build/types/listItem/Button/ListItemButton.d.ts +20 -0
- package/build/types/listItem/Button/ListItemButton.d.ts.map +1 -0
- package/build/types/listItem/Button/index.d.ts +3 -0
- package/build/types/listItem/Button/index.d.ts.map +1 -0
- package/build/types/listItem/Checkbox/ListItemCheckbox.d.ts +14 -0
- package/build/types/listItem/Checkbox/ListItemCheckbox.d.ts.map +1 -0
- package/build/types/listItem/Checkbox/index.d.ts +3 -0
- package/build/types/listItem/Checkbox/index.d.ts.map +1 -0
- package/build/types/listItem/IconButton/ListItemIconButton.d.ts +18 -0
- package/build/types/listItem/IconButton/ListItemIconButton.d.ts.map +1 -0
- package/build/types/listItem/IconButton/index.d.ts +3 -0
- package/build/types/listItem/IconButton/index.d.ts.map +1 -0
- package/build/types/listItem/Image/ListItemImage.d.ts +25 -0
- package/build/types/listItem/Image/ListItemImage.d.ts.map +1 -0
- package/build/types/listItem/Image/index.d.ts +3 -0
- package/build/types/listItem/Image/index.d.ts.map +1 -0
- package/build/types/listItem/ListItem.d.ts +111 -0
- package/build/types/listItem/ListItem.d.ts.map +1 -0
- package/build/types/listItem/ListItemContext.d.ts +21 -0
- package/build/types/listItem/ListItemContext.d.ts.map +1 -0
- package/build/types/listItem/Navigation/ListItemNavigation.d.ts +15 -0
- package/build/types/listItem/Navigation/ListItemNavigation.d.ts.map +1 -0
- package/build/types/listItem/Navigation/index.d.ts +3 -0
- package/build/types/listItem/Navigation/index.d.ts.map +1 -0
- package/build/types/listItem/Prompt/ListItemPrompt.d.ts +16 -0
- package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -0
- package/build/types/listItem/Prompt/index.d.ts +3 -0
- package/build/types/listItem/Prompt/index.d.ts.map +1 -0
- package/build/types/listItem/Radio/ListItemRadio.d.ts +14 -0
- package/build/types/listItem/Radio/ListItemRadio.d.ts.map +1 -0
- package/build/types/listItem/Radio/index.d.ts +3 -0
- package/build/types/listItem/Radio/index.d.ts.map +1 -0
- package/build/types/listItem/Switch/ListItemSwitch.d.ts +14 -0
- package/build/types/listItem/Switch/ListItemSwitch.d.ts.map +1 -0
- package/build/types/listItem/Switch/index.d.ts +3 -0
- package/build/types/listItem/Switch/index.d.ts.map +1 -0
- package/build/types/listItem/_stories/helpers.d.ts +27 -0
- package/build/types/listItem/_stories/helpers.d.ts.map +1 -0
- package/build/types/listItem/_stories/subcomponents.d.ts +18 -0
- package/build/types/listItem/_stories/subcomponents.d.ts.map +1 -0
- package/build/types/listItem/index.d.ts +14 -0
- package/build/types/listItem/index.d.ts.map +1 -0
- package/build/types/listItem/test-utils.d.ts +7 -0
- package/build/types/listItem/test-utils.d.ts.map +1 -0
- package/build/types/listItem/useListItemControl.d.ts +5 -0
- package/build/types/listItem/useListItemControl.d.ts.map +1 -0
- package/build/types/listItem/useListItemMedia.d.ts +6 -0
- package/build/types/listItem/useListItemMedia.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/actionButton/ActionButton.story.tsx +1 -1
- package/src/avatar/Avatar.story.tsx +1 -1
- package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -1
- package/src/badge/Badge.story.tsx +1 -1
- package/src/button/Button.story.tsx +1 -0
- package/src/button/LegacyButton.story.tsx +1 -1
- package/src/i18n/es.json +0 -2
- package/src/index.ts +15 -0
- package/src/legacylistItem/LegacyListItem.story.tsx +1 -1
- package/src/legacylistItem/LegacyListItem.tests.story.tsx +2 -1
- package/src/list/List.story.tsx +13 -3
- package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.spec.tsx +56 -0
- package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx +198 -0
- package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.tsx +36 -0
- package/src/listItem/AdditionalInfo/index.ts +2 -0
- package/src/listItem/AvatarLayout/ListItemAvatarLayout.spec.tsx +59 -0
- package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx +124 -0
- package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx +27 -0
- package/src/listItem/AvatarLayout/index.ts +2 -0
- package/src/listItem/AvatarView/ListItemAvatarView.spec.tsx +75 -0
- package/src/listItem/AvatarView/ListItemAvatarView.story.tsx +339 -0
- package/src/listItem/AvatarView/ListItemAvatarView.tsx +27 -0
- package/src/listItem/AvatarView/index.ts +2 -0
- package/src/listItem/Button/ListItemButton.spec.tsx +68 -0
- package/src/listItem/Button/ListItemButton.story.tsx +473 -0
- package/src/listItem/Button/ListItemButton.tsx +56 -0
- package/src/listItem/Button/index.ts +2 -0
- package/src/listItem/Checkbox/ListItemCheckbox.spec.tsx +82 -0
- package/src/listItem/Checkbox/ListItemCheckbox.story.tsx +128 -0
- package/src/listItem/Checkbox/ListItemCheckbox.tsx +33 -0
- package/src/listItem/Checkbox/index.ts +2 -0
- package/src/listItem/IconButton/ListItemIconButton.spec.tsx +119 -0
- package/src/listItem/IconButton/ListItemIconButton.story.tsx +284 -0
- package/src/listItem/IconButton/ListItemIconButton.tsx +73 -0
- package/src/listItem/IconButton/index.ts +2 -0
- package/src/listItem/Image/ListItemImage.spec.tsx +30 -0
- package/src/listItem/Image/ListItemImage.story.tsx +80 -0
- package/src/listItem/Image/ListItemImage.tsx +46 -0
- package/src/listItem/Image/index.ts +2 -0
- package/src/listItem/ListItem.css +770 -0
- package/src/listItem/ListItem.grid.css +370 -0
- package/src/listItem/ListItem.grid.less +622 -0
- package/src/listItem/ListItem.less +287 -0
- package/src/listItem/ListItem.spec.tsx +1511 -0
- package/src/listItem/ListItem.tsx +438 -0
- package/src/listItem/ListItemContext.tsx +26 -0
- package/src/listItem/Navigation/ListItemNavigation.spec.tsx +59 -0
- package/src/listItem/Navigation/ListItemNavigation.story.tsx +112 -0
- package/src/listItem/Navigation/ListItemNavigation.tsx +39 -0
- package/src/listItem/Navigation/index.ts +2 -0
- package/src/listItem/Prompt/ListItemPrompt.css +157 -0
- package/src/listItem/Prompt/ListItemPrompt.less +134 -0
- package/src/listItem/Prompt/ListItemPrompt.spec.tsx +36 -0
- package/src/listItem/Prompt/ListItemPrompt.story.tsx +204 -0
- package/src/listItem/Prompt/ListItemPrompt.tsx +32 -0
- package/src/listItem/Prompt/index.ts +2 -0
- package/src/listItem/Radio/ListItemRadio.spec.tsx +66 -0
- package/src/listItem/Radio/ListItemRadio.story.tsx +111 -0
- package/src/listItem/Radio/ListItemRadio.tsx +33 -0
- package/src/listItem/Radio/index.ts +2 -0
- package/src/listItem/Switch/ListItemSwitch.spec.tsx +47 -0
- package/src/listItem/Switch/ListItemSwitch.story.tsx +79 -0
- package/src/listItem/Switch/ListItemSwitch.tsx +33 -0
- package/src/listItem/Switch/index.ts +2 -0
- package/src/listItem/_stories/ListItem.focus.test.story.tsx +265 -0
- package/src/listItem/_stories/ListItem.layout.test.story.tsx +354 -0
- package/src/listItem/_stories/ListItem.scenarios.story.tsx +228 -0
- package/src/listItem/_stories/ListItem.story.tsx +774 -0
- package/src/listItem/_stories/ListItem.variants.test.story.tsx +271 -0
- package/src/listItem/_stories/helpers.tsx +53 -0
- package/src/listItem/_stories/subcomponents.tsx +139 -0
- package/src/listItem/index.ts +14 -0
- package/src/listItem/test-utils.tsx +33 -0
- package/src/listItem/useListItemControl.tsx +18 -0
- package/src/listItem/useListItemMedia.tsx +16 -0
- package/src/main.css +770 -0
- package/src/main.less +1 -0
- package/src/select/Select.story.tsx +1 -1
package/build/i18n/es.json
CHANGED
|
@@ -45,7 +45,6 @@
|
|
|
45
45
|
"neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
|
|
46
46
|
"neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
|
|
47
47
|
"neptune.Upload.csTooLargeMessage": "Proporciona un archivo menor de {maxSize} MB",
|
|
48
|
-
"neptune.Upload.csTooLargeNoLimitMessage": "Proporciona un archivo más pequeño",
|
|
49
48
|
"neptune.Upload.csWrongTypeMessage": "Tipo de archivo no aceptado. Por favor, inténtalo de nuevo con un archivo diferente",
|
|
50
49
|
"neptune.Upload.psButtonText": "Cancela",
|
|
51
50
|
"neptune.Upload.psProcessingText": "Subiendo...",
|
|
@@ -53,7 +52,6 @@
|
|
|
53
52
|
"neptune.Upload.usButtonText": "O selecciona un archivo",
|
|
54
53
|
"neptune.Upload.usDropMessage": "Arrastra un archivo para subirlo",
|
|
55
54
|
"neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo de menos de {maxSize} MB",
|
|
56
|
-
"neptune.Upload.usPlaceholderNoLimit": "Arrastra y suelta un archivo",
|
|
57
55
|
"neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
|
|
58
56
|
"neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
|
|
59
57
|
"neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",
|
package/build/i18n/es.json.js
CHANGED
|
@@ -49,7 +49,6 @@ var es = {
|
|
|
49
49
|
"neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
|
|
50
50
|
"neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
|
|
51
51
|
"neptune.Upload.csTooLargeMessage": "Proporciona un archivo menor de {maxSize} MB",
|
|
52
|
-
"neptune.Upload.csTooLargeNoLimitMessage": "Proporciona un archivo más pequeño",
|
|
53
52
|
"neptune.Upload.csWrongTypeMessage": "Tipo de archivo no aceptado. Por favor, inténtalo de nuevo con un archivo diferente",
|
|
54
53
|
"neptune.Upload.psButtonText": "Cancela",
|
|
55
54
|
"neptune.Upload.psProcessingText": "Subiendo...",
|
|
@@ -57,7 +56,6 @@ var es = {
|
|
|
57
56
|
"neptune.Upload.usButtonText": "O selecciona un archivo",
|
|
58
57
|
"neptune.Upload.usDropMessage": "Arrastra un archivo para subirlo",
|
|
59
58
|
"neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo de menos de {maxSize} MB",
|
|
60
|
-
"neptune.Upload.usPlaceholderNoLimit": "Arrastra y suelta un archivo",
|
|
61
59
|
"neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
|
|
62
60
|
"neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
|
|
63
61
|
"neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"es.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"es.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/es.json.mjs
CHANGED
|
@@ -45,7 +45,6 @@ var es = {
|
|
|
45
45
|
"neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
|
|
46
46
|
"neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
|
|
47
47
|
"neptune.Upload.csTooLargeMessage": "Proporciona un archivo menor de {maxSize} MB",
|
|
48
|
-
"neptune.Upload.csTooLargeNoLimitMessage": "Proporciona un archivo más pequeño",
|
|
49
48
|
"neptune.Upload.csWrongTypeMessage": "Tipo de archivo no aceptado. Por favor, inténtalo de nuevo con un archivo diferente",
|
|
50
49
|
"neptune.Upload.psButtonText": "Cancela",
|
|
51
50
|
"neptune.Upload.psProcessingText": "Subiendo...",
|
|
@@ -53,7 +52,6 @@ var es = {
|
|
|
53
52
|
"neptune.Upload.usButtonText": "O selecciona un archivo",
|
|
54
53
|
"neptune.Upload.usDropMessage": "Arrastra un archivo para subirlo",
|
|
55
54
|
"neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo de menos de {maxSize} MB",
|
|
56
|
-
"neptune.Upload.usPlaceholderNoLimit": "Arrastra y suelta un archivo",
|
|
57
55
|
"neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
|
|
58
56
|
"neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
|
|
59
57
|
"neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"es.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"es.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.js
CHANGED
|
@@ -106,6 +106,7 @@ var Typeahead = require('./typeahead/Typeahead.js');
|
|
|
106
106
|
var Upload = require('./upload/Upload.js');
|
|
107
107
|
var UploadInput = require('./uploadInput/UploadInput.js');
|
|
108
108
|
var Table = require('./table/Table.js');
|
|
109
|
+
var ListItem = require('./listItem/ListItem.js');
|
|
109
110
|
var List = require('./list/List.js');
|
|
110
111
|
require('@transferwise/neptune-validation');
|
|
111
112
|
var useDirection = require('./common/hooks/useDirection/useDirection.js');
|
|
@@ -272,6 +273,7 @@ Object.defineProperty(exports, "UploadStep", {
|
|
|
272
273
|
});
|
|
273
274
|
exports.UploadInput = UploadInput.default;
|
|
274
275
|
exports.Table = Table.default;
|
|
276
|
+
exports.ListItem = ListItem.ListItem;
|
|
275
277
|
exports.List = List.default;
|
|
276
278
|
exports.useDirection = useDirection.useDirection;
|
|
277
279
|
exports.useLayout = useLayout.useLayout;
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.mjs
CHANGED
|
@@ -104,6 +104,7 @@ export { default as Typeahead } from './typeahead/Typeahead.mjs';
|
|
|
104
104
|
export { default as Upload, UploadStep } from './upload/Upload.mjs';
|
|
105
105
|
export { default as UploadInput } from './uploadInput/UploadInput.mjs';
|
|
106
106
|
export { default as Table } from './table/Table.mjs';
|
|
107
|
+
export { ListItem } from './listItem/ListItem.mjs';
|
|
107
108
|
export { default as List } from './list/List.mjs';
|
|
108
109
|
import '@transferwise/neptune-validation';
|
|
109
110
|
export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
|
package/build/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,56 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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, { type 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;;;;"}
|
|
@@ -0,0 +1,54 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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, { type 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;;;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListItemAvatarView.js","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type 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;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListItemAvatarView.mjs","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type 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;;;;"}
|
|
@@ -0,0 +1,43 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1,41 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1,30 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1,56 @@
|
|
|
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
|
+
'aria-label': ariaLabel,
|
|
13
|
+
...props
|
|
14
|
+
}) {
|
|
15
|
+
const {
|
|
16
|
+
partiallyInteractive,
|
|
17
|
+
...restProps
|
|
18
|
+
} = props;
|
|
19
|
+
const {
|
|
20
|
+
ids,
|
|
21
|
+
props: itemProps
|
|
22
|
+
} = React.useContext(ListItemContext.ListItemContext);
|
|
23
|
+
const {
|
|
24
|
+
baseItemProps
|
|
25
|
+
} = useListItemControl.useListItemControl('icon-button', {
|
|
26
|
+
partiallyInteractive,
|
|
27
|
+
...restProps
|
|
28
|
+
});
|
|
29
|
+
const getAriaProps = () => {
|
|
30
|
+
const labelIds = [itemProps.inverted ? ids.subtitle : ids.title, itemProps.inverted ? ids.title : ids.subtitle, itemProps.inverted ? ids.valueSubtitle : ids.valueTitle, itemProps.inverted ? ids.valueTitle : ids.valueSubtitle].join(' ');
|
|
31
|
+
const descriptorIds = [ids.additionalInfo, ids.prompt].join(' ');
|
|
32
|
+
if (ariaLabel) {
|
|
33
|
+
return {
|
|
34
|
+
'aria-label': ariaLabel,
|
|
35
|
+
'aria-describedby': labelIds.concat(descriptorIds)
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
return {
|
|
39
|
+
'aria-labelledby': labelIds,
|
|
40
|
+
'aria-describedby': descriptorIds
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
return /*#__PURE__*/jsxRuntime.jsx(IconButton$1.default, {
|
|
44
|
+
...restProps,
|
|
45
|
+
...getAriaProps(),
|
|
46
|
+
className: clsx.clsx('wds-list-item-control', !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element'),
|
|
47
|
+
id: ids.control,
|
|
48
|
+
size: 40,
|
|
49
|
+
priority: priority,
|
|
50
|
+
disabled: baseItemProps.disabled
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
IconButton.displayName = 'ListItem.IconButton';
|
|
54
|
+
|
|
55
|
+
exports.IconButton = IconButton;
|
|
56
|
+
//# sourceMappingURL=ListItemIconButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 ({\n priority = 'minimal',\n 'aria-label': ariaLabel,\n ...props\n}: 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 getAriaProps = () => {\n const labelIds = [\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 ].join(' ');\n const descriptorIds = [ids.additionalInfo, ids.prompt].join(' ');\n\n if (ariaLabel) {\n return {\n 'aria-label': ariaLabel,\n 'aria-describedby': labelIds.concat(descriptorIds),\n };\n }\n\n return {\n 'aria-labelledby': labelIds,\n 'aria-describedby': descriptorIds,\n };\n };\n\n return (\n <IconButtonComp\n {...restProps}\n {...getAriaProps()}\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","ariaLabel","props","partiallyInteractive","restProps","ids","itemProps","useContext","ListItemContext","baseItemProps","useListItemControl","getAriaProps","labelIds","inverted","subtitle","title","valueSubtitle","valueTitle","join","descriptorIds","additionalInfo","prompt","concat","_jsx","IconButtonComp","className","clsx","href","id","control","size","disabled","displayName"],"mappings":";;;;;;;;;AAqBO,MAAMA,UAAU,GAAG,UAAU;AAClCC,EAAAA,QAAQ,GAAG,SAAS;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvB,GAAGC;AAAK,CACgB,EAAA;EACxB,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;EAEF,MAAMO,YAAY,GAAGA,MAAK;IACxB,MAAMC,QAAQ,GAAG,CACfN,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACS,QAAQ,GAAGT,GAAG,CAACU,KAAK,EAC7CT,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACU,KAAK,GAAGV,GAAG,CAACS,QAAQ,EAC7CR,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACW,aAAa,GAAGX,GAAG,CAACY,UAAU,EACvDX,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACY,UAAU,GAAGZ,GAAG,CAACW,aAAa,CACxD,CAACE,IAAI,CAAC,GAAG,CAAC;AACX,IAAA,MAAMC,aAAa,GAAG,CAACd,GAAG,CAACe,cAAc,EAAEf,GAAG,CAACgB,MAAM,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;AAEhE,IAAA,IAAIjB,SAAS,EAAE;MACb,OAAO;AACL,QAAA,YAAY,EAAEA,SAAS;AACvB,QAAA,kBAAkB,EAAEW,QAAQ,CAACU,MAAM,CAACH,aAAa;OAClD;AACH,IAAA;IAEA,OAAO;AACL,MAAA,iBAAiB,EAAEP,QAAQ;AAC3B,MAAA,kBAAkB,EAAEO;KACrB;EACH,CAAC;EAED,oBACEI,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTpB,SAAS;IAAA,GACTO,YAAY,EAAE;AAClBc,IAAAA,SAAS,EAAEC,SAAI,CACb,uBAAuB,EACvB,CAACvB,oBAAoB,IAAID,KAAK,CAACyB,IAAI,IAAI,sCAAsC,CAC7E;IACFC,EAAE,EAAEvB,GAAG,CAACwB,OAAQ;AAChBC,IAAAA,IAAI,EAAE,EAAG;AACT9B,IAAAA,QAAQ,EAAEA,QAAS;IACnB+B,QAAQ,EAAEtB,aAAa,CAACsB;AAAS,GAAA,CACjC;AAEN;AAEAhC,UAAU,CAACiC,WAAW,GAAG,qBAAqB;;;;"}
|