npm - @transferwise/components - Versions diffs - 46.95.0 → 46.95.2 - Mend

@transferwise/components 46.95.0 → 46.95.2

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.

Files changed (25) hide show

package/build/listItem/ListItem.js +1 -1
package/build/listItem/ListItem.js.map +1 -1
package/build/listItem/ListItem.mjs +1 -1
package/build/listItem/ListItem.mjs.map +1 -1
package/build/select/option/Option.js +3 -1
package/build/select/option/Option.js.map +1 -1
package/build/select/option/Option.mjs +3 -1
package/build/select/option/Option.mjs.map +1 -1
package/build/summary/Summary.js +2 -2
package/build/summary/Summary.js.map +1 -1
package/build/summary/Summary.mjs +2 -2
package/build/summary/Summary.mjs.map +1 -1
package/build/types/select/option/Option.d.ts +2 -1
package/build/types/select/option/Option.d.ts.map +1 -1
package/package.json +4 -4
package/src/listItem/ListItem.tests.story.tsx +52 -0
package/src/listItem/ListItem.tsx +1 -1
package/src/select/option/Option.spec.tsx +51 -0
package/src/select/option/Option.tsx +3 -1
package/src/summary/Summary.tests.story.tsx +55 -0
package/src/summary/Summary.tsx +2 -2
package/src/upload/Upload.spec.tsx +3 -1
package/src/upload/steps/processingStep/processingStep.spec.tsx +1 -1
package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx +4 -4
package/src/select/option/Option.spec.js +0 -43

package/build/listItem/ListItem.js CHANGED Viewed

@@ -33,7 +33,7 @@ const ListItem = ({
         children: title
       }), value && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
         type: "body-large",
