@transferwise/components 46.109.0 → 46.110.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/list/List.js +1 -1
- package/build/list/List.js.map +1 -1
- package/build/list/List.mjs +1 -1
- package/build/list/List.mjs.map +1 -1
- package/build/main.css +13 -2
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/styles/main.css +13 -2
- package/build/styles/nudge/Nudge.css +13 -2
- package/build/types/nudge/Nudge.d.ts +1 -1
- package/build/types/nudge/Nudge.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/list/List.tsx +1 -1
- package/src/main.css +13 -2
- package/src/nudge/Nudge.css +13 -2
- package/src/nudge/Nudge.less +10 -1
- package/src/nudge/Nudge.story.tsx +9 -4
- package/src/nudge/Nudge.tsx +2 -1
package/build/list/List.js
CHANGED
package/build/list/List.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n as?: 'ul' | 'ol' | 'div';\n className?: string;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n id?: string;\n [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;;;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,cAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,SAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,
|
|
1
|
+
{"version":3,"file":"List.js","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n as?: 'ul' | 'ol' | 'div';\n className?: string;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n id?: string;\n [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n return <Element className={clsx('wds-list', 'list-unstyled', 'm-y-0', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;;;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,cAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,SAAI,CAAC,UAAU,EAAE,eAAe,EAAE,OAAO,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,GAAC,CAAG;AACjG;;;;"}
|
package/build/list/List.mjs
CHANGED
package/build/list/List.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.mjs","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n as?: 'ul' | 'ol' | 'div';\n className?: string;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n id?: string;\n [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,GAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,IAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,
|
|
1
|
+
{"version":3,"file":"List.mjs","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n as?: 'ul' | 'ol' | 'div';\n className?: string;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n id?: string;\n [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n return <Element className={clsx('wds-list', 'list-unstyled', 'm-y-0', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,GAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,IAAI,CAAC,UAAU,EAAE,eAAe,EAAE,OAAO,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,GAAC,CAAG;AACjG;;;;"}
|
package/build/main.css
CHANGED
|
@@ -4641,7 +4641,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4641
4641
|
margin-right: -30px;
|
|
4642
4642
|
}
|
|
4643
4643
|
.wds-nudge-media-shopping-bag {
|
|
4644
|
-
margin-left:
|
|
4644
|
+
margin-left: -9px;
|
|
4645
4645
|
margin-top: 14px;
|
|
4646
4646
|
position: absolute;
|
|
4647
4647
|
width: 116px;
|
|
@@ -4649,7 +4649,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4649
4649
|
[dir="rtl"] .wds-nudge-media-shopping-bag {
|
|
4650
4650
|
transform: scaleX(-1);
|
|
4651
4651
|
margin-left: 0;
|
|
4652
|
-
margin-right:
|
|
4652
|
+
margin-right: -9px;
|
|
4653
4653
|
}
|
|
4654
4654
|
.wds-nudge-media-flower {
|
|
4655
4655
|
margin-left: -24px;
|
|
@@ -4662,6 +4662,17 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4662
4662
|
margin-left: 0;
|
|
4663
4663
|
margin-right: -24px;
|
|
4664
4664
|
}
|
|
4665
|
+
.wds-nudge-media-backpack {
|
|
4666
|
+
margin-left: -16px;
|
|
4667
|
+
margin-top: 6px;
|
|
4668
|
+
position: absolute;
|
|
4669
|
+
width: 123px;
|
|
4670
|
+
}
|
|
4671
|
+
[dir="rtl"] .wds-nudge-media-backpack {
|
|
4672
|
+
transform: scaleX(-1);
|
|
4673
|
+
margin-left: 0;
|
|
4674
|
+
margin-right: -16px;
|
|
4675
|
+
}
|
|
4665
4676
|
.wds-nudge-container {
|
|
4666
4677
|
align-items: stretch;
|
|
4667
4678
|
display: flex;
|
package/build/nudge/Nudge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n try {\n const storageItem = localStorage.getItem(STORAGE_NAME);\n\n if (storageItem) {\n const storage: unknown = JSON.parse(storageItem);\n\n if (Array.isArray(storage)) {\n return storage.map((item) => String(item));\n }\n }\n } catch (error) {}\n\n return [];\n};\n\ntype MediaNameType =\n | `${Assets.GLOBE}`\n | `${Assets.LOCK}`\n | `${Assets.WALLET}`\n | `${Assets.GEAR}`\n | `${Assets.INVITE_LETTER}`\n | `${Assets.PERSONAL_CARD}`\n | `${Assets.BUSINESS_CARD}`\n | `${Assets.HEART}`\n | `${Assets.MULTI_CURRENCY}`\n | `${Assets.SHOPPING_BAG}`\n | `${Assets.FLOWER}`;\n\ntype BaseProps = {\n /** @deprecated use `mediaName` property instead */\n media?: ReactNode;\n /** Media name */\n mediaName?: MediaNameType;\n title: ReactNode;\n link?: ReactNode;\n href?: string;\n onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n /** Fired when the user clicks on close button */\n onDismiss?: () => void;\n /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n id?: string;\n persistDismissal?: false;\n isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n id: string;\n /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n persistDismissal: true;\n /**\n * Fired on mount for determining if nudge has been dismissed before\n *\n * @param {boolean} value - set to true if dismissed previously\n */\n isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n media,\n mediaName,\n title,\n link,\n href,\n onClick,\n onDismiss,\n persistDismissal,\n isPreviouslyDismissed,\n id,\n className,\n action,\n}: Props) => {\n const [isDismissed, setIsDismissed] = useState(false);\n const [isMounted, setIsMounted] = useState(false);\n\n const handleOnDismiss = () => {\n const dismissedNudgesStorage = getLocalStorage();\n\n if (persistDismissal && id) {\n try {\n localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n } catch (error) {}\n\n setIsDismissed(true);\n }\n\n if (onDismiss) {\n onDismiss();\n }\n };\n\n useEffect(() => {\n if (persistDismissal && id) {\n const dismissedNudgesStorage = getLocalStorage();\n let isDismissed = false;\n\n if (dismissedNudgesStorage?.find((item) => item === id)) {\n setIsDismissed(true);\n isDismissed = true;\n }\n\n if (isPreviouslyDismissed) {\n isPreviouslyDismissed(isDismissed);\n }\n }\n\n setIsMounted(true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [id, persistDismissal]);\n\n if (persistDismissal && (isDismissed || !isMounted)) {\n return null;\n }\n\n return (\n <div className={clsx('wds-nudge', className)} id={id}>\n {!!mediaName && (\n <div className=\"wds-nudge-media\">\n <Illustration\n name={mediaName as IllustrationNames}\n className={clsx(`wds-nudge-media-${mediaName}`)}\n size=\"small\"\n disablePadding\n alt=\"\"\n />\n </div>\n )}\n <div className=\"wds-nudge-container\">\n <div className=\"wds-nudge-content\">\n <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n {title}\n </Body>\n {/* Merge these two Link instances into one */}\n {link && (\n <Link\n href={href}\n type={Typography.LINK_LARGE}\n className=\"wds-nudge-link\"\n onClick={onClick}\n >\n {link}\n </Link>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"m-t-1\"\n aria-label={action['aria-label']}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {onDismiss || persistDismissal ? (\n <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\n ) : null}\n </div>\n </div>\n );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,YAAY,GAAG;AAE5B,MAAMC,eAAe,GAAGA,MAAe;EACrC,IAAI;AACF,IAAA,MAAMC,WAAW,GAAGC,YAAY,CAACC,OAAO,CAACJ,YAAY,CAAC;AAEtD,IAAA,IAAIE,WAAW,EAAE;AACf,MAAA,MAAMG,OAAO,GAAYC,IAAI,CAACC,KAAK,CAACL,WAAW,CAAC;AAEhD,MAAA,IAAIM,KAAK,CAACC,OAAO,CAACJ,OAAO,CAAC,EAAE;QAC1B,OAAOA,OAAO,CAACK,GAAG,CAAEC,IAAI,IAAKC,MAAM,CAACD,IAAI,CAAC,CAAC;AAC5C,MAAA;AACF,IAAA;AACF,EAAA,CAAC,CAAC,OAAOE,KAAK,EAAE,CAAC;AAEjB,EAAA,OAAO,EAAE;AACX,CAAC;
|
|
1
|
+
{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n try {\n const storageItem = localStorage.getItem(STORAGE_NAME);\n\n if (storageItem) {\n const storage: unknown = JSON.parse(storageItem);\n\n if (Array.isArray(storage)) {\n return storage.map((item) => String(item));\n }\n }\n } catch (error) {}\n\n return [];\n};\n\ntype MediaNameType =\n | `${Assets.GLOBE}`\n | `${Assets.LOCK}`\n | `${Assets.WALLET}`\n | `${Assets.GEAR}`\n | `${Assets.INVITE_LETTER}`\n | `${Assets.PERSONAL_CARD}`\n | `${Assets.BUSINESS_CARD}`\n | `${Assets.HEART}`\n | `${Assets.MULTI_CURRENCY}`\n | `${Assets.SHOPPING_BAG}`\n | `${Assets.FLOWER}`\n | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n /** @deprecated use `mediaName` property instead */\n media?: ReactNode;\n /** Media name */\n mediaName?: MediaNameType;\n title: ReactNode;\n link?: ReactNode;\n href?: string;\n onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n /** Fired when the user clicks on close button */\n onDismiss?: () => void;\n /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n id?: string;\n persistDismissal?: false;\n isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n id: string;\n /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n persistDismissal: true;\n /**\n * Fired on mount for determining if nudge has been dismissed before\n *\n * @param {boolean} value - set to true if dismissed previously\n */\n isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n media,\n mediaName,\n title,\n link,\n href,\n onClick,\n onDismiss,\n persistDismissal,\n isPreviouslyDismissed,\n id,\n className,\n action,\n}: Props) => {\n const [isDismissed, setIsDismissed] = useState(false);\n const [isMounted, setIsMounted] = useState(false);\n\n const handleOnDismiss = () => {\n const dismissedNudgesStorage = getLocalStorage();\n\n if (persistDismissal && id) {\n try {\n localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n } catch (error) {}\n\n setIsDismissed(true);\n }\n\n if (onDismiss) {\n onDismiss();\n }\n };\n\n useEffect(() => {\n if (persistDismissal && id) {\n const dismissedNudgesStorage = getLocalStorage();\n let isDismissed = false;\n\n if (dismissedNudgesStorage?.find((item) => item === id)) {\n setIsDismissed(true);\n isDismissed = true;\n }\n\n if (isPreviouslyDismissed) {\n isPreviouslyDismissed(isDismissed);\n }\n }\n\n setIsMounted(true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [id, persistDismissal]);\n\n if (persistDismissal && (isDismissed || !isMounted)) {\n return null;\n }\n\n return (\n <div className={clsx('wds-nudge', className)} id={id}>\n {!!mediaName && (\n <div className=\"wds-nudge-media\">\n <Illustration\n name={mediaName as IllustrationNames}\n className={clsx(`wds-nudge-media-${mediaName}`)}\n size=\"small\"\n disablePadding\n alt=\"\"\n />\n </div>\n )}\n <div className=\"wds-nudge-container\">\n <div className=\"wds-nudge-content\">\n <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n {title}\n </Body>\n {/* Merge these two Link instances into one */}\n {link && (\n <Link\n href={href}\n type={Typography.LINK_LARGE}\n className=\"wds-nudge-link\"\n onClick={onClick}\n >\n {link}\n </Link>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"m-t-1\"\n aria-label={action['aria-label']}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {onDismiss || persistDismissal ? (\n <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\n ) : null}\n </div>\n </div>\n );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","CloseButton"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n try {\n const storageItem = localStorage.getItem(STORAGE_NAME);\n\n if (storageItem) {\n const storage: unknown = JSON.parse(storageItem);\n\n if (Array.isArray(storage)) {\n return storage.map((item) => String(item));\n }\n }\n } catch (error) {}\n\n return [];\n};\n\ntype MediaNameType =\n | `${Assets.GLOBE}`\n | `${Assets.LOCK}`\n | `${Assets.WALLET}`\n | `${Assets.GEAR}`\n | `${Assets.INVITE_LETTER}`\n | `${Assets.PERSONAL_CARD}`\n | `${Assets.BUSINESS_CARD}`\n | `${Assets.HEART}`\n | `${Assets.MULTI_CURRENCY}`\n | `${Assets.SHOPPING_BAG}`\n | `${Assets.FLOWER}`;\n\ntype BaseProps = {\n /** @deprecated use `mediaName` property instead */\n media?: ReactNode;\n /** Media name */\n mediaName?: MediaNameType;\n title: ReactNode;\n link?: ReactNode;\n href?: string;\n onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n /** Fired when the user clicks on close button */\n onDismiss?: () => void;\n /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n id?: string;\n persistDismissal?: false;\n isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n id: string;\n /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n persistDismissal: true;\n /**\n * Fired on mount for determining if nudge has been dismissed before\n *\n * @param {boolean} value - set to true if dismissed previously\n */\n isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n media,\n mediaName,\n title,\n link,\n href,\n onClick,\n onDismiss,\n persistDismissal,\n isPreviouslyDismissed,\n id,\n className,\n action,\n}: Props) => {\n const [isDismissed, setIsDismissed] = useState(false);\n const [isMounted, setIsMounted] = useState(false);\n\n const handleOnDismiss = () => {\n const dismissedNudgesStorage = getLocalStorage();\n\n if (persistDismissal && id) {\n try {\n localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n } catch (error) {}\n\n setIsDismissed(true);\n }\n\n if (onDismiss) {\n onDismiss();\n }\n };\n\n useEffect(() => {\n if (persistDismissal && id) {\n const dismissedNudgesStorage = getLocalStorage();\n let isDismissed = false;\n\n if (dismissedNudgesStorage?.find((item) => item === id)) {\n setIsDismissed(true);\n isDismissed = true;\n }\n\n if (isPreviouslyDismissed) {\n isPreviouslyDismissed(isDismissed);\n }\n }\n\n setIsMounted(true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [id, persistDismissal]);\n\n if (persistDismissal && (isDismissed || !isMounted)) {\n return null;\n }\n\n return (\n <div className={clsx('wds-nudge', className)} id={id}>\n {!!mediaName && (\n <div className=\"wds-nudge-media\">\n <Illustration\n name={mediaName as IllustrationNames}\n className={clsx(`wds-nudge-media-${mediaName}`)}\n size=\"small\"\n disablePadding\n alt=\"\"\n />\n </div>\n )}\n <div className=\"wds-nudge-container\">\n <div className=\"wds-nudge-content\">\n <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n {title}\n </Body>\n {/* Merge these two Link instances into one */}\n {link && (\n <Link\n href={href}\n type={Typography.LINK_LARGE}\n className=\"wds-nudge-link\"\n onClick={onClick}\n >\n {link}\n </Link>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"m-t-1\"\n aria-label={action['aria-label']}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {onDismiss || persistDismissal ? (\n <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\n ) : null}\n </div>\n </div>\n );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,YAAY,GAAG;AAE5B,MAAMC,eAAe,GAAGA,MAAe;EACrC,IAAI;AACF,IAAA,MAAMC,WAAW,GAAGC,YAAY,CAACC,OAAO,CAACJ,YAAY,CAAC;AAEtD,IAAA,IAAIE,WAAW,EAAE;AACf,MAAA,MAAMG,OAAO,GAAYC,IAAI,CAACC,KAAK,CAACL,WAAW,CAAC;AAEhD,MAAA,IAAIM,KAAK,CAACC,OAAO,CAACJ,OAAO,CAAC,EAAE;QAC1B,OAAOA,OAAO,CAACK,GAAG,CAAEC,IAAI,IAAKC,MAAM,CAACD,IAAI,CAAC,CAAC;AAC5C,MAAA;AACF,IAAA;AACF,EAAA,CAAC,CAAC,OAAOE,KAAK,EAAE,CAAC;AAEjB,EAAA,OAAO,EAAE;AACX,CAAC;
|
|
1
|
+
{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n try {\n const storageItem = localStorage.getItem(STORAGE_NAME);\n\n if (storageItem) {\n const storage: unknown = JSON.parse(storageItem);\n\n if (Array.isArray(storage)) {\n return storage.map((item) => String(item));\n }\n }\n } catch (error) {}\n\n return [];\n};\n\ntype MediaNameType =\n | `${Assets.GLOBE}`\n | `${Assets.LOCK}`\n | `${Assets.WALLET}`\n | `${Assets.GEAR}`\n | `${Assets.INVITE_LETTER}`\n | `${Assets.PERSONAL_CARD}`\n | `${Assets.BUSINESS_CARD}`\n | `${Assets.HEART}`\n | `${Assets.MULTI_CURRENCY}`\n | `${Assets.SHOPPING_BAG}`\n | `${Assets.FLOWER}`\n | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n /** @deprecated use `mediaName` property instead */\n media?: ReactNode;\n /** Media name */\n mediaName?: MediaNameType;\n title: ReactNode;\n link?: ReactNode;\n href?: string;\n onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n /** Fired when the user clicks on close button */\n onDismiss?: () => void;\n /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n id?: string;\n persistDismissal?: false;\n isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n id: string;\n /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n persistDismissal: true;\n /**\n * Fired on mount for determining if nudge has been dismissed before\n *\n * @param {boolean} value - set to true if dismissed previously\n */\n isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n media,\n mediaName,\n title,\n link,\n href,\n onClick,\n onDismiss,\n persistDismissal,\n isPreviouslyDismissed,\n id,\n className,\n action,\n}: Props) => {\n const [isDismissed, setIsDismissed] = useState(false);\n const [isMounted, setIsMounted] = useState(false);\n\n const handleOnDismiss = () => {\n const dismissedNudgesStorage = getLocalStorage();\n\n if (persistDismissal && id) {\n try {\n localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n } catch (error) {}\n\n setIsDismissed(true);\n }\n\n if (onDismiss) {\n onDismiss();\n }\n };\n\n useEffect(() => {\n if (persistDismissal && id) {\n const dismissedNudgesStorage = getLocalStorage();\n let isDismissed = false;\n\n if (dismissedNudgesStorage?.find((item) => item === id)) {\n setIsDismissed(true);\n isDismissed = true;\n }\n\n if (isPreviouslyDismissed) {\n isPreviouslyDismissed(isDismissed);\n }\n }\n\n setIsMounted(true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [id, persistDismissal]);\n\n if (persistDismissal && (isDismissed || !isMounted)) {\n return null;\n }\n\n return (\n <div className={clsx('wds-nudge', className)} id={id}>\n {!!mediaName && (\n <div className=\"wds-nudge-media\">\n <Illustration\n name={mediaName as IllustrationNames}\n className={clsx(`wds-nudge-media-${mediaName}`)}\n size=\"small\"\n disablePadding\n alt=\"\"\n />\n </div>\n )}\n <div className=\"wds-nudge-container\">\n <div className=\"wds-nudge-content\">\n <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n {title}\n </Body>\n {/* Merge these two Link instances into one */}\n {link && (\n <Link\n href={href}\n type={Typography.LINK_LARGE}\n className=\"wds-nudge-link\"\n onClick={onClick}\n >\n {link}\n </Link>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"m-t-1\"\n aria-label={action['aria-label']}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {onDismiss || persistDismissal ? (\n <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\n ) : null}\n </div>\n </div>\n );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","CloseButton"],"mappings":"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"}
|
package/build/styles/main.css
CHANGED
|
@@ -4641,7 +4641,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4641
4641
|
margin-right: -30px;
|
|
4642
4642
|
}
|
|
4643
4643
|
.wds-nudge-media-shopping-bag {
|
|
4644
|
-
margin-left:
|
|
4644
|
+
margin-left: -9px;
|
|
4645
4645
|
margin-top: 14px;
|
|
4646
4646
|
position: absolute;
|
|
4647
4647
|
width: 116px;
|
|
@@ -4649,7 +4649,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4649
4649
|
[dir="rtl"] .wds-nudge-media-shopping-bag {
|
|
4650
4650
|
transform: scaleX(-1);
|
|
4651
4651
|
margin-left: 0;
|
|
4652
|
-
margin-right:
|
|
4652
|
+
margin-right: -9px;
|
|
4653
4653
|
}
|
|
4654
4654
|
.wds-nudge-media-flower {
|
|
4655
4655
|
margin-left: -24px;
|
|
@@ -4662,6 +4662,17 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4662
4662
|
margin-left: 0;
|
|
4663
4663
|
margin-right: -24px;
|
|
4664
4664
|
}
|
|
4665
|
+
.wds-nudge-media-backpack {
|
|
4666
|
+
margin-left: -16px;
|
|
4667
|
+
margin-top: 6px;
|
|
4668
|
+
position: absolute;
|
|
4669
|
+
width: 123px;
|
|
4670
|
+
}
|
|
4671
|
+
[dir="rtl"] .wds-nudge-media-backpack {
|
|
4672
|
+
transform: scaleX(-1);
|
|
4673
|
+
margin-left: 0;
|
|
4674
|
+
margin-right: -16px;
|
|
4675
|
+
}
|
|
4665
4676
|
.wds-nudge-container {
|
|
4666
4677
|
align-items: stretch;
|
|
4667
4678
|
display: flex;
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
margin-right: -30px;
|
|
127
127
|
}
|
|
128
128
|
.wds-nudge-media-shopping-bag {
|
|
129
|
-
margin-left:
|
|
129
|
+
margin-left: -9px;
|
|
130
130
|
margin-top: 14px;
|
|
131
131
|
position: absolute;
|
|
132
132
|
width: 116px;
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
[dir="rtl"] .wds-nudge-media-shopping-bag {
|
|
135
135
|
transform: scaleX(-1);
|
|
136
136
|
margin-left: 0;
|
|
137
|
-
margin-right:
|
|
137
|
+
margin-right: -9px;
|
|
138
138
|
}
|
|
139
139
|
.wds-nudge-media-flower {
|
|
140
140
|
margin-left: -24px;
|
|
@@ -147,6 +147,17 @@
|
|
|
147
147
|
margin-left: 0;
|
|
148
148
|
margin-right: -24px;
|
|
149
149
|
}
|
|
150
|
+
.wds-nudge-media-backpack {
|
|
151
|
+
margin-left: -16px;
|
|
152
|
+
margin-top: 6px;
|
|
153
|
+
position: absolute;
|
|
154
|
+
width: 123px;
|
|
155
|
+
}
|
|
156
|
+
[dir="rtl"] .wds-nudge-media-backpack {
|
|
157
|
+
transform: scaleX(-1);
|
|
158
|
+
margin-left: 0;
|
|
159
|
+
margin-right: -16px;
|
|
160
|
+
}
|
|
150
161
|
.wds-nudge-container {
|
|
151
162
|
align-items: stretch;
|
|
152
163
|
display: flex;
|
|
@@ -2,7 +2,7 @@ import { Assets } from '@wise/art';
|
|
|
2
2
|
import { ReactNode, MouseEvent } from 'react';
|
|
3
3
|
import type { AlertAction } from '../alert';
|
|
4
4
|
export declare const STORAGE_NAME = "dismissedNudges";
|
|
5
|
-
type MediaNameType = `${Assets.GLOBE}` | `${Assets.LOCK}` | `${Assets.WALLET}` | `${Assets.GEAR}` | `${Assets.INVITE_LETTER}` | `${Assets.PERSONAL_CARD}` | `${Assets.BUSINESS_CARD}` | `${Assets.HEART}` | `${Assets.MULTI_CURRENCY}` | `${Assets.SHOPPING_BAG}` | `${Assets.FLOWER}`;
|
|
5
|
+
type MediaNameType = `${Assets.GLOBE}` | `${Assets.LOCK}` | `${Assets.WALLET}` | `${Assets.GEAR}` | `${Assets.INVITE_LETTER}` | `${Assets.PERSONAL_CARD}` | `${Assets.BUSINESS_CARD}` | `${Assets.HEART}` | `${Assets.MULTI_CURRENCY}` | `${Assets.SHOPPING_BAG}` | `${Assets.FLOWER}` | `${Assets.BACKPACK}`;
|
|
6
6
|
type BaseProps = {
|
|
7
7
|
/** @deprecated use `mediaName` property instead */
|
|
8
8
|
media?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAA0B,MAAM,WAAW,CAAC;AAEzE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAkB9C,KAAK,aAAa,GACd,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,cAAc,EAAE,GAC1B,GAAG,MAAM,CAAC,YAAY,EAAE,GACxB,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAA0B,MAAM,WAAW,CAAC;AAEzE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAkB9C,KAAK,aAAa,GACd,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,cAAc,EAAE,GAC1B,GAAG,MAAM,CAAC,YAAY,EAAE,GACxB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;AAEzB,KAAK,SAAS,GAAG;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACxD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,2IAA2I;IAC3I,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,gBAAgB,EAAE,IAAI,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,MAAM,KAAK,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtD,QAAA,MAAM,KAAK,GAAI,8HAaZ,KAAK,uCA2FP,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.110.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -83,10 +83,10 @@
|
|
|
83
83
|
"storybook": "^9.1.3",
|
|
84
84
|
"storybook-addon-tag-badges": "^2.0.2",
|
|
85
85
|
"storybook-addon-test-codegen": "^2.0.1",
|
|
86
|
-
"@transferwise/
|
|
86
|
+
"@transferwise/neptune-css": "14.24.6",
|
|
87
87
|
"@wise/components-theming": "1.6.4",
|
|
88
88
|
"@wise/wds-configs": "0.0.0",
|
|
89
|
-
"@transferwise/
|
|
89
|
+
"@transferwise/less-config": "3.1.2"
|
|
90
90
|
},
|
|
91
91
|
"peerDependencies": {
|
|
92
92
|
"@transferwise/icons": "^3.22.4",
|
package/src/list/List.tsx
CHANGED
|
@@ -11,5 +11,5 @@ export interface ListProps {
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
export default function List({ as: Element = 'ul', className, ...props }: ListProps) {
|
|
14
|
-
return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;
|
|
14
|
+
return <Element className={clsx('wds-list', 'list-unstyled', 'm-y-0', className)} {...props} />;
|
|
15
15
|
}
|
package/src/main.css
CHANGED
|
@@ -4641,7 +4641,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4641
4641
|
margin-right: -30px;
|
|
4642
4642
|
}
|
|
4643
4643
|
.wds-nudge-media-shopping-bag {
|
|
4644
|
-
margin-left:
|
|
4644
|
+
margin-left: -9px;
|
|
4645
4645
|
margin-top: 14px;
|
|
4646
4646
|
position: absolute;
|
|
4647
4647
|
width: 116px;
|
|
@@ -4649,7 +4649,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4649
4649
|
[dir="rtl"] .wds-nudge-media-shopping-bag {
|
|
4650
4650
|
transform: scaleX(-1);
|
|
4651
4651
|
margin-left: 0;
|
|
4652
|
-
margin-right:
|
|
4652
|
+
margin-right: -9px;
|
|
4653
4653
|
}
|
|
4654
4654
|
.wds-nudge-media-flower {
|
|
4655
4655
|
margin-left: -24px;
|
|
@@ -4662,6 +4662,17 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4662
4662
|
margin-left: 0;
|
|
4663
4663
|
margin-right: -24px;
|
|
4664
4664
|
}
|
|
4665
|
+
.wds-nudge-media-backpack {
|
|
4666
|
+
margin-left: -16px;
|
|
4667
|
+
margin-top: 6px;
|
|
4668
|
+
position: absolute;
|
|
4669
|
+
width: 123px;
|
|
4670
|
+
}
|
|
4671
|
+
[dir="rtl"] .wds-nudge-media-backpack {
|
|
4672
|
+
transform: scaleX(-1);
|
|
4673
|
+
margin-left: 0;
|
|
4674
|
+
margin-right: -16px;
|
|
4675
|
+
}
|
|
4665
4676
|
.wds-nudge-container {
|
|
4666
4677
|
align-items: stretch;
|
|
4667
4678
|
display: flex;
|
package/src/nudge/Nudge.css
CHANGED
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
margin-right: -30px;
|
|
127
127
|
}
|
|
128
128
|
.wds-nudge-media-shopping-bag {
|
|
129
|
-
margin-left:
|
|
129
|
+
margin-left: -9px;
|
|
130
130
|
margin-top: 14px;
|
|
131
131
|
position: absolute;
|
|
132
132
|
width: 116px;
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
[dir="rtl"] .wds-nudge-media-shopping-bag {
|
|
135
135
|
transform: scaleX(-1);
|
|
136
136
|
margin-left: 0;
|
|
137
|
-
margin-right:
|
|
137
|
+
margin-right: -9px;
|
|
138
138
|
}
|
|
139
139
|
.wds-nudge-media-flower {
|
|
140
140
|
margin-left: -24px;
|
|
@@ -147,6 +147,17 @@
|
|
|
147
147
|
margin-left: 0;
|
|
148
148
|
margin-right: -24px;
|
|
149
149
|
}
|
|
150
|
+
.wds-nudge-media-backpack {
|
|
151
|
+
margin-left: -16px;
|
|
152
|
+
margin-top: 6px;
|
|
153
|
+
position: absolute;
|
|
154
|
+
width: 123px;
|
|
155
|
+
}
|
|
156
|
+
[dir="rtl"] .wds-nudge-media-backpack {
|
|
157
|
+
transform: scaleX(-1);
|
|
158
|
+
margin-left: 0;
|
|
159
|
+
margin-right: -16px;
|
|
160
|
+
}
|
|
150
161
|
.wds-nudge-container {
|
|
151
162
|
align-items: stretch;
|
|
152
163
|
display: flex;
|
package/src/nudge/Nudge.less
CHANGED
|
@@ -51,23 +51,32 @@
|
|
|
51
51
|
&-invite-letter {
|
|
52
52
|
.media-position(105px, -17px, -2px);
|
|
53
53
|
}
|
|
54
|
+
|
|
54
55
|
&-personal-card,
|
|
55
56
|
&-business-card
|
|
56
57
|
{
|
|
57
58
|
.media-position(104px, -15px, 2px);
|
|
58
59
|
}
|
|
60
|
+
|
|
59
61
|
&-heart {
|
|
60
62
|
.media-position(95px, -7px, 11px);
|
|
61
63
|
}
|
|
64
|
+
|
|
62
65
|
&-multi-currency {
|
|
63
66
|
.media-position(131px, -30px, 1px);
|
|
64
67
|
}
|
|
68
|
+
|
|
65
69
|
&-shopping-bag {
|
|
66
|
-
.media-position(116px,
|
|
70
|
+
.media-position(116px, -9px, 14px);
|
|
67
71
|
}
|
|
72
|
+
|
|
68
73
|
&-flower {
|
|
69
74
|
.media-position(156px, -24px, 11px);
|
|
70
75
|
}
|
|
76
|
+
|
|
77
|
+
&-backpack {
|
|
78
|
+
.media-position(123px, -16px, 6px);
|
|
79
|
+
}
|
|
71
80
|
}
|
|
72
81
|
|
|
73
82
|
&-container {
|
|
@@ -74,7 +74,6 @@ export const Default = () => {
|
|
|
74
74
|
onClick={action('action clicked')}
|
|
75
75
|
onDismiss={action('dismissed')}
|
|
76
76
|
/>
|
|
77
|
-
|
|
78
77
|
<Nudge
|
|
79
78
|
mediaName={Assets.HEART}
|
|
80
79
|
className="m-b-2"
|
|
@@ -84,7 +83,6 @@ export const Default = () => {
|
|
|
84
83
|
onClick={action('action clicked')}
|
|
85
84
|
onDismiss={action('dismissed')}
|
|
86
85
|
/>
|
|
87
|
-
|
|
88
86
|
<Nudge
|
|
89
87
|
mediaName={Assets.MULTI_CURRENCY}
|
|
90
88
|
className="m-b-2"
|
|
@@ -94,7 +92,6 @@ export const Default = () => {
|
|
|
94
92
|
onClick={action('action clicked')}
|
|
95
93
|
onDismiss={action('dismissed')}
|
|
96
94
|
/>
|
|
97
|
-
|
|
98
95
|
<Nudge
|
|
99
96
|
mediaName={Assets.SHOPPING_BAG}
|
|
100
97
|
className="m-b-2"
|
|
@@ -104,7 +101,6 @@ export const Default = () => {
|
|
|
104
101
|
onClick={action('action clicked')}
|
|
105
102
|
onDismiss={action('dismissed')}
|
|
106
103
|
/>
|
|
107
|
-
|
|
108
104
|
<Nudge
|
|
109
105
|
mediaName={Assets.FLOWER}
|
|
110
106
|
className="m-b-2"
|
|
@@ -114,6 +110,15 @@ export const Default = () => {
|
|
|
114
110
|
onClick={action('action clicked')}
|
|
115
111
|
onDismiss={action('dismissed')}
|
|
116
112
|
/>
|
|
113
|
+
<Nudge
|
|
114
|
+
mediaName={Assets.BACKPACK}
|
|
115
|
+
className="m-b-2"
|
|
116
|
+
title="Text that is no longer than two lines."
|
|
117
|
+
link="Link"
|
|
118
|
+
href="#"
|
|
119
|
+
onClick={action('action clicked')}
|
|
120
|
+
onDismiss={action('dismissed')}
|
|
121
|
+
/>
|
|
117
122
|
</div>
|
|
118
123
|
);
|
|
119
124
|
};
|
package/src/nudge/Nudge.tsx
CHANGED
|
@@ -38,7 +38,8 @@ type MediaNameType =
|
|
|
38
38
|
| `${Assets.HEART}`
|
|
39
39
|
| `${Assets.MULTI_CURRENCY}`
|
|
40
40
|
| `${Assets.SHOPPING_BAG}`
|
|
41
|
-
| `${Assets.FLOWER}
|
|
41
|
+
| `${Assets.FLOWER}`
|
|
42
|
+
| `${Assets.BACKPACK}`;
|
|
42
43
|
|
|
43
44
|
type BaseProps = {
|
|
44
45
|
/** @deprecated use `mediaName` property instead */
|