@transferwise/components 0.0.0-experimental-d37c8e6 → 0.0.0-experimental-4cc7a3c
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/logo/Logo.js.map +1 -1
- package/build/logo/Logo.mjs.map +1 -1
- package/build/main.css +1 -0
- package/build/styles/logo/Logo.css +1 -0
- package/build/styles/main.css +1 -0
- package/build/types/logo/Logo.d.ts +0 -2
- package/build/types/logo/Logo.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/logo/Logo.css +1 -0
- package/src/logo/Logo.less +1 -0
- package/src/logo/Logo.story.tsx +56 -58
- package/src/logo/Logo.tsx +0 -2
- package/src/main.css +1 -0
package/build/logo/Logo.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n WiseLogo,\n WiseBusinessPrimary,\n WiseBusinessSecondary,\n WisePlatformPrimary,\n WisePlatformSecondary,\n FastFlag,\n logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n RESPONSIVE = 'responsive',\n COMPACT = 'compact',\n FULL = 'full',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /**\n * Renders a light-coloured version suited for dark backgrounds.\n * @default false\n * @deprecated dark mode comes out of the box, this property has no effect\n */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n /**\n * Controls which logo variant is shown.\n * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n * @default 'responsive'\n */\n display?: `${LogoDisplay}`;\n /**\n * Show the product name alongside the Wise wordmark (e.g. \"Wise Business\", \"Wise Platform\").\n *
|
|
1
|
+
{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n WiseLogo,\n WiseBusinessPrimary,\n WiseBusinessSecondary,\n WisePlatformPrimary,\n WisePlatformSecondary,\n FastFlag,\n logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n RESPONSIVE = 'responsive',\n COMPACT = 'compact',\n FULL = 'full',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /**\n * Renders a light-coloured version suited for dark backgrounds.\n * @default false\n * @deprecated dark mode comes out of the box, this property has no effect\n */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n /**\n * Controls which logo variant is shown.\n * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n * @default 'responsive'\n */\n display?: `${LogoDisplay}`;\n /**\n * Show the product name alongside the Wise wordmark (e.g. \"Wise Business\", \"Wise Platform\").\n * @default false\n */\n lockup?: boolean;\n /**\n * Use the stacked (two-line) logo variant. Requires `lockup` to be true.\n * @default false\n */\n secondary?: boolean;\n /**\n * Override default ({@link labelByType}) screen reader messages\n */\n 'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n WISE: 'Wise',\n WISE_BUSINESS: 'Wise Business',\n WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n FastFlag,\n WiseLogo,\n WiseBusinessPrimary,\n WiseBusinessSecondary,\n WisePlatformPrimary,\n WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n className,\n type = 'WISE',\n lockup = false,\n secondary = false,\n display = 'responsive',\n 'aria-label': ariaLabel,\n}: LogoProps) {\n const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n const assetName = compact ? 'FastFlag' : getAssetName(type, lockup, secondary);\n const Asset = logoAssets[assetName];\n const { width, height } = logoAssetsDimensions[assetName];\n\n return (\n <span\n className={clsx('np-logo', className)}\n role=\"img\"\n aria-label={ariaLabel ?? labelByType[type]}\n style={\n {\n '--wds-logo-width': `${width}px`,\n '--wds-logo-height': `${height}px`,\n } as React.CSSProperties\n }\n >\n <Asset />\n </span>\n );\n}\n\nfunction getAssetName(type: `${LogoType}`, lockup: boolean, secondary: boolean): LogoAssetName {\n if (type === 'WISE_BUSINESS' && lockup) {\n return secondary ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n }\n if (type === 'WISE_PLATFORM' && lockup) {\n return secondary ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n }\n return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","lockup","secondary","display","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","width","height","logoAssetsDimensions","_jsx","clsx","role","style","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBYA;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,gBAAQ,KAARA,gBAAQ,GAAA,EAAA,CAAA,CAAA;AAMRC;AAAZ,CAAA,UAAYA,WAAW,EAAA;AACrBA,EAAAA,WAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzBA,EAAAA,WAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,WAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAJWA,mBAAW,KAAXA,mBAAW,GAAA,EAAA,CAAA,CAAA;AA4CvB,MAAMC,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,aAAa,EAAE;CACwB;AAEzC,MAAMC,UAAU,GAA6C;YAC3DC,qBAAQ;YACRC,qBAAQ;uBACRC,gCAAmB;yBACnBC,kCAAqB;uBACrBC,gCAAmB;AACnBC,yBAAAA;CACD;AAED;;;;;AAKG;AACW,SAAUC,IAAIA,CAAC;EAC3BC,SAAS;AACTC,EAAAA,IAAI,GAAG,MAAM;AACbC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,OAAO,GAAG,YAAY;AACtB,EAAA,YAAY,EAAEC;AAAS,CACb,EAAA;EACV,MAAMC,UAAU,GAAG,CAACC,2BAAa,CAACC,qBAAU,CAACC,KAAK,CAAC;EACnD,MAAMC,OAAO,GAAGN,OAAO,KAAK,SAAS,IAAKA,OAAO,KAAK,YAAY,IAAIE,UAAW;AAEjF,EAAA,MAAMK,SAAS,GAAGD,OAAO,GAAG,UAAU,GAAGE,YAAY,CAACX,IAAI,EAAEC,MAAM,EAAEC,SAAS,CAAC;AAC9E,EAAA,MAAMU,KAAK,GAAGrB,UAAU,CAACmB,SAAS,CAAC;EACnC,MAAM;IAAEG,KAAK;AAAEC,IAAAA;AAAM,GAAE,GAAGC,iCAAoB,CAACL,SAAS,CAAC;AAEzD,EAAA,oBACEM,cAAA,CAAA,MAAA,EAAA;AACEjB,IAAAA,SAAS,EAAEkB,SAAI,CAAC,SAAS,EAAElB,SAAS,CAAE;AACtCmB,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,YAAA,EAAYd,SAAS,IAAIjB,WAAW,CAACa,IAAI,CAAE;AAC3CmB,IAAAA,KAAK,EACH;MACE,kBAAkB,EAAE,CAAA,EAAGN,KAAK,CAAA,EAAA,CAAI;MAChC,mBAAmB,EAAE,GAAGC,MAAM,CAAA,EAAA;KAEjC;AAAAM,IAAAA,QAAA,eAEDJ,cAAA,CAACJ,KAAK,EAAA,EAAA;AACR,GAAM,CAAC;AAEX;AAEA,SAASD,YAAYA,CAACX,IAAmB,EAAEC,MAAe,EAAEC,SAAkB,EAAA;AAC5E,EAAA,IAAIF,IAAI,KAAK,eAAe,IAAIC,MAAM,EAAE;AACtC,IAAA,OAAOC,SAAS,GAAG,uBAAuB,GAAG,qBAAqB;AACpE,EAAA;AACA,EAAA,IAAIF,IAAI,KAAK,eAAe,IAAIC,MAAM,EAAE;AACtC,IAAA,OAAOC,SAAS,GAAG,uBAAuB,GAAG,qBAAqB;AACpE,EAAA;AACA,EAAA,OAAO,UAAU;AACnB;;;;"}
|
package/build/logo/Logo.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n WiseLogo,\n WiseBusinessPrimary,\n WiseBusinessSecondary,\n WisePlatformPrimary,\n WisePlatformSecondary,\n FastFlag,\n logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n RESPONSIVE = 'responsive',\n COMPACT = 'compact',\n FULL = 'full',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /**\n * Renders a light-coloured version suited for dark backgrounds.\n * @default false\n * @deprecated dark mode comes out of the box, this property has no effect\n */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n /**\n * Controls which logo variant is shown.\n * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n * @default 'responsive'\n */\n display?: `${LogoDisplay}`;\n /**\n * Show the product name alongside the Wise wordmark (e.g. \"Wise Business\", \"Wise Platform\").\n *
|
|
1
|
+
{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n WiseLogo,\n WiseBusinessPrimary,\n WiseBusinessSecondary,\n WisePlatformPrimary,\n WisePlatformSecondary,\n FastFlag,\n logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n RESPONSIVE = 'responsive',\n COMPACT = 'compact',\n FULL = 'full',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /**\n * Renders a light-coloured version suited for dark backgrounds.\n * @default false\n * @deprecated dark mode comes out of the box, this property has no effect\n */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n /**\n * Controls which logo variant is shown.\n * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n * @default 'responsive'\n */\n display?: `${LogoDisplay}`;\n /**\n * Show the product name alongside the Wise wordmark (e.g. \"Wise Business\", \"Wise Platform\").\n * @default false\n */\n lockup?: boolean;\n /**\n * Use the stacked (two-line) logo variant. Requires `lockup` to be true.\n * @default false\n */\n secondary?: boolean;\n /**\n * Override default ({@link labelByType}) screen reader messages\n */\n 'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n WISE: 'Wise',\n WISE_BUSINESS: 'Wise Business',\n WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n FastFlag,\n WiseLogo,\n WiseBusinessPrimary,\n WiseBusinessSecondary,\n WisePlatformPrimary,\n WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n className,\n type = 'WISE',\n lockup = false,\n secondary = false,\n display = 'responsive',\n 'aria-label': ariaLabel,\n}: LogoProps) {\n const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n const assetName = compact ? 'FastFlag' : getAssetName(type, lockup, secondary);\n const Asset = logoAssets[assetName];\n const { width, height } = logoAssetsDimensions[assetName];\n\n return (\n <span\n className={clsx('np-logo', className)}\n role=\"img\"\n aria-label={ariaLabel ?? labelByType[type]}\n style={\n {\n '--wds-logo-width': `${width}px`,\n '--wds-logo-height': `${height}px`,\n } as React.CSSProperties\n }\n >\n <Asset />\n </span>\n );\n}\n\nfunction getAssetName(type: `${LogoType}`, lockup: boolean, secondary: boolean): LogoAssetName {\n if (type === 'WISE_BUSINESS' && lockup) {\n return secondary ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n }\n if (type === 'WISE_PLATFORM' && lockup) {\n return secondary ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n }\n return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","lockup","secondary","display","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","width","height","logoAssetsDimensions","_jsx","clsx","role","style","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBYA;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,QAAQ,KAARA,QAAQ,GAAA,EAAA,CAAA,CAAA;IAMRC;AAAZ,CAAA,UAAYA,WAAW,EAAA;AACrBA,EAAAA,WAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzBA,EAAAA,WAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,WAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAJWA,WAAW,KAAXA,WAAW,GAAA,EAAA,CAAA,CAAA;AA4CvB,MAAMC,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,aAAa,EAAE;CACwB;AAEzC,MAAMC,UAAU,GAA6C;EAC3DC,QAAQ;EACRC,QAAQ;EACRC,mBAAmB;EACnBC,qBAAqB;EACrBC,mBAAmB;AACnBC,EAAAA;CACD;AAED;;;;;AAKG;AACW,SAAUC,IAAIA,CAAC;EAC3BC,SAAS;AACTC,EAAAA,IAAI,GAAG,MAAM;AACbC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,OAAO,GAAG,YAAY;AACtB,EAAA,YAAY,EAAEC;AAAS,CACb,EAAA;EACV,MAAMC,UAAU,GAAG,CAACC,aAAa,CAACC,UAAU,CAACC,KAAK,CAAC;EACnD,MAAMC,OAAO,GAAGN,OAAO,KAAK,SAAS,IAAKA,OAAO,KAAK,YAAY,IAAIE,UAAW;AAEjF,EAAA,MAAMK,SAAS,GAAGD,OAAO,GAAG,UAAU,GAAGE,YAAY,CAACX,IAAI,EAAEC,MAAM,EAAEC,SAAS,CAAC;AAC9E,EAAA,MAAMU,KAAK,GAAGrB,UAAU,CAACmB,SAAS,CAAC;EACnC,MAAM;IAAEG,KAAK;AAAEC,IAAAA;AAAM,GAAE,GAAGC,oBAAoB,CAACL,SAAS,CAAC;AAEzD,EAAA,oBACEM,GAAA,CAAA,MAAA,EAAA;AACEjB,IAAAA,SAAS,EAAEkB,IAAI,CAAC,SAAS,EAAElB,SAAS,CAAE;AACtCmB,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,YAAA,EAAYd,SAAS,IAAIjB,WAAW,CAACa,IAAI,CAAE;AAC3CmB,IAAAA,KAAK,EACH;MACE,kBAAkB,EAAE,CAAA,EAAGN,KAAK,CAAA,EAAA,CAAI;MAChC,mBAAmB,EAAE,GAAGC,MAAM,CAAA,EAAA;KAEjC;AAAAM,IAAAA,QAAA,eAEDJ,GAAA,CAACJ,KAAK,EAAA,EAAA;AACR,GAAM,CAAC;AAEX;AAEA,SAASD,YAAYA,CAACX,IAAmB,EAAEC,MAAe,EAAEC,SAAkB,EAAA;AAC5E,EAAA,IAAIF,IAAI,KAAK,eAAe,IAAIC,MAAM,EAAE;AACtC,IAAA,OAAOC,SAAS,GAAG,uBAAuB,GAAG,qBAAqB;AACpE,EAAA;AACA,EAAA,IAAIF,IAAI,KAAK,eAAe,IAAIC,MAAM,EAAE;AACtC,IAAA,OAAOC,SAAS,GAAG,uBAAuB,GAAG,qBAAqB;AACpE,EAAA;AACA,EAAA,OAAO,UAAU;AACnB;;;;"}
|
package/build/main.css
CHANGED
|
@@ -31066,6 +31066,7 @@ button.np-link {
|
|
|
31066
31066
|
}
|
|
31067
31067
|
|
|
31068
31068
|
.np-logo {
|
|
31069
|
+
display: inline-block;
|
|
31069
31070
|
color: var(--color-interactive-primary);
|
|
31070
31071
|
width: var(--wds-logo-width);
|
|
31071
31072
|
height: var(--wds-logo-height);
|
package/build/styles/main.css
CHANGED
|
@@ -31066,6 +31066,7 @@ button.np-link {
|
|
|
31066
31066
|
}
|
|
31067
31067
|
|
|
31068
31068
|
.np-logo {
|
|
31069
|
+
display: inline-block;
|
|
31069
31070
|
color: var(--color-interactive-primary);
|
|
31070
31071
|
width: var(--wds-logo-width);
|
|
31071
31072
|
height: var(--wds-logo-height);
|
|
@@ -33,13 +33,11 @@ export interface LogoProps {
|
|
|
33
33
|
display?: `${LogoDisplay}`;
|
|
34
34
|
/**
|
|
35
35
|
* Show the product name alongside the Wise wordmark (e.g. "Wise Business", "Wise Platform").
|
|
36
|
-
* Only applies to WISE_BUSINESS and WISE_PLATFORM types.
|
|
37
36
|
* @default false
|
|
38
37
|
*/
|
|
39
38
|
lockup?: boolean;
|
|
40
39
|
/**
|
|
41
40
|
* Use the stacked (two-line) logo variant. Requires `lockup` to be true.
|
|
42
|
-
* Only applies to WISE_BUSINESS and WISE_PLATFORM types.
|
|
43
41
|
* @default false
|
|
44
42
|
*/
|
|
45
43
|
secondary?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,oBAAY,WAAW;IACrB,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC3B
|
|
1
|
+
{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,oBAAY,WAAW;IACrB,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CAC7C;AAiBD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,SAAS,EACT,IAAa,EACb,MAAc,EACd,SAAiB,EACjB,OAAsB,EACtB,YAAY,EAAE,SAAS,GACxB,EAAE,SAAS,+BAuBX"}
|
package/package.json
CHANGED
package/src/logo/Logo.css
CHANGED
package/src/logo/Logo.less
CHANGED
package/src/logo/Logo.story.tsx
CHANGED
|
@@ -11,8 +11,6 @@ const meta: Meta<typeof Logo> = {
|
|
|
11
11
|
title: 'Content/Logo',
|
|
12
12
|
args: {
|
|
13
13
|
type: 'WISE',
|
|
14
|
-
display: 'responsive',
|
|
15
|
-
lockup: true,
|
|
16
14
|
secondary: false,
|
|
17
15
|
},
|
|
18
16
|
argTypes: {
|
|
@@ -36,12 +34,15 @@ type Story = StoryObj<typeof Logo>;
|
|
|
36
34
|
|
|
37
35
|
/** Explore all props via the controls panel. */
|
|
38
36
|
export const Playground: Story = {
|
|
37
|
+
args: {
|
|
38
|
+
type: 'WISE',
|
|
39
|
+
lockup: true,
|
|
40
|
+
},
|
|
39
41
|
render: (args) => <Logo {...args} />,
|
|
40
42
|
};
|
|
41
43
|
|
|
42
44
|
/**
|
|
43
|
-
* The three logo types: standard Wise, Wise Business, and Wise Platform.
|
|
44
|
-
* `WISE_BUSINESS` renders the same SVG as `WISE` but with the accessible label "Wise Business".
|
|
45
|
+
* The three logo types: standard Wise, Wise Business, and Wise Platform.
|
|
45
46
|
*/
|
|
46
47
|
export const Types: Story = {
|
|
47
48
|
argTypes: {
|
|
@@ -68,7 +69,6 @@ export const Types: Story = {
|
|
|
68
69
|
}}
|
|
69
70
|
>
|
|
70
71
|
<Logo {...args} type={type} />
|
|
71
|
-
<span style={{ fontSize: '12px' }}>{type}</span>
|
|
72
72
|
</div>
|
|
73
73
|
))}
|
|
74
74
|
</div>
|
|
@@ -84,45 +84,8 @@ export const Types: Story = {
|
|
|
84
84
|
},
|
|
85
85
|
};
|
|
86
86
|
|
|
87
|
-
/**
|
|
88
|
-
* When `display` is `"compact"`, only the fast-flag mark is rendered regardless of type.
|
|
89
|
-
*/
|
|
90
|
-
export const Compact: Story = {
|
|
91
|
-
argTypes: {
|
|
92
|
-
type: { table: { disable: true } },
|
|
93
|
-
display: { table: { disable: true } },
|
|
94
|
-
},
|
|
95
|
-
render: (args) => (
|
|
96
|
-
<div style={{ display: 'flex', gap: '3rem', alignItems: 'center', padding: '2rem' }}>
|
|
97
|
-
{Object.values(LogoType).map((type) => (
|
|
98
|
-
<div
|
|
99
|
-
key={type}
|
|
100
|
-
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}
|
|
101
|
-
>
|
|
102
|
-
<Logo {...args} type={type} display="compact" />
|
|
103
|
-
<Logo {...args} type={type} secondary display="compact" />
|
|
104
|
-
<Logo {...args} type={type} lockup secondary display="compact" />
|
|
105
|
-
</div>
|
|
106
|
-
))}
|
|
107
|
-
</div>
|
|
108
|
-
),
|
|
109
|
-
parameters: {
|
|
110
|
-
docs: {
|
|
111
|
-
source: {
|
|
112
|
-
code: `<Logo display="compact" />
|
|
113
|
-
<Logo type="WISE_BUSINESS" lockup display="compact" />
|
|
114
|
-
<Logo type="WISE_PLATFORM" lockup display="compact" />
|
|
115
|
-
|
|
116
|
-
<Logo type="WISE_BUSINESS" lockup secondary display="compact" />
|
|
117
|
-
<Logo type="WISE_PLATFORM" lockup secondary display="compact" />`,
|
|
118
|
-
},
|
|
119
|
-
},
|
|
120
|
-
},
|
|
121
|
-
};
|
|
122
|
-
|
|
123
87
|
/**
|
|
124
88
|
* The `lockup` prop shows the product name alongside the wordmark.
|
|
125
|
-
* Only applies to `WISE_BUSINESS` and `WISE_PLATFORM` types.
|
|
126
89
|
*/
|
|
127
90
|
export const Lockup: Story = {
|
|
128
91
|
argTypes: {
|
|
@@ -133,17 +96,6 @@ export const Lockup: Story = {
|
|
|
133
96
|
<div style={{ display: 'flex', gap: '3rem', alignItems: 'center', padding: '2rem' }}>
|
|
134
97
|
{Object.values(LogoType).map((type) => (
|
|
135
98
|
<div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
|
|
136
|
-
<div
|
|
137
|
-
style={{
|
|
138
|
-
display: 'flex',
|
|
139
|
-
flexDirection: 'column',
|
|
140
|
-
alignItems: 'center',
|
|
141
|
-
gap: '0.5rem',
|
|
142
|
-
}}
|
|
143
|
-
>
|
|
144
|
-
<Logo {...args} type={type} />
|
|
145
|
-
<span style={{ fontSize: '12px', opacity: 0.6 }}>{type}</span>
|
|
146
|
-
</div>
|
|
147
99
|
<div
|
|
148
100
|
style={{
|
|
149
101
|
display: 'flex',
|
|
@@ -153,7 +105,6 @@ export const Lockup: Story = {
|
|
|
153
105
|
}}
|
|
154
106
|
>
|
|
155
107
|
<Logo {...args} type={type} lockup />
|
|
156
|
-
<span style={{ fontSize: '12px', opacity: 0.6 }}>{type} lockup</span>
|
|
157
108
|
</div>
|
|
158
109
|
</div>
|
|
159
110
|
))}
|
|
@@ -162,7 +113,8 @@ export const Lockup: Story = {
|
|
|
162
113
|
parameters: {
|
|
163
114
|
docs: {
|
|
164
115
|
source: {
|
|
165
|
-
code: `<Logo type="
|
|
116
|
+
code: `<Logo type="WISE" lockup />
|
|
117
|
+
<Logo type="WISE_BUSINESS" lockup />
|
|
166
118
|
<Logo type="WISE_PLATFORM" lockup />`,
|
|
167
119
|
},
|
|
168
120
|
},
|
|
@@ -171,7 +123,6 @@ export const Lockup: Story = {
|
|
|
171
123
|
|
|
172
124
|
/**
|
|
173
125
|
* The `secondary` prop (combined with `lockup`) uses a stacked two-line layout.
|
|
174
|
-
* Only applies to `WISE_BUSINESS` and `WISE_PLATFORM` types.
|
|
175
126
|
*/
|
|
176
127
|
export const Secondary: Story = {
|
|
177
128
|
argTypes: {
|
|
@@ -200,13 +151,50 @@ export const Secondary: Story = {
|
|
|
200
151
|
parameters: {
|
|
201
152
|
docs: {
|
|
202
153
|
source: {
|
|
203
|
-
code: `<Logo type="
|
|
154
|
+
code: `<Logo type="WISE" lockup secondary />
|
|
155
|
+
<Logo type="WISE_BUSINESS" lockup secondary />
|
|
204
156
|
<Logo type="WISE_PLATFORM" lockup secondary />`,
|
|
205
157
|
},
|
|
206
158
|
},
|
|
207
159
|
},
|
|
208
160
|
};
|
|
209
161
|
|
|
162
|
+
/**
|
|
163
|
+
* When `display` is `"compact"`, only the fast-flag mark is rendered regardless of type or other settings.
|
|
164
|
+
*/
|
|
165
|
+
export const Compact: Story = {
|
|
166
|
+
argTypes: {
|
|
167
|
+
type: { table: { disable: true } },
|
|
168
|
+
display: { table: { disable: true } },
|
|
169
|
+
},
|
|
170
|
+
render: (args) => (
|
|
171
|
+
<div style={{ display: 'flex', gap: '3rem', alignItems: 'center', padding: '2rem' }}>
|
|
172
|
+
{Object.values(LogoType).map((type) => (
|
|
173
|
+
<div
|
|
174
|
+
key={type}
|
|
175
|
+
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}
|
|
176
|
+
>
|
|
177
|
+
<Logo {...args} type={type} display="compact" />
|
|
178
|
+
<Logo {...args} type={type} secondary display="compact" />
|
|
179
|
+
<Logo {...args} type={type} lockup secondary display="compact" />
|
|
180
|
+
</div>
|
|
181
|
+
))}
|
|
182
|
+
</div>
|
|
183
|
+
),
|
|
184
|
+
parameters: {
|
|
185
|
+
docs: {
|
|
186
|
+
source: {
|
|
187
|
+
code: `<Logo type="WISE" display="compact" />
|
|
188
|
+
<Logo type="WISE_BUSINESS" secondary display="compact" />
|
|
189
|
+
<Logo type="WISE_PLATFORM" lockup secondary display="compact" />`,
|
|
190
|
+
},
|
|
191
|
+
},
|
|
192
|
+
},
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
/**
|
|
196
|
+
* When `display` is `"full"`, the full wordmark/lockup is rendered regardless of screen width.
|
|
197
|
+
*/
|
|
210
198
|
export const Full: Story = {
|
|
211
199
|
render: (args) => (
|
|
212
200
|
<div style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end', padding: '2rem' }}>
|
|
@@ -227,5 +215,15 @@ export const Full: Story = {
|
|
|
227
215
|
))}
|
|
228
216
|
</div>
|
|
229
217
|
),
|
|
230
|
-
...withVariantConfig(['mobile']
|
|
218
|
+
...withVariantConfig(['mobile'], {
|
|
219
|
+
parameters: {
|
|
220
|
+
docs: {
|
|
221
|
+
source: {
|
|
222
|
+
code: `<Logo type="WISE" display="full" />
|
|
223
|
+
<Logo type="WISE_BUSINESS" secondary display="full" />
|
|
224
|
+
<Logo type="WISE_PLATFORM" lockup secondary display="full" />`,
|
|
225
|
+
},
|
|
226
|
+
},
|
|
227
|
+
},
|
|
228
|
+
}),
|
|
231
229
|
};
|
package/src/logo/Logo.tsx
CHANGED
|
@@ -50,13 +50,11 @@ export interface LogoProps {
|
|
|
50
50
|
display?: `${LogoDisplay}`;
|
|
51
51
|
/**
|
|
52
52
|
* Show the product name alongside the Wise wordmark (e.g. "Wise Business", "Wise Platform").
|
|
53
|
-
* Only applies to WISE_BUSINESS and WISE_PLATFORM types.
|
|
54
53
|
* @default false
|
|
55
54
|
*/
|
|
56
55
|
lockup?: boolean;
|
|
57
56
|
/**
|
|
58
57
|
* Use the stacked (two-line) logo variant. Requires `lockup` to be true.
|
|
59
|
-
* Only applies to WISE_BUSINESS and WISE_PLATFORM types.
|
|
60
58
|
* @default false
|
|
61
59
|
*/
|
|
62
60
|
secondary?: boolean;
|
package/src/main.css
CHANGED
|
@@ -31066,6 +31066,7 @@ button.np-link {
|
|
|
31066
31066
|
}
|
|
31067
31067
|
|
|
31068
31068
|
.np-logo {
|
|
31069
|
+
display: inline-block;
|
|
31069
31070
|
color: var(--color-interactive-primary);
|
|
31070
31071
|
width: var(--wds-logo-width);
|
|
31071
31072
|
height: var(--wds-logo-height);
|