-        className: "text-primary m-b-0",
+        className: "text-primary text-overflow-wrap m-b-0",
         children: value
       })]
     }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {

package/build/listItem/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type ListItemProps = {\n title: ReactNode;\n value: ReactNode;\n media?: ReactNode;\n action?: ReactNode;\n className?: string;\n isContainerAligned?: boolean;\n as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n media,\n action,\n className,\n title,\n value,\n isContainerAligned,\n as = 'li',\n ...rest\n}) => {\n const Element = as;\n\n return (\n <Element\n className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n 'p-x-2': !isContainerAligned,\n })}\n {...rest}\n >\n {media}\n\n <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n {title}\n </Body>\n {value && (\n <Body type=\"body-large\" className=\"text-primary m-b-0\">\n {value}\n </Body>\n )}\n </div>\n\n {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n </Element>\n );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;;;AAeMA,MAAAA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,~~oBAAoB~~;AAAAS,QAAAA,QAAA,~~EACnDP~~,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd;;;;"}
1	+ {"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type ListItemProps = {\n title: ReactNode;\n value: ReactNode;\n media?: ReactNode;\n action?: ReactNode;\n className?: string;\n isContainerAligned?: boolean;\n as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n media,\n action,\n className,\n title,\n value,\n isContainerAligned,\n as = 'li',\n ...rest\n}) => {\n const Element = as;\n\n return (\n <Element\n className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n 'p-x-2': !isContainerAligned,\n })}\n {...rest}\n >\n {media}\n\n <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n {title}\n </Body>\n {value && (\n <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n {value}\n </Body>\n )}\n </div>\n\n {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n </Element>\n );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;;;AAeMA,MAAAA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd;;;;"}

package/build/listItem/ListItem.mjs CHANGED Viewed

@@ -29,7 +29,7 @@ const ListItem = ({
         children: title
       }), value && /*#__PURE__*/jsx(Body, {
         type: "body-large",
-        className: "text-primary m-b-0",
+        className: "text-primary text-overflow-wrap m-b-0",
         children: value
       })]
     }), action ? /*#__PURE__*/jsx("div", {

package/build/listItem/ListItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type ListItemProps = {\n title: ReactNode;\n value: ReactNode;\n media?: ReactNode;\n action?: ReactNode;\n className?: string;\n isContainerAligned?: boolean;\n as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n media,\n action,\n className,\n title,\n value,\n isContainerAligned,\n as = 'li',\n ...rest\n}) => {\n const Element = as;\n\n return (\n <Element\n className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n 'p-x-2': !isContainerAligned,\n })}\n {...rest}\n >\n {media}\n\n <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n {title}\n </Body>\n {value && (\n <Body type=\"body-large\" className=\"text-primary m-b-0\">\n {value}\n </Body>\n )}\n </div>\n\n {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n </Element>\n );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAeMA,MAAAA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,~~oBAAoB~~;AAAAS,QAAAA,QAAA,~~EACnDP~~,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd;;;;"}
1	+ {"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type ListItemProps = {\n title: ReactNode;\n value: ReactNode;\n media?: ReactNode;\n action?: ReactNode;\n className?: string;\n isContainerAligned?: boolean;\n as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n media,\n action,\n className,\n title,\n value,\n isContainerAligned,\n as = 'li',\n ...rest\n}) => {\n const Element = as;\n\n return (\n <Element\n className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n 'p-x-2': !isContainerAligned,\n })}\n {...rest}\n >\n {media}\n\n <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n {title}\n </Body>\n {value && (\n <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n {value}\n </Body>\n )}\n </div>\n\n {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n </Element>\n );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAeMA,MAAAA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd;;;;"}

package/build/select/option/Option.js CHANGED Viewed

@@ -36,7 +36,8 @@ function Option({
   note = '',
   secondary = '',
   icon,
-  selected = false
+  selected = false,
+  testId
 }) {
   const iconElement = icon ? /*#__PURE__*/React.cloneElement(icon, {
     size: 24,
@@ -61,6 +62,7 @@ function Option({
   });
   return iconElement ? /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "d-flex np-option-content",
+    "data-testid": testId,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: `d-flex flex-column${selected ? ' justify-content-center' : ''}`,
       children: iconElement

package/build/select/option/Option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Option.js","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n label: ReactNode;\n value: T;\n currency?: string;\n note?: ReactNode;\n secondary?: ReactNode;\n icon?: ReactNode;\n /** @deprecated */\n classNames?: Record<string, string>;\n selected?: boolean;\n};\n\nfunction Option<T>({\n label,\n currency = '',\n note = '',\n secondary = '',\n icon,\n selected = false,\n}: Props<T>) {\n const iconElement = icon\n ? cloneElement(icon as ReactElement<IdIconProps>, {\n size: 24,\n className: 'tw-icon',\n })\n : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n const titleAndNoteElement = (\n <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n {label}\n {note && (\n <Body as=\"span\" className=\"m-l-1\">\n {note}\n </Body>\n )}\n </Body>\n );\n\n const secondaryElement = secondary && (\n <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n );\n\n return iconElement ? (\n <div className=\"d-flex np-option-content\">\n <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n {iconElement}\n </div>\n <div className=\"d-flex flex-column justify-content-center\">\n {titleAndNoteElement}\n {secondaryElement}\n </div>\n </div>\n ) : (\n <>\n {iconElement}\n {titleAndNoteElement}\n {secondaryElement}\n </>\n );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAoBA~~,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,~~KAAA~~;~~AACF~~,CAAA,EAAA;AACT,EAAA,MAAMC,WAAW,~~GAAGF~~,IAAI,~~gBACpBG~~,kBAAY,~~CAACH~~,IAAiC,EAAE;~~AAC9CI~~,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE,SAAA;GACZ,CAAC,~~GACFR~~,QAAQ,~~iBAAIS~~,cAAA,CAACC,QAAI,EAAA;AAACC,IAAAA,IAAI,~~EAAEX~~,QAAQ,~~CAACY~~,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE,EAAA;AAAG,GAAA,CAAG,CAAA;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,eAAA,CAACC,YAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,~~EAAEJ~~,QAAQ,GAAG,eAAe,~~GAAGiB~~,SAAU;AAAAC,IAAAA,QAAA,~~GAC5FvB~~,KAAK,EACLE,IAAI,~~iBACHQ~~,cAAA,CAACO,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,~~EAC9BrB~~,IAAAA;AAAI,KACD,CACP,CAAA;AAAA,GACG,CACP,CAAA;AAED,EAAA,~~MAAMsB~~,gBAAgB,~~GAAGrB~~,SAAS,~~iBAChCO~~,cAAA,CAACO,YAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,SAAI,~~CAACpB~~,QAAQ,IAAI,eAAe,CAAE;~~AAAAkB~~,IAAAA,QAAA,~~EAAEpB~~,SAAAA;AAAS,GAAO,CACtE,CAAA;EAED,~~OAAOG~~,WAAW,gBAChBU,eAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;~~AAAAc~~,IAAAA,QAAA,~~gBACvCb~~,cAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,~~CAAqBJ~~,kBAAAA,EAAAA,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAG,CAAA;~~AAAAkB~~,MAAAA,QAAA,EAC9EjB,WAAAA;KACE,CACL,eAAAU,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,KACd,CACP,CAAA;AAAA,GAAK,CAAC,gBAENR,eAAA,CAAAU,mBAAA,EAAA;AAAAH,IAAAA,QAAA,EACGjB,CAAAA,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,GACnB,CACD,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"Option.js","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n label: ReactNode;\n value: T;\n currency?: string;\n note?: ReactNode;\n secondary?: ReactNode;\n icon?: ReactNode;\n /** @deprecated */\n classNames?: Record<string, string>;\n selected?: boolean;\n testId?: string;\n};\n\nfunction Option<T>({\n label,\n currency = '',\n note = '',\n secondary = '',\n icon,\n selected = false,\n testId,\n}: Props<T>) {\n const iconElement = icon\n ? cloneElement(icon as ReactElement<IdIconProps>, {\n size: 24,\n className: 'tw-icon',\n })\n : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n const titleAndNoteElement = (\n <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n {label}\n {note && (\n <Body as=\"span\" className=\"m-l-1\">\n {note}\n </Body>\n )}\n </Body>\n );\n\n const secondaryElement = secondary && (\n <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n );\n\n return iconElement ? (\n <div className=\"d-flex np-option-content\" data-testid={testId}>\n <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n {iconElement}\n </div>\n <div className=\"d-flex flex-column justify-content-center\">\n {titleAndNoteElement}\n {secondaryElement}\n </div>\n </div>\n ) : (\n <>\n {iconElement}\n {titleAndNoteElement}\n {secondaryElement}\n </>\n );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","testId","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,MAAAA;AACS,CAAA,EAAA;AACT,EAAA,MAAMC,WAAW,GAAGH,IAAI,gBACpBI,kBAAY,CAACJ,IAAiC,EAAE;AAC9CK,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE,SAAA;GACZ,CAAC,GACFT,QAAQ,iBAAIU,cAAA,CAACC,QAAI,EAAA;AAACC,IAAAA,IAAI,EAAEZ,QAAQ,CAACa,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE,EAAA;AAAG,GAAA,CAAG,CAAA;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,eAAA,CAACC,YAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,EAAEL,QAAQ,GAAG,eAAe,GAAGkB,SAAU;AAAAC,IAAAA,QAAA,GAC5FxB,KAAK,EACLE,IAAI,iBACHS,cAAA,CAACO,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,EAC9BtB,IAAAA;AAAI,KACD,CACP,CAAA;AAAA,GACG,CACP,CAAA;AAED,EAAA,MAAMuB,gBAAgB,GAAGtB,SAAS,iBAChCQ,cAAA,CAACO,YAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,SAAI,CAACrB,QAAQ,IAAI,eAAe,CAAE;AAAAmB,IAAAA,QAAA,EAAErB,SAAAA;AAAS,GAAO,CACtE,CAAA;EAED,OAAOI,WAAW,gBAChBU,eAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;AAAC,IAAA,aAAA,EAAaJ,MAAO;AAAAkB,IAAAA,QAAA,gBAC5Db,cAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,CAAqBL,kBAAAA,EAAAA,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAG,CAAA;AAAAmB,MAAAA,QAAA,EAC9EjB,WAAAA;KACE,CACL,eAAAU,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,KACd,CACP,CAAA;AAAA,GAAK,CAAC,gBAENR,eAAA,CAAAU,mBAAA,EAAA;AAAAH,IAAAA,QAAA,EACGjB,CAAAA,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,GACnB,CACD,CAAA;AACH;;;;"}

package/build/select/option/Option.mjs CHANGED Viewed

@@ -32,7 +32,8 @@ function Option({
   note = '',
   secondary = '',
   icon,
-  selected = false
+  selected = false,
+  testId
 }) {
   const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
     size: 24,
@@ -57,6 +58,7 @@ function Option({
   });
   return iconElement ? /*#__PURE__*/jsxs("div", {
     className: "d-flex np-option-content",
+    "data-testid": testId,
     children: [/*#__PURE__*/jsx("div", {
       className: `d-flex flex-column${selected ? ' justify-content-center' : ''}`,
       children: iconElement

package/build/select/option/Option.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Option.mjs","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n label: ReactNode;\n value: T;\n currency?: string;\n note?: ReactNode;\n secondary?: ReactNode;\n icon?: ReactNode;\n /** @deprecated */\n classNames?: Record<string, string>;\n selected?: boolean;\n};\n\nfunction Option<T>({\n label,\n currency = '',\n note = '',\n secondary = '',\n icon,\n selected = false,\n}: Props<T>) {\n const iconElement = icon\n ? cloneElement(icon as ReactElement<IdIconProps>, {\n size: 24,\n className: 'tw-icon',\n })\n : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n const titleAndNoteElement = (\n <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n {label}\n {note && (\n <Body as=\"span\" className=\"m-l-1\">\n {note}\n </Body>\n )}\n </Body>\n );\n\n const secondaryElement = secondary && (\n <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n );\n\n return iconElement ? (\n <div className=\"d-flex np-option-content\">\n <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n {iconElement}\n </div>\n <div className=\"d-flex flex-column justify-content-center\">\n {titleAndNoteElement}\n {secondaryElement}\n </div>\n </div>\n ) : (\n <>\n {iconElement}\n {titleAndNoteElement}\n {secondaryElement}\n </>\n );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAoBA~~,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,~~KAAA~~;~~AACF~~,CAAA,EAAA;AACT,EAAA,MAAMC,WAAW,~~GAAGF~~,IAAI,~~gBACpBG~~,YAAY,~~CAACH~~,IAAiC,EAAE;~~AAC9CI~~,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE,SAAA;GACZ,CAAC,~~GACFR~~,QAAQ,~~iBAAIS~~,GAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,IAAI,~~EAAEX~~,QAAQ,~~CAACY~~,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE,EAAA;AAAG,GAAA,CAAG,CAAA;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,IAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,~~EAAEJ~~,QAAQ,GAAG,eAAe,~~GAAGiB~~,SAAU;AAAAC,IAAAA,QAAA,~~GAC5FvB~~,KAAK,EACLE,IAAI,~~iBACHQ~~,GAAA,CAACO,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,~~EAC9BrB~~,IAAAA;AAAI,KACD,CACP,CAAA;AAAA,GACG,CACP,CAAA;AAED,EAAA,~~MAAMsB~~,gBAAgB,~~GAAGrB~~,SAAS,~~iBAChCO~~,GAAA,CAACO,IAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,IAAI,~~CAACpB~~,QAAQ,IAAI,eAAe,CAAE;~~AAAAkB~~,IAAAA,QAAA,~~EAAEpB~~,SAAAA;AAAS,GAAO,CACtE,CAAA;EAED,~~OAAOG~~,WAAW,gBAChBU,IAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;~~AAAAc~~,IAAAA,QAAA,~~gBACvCb~~,GAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,~~CAAqBJ~~,kBAAAA,EAAAA,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAG,CAAA;~~AAAAkB~~,MAAAA,QAAA,EAC9EjB,WAAAA;KACE,CACL,eAAAU,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,KACd,CACP,CAAA;AAAA,GAAK,CAAC,gBAENR,IAAA,CAAAU,QAAA,EAAA;AAAAH,IAAAA,QAAA,EACGjB,CAAAA,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,GACnB,CACD,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"Option.mjs","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n label: ReactNode;\n value: T;\n currency?: string;\n note?: ReactNode;\n secondary?: ReactNode;\n icon?: ReactNode;\n /** @deprecated */\n classNames?: Record<string, string>;\n selected?: boolean;\n testId?: string;\n};\n\nfunction Option<T>({\n label,\n currency = '',\n note = '',\n secondary = '',\n icon,\n selected = false,\n testId,\n}: Props<T>) {\n const iconElement = icon\n ? cloneElement(icon as ReactElement<IdIconProps>, {\n size: 24,\n className: 'tw-icon',\n })\n : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n const titleAndNoteElement = (\n <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n {label}\n {note && (\n <Body as=\"span\" className=\"m-l-1\">\n {note}\n </Body>\n )}\n </Body>\n );\n\n const secondaryElement = secondary && (\n <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n );\n\n return iconElement ? (\n <div className=\"d-flex np-option-content\" data-testid={testId}>\n <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n {iconElement}\n </div>\n <div className=\"d-flex flex-column justify-content-center\">\n {titleAndNoteElement}\n {secondaryElement}\n </div>\n </div>\n ) : (\n <>\n {iconElement}\n {titleAndNoteElement}\n {secondaryElement}\n </>\n );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","testId","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,MAAAA;AACS,CAAA,EAAA;AACT,EAAA,MAAMC,WAAW,GAAGH,IAAI,gBACpBI,YAAY,CAACJ,IAAiC,EAAE;AAC9CK,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE,SAAA;GACZ,CAAC,GACFT,QAAQ,iBAAIU,GAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAEZ,QAAQ,CAACa,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE,EAAA;AAAG,GAAA,CAAG,CAAA;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,IAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,EAAEL,QAAQ,GAAG,eAAe,GAAGkB,SAAU;AAAAC,IAAAA,QAAA,GAC5FxB,KAAK,EACLE,IAAI,iBACHS,GAAA,CAACO,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,EAC9BtB,IAAAA;AAAI,KACD,CACP,CAAA;AAAA,GACG,CACP,CAAA;AAED,EAAA,MAAMuB,gBAAgB,GAAGtB,SAAS,iBAChCQ,GAAA,CAACO,IAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,IAAI,CAACrB,QAAQ,IAAI,eAAe,CAAE;AAAAmB,IAAAA,QAAA,EAAErB,SAAAA;AAAS,GAAO,CACtE,CAAA;EAED,OAAOI,WAAW,gBAChBU,IAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;AAAC,IAAA,aAAA,EAAaJ,MAAO;AAAAkB,IAAAA,QAAA,gBAC5Db,GAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,CAAqBL,kBAAAA,EAAAA,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAG,CAAA;AAAAmB,MAAAA,QAAA,EAC9EjB,WAAAA;KACE,CACL,eAAAU,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,KACd,CACP,CAAA;AAAA,GAAK,CAAC,gBAENR,IAAA,CAAAU,QAAA,EAAA;AAAAH,IAAAA,QAAA,EACGjB,CAAAA,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,GACnB,CACD,CAAA;AACH;;;;"}

package/build/summary/Summary.js CHANGED Viewed

@@ -97,7 +97,7 @@ const Summary = ({
           role: "heading",
           "aria-level": 6,
           type: typography.Typography.BODY_LARGE_BOLD,
-          className: "text-primary m-b-1",
+          className: "text-primary text-overflow-wrap m-b-1",
           children: title
         }), info && /*#__PURE__*/jsxRuntime.jsx(Info.default, {
           "aria-label": info['aria-label'],
@@ -111,7 +111,7 @@ const Summary = ({
       }), description && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
         as: "span",
         type: typography.Typography.BODY_DEFAULT,
-        className: `d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`,
+        className: `d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`,
         children: description
       }), action && /*#__PURE__*/jsxRuntime.jsx(Action.Action, {
         action: action,

package/build/summary/Summary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment /\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /\n Action displayed at the bottom of the Summary\n /\n action?: ActionOptions;\n /\n Decides which html element should wrap the Summary\n /\n as?: ElementType;\n /\n Extra classes applied to Summary\n /\n className?: string;\n /\n @deprecated please use description instead\n /\n content?: ReactNode;\n /\n Summary description\n /\n description?: ReactNode;\n /\n @deprecated please use info instead\n /\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /\n Infos displayed on help Icon click inside Popover or Modal\n /\n info?: Pick<InfoProps, 'aria-label' \| 'content' \| 'onClick' \| 'presentation' \| 'title'>;\n /\n @deprecated please use icon instead\n /\n illustration?: ReactNode;\n /\n Main Summary Icon\n /\n icon?: ReactNode;\n /\n Decides the badge applied to Icon\n /\n status?: StatusNotDone \| StatusDone \| StatusPending;\n /\n Summary title\n /\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/ @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && <Action action={action} className=\"np-summary__action\" />}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAyBA,MAAMA,UAAU,GAAG;AACjB,EAAA,CAACC,aAAM,CAACC,IAAI,GAAGC,qBAAe;EAC9B,CAACF,aAAM,CAACG,OAAO,GAAGC,eAAAA;CACnB,CAAA;AAED,MAAMC,YAAY,GAAG;AACnB,EAAA,CAACL,aAAM,CAACM,QAAQ,GAAG,eAAe;AAClC,EAAA,CAACN,aAAM,CAACC,IAAI,GAAG,YAAY;EAC3B,CAACD,aAAM,CAACG,OAAO,GAAG,eAAA;CACnB,CAAA;AAED,MAAMI,aAAa,GAAG;AACpB,EAAA,CAACP,aAAM,CAACC,IAAI,GAAGO,mBAAS,CAACC,QAAQ;AACjC,EAAA,CAACT,aAAM,CAACG,OAAO,GAAGK,mBAAS,CAACL,OAAAA;CAC7B,CAAA;AAoDKO,MAAAA,OAAO,GAAGA,CAAC;EACfC,MAAM;EACNC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,SAAS;AACTC,EAAAA,OAAO,GAAG,IAAI;AACdC,EAAAA,WAAW,GAAGD,OAAO;EACrBE,IAAI;EACJC,IAAI;AACJC,EAAAA,YAAY,GAAG,IAAI;AACnBC,EAAAA,IAAI,GAAGH,IAAI;EACXI,MAAM;AACNC,EAAAA,KAAAA;AAAK,CACC,KAAI;AACV,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EAEtB,IAAIC,KAAK,GAAGN,YAAY,CAAA;AACxB,EAAA,IAAID,IAAI,EAAE;AACR;AACA,IAAA,MAAMQ,QAAQ,GAAGR,IAAI,EAAES,KAAK,EAAEC,IAAc,CAAA;IAE5CH,KAAK,GACHC,QAAQ,KAAK,EAAE;AAAA;AACX;IACAG,kBAAY,CAACX,IAAI,EAAE;AAAEU,MAAAA,IAAI,EAAE,EAAA;KAAI,CAAC,GAChCV,IAAI,CAAA;AACZ,GAAA;AACA;AACA,EAAA,MAAMY,KAAK,GAAGT,MAAM,IAAItB,UAAU,CAACsB,MAAM,CAAC,CAAA;EAE1C,oBACEU,eAAA,CAAClB,OAAO,EAAA;AACNC,IAAAA,SAAS,EAAEkB,SAAI,CAAC,qCAAqC,EAAElB,SAAS,CAAA;AAChE;AAAA;AACA,IAAA,YAAA,EAAYO,MAAM,IAAIE,IAAI,CAACU,aAAa,CAACC,wBAAQ,CAAC7B,YAAY,CAACgB,MAAM,CAAC,CAAC,CAAE;IAAAc,QAAA,EAAA,CAExEjB,IAAI,iBACHa,eAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAC,kBAAkB;AAAAqB,MAAAA,QAAA,EAC9BV,CAAAA,KAAK,EACLK,KAAK,iBACJM,cAAA,CAAA,KAAA,EAAA;QAAAD,QAAA,eAEEC,cAAA,CAACC,kBAAU,EAAA;UAACT,IAAI,EAAEU,SAAI,CAACC,KAAM;UAACC,SAAS,EAAEjC,aAAa,CAACc,MAAM,CAAA;SAC/D,CAAA;AAAA,OAAK,CACN,CAAA;KACE,CACN,eACDU,eAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAE,CAAoBI,iBAAAA,EAAAA,IAAI,GAAG,OAAO,GAAG,EAAE,CAAG,CAAA;AAAAiB,MAAAA,QAAA,gBACxDJ,eAAA,CAAA,KAAA,EAAA;AAAKjB,QAAAA,SAAS,EAAC,0BAA0B;QAAAqB,QAAA,EAAA,cACvCC,cAAA,CAACK,YAAI,EAAA;AACH7B,UAAAA,EAAE,EAAC,MAAM;AACT8B,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAY,CAAE;UACdC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AACjC/B,UAAAA,SAAS,EAAC,~~oBAAoB~~;AAAAqB,UAAAA,QAAA,~~EAE7Bb~~,KAAAA;AAAK,SACF,CACN,EAACF,IAAI,iBACHgB,cAAA,CAACU,YAAI,EAAA;UACH,YAAY1B,EAAAA,IAAI,CAAC,YAAY,CAAE;AAC/BN,UAAAA,SAAS,EAAC,iBAAiB;UAC3BC,OAAO,EAAEK,IAAI,CAACL,OAAQ;UACtBgC,YAAY,EAAE3B,IAAI,CAAC2B,YAAa;UAChCnB,IAAI,EAAEU,SAAI,CAACU,KAAM;UACjB1B,KAAK,EAAEF,IAAI,CAACE,KAAM;UAClB2B,OAAO,EAAE7B,IAAI,CAAC6B,OAAAA;AAAQ,SACtB,CACH,CAAA;AAAA,OACE,CAEL,EAACjC,WAAW,iBACVoB,cAAA,CAACK,YAAI,EAAA;AACH7B,QAAAA,EAAE,EAAC,MAAM;QACT+B,IAAI,EAAEC,qBAAU,CAACM,YAAa;AAC9BpC,QAAAA,SAAS,EAAE,~~CAAWI~~,~~QAAAA~~,EAAAA,IAAI,GAAG,yBAAyB,GAAG,8BAA8B,CAAG,CAAA;AAAAiB,QAAAA,QAAA,~~EAEzFnB~~,WAAAA;AAAW,OACR,CACP,EACAL,MAAM,iBAAIyB,cAAA,CAACe,aAAM,EAAA;AAACxC,QAAAA,MAAM,EAAEA,MAAO;AAACG,QAAAA,SAAS,EAAC,oBAAA;AAAoB,QAAG,CAAA;AAAA,KACjE,CACL,EAACM,IAAI,iBACHgB,cAAA,CAACU,YAAI,EAAA;MACH,YAAY1B,EAAAA,IAAI,CAAC,YAAY,CAAE;AAC/BN,MAAAA,SAAS,EAAC,+CAA+C;MACzDC,OAAO,EAAEK,IAAI,CAACL,OAAQ;MACtBgC,YAAY,EAAE3B,IAAI,CAAC2B,YAAa;MAChCnB,IAAI,EAAEU,SAAI,CAACU,KAAM;MACjB1B,KAAK,EAAEF,IAAI,CAACE,KAAM;MAClB2B,OAAO,EAAE7B,IAAI,CAAC6B,OAAAA;AAAQ,KACtB,CACH,CAAA;AAAA,GACM,CAAC,CAAA;AAEd;;;;"}
1	+ {"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment /\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /\n Action displayed at the bottom of the Summary\n /\n action?: ActionOptions;\n /\n Decides which html element should wrap the Summary\n /\n as?: ElementType;\n /\n Extra classes applied to Summary\n /\n className?: string;\n /\n @deprecated please use description instead\n /\n content?: ReactNode;\n /\n Summary description\n /\n description?: ReactNode;\n /\n @deprecated please use info instead\n /\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /\n Infos displayed on help Icon click inside Popover or Modal\n /\n info?: Pick<InfoProps, 'aria-label' \| 'content' \| 'onClick' \| 'presentation' \| 'title'>;\n /\n @deprecated please use icon instead\n /\n illustration?: ReactNode;\n /\n Main Summary Icon\n /\n icon?: ReactNode;\n /\n Decides the badge applied to Icon\n /\n status?: StatusNotDone \| StatusDone \| StatusPending;\n /\n Summary title\n /\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/ @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && <Action action={action} className=\"np-summary__action\" />}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":"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"}

package/build/summary/Summary.mjs CHANGED Viewed

@@ -93,7 +93,7 @@ const Summary = ({
           role: "heading",
           "aria-level": 6,
           type: Typography.BODY_LARGE_BOLD,
-          className: "text-primary m-b-1",
+          className: "text-primary text-overflow-wrap m-b-1",
           children: title
         }), info && /*#__PURE__*/jsx(Info, {
           "aria-label": info['aria-label'],
@@ -107,7 +107,7 @@ const Summary = ({
       }), description && /*#__PURE__*/jsx(Body, {
         as: "span",
         type: Typography.BODY_DEFAULT,
-        className: `d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`,
+        className: `d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`,
         children: description
       }), action && /*#__PURE__*/jsx(Action, {
         action: action,

package/build/summary/Summary.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment /\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /\n Action displayed at the bottom of the Summary\n /\n action?: ActionOptions;\n /\n Decides which html element should wrap the Summary\n /\n as?: ElementType;\n /\n Extra classes applied to Summary\n /\n className?: string;\n /\n @deprecated please use description instead\n /\n content?: ReactNode;\n /\n Summary description\n /\n description?: ReactNode;\n /\n @deprecated please use info instead\n /\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /\n Infos displayed on help Icon click inside Popover or Modal\n /\n info?: Pick<InfoProps, 'aria-label' \| 'content' \| 'onClick' \| 'presentation' \| 'title'>;\n /\n @deprecated please use icon instead\n /\n illustration?: ReactNode;\n /\n Main Summary Icon\n /\n icon?: ReactNode;\n /\n Decides the badge applied to Icon\n /\n status?: StatusNotDone \| StatusDone \| StatusPending;\n /\n Summary title\n /\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/ @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && <Action action={action} className=\"np-summary__action\" />}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAyBA,MAAMA,UAAU,GAAG;AACjB,EAAA,CAACC,MAAM,CAACC,IAAI,GAAGC,eAAe;EAC9B,CAACF,MAAM,CAACG,OAAO,GAAGC,SAAAA;CACnB,CAAA;AAED,MAAMC,YAAY,GAAG;AACnB,EAAA,CAACL,MAAM,CAACM,QAAQ,GAAG,eAAe;AAClC,EAAA,CAACN,MAAM,CAACC,IAAI,GAAG,YAAY;EAC3B,CAACD,MAAM,CAACG,OAAO,GAAG,eAAA;CACnB,CAAA;AAED,MAAMI,aAAa,GAAG;AACpB,EAAA,CAACP,MAAM,CAACC,IAAI,GAAGO,SAAS,CAACC,QAAQ;AACjC,EAAA,CAACT,MAAM,CAACG,OAAO,GAAGK,SAAS,CAACL,OAAAA;CAC7B,CAAA;AAoDKO,MAAAA,OAAO,GAAGA,CAAC;EACfC,MAAM;EACNC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,SAAS;AACTC,EAAAA,OAAO,GAAG,IAAI;AACdC,EAAAA,WAAW,GAAGD,OAAO;EACrBE,IAAI;EACJC,IAAI;AACJC,EAAAA,YAAY,GAAG,IAAI;AACnBC,EAAAA,IAAI,GAAGH,IAAI;EACXI,MAAM;AACNC,EAAAA,KAAAA;AAAK,CACC,KAAI;AACV,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EAEtB,IAAIC,KAAK,GAAGN,YAAY,CAAA;AACxB,EAAA,IAAID,IAAI,EAAE;AACR;AACA,IAAA,MAAMQ,QAAQ,GAAGR,IAAI,EAAES,KAAK,EAAEC,IAAc,CAAA;IAE5CH,KAAK,GACHC,QAAQ,KAAK,EAAE;AAAA;AACX;IACAG,YAAY,CAACX,IAAI,EAAE;AAAEU,MAAAA,IAAI,EAAE,EAAA;KAAI,CAAC,GAChCV,IAAI,CAAA;AACZ,GAAA;AACA;AACA,EAAA,MAAMY,KAAK,GAAGT,MAAM,IAAItB,UAAU,CAACsB,MAAM,CAAC,CAAA;EAE1C,oBACEU,IAAA,CAAClB,OAAO,EAAA;AACNC,IAAAA,SAAS,EAAEkB,IAAI,CAAC,qCAAqC,EAAElB,SAAS,CAAA;AAChE;AAAA;AACA,IAAA,YAAA,EAAYO,MAAM,IAAIE,IAAI,CAACU,aAAa,CAACC,QAAQ,CAAC7B,YAAY,CAACgB,MAAM,CAAC,CAAC,CAAE;IAAAc,QAAA,EAAA,CAExEjB,IAAI,iBACHa,IAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAC,kBAAkB;AAAAqB,MAAAA,QAAA,EAC9BV,CAAAA,KAAK,EACLK,KAAK,iBACJM,GAAA,CAAA,KAAA,EAAA;QAAAD,QAAA,eAEEC,GAAA,CAACC,UAAU,EAAA;UAACT,IAAI,EAAEU,IAAI,CAACC,KAAM;UAACC,SAAS,EAAEjC,aAAa,CAACc,MAAM,CAAA;SAC/D,CAAA;AAAA,OAAK,CACN,CAAA;KACE,CACN,eACDU,IAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAE,CAAoBI,iBAAAA,EAAAA,IAAI,GAAG,OAAO,GAAG,EAAE,CAAG,CAAA;AAAAiB,MAAAA,QAAA,gBACxDJ,IAAA,CAAA,KAAA,EAAA;AAAKjB,QAAAA,SAAS,EAAC,0BAA0B;QAAAqB,QAAA,EAAA,cACvCC,GAAA,CAACK,IAAI,EAAA;AACH7B,UAAAA,EAAE,EAAC,MAAM;AACT8B,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAY,CAAE;UACdC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AACjC/B,UAAAA,SAAS,EAAC,~~oBAAoB~~;AAAAqB,UAAAA,QAAA,~~EAE7Bb~~,KAAAA;AAAK,SACF,CACN,EAACF,IAAI,iBACHgB,GAAA,CAACU,IAAI,EAAA;UACH,YAAY1B,EAAAA,IAAI,CAAC,YAAY,CAAE;AAC/BN,UAAAA,SAAS,EAAC,iBAAiB;UAC3BC,OAAO,EAAEK,IAAI,CAACL,OAAQ;UACtBgC,YAAY,EAAE3B,IAAI,CAAC2B,YAAa;UAChCnB,IAAI,EAAEU,IAAI,CAACU,KAAM;UACjB1B,KAAK,EAAEF,IAAI,CAACE,KAAM;UAClB2B,OAAO,EAAE7B,IAAI,CAAC6B,OAAAA;AAAQ,SACtB,CACH,CAAA;AAAA,OACE,CAEL,EAACjC,WAAW,iBACVoB,GAAA,CAACK,IAAI,EAAA;AACH7B,QAAAA,EAAE,EAAC,MAAM;QACT+B,IAAI,EAAEC,UAAU,CAACM,YAAa;AAC9BpC,QAAAA,SAAS,EAAE,~~CAAWI~~,~~QAAAA~~,EAAAA,IAAI,GAAG,yBAAyB,GAAG,8BAA8B,CAAG,CAAA;AAAAiB,QAAAA,QAAA,~~EAEzFnB~~,WAAAA;AAAW,OACR,CACP,EACAL,MAAM,iBAAIyB,GAAA,CAACe,MAAM,EAAA;AAACxC,QAAAA,MAAM,EAAEA,MAAO;AAACG,QAAAA,SAAS,EAAC,oBAAA;AAAoB,QAAG,CAAA;AAAA,KACjE,CACL,EAACM,IAAI,iBACHgB,GAAA,CAACU,IAAI,EAAA;MACH,YAAY1B,EAAAA,IAAI,CAAC,YAAY,CAAE;AAC/BN,MAAAA,SAAS,EAAC,+CAA+C;MACzDC,OAAO,EAAEK,IAAI,CAACL,OAAQ;MACtBgC,YAAY,EAAE3B,IAAI,CAAC2B,YAAa;MAChCnB,IAAI,EAAEU,IAAI,CAACU,KAAM;MACjB1B,KAAK,EAAEF,IAAI,CAACE,KAAM;MAClB2B,OAAO,EAAE7B,IAAI,CAAC6B,OAAAA;AAAQ,KACtB,CACH,CAAA;AAAA,GACM,CAAC,CAAA;AAEd;;;;"}
1	+ {"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment /\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /\n Action displayed at the bottom of the Summary\n /\n action?: ActionOptions;\n /\n Decides which html element should wrap the Summary\n /\n as?: ElementType;\n /\n Extra classes applied to Summary\n /\n className?: string;\n /\n @deprecated please use description instead\n /\n content?: ReactNode;\n /\n Summary description\n /\n description?: ReactNode;\n /\n @deprecated please use info instead\n /\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /\n Infos displayed on help Icon click inside Popover or Modal\n /\n info?: Pick<InfoProps, 'aria-label' \| 'content' \| 'onClick' \| 'presentation' \| 'title'>;\n /\n @deprecated please use icon instead\n /\n illustration?: ReactNode;\n /\n Main Summary Icon\n /\n icon?: ReactNode;\n /\n Decides the badge applied to Icon\n /\n status?: StatusNotDone \| StatusDone \| StatusPending;\n /\n Summary title\n /\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/ @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && <Action action={action} className=\"np-summary__action\" />}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":"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"}

package/build/types/select/option/Option.d.ts CHANGED Viewed

@@ -9,7 +9,8 @@ export type Props<T> = {
     /** @deprecated */
     classNames?: Record<string, string>;
     selected?: boolean;
+    testId?: string;
 };
-declare function Option<T>({ label, currency, note, secondary, icon, selected, }: Props<T>): import("react").JSX.Element;
+declare function Option<T>({ label, currency, note, secondary, icon, selected, testId, }: Props<T>): import("react").JSX.Element;
 export default Option;
 //# sourceMappingURL=Option.d.ts.map

package/build/types/select/option/Option.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../src/select/option/Option.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8B,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;~~CACpB~~,CAAC;AAEF,iBAAS,MAAM,CAAC,CAAC,EAAE,EACjB,KAAK,EACL,QAAa,EACb,IAAS,EACT,SAAc,EACd,IAAI,EACJ,QAAgB,~~GACjB~~,EAAE,KAAK,CAAC,CAAC,CAAC,+BAwCV;AAED,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../src/select/option/Option.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8B,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,iBAAS,MAAM,CAAC,CAAC,EAAE,EACjB,KAAK,EACL,QAAa,EACb,IAAS,EACT,SAAc,EACd,IAAI,EACJ,QAAgB,EAChB,MAAM,GACP,EAAE,KAAK,CAAC,CAAC,CAAC,+BAwCV;AAED,eAAe,MAAM,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.95.0",
+  "version": "46.95.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -68,7 +68,7 @@
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@transferwise/icons": "^3.19.1",
+    "@transferwise/icons": "^3.20.0",
     "@tsconfig/recommended": "^1.0.7",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.9",
@@ -95,12 +95,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.1",
-    "@transferwise/neptune-css": "14.23.0",
+    "@transferwise/neptune-css": "14.24.1",
     "@wise/components-theming": "1.6.2",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
-    "@transferwise/icons": "^3.19.0",
+    "@transferwise/icons": "^3.20.0",
     "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",

package/src/listItem/ListItem.tests.story.tsx ADDED Viewed

@@ -0,0 +1,52 @@
+import { FastFlag } from '@transferwise/icons';
+import Button from '../button';
+import AvatarView from '../avatarView';
+import ListItem, { List, type ListItemProps } from '.';
+export default {
+  component: ListItem,
+  title: 'Other/ListItem/tests',
+};
+export const LongText = () => {
+  const sharedProps: Partial<ListItemProps> = {
+    media: <AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />,
+    action: (
+      <Button v2 size="sm" onClick={() => {}}>
+        Action
+      </Button>
+    ),
+  };
+  return (
+    <div style={{ width: '35rem' }}>
+      <List>
+        <ListItem
+          {...sharedProps}
+          title="Default behaviour"
+          value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
+        />
+        <ListItem
+          {...sharedProps}
+          title="Wrapping the long word with a 'span.text-word-break'"
+          value={
+            <>
+              {'This is a test of a a very long word dontbreakme dontbreakme dontbreakme '}
+              <span className="text-word-break">
+                breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme
+              </span>
+              {' word.'}
+            </>
+          }
+        />
+        <ListItem
+          {...sharedProps}
+          title="Using '&amp;shy;' HTML entitty"
+          value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
+        />
+      </List>
+    </div>
+  );
+};

package/src/listItem/ListItem.tsx CHANGED Viewed

@@ -39,7 +39,7 @@ const ListItem: FC<ListItemProps> = ({
           {title}
         </Body>
         {value && (
-          <Body type="body-large" className="text-primary m-b-0">
+          <Body type="body-large" className="text-primary text-overflow-wrap m-b-0">
             {value}
           </Body>
         )}

package/src/select/option/Option.spec.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Person as ProfileIcon } from '@transferwise/icons';
+import Option, { Props as OptionProps } from './Option';
+describe('Option', () => {
+  const defaultProps: OptionProps<string> = {
+    testId: 'test-option',
+    label: 'Option Label',
+    value: 'option-value',
+  };
+  const renderOption = (props: Partial<OptionProps<string>> = {}) => {
+    return render(<Option {...defaultProps} {...props} />);
+  };
+  it('should render the Option component', () => {
+    renderOption();
+    expect(screen.getByText('Option Label')).toBeInTheDocument();
+  });
+  it('should render the given note', () => {
+    renderOption({ note: 'Note Text' });
+    expect(screen.getByText('Note Text')).toBeInTheDocument();
+  });
+  it('should render the given secondary text', () => {
+    renderOption({ secondary: 'Secondary Text' });
+    expect(screen.getByText('Secondary Text')).toBeInTheDocument();
+  });
+  it('should render the given icon', () => {
+    renderOption({ icon: <ProfileIcon /> });
+    const optionElement = screen.getByTestId('test-option');
+    expect(optionElement.querySelector('svg')).toBeInTheDocument();
+  });
+  it('should render the given currency flag for a given currency', () => {
+    renderOption({ currency: 'USD' });
+    const optionElement = screen.getByTestId('test-option');
+    expect(optionElement.querySelector('img')).toBeInTheDocument();
+  });
+  it('should override the currency flag with the given icon', () => {
+    renderOption({ currency: 'USD', icon: <ProfileIcon /> });
+    const optionElement = screen.getByTestId('test-option');
+    expect(optionElement.querySelector('svg')).toBeInTheDocument();
+    expect(optionElement.querySelectorAll('svg')).toHaveLength(1);
+  });
+});

package/src/select/option/Option.tsx CHANGED Viewed

@@ -16,6 +16,7 @@ export type Props<T> = {
   /** @deprecated */
   classNames?: Record<string, string>;
   selected?: boolean;
+  testId?: string;
 };
 function Option<T>({
@@ -25,6 +26,7 @@ function Option<T>({
   secondary = '',
   icon,
   selected = false,
+  testId,
 }: Props<T>) {
   const iconElement = icon
     ? cloneElement(icon as ReactElement<IdIconProps>, {
@@ -49,7 +51,7 @@ function Option<T>({
   );
   return iconElement ? (
-    <div className="d-flex np-option-content">
+    <div className="d-flex np-option-content" data-testid={testId}>
       <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>
         {iconElement}
       </div>

package/src/summary/Summary.tests.story.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+import { Home as HomeIcon } from '@transferwise/icons';
+import { Status } from '../common';
+import Summary, { type SummaryProps } from '.';
+export default {
+  component: Summary,
+  title: 'Content/Summary/tests',
+};
+export const LongText = () => {
+  const sharedProps: Partial<SummaryProps> = {
+    action: {
+      text: 'Change address',
+      href: '#change-address',
+      'aria-label': ' Click here to change address',
+    },
+    as: 'li',
+    icon: <HomeIcon size={24} />,
+    status: Status.NOT_DONE,
+    info: {
+      title: 'Title',
+    },
+  };
+  return (
+    <ul style={{ width: '34rem' }}>
+      <Summary
+        title="Default behaviour"
+        description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
+        {...sharedProps}
+      />
+      <Summary
+        title="Wrapping the long word with a 'span.text-word-break'"
+        description={
+          <>
+            {
+              'This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme '
+            }
+            <span className="text-word-break">
+              breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme
+            </span>
+            {' word.'}
+          </>
+        }
+        {...sharedProps}
+      />
+      <Summary
+        title="Using '&amp;shy;' HTML entitty"
+        description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
+        {...sharedProps}
+      />
+    </ul>
+  );
+};

package/src/summary/Summary.tsx CHANGED Viewed

@@ -142,7 +142,7 @@ const Summary = ({
             role="heading"
             aria-level={6}
             type={Typography.BODY_LARGE_BOLD}
-            className="text-primary m-b-1"
+            className="text-primary text-overflow-wrap m-b-1"
           >
             {title}
           </Body>
@@ -163,7 +163,7 @@ const Summary = ({
           <Body
             as="span"
             type={Typography.BODY_DEFAULT}
-            className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}
+            className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}
           >
             {description}
           </Body>

package/src/upload/Upload.spec.tsx CHANGED Viewed

@@ -184,7 +184,9 @@ describe('Upload Component', () => {
     await waitForUpload();
-    expect(await screen.findByText(/File type not supported. Please try again with a different file/i)).toBeInTheDocument();
+    expect(
+      await screen.findByText(/File type not supported. Please try again with a different file/i),
+    ).toBeInTheDocument();
   });
   test('should handle canceling the upload', async () => {

package/src/upload/steps/processingStep/processingStep.spec.tsx CHANGED Viewed

@@ -27,7 +27,7 @@ describe('ProcessingStep', () => {
       expect(processing).toBeInTheDocument();
     });
   });
   test('renders ProcessIndicator with default status', () => {
     expect(screen.getByText(PROCESSING_STEP_PROPS.psProcessingText)).toBeInTheDocument();
   });

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx CHANGED Viewed

@@ -66,11 +66,11 @@ describe('uploadImageStep', () => {
     const errorIconLabel = 'Error icon label';
     const errorMessage = 'Maximum filesize is 2MB.';
     const { container } = render(
-      <UploadImageStep
-        {...UPLOADIMAGE_STEP_PROPS}
+      <UploadImageStep
+        {...UPLOADIMAGE_STEP_PROPS}
         errorMessage={errorMessage}
-        errorIconLabel={errorIconLabel}
-      />
+        errorIconLabel={errorIconLabel}
+      />,
     );
     expect(screen.getByLabelText(errorIconLabel)).toBeInTheDocument();

package/src/select/option/Option.spec.js DELETED Viewed

@@ -1,43 +0,0 @@
-import { Person as ProfileIcon } from '@transferwise/icons';
-import { Flag } from '@wise/art';
-import { shallow } from 'enzyme';
-import Body from '../../body';
-import Option from './Option';
-describe('option', () => {
-  let component;
-  let props;
-  beforeEach(() => {
-    props = { label: 'hello' };
-    component = shallow(<Option {...props} />);
-  });
-  it('renders the given small note', () => {
-    component.setProps({ note: 'whadup' });
-    expect(component.find(Body).last().props().children).toBe('whadup');
-  });
-  it('renders the given secondary text in a separate line', () => {
-    component.setProps({ secondary: 'secondary text' });
-    expect(component.find(Body).last().props().children).toBe('secondary text');
-  });
-  it('renders a given icon', () => {
-    component.setProps({ icon: <ProfileIcon /> });
-    expect(component.find(ProfileIcon)).toHaveLength(1);
-  });
-  it('renders the given currency flag for a given currency', () => {
-    component.setProps({ currency: 'hustle' });
-    expect(component.find(Flag)).toHaveLength(1);
-  });
-  it('overrides currency flag with icon', () => {
-    component.setProps({ currency: 'hustle', icon: <ProfileIcon /> });
-    expect(component.find(ProfileIcon)).toHaveLength(1);
-    expect(component.find(Flag)).toHaveLength(0);
-  });
-});