@transferwise/components 0.0.0-experimental-8d1c43b → 0.0.0-experimental-df23df2
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/id.json +0 -2
- package/build/i18n/id.json.js +0 -2
- package/build/i18n/id.json.js.map +1 -1
- package/build/i18n/id.json.mjs +0 -2
- package/build/i18n/id.json.mjs.map +1 -1
- package/build/listItem/ListItem.js +55 -47
- package/build/listItem/ListItem.js.map +1 -1
- package/build/listItem/ListItem.mjs +55 -47
- package/build/listItem/ListItem.mjs.map +1 -1
- package/build/main.css +48 -0
- package/build/styles/listItem/ListItem.css +48 -0
- package/build/styles/listItem/ListItem.grid.css +22 -0
- package/build/styles/main.css +48 -0
- package/build/types/listItem/ListItem.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/i18n/id.json +0 -2
- package/src/listItem/ListItem.css +48 -0
- package/src/listItem/ListItem.grid.css +22 -0
- package/src/listItem/ListItem.grid.less +36 -0
- package/src/listItem/ListItem.less +25 -2
- package/src/listItem/ListItem.tsx +71 -57
- package/src/main.css +48 -0
package/build/i18n/id.json
CHANGED
|
@@ -45,7 +45,6 @@
|
|
|
45
45
|
"neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
|
|
46
46
|
"neptune.Upload.csSuccessText": "Pengunggahan selesai!",
|
|
47
47
|
"neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
|
|
48
|
-
"neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
|
|
49
48
|
"neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
|
|
50
49
|
"neptune.Upload.psButtonText": "Batalkan",
|
|
51
50
|
"neptune.Upload.psProcessingText": "Mengunggah...",
|
|
@@ -53,7 +52,6 @@
|
|
|
53
52
|
"neptune.Upload.usButtonText": "Atau pilih file",
|
|
54
53
|
"neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
|
|
55
54
|
"neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
|
|
56
|
-
"neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
|
|
57
55
|
"neptune.UploadButton.allFileTypes": "Semua jenis file",
|
|
58
56
|
"neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
|
|
59
57
|
"neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",
|
package/build/i18n/id.json.js
CHANGED
|
@@ -49,7 +49,6 @@ var id = {
|
|
|
49
49
|
"neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
|
|
50
50
|
"neptune.Upload.csSuccessText": "Pengunggahan selesai!",
|
|
51
51
|
"neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
|
|
52
|
-
"neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
|
|
53
52
|
"neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
|
|
54
53
|
"neptune.Upload.psButtonText": "Batalkan",
|
|
55
54
|
"neptune.Upload.psProcessingText": "Mengunggah...",
|
|
@@ -57,7 +56,6 @@ var id = {
|
|
|
57
56
|
"neptune.Upload.usButtonText": "Atau pilih file",
|
|
58
57
|
"neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
|
|
59
58
|
"neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
|
|
60
|
-
"neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
|
|
61
59
|
"neptune.UploadButton.allFileTypes": "Semua jenis file",
|
|
62
60
|
"neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
|
|
63
61
|
"neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"id.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"id.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/id.json.mjs
CHANGED
|
@@ -45,7 +45,6 @@ var id = {
|
|
|
45
45
|
"neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
|
|
46
46
|
"neptune.Upload.csSuccessText": "Pengunggahan selesai!",
|
|
47
47
|
"neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
|
|
48
|
-
"neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
|
|
49
48
|
"neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
|
|
50
49
|
"neptune.Upload.psButtonText": "Batalkan",
|
|
51
50
|
"neptune.Upload.psProcessingText": "Mengunggah...",
|
|
@@ -53,7 +52,6 @@ var id = {
|
|
|
53
52
|
"neptune.Upload.usButtonText": "Atau pilih file",
|
|
54
53
|
"neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
|
|
55
54
|
"neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
|
|
56
|
-
"neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
|
|
57
55
|
"neptune.UploadButton.allFileTypes": "Semua jenis file",
|
|
58
56
|
"neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
|
|
59
57
|
"neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"id.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"id.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -168,54 +168,62 @@ const ListItem = ({
|
|
|
168
168
|
children: [media && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
169
169
|
className: "wds-list-item-media",
|
|
170
170
|
children: media
|
|
171
|
-
}), /*#__PURE__*/jsxRuntime.
|
|
171
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
172
172
|
className: "wds-list-item-body",
|
|
173
173
|
style: valueColumnWidth ? gridColumnsStyle : undefined,
|
|
174
|
-
children:
|
|
175
|
-
className: clsx.clsx({
|
|
176
|
-
'wds-list-item-body-
|
|
174
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
175
|
+
className: clsx.clsx('wds-list-item-body-content', {
|
|
176
|
+
'wds-list-item-body-content-with-extras': disabled && (additionalInfo || prompt)
|
|
177
177
|
}),
|
|
178
|
-
children: (
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
if (subtitle) {
|
|
186
|
-
titles.push(/*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
187
|
-
id: ids.subtitle,
|
|
188
|
-
className: "wds-list-item-subtitle",
|
|
189
|
-
children: subtitle
|
|
190
|
-
}, ids.subtitle));
|
|
191
|
-
}
|
|
192
|
-
return inverted ? [...titles].reverse() : titles;
|
|
193
|
-
})()
|
|
194
|
-
}), (valueTitle || valueSubtitle) && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
195
|
-
className: clsx.clsx('wds-list-item-value', {
|
|
196
|
-
'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
|
|
197
|
-
'wds-list-item-body-center': valueTitle && !valueSubtitle || !valueTitle && valueSubtitle
|
|
198
|
-
}),
|
|
199
|
-
children: (() => {
|
|
200
|
-
const values = [];
|
|
201
|
-
if (valueTitle) {
|
|
202
|
-
values.push(/*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
203
|
-
id: ids.valueTitle,
|
|
178
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
179
|
+
className: clsx.clsx({
|
|
180
|
+
'wds-list-item-body-center': title && !subtitle
|
|
181
|
+
}),
|
|
182
|
+
children: (() => {
|
|
183
|
+
const titles = [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
184
|
+
id: ids.title,
|
|
204
185
|
type: typography.Typography.BODY_LARGE_BOLD,
|
|
205
|
-
className: "wds-list-item-title
|
|
206
|
-
children:
|
|
207
|
-
}, ids.
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
})()
|
|
218
|
-
|
|
186
|
+
className: "wds-list-item-title",
|
|
187
|
+
children: title
|
|
188
|
+
}, ids.title)];
|
|
189
|
+
if (subtitle) {
|
|
190
|
+
titles.push(/*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
191
|
+
id: ids.subtitle,
|
|
192
|
+
className: "wds-list-item-subtitle",
|
|
193
|
+
children: subtitle
|
|
194
|
+
}, ids.subtitle));
|
|
195
|
+
}
|
|
196
|
+
return inverted ? [...titles].reverse() : titles;
|
|
197
|
+
})()
|
|
198
|
+
}), (valueTitle || valueSubtitle) && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
199
|
+
className: clsx.clsx('wds-list-item-value', {
|
|
200
|
+
'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
|
|
201
|
+
'wds-list-item-body-center': valueTitle && !valueSubtitle || !valueTitle && valueSubtitle
|
|
202
|
+
}),
|
|
203
|
+
children: (() => {
|
|
204
|
+
const values = [];
|
|
205
|
+
if (valueTitle) {
|
|
206
|
+
values.push(/*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
207
|
+
id: ids.valueTitle,
|
|
208
|
+
type: typography.Typography.BODY_LARGE_BOLD,
|
|
209
|
+
className: "wds-list-item-title-value",
|
|
210
|
+
children: valueTitle
|
|
211
|
+
}, ids.valueTitle));
|
|
212
|
+
}
|
|
213
|
+
if (valueSubtitle) {
|
|
214
|
+
values.push(/*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
215
|
+
id: ids.valueSubtitle,
|
|
216
|
+
className: "wds-list-item-subtitle-value",
|
|
217
|
+
children: valueSubtitle
|
|
218
|
+
}, ids.valueSubtitle));
|
|
219
|
+
}
|
|
220
|
+
return inverted ? [...values].reverse() : values;
|
|
221
|
+
})()
|
|
222
|
+
}), disabled && (additionalInfo || prompt) && /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
223
|
+
className: "wds-list-item-body-extras",
|
|
224
|
+
children: [additionalInfo, prompt]
|
|
225
|
+
})]
|
|
226
|
+
})
|
|
219
227
|
}), control === null ? null : /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
220
228
|
className: clsx.clsx('wds-list-item-control-wrapper', {
|
|
221
229
|
'wds-list-item-button-control': controlType === 'button'
|
|
@@ -266,7 +274,7 @@ function View({
|
|
|
266
274
|
disabled: disabled,
|
|
267
275
|
onClick: controlProps?.onClick,
|
|
268
276
|
children: children
|
|
269
|
-
}), renderExtras()]
|
|
277
|
+
}), !disabled && renderExtras()]
|
|
270
278
|
})
|
|
271
279
|
);
|
|
272
280
|
}
|
|
@@ -276,7 +284,7 @@ function View({
|
|
|
276
284
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
277
285
|
className: clsx.clsx('wds-list-item-view d-flex flex-row'),
|
|
278
286
|
children: children
|
|
279
|
-
}), renderExtras()]
|
|
287
|
+
}), !disabled && renderExtras()]
|
|
280
288
|
});
|
|
281
289
|
}
|
|
282
290
|
// for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc
|
|
@@ -291,7 +299,7 @@ function View({
|
|
|
291
299
|
fullyInteractive: !isPartiallyInteractive
|
|
292
300
|
}),
|
|
293
301
|
children: children
|
|
294
|
-
}), renderExtras()]
|
|
302
|
+
}), !disabled && renderExtras()]
|
|
295
303
|
});
|
|
296
304
|
}
|
|
297
305
|
ListItem.Image = ListItemImage.Image;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n | 'non-interactive'\n | 'navigation'\n | 'radio'\n | 'checkbox'\n | 'switch'\n | 'button'\n | 'icon-button';\n\nexport type ListItemControlProps =\n | ListItemNavigationProps\n | ListItemCheckboxProps\n | ListItemButtonProps\n | ListItemIconButtonProps\n | ListItemRadioProps\n | ListItemSwitchProps;\n\nexport type ListItemProps = {\n as?: 'li' | 'div';\n /**\n * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n */\n inverted?: boolean;\n disabled?: boolean;\n /**\n * Highlights the list item as an action to be taken or already taken. <br />\n */\n spotlight?: 'active' | 'inactive';\n title: ReactNode;\n subtitle?: ReactNode;\n /**\n * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n */\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n */\n media?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n */\n control?: ReactNode;\n /**\n * Requires `<ListItem.Prompt />` component as a sole child.\n */\n prompt?: ReactNode;\n className?: string;\n /**\n * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n */\n valueColumnWidth?: number;\n id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n className,\n valueColumnWidth,\n id,\n}: ListItemProps) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' || controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' || controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [isFullyInteractive]);\n\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted },\n mediaSize,\n describedByIds,\n }),\n [describedByIds, mediaSize],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasControl = Boolean(control);\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt);\n\n /* eslint-disable functional/immutable-data */\n if (hasMedia && hasControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n /* eslint-enable functional/immutable-data */\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n disabled,\n },\n className,\n )}\n id={id}\n aria-disabled={disabled}\n >\n {spotlight === 'inactive' && (\n <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n <rect />\n </svg>\n )}\n\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/* Title + Subtitle + Values - Group */}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/* Title + Subtitle + Values - Group */}\n <span\n className={clsx({\n 'wds-list-item-body-center': title && !subtitle,\n })}\n >\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle || valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n 'wds-list-item-body-center':\n (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<ListItemProps, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;\n\nfunction View({\n children,\n subtitle,\n additionalInfo,\n prompt,\n disabled,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n const renderExtras = () => (\n <>\n {additionalInfo}\n {prompt}\n </>\n );\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'wds-list-item-control': controlType === 'navigation',\n fullyInteractive: !isPartiallyInteractive,\n })}\n disabled={disabled}\n onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive || controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n | 'non-interactive'\n | 'navigation'\n | 'radio'\n | 'checkbox'\n | 'switch'\n | 'button'\n | 'icon-button';\n\nexport type ListItemControlProps =\n | ListItemNavigationProps\n | ListItemCheckboxProps\n | ListItemButtonProps\n | ListItemIconButtonProps\n | ListItemRadioProps\n | ListItemSwitchProps;\n\nexport type ListItemProps = {\n as?: 'li' | 'div';\n /**\n * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n */\n inverted?: boolean;\n disabled?: boolean;\n /**\n * Highlights the list item as an action to be taken or already taken. <br />\n */\n spotlight?: 'active' | 'inactive';\n title: ReactNode;\n subtitle?: ReactNode;\n /**\n * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n */\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n */\n media?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n */\n control?: ReactNode;\n /**\n * Requires `<ListItem.Prompt />` component as a sole child.\n */\n prompt?: ReactNode;\n className?: string;\n /**\n * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n */\n valueColumnWidth?: number;\n id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n className,\n valueColumnWidth,\n id,\n}: ListItemProps) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' || controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' || controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [isFullyInteractive]);\n\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted },\n mediaSize,\n describedByIds,\n }),\n [describedByIds, mediaSize],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasControl = Boolean(control);\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt);\n\n /* eslint-disable functional/immutable-data */\n if (hasMedia && hasControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n /* eslint-enable functional/immutable-data */\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n disabled,\n },\n className,\n )}\n id={id}\n aria-disabled={disabled}\n >\n {spotlight === 'inactive' && (\n <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n <rect />\n </svg>\n )}\n\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/* Title + Subtitle + Values - Group */}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n <div\n className={clsx('wds-list-item-body-content', {\n 'wds-list-item-body-content-with-extras': disabled && (additionalInfo || prompt),\n })}\n >\n {/* Title + Subtitle + Values - Group */}\n <span\n className={clsx({\n 'wds-list-item-body-center': title && !subtitle,\n })}\n >\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle || valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n 'wds-list-item-body-center':\n (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n\n {/* For disabled list items, render extras spanning full body-content width */}\n {disabled && (additionalInfo || prompt) && (\n <div className=\"wds-list-item-body-extras\">\n {additionalInfo}\n {prompt}\n </div>\n )}\n </div>\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<ListItemProps, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;\n\nfunction View({\n children,\n subtitle,\n additionalInfo,\n prompt,\n disabled,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n const renderExtras = () => (\n <>\n {additionalInfo}\n {prompt}\n </>\n );\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'wds-list-item-control': controlType === 'navigation',\n fullyInteractive: !isPartiallyInteractive,\n })}\n disabled={disabled}\n onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n >\n {children}\n </PrimitiveAnchor>\n\n {!disabled && renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive || controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n {!disabled && renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {!disabled && renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}
|
|
@@ -164,54 +164,62 @@ const ListItem = ({
|
|
|
164
164
|
children: [media && /*#__PURE__*/jsx("div", {
|
|
165
165
|
className: "wds-list-item-media",
|
|
166
166
|
children: media
|
|
167
|
-
}), /*#__PURE__*/
|
|
167
|
+
}), /*#__PURE__*/jsx("div", {
|
|
168
168
|
className: "wds-list-item-body",
|
|
169
169
|
style: valueColumnWidth ? gridColumnsStyle : undefined,
|
|
170
|
-
children:
|
|
171
|
-
className: clsx({
|
|
172
|
-
'wds-list-item-body-
|
|
170
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
171
|
+
className: clsx('wds-list-item-body-content', {
|
|
172
|
+
'wds-list-item-body-content-with-extras': disabled && (additionalInfo || prompt)
|
|
173
173
|
}),
|
|
174
|
-
children: (
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
if (subtitle) {
|
|
182
|
-
titles.push(/*#__PURE__*/jsx(Body, {
|
|
183
|
-
id: ids.subtitle,
|
|
184
|
-
className: "wds-list-item-subtitle",
|
|
185
|
-
children: subtitle
|
|
186
|
-
}, ids.subtitle));
|
|
187
|
-
}
|
|
188
|
-
return inverted ? [...titles].reverse() : titles;
|
|
189
|
-
})()
|
|
190
|
-
}), (valueTitle || valueSubtitle) && /*#__PURE__*/jsx("span", {
|
|
191
|
-
className: clsx('wds-list-item-value', {
|
|
192
|
-
'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
|
|
193
|
-
'wds-list-item-body-center': valueTitle && !valueSubtitle || !valueTitle && valueSubtitle
|
|
194
|
-
}),
|
|
195
|
-
children: (() => {
|
|
196
|
-
const values = [];
|
|
197
|
-
if (valueTitle) {
|
|
198
|
-
values.push(/*#__PURE__*/jsx(Body, {
|
|
199
|
-
id: ids.valueTitle,
|
|
174
|
+
children: [/*#__PURE__*/jsx("span", {
|
|
175
|
+
className: clsx({
|
|
176
|
+
'wds-list-item-body-center': title && !subtitle
|
|
177
|
+
}),
|
|
178
|
+
children: (() => {
|
|
179
|
+
const titles = [/*#__PURE__*/jsx(Body, {
|
|
180
|
+
id: ids.title,
|
|
200
181
|
type: Typography.BODY_LARGE_BOLD,
|
|
201
|
-
className: "wds-list-item-title
|
|
202
|
-
children:
|
|
203
|
-
}, ids.
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
})()
|
|
214
|
-
|
|
182
|
+
className: "wds-list-item-title",
|
|
183
|
+
children: title
|
|
184
|
+
}, ids.title)];
|
|
185
|
+
if (subtitle) {
|
|
186
|
+
titles.push(/*#__PURE__*/jsx(Body, {
|
|
187
|
+
id: ids.subtitle,
|
|
188
|
+
className: "wds-list-item-subtitle",
|
|
189
|
+
children: subtitle
|
|
190
|
+
}, ids.subtitle));
|
|
191
|
+
}
|
|
192
|
+
return inverted ? [...titles].reverse() : titles;
|
|
193
|
+
})()
|
|
194
|
+
}), (valueTitle || valueSubtitle) && /*#__PURE__*/jsx("span", {
|
|
195
|
+
className: clsx('wds-list-item-value', {
|
|
196
|
+
'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
|
|
197
|
+
'wds-list-item-body-center': valueTitle && !valueSubtitle || !valueTitle && valueSubtitle
|
|
198
|
+
}),
|
|
199
|
+
children: (() => {
|
|
200
|
+
const values = [];
|
|
201
|
+
if (valueTitle) {
|
|
202
|
+
values.push(/*#__PURE__*/jsx(Body, {
|
|
203
|
+
id: ids.valueTitle,
|
|
204
|
+
type: Typography.BODY_LARGE_BOLD,
|
|
205
|
+
className: "wds-list-item-title-value",
|
|
206
|
+
children: valueTitle
|
|
207
|
+
}, ids.valueTitle));
|
|
208
|
+
}
|
|
209
|
+
if (valueSubtitle) {
|
|
210
|
+
values.push(/*#__PURE__*/jsx(Body, {
|
|
211
|
+
id: ids.valueSubtitle,
|
|
212
|
+
className: "wds-list-item-subtitle-value",
|
|
213
|
+
children: valueSubtitle
|
|
214
|
+
}, ids.valueSubtitle));
|
|
215
|
+
}
|
|
216
|
+
return inverted ? [...values].reverse() : values;
|
|
217
|
+
})()
|
|
218
|
+
}), disabled && (additionalInfo || prompt) && /*#__PURE__*/jsxs("div", {
|
|
219
|
+
className: "wds-list-item-body-extras",
|
|
220
|
+
children: [additionalInfo, prompt]
|
|
221
|
+
})]
|
|
222
|
+
})
|
|
215
223
|
}), control === null ? null : /*#__PURE__*/jsx(Body, {
|
|
216
224
|
className: clsx('wds-list-item-control-wrapper', {
|
|
217
225
|
'wds-list-item-button-control': controlType === 'button'
|
|
@@ -262,7 +270,7 @@ function View({
|
|
|
262
270
|
disabled: disabled,
|
|
263
271
|
onClick: controlProps?.onClick,
|
|
264
272
|
children: children
|
|
265
|
-
}), renderExtras()]
|
|
273
|
+
}), !disabled && renderExtras()]
|
|
266
274
|
})
|
|
267
275
|
);
|
|
268
276
|
}
|
|
@@ -272,7 +280,7 @@ function View({
|
|
|
272
280
|
children: [/*#__PURE__*/jsx("div", {
|
|
273
281
|
className: clsx('wds-list-item-view d-flex flex-row'),
|
|
274
282
|
children: children
|
|
275
|
-
}), renderExtras()]
|
|
283
|
+
}), !disabled && renderExtras()]
|
|
276
284
|
});
|
|
277
285
|
}
|
|
278
286
|
// for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc
|
|
@@ -287,7 +295,7 @@ function View({
|
|
|
287
295
|
fullyInteractive: !isPartiallyInteractive
|
|
288
296
|
}),
|
|
289
297
|
children: children
|
|
290
|
-
}), renderExtras()]
|
|
298
|
+
}), !disabled && renderExtras()]
|
|
291
299
|
});
|
|
292
300
|
}
|
|
293
301
|
ListItem.Image = Image;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n | 'non-interactive'\n | 'navigation'\n | 'radio'\n | 'checkbox'\n | 'switch'\n | 'button'\n | 'icon-button';\n\nexport type ListItemControlProps =\n | ListItemNavigationProps\n | ListItemCheckboxProps\n | ListItemButtonProps\n | ListItemIconButtonProps\n | ListItemRadioProps\n | ListItemSwitchProps;\n\nexport type ListItemProps = {\n as?: 'li' | 'div';\n /**\n * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n */\n inverted?: boolean;\n disabled?: boolean;\n /**\n * Highlights the list item as an action to be taken or already taken. <br />\n */\n spotlight?: 'active' | 'inactive';\n title: ReactNode;\n subtitle?: ReactNode;\n /**\n * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n */\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n */\n media?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n */\n control?: ReactNode;\n /**\n * Requires `<ListItem.Prompt />` component as a sole child.\n */\n prompt?: ReactNode;\n className?: string;\n /**\n * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n */\n valueColumnWidth?: number;\n id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n className,\n valueColumnWidth,\n id,\n}: ListItemProps) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' || controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' || controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [isFullyInteractive]);\n\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted },\n mediaSize,\n describedByIds,\n }),\n [describedByIds, mediaSize],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasControl = Boolean(control);\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt);\n\n /* eslint-disable functional/immutable-data */\n if (hasMedia && hasControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n /* eslint-enable functional/immutable-data */\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n disabled,\n },\n className,\n )}\n id={id}\n aria-disabled={disabled}\n >\n {spotlight === 'inactive' && (\n <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n <rect />\n </svg>\n )}\n\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/* Title + Subtitle + Values - Group */}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/* Title + Subtitle + Values - Group */}\n <span\n className={clsx({\n 'wds-list-item-body-center': title && !subtitle,\n })}\n >\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle || valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n 'wds-list-item-body-center':\n (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<ListItemProps, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;\n\nfunction View({\n children,\n subtitle,\n additionalInfo,\n prompt,\n disabled,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n const renderExtras = () => (\n <>\n {additionalInfo}\n {prompt}\n </>\n );\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'wds-list-item-control': controlType === 'navigation',\n fullyInteractive: !isPartiallyInteractive,\n })}\n disabled={disabled}\n onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive || controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n | 'non-interactive'\n | 'navigation'\n | 'radio'\n | 'checkbox'\n | 'switch'\n | 'button'\n | 'icon-button';\n\nexport type ListItemControlProps =\n | ListItemNavigationProps\n | ListItemCheckboxProps\n | ListItemButtonProps\n | ListItemIconButtonProps\n | ListItemRadioProps\n | ListItemSwitchProps;\n\nexport type ListItemProps = {\n as?: 'li' | 'div';\n /**\n * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n */\n inverted?: boolean;\n disabled?: boolean;\n /**\n * Highlights the list item as an action to be taken or already taken. <br />\n */\n spotlight?: 'active' | 'inactive';\n title: ReactNode;\n subtitle?: ReactNode;\n /**\n * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n */\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n */\n media?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n */\n control?: ReactNode;\n /**\n * Requires `<ListItem.Prompt />` component as a sole child.\n */\n prompt?: ReactNode;\n className?: string;\n /**\n * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n */\n valueColumnWidth?: number;\n id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n className,\n valueColumnWidth,\n id,\n}: ListItemProps) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' || controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' || controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [isFullyInteractive]);\n\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted },\n mediaSize,\n describedByIds,\n }),\n [describedByIds, mediaSize],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasControl = Boolean(control);\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt);\n\n /* eslint-disable functional/immutable-data */\n if (hasMedia && hasControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n /* eslint-enable functional/immutable-data */\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n disabled,\n },\n className,\n )}\n id={id}\n aria-disabled={disabled}\n >\n {spotlight === 'inactive' && (\n <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n <rect />\n </svg>\n )}\n\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/* Title + Subtitle + Values - Group */}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n <div\n className={clsx('wds-list-item-body-content', {\n 'wds-list-item-body-content-with-extras': disabled && (additionalInfo || prompt),\n })}\n >\n {/* Title + Subtitle + Values - Group */}\n <span\n className={clsx({\n 'wds-list-item-body-center': title && !subtitle,\n })}\n >\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle || valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n 'wds-list-item-body-center':\n (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n\n {/* For disabled list items, render extras spanning full body-content width */}\n {disabled && (additionalInfo || prompt) && (\n <div className=\"wds-list-item-body-extras\">\n {additionalInfo}\n {prompt}\n </div>\n )}\n </div>\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<ListItemProps, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;\n\nfunction View({\n children,\n subtitle,\n additionalInfo,\n prompt,\n disabled,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n const renderExtras = () => (\n <>\n {additionalInfo}\n {prompt}\n </>\n );\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'wds-list-item-control': controlType === 'navigation',\n fullyInteractive: !isPartiallyInteractive,\n })}\n disabled={disabled}\n onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n >\n {children}\n </PrimitiveAnchor>\n\n {!disabled && renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive || controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n {!disabled && renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {!disabled && renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}
|
package/build/main.css
CHANGED
|
@@ -3012,6 +3012,28 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3012
3012
|
text-align: left;
|
|
3013
3013
|
}
|
|
3014
3014
|
}
|
|
3015
|
+
@container (min-width: 375px) {
|
|
3016
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
3017
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
3018
|
+
grid-template-rows: auto;
|
|
3019
|
+
grid-template-areas: "media body control";
|
|
3020
|
+
}
|
|
3021
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
3022
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
3023
|
+
grid-template-rows: auto;
|
|
3024
|
+
grid-template-areas: "media body";
|
|
3025
|
+
}
|
|
3026
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
3027
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
3028
|
+
grid-template-rows: auto;
|
|
3029
|
+
grid-template-areas: "body control";
|
|
3030
|
+
}
|
|
3031
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
3032
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
3033
|
+
grid-template-rows: auto;
|
|
3034
|
+
grid-template-areas: "body";
|
|
3035
|
+
}
|
|
3036
|
+
}
|
|
3015
3037
|
.wds-list-item-prompt {
|
|
3016
3038
|
grid-area: prompt;
|
|
3017
3039
|
display: inline-flex;
|
|
@@ -3346,6 +3368,32 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3346
3368
|
.wds-list-item-control {
|
|
3347
3369
|
flex: 0 0 auto;
|
|
3348
3370
|
}
|
|
3371
|
+
.wds-list-item-body-content {
|
|
3372
|
+
display: grid;
|
|
3373
|
+
grid-template-columns: 1fr max-content;
|
|
3374
|
+
grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
|
|
3375
|
+
grid-gap: 16px;
|
|
3376
|
+
grid-gap: var(--size-16);
|
|
3377
|
+
gap: 16px;
|
|
3378
|
+
gap: var(--size-16);
|
|
3379
|
+
align-items: center;
|
|
3380
|
+
}
|
|
3381
|
+
.wds-list-item-body-content-with-extras {
|
|
3382
|
+
position: relative;
|
|
3383
|
+
}
|
|
3384
|
+
.wds-list-item-body-extras {
|
|
3385
|
+
position: absolute;
|
|
3386
|
+
top: 100%;
|
|
3387
|
+
left: 0;
|
|
3388
|
+
width: 100%;
|
|
3389
|
+
margin-top: 4px;
|
|
3390
|
+
margin-top: var(--size-4);
|
|
3391
|
+
display: flex;
|
|
3392
|
+
flex-direction: column;
|
|
3393
|
+
gap: 4px;
|
|
3394
|
+
gap: var(--size-4);
|
|
3395
|
+
z-index: 1;
|
|
3396
|
+
}
|
|
3349
3397
|
.wds-list-item.disabled {
|
|
3350
3398
|
filter: none;
|
|
3351
3399
|
opacity: 1;
|
|
@@ -368,6 +368,28 @@
|
|
|
368
368
|
text-align: left;
|
|
369
369
|
}
|
|
370
370
|
}
|
|
371
|
+
@container (min-width: 375px) {
|
|
372
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
373
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
374
|
+
grid-template-rows: auto;
|
|
375
|
+
grid-template-areas: "media body control";
|
|
376
|
+
}
|
|
377
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
378
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
379
|
+
grid-template-rows: auto;
|
|
380
|
+
grid-template-areas: "media body";
|
|
381
|
+
}
|
|
382
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
383
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
384
|
+
grid-template-rows: auto;
|
|
385
|
+
grid-template-areas: "body control";
|
|
386
|
+
}
|
|
387
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
388
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
389
|
+
grid-template-rows: auto;
|
|
390
|
+
grid-template-areas: "body";
|
|
391
|
+
}
|
|
392
|
+
}
|
|
371
393
|
.wds-list-item-prompt {
|
|
372
394
|
grid-area: prompt;
|
|
373
395
|
display: inline-flex;
|
|
@@ -702,6 +724,32 @@
|
|
|
702
724
|
.wds-list-item-control {
|
|
703
725
|
flex: 0 0 auto;
|
|
704
726
|
}
|
|
727
|
+
.wds-list-item-body-content {
|
|
728
|
+
display: grid;
|
|
729
|
+
grid-template-columns: 1fr max-content;
|
|
730
|
+
grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
|
|
731
|
+
grid-gap: 16px;
|
|
732
|
+
grid-gap: var(--size-16);
|
|
733
|
+
gap: 16px;
|
|
734
|
+
gap: var(--size-16);
|
|
735
|
+
align-items: center;
|
|
736
|
+
}
|
|
737
|
+
.wds-list-item-body-content-with-extras {
|
|
738
|
+
position: relative;
|
|
739
|
+
}
|
|
740
|
+
.wds-list-item-body-extras {
|
|
741
|
+
position: absolute;
|
|
742
|
+
top: 100%;
|
|
743
|
+
left: 0;
|
|
744
|
+
width: 100%;
|
|
745
|
+
margin-top: 4px;
|
|
746
|
+
margin-top: var(--size-4);
|
|
747
|
+
display: flex;
|
|
748
|
+
flex-direction: column;
|
|
749
|
+
gap: 4px;
|
|
750
|
+
gap: var(--size-4);
|
|
751
|
+
z-index: 1;
|
|
752
|
+
}
|
|
705
753
|
.wds-list-item.disabled {
|
|
706
754
|
filter: none;
|
|
707
755
|
opacity: 1;
|
|
@@ -368,3 +368,25 @@
|
|
|
368
368
|
text-align: left;
|
|
369
369
|
}
|
|
370
370
|
}
|
|
371
|
+
@container (min-width: 375px) {
|
|
372
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
373
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
374
|
+
grid-template-rows: auto;
|
|
375
|
+
grid-template-areas: "media body control";
|
|
376
|
+
}
|
|
377
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
378
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
379
|
+
grid-template-rows: auto;
|
|
380
|
+
grid-template-areas: "media body";
|
|
381
|
+
}
|
|
382
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
383
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
384
|
+
grid-template-rows: auto;
|
|
385
|
+
grid-template-areas: "body control";
|
|
386
|
+
}
|
|
387
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
388
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
389
|
+
grid-template-rows: auto;
|
|
390
|
+
grid-template-areas: "body";
|
|
391
|
+
}
|
|
392
|
+
}
|
package/build/styles/main.css
CHANGED
|
@@ -3012,6 +3012,28 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3012
3012
|
text-align: left;
|
|
3013
3013
|
}
|
|
3014
3014
|
}
|
|
3015
|
+
@container (min-width: 375px) {
|
|
3016
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
3017
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
3018
|
+
grid-template-rows: auto;
|
|
3019
|
+
grid-template-areas: "media body control";
|
|
3020
|
+
}
|
|
3021
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
3022
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
3023
|
+
grid-template-rows: auto;
|
|
3024
|
+
grid-template-areas: "media body";
|
|
3025
|
+
}
|
|
3026
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
3027
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
3028
|
+
grid-template-rows: auto;
|
|
3029
|
+
grid-template-areas: "body control";
|
|
3030
|
+
}
|
|
3031
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
3032
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
3033
|
+
grid-template-rows: auto;
|
|
3034
|
+
grid-template-areas: "body";
|
|
3035
|
+
}
|
|
3036
|
+
}
|
|
3015
3037
|
.wds-list-item-prompt {
|
|
3016
3038
|
grid-area: prompt;
|
|
3017
3039
|
display: inline-flex;
|
|
@@ -3346,6 +3368,32 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3346
3368
|
.wds-list-item-control {
|
|
3347
3369
|
flex: 0 0 auto;
|
|
3348
3370
|
}
|
|
3371
|
+
.wds-list-item-body-content {
|
|
3372
|
+
display: grid;
|
|
3373
|
+
grid-template-columns: 1fr max-content;
|
|
3374
|
+
grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
|
|
3375
|
+
grid-gap: 16px;
|
|
3376
|
+
grid-gap: var(--size-16);
|
|
3377
|
+
gap: 16px;
|
|
3378
|
+
gap: var(--size-16);
|
|
3379
|
+
align-items: center;
|
|
3380
|
+
}
|
|
3381
|
+
.wds-list-item-body-content-with-extras {
|
|
3382
|
+
position: relative;
|
|
3383
|
+
}
|
|
3384
|
+
.wds-list-item-body-extras {
|
|
3385
|
+
position: absolute;
|
|
3386
|
+
top: 100%;
|
|
3387
|
+
left: 0;
|
|
3388
|
+
width: 100%;
|
|
3389
|
+
margin-top: 4px;
|
|
3390
|
+
margin-top: var(--size-4);
|
|
3391
|
+
display: flex;
|
|
3392
|
+
flex-direction: column;
|
|
3393
|
+
gap: 4px;
|
|
3394
|
+
gap: var(--size-4);
|
|
3395
|
+
z-index: 1;
|
|
3396
|
+
}
|
|
3349
3397
|
.wds-list-item.disabled {
|
|
3350
3398
|
filter: none;
|
|
3351
3399
|
opacity: 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;mLAgBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;mLAgBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgPf,CAAC;AAiGF,eAAe,QAAQ,CAAC"}
|
package/package.json
CHANGED
package/src/i18n/id.json
CHANGED
|
@@ -45,7 +45,6 @@
|
|
|
45
45
|
"neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
|
|
46
46
|
"neptune.Upload.csSuccessText": "Pengunggahan selesai!",
|
|
47
47
|
"neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
|
|
48
|
-
"neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
|
|
49
48
|
"neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
|
|
50
49
|
"neptune.Upload.psButtonText": "Batalkan",
|
|
51
50
|
"neptune.Upload.psProcessingText": "Mengunggah...",
|
|
@@ -53,7 +52,6 @@
|
|
|
53
52
|
"neptune.Upload.usButtonText": "Atau pilih file",
|
|
54
53
|
"neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
|
|
55
54
|
"neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
|
|
56
|
-
"neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
|
|
57
55
|
"neptune.UploadButton.allFileTypes": "Semua jenis file",
|
|
58
56
|
"neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
|
|
59
57
|
"neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",
|
|
@@ -368,6 +368,28 @@
|
|
|
368
368
|
text-align: left;
|
|
369
369
|
}
|
|
370
370
|
}
|
|
371
|
+
@container (min-width: 375px) {
|
|
372
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
373
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
374
|
+
grid-template-rows: auto;
|
|
375
|
+
grid-template-areas: "media body control";
|
|
376
|
+
}
|
|
377
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
378
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
379
|
+
grid-template-rows: auto;
|
|
380
|
+
grid-template-areas: "media body";
|
|
381
|
+
}
|
|
382
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
383
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
384
|
+
grid-template-rows: auto;
|
|
385
|
+
grid-template-areas: "body control";
|
|
386
|
+
}
|
|
387
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
388
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
389
|
+
grid-template-rows: auto;
|
|
390
|
+
grid-template-areas: "body";
|
|
391
|
+
}
|
|
392
|
+
}
|
|
371
393
|
.wds-list-item-prompt {
|
|
372
394
|
grid-area: prompt;
|
|
373
395
|
display: inline-flex;
|
|
@@ -702,6 +724,32 @@
|
|
|
702
724
|
.wds-list-item-control {
|
|
703
725
|
flex: 0 0 auto;
|
|
704
726
|
}
|
|
727
|
+
.wds-list-item-body-content {
|
|
728
|
+
display: grid;
|
|
729
|
+
grid-template-columns: 1fr max-content;
|
|
730
|
+
grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
|
|
731
|
+
grid-gap: 16px;
|
|
732
|
+
grid-gap: var(--size-16);
|
|
733
|
+
gap: 16px;
|
|
734
|
+
gap: var(--size-16);
|
|
735
|
+
align-items: center;
|
|
736
|
+
}
|
|
737
|
+
.wds-list-item-body-content-with-extras {
|
|
738
|
+
position: relative;
|
|
739
|
+
}
|
|
740
|
+
.wds-list-item-body-extras {
|
|
741
|
+
position: absolute;
|
|
742
|
+
top: 100%;
|
|
743
|
+
left: 0;
|
|
744
|
+
width: 100%;
|
|
745
|
+
margin-top: 4px;
|
|
746
|
+
margin-top: var(--size-4);
|
|
747
|
+
display: flex;
|
|
748
|
+
flex-direction: column;
|
|
749
|
+
gap: 4px;
|
|
750
|
+
gap: var(--size-4);
|
|
751
|
+
z-index: 1;
|
|
752
|
+
}
|
|
705
753
|
.wds-list-item.disabled {
|
|
706
754
|
filter: none;
|
|
707
755
|
opacity: 1;
|
|
@@ -368,3 +368,25 @@
|
|
|
368
368
|
text-align: left;
|
|
369
369
|
}
|
|
370
370
|
}
|
|
371
|
+
@container (min-width: 375px) {
|
|
372
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
373
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
374
|
+
grid-template-rows: auto;
|
|
375
|
+
grid-template-areas: "media body control";
|
|
376
|
+
}
|
|
377
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
378
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
379
|
+
grid-template-rows: auto;
|
|
380
|
+
grid-template-areas: "media body";
|
|
381
|
+
}
|
|
382
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
383
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
384
|
+
grid-template-rows: auto;
|
|
385
|
+
grid-template-areas: "body control";
|
|
386
|
+
}
|
|
387
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
388
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
389
|
+
grid-template-rows: auto;
|
|
390
|
+
grid-template-areas: "body";
|
|
391
|
+
}
|
|
392
|
+
}
|
|
@@ -619,4 +619,40 @@
|
|
|
619
619
|
}
|
|
620
620
|
}
|
|
621
621
|
}
|
|
622
|
+
|
|
623
|
+
&.disabled {
|
|
624
|
+
@container (min-width: 375px) {
|
|
625
|
+
&.wds-list-item-hasMedia-hasControl {
|
|
626
|
+
&.wds-list-item-hasInfo-hasPrompt,
|
|
627
|
+
&.wds-list-item-noInfo-hasPrompt {
|
|
628
|
+
grid-template-rows: auto;
|
|
629
|
+
grid-template-areas: "media body control";
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
|
|
633
|
+
&.wds-list-item-hasMedia-noControl {
|
|
634
|
+
&.wds-list-item-hasInfo-hasPrompt,
|
|
635
|
+
&.wds-list-item-noInfo-hasPrompt {
|
|
636
|
+
grid-template-rows: auto;
|
|
637
|
+
grid-template-areas: "media body";
|
|
638
|
+
}
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
&.wds-list-item-noMedia-hasControl {
|
|
642
|
+
&.wds-list-item-hasInfo-hasPrompt,
|
|
643
|
+
&.wds-list-item-noInfo-hasPrompt {
|
|
644
|
+
grid-template-rows: auto;
|
|
645
|
+
grid-template-areas: "body control";
|
|
646
|
+
}
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
&.wds-list-item-noMedia-noControl {
|
|
650
|
+
&.wds-list-item-hasInfo-hasPrompt,
|
|
651
|
+
&.wds-list-item-noInfo-hasPrompt {
|
|
652
|
+
grid-template-rows: auto;
|
|
653
|
+
grid-template-areas: "body";
|
|
654
|
+
}
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
}
|
|
622
658
|
}
|
|
@@ -223,6 +223,31 @@
|
|
|
223
223
|
flex: 0 0 auto;
|
|
224
224
|
}
|
|
225
225
|
|
|
226
|
+
&-body {
|
|
227
|
+
&-content {
|
|
228
|
+
display: grid;
|
|
229
|
+
grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
|
|
230
|
+
gap: var(--size-16);
|
|
231
|
+
align-items: center;
|
|
232
|
+
|
|
233
|
+
&-with-extras {
|
|
234
|
+
position: relative;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
&-extras {
|
|
239
|
+
position: absolute;
|
|
240
|
+
top: 100%;
|
|
241
|
+
left: 0;
|
|
242
|
+
width: 100%;
|
|
243
|
+
margin-top: var(--size-4);
|
|
244
|
+
display: flex;
|
|
245
|
+
flex-direction: column;
|
|
246
|
+
gap: var(--size-4);
|
|
247
|
+
z-index: 1;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
226
251
|
&.disabled {
|
|
227
252
|
filter: none;
|
|
228
253
|
opacity: 1;
|
|
@@ -236,8 +261,6 @@
|
|
|
236
261
|
}
|
|
237
262
|
}
|
|
238
263
|
|
|
239
|
-
|
|
240
|
-
|
|
241
264
|
&-spotlight {
|
|
242
265
|
padding-left: var(--size-12);
|
|
243
266
|
padding-right: var(--size-12);
|
|
@@ -255,71 +255,85 @@ export const ListItem = ({
|
|
|
255
255
|
className="wds-list-item-body"
|
|
256
256
|
style={valueColumnWidth ? gridColumnsStyle : undefined}
|
|
257
257
|
>
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
'wds-list-item-body-center': title && !subtitle,
|
|
258
|
+
<div
|
|
259
|
+
className={clsx('wds-list-item-body-content', {
|
|
260
|
+
'wds-list-item-body-content-with-extras': disabled && (additionalInfo || prompt),
|
|
262
261
|
})}
|
|
263
262
|
>
|
|
264
|
-
{
|
|
265
|
-
const titles = [
|
|
266
|
-
<Body
|
|
267
|
-
key={ids.title}
|
|
268
|
-
id={ids.title}
|
|
269
|
-
type={Typography.BODY_LARGE_BOLD}
|
|
270
|
-
className="wds-list-item-title"
|
|
271
|
-
>
|
|
272
|
-
{title}
|
|
273
|
-
</Body>,
|
|
274
|
-
];
|
|
275
|
-
if (subtitle) {
|
|
276
|
-
titles.push(
|
|
277
|
-
<Body key={ids.subtitle} id={ids.subtitle} className="wds-list-item-subtitle">
|
|
278
|
-
{subtitle}
|
|
279
|
-
</Body>,
|
|
280
|
-
);
|
|
281
|
-
}
|
|
282
|
-
return inverted ? [...titles].reverse() : titles;
|
|
283
|
-
})()}
|
|
284
|
-
</span>
|
|
285
|
-
|
|
286
|
-
{(valueTitle || valueSubtitle) && (
|
|
263
|
+
{/* Title + Subtitle + Values - Group */}
|
|
287
264
|
<span
|
|
288
|
-
className={clsx(
|
|
289
|
-
'
|
|
290
|
-
'wds-list-item-body-center':
|
|
291
|
-
(valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),
|
|
265
|
+
className={clsx({
|
|
266
|
+
'wds-list-item-body-center': title && !subtitle,
|
|
292
267
|
})}
|
|
293
268
|
>
|
|
294
269
|
{(() => {
|
|
295
|
-
const
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
values.push(
|
|
310
|
-
<Body
|
|
311
|
-
key={ids.valueSubtitle}
|
|
312
|
-
id={ids.valueSubtitle}
|
|
313
|
-
className="wds-list-item-subtitle-value"
|
|
314
|
-
>
|
|
315
|
-
{valueSubtitle}
|
|
270
|
+
const titles = [
|
|
271
|
+
<Body
|
|
272
|
+
key={ids.title}
|
|
273
|
+
id={ids.title}
|
|
274
|
+
type={Typography.BODY_LARGE_BOLD}
|
|
275
|
+
className="wds-list-item-title"
|
|
276
|
+
>
|
|
277
|
+
{title}
|
|
278
|
+
</Body>,
|
|
279
|
+
];
|
|
280
|
+
if (subtitle) {
|
|
281
|
+
titles.push(
|
|
282
|
+
<Body key={ids.subtitle} id={ids.subtitle} className="wds-list-item-subtitle">
|
|
283
|
+
{subtitle}
|
|
316
284
|
</Body>,
|
|
317
285
|
);
|
|
318
286
|
}
|
|
319
|
-
return inverted ? [...
|
|
287
|
+
return inverted ? [...titles].reverse() : titles;
|
|
320
288
|
})()}
|
|
321
289
|
</span>
|
|
322
|
-
|
|
290
|
+
|
|
291
|
+
{(valueTitle || valueSubtitle) && (
|
|
292
|
+
<span
|
|
293
|
+
className={clsx('wds-list-item-value', {
|
|
294
|
+
'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
|
|
295
|
+
'wds-list-item-body-center':
|
|
296
|
+
(valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),
|
|
297
|
+
})}
|
|
298
|
+
>
|
|
299
|
+
{(() => {
|
|
300
|
+
const values = [];
|
|
301
|
+
if (valueTitle) {
|
|
302
|
+
values.push(
|
|
303
|
+
<Body
|
|
304
|
+
key={ids.valueTitle}
|
|
305
|
+
id={ids.valueTitle}
|
|
306
|
+
type={Typography.BODY_LARGE_BOLD}
|
|
307
|
+
className="wds-list-item-title-value"
|
|
308
|
+
>
|
|
309
|
+
{valueTitle}
|
|
310
|
+
</Body>,
|
|
311
|
+
);
|
|
312
|
+
}
|
|
313
|
+
if (valueSubtitle) {
|
|
314
|
+
values.push(
|
|
315
|
+
<Body
|
|
316
|
+
key={ids.valueSubtitle}
|
|
317
|
+
id={ids.valueSubtitle}
|
|
318
|
+
className="wds-list-item-subtitle-value"
|
|
319
|
+
>
|
|
320
|
+
{valueSubtitle}
|
|
321
|
+
</Body>,
|
|
322
|
+
);
|
|
323
|
+
}
|
|
324
|
+
return inverted ? [...values].reverse() : values;
|
|
325
|
+
})()}
|
|
326
|
+
</span>
|
|
327
|
+
)}
|
|
328
|
+
|
|
329
|
+
{/* For disabled list items, render extras spanning full body-content width */}
|
|
330
|
+
{disabled && (additionalInfo || prompt) && (
|
|
331
|
+
<div className="wds-list-item-body-extras">
|
|
332
|
+
{additionalInfo}
|
|
333
|
+
{prompt}
|
|
334
|
+
</div>
|
|
335
|
+
)}
|
|
336
|
+
</div>
|
|
323
337
|
</div>
|
|
324
338
|
|
|
325
339
|
{control === null ? null : (
|
|
@@ -390,7 +404,7 @@ function View({
|
|
|
390
404
|
{children}
|
|
391
405
|
</PrimitiveAnchor>
|
|
392
406
|
|
|
393
|
-
{renderExtras()}
|
|
407
|
+
{!disabled && renderExtras()}
|
|
394
408
|
</div>
|
|
395
409
|
);
|
|
396
410
|
}
|
|
@@ -400,7 +414,7 @@ function View({
|
|
|
400
414
|
<div className={clsx('wds-list-item-gridWrapper', className)}>
|
|
401
415
|
<div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>
|
|
402
416
|
|
|
403
|
-
{renderExtras()}
|
|
417
|
+
{!disabled && renderExtras()}
|
|
404
418
|
</div>
|
|
405
419
|
);
|
|
406
420
|
}
|
|
@@ -420,7 +434,7 @@ function View({
|
|
|
420
434
|
{children}
|
|
421
435
|
</label>
|
|
422
436
|
|
|
423
|
-
{renderExtras()}
|
|
437
|
+
{!disabled && renderExtras()}
|
|
424
438
|
</InputWrapper>
|
|
425
439
|
);
|
|
426
440
|
}
|
package/src/main.css
CHANGED
|
@@ -3012,6 +3012,28 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3012
3012
|
text-align: left;
|
|
3013
3013
|
}
|
|
3014
3014
|
}
|
|
3015
|
+
@container (min-width: 375px) {
|
|
3016
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
3017
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
3018
|
+
grid-template-rows: auto;
|
|
3019
|
+
grid-template-areas: "media body control";
|
|
3020
|
+
}
|
|
3021
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
3022
|
+
.wds-list-item.disabled.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
3023
|
+
grid-template-rows: auto;
|
|
3024
|
+
grid-template-areas: "media body";
|
|
3025
|
+
}
|
|
3026
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt,
|
|
3027
|
+
.wds-list-item.disabled.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
|
|
3028
|
+
grid-template-rows: auto;
|
|
3029
|
+
grid-template-areas: "body control";
|
|
3030
|
+
}
|
|
3031
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt,
|
|
3032
|
+
.wds-list-item.disabled.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
|
|
3033
|
+
grid-template-rows: auto;
|
|
3034
|
+
grid-template-areas: "body";
|
|
3035
|
+
}
|
|
3036
|
+
}
|
|
3015
3037
|
.wds-list-item-prompt {
|
|
3016
3038
|
grid-area: prompt;
|
|
3017
3039
|
display: inline-flex;
|
|
@@ -3346,6 +3368,32 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3346
3368
|
.wds-list-item-control {
|
|
3347
3369
|
flex: 0 0 auto;
|
|
3348
3370
|
}
|
|
3371
|
+
.wds-list-item-body-content {
|
|
3372
|
+
display: grid;
|
|
3373
|
+
grid-template-columns: 1fr max-content;
|
|
3374
|
+
grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
|
|
3375
|
+
grid-gap: 16px;
|
|
3376
|
+
grid-gap: var(--size-16);
|
|
3377
|
+
gap: 16px;
|
|
3378
|
+
gap: var(--size-16);
|
|
3379
|
+
align-items: center;
|
|
3380
|
+
}
|
|
3381
|
+
.wds-list-item-body-content-with-extras {
|
|
3382
|
+
position: relative;
|
|
3383
|
+
}
|
|
3384
|
+
.wds-list-item-body-extras {
|
|
3385
|
+
position: absolute;
|
|
3386
|
+
top: 100%;
|
|
3387
|
+
left: 0;
|
|
3388
|
+
width: 100%;
|
|
3389
|
+
margin-top: 4px;
|
|
3390
|
+
margin-top: var(--size-4);
|
|
3391
|
+
display: flex;
|
|
3392
|
+
flex-direction: column;
|
|
3393
|
+
gap: 4px;
|
|
3394
|
+
gap: var(--size-4);
|
|
3395
|
+
z-index: 1;
|
|
3396
|
+
}
|
|
3349
3397
|
.wds-list-item.disabled {
|
|
3350
3398
|
filter: none;
|
|
3351
3399
|
opacity: 1;
|