@transferwise/components 0.0.0-experimental-67869a3 → 0.0.0-experimental-a8f3db2

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 (13) hide show
  1. package/build/accordion/AccordionItem/AccordionItem.js +2 -1
  2. package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
  3. package/build/accordion/AccordionItem/AccordionItem.mjs +2 -1
  4. package/build/accordion/AccordionItem/AccordionItem.mjs.map +1 -1
  5. package/build/main.css +5 -1
  6. package/build/styles/accordion/Accordion.css +4 -1
  7. package/build/styles/main.css +5 -1
  8. package/build/types/accordion/AccordionItem/AccordionItem.d.ts.map +1 -1
  9. package/package.json +1 -1
  10. package/src/accordion/Accordion.css +4 -1
  11. package/src/accordion/Accordion.less +10 -5
  12. package/src/accordion/AccordionItem/AccordionItem.tsx +1 -0
  13. package/src/main.css +5 -1
package/build/accordion/AccordionItem/AccordionItem.js CHANGED
@@ -55,7 +55,8 @@ const AccordionItem = ({
55
55
  id: accordionId,
56
56
  className: clsx.clsx('np-accordion-item', {
57
57
  'np-accordion-item--open': open,
58
- 'np-accordion-item--with-icon': Boolean(icon)
58
+ 'np-accordion-item--with-icon': Boolean(icon),
59
+ 'np-accordion-item--with-media': Boolean(media)
59
60
  }),
60
61
  children: [/*#__PURE__*/jsxRuntime.jsx(Option.default, {
61
62
  "aria-label": ariaLabel,
package/build/accordion/AccordionItem/AccordionItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionItem.js","sources":["../../../src/accordion/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { FC, ReactNode, cloneElement, useId } from 'react';\n\nimport Body from '../../body';\nimport Chevron from '../../chevron';\nimport { Position, Size, Typography } from '../../common';\nimport Option from '../../common/Option';\n\nexport interface AccordionItemProps {\n /** A label for the accordion item, used for accessibility purposes. */\n 'aria-label'?: string;\n /** An ID for the accordion item, used for accessibility purposes. */\n id?: string;\n /** The title of the accordion item. */\n title: ReactNode;\n /** The subtitle of the accordion item. */\n subtitle?: ReactNode;\n /** The content of the accordion item. */\n content: ReactNode;\n /** A callback function that is called when the accordion item is clicked. */\n onClick: () => void;\n /** Whether the accordion item is currently open or closed. */\n open: boolean;\n /** An optional icon to display next to the accordion item title. */\n icon?: ReactNode;\n /** An optional media element to display next to the accordion item title. */\n media?: ReactNode;\n /** An optional showMediaAtAllSizes with media available at all sizes of the screen. */\n showMediaAtAllSizes?: boolean;\n /** An optional showMediaCircle to display media within the circle. */\n showMediaCircle?: boolean;\n /** An optional isContainerAligned to display media aligned with the container. */\n isContainerAligned?: boolean;\n /** @deprecated ... */\n theme?: 'light' | 'dark';\n}\n\n/**\n * AccordionItem\n *\n * A single item in an accordion component.\n *\n * @component\n * @param {string} [aria-label] - A label for the accordion item, used for accessibility purposes.\n * @param {string} [id] - An ID for the accordion item, used for accessibility purposes.\n * @param {ReactNode} title - The title of the accordion item.\n * @param {ReactNode} subtitle - The subtitle of the accordion item.\n * @param {ReactNode} content - The content of the accordion item.\n * @param {Function} onClick - A callback function that is called when the accordion item is clicked.\n * @param {boolean} open - Whether the accordion item is currently open or closed.\n * @param {ReactNode} [icon] - An optional icon to display next to the accordion item title.\n * @param {ReactNode} [media] - An optional media to display next to the accordion item.\n * @param {boolean} [showMediaAtAllSizes] - An optional showMediaAtAllSizes with media available at all sizes of the screen.\n * @param {boolean} [showMediaCircle] - An optional showMediaCircle to display media within the circle.\n * @param {boolean} [isContainerAligned] - An optional isContainerAligned to display media aligned with the container.\n * @example\n * // Example usage:\n *\n * import AccordionItem from './AccordionItem';\n *\n * function App() {\n * const handleItemClick = () => {\n * console.log('Accordion item was clicked.');\n * };\n *\n * return (\n * <AccordionItem\n * title={<h2>Item Title</h2>}\n * content={<p>Item content goes here.</p>}\n * onClick={handleItemClick}\n * open={true}\n * icon={<Chevron />}\n * />\n * );\n * }\n */\nconst AccordionItem: FC<AccordionItemProps> = ({\n 'aria-label': ariaLabel,\n id,\n title,\n subtitle,\n content,\n onClick,\n open,\n icon,\n media,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n theme = 'light',\n}) => {\n const mediaElement = icon\n ? cloneElement(icon as React.ReactElement<IdIconProps>, { size: 24 })\n : media;\n const fallbackId = useId();\n const accordionId = id ?? fallbackId;\n\n return (\n <div\n id={accordionId}\n className={clsx('np-accordion-item', {\n 'np-accordion-item--open': open,\n 'np-accordion-item--with-icon': Boolean(icon),\n })}\n >\n <Option\n aria-label={ariaLabel}\n as=\"button\"\n media={mediaElement}\n title={title}\n content={subtitle}\n button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}\n inverseMediaCircle={false}\n aria-expanded={open}\n aria-controls={`${accordionId}-section`}\n id={`${accordionId}-control`}\n showMediaCircle={showMediaCircle}\n showMediaAtAllSizes={showMediaAtAllSizes}\n isContainerAligned={isContainerAligned}\n onClick={onClick}\n />\n {open && (\n <div id={`${accordionId}-section`} role=\"region\" aria-labelledby={`${accordionId}-control`}>\n <Body\n as=\"span\"\n type={Typography.BODY_LARGE}\n className={clsx('np-accordion-item__content', 'd-block', {\n 'has-icon': icon,\n })}\n >\n {content}\n </Body>\n </div>\n )}\n </div>\n );\n};\n\nexport default AccordionItem;\n"],"names":["AccordionItem","ariaLabel","id","title","subtitle","content","onClick","open","icon","media","showMediaAtAllSizes","showMediaCircle","isContainerAligned","theme","mediaElement","cloneElement","size","fallbackId","useId","accordionId","_jsxs","className","clsx","Boolean","children","_jsx","Option","as","button","Chevron","orientation","Position","TOP","BOTTOM","Size","MEDIUM","inverseMediaCircle","role","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EMA,MAAAA,aAAa,GAA2BA,CAAC;AAC7C,EAAA,YAAY,EAAEC,SAAS;EACvBC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,KAAK,GAAG;AAAO,CAChB,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGN,IAAI,gBACrBO,kBAAY,CAACP,IAAuC,EAAE;AAAEQ,IAAAA,IAAI,EAAE;GAAI,CAAC,GACnEP,KAAK;AACT,EAAA,MAAMQ,UAAU,GAAGC,WAAK,EAAE;AAC1B,EAAA,MAAMC,WAAW,GAAGjB,EAAE,IAAIe,UAAU;AAEpC,EAAA,oBACEG,eAAA,CAAA,KAAA,EAAA;AACElB,IAAAA,EAAE,EAAEiB,WAAY;AAChBE,IAAAA,SAAS,EAAEC,SAAI,CAAC,mBAAmB,EAAE;AACnC,MAAA,yBAAyB,EAAEf,IAAI;MAC/B,8BAA8B,EAAEgB,OAAO,CAACf,IAAI;AAC7C,KAAA,CAAE;IAAAgB,QAAA,EAAA,cAEHC,cAAA,CAACC,cAAM,EAAA;AACL,MAAA,YAAA,EAAYzB,SAAU;AACtB0B,MAAAA,EAAE,EAAC,QAAQ;AACXlB,MAAAA,KAAK,EAAEK,YAAa;AACpBX,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,OAAO,EAAED,QAAS;MAClBwB,MAAM,eAAEH,cAAA,CAACI,eAAO,EAAA;QAACC,WAAW,EAAEvB,IAAI,GAAGwB,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAO;QAACjB,IAAI,EAAEkB,SAAI,CAACC;AAAO,OAAA,CAAI;AAC3FC,MAAAA,kBAAkB,EAAE,KAAM;AAC1B,MAAA,eAAA,EAAe7B,IAAK;MACpB,eAAe,EAAA,CAAA,EAAGY,WAAW,CAAW,QAAA,CAAA;MACxCjB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAC7BR,MAAAA,eAAe,EAAEA,eAAgB;AACjCD,MAAAA,mBAAmB,EAAEA,mBAAoB;AACzCE,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCN,MAAAA,OAAO,EAAEA;AAAQ,KAEnB,CAAA,EAACC,IAAI,iBACHkB,cAAA,CAAA,KAAA,EAAA;MAAKvB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAACkB,MAAAA,IAAI,EAAC,QAAQ;MAAC,iBAAiB,EAAA,CAAA,EAAGlB,WAAW,CAAW,QAAA,CAAA;MAAAK,QAAA,eACzFC,cAAA,CAACa,YAAI,EAAA;AACHX,QAAAA,EAAE,EAAC,MAAM;QACTY,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAC5BpB,QAAAA,SAAS,EAAEC,SAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE;AACvD,UAAA,UAAU,EAAEd;AACb,SAAA,CAAE;AAAAgB,QAAAA,QAAA,EAEFnB;OACG;AACR,KAAK,CACN;AAAA,GACE,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"AccordionItem.js","sources":["../../../src/accordion/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { FC, ReactNode, cloneElement, useId } from 'react';\n\nimport Body from '../../body';\nimport Chevron from '../../chevron';\nimport { Position, Size, Typography } from '../../common';\nimport Option from '../../common/Option';\n\nexport interface AccordionItemProps {\n /** A label for the accordion item, used for accessibility purposes. */\n 'aria-label'?: string;\n /** An ID for the accordion item, used for accessibility purposes. */\n id?: string;\n /** The title of the accordion item. */\n title: ReactNode;\n /** The subtitle of the accordion item. */\n subtitle?: ReactNode;\n /** The content of the accordion item. */\n content: ReactNode;\n /** A callback function that is called when the accordion item is clicked. */\n onClick: () => void;\n /** Whether the accordion item is currently open or closed. */\n open: boolean;\n /** An optional icon to display next to the accordion item title. */\n icon?: ReactNode;\n /** An optional media element to display next to the accordion item title. */\n media?: ReactNode;\n /** An optional showMediaAtAllSizes with media available at all sizes of the screen. */\n showMediaAtAllSizes?: boolean;\n /** An optional showMediaCircle to display media within the circle. */\n showMediaCircle?: boolean;\n /** An optional isContainerAligned to display media aligned with the container. */\n isContainerAligned?: boolean;\n /** @deprecated ... */\n theme?: 'light' | 'dark';\n}\n\n/**\n * AccordionItem\n *\n * A single item in an accordion component.\n *\n * @component\n * @param {string} [aria-label] - A label for the accordion item, used for accessibility purposes.\n * @param {string} [id] - An ID for the accordion item, used for accessibility purposes.\n * @param {ReactNode} title - The title of the accordion item.\n * @param {ReactNode} subtitle - The subtitle of the accordion item.\n * @param {ReactNode} content - The content of the accordion item.\n * @param {Function} onClick - A callback function that is called when the accordion item is clicked.\n * @param {boolean} open - Whether the accordion item is currently open or closed.\n * @param {ReactNode} [icon] - An optional icon to display next to the accordion item title.\n * @param {ReactNode} [media] - An optional media to display next to the accordion item.\n * @param {boolean} [showMediaAtAllSizes] - An optional showMediaAtAllSizes with media available at all sizes of the screen.\n * @param {boolean} [showMediaCircle] - An optional showMediaCircle to display media within the circle.\n * @param {boolean} [isContainerAligned] - An optional isContainerAligned to display media aligned with the container.\n * @example\n * // Example usage:\n *\n * import AccordionItem from './AccordionItem';\n *\n * function App() {\n * const handleItemClick = () => {\n * console.log('Accordion item was clicked.');\n * };\n *\n * return (\n * <AccordionItem\n * title={<h2>Item Title</h2>}\n * content={<p>Item content goes here.</p>}\n * onClick={handleItemClick}\n * open={true}\n * icon={<Chevron />}\n * />\n * );\n * }\n */\nconst AccordionItem: FC<AccordionItemProps> = ({\n 'aria-label': ariaLabel,\n id,\n title,\n subtitle,\n content,\n onClick,\n open,\n icon,\n media,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n theme = 'light',\n}) => {\n const mediaElement = icon\n ? cloneElement(icon as React.ReactElement<IdIconProps>, { size: 24 })\n : media;\n const fallbackId = useId();\n const accordionId = id ?? fallbackId;\n\n return (\n <div\n id={accordionId}\n className={clsx('np-accordion-item', {\n 'np-accordion-item--open': open,\n 'np-accordion-item--with-icon': Boolean(icon),\n 'np-accordion-item--with-media': Boolean(media),\n })}\n >\n <Option\n aria-label={ariaLabel}\n as=\"button\"\n media={mediaElement}\n title={title}\n content={subtitle}\n button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}\n inverseMediaCircle={false}\n aria-expanded={open}\n aria-controls={`${accordionId}-section`}\n id={`${accordionId}-control`}\n showMediaCircle={showMediaCircle}\n showMediaAtAllSizes={showMediaAtAllSizes}\n isContainerAligned={isContainerAligned}\n onClick={onClick}\n />\n {open && (\n <div id={`${accordionId}-section`} role=\"region\" aria-labelledby={`${accordionId}-control`}>\n <Body\n as=\"span\"\n type={Typography.BODY_LARGE}\n className={clsx('np-accordion-item__content', 'd-block', {\n 'has-icon': icon,\n })}\n >\n {content}\n </Body>\n </div>\n )}\n </div>\n );\n};\n\nexport default AccordionItem;\n"],"names":["AccordionItem","ariaLabel","id","title","subtitle","content","onClick","open","icon","media","showMediaAtAllSizes","showMediaCircle","isContainerAligned","theme","mediaElement","cloneElement","size","fallbackId","useId","accordionId","_jsxs","className","clsx","Boolean","children","_jsx","Option","as","button","Chevron","orientation","Position","TOP","BOTTOM","Size","MEDIUM","inverseMediaCircle","role","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EMA,MAAAA,aAAa,GAA2BA,CAAC;AAC7C,EAAA,YAAY,EAAEC,SAAS;EACvBC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,KAAK,GAAG;AAAO,CAChB,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGN,IAAI,gBACrBO,kBAAY,CAACP,IAAuC,EAAE;AAAEQ,IAAAA,IAAI,EAAE;GAAI,CAAC,GACnEP,KAAK;AACT,EAAA,MAAMQ,UAAU,GAAGC,WAAK,EAAE;AAC1B,EAAA,MAAMC,WAAW,GAAGjB,EAAE,IAAIe,UAAU;AAEpC,EAAA,oBACEG,eAAA,CAAA,KAAA,EAAA;AACElB,IAAAA,EAAE,EAAEiB,WAAY;AAChBE,IAAAA,SAAS,EAAEC,SAAI,CAAC,mBAAmB,EAAE;AACnC,MAAA,yBAAyB,EAAEf,IAAI;AAC/B,MAAA,8BAA8B,EAAEgB,OAAO,CAACf,IAAI,CAAC;MAC7C,+BAA+B,EAAEe,OAAO,CAACd,KAAK;AAC/C,KAAA,CAAE;IAAAe,QAAA,EAAA,cAEHC,cAAA,CAACC,cAAM,EAAA;AACL,MAAA,YAAA,EAAYzB,SAAU;AACtB0B,MAAAA,EAAE,EAAC,QAAQ;AACXlB,MAAAA,KAAK,EAAEK,YAAa;AACpBX,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,OAAO,EAAED,QAAS;MAClBwB,MAAM,eAAEH,cAAA,CAACI,eAAO,EAAA;QAACC,WAAW,EAAEvB,IAAI,GAAGwB,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAO;QAACjB,IAAI,EAAEkB,SAAI,CAACC;AAAO,OAAA,CAAI;AAC3FC,MAAAA,kBAAkB,EAAE,KAAM;AAC1B,MAAA,eAAA,EAAe7B,IAAK;MACpB,eAAe,EAAA,CAAA,EAAGY,WAAW,CAAW,QAAA,CAAA;MACxCjB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAC7BR,MAAAA,eAAe,EAAEA,eAAgB;AACjCD,MAAAA,mBAAmB,EAAEA,mBAAoB;AACzCE,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCN,MAAAA,OAAO,EAAEA;AAAQ,KAEnB,CAAA,EAACC,IAAI,iBACHkB,cAAA,CAAA,KAAA,EAAA;MAAKvB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAACkB,MAAAA,IAAI,EAAC,QAAQ;MAAC,iBAAiB,EAAA,CAAA,EAAGlB,WAAW,CAAW,QAAA,CAAA;MAAAK,QAAA,eACzFC,cAAA,CAACa,YAAI,EAAA;AACHX,QAAAA,EAAE,EAAC,MAAM;QACTY,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAC5BpB,QAAAA,SAAS,EAAEC,SAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE;AACvD,UAAA,UAAU,EAAEd;AACb,SAAA,CAAE;AAAAgB,QAAAA,QAAA,EAEFnB;OACG;AACR,KAAK,CACN;AAAA,GACE,CAAC;AAEV;;;;"}
package/build/accordion/AccordionItem/AccordionItem.mjs CHANGED
@@ -51,7 +51,8 @@ const AccordionItem = ({
51
51
  id: accordionId,
52
52
  className: clsx('np-accordion-item', {
53
53
  'np-accordion-item--open': open,
54
- 'np-accordion-item--with-icon': Boolean(icon)
54
+ 'np-accordion-item--with-icon': Boolean(icon),
55
+ 'np-accordion-item--with-media': Boolean(media)
55
56
  }),
56
57
  children: [/*#__PURE__*/jsx(Option, {
57
58
  "aria-label": ariaLabel,
package/build/accordion/AccordionItem/AccordionItem.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionItem.mjs","sources":["../../../src/accordion/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { FC, ReactNode, cloneElement, useId } from 'react';\n\nimport Body from '../../body';\nimport Chevron from '../../chevron';\nimport { Position, Size, Typography } from '../../common';\nimport Option from '../../common/Option';\n\nexport interface AccordionItemProps {\n /** A label for the accordion item, used for accessibility purposes. */\n 'aria-label'?: string;\n /** An ID for the accordion item, used for accessibility purposes. */\n id?: string;\n /** The title of the accordion item. */\n title: ReactNode;\n /** The subtitle of the accordion item. */\n subtitle?: ReactNode;\n /** The content of the accordion item. */\n content: ReactNode;\n /** A callback function that is called when the accordion item is clicked. */\n onClick: () => void;\n /** Whether the accordion item is currently open or closed. */\n open: boolean;\n /** An optional icon to display next to the accordion item title. */\n icon?: ReactNode;\n /** An optional media element to display next to the accordion item title. */\n media?: ReactNode;\n /** An optional showMediaAtAllSizes with media available at all sizes of the screen. */\n showMediaAtAllSizes?: boolean;\n /** An optional showMediaCircle to display media within the circle. */\n showMediaCircle?: boolean;\n /** An optional isContainerAligned to display media aligned with the container. */\n isContainerAligned?: boolean;\n /** @deprecated ... */\n theme?: 'light' | 'dark';\n}\n\n/**\n * AccordionItem\n *\n * A single item in an accordion component.\n *\n * @component\n * @param {string} [aria-label] - A label for the accordion item, used for accessibility purposes.\n * @param {string} [id] - An ID for the accordion item, used for accessibility purposes.\n * @param {ReactNode} title - The title of the accordion item.\n * @param {ReactNode} subtitle - The subtitle of the accordion item.\n * @param {ReactNode} content - The content of the accordion item.\n * @param {Function} onClick - A callback function that is called when the accordion item is clicked.\n * @param {boolean} open - Whether the accordion item is currently open or closed.\n * @param {ReactNode} [icon] - An optional icon to display next to the accordion item title.\n * @param {ReactNode} [media] - An optional media to display next to the accordion item.\n * @param {boolean} [showMediaAtAllSizes] - An optional showMediaAtAllSizes with media available at all sizes of the screen.\n * @param {boolean} [showMediaCircle] - An optional showMediaCircle to display media within the circle.\n * @param {boolean} [isContainerAligned] - An optional isContainerAligned to display media aligned with the container.\n * @example\n * // Example usage:\n *\n * import AccordionItem from './AccordionItem';\n *\n * function App() {\n * const handleItemClick = () => {\n * console.log('Accordion item was clicked.');\n * };\n *\n * return (\n * <AccordionItem\n * title={<h2>Item Title</h2>}\n * content={<p>Item content goes here.</p>}\n * onClick={handleItemClick}\n * open={true}\n * icon={<Chevron />}\n * />\n * );\n * }\n */\nconst AccordionItem: FC<AccordionItemProps> = ({\n 'aria-label': ariaLabel,\n id,\n title,\n subtitle,\n content,\n onClick,\n open,\n icon,\n media,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n theme = 'light',\n}) => {\n const mediaElement = icon\n ? cloneElement(icon as React.ReactElement<IdIconProps>, { size: 24 })\n : media;\n const fallbackId = useId();\n const accordionId = id ?? fallbackId;\n\n return (\n <div\n id={accordionId}\n className={clsx('np-accordion-item', {\n 'np-accordion-item--open': open,\n 'np-accordion-item--with-icon': Boolean(icon),\n })}\n >\n <Option\n aria-label={ariaLabel}\n as=\"button\"\n media={mediaElement}\n title={title}\n content={subtitle}\n button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}\n inverseMediaCircle={false}\n aria-expanded={open}\n aria-controls={`${accordionId}-section`}\n id={`${accordionId}-control`}\n showMediaCircle={showMediaCircle}\n showMediaAtAllSizes={showMediaAtAllSizes}\n isContainerAligned={isContainerAligned}\n onClick={onClick}\n />\n {open && (\n <div id={`${accordionId}-section`} role=\"region\" aria-labelledby={`${accordionId}-control`}>\n <Body\n as=\"span\"\n type={Typography.BODY_LARGE}\n className={clsx('np-accordion-item__content', 'd-block', {\n 'has-icon': icon,\n })}\n >\n {content}\n </Body>\n </div>\n )}\n </div>\n );\n};\n\nexport default AccordionItem;\n"],"names":["AccordionItem","ariaLabel","id","title","subtitle","content","onClick","open","icon","media","showMediaAtAllSizes","showMediaCircle","isContainerAligned","theme","mediaElement","cloneElement","size","fallbackId","useId","accordionId","_jsxs","className","clsx","Boolean","children","_jsx","Option","as","button","Chevron","orientation","Position","TOP","BOTTOM","Size","MEDIUM","inverseMediaCircle","role","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EMA,MAAAA,aAAa,GAA2BA,CAAC;AAC7C,EAAA,YAAY,EAAEC,SAAS;EACvBC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,KAAK,GAAG;AAAO,CAChB,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGN,IAAI,gBACrBO,YAAY,CAACP,IAAuC,EAAE;AAAEQ,IAAAA,IAAI,EAAE;GAAI,CAAC,GACnEP,KAAK;AACT,EAAA,MAAMQ,UAAU,GAAGC,KAAK,EAAE;AAC1B,EAAA,MAAMC,WAAW,GAAGjB,EAAE,IAAIe,UAAU;AAEpC,EAAA,oBACEG,IAAA,CAAA,KAAA,EAAA;AACElB,IAAAA,EAAE,EAAEiB,WAAY;AAChBE,IAAAA,SAAS,EAAEC,IAAI,CAAC,mBAAmB,EAAE;AACnC,MAAA,yBAAyB,EAAEf,IAAI;MAC/B,8BAA8B,EAAEgB,OAAO,CAACf,IAAI;AAC7C,KAAA,CAAE;IAAAgB,QAAA,EAAA,cAEHC,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYzB,SAAU;AACtB0B,MAAAA,EAAE,EAAC,QAAQ;AACXlB,MAAAA,KAAK,EAAEK,YAAa;AACpBX,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,OAAO,EAAED,QAAS;MAClBwB,MAAM,eAAEH,GAAA,CAACI,OAAO,EAAA;QAACC,WAAW,EAAEvB,IAAI,GAAGwB,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE,MAAO;QAACjB,IAAI,EAAEkB,IAAI,CAACC;AAAO,OAAA,CAAI;AAC3FC,MAAAA,kBAAkB,EAAE,KAAM;AAC1B,MAAA,eAAA,EAAe7B,IAAK;MACpB,eAAe,EAAA,CAAA,EAAGY,WAAW,CAAW,QAAA,CAAA;MACxCjB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAC7BR,MAAAA,eAAe,EAAEA,eAAgB;AACjCD,MAAAA,mBAAmB,EAAEA,mBAAoB;AACzCE,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCN,MAAAA,OAAO,EAAEA;AAAQ,KAEnB,CAAA,EAACC,IAAI,iBACHkB,GAAA,CAAA,KAAA,EAAA;MAAKvB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAACkB,MAAAA,IAAI,EAAC,QAAQ;MAAC,iBAAiB,EAAA,CAAA,EAAGlB,WAAW,CAAW,QAAA,CAAA;MAAAK,QAAA,eACzFC,GAAA,CAACa,IAAI,EAAA;AACHX,QAAAA,EAAE,EAAC,MAAM;QACTY,IAAI,EAAEC,UAAU,CAACC,UAAW;AAC5BpB,QAAAA,SAAS,EAAEC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE;AACvD,UAAA,UAAU,EAAEd;AACb,SAAA,CAAE;AAAAgB,QAAAA,QAAA,EAEFnB;OACG;AACR,KAAK,CACN;AAAA,GACE,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"AccordionItem.mjs","sources":["../../../src/accordion/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { FC, ReactNode, cloneElement, useId } from 'react';\n\nimport Body from '../../body';\nimport Chevron from '../../chevron';\nimport { Position, Size, Typography } from '../../common';\nimport Option from '../../common/Option';\n\nexport interface AccordionItemProps {\n /** A label for the accordion item, used for accessibility purposes. */\n 'aria-label'?: string;\n /** An ID for the accordion item, used for accessibility purposes. */\n id?: string;\n /** The title of the accordion item. */\n title: ReactNode;\n /** The subtitle of the accordion item. */\n subtitle?: ReactNode;\n /** The content of the accordion item. */\n content: ReactNode;\n /** A callback function that is called when the accordion item is clicked. */\n onClick: () => void;\n /** Whether the accordion item is currently open or closed. */\n open: boolean;\n /** An optional icon to display next to the accordion item title. */\n icon?: ReactNode;\n /** An optional media element to display next to the accordion item title. */\n media?: ReactNode;\n /** An optional showMediaAtAllSizes with media available at all sizes of the screen. */\n showMediaAtAllSizes?: boolean;\n /** An optional showMediaCircle to display media within the circle. */\n showMediaCircle?: boolean;\n /** An optional isContainerAligned to display media aligned with the container. */\n isContainerAligned?: boolean;\n /** @deprecated ... */\n theme?: 'light' | 'dark';\n}\n\n/**\n * AccordionItem\n *\n * A single item in an accordion component.\n *\n * @component\n * @param {string} [aria-label] - A label for the accordion item, used for accessibility purposes.\n * @param {string} [id] - An ID for the accordion item, used for accessibility purposes.\n * @param {ReactNode} title - The title of the accordion item.\n * @param {ReactNode} subtitle - The subtitle of the accordion item.\n * @param {ReactNode} content - The content of the accordion item.\n * @param {Function} onClick - A callback function that is called when the accordion item is clicked.\n * @param {boolean} open - Whether the accordion item is currently open or closed.\n * @param {ReactNode} [icon] - An optional icon to display next to the accordion item title.\n * @param {ReactNode} [media] - An optional media to display next to the accordion item.\n * @param {boolean} [showMediaAtAllSizes] - An optional showMediaAtAllSizes with media available at all sizes of the screen.\n * @param {boolean} [showMediaCircle] - An optional showMediaCircle to display media within the circle.\n * @param {boolean} [isContainerAligned] - An optional isContainerAligned to display media aligned with the container.\n * @example\n * // Example usage:\n *\n * import AccordionItem from './AccordionItem';\n *\n * function App() {\n * const handleItemClick = () => {\n * console.log('Accordion item was clicked.');\n * };\n *\n * return (\n * <AccordionItem\n * title={<h2>Item Title</h2>}\n * content={<p>Item content goes here.</p>}\n * onClick={handleItemClick}\n * open={true}\n * icon={<Chevron />}\n * />\n * );\n * }\n */\nconst AccordionItem: FC<AccordionItemProps> = ({\n 'aria-label': ariaLabel,\n id,\n title,\n subtitle,\n content,\n onClick,\n open,\n icon,\n media,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n theme = 'light',\n}) => {\n const mediaElement = icon\n ? cloneElement(icon as React.ReactElement<IdIconProps>, { size: 24 })\n : media;\n const fallbackId = useId();\n const accordionId = id ?? fallbackId;\n\n return (\n <div\n id={accordionId}\n className={clsx('np-accordion-item', {\n 'np-accordion-item--open': open,\n 'np-accordion-item--with-icon': Boolean(icon),\n 'np-accordion-item--with-media': Boolean(media),\n })}\n >\n <Option\n aria-label={ariaLabel}\n as=\"button\"\n media={mediaElement}\n title={title}\n content={subtitle}\n button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}\n inverseMediaCircle={false}\n aria-expanded={open}\n aria-controls={`${accordionId}-section`}\n id={`${accordionId}-control`}\n showMediaCircle={showMediaCircle}\n showMediaAtAllSizes={showMediaAtAllSizes}\n isContainerAligned={isContainerAligned}\n onClick={onClick}\n />\n {open && (\n <div id={`${accordionId}-section`} role=\"region\" aria-labelledby={`${accordionId}-control`}>\n <Body\n as=\"span\"\n type={Typography.BODY_LARGE}\n className={clsx('np-accordion-item__content', 'd-block', {\n 'has-icon': icon,\n })}\n >\n {content}\n </Body>\n </div>\n )}\n </div>\n );\n};\n\nexport default AccordionItem;\n"],"names":["AccordionItem","ariaLabel","id","title","subtitle","content","onClick","open","icon","media","showMediaAtAllSizes","showMediaCircle","isContainerAligned","theme","mediaElement","cloneElement","size","fallbackId","useId","accordionId","_jsxs","className","clsx","Boolean","children","_jsx","Option","as","button","Chevron","orientation","Position","TOP","BOTTOM","Size","MEDIUM","inverseMediaCircle","role","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EMA,MAAAA,aAAa,GAA2BA,CAAC;AAC7C,EAAA,YAAY,EAAEC,SAAS;EACvBC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,KAAK,GAAG;AAAO,CAChB,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGN,IAAI,gBACrBO,YAAY,CAACP,IAAuC,EAAE;AAAEQ,IAAAA,IAAI,EAAE;GAAI,CAAC,GACnEP,KAAK;AACT,EAAA,MAAMQ,UAAU,GAAGC,KAAK,EAAE;AAC1B,EAAA,MAAMC,WAAW,GAAGjB,EAAE,IAAIe,UAAU;AAEpC,EAAA,oBACEG,IAAA,CAAA,KAAA,EAAA;AACElB,IAAAA,EAAE,EAAEiB,WAAY;AAChBE,IAAAA,SAAS,EAAEC,IAAI,CAAC,mBAAmB,EAAE;AACnC,MAAA,yBAAyB,EAAEf,IAAI;AAC/B,MAAA,8BAA8B,EAAEgB,OAAO,CAACf,IAAI,CAAC;MAC7C,+BAA+B,EAAEe,OAAO,CAACd,KAAK;AAC/C,KAAA,CAAE;IAAAe,QAAA,EAAA,cAEHC,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYzB,SAAU;AACtB0B,MAAAA,EAAE,EAAC,QAAQ;AACXlB,MAAAA,KAAK,EAAEK,YAAa;AACpBX,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,OAAO,EAAED,QAAS;MAClBwB,MAAM,eAAEH,GAAA,CAACI,OAAO,EAAA;QAACC,WAAW,EAAEvB,IAAI,GAAGwB,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE,MAAO;QAACjB,IAAI,EAAEkB,IAAI,CAACC;AAAO,OAAA,CAAI;AAC3FC,MAAAA,kBAAkB,EAAE,KAAM;AAC1B,MAAA,eAAA,EAAe7B,IAAK;MACpB,eAAe,EAAA,CAAA,EAAGY,WAAW,CAAW,QAAA,CAAA;MACxCjB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAC7BR,MAAAA,eAAe,EAAEA,eAAgB;AACjCD,MAAAA,mBAAmB,EAAEA,mBAAoB;AACzCE,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCN,MAAAA,OAAO,EAAEA;AAAQ,KAEnB,CAAA,EAACC,IAAI,iBACHkB,GAAA,CAAA,KAAA,EAAA;MAAKvB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAACkB,MAAAA,IAAI,EAAC,QAAQ;MAAC,iBAAiB,EAAA,CAAA,EAAGlB,WAAW,CAAW,QAAA,CAAA;MAAAK,QAAA,eACzFC,GAAA,CAACa,IAAI,EAAA;AACHX,QAAAA,EAAE,EAAC,MAAM;QACTY,IAAI,EAAEC,UAAU,CAACC,UAAW;AAC5BpB,QAAAA,SAAS,EAAEC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE;AACvD,UAAA,UAAU,EAAEd;AACb,SAAA,CAAE;AAAAgB,QAAAA,QAAA,EAEFnB;OACG;AACR,KAAK,CACN;AAAA,GACE,CAAC;AAEV;;;;"}
package/build/main.css CHANGED
@@ -72,11 +72,15 @@
72
72
  font-weight: 600;
73
73
  font-weight: var(--font-weight-semi-bold);
74
74
  }
75
+ .np-theme-personal .np-accordion-item--with-media .media {
76
+ display: flex;
77
+ align-items: center;
78
+ }
75
79
  .np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
76
80
  padding: 0 56px 16px;
77
81
  padding: 0 var(--size-56) var(--size-16);
78
82
  }
79
- .np-theme-personal .np-accordion-item .media {
83
+ .np-theme-personal .np-accordion-item--with-icon .media {
80
84
  display: flex;
81
85
  align-items: flex-start;
82
86
  }
package/build/styles/accordion/Accordion.css CHANGED
@@ -27,10 +27,13 @@
27
27
  }.np-accordion-item .np-option .np-option__title {
28
28
  font-weight: 600;
29
29
  font-weight: var(--font-weight-semi-bold);
30
+ }.np-theme-personal .np-accordion-item--with-media .media {
31
+ display: flex;
32
+ align-items: center;
30
33
  }.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
31
34
  padding: 0 56px 16px;
32
35
  padding: 0 var(--size-56) var(--size-16);
33
- }.np-theme-personal .np-accordion-item .media {
36
+ }.np-theme-personal .np-accordion-item--with-icon .media {
34
37
  display: flex;
35
38
  align-items: flex-start;
36
39
  }.np-theme-personal .np-accordion-item .decision__title {
package/build/styles/main.css CHANGED
@@ -72,11 +72,15 @@
72
72
  font-weight: 600;
73
73
  font-weight: var(--font-weight-semi-bold);
74
74
  }
75
+ .np-theme-personal .np-accordion-item--with-media .media {
76
+ display: flex;
77
+ align-items: center;
78
+ }
75
79
  .np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
76
80
  padding: 0 56px 16px;
77
81
  padding: 0 var(--size-56) var(--size-16);
78
82
  }
79
- .np-theme-personal .np-accordion-item .media {
83
+ .np-theme-personal .np-accordion-item--with-icon .media {
80
84
  display: flex;
81
85
  align-items: flex-start;
82
86
  }
package/build/types/accordion/AccordionItem/AccordionItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,kBAAkB;IACjC,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uFAAuF;IACvF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA4DzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,kBAAkB;IACjC,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uFAAuF;IACvF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA6DzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-67869a3",
3
+ "version": "0.0.0-experimental-a8f3db2",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/accordion/Accordion.css CHANGED
@@ -27,10 +27,13 @@
27
27
  }.np-accordion-item .np-option .np-option__title {
28
28
  font-weight: 600;
29
29
  font-weight: var(--font-weight-semi-bold);
30
+ }.np-theme-personal .np-accordion-item--with-media .media {
31
+ display: flex;
32
+ align-items: center;
30
33
  }.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
31
34
  padding: 0 56px 16px;
32
35
  padding: 0 var(--size-56) var(--size-16);
33
- }.np-theme-personal .np-accordion-item .media {
36
+ }.np-theme-personal .np-accordion-item--with-icon .media {
34
37
  display: flex;
35
38
  align-items: flex-start;
36
39
  }.np-theme-personal .np-accordion-item .decision__title {
package/src/accordion/Accordion.less CHANGED
@@ -41,15 +41,20 @@
41
41
  }
42
42
 
43
43
  .np-theme-personal & {
44
+ &--with-media {
45
+ .media {
46
+ display: flex;
47
+ align-items: center;
48
+ }
49
+ }
44
50
  &--with-icon {
45
51
  .np-accordion-item__content {
46
52
  padding: 0 var(--size-56) var(--size-16);
47
53
  }
48
- }
49
-
50
- .media {
51
- display: flex;
52
- align-items: flex-start;
54
+ .media {
55
+ display: flex;
56
+ align-items: flex-start;
57
+ }
53
58
  }
54
59
 
55
60
  .decision__title {
package/src/accordion/AccordionItem/AccordionItem.tsx CHANGED
@@ -102,6 +102,7 @@ const AccordionItem: FC<AccordionItemProps> = ({
102
102
  className={clsx('np-accordion-item', {
103
103
  'np-accordion-item--open': open,
104
104
  'np-accordion-item--with-icon': Boolean(icon),
105
+ 'np-accordion-item--with-media': Boolean(media),
105
106
  })}
106
107
  >
107
108
  <Option
package/src/main.css CHANGED
@@ -72,11 +72,15 @@
72
72
  font-weight: 600;
73
73
  font-weight: var(--font-weight-semi-bold);
74
74
  }
75
+ .np-theme-personal .np-accordion-item--with-media .media {
76
+ display: flex;
77
+ align-items: center;
78
+ }
75
79
  .np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
76
80
  padding: 0 56px 16px;
77
81
  padding: 0 var(--size-56) var(--size-16);
78
82
  }
79
- .np-theme-personal .np-accordion-item .media {
83
+ .np-theme-personal .np-accordion-item--with-icon .media {
80
84
  display: flex;
81
85
  align-items: flex-start;
82
86
  }