@transferwise/components 46.82.0 → 46.83.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.
Files changed (141) hide show
  1. package/build/alert/Alert.js +2 -9
  2. package/build/alert/Alert.js.map +1 -1
  3. package/build/alert/Alert.mjs +2 -9
  4. package/build/alert/Alert.mjs.map +1 -1
  5. package/build/avatarLayout/AvatarLayout.js +111 -0
  6. package/build/avatarLayout/AvatarLayout.js.map +1 -0
  7. package/build/avatarLayout/AvatarLayout.mjs +109 -0
  8. package/build/avatarLayout/AvatarLayout.mjs.map +1 -0
  9. package/build/button/Button.js +1 -1
  10. package/build/button/Button.js.map +1 -1
  11. package/build/button/Button.mjs +1 -1
  12. package/build/button/Button.mjs.map +1 -1
  13. package/build/i18n/commonMessages/Button.messages.js.map +1 -0
  14. package/build/i18n/commonMessages/Button.messages.mjs.map +1 -0
  15. package/build/i18n/es.json +5 -0
  16. package/build/i18n/es.json.js +5 -0
  17. package/build/i18n/es.json.js.map +1 -1
  18. package/build/i18n/es.json.mjs +5 -0
  19. package/build/i18n/es.json.mjs.map +1 -1
  20. package/build/i18n/pl.json +5 -0
  21. package/build/i18n/pl.json.js +5 -0
  22. package/build/i18n/pl.json.js.map +1 -1
  23. package/build/i18n/pl.json.mjs +5 -0
  24. package/build/i18n/pl.json.mjs.map +1 -1
  25. package/build/i18n/ro.json +5 -0
  26. package/build/i18n/ro.json.js +5 -0
  27. package/build/i18n/ro.json.js.map +1 -1
  28. package/build/i18n/ro.json.mjs +5 -0
  29. package/build/i18n/ro.json.mjs.map +1 -1
  30. package/build/index.js +2 -0
  31. package/build/index.js.map +1 -1
  32. package/build/index.mjs +1 -0
  33. package/build/index.mjs.map +1 -1
  34. package/build/logo/Logo.js +11 -131
  35. package/build/logo/Logo.js.map +1 -1
  36. package/build/logo/Logo.mjs +1 -121
  37. package/build/logo/Logo.mjs.map +1 -1
  38. package/build/logo/logo-assets.js +134 -0
  39. package/build/logo/logo-assets.js.map +1 -0
  40. package/build/logo/logo-assets.mjs +125 -0
  41. package/build/logo/logo-assets.mjs.map +1 -0
  42. package/build/main.css +30 -0
  43. package/build/styles/avatarLayout/AvatarLayout.css +30 -0
  44. package/build/styles/main.css +30 -0
  45. package/build/types/alert/Alert.d.ts +1 -5
  46. package/build/types/alert/Alert.d.ts.map +1 -1
  47. package/build/types/avatarLayout/AvatarLayout.d.ts +11 -0
  48. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -0
  49. package/build/types/avatarLayout/index.d.ts +3 -0
  50. package/build/types/avatarLayout/index.d.ts.map +1 -0
  51. package/build/types/i18n/commonMessages/Button.messages.d.ts.map +1 -0
  52. package/build/types/index.d.ts +2 -0
  53. package/build/types/index.d.ts.map +1 -1
  54. package/build/types/logo/Logo.d.ts.map +1 -1
  55. package/build/types/logo/logo-assets.d.ts +10 -0
  56. package/build/types/logo/logo-assets.d.ts.map +1 -0
  57. package/build/types/primitives/PrimitiveAnchor/index.d.ts +3 -0
  58. package/build/types/primitives/PrimitiveAnchor/index.d.ts.map +1 -0
  59. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts +14 -0
  60. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -0
  61. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +21 -0
  62. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -0
  63. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts +3 -0
  64. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts.map +1 -0
  65. package/build/types/primitives/PrimitiveButton/index.d.ts +3 -0
  66. package/build/types/primitives/PrimitiveButton/index.d.ts.map +1 -0
  67. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts +14 -0
  68. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -0
  69. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts +21 -0
  70. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +1 -0
  71. package/build/types/primitives/PrimitiveButton/src/index.d.ts +3 -0
  72. package/build/types/primitives/PrimitiveButton/src/index.d.ts.map +1 -0
  73. package/build/types/primitives/index.d.ts +6 -0
  74. package/build/types/primitives/index.d.ts.map +1 -0
  75. package/build/types/primitives/types.d.ts +34 -0
  76. package/build/types/primitives/types.d.ts.map +1 -0
  77. package/build/types/test-utils/index.d.ts.map +1 -1
  78. package/package.json +1 -2
  79. package/src/alert/Alert.spec.story.tsx +0 -82
  80. package/src/alert/Alert.spec.tsx +0 -30
  81. package/src/alert/Alert.tsx +51 -67
  82. package/src/avatarLayout/AvatarLayout.css +30 -0
  83. package/src/avatarLayout/AvatarLayout.less +39 -0
  84. package/src/avatarLayout/AvatarLayout.story.tsx +277 -0
  85. package/src/avatarLayout/AvatarLayout.tsx +91 -0
  86. package/src/avatarLayout/index.ts +2 -0
  87. package/src/button/Button.spec.tsx +1 -1
  88. package/src/button/Button.tsx +1 -1
  89. package/src/i18n/es.json +5 -0
  90. package/src/i18n/pl.json +5 -0
  91. package/src/i18n/ro.json +5 -0
  92. package/src/index.ts +2 -0
  93. package/src/logo/Logo.tsx +10 -8
  94. package/src/logo/__snapshots__/Logo.spec.tsx.snap +16 -16
  95. package/src/logo/logo-assets.tsx +137 -0
  96. package/src/main.css +30 -0
  97. package/src/main.less +1 -0
  98. package/src/primitives/PrimitiveAnchor/index.ts +2 -0
  99. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +122 -0
  100. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +28 -0
  101. package/src/primitives/PrimitiveAnchor/src/index.ts +6 -0
  102. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +77 -0
  103. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +169 -0
  104. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +95 -0
  105. package/src/primitives/PrimitiveButton/index.ts +2 -0
  106. package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +131 -0
  107. package/src/primitives/PrimitiveButton/src/PrimitiveButton.types.ts +28 -0
  108. package/src/primitives/PrimitiveButton/src/index.ts +6 -0
  109. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +73 -0
  110. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +230 -0
  111. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +114 -0
  112. package/src/primitives/index.ts +14 -0
  113. package/src/primitives/types.ts +40 -0
  114. package/src/test-utils/index.tsx +1 -0
  115. package/build/button/Button.messages.js.map +0 -1
  116. package/build/button/Button.messages.mjs.map +0 -1
  117. package/build/logo/svg/flag-inverse.svg +0 -1
  118. package/build/logo/svg/flag-platform-white.svg +0 -1
  119. package/build/logo/svg/flag-platform.svg +0 -1
  120. package/build/logo/svg/flag.svg +0 -1
  121. package/build/logo/svg/logo-business-inverse.svg +0 -1
  122. package/build/logo/svg/logo-business.svg +0 -1
  123. package/build/logo/svg/logo-inverse.svg +0 -1
  124. package/build/logo/svg/logo-platform-white.svg +0 -1
  125. package/build/logo/svg/logo-platform.svg +0 -1
  126. package/build/logo/svg/logo.svg +0 -1
  127. package/build/types/button/Button.messages.d.ts.map +0 -1
  128. package/src/logo/svg/flag-inverse.svg +0 -1
  129. package/src/logo/svg/flag-platform-white.svg +0 -1
  130. package/src/logo/svg/flag-platform.svg +0 -1
  131. package/src/logo/svg/flag.svg +0 -1
  132. package/src/logo/svg/logo-business-inverse.svg +0 -1
  133. package/src/logo/svg/logo-business.svg +0 -1
  134. package/src/logo/svg/logo-inverse.svg +0 -1
  135. package/src/logo/svg/logo-platform-white.svg +0 -1
  136. package/src/logo/svg/logo-platform.svg +0 -1
  137. package/src/logo/svg/logo.svg +0 -1
  138. /package/build/{button → i18n/commonMessages}/Button.messages.js +0 -0
  139. /package/build/{button → i18n/commonMessages}/Button.messages.mjs +0 -0
  140. /package/build/types/{button → i18n/commonMessages}/Button.messages.d.ts +0 -0
  141. /package/src/{button → i18n/commonMessages}/Button.messages.ts +0 -0
