@transferwise/components 0.0.0-experimental-50721c1 → 0.0.0-experimental-5a09889
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/alert/Alert.js +0 -3
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +0 -3
- package/build/alert/Alert.mjs.map +1 -1
- package/build/main.css +5 -5
- package/build/styles/main.css +5 -5
- package/build/styles/prompt/InfoPrompt/InfoPrompt.css +5 -5
- package/build/types/alert/Alert.d.ts +0 -15
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/alert/Alert.story.tsx +0 -4
- package/src/alert/Alert.tsx +0 -16
- package/src/main.css +5 -5
- package/src/prompt/InfoPrompt/InfoPrompt.css +5 -5
- package/src/prompt/InfoPrompt/InfoPrompt.less +7 -8
package/build/alert/Alert.js
CHANGED
package/build/alert/Alert.js.map
CHANGED
|
@@ -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 Status,\n Typography,\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 Button from '../button';\nimport Link from '../link';\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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\n // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n | Sentiment.PENDING\n | Status.PENDING}`;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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 /** @deprecated Use `InlinePrompt` 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\n/**\n * @deprecated use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead\n */\nexport default function Alert({\n action,\n className,\n icon,\n statusIconLabel,\n onDismiss,\n message,\n title,\n type = 'neutral',\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 'InlinePrompt' 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 const timeoutId = setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n\n return () => clearTimeout(timeoutId);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n /**\n * All focusable elements must be disabled until we announce the alert.\n * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n */\n const accessibleTabIndex = shouldAnnounce ? undefined : -1;\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 className=\"alert__icon\">\n {icon || <StatusIcon size={32} sentiment={resolvedType} iconLabel={statusIconLabel} />}\n </div>\n <div className={clsx('alert__content', 'd-flex', 'flex-grow-1')}>\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 &&\n ('href' in action ? (\n <Link\n href={action.href}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n ) : (\n <Button\n v2\n size=\"sm\"\n sentiment=\"default\"\n aria-label={action['aria-label']}\n priority=\"secondary-neutral\"\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n ))}\n </div>\n </div>\n {onDismiss && (\n <div className=\"alert__close\">\n <CloseButton\n ref={closeButtonReference}\n size=\"xs\"\n tabIndex={accessibleTabIndex}\n onClick={onDismiss}\n />\n </div>\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","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"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 Status,\n Typography,\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 Button from '../button';\nimport Link from '../link';\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\n // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n | Sentiment.PENDING\n | Status.PENDING}`;\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 /** @deprecated Use `InlinePrompt` 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 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 'InlinePrompt' 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 const timeoutId = setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n\n return () => clearTimeout(timeoutId);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n /**\n * All focusable elements must be disabled until we announce the alert.\n * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n */\n const accessibleTabIndex = shouldAnnounce ? undefined : -1;\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 className=\"alert__icon\">\n {icon || <StatusIcon size={32} sentiment={resolvedType} iconLabel={statusIconLabel} />}\n </div>\n <div className={clsx('alert__content', 'd-flex', 'flex-grow-1')}>\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 &&\n ('href' in action ? (\n <Link\n href={action.href}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n ) : (\n <Button\n v2\n size=\"sm\"\n sentiment=\"default\"\n aria-label={action['aria-label']}\n priority=\"secondary-neutral\"\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n ))}\n </div>\n </div>\n {onDismiss && (\n <div className=\"alert__close\">\n <CloseButton\n ref={closeButtonReference}\n size=\"xs\"\n tabIndex={accessibleTabIndex}\n onClick={onDismiss}\n />\n </div>\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","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCYA;AAAZ,CAAA,UAAYA,kBAAkB,EAAA;AAC5BA,EAAAA,kBAAA,CAAA,UAAA,CAAA,GAAA,SAAoB;AACpBA,EAAAA,kBAAA,CAAA,KAAA,CAAA,GAAA,WAAiB;AACjBA,EAAAA,kBAAA,CAAA,WAAA,CAAA,GAAA,UAAsB;AACtBA,EAAAA,kBAAA,CAAA,aAAA,CAAA,GAAA,WAAyB;AACzBA,EAAAA,kBAAA,CAAA,QAAA,CAAA,GAAA,aAAsB;AACtBA,EAAAA,kBAAA,CAAA,cAAA,CAAA,GAAA,YAA2B;AAC7B,CAAC,EAPWA,0BAAkB,KAAlBA,0BAAkB,GAAA,EAAA,CAAA,CAAA;AAsC9B,SAASC,WAAWA,CAACC,IAAe,EAAA;AAClC,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,SAAS;AACZ,MAAA,OAAO,UAAU;AACnB,IAAA,KAAK,MAAM;AACT,MAAA,OAAO,SAAS;AAClB,IAAA,KAAK,OAAO;AACV,MAAA,OAAO,UAAU;AACnB,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF;AAEc,SAAUC,KAAKA,CAAC;EAC5BC,MAAM;EACNC,SAAS;EACTC,IAAI;EACJC,eAAe;EACfC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLR,EAAAA,IAAI,GAAG,SAAS;EAChBS,KAAK;EACLC,QAAQ;EACRC,IAAI;AACJC,EAAAA;AAAW,CACA,EAAA;AACXC,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIJ,KAAK,KAAKK,SAAS,EAAE;MACvBC,mCAAiB,CACf,8EAA8E,CAC/E;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;AAEXI,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,QAAQ,KAAKI,SAAS,EAAE;MAC1BC,mCAAiB,CACf,4EAA4E,CAC7E;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACL,QAAQ,CAAC,CAAC;AAEdG,EAAAA,eAAS,CAAC,MAAK;IACb,IAAID,WAAW,KAAKE,SAAS,EAAE;MAC7BC,mCAAiB,CACf,iFAAiF,CAClF;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACH,WAAW,CAAC,CAAC;AAEjBC,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIF,IAAI,KAAKG,SAAS,EAAE;MACtBC,mCAAiB,CAAC,0EAA0E,CAAC;AAC/F,IAAA;AACF,EAAA,CAAC,EAAE,CAACJ,IAAI,CAAC,CAAC;AAEV,EAAA,MAAMK,YAAY,GAAGjB,WAAW,CAACC,IAAI,CAAC;AACtCa,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIG,YAAY,KAAKhB,IAAI,EAAE;AACzBe,MAAAA,mCAAiB,CACf,CAAA,gCAAA,EAAmCf,IAAI,CAAA,yCAAA,EAA4CgB,YAAY,YAAY,CAC5G;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACA,YAAY,EAAEhB,IAAI,CAAC,CAAC;EAExB,MAAM,CAACiB,UAAU,EAAEC,aAAa,CAAC,GAAGC,cAAQ,EAAW;EAEvD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGF,cAAQ,CAAU,KAAK,CAAC;AACpEN,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,MAAMS,SAAS,GAAGC,UAAU,CAAC,MAAK;MAChCF,iBAAiB,CAAC,IAAI,CAAC;IACzB,CAAC,EAAEG,kCAAwB,CAAC;AAE5B,IAAA,OAAO,MAAMC,YAAY,CAACH,SAAS,CAAC;EACtC,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,MAAMI,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAE5D;;;AAGG;AACH,EAAA,MAAMC,kBAAkB,GAAGR,cAAc,GAAGN,SAAS,GAAG,EAAE;AAE1D,EAAA,oBACEe,cAAA,CAAA,KAAA,EAAA;IACEC,IAAI,EAAEd,YAAY,KAAKe,mBAAS,CAACC,QAAQ,GAAG,OAAO,GAAG,QAAS;AAC/D7B,IAAAA,SAAS,EAAC,uBAAuB;AAAAO,IAAAA,QAAA,eAEjCuB,eAAA,CAAA,KAAA,EAAA;AACE,MAAA,aAAA,EAAab,cAAc,GAAGN,SAAS,GAAG,MAAO;AACjDX,MAAAA,SAAS,EAAE+B,SAAI,CACb,cAAc,EACd,CAAA,MAAA,EAASlB,YAAY,CAAA,CAAE,EACvBP,KAAK,IAAI,IAAI,IAAI0B,oBAAoB,CAAC1B,KAAK,CAAC,EAC5CN,SAAS,CACT;AACF,MAAA,aAAA,EAAY,OAAO;AACnBiC,MAAAA,YAAY,EAAEA,MAAMlB,aAAa,CAAC,IAAI,CAAE;MACxCmB,UAAU,EAAGC,KAAK,IAAI;AACpB,QAAA,IACErB,UAAU,IACVf,MAAM,EAAEqC,IAAI;AACZ;QACAD,KAAK,CAACE,MAAM,YAAYC,IAAI,IAC5Bf,oBAAoB,CAACgB,OAAO,IAC5B,CAAChB,oBAAoB,CAACgB,OAAO,CAACC,QAAQ,CAACL,KAAK,CAACE,MAAM,CAAC,EACpD;AACA,UAAA,IAAItC,MAAM,CAACsC,MAAM,KAAK,QAAQ,EAAE;YAC9BI,MAAM,CAACC,GAAG,EAAEC,IAAI,CAAC5C,MAAM,CAACqC,IAAI,CAAC;AAC/B,UAAA,CAAC,MAAM;YACLK,MAAM,CAACC,GAAG,EAAEE,QAAQ,CAACC,MAAM,CAAC9C,MAAM,CAACqC,IAAI,CAAC;AAC1C,UAAA;AACF,QAAA;QACArB,aAAa,CAAC,KAAK,CAAC;MACtB,CAAE;AACF+B,MAAAA,WAAW,EAAEA,MAAM/B,aAAa,CAAC,KAAK,CAAE;AAAAR,MAAAA,QAAA,gBAExCmB,cAAA,CAAA,KAAA,EAAA;AAAK1B,QAAAA,SAAS,EAAC,aAAa;AAAAO,QAAAA,QAAA,EACzBN,IAAI,iBAAIyB,cAAA,CAACqB,kBAAU,EAAA;AAACvC,UAAAA,IAAI,EAAE,EAAG;AAACwC,UAAAA,SAAS,EAAEnC,YAAa;AAACoC,UAAAA,SAAS,EAAE/C;SAAgB;OAChF,CACL,eAAAwB,cAAA,CAAA,KAAA,EAAA;QAAK1B,SAAS,EAAE+B,SAAI,CAAC,gBAAgB,EAAE,QAAQ,EAAE,aAAa,CAAE;AAAAxB,QAAAA,QAAA,eAC9DuB,eAAA,CAAA,KAAA,EAAA;AAAK9B,UAAAA,SAAS,EAAC,gBAAgB;AAAAO,UAAAA,QAAA,gBAC7BuB,eAAA,CAAA,KAAA,EAAA;AAAAvB,YAAAA,QAAA,EAAA,CACGF,KAAK,iBACJqB,cAAA,CAACwB,aAAK,EAAA;AAAClD,cAAAA,SAAS,EAAC,OAAO;cAACH,IAAI,EAAEsD,qBAAU,CAACC,UAAW;AAAA7C,cAAAA,QAAA,EAClDF;AAAK,aACD,CACR,eACDqB,cAAA,CAAC2B,YAAI,EAAA;AAACC,cAAAA,EAAE,EAAC,MAAM;AAACtD,cAAAA,SAAS,EAAC,SAAS;cAACH,IAAI,EAAEsD,qBAAU,CAACI,UAAW;AAAAhD,cAAAA,QAAA,EAC7DA,QAAQ,iBAAImB,cAAA,CAAC8B,sBAAc,EAAA;AAAAjD,gBAAAA,QAAA,EAAEH;eAAwB;AAAC,aACnD,CACR;WAAK,CACL,EAACL,MAAM,KACJ,MAAM,IAAIA,MAAM,gBACf2B,cAAA,CAAC+B,YAAI,EAAA;YACHrB,IAAI,EAAErC,MAAM,CAACqC,IAAK;YAClB,YAAA,EAAYrC,MAAM,CAAC,YAAY,CAAE;YACjCsC,MAAM,EAAEtC,MAAM,CAACsC,MAAO;YACtBxC,IAAI,EAAEsD,qBAAU,CAACO,UAAW;AAC5B1D,YAAAA,SAAS,EAAC,eAAe;AACzB2D,YAAAA,QAAQ,EAAElC,kBAAmB;YAC7BmC,OAAO,EAAE7D,MAAM,CAAC6D,OAAQ;YAAArD,QAAA,EAEvBR,MAAM,CAAC8D;AAAI,WACR,CAAC,gBAEPnC,cAAA,CAACoC,uBAAM,EAAA;YACLC,EAAE,EAAA,IAAA;AACFvD,YAAAA,IAAI,EAAC,IAAI;AACTwC,YAAAA,SAAS,EAAC,SAAS;YACnB,YAAA,EAAYjD,MAAM,CAAC,YAAY,CAAE;AACjCiE,YAAAA,QAAQ,EAAC,mBAAmB;AAC5BhE,YAAAA,SAAS,EAAC,eAAe;AACzB2D,YAAAA,QAAQ,EAAElC,kBAAmB;YAC7BmC,OAAO,EAAE7D,MAAM,CAAC6D,OAAQ;YAAArD,QAAA,EAEvBR,MAAM,CAAC8D;AAAI,WACN,CACT,CAAC;SACD;AACP,OAAK,CACL,EAAC1D,SAAS,iBACRuB,cAAA,CAAA,KAAA,EAAA;AAAK1B,QAAAA,SAAS,EAAC,cAAc;QAAAO,QAAA,eAC3BmB,cAAA,CAACuC,uBAAW,EAAA;AACVC,UAAAA,GAAG,EAAE3C,oBAAqB;AAC1Bf,UAAAA,IAAI,EAAC,IAAI;AACTmD,UAAAA,QAAQ,EAAElC,kBAAmB;AAC7BmC,UAAAA,OAAO,EAAEzD;SAAU;AAEvB,OAAK,CACN;KACE;AACP,GAAK,CAAC;AAEV;AAEA,SAAS6B,oBAAoBA,CAAC1B,KAA8B,EAAA;AAC1D,EAAA,QAAQA,KAAK;AACX,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,iCAAiC;AAC1C,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,+BAA+B;AACxC,IAAA,KAAK,YAAY;AACf,MAAA,OAAO,gCAAgC;AACzC,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,oBAAoB;AAC7B,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,mBAAmB;AAC5B,IAAA,KAAK,SAAS;AACd,IAAA;AACE,MAAA,OAAO,OAAO;AAClB;AACF;;;;"}
|
package/build/alert/Alert.mjs
CHANGED
|
@@ -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 Status,\n Typography,\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 Button from '../button';\nimport Link from '../link';\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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\n // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n | Sentiment.PENDING\n | Status.PENDING}`;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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 /** @deprecated Use `InlinePrompt` 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\n/**\n * @deprecated use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead\n */\nexport default function Alert({\n action,\n className,\n icon,\n statusIconLabel,\n onDismiss,\n message,\n title,\n type = 'neutral',\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 'InlinePrompt' 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 const timeoutId = setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n\n return () => clearTimeout(timeoutId);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n /**\n * All focusable elements must be disabled until we announce the alert.\n * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n */\n const accessibleTabIndex = shouldAnnounce ? undefined : -1;\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 className=\"alert__icon\">\n {icon || <StatusIcon size={32} sentiment={resolvedType} iconLabel={statusIconLabel} />}\n </div>\n <div className={clsx('alert__content', 'd-flex', 'flex-grow-1')}>\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 &&\n ('href' in action ? (\n <Link\n href={action.href}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n ) : (\n <Button\n v2\n size=\"sm\"\n sentiment=\"default\"\n aria-label={action['aria-label']}\n priority=\"secondary-neutral\"\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n ))}\n </div>\n </div>\n {onDismiss && (\n <div className=\"alert__close\">\n <CloseButton\n ref={closeButtonReference}\n size=\"xs\"\n tabIndex={accessibleTabIndex}\n onClick={onDismiss}\n />\n </div>\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","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"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 Status,\n Typography,\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 Button from '../button';\nimport Link from '../link';\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\n // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n | Sentiment.PENDING\n | Status.PENDING}`;\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 /** @deprecated Use `InlinePrompt` 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 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 'InlinePrompt' 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 const timeoutId = setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n\n return () => clearTimeout(timeoutId);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n /**\n * All focusable elements must be disabled until we announce the alert.\n * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n */\n const accessibleTabIndex = shouldAnnounce ? undefined : -1;\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 className=\"alert__icon\">\n {icon || <StatusIcon size={32} sentiment={resolvedType} iconLabel={statusIconLabel} />}\n </div>\n <div className={clsx('alert__content', 'd-flex', 'flex-grow-1')}>\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 &&\n ('href' in action ? (\n <Link\n href={action.href}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n ) : (\n <Button\n v2\n size=\"sm\"\n sentiment=\"default\"\n aria-label={action['aria-label']}\n priority=\"secondary-neutral\"\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n ))}\n </div>\n </div>\n {onDismiss && (\n <div className=\"alert__close\">\n <CloseButton\n ref={closeButtonReference}\n size=\"xs\"\n tabIndex={accessibleTabIndex}\n onClick={onDismiss}\n />\n </div>\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","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"mappings":"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"}
|
package/build/main.css
CHANGED
|
@@ -5442,8 +5442,9 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5442
5442
|
stroke: currentColor;
|
|
5443
5443
|
}
|
|
5444
5444
|
.wds-info-prompt {
|
|
5445
|
+
--Prompt-border-radius: var(--radius-medium);
|
|
5445
5446
|
--Prompt-gap: var(--size-8);
|
|
5446
|
-
--Prompt-padding:
|
|
5447
|
+
--Prompt-padding: var(--size-12);
|
|
5447
5448
|
}
|
|
5448
5449
|
.wds-info-prompt__content {
|
|
5449
5450
|
display: flex;
|
|
@@ -5457,17 +5458,16 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5457
5458
|
.wds-info-prompt__title,
|
|
5458
5459
|
.wds-info-prompt__description {
|
|
5459
5460
|
display: block;
|
|
5460
|
-
color: var(--color-sentiment-primary);
|
|
5461
5461
|
}
|
|
5462
5462
|
.wds-info-prompt__action {
|
|
5463
|
+
align-self: flex-start;
|
|
5463
5464
|
margin-top: var(--Prompt-gap);
|
|
5464
5465
|
}
|
|
5465
|
-
.wds-info-prompt__media {
|
|
5466
|
-
display: flex;
|
|
5467
|
-
}
|
|
5468
5466
|
.wds-info-prompt__media svg {
|
|
5469
5467
|
width: 24px;
|
|
5468
|
+
width: var(--size-24);
|
|
5470
5469
|
height: 24px;
|
|
5470
|
+
height: var(--size-24);
|
|
5471
5471
|
}
|
|
5472
5472
|
.wds-info-prompt .wds-prompt__media-wrapper {
|
|
5473
5473
|
padding: 0;
|
package/build/styles/main.css
CHANGED
|
@@ -5442,8 +5442,9 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5442
5442
|
stroke: currentColor;
|
|
5443
5443
|
}
|
|
5444
5444
|
.wds-info-prompt {
|
|
5445
|
+
--Prompt-border-radius: var(--radius-medium);
|
|
5445
5446
|
--Prompt-gap: var(--size-8);
|
|
5446
|
-
--Prompt-padding:
|
|
5447
|
+
--Prompt-padding: var(--size-12);
|
|
5447
5448
|
}
|
|
5448
5449
|
.wds-info-prompt__content {
|
|
5449
5450
|
display: flex;
|
|
@@ -5457,17 +5458,16 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5457
5458
|
.wds-info-prompt__title,
|
|
5458
5459
|
.wds-info-prompt__description {
|
|
5459
5460
|
display: block;
|
|
5460
|
-
color: var(--color-sentiment-primary);
|
|
5461
5461
|
}
|
|
5462
5462
|
.wds-info-prompt__action {
|
|
5463
|
+
align-self: flex-start;
|
|
5463
5464
|
margin-top: var(--Prompt-gap);
|
|
5464
5465
|
}
|
|
5465
|
-
.wds-info-prompt__media {
|
|
5466
|
-
display: flex;
|
|
5467
|
-
}
|
|
5468
5466
|
.wds-info-prompt__media svg {
|
|
5469
5467
|
width: 24px;
|
|
5468
|
+
width: var(--size-24);
|
|
5470
5469
|
height: 24px;
|
|
5470
|
+
height: var(--size-24);
|
|
5471
5471
|
}
|
|
5472
5472
|
.wds-info-prompt .wds-prompt__media-wrapper {
|
|
5473
5473
|
padding: 0;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.wds-info-prompt {
|
|
2
|
+
--Prompt-border-radius: var(--radius-medium);
|
|
2
3
|
--Prompt-gap: var(--size-8);
|
|
3
|
-
--Prompt-padding:
|
|
4
|
+
--Prompt-padding: var(--size-12);
|
|
4
5
|
}
|
|
5
6
|
.wds-info-prompt__content {
|
|
6
7
|
display: flex;
|
|
@@ -14,17 +15,16 @@
|
|
|
14
15
|
.wds-info-prompt__title,
|
|
15
16
|
.wds-info-prompt__description {
|
|
16
17
|
display: block;
|
|
17
|
-
color: var(--color-sentiment-primary);
|
|
18
18
|
}
|
|
19
19
|
.wds-info-prompt__action {
|
|
20
|
+
align-self: flex-start;
|
|
20
21
|
margin-top: var(--Prompt-gap);
|
|
21
22
|
}
|
|
22
|
-
.wds-info-prompt__media {
|
|
23
|
-
display: flex;
|
|
24
|
-
}
|
|
25
23
|
.wds-info-prompt__media svg {
|
|
26
24
|
width: 24px;
|
|
25
|
+
width: var(--size-24);
|
|
27
26
|
height: 24px;
|
|
27
|
+
height: var(--size-24);
|
|
28
28
|
}
|
|
29
29
|
.wds-info-prompt .wds-prompt__media-wrapper {
|
|
30
30
|
padding: 0;
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import { Sentiment, Size, Status } from '../common';
|
|
2
|
-
/**
|
|
3
|
-
* @deprecated `Alert` component is being replaced by the `InfoPrompt` component
|
|
4
|
-
*/
|
|
5
2
|
export type AlertAction = {
|
|
6
3
|
'aria-label'?: string;
|
|
7
4
|
href?: string;
|
|
@@ -12,13 +9,7 @@ export type AlertAction = {
|
|
|
12
9
|
/** @deprecated Use `"top" | "bottom"` instead. */
|
|
13
10
|
type AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;
|
|
14
11
|
type AlertTypeResolved = `${Sentiment.POSITIVE | Sentiment.NEUTRAL | Sentiment.WARNING | Sentiment.NEGATIVE | Sentiment.PENDING | Status.PENDING}`;
|
|
15
|
-
/**
|
|
16
|
-
* @deprecated `Alert` component is being replaced by the `InfoPrompt` component
|
|
17
|
-
*/
|
|
18
12
|
export type AlertType = AlertTypeResolved | AlertTypeDeprecated;
|
|
19
|
-
/**
|
|
20
|
-
* @deprecated `Alert` component is being replaced by the `InfoPrompt` component
|
|
21
|
-
*/
|
|
22
13
|
export declare enum AlertArrowPosition {
|
|
23
14
|
TOP_LEFT = "up-left",
|
|
24
15
|
TOP = "up-center",
|
|
@@ -27,9 +18,6 @@ export declare enum AlertArrowPosition {
|
|
|
27
18
|
BOTTOM = "down-center",
|
|
28
19
|
BOTTOM_RIGHT = "down-right"
|
|
29
20
|
}
|
|
30
|
-
/**
|
|
31
|
-
* @deprecated `Alert` component is being replaced by the `InfoPrompt` component
|
|
32
|
-
*/
|
|
33
21
|
export interface AlertProps {
|
|
34
22
|
/** 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 */
|
|
35
23
|
action?: AlertAction;
|
|
@@ -58,9 +46,6 @@ export interface AlertProps {
|
|
|
58
46
|
/** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */
|
|
59
47
|
size?: `${Size}`;
|
|
60
48
|
}
|
|
61
|
-
/**
|
|
62
|
-
* @deprecated use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead
|
|
63
|
-
*/
|
|
64
49
|
export default function Alert({ action, className, icon, statusIconLabel, onDismiss, message, title, type, arrow, children, size, dismissible, }: AlertProps): import("react").JSX.Element;
|
|
65
50
|
export {};
|
|
66
51
|
//# sourceMappingURL=Alert.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EACJ,MAAM,EAGP,MAAM,WAAW,CAAC;AAUnB
|
|
1
|
+
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EACJ,MAAM,EAGP,MAAM,WAAW,CAAC;AAUnB,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,GAElB,SAAS,CAAC,OAAO,GACjB,MAAM,CAAC,OAAO,EAAE,CAAC;AACrB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAsJZ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-5a09889",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -87,13 +87,13 @@
|
|
|
87
87
|
"storybook-addon-tag-badges": "^3.0.4",
|
|
88
88
|
"storybook-addon-test-codegen": "^3.0.1",
|
|
89
89
|
"@transferwise/less-config": "3.1.2",
|
|
90
|
-
"@transferwise/neptune-css": "
|
|
90
|
+
"@transferwise/neptune-css": "14.26.1",
|
|
91
91
|
"@wise/components-theming": "1.10.1",
|
|
92
92
|
"@wise/wds-configs": "0.0.0"
|
|
93
93
|
},
|
|
94
94
|
"peerDependencies": {
|
|
95
95
|
"@transferwise/icons": "^3 || ^4",
|
|
96
|
-
"@transferwise/neptune-css": "
|
|
96
|
+
"@transferwise/neptune-css": "^14.26",
|
|
97
97
|
"@wise/art": "^2.26",
|
|
98
98
|
"@wise/components-theming": "^1.9.1",
|
|
99
99
|
"framer-motion": "^12.23.26",
|
|
@@ -8,13 +8,9 @@ import { Sentiment, Status } from '../common';
|
|
|
8
8
|
import { Button, Field, SelectInput } from '..';
|
|
9
9
|
import Alert, { AlertArrowPosition, type AlertProps as FullAlertProps } from './Alert';
|
|
10
10
|
|
|
11
|
-
/**
|
|
12
|
-
* > **DEPRECATED** Use [InfoPrompt](?path=/docs/prompts-infoprompt--docs).
|
|
13
|
-
*/
|
|
14
11
|
export default {
|
|
15
12
|
component: Alert,
|
|
16
13
|
title: 'Prompts/Alert',
|
|
17
|
-
tags: ['deprecated'],
|
|
18
14
|
args: {
|
|
19
15
|
type: Sentiment.POSITIVE,
|
|
20
16
|
message:
|
package/src/alert/Alert.tsx
CHANGED
|
@@ -19,9 +19,6 @@ import InlineMarkdown from './inlineMarkdown';
|
|
|
19
19
|
import Button from '../button';
|
|
20
20
|
import Link from '../link';
|
|
21
21
|
|
|
22
|
-
/**
|
|
23
|
-
* @deprecated `Alert` component is being replaced by the `InfoPrompt` component
|
|
24
|
-
*/
|
|
25
22
|
export type AlertAction = {
|
|
26
23
|
'aria-label'?: string;
|
|
27
24
|
href?: string;
|
|
@@ -40,15 +37,8 @@ type AlertTypeResolved = `${
|
|
|
40
37
|
// remove when all instances of Sentiment.PENDING have been updated to Status.PENDING
|
|
41
38
|
| Sentiment.PENDING
|
|
42
39
|
| Status.PENDING}`;
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* @deprecated `Alert` component is being replaced by the `InfoPrompt` component
|
|
46
|
-
*/
|
|
47
40
|
export type AlertType = AlertTypeResolved | AlertTypeDeprecated;
|
|
48
41
|
|
|
49
|
-
/**
|
|
50
|
-
* @deprecated `Alert` component is being replaced by the `InfoPrompt` component
|
|
51
|
-
*/
|
|
52
42
|
export enum AlertArrowPosition {
|
|
53
43
|
TOP_LEFT = 'up-left',
|
|
54
44
|
TOP = 'up-center',
|
|
@@ -58,9 +48,6 @@ export enum AlertArrowPosition {
|
|
|
58
48
|
BOTTOM_RIGHT = 'down-right',
|
|
59
49
|
}
|
|
60
50
|
|
|
61
|
-
/**
|
|
62
|
-
* @deprecated `Alert` component is being replaced by the `InfoPrompt` component
|
|
63
|
-
*/
|
|
64
51
|
export interface AlertProps {
|
|
65
52
|
/** 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 */
|
|
66
53
|
action?: AlertAction;
|
|
@@ -103,9 +90,6 @@ function resolveType(type: AlertType): AlertTypeResolved {
|
|
|
103
90
|
}
|
|
104
91
|
}
|
|
105
92
|
|
|
106
|
-
/**
|
|
107
|
-
* @deprecated use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead
|
|
108
|
-
*/
|
|
109
93
|
export default function Alert({
|
|
110
94
|
action,
|
|
111
95
|
className,
|
package/src/main.css
CHANGED
|
@@ -5442,8 +5442,9 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5442
5442
|
stroke: currentColor;
|
|
5443
5443
|
}
|
|
5444
5444
|
.wds-info-prompt {
|
|
5445
|
+
--Prompt-border-radius: var(--radius-medium);
|
|
5445
5446
|
--Prompt-gap: var(--size-8);
|
|
5446
|
-
--Prompt-padding:
|
|
5447
|
+
--Prompt-padding: var(--size-12);
|
|
5447
5448
|
}
|
|
5448
5449
|
.wds-info-prompt__content {
|
|
5449
5450
|
display: flex;
|
|
@@ -5457,17 +5458,16 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5457
5458
|
.wds-info-prompt__title,
|
|
5458
5459
|
.wds-info-prompt__description {
|
|
5459
5460
|
display: block;
|
|
5460
|
-
color: var(--color-sentiment-primary);
|
|
5461
5461
|
}
|
|
5462
5462
|
.wds-info-prompt__action {
|
|
5463
|
+
align-self: flex-start;
|
|
5463
5464
|
margin-top: var(--Prompt-gap);
|
|
5464
5465
|
}
|
|
5465
|
-
.wds-info-prompt__media {
|
|
5466
|
-
display: flex;
|
|
5467
|
-
}
|
|
5468
5466
|
.wds-info-prompt__media svg {
|
|
5469
5467
|
width: 24px;
|
|
5468
|
+
width: var(--size-24);
|
|
5470
5469
|
height: 24px;
|
|
5470
|
+
height: var(--size-24);
|
|
5471
5471
|
}
|
|
5472
5472
|
.wds-info-prompt .wds-prompt__media-wrapper {
|
|
5473
5473
|
padding: 0;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.wds-info-prompt {
|
|
2
|
+
--Prompt-border-radius: var(--radius-medium);
|
|
2
3
|
--Prompt-gap: var(--size-8);
|
|
3
|
-
--Prompt-padding:
|
|
4
|
+
--Prompt-padding: var(--size-12);
|
|
4
5
|
}
|
|
5
6
|
.wds-info-prompt__content {
|
|
6
7
|
display: flex;
|
|
@@ -14,17 +15,16 @@
|
|
|
14
15
|
.wds-info-prompt__title,
|
|
15
16
|
.wds-info-prompt__description {
|
|
16
17
|
display: block;
|
|
17
|
-
color: var(--color-sentiment-primary);
|
|
18
18
|
}
|
|
19
19
|
.wds-info-prompt__action {
|
|
20
|
+
align-self: flex-start;
|
|
20
21
|
margin-top: var(--Prompt-gap);
|
|
21
22
|
}
|
|
22
|
-
.wds-info-prompt__media {
|
|
23
|
-
display: flex;
|
|
24
|
-
}
|
|
25
23
|
.wds-info-prompt__media svg {
|
|
26
24
|
width: 24px;
|
|
25
|
+
width: var(--size-24);
|
|
27
26
|
height: 24px;
|
|
27
|
+
height: var(--size-24);
|
|
28
28
|
}
|
|
29
29
|
.wds-info-prompt .wds-prompt__media-wrapper {
|
|
30
30
|
padding: 0;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.wds-info-prompt {
|
|
2
|
+
--Prompt-border-radius: var(--radius-medium);
|
|
2
3
|
--Prompt-gap: var(--size-8);
|
|
3
|
-
--Prompt-padding:
|
|
4
|
+
--Prompt-padding: var(--size-12);
|
|
4
5
|
|
|
5
6
|
&__content {
|
|
6
7
|
display: flex;
|
|
@@ -11,27 +12,25 @@
|
|
|
11
12
|
justify-content: flex-start; /* Top align when title exists */
|
|
12
13
|
}
|
|
13
14
|
}
|
|
14
|
-
|
|
15
15
|
&__title,
|
|
16
16
|
&__description {
|
|
17
17
|
display: block;
|
|
18
|
-
color: var(--color-sentiment-primary);
|
|
19
18
|
}
|
|
20
19
|
|
|
21
20
|
&__action {
|
|
21
|
+
align-self: flex-start;
|
|
22
22
|
margin-top: var(--Prompt-gap);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
&__media {
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
// To ensure icons are sized correctly, we set a fixed size for SVGs within the media wrapper
|
|
28
27
|
svg {
|
|
29
|
-
width:
|
|
30
|
-
height:
|
|
28
|
+
width: var(--size-24);
|
|
29
|
+
height: var(--size-24);
|
|
31
30
|
}
|
|
32
31
|
}
|
|
33
32
|
|
|
34
33
|
.wds-prompt__media-wrapper {
|
|
35
34
|
padding: 0;
|
|
36
35
|
}
|
|
37
|
-
}
|
|
36
|
+
}
|