@transferwise/components 46.133.0 → 46.133.1
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/chips/Chips.js.map +1 -1
- package/build/chips/Chips.mjs.map +1 -1
- package/build/label/Label.js +1 -1
- package/build/label/Label.js.map +1 -1
- package/build/label/Label.mjs +1 -1
- package/build/label/Label.mjs.map +1 -1
- package/build/logo/Logo.js +6 -0
- package/build/logo/Logo.js.map +1 -1
- package/build/logo/Logo.mjs +6 -0
- package/build/logo/Logo.mjs.map +1 -1
- package/build/main.css +4 -4
- package/build/styles/listItem/ListItem.css +4 -4
- package/build/styles/listItem/ListItem.grid.css +3 -3
- package/build/styles/main.css +4 -4
- package/build/types/chips/Chips.d.ts +1 -1
- package/build/types/chips/Chips.d.ts.map +1 -1
- package/build/types/common/commonProps.d.ts +0 -6
- package/build/types/common/commonProps.d.ts.map +1 -1
- package/build/types/label/Label.d.ts.map +1 -1
- package/build/types/logo/Logo.d.ts +10 -1
- package/build/types/logo/Logo.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/button/_stories/Button.story.tsx +15 -5
- package/src/checkboxButton/CheckboxButton.story.tsx +125 -44
- package/src/checkboxButton/CheckboxButton.test.story.tsx +236 -0
- package/src/chips/Chips.story.tsx +141 -102
- package/src/chips/Chips.test.story.tsx +177 -0
- package/src/chips/Chips.tsx +1 -1
- package/src/circularButton/CircularButton.story.tsx +261 -49
- package/src/circularButton/CircularButton.test.story.tsx +192 -2
- package/src/common/commonProps.ts +0 -6
- package/src/iconButton/IconButton.story.tsx +315 -110
- package/src/iconButton/IconButton.test.story.tsx +217 -44
- package/src/label/Label.tsx +1 -2
- package/src/listItem/ListItem.css +4 -4
- package/src/listItem/ListItem.grid.css +3 -3
- package/src/listItem/ListItem.grid.less +5 -3
- package/src/listItem/ListItem.less +1 -1
- package/src/listItem/ListItem.vars.less +2 -2
- package/src/listItem/_stories/ListItem.layout.test.story.tsx +55 -0
- package/src/logo/Logo.story.tsx +181 -21
- package/src/logo/Logo.test.story.tsx +40 -7
- package/src/logo/Logo.tsx +10 -1
- package/src/main.css +4 -4
- package/src/switch/Switch.story.tsx +64 -42
- package/src/switch/Switch.test.story.tsx +123 -0
package/build/chips/Chips.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chips.js","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n value: ChipValue;\n label: string;\n};\n\nexport type ChipsProps = CommonProps &\n AriaLabelProperty & {\n /** List of chips with string labels and string/number values */\n chips: readonly Chip[];\n /** Callback which is invoked when a chip is selected or deselected */\n onChange: ({\n isEnabled,\n selectedValue,\n }: {\n isEnabled: boolean;\n selectedValue: ChipValue;\n }) => void;\n /** Used to manage which chips are selected */\n selected: ChipValue | readonly ChipValue[];\n /**
|
|
1
|
+
{"version":3,"file":"Chips.js","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n value: ChipValue;\n label: string;\n};\n\nexport type ChipsProps = CommonProps &\n AriaLabelProperty & {\n /** List of chips with string labels and string/number values */\n chips: readonly Chip[];\n /** Callback which is invoked when a chip is selected or deselected */\n onChange: ({\n isEnabled,\n selectedValue,\n }: {\n isEnabled: boolean;\n selectedValue: ChipValue;\n }) => void;\n /** Used to manage which chips are selected */\n selected: ChipValue | readonly ChipValue[];\n /** True turns on Filter-mode, False is Choice */\n multiple?: boolean;\n };\n\nconst Chips = ({\n chips,\n onChange,\n selected,\n 'aria-label': ariaLabel,\n className,\n multiple,\n}: ChipsProps) => {\n const intl = useIntl();\n\n const isSelected = (value: ChipValue) =>\n Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n };\n\n return (\n <div\n className={clsx('np-chips d-flex', className)}\n aria-label={ariaLabel}\n role={!multiple ? 'radiogroup' : 'group'}\n >\n {chips.map((chip) => {\n const chipSelected = isSelected(chip.value);\n return (\n <Chip\n key={chip.value}\n role={!multiple ? 'radio' : 'checkbox'}\n aria-checked={chipSelected}\n value={chip.value}\n label={chip.label}\n closeButton={{\n 'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n }}\n className={clsx('text-xs-nowrap', {\n 'np-chip--selected': chipSelected,\n 'p-r-1': multiple && chipSelected,\n })}\n {...(multiple && chipSelected\n ? {\n onRemove: () => handleOnChange(chip.value, chipSelected),\n }\n : {\n onClick: () => handleOnChange(chip.value, chipSelected),\n onKeyPress: () => handleOnChange(chip.value, chipSelected),\n })}\n />\n );\n })}\n </div>\n );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","clsx","role","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;;;;;AAiCA,MAAMA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA;AAAa,KAAE,CAAC;EAC7D,CAAC;AAED,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,SAAI,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AAC9C,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAG,OAAQ;AAAAe,IAAAA,QAAA,EAExCpB,KAAK,CAACqB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGf,UAAU,CAACc,IAAI,CAACb,KAAK,CAAC;MAC3C,oBACEQ,cAAA,CAACO,YAAI,EAAA;AAEHL,QAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAG,UAAW;AACvC,QAAA,cAAA,EAAckB,YAAa;QAC3Bd,KAAK,EAAEa,IAAI,CAACb,KAAM;QAClBgB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAEpB,IAAI,CAACqB,aAAa,CAACC,sBAAQ,CAACzB,SAAS,EAAE;YAAE0B,MAAM,EAAEP,IAAI,CAACG;WAAO;SAC3E;AACFrB,QAAAA,SAAS,EAAEc,SAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEK,YAAY;UACjC,OAAO,EAAElB,QAAQ,IAAIkB;AACtB,SAAA,CAAE;QAAA,IACElB,QAAQ,IAAIkB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMjB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;AACxD,SAAA,GACD;UACEQ,OAAO,EAAEA,MAAMlB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMnB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;SAC1D;OAAA,EAnBAD,IAAI,CAACb,KAmBH,CACP;IAEN,CAAC;AAAC,GACC,CAAC;AAEV;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chips.mjs","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n value: ChipValue;\n label: string;\n};\n\nexport type ChipsProps = CommonProps &\n AriaLabelProperty & {\n /** List of chips with string labels and string/number values */\n chips: readonly Chip[];\n /** Callback which is invoked when a chip is selected or deselected */\n onChange: ({\n isEnabled,\n selectedValue,\n }: {\n isEnabled: boolean;\n selectedValue: ChipValue;\n }) => void;\n /** Used to manage which chips are selected */\n selected: ChipValue | readonly ChipValue[];\n /**
|
|
1
|
+
{"version":3,"file":"Chips.mjs","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n value: ChipValue;\n label: string;\n};\n\nexport type ChipsProps = CommonProps &\n AriaLabelProperty & {\n /** List of chips with string labels and string/number values */\n chips: readonly Chip[];\n /** Callback which is invoked when a chip is selected or deselected */\n onChange: ({\n isEnabled,\n selectedValue,\n }: {\n isEnabled: boolean;\n selectedValue: ChipValue;\n }) => void;\n /** Used to manage which chips are selected */\n selected: ChipValue | readonly ChipValue[];\n /** True turns on Filter-mode, False is Choice */\n multiple?: boolean;\n };\n\nconst Chips = ({\n chips,\n onChange,\n selected,\n 'aria-label': ariaLabel,\n className,\n multiple,\n}: ChipsProps) => {\n const intl = useIntl();\n\n const isSelected = (value: ChipValue) =>\n Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n };\n\n return (\n <div\n className={clsx('np-chips d-flex', className)}\n aria-label={ariaLabel}\n role={!multiple ? 'radiogroup' : 'group'}\n >\n {chips.map((chip) => {\n const chipSelected = isSelected(chip.value);\n return (\n <Chip\n key={chip.value}\n role={!multiple ? 'radio' : 'checkbox'}\n aria-checked={chipSelected}\n value={chip.value}\n label={chip.label}\n closeButton={{\n 'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n }}\n className={clsx('text-xs-nowrap', {\n 'np-chip--selected': chipSelected,\n 'p-r-1': multiple && chipSelected,\n })}\n {...(multiple && chipSelected\n ? {\n onRemove: () => handleOnChange(chip.value, chipSelected),\n }\n : {\n onClick: () => handleOnChange(chip.value, chipSelected),\n onKeyPress: () => handleOnChange(chip.value, chipSelected),\n })}\n />\n );\n })}\n </div>\n );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","clsx","role","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;AAiCA,MAAMA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA;AAAa,KAAE,CAAC;EAC7D,CAAC;AAED,EAAA,oBACEG,GAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,IAAI,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AAC9C,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAG,OAAQ;AAAAe,IAAAA,QAAA,EAExCpB,KAAK,CAACqB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGf,UAAU,CAACc,IAAI,CAACb,KAAK,CAAC;MAC3C,oBACEQ,GAAA,CAACO,IAAI,EAAA;AAEHL,QAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAG,UAAW;AACvC,QAAA,cAAA,EAAckB,YAAa;QAC3Bd,KAAK,EAAEa,IAAI,CAACb,KAAM;QAClBgB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAEpB,IAAI,CAACqB,aAAa,CAACC,QAAQ,CAACzB,SAAS,EAAE;YAAE0B,MAAM,EAAEP,IAAI,CAACG;WAAO;SAC3E;AACFrB,QAAAA,SAAS,EAAEc,IAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEK,YAAY;UACjC,OAAO,EAAElB,QAAQ,IAAIkB;AACtB,SAAA,CAAE;QAAA,IACElB,QAAQ,IAAIkB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMjB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;AACxD,SAAA,GACD;UACEQ,OAAO,EAAEA,MAAMlB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMnB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;SAC1D;OAAA,EAnBAD,IAAI,CAACb,KAmBH,CACP;IAEN,CAAC;AAAC,GACC,CAAC;AAEV;;;;"}
|
package/build/label/Label.js
CHANGED
|
@@ -21,7 +21,6 @@ const Label = /*#__PURE__*/React.forwardRef(({
|
|
|
21
21
|
children: children
|
|
22
22
|
});
|
|
23
23
|
});
|
|
24
|
-
Label.displayName = 'Label';
|
|
25
24
|
const Optional = function Optional({
|
|
26
25
|
children,
|
|
27
26
|
className
|
|
@@ -53,6 +52,7 @@ const LabelNamespace = Object.assign(Label, {
|
|
|
53
52
|
Optional,
|
|
54
53
|
Description
|
|
55
54
|
});
|
|
55
|
+
LabelNamespace.displayName = 'Label';
|
|
56
56
|
|
|
57
57
|
exports.Label = LabelNamespace;
|
|
58
58
|
//# sourceMappingURL=Label.js.map
|
package/build/label/Label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\n/**\n * Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ className, children, htmlFor, id }: LabelProps, ref) => {\n return (\n <label\n ref={ref}\n id={id}\n htmlFor={htmlFor}\n className={clsx(\n 'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',\n className,\n )}\n >\n {children}\n </label>\n );\n },\n);\n\
|
|
1
|
+
{"version":3,"file":"Label.js","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\n/**\n * Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ className, children, htmlFor, id }: LabelProps, ref) => {\n return (\n <label\n ref={ref}\n id={id}\n htmlFor={htmlFor}\n className={clsx(\n 'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',\n className,\n )}\n >\n {children}\n </label>\n );\n },\n);\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\nconst Optional = function Optional({ children, className }: LabelOptionalProps) {\n const { formatMessage } = useIntl();\n return (\n <div>\n {children}\n <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n {formatMessage(messages.optionalLabel)}\n </Body>\n </div>\n );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\nconst Description = function Description({ id, children, className }: LabelDescriptionProps) {\n return children ? (\n <Body id={id} className={clsx('text-secondary', className)}>\n {children}\n </Body>\n ) : null;\n};\n\n// eslint-disable-next-line functional/immutable-data\nconst LabelNamespace = Object.assign(Label, { Optional, Description });\n\nLabelNamespace.displayName = 'Label';\nexport { LabelNamespace as Label };\n"],"names":["Label","forwardRef","className","children","htmlFor","id","ref","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description","LabelNamespace","Object","assign","displayName"],"mappings":";;;;;;;;;AAuBA,MAAMA,KAAK,gBAAGC,gBAAU,CACtB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;CAAgB,EAAEC,GAAG,KAAI;AACxD,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEM,SAAI,CACb,0EAA0E,EAC1EN,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACJ,CAAC;AAEZ,CAAC,CACF;AAID,MAAMM,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEN,QAAQ;AAAED,EAAAA;AAAS,CAAsB,EAAA;EAC5E,MAAM;AAAEQ,IAAAA;GAAe,GAAGC,iBAAO,EAAE;AACnC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGA,QAAQ,eACTI,cAAA,CAACM,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEM,SAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEN,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,sBAAQ,CAACC,aAAa;AAAC,KAClC,CACR;AAAA,GAAK,CAAC;AAEV,CAAC;AAID,MAAMC,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEZ,EAAE;EAAEF,QAAQ;AAAED,EAAAA;AAAS,CAAyB,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbI,cAAA,CAACM,YAAI,EAAA;AAACR,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEM,SAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA;GACG,CAAC,GACL,IAAI;AACV,CAAC;AAED;AACA,MAAMe,cAAc,GAAGC,MAAM,CAACC,MAAM,CAACpB,KAAK,EAAE;EAAES,QAAQ;AAAEQ,EAAAA;AAAW,CAAE;AAErEC,cAAc,CAACG,WAAW,GAAG,OAAO;;;;"}
|
package/build/label/Label.mjs
CHANGED
|
@@ -19,7 +19,6 @@ const Label = /*#__PURE__*/forwardRef(({
|
|
|
19
19
|
children: children
|
|
20
20
|
});
|
|
21
21
|
});
|
|
22
|
-
Label.displayName = 'Label';
|
|
23
22
|
const Optional = function Optional({
|
|
24
23
|
children,
|
|
25
24
|
className
|
|
@@ -51,6 +50,7 @@ const LabelNamespace = Object.assign(Label, {
|
|
|
51
50
|
Optional,
|
|
52
51
|
Description
|
|
53
52
|
});
|
|
53
|
+
LabelNamespace.displayName = 'Label';
|
|
54
54
|
|
|
55
55
|
export { LabelNamespace as Label };
|
|
56
56
|
//# sourceMappingURL=Label.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.mjs","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\n/**\n * Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ className, children, htmlFor, id }: LabelProps, ref) => {\n return (\n <label\n ref={ref}\n id={id}\n htmlFor={htmlFor}\n className={clsx(\n 'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',\n className,\n )}\n >\n {children}\n </label>\n );\n },\n);\n\
|
|
1
|
+
{"version":3,"file":"Label.mjs","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\n/**\n * Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ className, children, htmlFor, id }: LabelProps, ref) => {\n return (\n <label\n ref={ref}\n id={id}\n htmlFor={htmlFor}\n className={clsx(\n 'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',\n className,\n )}\n >\n {children}\n </label>\n );\n },\n);\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\nconst Optional = function Optional({ children, className }: LabelOptionalProps) {\n const { formatMessage } = useIntl();\n return (\n <div>\n {children}\n <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n {formatMessage(messages.optionalLabel)}\n </Body>\n </div>\n );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\nconst Description = function Description({ id, children, className }: LabelDescriptionProps) {\n return children ? (\n <Body id={id} className={clsx('text-secondary', className)}>\n {children}\n </Body>\n ) : null;\n};\n\n// eslint-disable-next-line functional/immutable-data\nconst LabelNamespace = Object.assign(Label, { Optional, Description });\n\nLabelNamespace.displayName = 'Label';\nexport { LabelNamespace as Label };\n"],"names":["Label","forwardRef","className","children","htmlFor","id","ref","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description","LabelNamespace","Object","assign","displayName"],"mappings":";;;;;;;AAuBA,MAAMA,KAAK,gBAAGC,UAAU,CACtB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;CAAgB,EAAEC,GAAG,KAAI;AACxD,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEM,IAAI,CACb,0EAA0E,EAC1EN,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACJ,CAAC;AAEZ,CAAC,CACF;AAID,MAAMM,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEN,QAAQ;AAAED,EAAAA;AAAS,CAAsB,EAAA;EAC5E,MAAM;AAAEQ,IAAAA;GAAe,GAAGC,OAAO,EAAE;AACnC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGA,QAAQ,eACTI,GAAA,CAACM,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEM,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEN,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,QAAQ,CAACC,aAAa;AAAC,KAClC,CACR;AAAA,GAAK,CAAC;AAEV,CAAC;AAID,MAAMC,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEZ,EAAE;EAAEF,QAAQ;AAAED,EAAAA;AAAS,CAAyB,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbI,GAAA,CAACM,IAAI,EAAA;AAACR,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEM,IAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA;GACG,CAAC,GACL,IAAI;AACV,CAAC;AAED;AACA,MAAMe,cAAc,GAAGC,MAAM,CAACC,MAAM,CAACpB,KAAK,EAAE;EAAES,QAAQ;AAAEQ,EAAAA;AAAW,CAAE;AAErEC,cAAc,CAACG,WAAW,GAAG,OAAO;;;;"}
|
package/build/logo/Logo.js
CHANGED
|
@@ -29,6 +29,12 @@ const labelByType = {
|
|
|
29
29
|
WISE_BUSINESS: 'Wise Business',
|
|
30
30
|
WISE_PLATFORM: 'Wise Platform'
|
|
31
31
|
};
|
|
32
|
+
/**
|
|
33
|
+
* Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
|
|
34
|
+
* and the full wordmark on ≥576px (small breakpoint and above).
|
|
35
|
+
*
|
|
36
|
+
* @see {@link https://wise.design/foundations/logo Design Spec}
|
|
37
|
+
*/
|
|
32
38
|
function Logo({
|
|
33
39
|
className,
|
|
34
40
|
inverse,
|
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 LogoWise,\n LogoWiseInverse,\n LogoWisePlatform,\n LogoWisePlatformInverse,\n LogoFlag,\n LogoFlagInverse,\n LogoFlagPlatform,\n LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n WISE: LogoWise,\n WISE_BUSINESS: LogoWise,\n WISE_INVERSE: LogoWiseInverse,\n WISE_BUSINESS_INVERSE: LogoWiseInverse,\n WISE_PLATFORM: LogoWisePlatform,\n WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n WISE_FLAG: LogoFlag,\n WISE_FLAG_INVERSE: LogoFlagInverse,\n WISE_FLAG_PLATFORM: LogoFlagPlatform,\n WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n
|
|
1
|
+
{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n LogoWise,\n LogoWiseInverse,\n LogoWisePlatform,\n LogoWisePlatformInverse,\n LogoFlag,\n LogoFlagInverse,\n LogoFlagPlatform,\n LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n WISE: LogoWise,\n WISE_BUSINESS: LogoWise,\n WISE_INVERSE: LogoWiseInverse,\n WISE_BUSINESS_INVERSE: LogoWiseInverse,\n WISE_PLATFORM: LogoWisePlatform,\n WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n WISE_FLAG: LogoFlag,\n WISE_FLAG_INVERSE: LogoFlagInverse,\n WISE_FLAG_PLATFORM: LogoFlagPlatform,\n WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\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 */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n}\n\nconst labelByType = {\n WISE: 'Wise',\n WISE_BUSINESS: 'Wise Business',\n WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\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({ className, inverse, type = 'WISE' }: LogoProps) {\n const LogoSm =\n svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n return (\n <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n </span>\n );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;;;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,mBAAQ;AACdC,EAAAA,aAAa,EAAED,mBAAQ;AACvBE,EAAAA,YAAY,EAAEC,0BAAe;AAC7BC,EAAAA,qBAAqB,EAAED,0BAAe;AACtCE,EAAAA,aAAa,EAAEC,2BAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,kCAAuB;AAC9CC,EAAAA,SAAS,EAAEC,mBAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,0BAAe;AAClCC,EAAAA,kBAAkB,EAAEC,2BAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;AAEWC;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;AAqBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAEzC;;;;;AAKG;AACW,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,eAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,SAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,cAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,cAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}
|
package/build/logo/Logo.mjs
CHANGED
|
@@ -25,6 +25,12 @@ const labelByType = {
|
|
|
25
25
|
WISE_BUSINESS: 'Wise Business',
|
|
26
26
|
WISE_PLATFORM: 'Wise Platform'
|
|
27
27
|
};
|
|
28
|
+
/**
|
|
29
|
+
* Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
|
|
30
|
+
* and the full wordmark on ≥576px (small breakpoint and above).
|
|
31
|
+
*
|
|
32
|
+
* @see {@link https://wise.design/foundations/logo Design Spec}
|
|
33
|
+
*/
|
|
28
34
|
function Logo({
|
|
29
35
|
className,
|
|
30
36
|
inverse,
|
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 LogoWise,\n LogoWiseInverse,\n LogoWisePlatform,\n LogoWisePlatformInverse,\n LogoFlag,\n LogoFlagInverse,\n LogoFlagPlatform,\n LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n WISE: LogoWise,\n WISE_BUSINESS: LogoWise,\n WISE_INVERSE: LogoWiseInverse,\n WISE_BUSINESS_INVERSE: LogoWiseInverse,\n WISE_PLATFORM: LogoWisePlatform,\n WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n WISE_FLAG: LogoFlag,\n WISE_FLAG_INVERSE: LogoFlagInverse,\n WISE_FLAG_PLATFORM: LogoFlagPlatform,\n WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n
|
|
1
|
+
{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n LogoWise,\n LogoWiseInverse,\n LogoWisePlatform,\n LogoWisePlatformInverse,\n LogoFlag,\n LogoFlagInverse,\n LogoFlagPlatform,\n LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n WISE: LogoWise,\n WISE_BUSINESS: LogoWise,\n WISE_INVERSE: LogoWiseInverse,\n WISE_BUSINESS_INVERSE: LogoWiseInverse,\n WISE_PLATFORM: LogoWisePlatform,\n WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n WISE_FLAG: LogoFlag,\n WISE_FLAG_INVERSE: LogoFlagInverse,\n WISE_FLAG_PLATFORM: LogoFlagPlatform,\n WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\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 */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n}\n\nconst labelByType = {\n WISE: 'Wise',\n WISE_BUSINESS: 'Wise Business',\n WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\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({ className, inverse, type = 'WISE' }: LogoProps) {\n const LogoSm =\n svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n return (\n <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n </span>\n );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,QAAQ;AACdC,EAAAA,aAAa,EAAED,QAAQ;AACvBE,EAAAA,YAAY,EAAEC,eAAe;AAC7BC,EAAAA,qBAAqB,EAAED,eAAe;AACtCE,EAAAA,aAAa,EAAEC,gBAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,uBAAuB;AAC9CC,EAAAA,SAAS,EAAEC,QAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,eAAe;AAClCC,EAAAA,kBAAkB,EAAEC,gBAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;IAEWC;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;AAqBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAEzC;;;;;AAKG;AACW,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,IAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,IAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,GAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,GAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}
|
package/build/main.css
CHANGED
|
@@ -29430,7 +29430,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29430
29430
|
margin-top: -2px;
|
|
29431
29431
|
}
|
|
29432
29432
|
|
|
29433
|
-
@container (
|
|
29433
|
+
@container (width > 308px) {
|
|
29434
29434
|
.wds-list-item-gridWrapper .wds-list-item-control-wrapper {
|
|
29435
29435
|
height: var(--wds-list-item-control-wrapper-height);
|
|
29436
29436
|
align-content: center;
|
|
@@ -29527,7 +29527,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29527
29527
|
}
|
|
29528
29528
|
}
|
|
29529
29529
|
|
|
29530
|
-
@container (
|
|
29530
|
+
@container (240px < width <= 308px) {
|
|
29531
29531
|
.wds-list-item-gridWrapper .wds-list-item-media-image {
|
|
29532
29532
|
-o-object-position: bottom left;
|
|
29533
29533
|
object-position: bottom left;
|
|
@@ -29659,7 +29659,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29659
29659
|
}
|
|
29660
29660
|
}
|
|
29661
29661
|
|
|
29662
|
-
@container (
|
|
29662
|
+
@container (width <= 240px) {
|
|
29663
29663
|
.wds-list-item-gridWrapper .wds-list-item-control-wrapper {
|
|
29664
29664
|
align-content: start;
|
|
29665
29665
|
}
|
|
@@ -29987,7 +29987,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29987
29987
|
justify-content: center;
|
|
29988
29988
|
}
|
|
29989
29989
|
|
|
29990
|
-
@container (
|
|
29990
|
+
@container (width > 308px) {
|
|
29991
29991
|
.wds-list-item-titles,
|
|
29992
29992
|
.wds-list-item-value {
|
|
29993
29993
|
min-height: 100%;
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
|
|
10
10
|
margin-top: -2px;
|
|
11
11
|
}
|
|
12
|
-
@container (
|
|
12
|
+
@container (width > 308px) {
|
|
13
13
|
.wds-list-item-gridWrapper .wds-list-item-control-wrapper {
|
|
14
14
|
height: var(--wds-list-item-control-wrapper-height);
|
|
15
15
|
align-content: center;
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
grid-template-areas: "body";
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
|
-
@container (
|
|
108
|
+
@container (240px < width <= 308px) {
|
|
109
109
|
.wds-list-item-gridWrapper .wds-list-item-media-image {
|
|
110
110
|
-o-object-position: bottom left;
|
|
111
111
|
object-position: bottom left;
|
|
@@ -236,7 +236,7 @@
|
|
|
236
236
|
margin-top: var(--size-4);
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
|
-
@container (
|
|
239
|
+
@container (width <= 240px) {
|
|
240
240
|
.wds-list-item-gridWrapper .wds-list-item-control-wrapper {
|
|
241
241
|
align-content: start;
|
|
242
242
|
}
|
|
@@ -531,7 +531,7 @@
|
|
|
531
531
|
flex-direction: column;
|
|
532
532
|
justify-content: center;
|
|
533
533
|
}
|
|
534
|
-
@container (
|
|
534
|
+
@container (width > 308px) {
|
|
535
535
|
.wds-list-item-titles,
|
|
536
536
|
.wds-list-item-value {
|
|
537
537
|
min-height: 100%;
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
|
|
10
10
|
margin-top: -2px;
|
|
11
11
|
}
|
|
12
|
-
@container (
|
|
12
|
+
@container (width > 308px) {
|
|
13
13
|
.wds-list-item-gridWrapper .wds-list-item-control-wrapper {
|
|
14
14
|
height: var(--wds-list-item-control-wrapper-height);
|
|
15
15
|
align-content: center;
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
grid-template-areas: "body";
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
|
-
@container (
|
|
108
|
+
@container (240px < width <= 308px) {
|
|
109
109
|
.wds-list-item-gridWrapper .wds-list-item-media-image {
|
|
110
110
|
-o-object-position: bottom left;
|
|
111
111
|
object-position: bottom left;
|
|
@@ -236,7 +236,7 @@
|
|
|
236
236
|
margin-top: var(--size-4);
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
|
-
@container (
|
|
239
|
+
@container (width <= 240px) {
|
|
240
240
|
.wds-list-item-gridWrapper .wds-list-item-control-wrapper {
|
|
241
241
|
align-content: start;
|
|
242
242
|
}
|
package/build/styles/main.css
CHANGED
|
@@ -29430,7 +29430,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29430
29430
|
margin-top: -2px;
|
|
29431
29431
|
}
|
|
29432
29432
|
|
|
29433
|
-
@container (
|
|
29433
|
+
@container (width > 308px) {
|
|
29434
29434
|
.wds-list-item-gridWrapper .wds-list-item-control-wrapper {
|
|
29435
29435
|
height: var(--wds-list-item-control-wrapper-height);
|
|
29436
29436
|
align-content: center;
|
|
@@ -29527,7 +29527,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29527
29527
|
}
|
|
29528
29528
|
}
|
|
29529
29529
|
|
|
29530
|
-
@container (
|
|
29530
|
+
@container (240px < width <= 308px) {
|
|
29531
29531
|
.wds-list-item-gridWrapper .wds-list-item-media-image {
|
|
29532
29532
|
-o-object-position: bottom left;
|
|
29533
29533
|
object-position: bottom left;
|
|
@@ -29659,7 +29659,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29659
29659
|
}
|
|
29660
29660
|
}
|
|
29661
29661
|
|
|
29662
|
-
@container (
|
|
29662
|
+
@container (width <= 240px) {
|
|
29663
29663
|
.wds-list-item-gridWrapper .wds-list-item-control-wrapper {
|
|
29664
29664
|
align-content: start;
|
|
29665
29665
|
}
|
|
@@ -29987,7 +29987,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29987
29987
|
justify-content: center;
|
|
29988
29988
|
}
|
|
29989
29989
|
|
|
29990
|
-
@container (
|
|
29990
|
+
@container (width > 308px) {
|
|
29991
29991
|
.wds-list-item-titles,
|
|
29992
29992
|
.wds-list-item-value {
|
|
29993
29993
|
min-height: 100%;
|
|
@@ -14,7 +14,7 @@ export type ChipsProps = CommonProps & AriaLabelProperty & {
|
|
|
14
14
|
}) => void;
|
|
15
15
|
/** Used to manage which chips are selected */
|
|
16
16
|
selected: ChipValue | readonly ChipValue[];
|
|
17
|
-
/**
|
|
17
|
+
/** True turns on Filter-mode, False is Choice */
|
|
18
18
|
multiple?: boolean;
|
|
19
19
|
};
|
|
20
20
|
declare const Chips: ({ chips, onChange, selected, "aria-label": ariaLabel, className, multiple, }: ChipsProps) => import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/chips/Chips.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAK3D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,iBAAiB,GAAG;IAClB,gEAAgE;IAChE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,aAAa,GACd,EAAE;QACD,SAAS,EAAE,OAAO,CAAC;QACnB,aAAa,EAAE,SAAS,CAAC;KAC1B,KAAK,IAAI,CAAC;IACX,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,GAAG,SAAS,SAAS,EAAE,CAAC;IAC3C,
|
|
1
|
+
{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/chips/Chips.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAK3D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,iBAAiB,GAAG;IAClB,gEAAgE;IAChE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,aAAa,GACd,EAAE;QACD,SAAS,EAAE,OAAO,CAAC;QACnB,aAAa,EAAE,SAAS,CAAC;KAC1B,KAAK,IAAI,CAAC;IACX,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,GAAG,SAAS,SAAS,EAAE,CAAC;IAC3C,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,QAAA,MAAM,KAAK,GAAI,8EAOZ,UAAU,gCA6CZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,10 +1,4 @@
|
|
|
1
1
|
export type CommonProps = {
|
|
2
|
-
/**
|
|
3
|
-
* Space-separated list of the case-sensitive CSS classes,
|
|
4
|
-
* most would be applied to outermost element inside the component
|
|
5
|
-
*
|
|
6
|
-
* @see https://github.com/transferwise/neptune-web/blob/main/rfc/0001-always-pass-classname.md
|
|
7
|
-
*/
|
|
8
2
|
className?: string;
|
|
9
3
|
};
|
|
10
4
|
export type AriaLabelProperty = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"commonProps.d.ts","sourceRoot":"","sources":["../../../src/common/commonProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB
|
|
1
|
+
{"version":3,"file":"commonProps.d.ts","sourceRoot":"","sources":["../../../src/common/commonProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/label/Label.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;
|
|
1
|
+
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/label/Label.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA6BF,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAchE,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,WAAW,CAAC,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAWrF,QAAA,MAAM,cAAc;wCAvBwC,kBAAkB;+CAcR,qBAAqB;CASrB,CAAC;AAGvE,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,CAAC"}
|
|
@@ -6,7 +6,10 @@ export declare enum LogoType {
|
|
|
6
6
|
export interface LogoProps {
|
|
7
7
|
/** Extra classes applied to Logo */
|
|
8
8
|
className?: string;
|
|
9
|
-
/**
|
|
9
|
+
/**
|
|
10
|
+
* Renders a light-coloured version suited for dark backgrounds.
|
|
11
|
+
* @default false
|
|
12
|
+
*/
|
|
10
13
|
inverse?: boolean;
|
|
11
14
|
/**
|
|
12
15
|
* What type of logo to display
|
|
@@ -14,5 +17,11 @@ export interface LogoProps {
|
|
|
14
17
|
*/
|
|
15
18
|
type?: `${LogoType}`;
|
|
16
19
|
}
|
|
20
|
+
/**
|
|
21
|
+
* Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
|
|
22
|
+
* and the full wordmark on ≥576px (small breakpoint and above).
|
|
23
|
+
*
|
|
24
|
+
* @see {@link https://wise.design/foundations/logo Design Spec}
|
|
25
|
+
*/
|
|
17
26
|
export default function Logo({ className, inverse, type }: LogoProps): import("react").JSX.Element;
|
|
18
27
|
//# sourceMappingURL=Logo.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.tsx"],"names":[],"mappings":"AA0BA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB
|
|
1
|
+
{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.tsx"],"names":[],"mappings":"AA0BA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;CACtB;AAQD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAa,EAAE,EAAE,SAAS,+BAW5E"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.133.
|
|
3
|
+
"version": "46.133.1",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -87,9 +87,9 @@
|
|
|
87
87
|
"storybook-addon-tag-badges": "^3.1.0",
|
|
88
88
|
"storybook-addon-test-codegen": "^3.0.1",
|
|
89
89
|
"@transferwise/less-config": "3.1.2",
|
|
90
|
-
"@
|
|
90
|
+
"@transferwise/neptune-css": "14.27.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",
|
|
@@ -158,7 +158,6 @@ const meta: Meta<typeof Button> = {
|
|
|
158
158
|
table: {
|
|
159
159
|
readonly: true,
|
|
160
160
|
},
|
|
161
|
-
description: 'If set, toggles the new Button API',
|
|
162
161
|
},
|
|
163
162
|
size: {
|
|
164
163
|
type: {
|
|
@@ -195,13 +194,11 @@ const meta: Meta<typeof Button> = {
|
|
|
195
194
|
},
|
|
196
195
|
},
|
|
197
196
|
disabled: {
|
|
198
|
-
description: 'Toggles the disabled state',
|
|
199
197
|
table: {
|
|
200
198
|
defaultValue: { summary: 'false' },
|
|
201
199
|
},
|
|
202
200
|
},
|
|
203
201
|
loading: {
|
|
204
|
-
description: 'Toggles the loading state',
|
|
205
202
|
table: {
|
|
206
203
|
defaultValue: { summary: 'false' },
|
|
207
204
|
},
|
|
@@ -215,7 +212,6 @@ const meta: Meta<typeof Button> = {
|
|
|
215
212
|
type: {
|
|
216
213
|
name: 'string',
|
|
217
214
|
},
|
|
218
|
-
description: 'If set, the component will render as an HTML anchor.',
|
|
219
215
|
},
|
|
220
216
|
target: {
|
|
221
217
|
type: {
|
|
@@ -240,7 +236,6 @@ const meta: Meta<typeof Button> = {
|
|
|
240
236
|
summary: 'string',
|
|
241
237
|
},
|
|
242
238
|
},
|
|
243
|
-
description: "Native HTML button's `type` attribute",
|
|
244
239
|
},
|
|
245
240
|
htmlType: {
|
|
246
241
|
table: {
|
|
@@ -254,6 +249,21 @@ const meta: Meta<typeof Button> = {
|
|
|
254
249
|
},
|
|
255
250
|
},
|
|
256
251
|
},
|
|
252
|
+
id: {
|
|
253
|
+
table: {
|
|
254
|
+
category: 'Common',
|
|
255
|
+
},
|
|
256
|
+
},
|
|
257
|
+
className: {
|
|
258
|
+
table: {
|
|
259
|
+
category: 'Common',
|
|
260
|
+
},
|
|
261
|
+
},
|
|
262
|
+
onClick: {
|
|
263
|
+
table: {
|
|
264
|
+
category: 'Common',
|
|
265
|
+
},
|
|
266
|
+
},
|
|
257
267
|
},
|
|
258
268
|
args: {
|
|
259
269
|
v2: true,
|