@@ -67,15 +67,8 @@ function Alert({
67
67
  arrow,
68
68
  children,
69
69
  size: size$1,
70
- dismissible,
71
- active = true,
72
- dynamicRender
70
+ dismissible
73
71
  }) {
74
- React.useEffect(() => {
75
- if (active !== undefined || dynamicRender !== undefined) {
76
- logActionRequired.logActionRequired("Alert component doesn't support `active` or `dynamicRender` anymore, please remove that prop.");
77
- }
78
- }, [active, dynamicRender]);
79
72
  React.useEffect(() => {
80
73
  if (arrow !== undefined) {
81
74
  logActionRequired.logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
@@ -113,7 +106,7 @@ function Alert({
113
106
  return /*#__PURE__*/jsxRuntime.jsx("div", {
114
107
  role: resolvedType === sentiment.Sentiment.NEGATIVE ? 'alert' : 'status',
115
108
  className: "wds-alert__liveRegion",
116
- children: active && /*#__PURE__*/jsxRuntime.jsxs("div", {
109
+ children: /*#__PURE__*/jsxRuntime.jsxs("div", {
117
110
  "aria-hidden": shouldAnnounce ? undefined : 'true',
118
111
  className: clsx.clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
119
112
  "data-testid": "alert",
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n CloseButton,\n Sentiment,\n Size,\n Typography,\n Variant,\n WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n | Sentiment.POSITIVE\n | Sentiment.NEUTRAL\n | Sentiment.WARNING\n | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n TOP_LEFT = 'up-left',\n TOP = 'up-center',\n TOP_RIGHT = 'up-right',\n BOTTOM_LEFT = 'down-left',\n BOTTOM = 'down-center',\n BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n icon?: React.ReactNode;\n /**\n * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n statusIconLabel?: string;\n /** Title for the alert component */\n title?: string;\n /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n message?: string;\n /** The presence of the onDismiss handler will trigger the visibility of the close button */\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n /** The type dictates which icon and colour will be used */\n type?: AlertType;\n variant?: `${Variant}`;\n /** @deprecated Safe to remove */\n active?: boolean;\n /** @deprecated Safe to remove */\n dynamicRender?: boolean;\n /** @deprecated Use `InlineAlert` instead. */\n arrow?: `${AlertArrowPosition}`;\n /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n children?: React.ReactNode;\n /** @deprecated Use `onDismiss` instead. */\n dismissible?: boolean;\n /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n switch (type) {\n case 'success':\n return 'positive';\n case 'info':\n return 'neutral';\n case 'error':\n return 'negative';\n default:\n return type;\n }\n}\n\nexport default function Alert({\n action,\n className,\n icon,\n statusIconLabel,\n onDismiss,\n message,\n title,\n type = 'neutral',\n variant = 'desktop',\n arrow,\n children,\n size,\n dismissible,\n active = true,\n dynamicRender,\n}: AlertProps) {\n useEffect(() => {\n if (active !== undefined || dynamicRender !== undefined) {\n logActionRequired(\n \"Alert component doesn't support `active` or `dynamicRender` anymore, please remove that prop.\",\n );\n }\n }, [active, dynamicRender]);\n\n useEffect(() => {\n if (arrow !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n );\n }\n }, [arrow]);\n\n useEffect(() => {\n if (children !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n );\n }\n }, [children]);\n\n useEffect(() => {\n if (dismissible !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n );\n }\n }, [dismissible]);\n\n useEffect(() => {\n if (size !== undefined) {\n logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n }\n }, [size]);\n\n const resolvedType = resolveType(type);\n useEffect(() => {\n if (resolvedType !== type) {\n logActionRequired(\n `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n );\n }\n }, [resolvedType, type]);\n\n const [shouldFire, setShouldFire] = useState<boolean>();\n\n const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n useEffect(() => {\n setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n return (\n <div\n role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n className=\"wds-alert__liveRegion\"\n >\n {active && (\n <div\n aria-hidden={shouldAnnounce ? undefined : 'true'}\n className={clsx(\n 'alert d-flex',\n `alert-${resolvedType}`,\n arrow != null && alertArrowClassNames(arrow),\n className,\n )}\n data-testid=\"alert\"\n onTouchStart={() => setShouldFire(true)}\n onTouchEnd={(event) => {\n if (\n shouldFire &&\n action?.href &&\n // Check if current event is triggered from closeButton\n event.target instanceof Node &&\n closeButtonReference.current &&\n !closeButtonReference.current.contains(event.target)\n ) {\n if (action.target === '_blank') {\n window.top?.open(action.href);\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n }}\n onTouchMove={() => setShouldFire(false)}\n >\n <div\n className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n data-testid={variant}\n >\n {icon ? (\n <div className=\"alert__icon\">{icon}</div>\n ) : (\n <StatusIcon size={Size.LARGE} sentiment={resolvedType} iconLabel={statusIconLabel} />\n )}\n <div className=\"alert__message\">\n <div>\n {title && (\n <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n {title}\n </Title>\n )}\n <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n {children || <InlineMarkdown>{message}</InlineMarkdown>}\n </Body>\n </div>\n {action && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n </div>\n </div>\n {onDismiss && (\n <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n )}\n </div>\n )}\n </div>\n );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n switch (arrow) {\n case 'down-center':\n return 'arrow arrow-bottom arrow-center';\n case 'down-left':\n return 'arrow arrow-bottom arrow-left';\n case 'down-right':\n return 'arrow arrow-bottom arrow-right';\n case 'up-center':\n return 'arrow arrow-center';\n case 'up-right':\n return 'arrow arrow-right';\n case 'up-left':\n default:\n return 'arrow';\n }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","variant","arrow","children","size","dismissible","active","dynamicRender","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n CloseButton,\n Sentiment,\n Size,\n Typography,\n Variant,\n WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n | Sentiment.POSITIVE\n | Sentiment.NEUTRAL\n | Sentiment.WARNING\n | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n TOP_LEFT = 'up-left',\n TOP = 'up-center',\n TOP_RIGHT = 'up-right',\n BOTTOM_LEFT = 'down-left',\n BOTTOM = 'down-center',\n BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n icon?: React.ReactNode;\n /**\n * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n statusIconLabel?: string;\n /** Title for the alert component */\n title?: string;\n /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n message?: string;\n /** The presence of the onDismiss handler will trigger the visibility of the close button */\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n /** The type dictates which icon and colour will be used */\n type?: AlertType;\n variant?: `${Variant}`;\n /** @deprecated Use `InlineAlert` instead. */\n arrow?: `${AlertArrowPosition}`;\n /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n children?: React.ReactNode;\n /** @deprecated Use `onDismiss` instead. */\n dismissible?: boolean;\n /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n switch (type) {\n case 'success':\n return 'positive';\n case 'info':\n return 'neutral';\n case 'error':\n return 'negative';\n default:\n return type;\n }\n}\n\nexport default function Alert({\n action,\n className,\n icon,\n statusIconLabel,\n onDismiss,\n message,\n title,\n type = 'neutral',\n variant = 'desktop',\n arrow,\n children,\n size,\n dismissible,\n}: AlertProps) {\n useEffect(() => {\n if (arrow !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n );\n }\n }, [arrow]);\n\n useEffect(() => {\n if (children !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n );\n }\n }, [children]);\n\n useEffect(() => {\n if (dismissible !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n );\n }\n }, [dismissible]);\n\n useEffect(() => {\n if (size !== undefined) {\n logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n }\n }, [size]);\n\n const resolvedType = resolveType(type);\n useEffect(() => {\n if (resolvedType !== type) {\n logActionRequired(\n `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n );\n }\n }, [resolvedType, type]);\n\n const [shouldFire, setShouldFire] = useState<boolean>();\n\n const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n useEffect(() => {\n setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n return (\n <div\n role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n className=\"wds-alert__liveRegion\"\n >\n <div\n aria-hidden={shouldAnnounce ? undefined : 'true'}\n className={clsx(\n 'alert d-flex',\n `alert-${resolvedType}`,\n arrow != null && alertArrowClassNames(arrow),\n className,\n )}\n data-testid=\"alert\"\n onTouchStart={() => setShouldFire(true)}\n onTouchEnd={(event) => {\n if (\n shouldFire &&\n action?.href &&\n // Check if current event is triggered from closeButton\n event.target instanceof Node &&\n closeButtonReference.current &&\n !closeButtonReference.current.contains(event.target)\n ) {\n if (action.target === '_blank') {\n window.top?.open(action.href);\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n }}\n onTouchMove={() => setShouldFire(false)}\n >\n <div\n className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n data-testid={variant}\n >\n {icon ? (\n <div className=\"alert__icon\">{icon}</div>\n ) : (\n <StatusIcon size={Size.LARGE} sentiment={resolvedType} iconLabel={statusIconLabel} />\n )}\n <div className=\"alert__message\">\n <div>\n {title && (\n <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n {title}\n </Title>\n )}\n <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n {children || <InlineMarkdown>{message}</InlineMarkdown>}\n </Body>\n </div>\n {action && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n </div>\n </div>\n {onDismiss && (\n <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n )}\n </div>\n </div>\n );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n switch (arrow) {\n case 'down-center':\n return 'arrow arrow-bottom arrow-center';\n case 'down-left':\n return 'arrow arrow-bottom arrow-left';\n case 'down-right':\n return 'arrow arrow-bottom arrow-right';\n case 'up-center':\n return 'arrow arrow-center';\n case 'up-right':\n return 'arrow arrow-right';\n case 'up-left':\n default:\n return 'arrow';\n }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","variant","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}
@@ -63,15 +63,8 @@ function Alert({
63
63
  arrow,
64
64
  children,
65
65
  size,
66
- dismissible,
67
- active = true,
68
- dynamicRender
66
+ dismissible
69
67
  }) {
70
- useEffect(() => {
71
- if (active !== undefined || dynamicRender !== undefined) {
72
- logActionRequired("Alert component doesn't support `active` or `dynamicRender` anymore, please remove that prop.");
73
- }
74
- }, [active, dynamicRender]);
75
68
  useEffect(() => {
76
69
  if (arrow !== undefined) {
77
70
  logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
@@ -109,7 +102,7 @@ function Alert({
109
102
  return /*#__PURE__*/jsx("div", {
110
103
  role: resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status',
111
104
  className: "wds-alert__liveRegion",
112
- children: active && /*#__PURE__*/jsxs("div", {
105
+ children: /*#__PURE__*/jsxs("div", {
113
106
  "aria-hidden": shouldAnnounce ? undefined : 'true',
114
107
  className: clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
115
108
  "data-testid": "alert",
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n CloseButton,\n Sentiment,\n Size,\n Typography,\n Variant,\n WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n | Sentiment.POSITIVE\n | Sentiment.NEUTRAL\n | Sentiment.WARNING\n | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n TOP_LEFT = 'up-left',\n TOP = 'up-center',\n TOP_RIGHT = 'up-right',\n BOTTOM_LEFT = 'down-left',\n BOTTOM = 'down-center',\n BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n icon?: React.ReactNode;\n /**\n * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n statusIconLabel?: string;\n /** Title for the alert component */\n title?: string;\n /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n message?: string;\n /** The presence of the onDismiss handler will trigger the visibility of the close button */\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n /** The type dictates which icon and colour will be used */\n type?: AlertType;\n variant?: `${Variant}`;\n /** @deprecated Safe to remove */\n active?: boolean;\n /** @deprecated Safe to remove */\n dynamicRender?: boolean;\n /** @deprecated Use `InlineAlert` instead. */\n arrow?: `${AlertArrowPosition}`;\n /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n children?: React.ReactNode;\n /** @deprecated Use `onDismiss` instead. */\n dismissible?: boolean;\n /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n switch (type) {\n case 'success':\n return 'positive';\n case 'info':\n return 'neutral';\n case 'error':\n return 'negative';\n default:\n return type;\n }\n}\n\nexport default function Alert({\n action,\n className,\n icon,\n statusIconLabel,\n onDismiss,\n message,\n title,\n type = 'neutral',\n variant = 'desktop',\n arrow,\n children,\n size,\n dismissible,\n active = true,\n dynamicRender,\n}: AlertProps) {\n useEffect(() => {\n if (active !== undefined || dynamicRender !== undefined) {\n logActionRequired(\n \"Alert component doesn't support `active` or `dynamicRender` anymore, please remove that prop.\",\n );\n }\n }, [active, dynamicRender]);\n\n useEffect(() => {\n if (arrow !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n );\n }\n }, [arrow]);\n\n useEffect(() => {\n if (children !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n );\n }\n }, [children]);\n\n useEffect(() => {\n if (dismissible !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n );\n }\n }, [dismissible]);\n\n useEffect(() => {\n if (size !== undefined) {\n logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n }\n }, [size]);\n\n const resolvedType = resolveType(type);\n useEffect(() => {\n if (resolvedType !== type) {\n logActionRequired(\n `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n );\n }\n }, [resolvedType, type]);\n\n const [shouldFire, setShouldFire] = useState<boolean>();\n\n const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n useEffect(() => {\n setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n return (\n <div\n role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n className=\"wds-alert__liveRegion\"\n >\n {active && (\n <div\n aria-hidden={shouldAnnounce ? undefined : 'true'}\n className={clsx(\n 'alert d-flex',\n `alert-${resolvedType}`,\n arrow != null && alertArrowClassNames(arrow),\n className,\n )}\n data-testid=\"alert\"\n onTouchStart={() => setShouldFire(true)}\n onTouchEnd={(event) => {\n if (\n shouldFire &&\n action?.href &&\n // Check if current event is triggered from closeButton\n event.target instanceof Node &&\n closeButtonReference.current &&\n !closeButtonReference.current.contains(event.target)\n ) {\n if (action.target === '_blank') {\n window.top?.open(action.href);\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n }}\n onTouchMove={() => setShouldFire(false)}\n >\n <div\n className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n data-testid={variant}\n >\n {icon ? (\n <div className=\"alert__icon\">{icon}</div>\n ) : (\n <StatusIcon size={Size.LARGE} sentiment={resolvedType} iconLabel={statusIconLabel} />\n )}\n <div className=\"alert__message\">\n <div>\n {title && (\n <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n {title}\n </Title>\n )}\n <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n {children || <InlineMarkdown>{message}</InlineMarkdown>}\n </Body>\n </div>\n {action && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n </div>\n </div>\n {onDismiss && (\n <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n )}\n </div>\n )}\n </div>\n );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n switch (arrow) {\n case 'down-center':\n return 'arrow arrow-bottom arrow-center';\n case 'down-left':\n return 'arrow arrow-bottom arrow-left';\n case 'down-right':\n return 'arrow arrow-bottom arrow-right';\n case 'up-center':\n return 'arrow arrow-center';\n case 'up-right':\n return 'arrow arrow-right';\n case 'up-left':\n default:\n return 'arrow';\n }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","variant","arrow","children","size","dismissible","active","dynamicRender","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n CloseButton,\n Sentiment,\n Size,\n Typography,\n Variant,\n WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n | Sentiment.POSITIVE\n | Sentiment.NEUTRAL\n | Sentiment.WARNING\n | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n TOP_LEFT = 'up-left',\n TOP = 'up-center',\n TOP_RIGHT = 'up-right',\n BOTTOM_LEFT = 'down-left',\n BOTTOM = 'down-center',\n BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n icon?: React.ReactNode;\n /**\n * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n statusIconLabel?: string;\n /** Title for the alert component */\n title?: string;\n /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n message?: string;\n /** The presence of the onDismiss handler will trigger the visibility of the close button */\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n /** The type dictates which icon and colour will be used */\n type?: AlertType;\n variant?: `${Variant}`;\n /** @deprecated Use `InlineAlert` instead. */\n arrow?: `${AlertArrowPosition}`;\n /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n children?: React.ReactNode;\n /** @deprecated Use `onDismiss` instead. */\n dismissible?: boolean;\n /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n switch (type) {\n case 'success':\n return 'positive';\n case 'info':\n return 'neutral';\n case 'error':\n return 'negative';\n default:\n return type;\n }\n}\n\nexport default function Alert({\n action,\n className,\n icon,\n statusIconLabel,\n onDismiss,\n message,\n title,\n type = 'neutral',\n variant = 'desktop',\n arrow,\n children,\n size,\n dismissible,\n}: AlertProps) {\n useEffect(() => {\n if (arrow !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n );\n }\n }, [arrow]);\n\n useEffect(() => {\n if (children !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n );\n }\n }, [children]);\n\n useEffect(() => {\n if (dismissible !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n );\n }\n }, [dismissible]);\n\n useEffect(() => {\n if (size !== undefined) {\n logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n }\n }, [size]);\n\n const resolvedType = resolveType(type);\n useEffect(() => {\n if (resolvedType !== type) {\n logActionRequired(\n `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n );\n }\n }, [resolvedType, type]);\n\n const [shouldFire, setShouldFire] = useState<boolean>();\n\n const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n useEffect(() => {\n setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n return (\n <div\n role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n className=\"wds-alert__liveRegion\"\n >\n <div\n aria-hidden={shouldAnnounce ? undefined : 'true'}\n className={clsx(\n 'alert d-flex',\n `alert-${resolvedType}`,\n arrow != null && alertArrowClassNames(arrow),\n className,\n )}\n data-testid=\"alert\"\n onTouchStart={() => setShouldFire(true)}\n onTouchEnd={(event) => {\n if (\n shouldFire &&\n action?.href &&\n // Check if current event is triggered from closeButton\n event.target instanceof Node &&\n closeButtonReference.current &&\n !closeButtonReference.current.contains(event.target)\n ) {\n if (action.target === '_blank') {\n window.top?.open(action.href);\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n }}\n onTouchMove={() => setShouldFire(false)}\n >\n <div\n className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n data-testid={variant}\n >\n {icon ? (\n <div className=\"alert__icon\">{icon}</div>\n ) : (\n <StatusIcon size={Size.LARGE} sentiment={resolvedType} iconLabel={statusIconLabel} />\n )}\n <div className=\"alert__message\">\n <div>\n {title && (\n <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n {title}\n </Title>\n )}\n <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n {children || <InlineMarkdown>{message}</InlineMarkdown>}\n </Body>\n </div>\n {action && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n </div>\n </div>\n {onDismiss && (\n <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n )}\n </div>\n </div>\n );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n switch (arrow) {\n case 'down-center':\n return 'arrow arrow-bottom arrow-center';\n case 'down-left':\n return 'arrow arrow-bottom arrow-left';\n case 'down-right':\n return 'arrow arrow-bottom arrow-right';\n case 'up-center':\n return 'arrow arrow-center';\n case 'up-right':\n return 'arrow arrow-right';\n case 'up-left':\n default:\n return 'arrow';\n }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","variant","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}
@@ -0,0 +1,111 @@
1
+ 'use strict';
2
+
3
+ var clsx = require('clsx');
4
+ var AvatarView = require('../avatarView/AvatarView.js');
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+
7
+ function AvatarLayout({
8
+ avatars = [],
9
+ orientation = 'horizontal',
10
+ size = 48,
11
+ className,
12
+ interactive,
13
+ ...restProps
14
+ }) {
15
+ const isDiagonal = orientation === 'diagonal';
16
+ const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;
17
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
18
+ className: clsx.clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className),
19
+ style: {
20
+ // @ts-expect-error CSS custom props allowed
21
+ '--np-avatar-layout-size': `${size}px`,
22
+ '--np-avatar-size': `${avatarSize}px`,
23
+ '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`
24
+ },
25
+ ...restProps,
26
+ children: avatars.length < 2 || size === 16 && isDiagonal ? null : avatars.map(({
27
+ asset,
28
+ style,
29
+ ...avatar
30
+ }, index) => /*#__PURE__*/jsxRuntime.jsx("div", {
31
+ className: clsx.clsx({
32
+ [`np-avatar-layout-${orientation}-child`]: index !== 0
33
+ }, {
34
+ [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1
35
+ }),
36
+ children: /*#__PURE__*/jsxRuntime.jsx(AvatarView, {
37
+ ...avatar,
38
+ size: avatarSize,
39
+ style: {
40
+ ...(isDiagonal && {
41
+ '--circle-size': `${avatarSize}px`,
42
+ '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,
43
+ '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`
44
+ }),
45
+ ...style
46
+ },
47
+ interactive: interactive,
48
+ children: asset
49
+ })
50
+ }, index))
51
+ });
52
+ }
53
+ /** Diagonal layout have custom sizes for avatar, font and icon */
54
+ const DIAGONAL_LAYOUT_STYLE_CONFIG = {
55
+ // Diagonal layout doesn't support 16 size
56
+ 16: {
57
+ avatarSize: undefined,
58
+ offset: undefined,
59
+ fontSize: undefined,
60
+ iconSize: undefined
61
+ },
62
+ 24: {
63
+ avatarSize: 15,
64
+ offset: 2.5,
65
+ fontSize: 8,
66
+ iconSize: 11.25
67
+ },
68
+ 32: {
69
+ avatarSize: 20,
70
+ offset: 2.5,
71
+ fontSize: 12,
72
+ iconSize: 15
73
+ },
74
+ 40: {
75
+ avatarSize: 24,
76
+ offset: 4.5,
77
+ fontSize: 12,
78
+ iconSize: 18
79
+ },
80
+ 48: {
81
+ avatarSize: 30,
82
+ offset: 3.5,
83
+ fontSize: 14,
84
+ iconSize: 16.87
85
+ },
86
+ 56: {
87
+ avatarSize: 34,
88
+ offset: 5,
89
+ fontSize: 14,
90
+ iconSize: 19.12
91
+ },
92
+ 72: {
93
+ avatarSize: 44,
94
+ offset: 6,
95
+ fontSize: 22,
96
+ iconSize: 22
97
+ }
98
+ };
99
+ /** Horizontal layout have custom offset between avatars */
100
+ const HORIZONTAL_LAYOUT_OFFSET = {
101
+ 16: 2,
102
+ 24: 2,
103
+ 32: 4,
104
+ 40: 4,
105
+ 48: 4,
106
+ 56: 5,
107
+ 72: 5
108
+ };
109
+
110
+ module.exports = AvatarLayout;
111
+ //# sourceMappingURL=AvatarLayout.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AvatarLayout.js","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n AvatarViewProps,\n 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n avatars: SingleAvatarType[];\n orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n AvatarViewProps,\n 'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n avatars = [],\n orientation = 'horizontal',\n size = 48,\n className,\n interactive,\n ...restProps\n}: Props) {\n const isDiagonal = orientation === 'diagonal';\n const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n return (\n <div\n className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n style={{\n // @ts-expect-error CSS custom props allowed\n '--np-avatar-layout-size': `${size}px`,\n '--np-avatar-size': `${avatarSize}px`,\n '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n }}\n {...restProps}\n >\n {avatars.length < 2 || (size === 16 && isDiagonal)\n ? null\n : avatars.map(({ asset, style, ...avatar }, index) => (\n <div\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n className={clsx(\n { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n )}\n >\n <AvatarView\n {...avatar}\n size={avatarSize as Props['size']}\n style={{\n ...(isDiagonal && {\n '--circle-size': `${avatarSize}px`,\n '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n }),\n ...style,\n }}\n interactive={interactive}\n >\n {asset}\n </AvatarView>\n </div>\n ))}\n </div>\n );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n // Diagonal layout doesn't support 16 size\n 16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n 24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n 32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n 40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n 48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n 56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n 72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n 16: 2,\n 24: 2,\n 32: 4,\n 40: 4,\n 48: 4,\n 56: 5,\n 72: 5,\n};\n"],"names":["AvatarLayout","avatars","orientation","size","className","interactive","restProps","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","_jsx","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","children","length","map","asset","avatar","index","AvatarView","iconSize","fontSize","undefined"],"mappings":"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"}
@@ -0,0 +1,109 @@
1
+ import { clsx } from 'clsx';
2
+ import AvatarView from '../avatarView/AvatarView.mjs';
3
+ import { jsx } from 'react/jsx-runtime';
4
+
5
+ function AvatarLayout({
6
+ avatars = [],
7
+ orientation = 'horizontal',
8
+ size = 48,
9
+ className,
10
+ interactive,
11
+ ...restProps
12
+ }) {
13
+ const isDiagonal = orientation === 'diagonal';
14
+ const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;
15
+ return /*#__PURE__*/jsx("div", {
16
+ className: clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className),
17
+ style: {
18
+ // @ts-expect-error CSS custom props allowed
19
+ '--np-avatar-layout-size': `${size}px`,
20
+ '--np-avatar-size': `${avatarSize}px`,
21
+ '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`
22
+ },
23
+ ...restProps,
24
+ children: avatars.length < 2 || size === 16 && isDiagonal ? null : avatars.map(({
25
+ asset,
26
+ style,
27
+ ...avatar
28
+ }, index) => /*#__PURE__*/jsx("div", {
29
+ className: clsx({
30
+ [`np-avatar-layout-${orientation}-child`]: index !== 0
31
+ }, {
32
+ [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1
33
+ }),
34
+ children: /*#__PURE__*/jsx(AvatarView, {
35
+ ...avatar,
36
+ size: avatarSize,
37
+ style: {
38
+ ...(isDiagonal && {
39
+ '--circle-size': `${avatarSize}px`,
40
+ '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,
41
+ '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`
42
+ }),
43
+ ...style
44
+ },
45
+ interactive: interactive,
46
+ children: asset
47
+ })
48
+ }, index))
49
+ });
50
+ }
51
+ /** Diagonal layout have custom sizes for avatar, font and icon */
52
+ const DIAGONAL_LAYOUT_STYLE_CONFIG = {
53
+ // Diagonal layout doesn't support 16 size
54
+ 16: {
55
+ avatarSize: undefined,
56
+ offset: undefined,
57
+ fontSize: undefined,
58
+ iconSize: undefined
59
+ },
60
+ 24: {
61
+ avatarSize: 15,
62
+ offset: 2.5,
63
+ fontSize: 8,
64
+ iconSize: 11.25
65
+ },
66
+ 32: {
67
+ avatarSize: 20,
68
+ offset: 2.5,
69
+ fontSize: 12,
70
+ iconSize: 15
71
+ },
72
+ 40: {
73
+ avatarSize: 24,
74
+ offset: 4.5,
75
+ fontSize: 12,
76
+ iconSize: 18
77
+ },
78
+ 48: {
79
+ avatarSize: 30,
80
+ offset: 3.5,
81
+ fontSize: 14,
82
+ iconSize: 16.87
83
+ },
84
+ 56: {
85
+ avatarSize: 34,
86
+ offset: 5,
87
+ fontSize: 14,
88
+ iconSize: 19.12
89
+ },
90
+ 72: {
91
+ avatarSize: 44,
92
+ offset: 6,
93
+ fontSize: 22,
94
+ iconSize: 22
95
+ }
96
+ };
97
+ /** Horizontal layout have custom offset between avatars */
98
+ const HORIZONTAL_LAYOUT_OFFSET = {
99
+ 16: 2,
100
+ 24: 2,
101
+ 32: 4,
102
+ 40: 4,
103
+ 48: 4,
104
+ 56: 5,
105
+ 72: 5
106
+ };
107
+
108
+ export { AvatarLayout as default };
109
+ //# sourceMappingURL=AvatarLayout.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AvatarLayout.mjs","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n AvatarViewProps,\n 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n avatars: SingleAvatarType[];\n orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n AvatarViewProps,\n 'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n avatars = [],\n orientation = 'horizontal',\n size = 48,\n className,\n interactive,\n ...restProps\n}: Props) {\n const isDiagonal = orientation === 'diagonal';\n const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n return (\n <div\n className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n style={{\n // @ts-expect-error CSS custom props allowed\n '--np-avatar-layout-size': `${size}px`,\n '--np-avatar-size': `${avatarSize}px`,\n '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n }}\n {...restProps}\n >\n {avatars.length < 2 || (size === 16 && isDiagonal)\n ? null\n : avatars.map(({ asset, style, ...avatar }, index) => (\n <div\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n className={clsx(\n { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n )}\n >\n <AvatarView\n {...avatar}\n size={avatarSize as Props['size']}\n style={{\n ...(isDiagonal && {\n '--circle-size': `${avatarSize}px`,\n '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n }),\n ...style,\n }}\n interactive={interactive}\n >\n {asset}\n </AvatarView>\n </div>\n ))}\n </div>\n );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n // Diagonal layout doesn't support 16 size\n 16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n 24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n 32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n 40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n 48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n 56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n 72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n 16: 2,\n 24: 2,\n 32: 4,\n 40: 4,\n 48: 4,\n 56: 5,\n 72: 5,\n};\n"],"names":["AvatarLayout","avatars","orientation","size","className","interactive","restProps","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","_jsx","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","children","length","map","asset","avatar","index","AvatarView","iconSize","fontSize","undefined"],"mappings":"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"}
@@ -26,7 +26,7 @@ require('@transferwise/icons');
26
26
  require('../common/closeButton/CloseButton.messages.js');
27
27
  var jsxRuntime = require('react/jsx-runtime');
28
28
  var ProcessIndicator = require('../processIndicator/ProcessIndicator.js');
29
- var Button_messages = require('./Button.messages.js');
29
+ var Button_messages = require('../i18n/commonMessages/Button.messages.js');
30
30
  var classMap = require('./classMap.js');
31
31
  var legacyUtils = require('./legacyUtils/legacyUtils.js');
32
32
 
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../src/button/Button.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 './Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\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 }: Props,\n reference,\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: Props['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={reference}\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 Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../src/button/Button.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';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\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 }: Props,\n reference,\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: Props['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={reference}\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 Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
@@ -24,7 +24,7 @@ import '@transferwise/icons';
24
24
  import '../common/closeButton/CloseButton.messages.mjs';
25
25
  import { jsxs, jsx } from 'react/jsx-runtime';
26
26
  import ProcessIndicator from '../processIndicator/ProcessIndicator.mjs';
27
- import messages from './Button.messages.mjs';
27
+ import messages from '../i18n/commonMessages/Button.messages.mjs';
28
28
  import { typeClassMap, priorityClassMap } from './classMap.mjs';
29
29
  import { logDeprecationNotices, establishNewType, establishNewPriority } from './legacyUtils/legacyUtils.mjs';
30
30
 
@@ -1 +1 @@
1
- {"version":3,"file":"Button.mjs","sources":["../../src/button/Button.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 './Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\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 }: Props,\n reference,\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: Props['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={reference}\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 Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,EAAE,EAAEC,SAAS;AACbC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzBC,OAAO;EACP,GAAGC,IAAAA;AACG,CAAA,EACRC,SAAS,KACP;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AAEtBC,EAAAA,qBAAqB,CAAC;IAAEX,IAAI;AAAEG,IAAAA,IAAAA;AAAI,GAAE,CAAC,CAAA;AAErC,EAAA,MAAMS,OAAO,GAAGC,gBAAgB,CAACV,IAAI,CAAC,CAAA;AACtC,EAAA,MAAMW,WAAW,GAAGC,oBAAoB,CAAClB,QAAQ,EAAEM,IAAI,CAAC,CAAA;EAExD,MAAMa,OAAO,GAAGC,IAAI,CAClB,CAAA,QAAA,EAAWjB,IAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,IAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAK;AAC/BG,IAAAA,QAAAA;GACD;AACD;AACA;EACAuB,YAAY,CAACN,OAAO,CAAC;AACrB;AACA;AACAO,EAAAA,gBAAgB,CAACL,WAAW,CAAC,EAC7BpB,SAAS,CACV,CAAA;EAED,SAAS0B,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACrB,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAA;AACnD,GAAA;AAEA,EAAA,MAAMsB,OAAO,GAAI/B,SAAyB,IAAI,QAAQ,CAAA;AACtD,EAAA,IAAIgC,KAAK,CAAA;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC,SAAAA;AAAS,KAAE,GAAGlB,IAAmB,CAAA;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ9B,QAAQ;AACR,MAAA,eAAe,EAAEC,OAAO;AACxBO,MAAAA,IAAI,EAAEqB,QAAAA;KACP,CAAA;AACH,GAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGhB,IAAI;AACP,MAAA,eAAe,EAAEX,OAAAA;KACH,CAAA;AAClB,GAAA;AAEA;;;AAGG;AACH,EAAA,MAAM8B,WAAW,GACdC,OAAyB,IACzBC,KAAoE,IAAI;IACvE,IAAIjC,QAAQ,IAAIC,OAAO,EAAE;MACvBgC,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM,IAAI,OAAOF,OAAO,KAAK,UAAU,EAAE;MACxCA,OAAO,CAACC,KAAK,CAAC,CAAA;AAChB,KAAA;GACD,CAAA;EAEH,oBACEE,IAAA,CAACR,OAAO,EAAA;AACNS,IAAAA,GAAG,EAAEvB,SAAU;AACfd,IAAAA,SAAS,EAAEsB,OAAQ;AACnBV,IAAAA,OAAO,EAAEoB,WAAW,CAACpB,OAAO,CAAE;AAAA,IAAA,GAC1BiB,KAAK;AACT,IAAA,WAAA,EAAW3B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,WAAA,EAAWA,OAAQ;AACnB,IAAA,YAAA,EAAYA,OAAO,GAAGa,IAAI,CAACuB,aAAa,CAACC,QAAQ,CAACC,gBAAgB,CAAC,GAAG3B,IAAI,CAAC,YAAY,CAAE;AAAAd,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBACNuC,GAAA,CAACC,gBAAgB,EAAA;MACfpC,IAAI,EAAEoB,oBAAoB,EAAG;AAC7B1B,MAAAA,SAAS,EAAC,YAAY;MACtB,aAAY,EAAA,yBAAA;AAAyB,KACrC,CACH,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Button.mjs","sources":["../../src/button/Button.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';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\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 }: Props,\n reference,\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: Props['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={reference}\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 Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.messages.js","sources":["../../../src/i18n/commonMessages/Button.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n loadingAriaLabel: {\n id: 'neptune.Button.loadingAriaLabel',\n defaultMessage: 'loading',\n description: 'Description of button while loading',\n },\n});\n"],"names":["defineMessages","loadingAriaLabel","id"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,gBAAgB,EAAE;IAChBC,EAAE,EAAA,iCAAA;AAGH,GAAA;AACF,CAAA,CAAC;;;;"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.messages.mjs","sources":["../../../src/i18n/commonMessages/Button.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n loadingAriaLabel: {\n id: 'neptune.Button.loadingAriaLabel',\n defaultMessage: 'loading',\n description: 'Description of button while loading',\n },\n});\n"],"names":["defineMessages","loadingAriaLabel","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,gBAAgB,EAAE;IAChBC,EAAE,EAAA,iCAAA;AAGH,GAAA;AACF,CAAA,CAAC;;;;"}
@@ -35,6 +35,11 @@
35
35
  "neptune.Summary.statusDone": "Apartado listo",
36
36
  "neptune.Summary.statusNotDone": "Apartado a completar",
37
37
  "neptune.Summary.statusPending": "Apartado pendiente",
38
+ "neptune.Table.actionHeader": "Acción",
39
+ "neptune.Table.emptyData": "No se han encontrado resultados",
40
+ "neptune.Table.loaded": "Los datos de la tabla se han cargado",
41
+ "neptune.Table.loading": "Los datos de la tabla se están cargando",
42
+ "neptune.Table.refreshPage": "Actualizar página",
38
43
  "neptune.Upload.csButtonText": "¿Quieres subir otro archivo?",
39
44
  "neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
40
45
  "neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
@@ -37,6 +37,11 @@ var es = {
37
37
  "neptune.Summary.statusDone": "Apartado listo",
38
38
  "neptune.Summary.statusNotDone": "Apartado a completar",
39
39
  "neptune.Summary.statusPending": "Apartado pendiente",
40
+ "neptune.Table.actionHeader": "Acción",
41
+ "neptune.Table.emptyData": "No se han encontrado resultados",
42
+ "neptune.Table.loaded": "Los datos de la tabla se han cargado",
43
+ "neptune.Table.loading": "Los datos de la tabla se están cargando",
44
+ "neptune.Table.refreshPage": "Actualizar página",
40
45
  "neptune.Upload.csButtonText": "¿Quieres subir otro archivo?",
41
46
  "neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
42
47
  "neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
@@ -1 +1 @@
1
- {"version":3,"file":"es.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"es.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -35,6 +35,11 @@ var es = {
35
35
  "neptune.Summary.statusDone": "Apartado listo",
36
36
  "neptune.Summary.statusNotDone": "Apartado a completar",
37
37
  "neptune.Summary.statusPending": "Apartado pendiente",
38
+ "neptune.Table.actionHeader": "Acción",
39
+ "neptune.Table.emptyData": "No se han encontrado resultados",
40
+ "neptune.Table.loaded": "Los datos de la tabla se han cargado",
41
+ "neptune.Table.loading": "Los datos de la tabla se están cargando",
42
+ "neptune.Table.refreshPage": "Actualizar página",
38
43
  "neptune.Upload.csButtonText": "¿Quieres subir otro archivo?",
39
44
  "neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
40
45
  "neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
@@ -1 +1 @@
1
- {"version":3,"file":"es.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"es.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}