@transferwise/components 46.108.1 → 46.109.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/listItem/AvatarLayout/ListItemAvatarLayout.js.map +1 -1
- package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs.map +1 -1
- package/build/listItem/AvatarView/ListItemAvatarView.js.map +1 -1
- package/build/listItem/AvatarView/ListItemAvatarView.mjs.map +1 -1
- package/build/listItem/Image/ListItemImage.js.map +1 -1
- package/build/listItem/Image/ListItemImage.mjs.map +1 -1
- package/build/listItem/ListItemContext.js.map +1 -1
- package/build/listItem/ListItemContext.mjs.map +1 -1
- package/build/main.css +6 -4
- package/build/styles/listItem/ListItem.css +6 -4
- package/build/styles/listItem/ListItem.grid.css +4 -4
- package/build/styles/main.css +6 -4
- package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts +3 -4
- package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts.map +1 -1
- package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts +2 -1
- package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts.map +1 -1
- package/build/types/listItem/Image/ListItemImage.d.ts +2 -1
- package/build/types/listItem/Image/ListItemImage.d.ts.map +1 -1
- package/build/types/listItem/ListItemContext.d.ts +1 -1
- package/build/types/listItem/ListItemContext.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx +2 -2
- package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx +4 -3
- package/src/listItem/AvatarView/ListItemAvatarView.story.tsx +2 -2
- package/src/listItem/AvatarView/ListItemAvatarView.tsx +2 -1
- package/src/listItem/Image/ListItemImage.tsx +2 -1
- package/src/listItem/ListItem.css +6 -4
- package/src/listItem/ListItem.grid.css +4 -4
- package/src/listItem/ListItem.grid.less +1 -1
- package/src/listItem/ListItem.less +1 -0
- package/src/listItem/ListItemContext.tsx +1 -1
- package/src/listItem/_stories/ListItem.layout.test.story.tsx +1 -1
- package/src/main.css +6 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarLayout.js","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\
|
|
1
|
+
{"version":3,"file":"ListItemAvatarLayout.js","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {\n size?: ListItemMediaSize;\n};\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarLayoutComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-layout', className)}\n />\n );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;;;AAgBO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,sBAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarLayout.mjs","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\
|
|
1
|
+
{"version":3,"file":"ListItemAvatarLayout.mjs","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {\n size?: ListItemMediaSize;\n};\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarLayoutComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-layout', className)}\n />\n );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;AAgBO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,cAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarView.js","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?:
|
|
1
|
+
{"version":3,"file":"ListItemAvatarView.js","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?: ListItemMediaSize;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarViewComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-view', className)}\n />\n );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;;;AAgBO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarView.mjs","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?:
|
|
1
|
+
{"version":3,"file":"ListItemAvatarView.mjs","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?: ListItemMediaSize;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarViewComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-view', className)}\n />\n );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;AAgBO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,YAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.js","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n /**\n * The size of square container for the image, matching available avatar sizes.\n */\n size?:
|
|
1
|
+
{"version":3,"file":"ListItemImage.js","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n /**\n * The size of square container for the image, matching available avatar sizes.\n */\n size?: ListItemMediaSize;\n /**\n * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n */\n alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n useListItemMedia(size);\n\n return (\n <div\n className={clsx('wds-list-item-media-image-wrapper')}\n style={\n {\n '--wds-list-item-media-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp\n {...props}\n className={clsx(className, 'wds-list-item-media-image')}\n alt={alt}\n role={alt ? undefined : 'presentation'}\n />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;;;AAyBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,iCAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,cAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,SAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,cAAA,CAACI,eAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,SAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.mjs","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n /**\n * The size of square container for the image, matching available avatar sizes.\n */\n size?:
|
|
1
|
+
{"version":3,"file":"ListItemImage.mjs","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n /**\n * The size of square container for the image, matching available avatar sizes.\n */\n size?: ListItemMediaSize;\n /**\n * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n */\n alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n useListItemMedia(size);\n\n return (\n <div\n className={clsx('wds-list-item-media-image-wrapper')}\n style={\n {\n '--wds-list-item-media-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp\n {...props}\n className={clsx(className, 'wds-list-item-media-image')}\n alt={alt}\n role={alt ? undefined : 'presentation'}\n />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;AAyBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,gBAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,GAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,IAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,GAAA,CAACI,OAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,IAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemContext.js","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => void;\n setMediaSize: (size: ListItemMediaSize | undefined) => void;\n ids: {\n title: string;\n subtitle?: string;\n valueTitle?: string;\n valueSubtitle?: string;\n additionalInfo?: string;\n control: string;\n prompt?: string;\n };\n props: Pick<ListItemProps, 'disabled' | 'inverted' | 'disabledPromptMessage'>;\n mediaSize?: ListItemMediaSize;\n isPartiallyInteractive?: boolean;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;;;MAwBaA,eAAe,gBAAGC,mBAAa,CAC1C,IAAsC;;;;"}
|
|
1
|
+
{"version":3,"file":"ListItemContext.js","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize = 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => void;\n setMediaSize: (size: ListItemMediaSize | undefined) => void;\n ids: {\n title: string;\n subtitle?: string;\n valueTitle?: string;\n valueSubtitle?: string;\n additionalInfo?: string;\n control: string;\n prompt?: string;\n };\n props: Pick<ListItemProps, 'disabled' | 'inverted' | 'disabledPromptMessage'>;\n mediaSize?: ListItemMediaSize;\n isPartiallyInteractive?: boolean;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;;;MAwBaA,eAAe,gBAAGC,mBAAa,CAC1C,IAAsC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemContext.mjs","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => void;\n setMediaSize: (size: ListItemMediaSize | undefined) => void;\n ids: {\n title: string;\n subtitle?: string;\n valueTitle?: string;\n valueSubtitle?: string;\n additionalInfo?: string;\n control: string;\n prompt?: string;\n };\n props: Pick<ListItemProps, 'disabled' | 'inverted' | 'disabledPromptMessage'>;\n mediaSize?: ListItemMediaSize;\n isPartiallyInteractive?: boolean;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;MAwBaA,eAAe,gBAAGC,aAAa,CAC1C,IAAsC;;;;"}
|
|
1
|
+
{"version":3,"file":"ListItemContext.mjs","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize = 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => void;\n setMediaSize: (size: ListItemMediaSize | undefined) => void;\n ids: {\n title: string;\n subtitle?: string;\n valueTitle?: string;\n valueSubtitle?: string;\n additionalInfo?: string;\n control: string;\n prompt?: string;\n };\n props: Pick<ListItemProps, 'disabled' | 'inverted' | 'disabledPromptMessage'>;\n mediaSize?: ListItemMediaSize;\n isPartiallyInteractive?: boolean;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;MAwBaA,eAAe,gBAAGC,aAAa,CAC1C,IAAsC;;;;"}
|
package/build/main.css
CHANGED
|
@@ -2644,10 +2644,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
2644
2644
|
}
|
|
2645
2645
|
.wds-list-item-gridWrapper {
|
|
2646
2646
|
display: grid;
|
|
2647
|
-
grid-gap: 4px
|
|
2648
|
-
grid-gap: var(--size-4) var(--size-
|
|
2649
|
-
gap: 4px
|
|
2650
|
-
gap: var(--size-4) var(--size-
|
|
2647
|
+
grid-gap: 4px 12px;
|
|
2648
|
+
grid-gap: var(--size-4) var(--size-12);
|
|
2649
|
+
gap: 4px 12px;
|
|
2650
|
+
gap: var(--size-4) var(--size-12);
|
|
2651
2651
|
}
|
|
2652
2652
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
|
|
2653
2653
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
|
|
@@ -3371,6 +3371,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3371
3371
|
.wds-list-item.disabled label {
|
|
3372
3372
|
cursor: not-allowed;
|
|
3373
3373
|
}
|
|
3374
|
+
.wds-list-item.disabled .wds-list-item-media,
|
|
3375
|
+
.wds-list-item.disabled .np-avatar-view-content,
|
|
3374
3376
|
.wds-list-item.disabled .wds-list-item-title,
|
|
3375
3377
|
.wds-list-item.disabled .wds-list-item-title-value,
|
|
3376
3378
|
.wds-list-item.disabled .wds-list-item-subtitle,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
.wds-list-item-gridWrapper {
|
|
2
2
|
display: grid;
|
|
3
|
-
grid-gap: 4px
|
|
4
|
-
grid-gap: var(--size-4) var(--size-
|
|
5
|
-
gap: 4px
|
|
6
|
-
gap: var(--size-4) var(--size-
|
|
3
|
+
grid-gap: 4px 12px;
|
|
4
|
+
grid-gap: var(--size-4) var(--size-12);
|
|
5
|
+
gap: 4px 12px;
|
|
6
|
+
gap: var(--size-4) var(--size-12);
|
|
7
7
|
}
|
|
8
8
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
|
|
9
9
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
|
|
@@ -727,6 +727,8 @@
|
|
|
727
727
|
.wds-list-item.disabled label {
|
|
728
728
|
cursor: not-allowed;
|
|
729
729
|
}
|
|
730
|
+
.wds-list-item.disabled .wds-list-item-media,
|
|
731
|
+
.wds-list-item.disabled .np-avatar-view-content,
|
|
730
732
|
.wds-list-item.disabled .wds-list-item-title,
|
|
731
733
|
.wds-list-item.disabled .wds-list-item-title-value,
|
|
732
734
|
.wds-list-item.disabled .wds-list-item-subtitle,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
.wds-list-item-gridWrapper {
|
|
2
2
|
display: grid;
|
|
3
|
-
grid-gap: 4px
|
|
4
|
-
grid-gap: var(--size-4) var(--size-
|
|
5
|
-
gap: 4px
|
|
6
|
-
gap: var(--size-4) var(--size-
|
|
3
|
+
grid-gap: 4px 12px;
|
|
4
|
+
grid-gap: var(--size-4) var(--size-12);
|
|
5
|
+
gap: 4px 12px;
|
|
6
|
+
gap: var(--size-4) var(--size-12);
|
|
7
7
|
}
|
|
8
8
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
|
|
9
9
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
|
package/build/styles/main.css
CHANGED
|
@@ -2644,10 +2644,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
2644
2644
|
}
|
|
2645
2645
|
.wds-list-item-gridWrapper {
|
|
2646
2646
|
display: grid;
|
|
2647
|
-
grid-gap: 4px
|
|
2648
|
-
grid-gap: var(--size-4) var(--size-
|
|
2649
|
-
gap: 4px
|
|
2650
|
-
gap: var(--size-4) var(--size-
|
|
2647
|
+
grid-gap: 4px 12px;
|
|
2648
|
+
grid-gap: var(--size-4) var(--size-12);
|
|
2649
|
+
gap: 4px 12px;
|
|
2650
|
+
gap: var(--size-4) var(--size-12);
|
|
2651
2651
|
}
|
|
2652
2652
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
|
|
2653
2653
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
|
|
@@ -3371,6 +3371,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3371
3371
|
.wds-list-item.disabled label {
|
|
3372
3372
|
cursor: not-allowed;
|
|
3373
3373
|
}
|
|
3374
|
+
.wds-list-item.disabled .wds-list-item-media,
|
|
3375
|
+
.wds-list-item.disabled .np-avatar-view-content,
|
|
3374
3376
|
.wds-list-item.disabled .wds-list-item-title,
|
|
3375
3377
|
.wds-list-item.disabled .wds-list-item-title-value,
|
|
3376
3378
|
.wds-list-item.disabled .wds-list-item-subtitle,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { type AvatarLayoutProps } from '../../avatarLayout';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import { ListItemMediaSize } from '../ListItemContext';
|
|
3
|
+
export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {
|
|
4
|
+
size?: ListItemMediaSize;
|
|
4
5
|
};
|
|
5
|
-
export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
|
|
6
6
|
/**
|
|
7
7
|
* This component allows for rendering 2 avatars. It's a thin wrapper around the
|
|
8
8
|
* [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only
|
|
@@ -14,5 +14,4 @@ export declare const AvatarLayout: {
|
|
|
14
14
|
({ className, size, ...props }: ListItemAvatarLayoutProps): import("react").JSX.Element;
|
|
15
15
|
displayName: string;
|
|
16
16
|
};
|
|
17
|
-
export {};
|
|
18
17
|
//# sourceMappingURL=ListItemAvatarLayout.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarLayout.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"names":[],"mappings":"AAAA,OAAyB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItemAvatarLayout.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"names":[],"mappings":"AAAA,OAAyB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAG9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG;IACxF,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;oCAAwC,yBAAyB;;CAUzF,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type AvatarViewProps } from '../../avatarView';
|
|
2
|
+
import { ListItemMediaSize } from '../ListItemContext';
|
|
2
3
|
export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {
|
|
3
|
-
size?:
|
|
4
|
+
size?: ListItemMediaSize;
|
|
4
5
|
};
|
|
5
6
|
/**
|
|
6
7
|
* This component renders a single avatar. It's a thin wrapper around the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarView.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"names":[],"mappings":"AACA,OAAuB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItemAvatarView.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"names":[],"mappings":"AACA,OAAuB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG;IACpF,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;oCAAwC,uBAAuB;;CAUrF,CAAC"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { type ImageProps } from '../../image';
|
|
2
|
+
import { ListItemMediaSize } from '../ListItemContext';
|
|
2
3
|
export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {
|
|
3
4
|
/**
|
|
4
5
|
* The size of square container for the image, matching available avatar sizes.
|
|
5
6
|
*/
|
|
6
|
-
size?:
|
|
7
|
+
size?: ListItemMediaSize;
|
|
7
8
|
/**
|
|
8
9
|
* When unset, it will force `role="presentation"` on the image. Otherwise, the image will use its implicit img role.
|
|
9
10
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Image/ListItemImage.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItemImage.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Image/ListItemImage.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAGzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG;IAChG;;OAEG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK;yCAAkD,kBAAkB;;CAoBrF,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';
|
|
2
|
-
export type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;
|
|
2
|
+
export type ListItemMediaSize = 24 | 32 | 40 | 48 | 56 | 72;
|
|
3
3
|
export type ListItemContextData = {
|
|
4
4
|
setControlType: (type: ListItemTypes) => void;
|
|
5
5
|
setControlProps: (props: ListItemControlProps) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemContext.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItemContext.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE5D,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,GAAG,uBAAuB,CAAC,CAAC;IAC9E,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,eAAe,8CAE3B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.109.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -84,9 +84,9 @@
|
|
|
84
84
|
"storybook-addon-tag-badges": "^2.0.2",
|
|
85
85
|
"storybook-addon-test-codegen": "^2.0.1",
|
|
86
86
|
"@transferwise/less-config": "3.1.2",
|
|
87
|
+
"@wise/components-theming": "1.6.4",
|
|
87
88
|
"@wise/wds-configs": "0.0.0",
|
|
88
|
-
"@transferwise/neptune-css": "14.24.6"
|
|
89
|
-
"@wise/components-theming": "1.6.4"
|
|
89
|
+
"@transferwise/neptune-css": "14.24.6"
|
|
90
90
|
},
|
|
91
91
|
"peerDependencies": {
|
|
92
92
|
"@transferwise/icons": "^3.22.4",
|
|
@@ -37,7 +37,7 @@ export default {
|
|
|
37
37
|
},
|
|
38
38
|
size: {
|
|
39
39
|
control: 'select',
|
|
40
|
-
options: [32, 40, 48, 56, 72],
|
|
40
|
+
options: [24, 32, 40, 48, 56, 72],
|
|
41
41
|
description: 'Size of the avatar layout',
|
|
42
42
|
},
|
|
43
43
|
},
|
|
@@ -102,7 +102,7 @@ export const Sizes: Story = {
|
|
|
102
102
|
},
|
|
103
103
|
argTypes: disableControls()(['size', 'orientation']),
|
|
104
104
|
render: (args) => {
|
|
105
|
-
const sizes = [32, 40, 48, 56, 72] as const;
|
|
105
|
+
const sizes = [24, 32, 40, 48, 56, 72] as const;
|
|
106
106
|
const orientations = ['horizontal', 'diagonal'] as const;
|
|
107
107
|
|
|
108
108
|
return (
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { useListItemMedia } from '../useListItemMedia';
|
|
4
|
+
import { ListItemMediaSize } from '../ListItemContext';
|
|
4
5
|
|
|
5
|
-
type
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {
|
|
7
|
+
size?: ListItemMediaSize;
|
|
8
|
+
};
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
11
|
* This component allows for rendering 2 avatars. It's a thin wrapper around the
|
|
@@ -13,7 +13,7 @@ import type { ListItemAvatarViewProps } from './ListItemAvatarView';
|
|
|
13
13
|
|
|
14
14
|
const hideControls = disableControls(['badge', 'children']);
|
|
15
15
|
|
|
16
|
-
const SIZES = [32, 40, 48, 56, 72] as const;
|
|
16
|
+
const SIZES = [24, 32, 40, 48, 56, 72] as const;
|
|
17
17
|
const BADGES = {
|
|
18
18
|
'Country flag badge': { flagCode: 'GBP' },
|
|
19
19
|
'StatusIcon badge': { status: 'warning' },
|
|
@@ -209,7 +209,7 @@ export const ContentTypes: Story = {
|
|
|
209
209
|
};
|
|
210
210
|
|
|
211
211
|
/**
|
|
212
|
-
* AvatarView supports
|
|
212
|
+
* AvatarView supports 6 sizes to fit different list item contexts: `24`, `32`, `40`, `48`, `56`, `72`. If decorated with a Badge, those will be sized accordingly as well. <br />
|
|
213
213
|
* Please refer to the [design documentation](https://wise.design/components/list-item#avatar:~:text=of%20the%20avatar.-,Avatar%20sizes,-List%20item%20supports) for details on when to use which one.
|
|
214
214
|
*/
|
|
215
215
|
export const Sizes: Story = {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import AvatarViewComp, { type AvatarViewProps } from '../../avatarView';
|
|
3
3
|
import { useListItemMedia } from '../useListItemMedia';
|
|
4
|
+
import { ListItemMediaSize } from '../ListItemContext';
|
|
4
5
|
|
|
5
6
|
export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {
|
|
6
|
-
size?:
|
|
7
|
+
size?: ListItemMediaSize;
|
|
7
8
|
};
|
|
8
9
|
|
|
9
10
|
/**
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import ImageComp, { type ImageProps } from '../../image';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { useListItemMedia } from '../useListItemMedia';
|
|
4
|
+
import { ListItemMediaSize } from '../ListItemContext';
|
|
4
5
|
|
|
5
6
|
export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {
|
|
6
7
|
/**
|
|
7
8
|
* The size of square container for the image, matching available avatar sizes.
|
|
8
9
|
*/
|
|
9
|
-
size?:
|
|
10
|
+
size?: ListItemMediaSize;
|
|
10
11
|
/**
|
|
11
12
|
* When unset, it will force `role="presentation"` on the image. Otherwise, the image will use its implicit img role.
|
|
12
13
|
*/
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
.wds-list-item-gridWrapper {
|
|
2
2
|
display: grid;
|
|
3
|
-
grid-gap: 4px
|
|
4
|
-
grid-gap: var(--size-4) var(--size-
|
|
5
|
-
gap: 4px
|
|
6
|
-
gap: var(--size-4) var(--size-
|
|
3
|
+
grid-gap: 4px 12px;
|
|
4
|
+
grid-gap: var(--size-4) var(--size-12);
|
|
5
|
+
gap: 4px 12px;
|
|
6
|
+
gap: var(--size-4) var(--size-12);
|
|
7
7
|
}
|
|
8
8
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
|
|
9
9
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
|
|
@@ -727,6 +727,8 @@
|
|
|
727
727
|
.wds-list-item.disabled label {
|
|
728
728
|
cursor: not-allowed;
|
|
729
729
|
}
|
|
730
|
+
.wds-list-item.disabled .wds-list-item-media,
|
|
731
|
+
.wds-list-item.disabled .np-avatar-view-content,
|
|
730
732
|
.wds-list-item.disabled .wds-list-item-title,
|
|
731
733
|
.wds-list-item.disabled .wds-list-item-title-value,
|
|
732
734
|
.wds-list-item.disabled .wds-list-item-subtitle,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
.wds-list-item-gridWrapper {
|
|
2
2
|
display: grid;
|
|
3
|
-
grid-gap: 4px
|
|
4
|
-
grid-gap: var(--size-4) var(--size-
|
|
5
|
-
gap: 4px
|
|
6
|
-
gap: var(--size-4) var(--size-
|
|
3
|
+
grid-gap: 4px 12px;
|
|
4
|
+
grid-gap: var(--size-4) var(--size-12);
|
|
5
|
+
gap: 4px 12px;
|
|
6
|
+
gap: var(--size-4) var(--size-12);
|
|
7
7
|
}
|
|
8
8
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
|
|
9
9
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createContext } from 'react';
|
|
2
2
|
import type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';
|
|
3
3
|
|
|
4
|
-
export type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;
|
|
4
|
+
export type ListItemMediaSize = 24 | 32 | 40 | 48 | 56 | 72;
|
|
5
5
|
|
|
6
6
|
export type ListItemContextData = {
|
|
7
7
|
setControlType: (type: ListItemTypes) => void;
|
package/src/main.css
CHANGED
|
@@ -2644,10 +2644,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
2644
2644
|
}
|
|
2645
2645
|
.wds-list-item-gridWrapper {
|
|
2646
2646
|
display: grid;
|
|
2647
|
-
grid-gap: 4px
|
|
2648
|
-
grid-gap: var(--size-4) var(--size-
|
|
2649
|
-
gap: 4px
|
|
2650
|
-
gap: var(--size-4) var(--size-
|
|
2647
|
+
grid-gap: 4px 12px;
|
|
2648
|
+
grid-gap: var(--size-4) var(--size-12);
|
|
2649
|
+
gap: 4px 12px;
|
|
2650
|
+
gap: var(--size-4) var(--size-12);
|
|
2651
2651
|
}
|
|
2652
2652
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
|
|
2653
2653
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
|
|
@@ -3371,6 +3371,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3371
3371
|
.wds-list-item.disabled label {
|
|
3372
3372
|
cursor: not-allowed;
|
|
3373
3373
|
}
|
|
3374
|
+
.wds-list-item.disabled .wds-list-item-media,
|
|
3375
|
+
.wds-list-item.disabled .np-avatar-view-content,
|
|
3374
3376
|
.wds-list-item.disabled .wds-list-item-title,
|
|
3375
3377
|
.wds-list-item.disabled .wds-list-item-title-value,
|
|
3376
3378
|
.wds-list-item.disabled .wds-list-item-subtitle,
|