@transferwise/components 46.69.0 → 46.70.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/chips/Chips.js +1 -1
- package/build/chips/Chips.js.map +1 -1
- package/build/chips/Chips.mjs +1 -1
- package/build/chips/Chips.mjs.map +1 -1
- package/build/header/Header.js +1 -10
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +1 -10
- package/build/header/Header.mjs.map +1 -1
- package/build/main.css +5 -7
- package/build/section/Section.js +2 -1
- package/build/section/Section.js.map +1 -1
- package/build/section/Section.mjs +2 -1
- package/build/section/Section.mjs.map +1 -1
- package/build/styles/header/Header.css +5 -7
- package/build/styles/main.css +5 -7
- package/build/types/header/Header.d.ts.map +1 -1
- package/build/types/section/Section.d.ts +2 -1
- package/build/types/section/Section.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/chips/Chips.tsx +1 -1
- package/src/chips/__snapshots__/Chips.spec.tsx.snap +1 -0
- package/src/header/Header.css +5 -7
- package/src/header/Header.less +4 -6
- package/src/header/Header.tsx +2 -8
- package/src/main.css +5 -7
- package/src/radioOption/RadioOption.story.tsx +4 -3
- package/src/section/Section.tsx +9 -3
package/build/chips/Chips.js
CHANGED
|
@@ -25,7 +25,7 @@ const Chips = ({
|
|
|
25
25
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
26
26
|
className: clsx.clsx('np-chips d-flex', className),
|
|
27
27
|
"aria-label": ariaLabel,
|
|
28
|
-
role: !multiple ? 'radiogroup' :
|
|
28
|
+
role: !multiple ? 'radiogroup' : 'group',
|
|
29
29
|
children: chips.map(chip => {
|
|
30
30
|
const chipSelected = isSelected(chip.value);
|
|
31
31
|
return /*#__PURE__*/jsxRuntime.jsx(Chip, {
|
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 /** Used to activate multi-selection */\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' :
|
|
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 /** Used to activate multi-selection */\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":";;;;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;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,CAAA;MAC3C,oBACEQ,cAAA,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,cAAQ,CAACzB,SAAS,EAAE;YAAE0B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFrB,QAAAA,SAAS,EAAEc,SAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEK,YAAY;UACjC,OAAO,EAAElB,QAAQ,IAAIkB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACElB,QAAQ,IAAIkB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMjB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY,CAAA;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,CAAA;SAC1D,CAAA;OAnBAD,EAAAA,IAAI,CAACb,KAoBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}
|
package/build/chips/Chips.mjs
CHANGED
|
@@ -23,7 +23,7 @@ const Chips = ({
|
|
|
23
23
|
return /*#__PURE__*/jsx("div", {
|
|
24
24
|
className: clsx('np-chips d-flex', className),
|
|
25
25
|
"aria-label": ariaLabel,
|
|
26
|
-
role: !multiple ? 'radiogroup' :
|
|
26
|
+
role: !multiple ? 'radiogroup' : 'group',
|
|
27
27
|
children: chips.map(chip => {
|
|
28
28
|
const chipSelected = isSelected(chip.value);
|
|
29
29
|
return /*#__PURE__*/jsx(Chip, {
|
|
@@ -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 /** Used to activate multi-selection */\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' :
|
|
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 /** Used to activate multi-selection */\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":";;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;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,CAAA;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,KAAAA;WAAO,CAAA;SAC3E;AACFrB,QAAAA,SAAS,EAAEc,IAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEK,YAAY;UACjC,OAAO,EAAElB,QAAQ,IAAIkB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACElB,QAAQ,IAAIkB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMjB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY,CAAA;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,CAAA;SAC1D,CAAA;OAnBAD,EAAAA,IAAI,CAACb,KAoBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}
|
package/build/header/Header.js
CHANGED
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var componentsTheming = require('@wise/components-theming');
|
|
6
5
|
var clsx = require('clsx');
|
|
7
|
-
var ActionButton = require('../actionButton/ActionButton.js');
|
|
8
6
|
var Button = require('../button/Button.js');
|
|
9
7
|
var Link = require('../link/Link.js');
|
|
10
8
|
var Title = require('../title/Title.js');
|
|
@@ -14,9 +12,6 @@ var typography = require('../common/propsValues/typography.js');
|
|
|
14
12
|
const HeaderAction = ({
|
|
15
13
|
action
|
|
16
14
|
}) => {
|
|
17
|
-
const {
|
|
18
|
-
isModern
|
|
19
|
-
} = componentsTheming.useTheme();
|
|
20
15
|
const props = {
|
|
21
16
|
'aria-label': action['aria-label']
|
|
22
17
|
};
|
|
@@ -29,17 +24,13 @@ const HeaderAction = ({
|
|
|
29
24
|
children: action.text
|
|
30
25
|
});
|
|
31
26
|
}
|
|
32
|
-
return
|
|
27
|
+
return /*#__PURE__*/jsxRuntime.jsx(Button, {
|
|
33
28
|
className: "np-header__button",
|
|
34
29
|
priority: "tertiary",
|
|
35
30
|
size: "sm",
|
|
36
31
|
onClick: action.onClick,
|
|
37
32
|
...props,
|
|
38
33
|
children: action.text
|
|
39
|
-
}) : /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
|
|
40
|
-
onClick: action.onClick,
|
|
41
|
-
...props,
|
|
42
|
-
children: action.text
|
|
43
34
|
});
|
|
44
35
|
};
|
|
45
36
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n /**\n * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n */\n action?: ButtonActionProps | LinkActionProps;\n /**\n * Override the heading element rendered for the title, useful to specify the semantics of your header.\n *\n * @default \"h5\"\n */\n as?: Heading | 'legend';\n title: string;\n};\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {\n const props = {\n 'aria-label': action['aria-label'],\n };\n\n if ('href' in action) {\n return (\n <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n {action.text}\n </Link>\n );\n }\n\n return (\n <Button\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n onClick={action.onClick}\n {...props}\n >\n {action.text}\n </Button>\n );\n};\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n *\n */\nexport const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {\n if (!action) {\n return (\n <Title\n as={as}\n type={Typography.TITLE_GROUP}\n className={clsx('np-header', 'np-header__title', className)}\n >\n {title}\n </Title>\n );\n }\n\n if (as === 'legend') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n\n return (\n <div className={clsx('np-header', className)}>\n <Title as={as} type={Typography.TITLE_GROUP} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","as","title","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;AA8BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA,MAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY,CAAA;GAClC,CAAA;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,cAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;EAEA,oBACEN,cAAA,CAACO,MAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ,IAAAA;AAAI,GACN,CAAC,CAAA;AAEb,CAAC,CAAA;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EAAEb,MAAM;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEC,KAAK;AAAEL,EAAAA,SAAAA;AAAS,CAAe,KAAI;EAC7E,IAAI,CAACV,MAAM,EAAE;IACX,oBACEE,cAAA,CAACc,KAAK,EAAA;AACJF,MAAAA,EAAE,EAAEA,EAAG;MACPG,IAAI,EAAEC,qBAAU,CAACC,WAAY;MAC7BT,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEV,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DQ,KAAAA;AAAK,KACD,CAAC,CAAA;AAEZ,GAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAO,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG,CAAA;AACH,GAAA;AAEA,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,cAAA,CAACc,KAAK,EAAA;AAACF,MAAAA,EAAE,EAAEA,EAAG;MAACG,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACT,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EACtEQ,KAAAA;AAAK,KACD,CACP,eAAAb,cAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAC/B,CAAA,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;;"}
|
package/build/header/Header.mjs
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import { useTheme } from '@wise/components-theming';
|
|
2
1
|
import { clsx } from 'clsx';
|
|
3
|
-
import ActionButton from '../actionButton/ActionButton.mjs';
|
|
4
2
|
import Button from '../button/Button.mjs';
|
|
5
3
|
import Link from '../link/Link.mjs';
|
|
6
4
|
import Title from '../title/Title.mjs';
|
|
@@ -10,9 +8,6 @@ import { Typography } from '../common/propsValues/typography.mjs';
|
|
|
10
8
|
const HeaderAction = ({
|
|
11
9
|
action
|
|
12
10
|
}) => {
|
|
13
|
-
const {
|
|
14
|
-
isModern
|
|
15
|
-
} = useTheme();
|
|
16
11
|
const props = {
|
|
17
12
|
'aria-label': action['aria-label']
|
|
18
13
|
};
|
|
@@ -25,17 +20,13 @@ const HeaderAction = ({
|
|
|
25
20
|
children: action.text
|
|
26
21
|
});
|
|
27
22
|
}
|
|
28
|
-
return
|
|
23
|
+
return /*#__PURE__*/jsx(Button, {
|
|
29
24
|
className: "np-header__button",
|
|
30
25
|
priority: "tertiary",
|
|
31
26
|
size: "sm",
|
|
32
27
|
onClick: action.onClick,
|
|
33
28
|
...props,
|
|
34
29
|
children: action.text
|
|
35
|
-
}) : /*#__PURE__*/jsx(ActionButton, {
|
|
36
|
-
onClick: action.onClick,
|
|
37
|
-
...props,
|
|
38
|
-
children: action.text
|
|
39
30
|
});
|
|
40
31
|
};
|
|
41
32
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n /**\n * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n */\n action?: ButtonActionProps | LinkActionProps;\n /**\n * Override the heading element rendered for the title, useful to specify the semantics of your header.\n *\n * @default \"h5\"\n */\n as?: Heading | 'legend';\n title: string;\n};\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {\n const props = {\n 'aria-label': action['aria-label'],\n };\n\n if ('href' in action) {\n return (\n <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n {action.text}\n </Link>\n );\n }\n\n return (\n <Button\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n onClick={action.onClick}\n {...props}\n >\n {action.text}\n </Button>\n );\n};\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n *\n */\nexport const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {\n if (!action) {\n return (\n <Title\n as={as}\n type={Typography.TITLE_GROUP}\n className={clsx('np-header', 'np-header__title', className)}\n >\n {title}\n </Title>\n );\n }\n\n if (as === 'legend') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n\n return (\n <div className={clsx('np-header', className)}>\n <Title as={as} type={Typography.TITLE_GROUP} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","as","title","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;AA8BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA,MAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY,CAAA;GAClC,CAAA;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,GAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;EAEA,oBACEN,GAAA,CAACO,MAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ,IAAAA;AAAI,GACN,CAAC,CAAA;AAEb,CAAC,CAAA;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EAAEb,MAAM;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEC,KAAK;AAAEL,EAAAA,SAAAA;AAAS,CAAe,KAAI;EAC7E,IAAI,CAACV,MAAM,EAAE;IACX,oBACEE,GAAA,CAACc,KAAK,EAAA;AACJF,MAAAA,EAAE,EAAEA,EAAG;MACPG,IAAI,EAAEC,UAAU,CAACC,WAAY;MAC7BT,SAAS,EAAEU,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEV,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DQ,KAAAA;AAAK,KACD,CAAC,CAAA;AAEZ,GAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAO,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG,CAAA;AACH,GAAA;AAEA,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAEU,IAAI,CAAC,WAAW,EAAEV,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,GAAA,CAACc,KAAK,EAAA;AAACF,MAAAA,EAAE,EAAEA,EAAG;MAACG,IAAI,EAAEC,UAAU,CAACC,WAAY;AAACT,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EACtEQ,KAAAA;AAAK,KACD,CACP,eAAAb,GAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAC/B,CAAA,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
|
package/build/main.css
CHANGED
|
@@ -2237,18 +2237,16 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
2237
2237
|
border-bottom: 1px solid var(--color-border-neutral);
|
|
2238
2238
|
margin-bottom: 8px;
|
|
2239
2239
|
margin-bottom: var(--size-8);
|
|
2240
|
-
}
|
|
2241
|
-
.np-header__title {
|
|
2242
|
-
color: #5d7079;
|
|
2243
|
-
color: var(--color-content-secondary);
|
|
2244
|
-
}
|
|
2245
|
-
.np-theme-personal .np-header {
|
|
2246
2240
|
-moz-column-gap: 24px;
|
|
2247
2241
|
column-gap: 24px;
|
|
2248
2242
|
-moz-column-gap: var(--size-24);
|
|
2249
2243
|
column-gap: var(--size-24);
|
|
2250
2244
|
}
|
|
2251
|
-
.np-
|
|
2245
|
+
.np-header__title {
|
|
2246
|
+
color: #5d7079;
|
|
2247
|
+
color: var(--color-content-secondary);
|
|
2248
|
+
}
|
|
2249
|
+
.np-header__button {
|
|
2252
2250
|
margin-inline: calc(16px * -1);
|
|
2253
2251
|
margin-inline: calc(var(--size-16) * -1);
|
|
2254
2252
|
margin-bottom: calc(4px * -1);
|
package/build/section/Section.js
CHANGED
|
@@ -4,11 +4,12 @@ var clsx = require('clsx');
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
|
|
6
6
|
const Section = ({
|
|
7
|
+
as: Element = 'div',
|
|
7
8
|
children,
|
|
8
9
|
className,
|
|
9
10
|
withHorizontalPadding = false
|
|
10
11
|
}) => {
|
|
11
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
12
|
+
return /*#__PURE__*/jsxRuntime.jsx(Element, {
|
|
12
13
|
className: clsx.clsx('np-section', className, {
|
|
13
14
|
'np-section--with-horizontal-padding': withHorizontalPadding
|
|
14
15
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.js","sources":["../../src/section/Section.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n CommonProps & {\n withHorizontalPadding?: boolean;\n }\n>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({ children
|
|
1
|
+
{"version":3,"file":"Section.js","sources":["../../src/section/Section.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n CommonProps & {\n as?: 'div' | 'fieldset';\n withHorizontalPadding?: boolean;\n }\n>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({\n as: Element = 'div',\n children,\n className,\n withHorizontalPadding = false,\n}: SectionProps) => {\n return (\n <Element\n className={clsx('np-section', className, {\n 'np-section--with-horizontal-padding': withHorizontalPadding,\n })}\n >\n {children}\n </Element>\n );\n};\n\nexport default Section;\n"],"names":["Section","as","Element","children","className","withHorizontalPadding","_jsx","clsx"],"mappings":";;;;;AAiBMA,MAAAA,OAAO,GAAGA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;EACRC,SAAS;AACTC,EAAAA,qBAAqB,GAAG,KAAA;AAAK,CAChB,KAAI;EACjB,oBACEC,cAAA,CAACJ,OAAO,EAAA;AACNE,IAAAA,SAAS,EAAEG,SAAI,CAAC,YAAY,EAAEH,SAAS,EAAE;AACvC,MAAA,qCAAqC,EAAEC,qBAAAA;AACxC,KAAA,CAAE;AAAAF,IAAAA,QAAA,EAEFA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}
|
|
@@ -2,11 +2,12 @@ import { clsx } from 'clsx';
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
|
|
4
4
|
const Section = ({
|
|
5
|
+
as: Element = 'div',
|
|
5
6
|
children,
|
|
6
7
|
className,
|
|
7
8
|
withHorizontalPadding = false
|
|
8
9
|
}) => {
|
|
9
|
-
return /*#__PURE__*/jsx(
|
|
10
|
+
return /*#__PURE__*/jsx(Element, {
|
|
10
11
|
className: clsx('np-section', className, {
|
|
11
12
|
'np-section--with-horizontal-padding': withHorizontalPadding
|
|
12
13
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.mjs","sources":["../../src/section/Section.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n CommonProps & {\n withHorizontalPadding?: boolean;\n }\n>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({ children
|
|
1
|
+
{"version":3,"file":"Section.mjs","sources":["../../src/section/Section.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n CommonProps & {\n as?: 'div' | 'fieldset';\n withHorizontalPadding?: boolean;\n }\n>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({\n as: Element = 'div',\n children,\n className,\n withHorizontalPadding = false,\n}: SectionProps) => {\n return (\n <Element\n className={clsx('np-section', className, {\n 'np-section--with-horizontal-padding': withHorizontalPadding,\n })}\n >\n {children}\n </Element>\n );\n};\n\nexport default Section;\n"],"names":["Section","as","Element","children","className","withHorizontalPadding","_jsx","clsx"],"mappings":";;;AAiBMA,MAAAA,OAAO,GAAGA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;EACRC,SAAS;AACTC,EAAAA,qBAAqB,GAAG,KAAA;AAAK,CAChB,KAAI;EACjB,oBACEC,GAAA,CAACJ,OAAO,EAAA;AACNE,IAAAA,SAAS,EAAEG,IAAI,CAAC,YAAY,EAAEH,SAAS,EAAE;AACvC,MAAA,qCAAqC,EAAEC,qBAAAA;AACxC,KAAA,CAAE;AAAAF,IAAAA,QAAA,EAEFA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}
|
|
@@ -9,18 +9,16 @@
|
|
|
9
9
|
border-bottom: 1px solid var(--color-border-neutral);
|
|
10
10
|
margin-bottom: 8px;
|
|
11
11
|
margin-bottom: var(--size-8);
|
|
12
|
-
}
|
|
13
|
-
.np-header__title {
|
|
14
|
-
color: #5d7079;
|
|
15
|
-
color: var(--color-content-secondary);
|
|
16
|
-
}
|
|
17
|
-
.np-theme-personal .np-header {
|
|
18
12
|
-moz-column-gap: 24px;
|
|
19
13
|
column-gap: 24px;
|
|
20
14
|
-moz-column-gap: var(--size-24);
|
|
21
15
|
column-gap: var(--size-24);
|
|
22
16
|
}
|
|
23
|
-
.np-
|
|
17
|
+
.np-header__title {
|
|
18
|
+
color: #5d7079;
|
|
19
|
+
color: var(--color-content-secondary);
|
|
20
|
+
}
|
|
21
|
+
.np-header__button {
|
|
24
22
|
margin-inline: calc(16px * -1);
|
|
25
23
|
margin-inline: calc(var(--size-16) * -1);
|
|
26
24
|
margin-bottom: calc(4px * -1);
|
package/build/styles/main.css
CHANGED
|
@@ -2237,18 +2237,16 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
2237
2237
|
border-bottom: 1px solid var(--color-border-neutral);
|
|
2238
2238
|
margin-bottom: 8px;
|
|
2239
2239
|
margin-bottom: var(--size-8);
|
|
2240
|
-
}
|
|
2241
|
-
.np-header__title {
|
|
2242
|
-
color: #5d7079;
|
|
2243
|
-
color: var(--color-content-secondary);
|
|
2244
|
-
}
|
|
2245
|
-
.np-theme-personal .np-header {
|
|
2246
2240
|
-moz-column-gap: 24px;
|
|
2247
2241
|
column-gap: 24px;
|
|
2248
2242
|
-moz-column-gap: var(--size-24);
|
|
2249
2243
|
column-gap: var(--size-24);
|
|
2250
2244
|
}
|
|
2251
|
-
.np-
|
|
2245
|
+
.np-header__title {
|
|
2246
|
+
color: #5d7079;
|
|
2247
|
+
color: var(--color-content-secondary);
|
|
2248
|
+
}
|
|
2249
|
+
.np-header__button {
|
|
2252
2250
|
margin-inline: calc(16px * -1);
|
|
2253
2251
|
margin-inline: calc(var(--size-16) * -1);
|
|
2254
2252
|
margin-bottom: calc(4px * -1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAI3F,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzD,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC7C;;;;OAIG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF;;;;GAIG;AACH,eAAO,MAAM,MAAM,qCAA6C,WAAW,gCA4B1E,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { CommonProps } from '../common';
|
|
3
3
|
type SectionProps = PropsWithChildren<CommonProps & {
|
|
4
|
+
as?: 'div' | 'fieldset';
|
|
4
5
|
withHorizontalPadding?: boolean;
|
|
5
6
|
}>;
|
|
6
7
|
/**
|
|
@@ -8,6 +9,6 @@ type SectionProps = PropsWithChildren<CommonProps & {
|
|
|
8
9
|
* Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
|
|
9
10
|
*
|
|
10
11
|
*/
|
|
11
|
-
declare const Section: ({ children, className, withHorizontalPadding }: SectionProps) => import("react").JSX.Element;
|
|
12
|
+
declare const Section: ({ as: Element, children, className, withHorizontalPadding, }: SectionProps) => import("react").JSX.Element;
|
|
12
13
|
export default Section;
|
|
13
14
|
//# sourceMappingURL=Section.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/section/Section.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,KAAK,YAAY,GAAG,iBAAiB,CACnC,WAAW,GAAG;IACZ,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CACF,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/section/Section.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,KAAK,YAAY,GAAG,iBAAiB,CACnC,WAAW,GAAG;IACZ,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CACF,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,OAAO,iEAKV,YAAY,gCAUd,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/package.json
CHANGED
package/src/chips/Chips.tsx
CHANGED
|
@@ -52,7 +52,7 @@ const Chips = ({
|
|
|
52
52
|
<div
|
|
53
53
|
className={clsx('np-chips d-flex', className)}
|
|
54
54
|
aria-label={ariaLabel}
|
|
55
|
-
role={!multiple ? 'radiogroup' :
|
|
55
|
+
role={!multiple ? 'radiogroup' : 'group'}
|
|
56
56
|
>
|
|
57
57
|
{chips.map((chip) => {
|
|
58
58
|
const chipSelected = isSelected(chip.value);
|
package/src/header/Header.css
CHANGED
|
@@ -9,18 +9,16 @@
|
|
|
9
9
|
border-bottom: 1px solid var(--color-border-neutral);
|
|
10
10
|
margin-bottom: 8px;
|
|
11
11
|
margin-bottom: var(--size-8);
|
|
12
|
-
}
|
|
13
|
-
.np-header__title {
|
|
14
|
-
color: #5d7079;
|
|
15
|
-
color: var(--color-content-secondary);
|
|
16
|
-
}
|
|
17
|
-
.np-theme-personal .np-header {
|
|
18
12
|
-moz-column-gap: 24px;
|
|
19
13
|
column-gap: 24px;
|
|
20
14
|
-moz-column-gap: var(--size-24);
|
|
21
15
|
column-gap: var(--size-24);
|
|
22
16
|
}
|
|
23
|
-
.np-
|
|
17
|
+
.np-header__title {
|
|
18
|
+
color: #5d7079;
|
|
19
|
+
color: var(--color-content-secondary);
|
|
20
|
+
}
|
|
21
|
+
.np-header__button {
|
|
24
22
|
margin-inline: calc(16px * -1);
|
|
25
23
|
margin-inline: calc(var(--size-16) * -1);
|
|
26
24
|
margin-bottom: calc(4px * -1);
|
package/src/header/Header.less
CHANGED
|
@@ -11,12 +11,10 @@
|
|
|
11
11
|
color: var(--color-content-secondary);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
column-gap: var(--size-24);
|
|
14
|
+
column-gap: var(--size-24);
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
16
|
+
&__button {
|
|
17
|
+
margin-inline: calc(var(--size-16) * -1);
|
|
18
|
+
margin-bottom: calc(var(--size-4) * -1);
|
|
21
19
|
}
|
|
22
20
|
}
|
package/src/header/Header.tsx
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { useTheme } from '@wise/components-theming';
|
|
2
1
|
import { clsx } from 'clsx';
|
|
3
2
|
|
|
4
|
-
import
|
|
3
|
+
import { ActionButtonProps } from '../actionButton/ActionButton';
|
|
5
4
|
import Button from '../button';
|
|
6
5
|
import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
|
|
7
6
|
import Link from '../link';
|
|
@@ -30,7 +29,6 @@ export type HeaderProps = CommonProps & {
|
|
|
30
29
|
};
|
|
31
30
|
|
|
32
31
|
const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {
|
|
33
|
-
const { isModern } = useTheme();
|
|
34
32
|
const props = {
|
|
35
33
|
'aria-label': action['aria-label'],
|
|
36
34
|
};
|
|
@@ -43,7 +41,7 @@ const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps
|
|
|
43
41
|
);
|
|
44
42
|
}
|
|
45
43
|
|
|
46
|
-
return
|
|
44
|
+
return (
|
|
47
45
|
<Button
|
|
48
46
|
className="np-header__button"
|
|
49
47
|
priority="tertiary"
|
|
@@ -53,10 +51,6 @@ const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps
|
|
|
53
51
|
>
|
|
54
52
|
{action.text}
|
|
55
53
|
</Button>
|
|
56
|
-
) : (
|
|
57
|
-
<ActionButton onClick={action.onClick} {...props}>
|
|
58
|
-
{action.text}
|
|
59
|
-
</ActionButton>
|
|
60
54
|
);
|
|
61
55
|
};
|
|
62
56
|
|
package/src/main.css
CHANGED
|
@@ -2237,18 +2237,16 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
2237
2237
|
border-bottom: 1px solid var(--color-border-neutral);
|
|
2238
2238
|
margin-bottom: 8px;
|
|
2239
2239
|
margin-bottom: var(--size-8);
|
|
2240
|
-
}
|
|
2241
|
-
.np-header__title {
|
|
2242
|
-
color: #5d7079;
|
|
2243
|
-
color: var(--color-content-secondary);
|
|
2244
|
-
}
|
|
2245
|
-
.np-theme-personal .np-header {
|
|
2246
2240
|
-moz-column-gap: 24px;
|
|
2247
2241
|
column-gap: 24px;
|
|
2248
2242
|
-moz-column-gap: var(--size-24);
|
|
2249
2243
|
column-gap: var(--size-24);
|
|
2250
2244
|
}
|
|
2251
|
-
.np-
|
|
2245
|
+
.np-header__title {
|
|
2246
|
+
color: #5d7079;
|
|
2247
|
+
color: var(--color-content-secondary);
|
|
2248
|
+
}
|
|
2249
|
+
.np-header__button {
|
|
2252
2250
|
margin-inline: calc(16px * -1);
|
|
2253
2251
|
margin-inline: calc(var(--size-16) * -1);
|
|
2254
2252
|
margin-bottom: calc(4px * -1);
|
|
@@ -3,7 +3,7 @@ import { boolean, text } from '@storybook/addon-knobs';
|
|
|
3
3
|
import { FastFlag as FastFlagIcon } from '@transferwise/icons';
|
|
4
4
|
import { useState } from 'react';
|
|
5
5
|
|
|
6
|
-
import { Nudge, Title, Typography } from '..';
|
|
6
|
+
import { Header, Nudge, Section, Title, Typography } from '..';
|
|
7
7
|
|
|
8
8
|
import RadioOption, { RadioOptionProps } from './RadioOption';
|
|
9
9
|
|
|
@@ -50,11 +50,12 @@ export const Multiple = () => {
|
|
|
50
50
|
const [selected, setSelected] = useState(0);
|
|
51
51
|
|
|
52
52
|
return (
|
|
53
|
-
|
|
53
|
+
<Section as="fieldset">
|
|
54
|
+
<Header as="legend" title="Test title" />
|
|
54
55
|
<Template checked={selected === 0} onChange={() => setSelected(0)} />
|
|
55
56
|
<Template checked={selected === 1} onChange={() => setSelected(1)} />
|
|
56
57
|
<Template checked={selected === 2} onChange={() => setSelected(2)} />
|
|
57
|
-
|
|
58
|
+
</Section>
|
|
58
59
|
);
|
|
59
60
|
};
|
|
60
61
|
|
package/src/section/Section.tsx
CHANGED
|
@@ -5,6 +5,7 @@ import { CommonProps } from '../common';
|
|
|
5
5
|
|
|
6
6
|
type SectionProps = PropsWithChildren<
|
|
7
7
|
CommonProps & {
|
|
8
|
+
as?: 'div' | 'fieldset';
|
|
8
9
|
withHorizontalPadding?: boolean;
|
|
9
10
|
}
|
|
10
11
|
>;
|
|
@@ -14,15 +15,20 @@ type SectionProps = PropsWithChildren<
|
|
|
14
15
|
* Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
|
|
15
16
|
*
|
|
16
17
|
*/
|
|
17
|
-
const Section = ({
|
|
18
|
+
const Section = ({
|
|
19
|
+
as: Element = 'div',
|
|
20
|
+
children,
|
|
21
|
+
className,
|
|
22
|
+
withHorizontalPadding = false,
|
|
23
|
+
}: SectionProps) => {
|
|
18
24
|
return (
|
|
19
|
-
<
|
|
25
|
+
<Element
|
|
20
26
|
className={clsx('np-section', className, {
|
|
21
27
|
'np-section--with-horizontal-padding': withHorizontalPadding,
|
|
22
28
|
})}
|
|
23
29
|
>
|
|
24
30
|
{children}
|
|
25
|
-
</
|
|
31
|
+
</Element>
|
|
26
32
|
);
|
|
27
33
|
};
|
|
28
34
|
|