@transferwise/components 46.88.2 → 46.89.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/actionButton/ActionButton.js.map +1 -1
- package/build/actionButton/ActionButton.mjs.map +1 -1
- package/build/actionOption/ActionOption.js +19 -3
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs +19 -3
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/alert/Alert.js +23 -20
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +20 -17
- package/build/alert/Alert.mjs.map +1 -1
- package/build/avatar/Avatar.js.map +1 -1
- package/build/avatar/Avatar.mjs.map +1 -1
- package/build/avatar/avatarTypes.js +3 -1
- package/build/avatar/avatarTypes.js.map +1 -1
- package/build/avatar/avatarTypes.mjs +3 -1
- package/build/avatar/avatarTypes.mjs.map +1 -1
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs.map +1 -1
- package/build/button/Button.js +2 -2
- package/build/button/Button.mjs +2 -2
- package/build/button/LegacyButton.js.map +1 -1
- package/build/button/LegacyButton.mjs.map +1 -1
- package/build/carousel/Carousel.js +9 -8
- package/build/carousel/Carousel.js.map +1 -1
- package/build/carousel/Carousel.mjs +9 -8
- package/build/carousel/Carousel.mjs.map +1 -1
- package/build/common/action/Action.js +26 -15
- package/build/common/action/Action.js.map +1 -1
- package/build/common/action/Action.mjs +26 -15
- package/build/common/action/Action.mjs.map +1 -1
- package/build/common/closeButton/CloseButton.js +2 -1
- package/build/common/closeButton/CloseButton.js.map +1 -1
- package/build/common/closeButton/CloseButton.mjs +2 -1
- package/build/common/closeButton/CloseButton.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +10 -73
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +11 -74
- package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
- package/build/iconButton/IconButton.js +2 -2
- package/build/iconButton/IconButton.js.map +1 -1
- package/build/iconButton/IconButton.mjs +2 -2
- package/build/iconButton/IconButton.mjs.map +1 -1
- package/build/link/Link.js +2 -2
- package/build/link/Link.mjs +2 -2
- package/build/main.css +46 -75
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js.map +1 -0
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.mjs.map +1 -0
- package/build/primitives/PrimitiveButton/{src/PrimitiveButton.js → PrimitiveButton.js} +1 -1
- package/build/primitives/PrimitiveButton/PrimitiveButton.js.map +1 -0
- package/build/primitives/PrimitiveButton/{src/PrimitiveButton.mjs → PrimitiveButton.mjs} +1 -1
- package/build/primitives/PrimitiveButton/PrimitiveButton.mjs.map +1 -0
- package/build/styles/alert/Alert.css +4 -0
- package/build/styles/carousel/Carousel.css +0 -8
- package/build/styles/common/closeButton/CloseButton.css +15 -0
- package/build/styles/criticalBanner/CriticalCommsBanner.css +33 -73
- package/build/styles/main.css +46 -75
- package/build/table/TableCell.js +7 -1
- package/build/table/TableCell.js.map +1 -1
- package/build/table/TableCell.mjs +7 -1
- package/build/table/TableCell.mjs.map +1 -1
- package/build/test-utils/assets/wise-card.svg +1 -0
- package/build/types/actionButton/ActionButton.d.ts +6 -0
- package/build/types/actionButton/ActionButton.d.ts.map +1 -1
- package/build/types/actionOption/ActionOption.d.ts +2 -1
- package/build/types/actionOption/ActionOption.d.ts.map +1 -1
- package/build/types/alert/Alert.d.ts +3 -4
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/avatar/Avatar.d.ts +3 -0
- package/build/types/avatar/Avatar.d.ts.map +1 -1
- package/build/types/avatar/avatarTypes.d.ts +3 -0
- package/build/types/avatar/avatarTypes.d.ts.map +1 -1
- package/build/types/badge/Badge.d.ts +3 -0
- package/build/types/badge/Badge.d.ts.map +1 -1
- package/build/types/button/LegacyButton.d.ts +27 -0
- package/build/types/button/LegacyButton.d.ts.map +1 -1
- package/build/types/carousel/Carousel.d.ts.map +1 -1
- package/build/types/common/action/Action.d.ts +5 -2
- package/build/types/common/action/Action.d.ts.map +1 -1
- package/build/types/common/closeButton/CloseButton.d.ts +3 -3
- package/build/types/common/closeButton/CloseButton.d.ts.map +1 -1
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
- package/build/types/iconButton/IconButton.d.ts +2 -2
- package/build/types/iconButton/IconButton.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.d.ts → PrimitiveAnchor.d.ts} +1 -1
- package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.types.d.ts → PrimitiveAnchor.types.d.ts} +1 -1
- package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveAnchor/index.d.ts +2 -2
- package/build/types/primitives/PrimitiveAnchor/index.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveButton/{src/PrimitiveButton.d.ts → PrimitiveButton.d.ts} +1 -1
- package/build/types/primitives/PrimitiveButton/PrimitiveButton.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveButton/{src/PrimitiveButton.types.d.ts → PrimitiveButton.types.d.ts} +1 -1
- package/build/types/primitives/PrimitiveButton/PrimitiveButton.types.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveButton/index.d.ts +2 -2
- package/build/types/primitives/PrimitiveButton/index.d.ts.map +1 -1
- package/build/types/table/TableCell.d.ts +6 -3
- package/build/types/table/TableCell.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/actionButton/ActionButton.story.tsx +6 -1
- package/src/actionButton/ActionButton.tsx +6 -0
- package/src/actionOption/ActionOption.story.tsx +9 -6
- package/src/actionOption/ActionOption.tsx +29 -5
- package/src/alert/Alert.css +4 -0
- package/src/alert/Alert.less +4 -0
- package/src/alert/Alert.spec.tsx +0 -30
- package/src/alert/Alert.story.tsx +74 -2
- package/src/alert/Alert.tsx +18 -21
- package/src/avatar/Avatar.tsx +3 -0
- package/src/avatar/avatarTypes.ts +3 -1
- package/src/badge/Badge.tsx +3 -0
- package/src/button/LegacyButton.tsx +27 -0
- package/src/carousel/Carousel.css +0 -8
- package/src/carousel/Carousel.less +0 -7
- package/src/carousel/Carousel.spec.tsx +2 -2
- package/src/carousel/Carousel.tsx +11 -10
- package/src/common/action/Action.tsx +40 -22
- package/src/common/closeButton/CloseButton.css +15 -0
- package/src/common/closeButton/CloseButton.less +10 -0
- package/src/common/closeButton/CloseButton.tsx +4 -3
- package/src/criticalBanner/CriticalCommsBanner.css +33 -73
- package/src/criticalBanner/CriticalCommsBanner.less +37 -64
- package/src/criticalBanner/CriticalCommsBanner.story.tsx +26 -4
- package/src/criticalBanner/CriticalCommsBanner.tsx +8 -50
- package/src/iconButton/IconButton.tsx +4 -1
- package/src/main.css +46 -75
- package/src/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.tsx → PrimitiveAnchor.tsx} +1 -1
- package/src/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.types.ts → PrimitiveAnchor.types.ts} +1 -1
- package/src/primitives/PrimitiveAnchor/index.ts +6 -2
- package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +1 -1
- package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -1
- package/src/primitives/PrimitiveButton/{src/PrimitiveButton.tsx → PrimitiveButton.tsx} +2 -2
- package/src/primitives/PrimitiveButton/{src/PrimitiveButton.types.ts → PrimitiveButton.types.ts} +1 -1
- package/src/primitives/PrimitiveButton/index.ts +6 -2
- package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +1 -1
- package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +1 -1
- package/src/table/Table.story.tsx +59 -1
- package/src/table/TableCell.spec.tsx +17 -0
- package/src/table/TableCell.tsx +14 -5
- package/src/test-utils/assets/wise-card.svg +1 -0
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +0 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +0 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +0 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +0 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveAnchor/src/index.d.ts +0 -3
- package/build/types/primitives/PrimitiveAnchor/src/index.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveButton/src/index.d.ts +0 -3
- package/build/types/primitives/PrimitiveButton/src/index.d.ts.map +0 -1
- package/src/primitives/PrimitiveAnchor/src/index.ts +0 -6
- package/src/primitives/PrimitiveButton/src/index.ts +0 -6
- /package/build/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.js → PrimitiveAnchor.js} +0 -0
- /package/build/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.mjs → PrimitiveAnchor.mjs} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LegacyButton.js","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\nexport type CommonProps = {\n v2?: false;\n\n as?: 'a' | 'button';\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\nexport type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'>;\n\ntype AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'>;\n\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"LegacyButton.js","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type CommonProps = {\n v2?: false;\n\n as?: 'a' | 'button';\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'>;\n\ntype AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'>;\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LegacyButton.mjs","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\nexport type CommonProps = {\n v2?: false;\n\n as?: 'a' | 'button';\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\nexport type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'>;\n\ntype AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'>;\n\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"LegacyButton.mjs","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type CommonProps = {\n v2?: false;\n\n as?: 'a' | 'button';\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'>;\n\ntype AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'>;\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var icons = require('@transferwise/icons');
|
|
4
4
|
var clsx = require('clsx');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var
|
|
6
|
+
var IconButton = require('../iconButton/IconButton.js');
|
|
7
7
|
var Title = require('../title/Title.js');
|
|
8
8
|
var PromoCard = require('../promoCard/PromoCard.js');
|
|
9
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -119,20 +119,21 @@ const Carousel = ({
|
|
|
119
119
|
type: "title-body",
|
|
120
120
|
children: header
|
|
121
121
|
}) : header, areActionButtonsEnabled ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
122
|
-
className: "hidden-xs",
|
|
123
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(
|
|
124
|
-
|
|
122
|
+
className: "hidden-xs d-inline-flex",
|
|
123
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(IconButton, {
|
|
124
|
+
size: 32,
|
|
125
125
|
tabIndex: -1,
|
|
126
|
-
priority: "
|
|
126
|
+
priority: "tertiary",
|
|
127
127
|
disabled: !isLeftActionButtonEnabled,
|
|
128
128
|
"aria-hidden": "true",
|
|
129
129
|
"data-testid": "scroll-carousel-left",
|
|
130
130
|
onClick: () => scrollCarousel('left'),
|
|
131
131
|
children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeft, {})
|
|
132
|
-
}), /*#__PURE__*/jsxRuntime.jsx(
|
|
132
|
+
}), /*#__PURE__*/jsxRuntime.jsx(IconButton, {
|
|
133
|
+
size: 32,
|
|
133
134
|
tabIndex: -1,
|
|
134
|
-
className: "
|
|
135
|
-
priority: "
|
|
135
|
+
className: "m-l-1",
|
|
136
|
+
priority: "tertiary",
|
|
136
137
|
"aria-hidden": "true",
|
|
137
138
|
"data-testid": "scroll-carousel-right",
|
|
138
139
|
disabled: scrollIsAtEnd,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../../src/carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport ActionButton from '../actionButton';\nimport Title from '../title';\nimport type { PromoCardLinkProps } from '../promoCard/PromoCard';\nimport PromoCard from '../promoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n id: string;\n href?: string;\n hrefTarget?: HTMLAnchorElement['target'];\n onClick?: () => void;\n className?: string;\n styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n type: 'anchor' | 'button';\n content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n header: string | ReactNode;\n className?: string;\n cards: CarouselCard[];\n onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n type: 'promo' | 'default';\n cardElement: HTMLDivElement | HTMLAnchorElement;\n anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n const [scrollPosition, setScrollPosition] = useState(0);\n const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n const carouselElementRef = useRef<HTMLDivElement>(null);\n const carouselCardsRef = useRef<CardsReference[]>([]);\n\n const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;\n\n const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n const updateScrollButtonsState = () => {\n if (carouselElementRef.current) {\n const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n setScrollIsAtEnd(scrollAtEnd);\n }\n\n const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n const cardsInFullViewIds: string[] = [];\n carouselCardsRef.current.forEach((card) => {\n if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n // eslint-disable-next-line functional/immutable-data\n cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n }\n });\n\n if (cardsInFullViewIds.length >= 1) {\n const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n setVisibleCardOnMobileView(visibleCardId);\n setFocusedCard(visibleCardId);\n }\n\n setPreviousScrollPosition(scrollPosition);\n };\n\n const scrollCarousel = (direction: 'left' | 'right' = 'right') => {\n if (carouselElementRef.current) {\n const { scrollWidth } = carouselElementRef.current;\n\n const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n const res = Math.floor(cardWidth - cardWidth * 0.05);\n\n carouselElementRef.current.scrollBy({\n left: direction === 'right' ? res : -res,\n behavior: 'smooth',\n });\n }\n };\n\n const handleOnKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n index: number,\n ) => {\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n const nextCard = cards[nextIndex];\n if (nextCard) {\n const ref = carouselCardsRef.current[nextIndex];\n if (ref.type === 'promo') {\n ref.anchorElement?.focus();\n } else {\n ref.cardElement?.focus();\n }\n\n scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n event.preventDefault();\n }\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.currentTarget.click();\n }\n };\n\n const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n element.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n });\n\n setFocusedCard(card.id);\n };\n\n useEffect(() => {\n updateScrollButtonsState();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [scrollPosition]);\n\n useEffect(() => {\n window.addEventListener('resize', updateScrollButtonsState);\n\n return () => {\n window.removeEventListener('resize', updateScrollButtonsState);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n if (ref) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n };\n }\n };\n\n return (\n <div className={clsx('carousel-wrapper', className)}>\n <div className=\"d-flex justify-content-between carousel__header\">\n {typeof header === 'string' ? (\n <Title as=\"span\" type=\"title-body\">\n {header}\n </Title>\n ) : (\n header\n )}\n {areActionButtonsEnabled ? (\n <div className=\"hidden-xs\">\n <ActionButton\n className=\"carousel__scroll-button\"\n tabIndex={-1}\n priority=\"secondary\"\n disabled={!isLeftActionButtonEnabled}\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-left\"\n onClick={() => scrollCarousel('left')}\n >\n <ChevronLeft />\n </ActionButton>\n <ActionButton\n tabIndex={-1}\n className=\"carousel__scroll-button m-l-1\"\n priority=\"secondary\"\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-right\"\n disabled={scrollIsAtEnd}\n onClick={() => scrollCarousel()}\n >\n <ChevronRight />\n </ActionButton>\n </div>\n ) : null}\n </div>\n <div\n ref={carouselElementRef}\n tabIndex={-1}\n role=\"list\"\n className=\"carousel\"\n onScroll={(event) => {\n const target = event.target as HTMLElement;\n setScrollPosition(target.scrollLeft);\n }}\n >\n {cards?.map((card, index) => {\n const sharedProps = {\n id: card.id,\n className: clsx('carousel__card', {\n 'carousel__card--focused': card.id === focusedCard,\n }),\n onClick: () => {\n card.onClick?.();\n onClick?.(card.id);\n },\n onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n scrollCardIntoView(event.currentTarget, card);\n },\n };\n\n const cardContent =\n card.type !== 'promo' ? (\n <div\n id={`${card.id}-content`}\n className={clsx('carousel__card-content', {\n [card.className ?? '']: !!card.className,\n })}\n // eslint-disable-next-line react/forbid-dom-props\n style={card.styles}\n >\n {card.content}\n </div>\n ) : null;\n\n if (card.type === 'button') {\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <div\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </div>\n </div>\n );\n }\n\n if (card.type === 'promo') {\n return (\n <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n <PromoCard\n {...{ ...card, type: undefined }}\n {...{ ...sharedProps }}\n ref={(el: HTMLDivElement | null) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n cardElement: el,\n });\n }\n }}\n anchorRef={(el: HTMLAnchorElement) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n anchorElement: el,\n });\n }\n }}\n anchorId={`${card.id}-anchor`}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n />\n </div>\n );\n }\n\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <a\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n href={card.href}\n target={card.hrefTarget}\n rel=\"noreferrer\"\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </a>\n </div>\n );\n })}\n </div>\n <div className=\"visible-xs\">\n <div className=\"carousel__indicators\">\n {cards?.map((card, index) => (\n <button\n key={`${card.id}-indicator`}\n data-testid={`${card.id}-indicator`}\n tabIndex={-1}\n aria-hidden\n type=\"button\"\n className={clsx('carousel__indicator', {\n 'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n })}\n onClick={() => {\n scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n }}\n />\n ))}\n </div>\n </div>\n </div>\n );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n const cWidth = container.offsetWidth;\n const cScrollOffset = container.scrollLeft;\n\n const elemLeft = el.offsetLeft - container.offsetLeft;\n const elemRight = elemLeft + el.offsetWidth;\n\n return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isLeftActionButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","res","Math","floor","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","ActionButton","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../../src/carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport IconButton from '../iconButton';\nimport Title from '../title';\nimport type { PromoCardLinkProps } from '../promoCard/PromoCard';\nimport PromoCard from '../promoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n id: string;\n href?: string;\n hrefTarget?: HTMLAnchorElement['target'];\n onClick?: () => void;\n className?: string;\n styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n type: 'anchor' | 'button';\n content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n header: string | ReactNode;\n className?: string;\n cards: CarouselCard[];\n onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n type: 'promo' | 'default';\n cardElement: HTMLDivElement | HTMLAnchorElement;\n anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n const [scrollPosition, setScrollPosition] = useState(0);\n const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n const carouselElementRef = useRef<HTMLDivElement>(null);\n const carouselCardsRef = useRef<CardsReference[]>([]);\n\n const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;\n\n const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n const updateScrollButtonsState = () => {\n if (carouselElementRef.current) {\n const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n setScrollIsAtEnd(scrollAtEnd);\n }\n\n const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n const cardsInFullViewIds: string[] = [];\n carouselCardsRef.current.forEach((card) => {\n if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n // eslint-disable-next-line functional/immutable-data\n cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n }\n });\n\n if (cardsInFullViewIds.length >= 1) {\n const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n setVisibleCardOnMobileView(visibleCardId);\n setFocusedCard(visibleCardId);\n }\n\n setPreviousScrollPosition(scrollPosition);\n };\n\n const scrollCarousel = (direction: 'left' | 'right' = 'right') => {\n if (carouselElementRef.current) {\n const { scrollWidth } = carouselElementRef.current;\n\n const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n const res = Math.floor(cardWidth - cardWidth * 0.05);\n\n carouselElementRef.current.scrollBy({\n left: direction === 'right' ? res : -res,\n behavior: 'smooth',\n });\n }\n };\n\n const handleOnKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n index: number,\n ) => {\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n const nextCard = cards[nextIndex];\n if (nextCard) {\n const ref = carouselCardsRef.current[nextIndex];\n if (ref.type === 'promo') {\n ref.anchorElement?.focus();\n } else {\n ref.cardElement?.focus();\n }\n\n scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n event.preventDefault();\n }\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.currentTarget.click();\n }\n };\n\n const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n element.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n });\n\n setFocusedCard(card.id);\n };\n\n useEffect(() => {\n updateScrollButtonsState();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [scrollPosition]);\n\n useEffect(() => {\n window.addEventListener('resize', updateScrollButtonsState);\n\n return () => {\n window.removeEventListener('resize', updateScrollButtonsState);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n if (ref) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n };\n }\n };\n\n return (\n <div className={clsx('carousel-wrapper', className)}>\n <div className=\"d-flex justify-content-between carousel__header\">\n {typeof header === 'string' ? (\n <Title as=\"span\" type=\"title-body\">\n {header}\n </Title>\n ) : (\n header\n )}\n {areActionButtonsEnabled ? (\n <div className=\"hidden-xs d-inline-flex\">\n <IconButton\n size={32}\n tabIndex={-1}\n priority=\"tertiary\"\n disabled={!isLeftActionButtonEnabled}\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-left\"\n onClick={() => scrollCarousel('left')}\n >\n <ChevronLeft />\n </IconButton>\n <IconButton\n size={32}\n tabIndex={-1}\n className=\"m-l-1\"\n priority=\"tertiary\"\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-right\"\n disabled={scrollIsAtEnd}\n onClick={() => scrollCarousel()}\n >\n <ChevronRight />\n </IconButton>\n </div>\n ) : null}\n </div>\n <div\n ref={carouselElementRef}\n tabIndex={-1}\n role=\"list\"\n className=\"carousel\"\n onScroll={(event) => {\n const target = event.target as HTMLElement;\n setScrollPosition(target.scrollLeft);\n }}\n >\n {cards?.map((card, index) => {\n const sharedProps = {\n id: card.id,\n className: clsx('carousel__card', {\n 'carousel__card--focused': card.id === focusedCard,\n }),\n onClick: () => {\n card.onClick?.();\n onClick?.(card.id);\n },\n onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n scrollCardIntoView(event.currentTarget, card);\n },\n };\n\n const cardContent =\n card.type !== 'promo' ? (\n <div\n id={`${card.id}-content`}\n className={clsx('carousel__card-content', {\n [card.className ?? '']: !!card.className,\n })}\n // eslint-disable-next-line react/forbid-dom-props\n style={card.styles}\n >\n {card.content}\n </div>\n ) : null;\n\n if (card.type === 'button') {\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <div\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </div>\n </div>\n );\n }\n\n if (card.type === 'promo') {\n return (\n <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n <PromoCard\n {...{ ...card, type: undefined }}\n {...{ ...sharedProps }}\n ref={(el: HTMLDivElement | null) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n cardElement: el,\n });\n }\n }}\n anchorRef={(el: HTMLAnchorElement) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n anchorElement: el,\n });\n }\n }}\n anchorId={`${card.id}-anchor`}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n />\n </div>\n );\n }\n\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <a\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n href={card.href}\n target={card.hrefTarget}\n rel=\"noreferrer\"\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </a>\n </div>\n );\n })}\n </div>\n <div className=\"visible-xs\">\n <div className=\"carousel__indicators\">\n {cards?.map((card, index) => (\n <button\n key={`${card.id}-indicator`}\n data-testid={`${card.id}-indicator`}\n tabIndex={-1}\n aria-hidden\n type=\"button\"\n className={clsx('carousel__indicator', {\n 'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n })}\n onClick={() => {\n scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n }}\n />\n ))}\n </div>\n </div>\n </div>\n );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n const cWidth = container.offsetWidth;\n const cScrollOffset = container.scrollLeft;\n\n const elemLeft = el.offsetLeft - container.offsetLeft;\n const elemRight = elemLeft + el.offsetWidth;\n\n return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isLeftActionButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","res","Math","floor","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","IconButton","size","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ChevronLeft, ChevronRight } from '@transferwise/icons';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { useState, useRef, useEffect } from 'react';
|
|
4
|
-
import
|
|
4
|
+
import IconButton from '../iconButton/IconButton.mjs';
|
|
5
5
|
import Title from '../title/Title.mjs';
|
|
6
6
|
import PromoCard from '../promoCard/PromoCard.mjs';
|
|
7
7
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
@@ -117,20 +117,21 @@ const Carousel = ({
|
|
|
117
117
|
type: "title-body",
|
|
118
118
|
children: header
|
|
119
119
|
}) : header, areActionButtonsEnabled ? /*#__PURE__*/jsxs("div", {
|
|
120
|
-
className: "hidden-xs",
|
|
121
|
-
children: [/*#__PURE__*/jsx(
|
|
122
|
-
|
|
120
|
+
className: "hidden-xs d-inline-flex",
|
|
121
|
+
children: [/*#__PURE__*/jsx(IconButton, {
|
|
122
|
+
size: 32,
|
|
123
123
|
tabIndex: -1,
|
|
124
|
-
priority: "
|
|
124
|
+
priority: "tertiary",
|
|
125
125
|
disabled: !isLeftActionButtonEnabled,
|
|
126
126
|
"aria-hidden": "true",
|
|
127
127
|
"data-testid": "scroll-carousel-left",
|
|
128
128
|
onClick: () => scrollCarousel('left'),
|
|
129
129
|
children: /*#__PURE__*/jsx(ChevronLeft, {})
|
|
130
|
-
}), /*#__PURE__*/jsx(
|
|
130
|
+
}), /*#__PURE__*/jsx(IconButton, {
|
|
131
|
+
size: 32,
|
|
131
132
|
tabIndex: -1,
|
|
132
|
-
className: "
|
|
133
|
-
priority: "
|
|
133
|
+
className: "m-l-1",
|
|
134
|
+
priority: "tertiary",
|
|
134
135
|
"aria-hidden": "true",
|
|
135
136
|
"data-testid": "scroll-carousel-right",
|
|
136
137
|
disabled: scrollIsAtEnd,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.mjs","sources":["../../src/carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport ActionButton from '../actionButton';\nimport Title from '../title';\nimport type { PromoCardLinkProps } from '../promoCard/PromoCard';\nimport PromoCard from '../promoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n id: string;\n href?: string;\n hrefTarget?: HTMLAnchorElement['target'];\n onClick?: () => void;\n className?: string;\n styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n type: 'anchor' | 'button';\n content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n header: string | ReactNode;\n className?: string;\n cards: CarouselCard[];\n onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n type: 'promo' | 'default';\n cardElement: HTMLDivElement | HTMLAnchorElement;\n anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n const [scrollPosition, setScrollPosition] = useState(0);\n const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n const carouselElementRef = useRef<HTMLDivElement>(null);\n const carouselCardsRef = useRef<CardsReference[]>([]);\n\n const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;\n\n const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n const updateScrollButtonsState = () => {\n if (carouselElementRef.current) {\n const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n setScrollIsAtEnd(scrollAtEnd);\n }\n\n const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n const cardsInFullViewIds: string[] = [];\n carouselCardsRef.current.forEach((card) => {\n if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n // eslint-disable-next-line functional/immutable-data\n cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n }\n });\n\n if (cardsInFullViewIds.length >= 1) {\n const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n setVisibleCardOnMobileView(visibleCardId);\n setFocusedCard(visibleCardId);\n }\n\n setPreviousScrollPosition(scrollPosition);\n };\n\n const scrollCarousel = (direction: 'left' | 'right' = 'right') => {\n if (carouselElementRef.current) {\n const { scrollWidth } = carouselElementRef.current;\n\n const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n const res = Math.floor(cardWidth - cardWidth * 0.05);\n\n carouselElementRef.current.scrollBy({\n left: direction === 'right' ? res : -res,\n behavior: 'smooth',\n });\n }\n };\n\n const handleOnKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n index: number,\n ) => {\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n const nextCard = cards[nextIndex];\n if (nextCard) {\n const ref = carouselCardsRef.current[nextIndex];\n if (ref.type === 'promo') {\n ref.anchorElement?.focus();\n } else {\n ref.cardElement?.focus();\n }\n\n scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n event.preventDefault();\n }\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.currentTarget.click();\n }\n };\n\n const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n element.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n });\n\n setFocusedCard(card.id);\n };\n\n useEffect(() => {\n updateScrollButtonsState();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [scrollPosition]);\n\n useEffect(() => {\n window.addEventListener('resize', updateScrollButtonsState);\n\n return () => {\n window.removeEventListener('resize', updateScrollButtonsState);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n if (ref) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n };\n }\n };\n\n return (\n <div className={clsx('carousel-wrapper', className)}>\n <div className=\"d-flex justify-content-between carousel__header\">\n {typeof header === 'string' ? (\n <Title as=\"span\" type=\"title-body\">\n {header}\n </Title>\n ) : (\n header\n )}\n {areActionButtonsEnabled ? (\n <div className=\"hidden-xs\">\n <ActionButton\n className=\"carousel__scroll-button\"\n tabIndex={-1}\n priority=\"secondary\"\n disabled={!isLeftActionButtonEnabled}\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-left\"\n onClick={() => scrollCarousel('left')}\n >\n <ChevronLeft />\n </ActionButton>\n <ActionButton\n tabIndex={-1}\n className=\"carousel__scroll-button m-l-1\"\n priority=\"secondary\"\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-right\"\n disabled={scrollIsAtEnd}\n onClick={() => scrollCarousel()}\n >\n <ChevronRight />\n </ActionButton>\n </div>\n ) : null}\n </div>\n <div\n ref={carouselElementRef}\n tabIndex={-1}\n role=\"list\"\n className=\"carousel\"\n onScroll={(event) => {\n const target = event.target as HTMLElement;\n setScrollPosition(target.scrollLeft);\n }}\n >\n {cards?.map((card, index) => {\n const sharedProps = {\n id: card.id,\n className: clsx('carousel__card', {\n 'carousel__card--focused': card.id === focusedCard,\n }),\n onClick: () => {\n card.onClick?.();\n onClick?.(card.id);\n },\n onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n scrollCardIntoView(event.currentTarget, card);\n },\n };\n\n const cardContent =\n card.type !== 'promo' ? (\n <div\n id={`${card.id}-content`}\n className={clsx('carousel__card-content', {\n [card.className ?? '']: !!card.className,\n })}\n // eslint-disable-next-line react/forbid-dom-props\n style={card.styles}\n >\n {card.content}\n </div>\n ) : null;\n\n if (card.type === 'button') {\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <div\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </div>\n </div>\n );\n }\n\n if (card.type === 'promo') {\n return (\n <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n <PromoCard\n {...{ ...card, type: undefined }}\n {...{ ...sharedProps }}\n ref={(el: HTMLDivElement | null) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n cardElement: el,\n });\n }\n }}\n anchorRef={(el: HTMLAnchorElement) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n anchorElement: el,\n });\n }\n }}\n anchorId={`${card.id}-anchor`}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n />\n </div>\n );\n }\n\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <a\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n href={card.href}\n target={card.hrefTarget}\n rel=\"noreferrer\"\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </a>\n </div>\n );\n })}\n </div>\n <div className=\"visible-xs\">\n <div className=\"carousel__indicators\">\n {cards?.map((card, index) => (\n <button\n key={`${card.id}-indicator`}\n data-testid={`${card.id}-indicator`}\n tabIndex={-1}\n aria-hidden\n type=\"button\"\n className={clsx('carousel__indicator', {\n 'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n })}\n onClick={() => {\n scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n }}\n />\n ))}\n </div>\n </div>\n </div>\n );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n const cWidth = container.offsetWidth;\n const cScrollOffset = container.scrollLeft;\n\n const elemLeft = el.offsetLeft - container.offsetLeft;\n const elemRight = elemLeft + el.offsetWidth;\n\n return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isLeftActionButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","res","Math","floor","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","ActionButton","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.mjs","sources":["../../src/carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport IconButton from '../iconButton';\nimport Title from '../title';\nimport type { PromoCardLinkProps } from '../promoCard/PromoCard';\nimport PromoCard from '../promoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n id: string;\n href?: string;\n hrefTarget?: HTMLAnchorElement['target'];\n onClick?: () => void;\n className?: string;\n styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n type: 'anchor' | 'button';\n content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n header: string | ReactNode;\n className?: string;\n cards: CarouselCard[];\n onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n type: 'promo' | 'default';\n cardElement: HTMLDivElement | HTMLAnchorElement;\n anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n const [scrollPosition, setScrollPosition] = useState(0);\n const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n const carouselElementRef = useRef<HTMLDivElement>(null);\n const carouselCardsRef = useRef<CardsReference[]>([]);\n\n const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;\n\n const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n const updateScrollButtonsState = () => {\n if (carouselElementRef.current) {\n const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n setScrollIsAtEnd(scrollAtEnd);\n }\n\n const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n const cardsInFullViewIds: string[] = [];\n carouselCardsRef.current.forEach((card) => {\n if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n // eslint-disable-next-line functional/immutable-data\n cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n }\n });\n\n if (cardsInFullViewIds.length >= 1) {\n const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n setVisibleCardOnMobileView(visibleCardId);\n setFocusedCard(visibleCardId);\n }\n\n setPreviousScrollPosition(scrollPosition);\n };\n\n const scrollCarousel = (direction: 'left' | 'right' = 'right') => {\n if (carouselElementRef.current) {\n const { scrollWidth } = carouselElementRef.current;\n\n const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n const res = Math.floor(cardWidth - cardWidth * 0.05);\n\n carouselElementRef.current.scrollBy({\n left: direction === 'right' ? res : -res,\n behavior: 'smooth',\n });\n }\n };\n\n const handleOnKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n index: number,\n ) => {\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n const nextCard = cards[nextIndex];\n if (nextCard) {\n const ref = carouselCardsRef.current[nextIndex];\n if (ref.type === 'promo') {\n ref.anchorElement?.focus();\n } else {\n ref.cardElement?.focus();\n }\n\n scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n event.preventDefault();\n }\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.currentTarget.click();\n }\n };\n\n const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n element.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n });\n\n setFocusedCard(card.id);\n };\n\n useEffect(() => {\n updateScrollButtonsState();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [scrollPosition]);\n\n useEffect(() => {\n window.addEventListener('resize', updateScrollButtonsState);\n\n return () => {\n window.removeEventListener('resize', updateScrollButtonsState);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n if (ref) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n };\n }\n };\n\n return (\n <div className={clsx('carousel-wrapper', className)}>\n <div className=\"d-flex justify-content-between carousel__header\">\n {typeof header === 'string' ? (\n <Title as=\"span\" type=\"title-body\">\n {header}\n </Title>\n ) : (\n header\n )}\n {areActionButtonsEnabled ? (\n <div className=\"hidden-xs d-inline-flex\">\n <IconButton\n size={32}\n tabIndex={-1}\n priority=\"tertiary\"\n disabled={!isLeftActionButtonEnabled}\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-left\"\n onClick={() => scrollCarousel('left')}\n >\n <ChevronLeft />\n </IconButton>\n <IconButton\n size={32}\n tabIndex={-1}\n className=\"m-l-1\"\n priority=\"tertiary\"\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-right\"\n disabled={scrollIsAtEnd}\n onClick={() => scrollCarousel()}\n >\n <ChevronRight />\n </IconButton>\n </div>\n ) : null}\n </div>\n <div\n ref={carouselElementRef}\n tabIndex={-1}\n role=\"list\"\n className=\"carousel\"\n onScroll={(event) => {\n const target = event.target as HTMLElement;\n setScrollPosition(target.scrollLeft);\n }}\n >\n {cards?.map((card, index) => {\n const sharedProps = {\n id: card.id,\n className: clsx('carousel__card', {\n 'carousel__card--focused': card.id === focusedCard,\n }),\n onClick: () => {\n card.onClick?.();\n onClick?.(card.id);\n },\n onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n scrollCardIntoView(event.currentTarget, card);\n },\n };\n\n const cardContent =\n card.type !== 'promo' ? (\n <div\n id={`${card.id}-content`}\n className={clsx('carousel__card-content', {\n [card.className ?? '']: !!card.className,\n })}\n // eslint-disable-next-line react/forbid-dom-props\n style={card.styles}\n >\n {card.content}\n </div>\n ) : null;\n\n if (card.type === 'button') {\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <div\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </div>\n </div>\n );\n }\n\n if (card.type === 'promo') {\n return (\n <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n <PromoCard\n {...{ ...card, type: undefined }}\n {...{ ...sharedProps }}\n ref={(el: HTMLDivElement | null) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n cardElement: el,\n });\n }\n }}\n anchorRef={(el: HTMLAnchorElement) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n anchorElement: el,\n });\n }\n }}\n anchorId={`${card.id}-anchor`}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n />\n </div>\n );\n }\n\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <a\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n href={card.href}\n target={card.hrefTarget}\n rel=\"noreferrer\"\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </a>\n </div>\n );\n })}\n </div>\n <div className=\"visible-xs\">\n <div className=\"carousel__indicators\">\n {cards?.map((card, index) => (\n <button\n key={`${card.id}-indicator`}\n data-testid={`${card.id}-indicator`}\n tabIndex={-1}\n aria-hidden\n type=\"button\"\n className={clsx('carousel__indicator', {\n 'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n })}\n onClick={() => {\n scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n }}\n />\n ))}\n </div>\n </div>\n </div>\n );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n const cWidth = container.offsetWidth;\n const cScrollOffset = container.scrollLeft;\n\n const elemLeft = el.offsetLeft - container.offsetLeft;\n const elemRight = elemLeft + el.offsetWidth;\n\n return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isLeftActionButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","res","Math","floor","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","IconButton","size","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}
|
|
@@ -3,14 +3,16 @@
|
|
|
3
3
|
var clsx = require('clsx');
|
|
4
4
|
var Link = require('../../link/Link.js');
|
|
5
5
|
var typography = require('../propsValues/typography.js');
|
|
6
|
-
var ActionButton = require('../../actionButton/ActionButton.js');
|
|
7
6
|
var control = require('../propsValues/control.js');
|
|
7
|
+
var Button_resolver = require('../../button/Button.resolver.js');
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
9
|
|
|
10
10
|
function Action({
|
|
11
11
|
action,
|
|
12
12
|
className,
|
|
13
|
-
variant = 'button'
|
|
13
|
+
variant = 'button',
|
|
14
|
+
sentiment = 'default',
|
|
15
|
+
priority = control.Priority.SECONDARY
|
|
14
16
|
}) {
|
|
15
17
|
if ('href' in action) {
|
|
16
18
|
return /*#__PURE__*/jsxRuntime.jsx(Link, {
|
|
@@ -23,19 +25,28 @@ function Action({
|
|
|
23
25
|
children: action.text
|
|
24
26
|
});
|
|
25
27
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
switch (variant) {
|
|
29
|
+
case 'action-button':
|
|
30
|
+
return /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
|
|
31
|
+
v2: true,
|
|
32
|
+
size: "sm",
|
|
33
|
+
sentiment: sentiment,
|
|
34
|
+
"aria-label": action['aria-label'],
|
|
35
|
+
priority: priority,
|
|
36
|
+
className: clsx.clsx(className),
|
|
37
|
+
onClick: action.onClick,
|
|
38
|
+
children: action.text
|
|
39
|
+
});
|
|
40
|
+
case 'button':
|
|
41
|
+
default:
|
|
42
|
+
return /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
43
|
+
type: "button",
|
|
44
|
+
"aria-label": action['aria-label'],
|
|
45
|
+
className: clsx.clsx('btn-unstyled np-text-link-large', className),
|
|
46
|
+
onClick: action.onClick,
|
|
47
|
+
children: action.text
|
|
48
|
+
});
|
|
49
|
+
}
|
|
39
50
|
}
|
|
40
51
|
|
|
41
52
|
exports.Action = Action;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Action.js","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport
|
|
1
|
+
{"version":3,"file":"Action.js","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport { Priority } from '../propsValues/control';\nimport Button from '../../button';\nimport { ButtonPriority, ButtonSentiment } from '../../button/Button.types';\n\nexport type ActionOptions = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\ntype Props = {\n action: ActionOptions;\n className?: string;\n variant?: 'button' | 'action-button';\n sentiment?: ButtonSentiment;\n priority?: ButtonPriority;\n};\n\nexport function Action({\n action,\n className,\n variant = 'button',\n sentiment = 'default',\n priority = Priority.SECONDARY,\n}: Props) {\n if ('href' in action) {\n return (\n <Link\n href={action.href}\n className={className}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n }\n\n switch (variant) {\n case 'action-button':\n return (\n <Button\n v2\n size=\"sm\"\n sentiment={sentiment}\n aria-label={action['aria-label']}\n priority={priority}\n className={clsx(className)}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n );\n case 'button':\n default:\n return (\n <button\n type=\"button\"\n aria-label={action['aria-label']}\n className={clsx('btn-unstyled np-text-link-large', className)}\n onClick={action.onClick}\n >\n {action.text}\n </button>\n );\n }\n}\n"],"names":["Action","action","className","variant","sentiment","priority","Priority","SECONDARY","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","Button","v2","size","clsx"],"mappings":";;;;;;;;;AAuBM,SAAUA,MAAMA,CAAC;EACrBC,MAAM;EACNC,SAAS;AACTC,EAAAA,OAAO,GAAG,QAAQ;AAClBC,EAAAA,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAGC,gBAAQ,CAACC,SAAAA;AACd,CAAA,EAAA;EACN,IAAI,MAAM,IAAIN,MAAM,EAAE;IACpB,oBACEO,cAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAET,MAAM,CAACS,IAAK;AAClBR,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCU,MAAM,EAAEV,MAAM,CAACU,MAAO;MACtBC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEd,MAAM,CAACc,OAAQ;MAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,QAAQd,OAAO;AACb,IAAA,KAAK,eAAe;MAClB,oBACEK,cAAA,CAACU,eAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFC,QAAAA,IAAI,EAAC,IAAI;AACThB,QAAAA,SAAS,EAAEA,SAAU;QACrB,YAAYH,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCI,QAAAA,QAAQ,EAAEA,QAAS;AACnBH,QAAAA,SAAS,EAAEmB,SAAI,CAACnB,SAAS,CAAE;QAC3Ba,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEb,IAAA,KAAK,QAAQ,CAAA;AACb,IAAA;AACE,MAAA,oBACET,cAAA,CAAA,QAAA,EAAA;AACEI,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAYX,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,QAAAA,SAAS,EAAEmB,SAAI,CAAC,iCAAiC,EAAEnB,SAAS,CAAE;QAC9Da,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEf,GAAA;AACF;;;;"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import Link from '../../link/Link.mjs';
|
|
3
3
|
import { Typography } from '../propsValues/typography.mjs';
|
|
4
|
-
import ActionButton from '../../actionButton/ActionButton.mjs';
|
|
5
4
|
import { Priority } from '../propsValues/control.mjs';
|
|
5
|
+
import Button from '../../button/Button.resolver.mjs';
|
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
8
|
function Action({
|
|
9
9
|
action,
|
|
10
10
|
className,
|
|
11
|
-
variant = 'button'
|
|
11
|
+
variant = 'button',
|
|
12
|
+
sentiment = 'default',
|
|
13
|
+
priority = Priority.SECONDARY
|
|
12
14
|
}) {
|
|
13
15
|
if ('href' in action) {
|
|
14
16
|
return /*#__PURE__*/jsx(Link, {
|
|
@@ -21,19 +23,28 @@ function Action({
|
|
|
21
23
|
children: action.text
|
|
22
24
|
});
|
|
23
25
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
26
|
+
switch (variant) {
|
|
27
|
+
case 'action-button':
|
|
28
|
+
return /*#__PURE__*/jsx(Button, {
|
|
29
|
+
v2: true,
|
|
30
|
+
size: "sm",
|
|
31
|
+
sentiment: sentiment,
|
|
32
|
+
"aria-label": action['aria-label'],
|
|
33
|
+
priority: priority,
|
|
34
|
+
className: clsx(className),
|
|
35
|
+
onClick: action.onClick,
|
|
36
|
+
children: action.text
|
|
37
|
+
});
|
|
38
|
+
case 'button':
|
|
39
|
+
default:
|
|
40
|
+
return /*#__PURE__*/jsx("button", {
|
|
41
|
+
type: "button",
|
|
42
|
+
"aria-label": action['aria-label'],
|
|
43
|
+
className: clsx('btn-unstyled np-text-link-large', className),
|
|
44
|
+
onClick: action.onClick,
|
|
45
|
+
children: action.text
|
|
46
|
+
});
|
|
47
|
+
}
|
|
37
48
|
}
|
|
38
49
|
|
|
39
50
|
export { Action };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Action.mjs","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport
|
|
1
|
+
{"version":3,"file":"Action.mjs","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport { Priority } from '../propsValues/control';\nimport Button from '../../button';\nimport { ButtonPriority, ButtonSentiment } from '../../button/Button.types';\n\nexport type ActionOptions = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\ntype Props = {\n action: ActionOptions;\n className?: string;\n variant?: 'button' | 'action-button';\n sentiment?: ButtonSentiment;\n priority?: ButtonPriority;\n};\n\nexport function Action({\n action,\n className,\n variant = 'button',\n sentiment = 'default',\n priority = Priority.SECONDARY,\n}: Props) {\n if ('href' in action) {\n return (\n <Link\n href={action.href}\n className={className}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n }\n\n switch (variant) {\n case 'action-button':\n return (\n <Button\n v2\n size=\"sm\"\n sentiment={sentiment}\n aria-label={action['aria-label']}\n priority={priority}\n className={clsx(className)}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n );\n case 'button':\n default:\n return (\n <button\n type=\"button\"\n aria-label={action['aria-label']}\n className={clsx('btn-unstyled np-text-link-large', className)}\n onClick={action.onClick}\n >\n {action.text}\n </button>\n );\n }\n}\n"],"names":["Action","action","className","variant","sentiment","priority","Priority","SECONDARY","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","Button","v2","size","clsx"],"mappings":";;;;;;;AAuBM,SAAUA,MAAMA,CAAC;EACrBC,MAAM;EACNC,SAAS;AACTC,EAAAA,OAAO,GAAG,QAAQ;AAClBC,EAAAA,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAGC,QAAQ,CAACC,SAAAA;AACd,CAAA,EAAA;EACN,IAAI,MAAM,IAAIN,MAAM,EAAE;IACpB,oBACEO,GAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAET,MAAM,CAACS,IAAK;AAClBR,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCU,MAAM,EAAEV,MAAM,CAACU,MAAO;MACtBC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEd,MAAM,CAACc,OAAQ;MAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,QAAQd,OAAO;AACb,IAAA,KAAK,eAAe;MAClB,oBACEK,GAAA,CAACU,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFC,QAAAA,IAAI,EAAC,IAAI;AACThB,QAAAA,SAAS,EAAEA,SAAU;QACrB,YAAYH,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCI,QAAAA,QAAQ,EAAEA,QAAS;AACnBH,QAAAA,SAAS,EAAEmB,IAAI,CAACnB,SAAS,CAAE;QAC3Ba,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEb,IAAA,KAAK,QAAQ,CAAA;AACb,IAAA;AACE,MAAA,oBACET,GAAA,CAAA,QAAA,EAAA;AACEI,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAYX,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,QAAAA,SAAS,EAAEmB,IAAI,CAAC,iCAAiC,EAAEnB,SAAS,CAAE;QAC9Da,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEf,GAAA;AACF;;;;"}
|
|
@@ -24,6 +24,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
|
|
|
24
24
|
ref: reference,
|
|
25
25
|
type: "button",
|
|
26
26
|
className: clsx.clsx('np-close-button', 'close btn-link', 'text-no-decoration', {
|
|
27
|
+
'np-close-button--x-small': size$1 === size.Size.EXTRA_SMALL,
|
|
27
28
|
'np-close-button--large': size$1 === size.Size.MEDIUM,
|
|
28
29
|
'np-close-button--x-large': size$1 === size.Size.LARGE
|
|
29
30
|
}, className),
|
|
@@ -33,7 +34,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
|
|
|
33
34
|
"data-testid": testId,
|
|
34
35
|
onClick: onClick,
|
|
35
36
|
children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
|
|
36
|
-
size: size$1 === size.Size.SMALL ? 16 : 24
|
|
37
|
+
size: size$1 === size.Size.SMALL || size$1 === size.Size.EXTRA_SMALL ? 16 : 24
|
|
37
38
|
})
|
|
38
39
|
});
|
|
39
40
|
});
|