@transferwise/components 46.62.1 → 46.63.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/checkbox/Checkbox.js +1 -1
- package/build/checkbox/Checkbox.js.map +1 -1
- package/build/checkbox/Checkbox.mjs +1 -1
- package/build/checkbox/Checkbox.mjs.map +1 -1
- package/build/radio/Radio.js +2 -9
- package/build/radio/Radio.js.map +1 -1
- package/build/radio/Radio.mjs +2 -9
- package/build/radio/Radio.mjs.map +1 -1
- package/build/types/radio/Radio.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/checkbox/Checkbox.tsx +1 -1
- package/src/checkboxButton/CheckboxButton.story.tsx +18 -21
- package/src/radio/Radio.tsx +3 -9
- package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap +1 -1
- package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +8 -3
|
@@ -22,7 +22,7 @@ function Checkbox({
|
|
|
22
22
|
const classList = clsx.clsx('np-checkbox', {
|
|
23
23
|
checkbox: true,
|
|
24
24
|
'checkbox-lg': secondary,
|
|
25
|
-
disabled
|
|
25
|
+
'checkbox-disabled': disabled
|
|
26
26
|
}, className);
|
|
27
27
|
const innerDisabled = disabled || readOnly;
|
|
28
28
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,SAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,SAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxB,IAAA,mBAAmB,EAAEJ,QAAAA;GACtB,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,cAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,eAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,SAAI,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACnCD,cAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,eAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,cAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,cAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.mjs","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,IAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;
|
|
1
|
+
{"version":3,"file":"Checkbox.mjs","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,IAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxB,IAAA,mBAAmB,EAAEJ,QAAAA;GACtB,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,GAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,IAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,IAAI,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACnCD,GAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,IAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,GAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,GAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
|
package/build/radio/Radio.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var componentsTheming = require('@wise/components-theming');
|
|
4
3
|
var clsx = require('clsx');
|
|
5
4
|
var Body = require('../body/Body.js');
|
|
6
5
|
var RadioButton = require('../common/RadioButton/RadioButton.js');
|
|
@@ -16,13 +15,10 @@ function Radio({
|
|
|
16
15
|
secondary,
|
|
17
16
|
...otherProps
|
|
18
17
|
}) {
|
|
19
|
-
const {
|
|
20
|
-
isModern
|
|
21
|
-
} = componentsTheming.useTheme();
|
|
22
18
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
23
19
|
className: clsx.clsx('radio np-radio', {
|
|
24
20
|
'radio-lg': secondary,
|
|
25
|
-
disabled:
|
|
21
|
+
'radio-disabled': disabled
|
|
26
22
|
}, className),
|
|
27
23
|
children: /*#__PURE__*/jsxRuntime.jsxs("label", {
|
|
28
24
|
className: clsx.clsx({
|
|
@@ -30,7 +26,7 @@ function Radio({
|
|
|
30
26
|
}),
|
|
31
27
|
htmlFor: id,
|
|
32
28
|
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
33
|
-
className:
|
|
29
|
+
className: "m-r-2 np-radio-button",
|
|
34
30
|
children: /*#__PURE__*/jsxRuntime.jsx(RadioButton, {
|
|
35
31
|
id: id,
|
|
36
32
|
disabled: disabled,
|
|
@@ -42,9 +38,6 @@ function Radio({
|
|
|
42
38
|
className: "np-radio__text",
|
|
43
39
|
children: [label, secondary && /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
44
40
|
as: "span",
|
|
45
|
-
className: clsx.clsx({
|
|
46
|
-
secondary: !isModern
|
|
47
|
-
}),
|
|
48
41
|
children: secondary
|
|
49
42
|
})]
|
|
50
43
|
}), avatar && /*#__PURE__*/jsxRuntime.jsx("span", {
|
package/build/radio/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string | number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n 'radio-disabled': disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className=\"m-r-2 np-radio-button\">\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":";;;;;;;;AAcwB,SAAAA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC,UAAAA;AACW,CAAA,EAAA;AACd,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,SAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,EAAEH,SAAS;AACrB,MAAA,gBAAgB,EAAEH,QAAAA;KACnB,EACDC,SAAS,CACT;AAAAM,IAAAA,QAAA,eAEFC,eAAA,CAAA,OAAA,EAAA;MAAOP,SAAS,EAAEK,SAAI,CAAC;AAAEN,QAAAA,QAAAA;AAAU,OAAA,CAAE;AAACS,MAAAA,OAAO,EAAEV,EAAG;AAAAQ,MAAAA,QAAA,gBAChDF,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCF,cAAA,CAACK,WAAW,EAAA;AAACX,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI,UAAAA;SAC/C,CAAA;AAAA,OAAM,CACN,eAAAI,eAAA,CAACG,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,EAAEV,SAAS,GAAGW,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AACrEf,QAAAA,SAAS,EAAC,gBAAgB;AAAAM,QAAAA,QAAA,GAEzBT,KAAK,EACLK,SAAS,iBAAIE,cAAA,CAACM,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAL,UAAAA,QAAA,EAAEJ,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACN,EAACD,MAAM,iBAAIG,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,2BAA2B;AAAAM,QAAAA,QAAA,EAAEL,MAAAA;AAAM,OAAO,CAAC,CAAA;KACjE,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
|
package/build/radio/Radio.mjs
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { useTheme } from '@wise/components-theming';
|
|
2
1
|
import { clsx } from 'clsx';
|
|
3
2
|
import Body from '../body/Body.mjs';
|
|
4
3
|
import RadioButton from '../common/RadioButton/RadioButton.mjs';
|
|
@@ -14,13 +13,10 @@ function Radio({
|
|
|
14
13
|
secondary,
|
|
15
14
|
...otherProps
|
|
16
15
|
}) {
|
|
17
|
-
const {
|
|
18
|
-
isModern
|
|
19
|
-
} = useTheme();
|
|
20
16
|
return /*#__PURE__*/jsx("div", {
|
|
21
17
|
className: clsx('radio np-radio', {
|
|
22
18
|
'radio-lg': secondary,
|
|
23
|
-
disabled:
|
|
19
|
+
'radio-disabled': disabled
|
|
24
20
|
}, className),
|
|
25
21
|
children: /*#__PURE__*/jsxs("label", {
|
|
26
22
|
className: clsx({
|
|
@@ -28,7 +24,7 @@ function Radio({
|
|
|
28
24
|
}),
|
|
29
25
|
htmlFor: id,
|
|
30
26
|
children: [/*#__PURE__*/jsx("span", {
|
|
31
|
-
className:
|
|
27
|
+
className: "m-r-2 np-radio-button",
|
|
32
28
|
children: /*#__PURE__*/jsx(RadioButton, {
|
|
33
29
|
id: id,
|
|
34
30
|
disabled: disabled,
|
|
@@ -40,9 +36,6 @@ function Radio({
|
|
|
40
36
|
className: "np-radio__text",
|
|
41
37
|
children: [label, secondary && /*#__PURE__*/jsx(Body, {
|
|
42
38
|
as: "span",
|
|
43
|
-
className: clsx({
|
|
44
|
-
secondary: !isModern
|
|
45
|
-
}),
|
|
46
39
|
children: secondary
|
|
47
40
|
})]
|
|
48
41
|
}), avatar && /*#__PURE__*/jsx("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.mjs","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Radio.mjs","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string | number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n 'radio-disabled': disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className=\"m-r-2 np-radio-button\">\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":";;;;;;AAcwB,SAAAA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC,UAAAA;AACW,CAAA,EAAA;AACd,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,IAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,EAAEH,SAAS;AACrB,MAAA,gBAAgB,EAAEH,QAAAA;KACnB,EACDC,SAAS,CACT;AAAAM,IAAAA,QAAA,eAEFC,IAAA,CAAA,OAAA,EAAA;MAAOP,SAAS,EAAEK,IAAI,CAAC;AAAEN,QAAAA,QAAAA;AAAU,OAAA,CAAE;AAACS,MAAAA,OAAO,EAAEV,EAAG;AAAAQ,MAAAA,QAAA,gBAChDF,GAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCF,GAAA,CAACK,WAAW,EAAA;AAACX,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI,UAAAA;SAC/C,CAAA;AAAA,OAAM,CACN,eAAAI,IAAA,CAACG,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,EAAEV,SAAS,GAAGW,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AACrEf,QAAAA,SAAS,EAAC,gBAAgB;AAAAM,QAAAA,QAAA,GAEzBT,KAAK,EACLK,SAAS,iBAAIE,GAAA,CAACM,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAL,UAAAA,QAAA,EAAEJ,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACN,EAACD,MAAM,iBAAIG,GAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,2BAA2B;AAAAM,QAAAA,QAAA,EAAEL,MAAAA;AAAM,OAAO,CAAC,CAAA;KACjE,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/radio/Radio.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/radio/Radio.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IACzF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,EAC5D,KAAK,EACL,EAAE,EACF,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,GAAG,UAAU,EACd,EAAE,UAAU,CAAC,CAAC,CAAC,+BA4Bf"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.63.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"rollup-preserve-directives": "^1.1.1",
|
|
94
94
|
"storybook": "^8.2.2",
|
|
95
95
|
"@transferwise/less-config": "3.1.0",
|
|
96
|
-
"@transferwise/neptune-css": "14.
|
|
96
|
+
"@transferwise/neptune-css": "14.15.0",
|
|
97
97
|
"@wise/components-theming": "1.6.0"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
@@ -2,13 +2,14 @@ import { action } from '@storybook/addon-actions';
|
|
|
2
2
|
import { Meta, StoryObj } from '@storybook/react';
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
|
|
5
|
-
import CheckboxButton
|
|
5
|
+
import CheckboxButton from './CheckboxButton';
|
|
6
6
|
|
|
7
7
|
export default {
|
|
8
8
|
component: CheckboxButton,
|
|
9
9
|
title: 'Actions/CheckboxButton',
|
|
10
10
|
tags: ['autodocs'],
|
|
11
11
|
args: {
|
|
12
|
+
disabled: false,
|
|
12
13
|
onBlur: action('blur'),
|
|
13
14
|
onClick: action('click'),
|
|
14
15
|
onFocus: action('focus'),
|
|
@@ -20,7 +21,6 @@ type Story = StoryObj<typeof CheckboxButton>;
|
|
|
20
21
|
export const Basic: Story = {
|
|
21
22
|
args: {
|
|
22
23
|
'aria-label': 'Toggle email updates',
|
|
23
|
-
disabled: false,
|
|
24
24
|
},
|
|
25
25
|
render: (args) => {
|
|
26
26
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
@@ -30,25 +30,22 @@ export const Basic: Story = {
|
|
|
30
30
|
},
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
const [indeterminate, setIndeterminate] = useState(true);
|
|
36
|
-
|
|
37
|
-
return (
|
|
38
|
-
<CheckboxButton
|
|
39
|
-
{...props}
|
|
40
|
-
checked={checked}
|
|
41
|
-
indeterminate={indeterminate}
|
|
42
|
-
onChange={() => setIndeterminate(!indeterminate)}
|
|
43
|
-
/>
|
|
44
|
-
);
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export const Indeterminate = () => {
|
|
48
|
-
const args = {
|
|
33
|
+
export const Indeterminate: Story = {
|
|
34
|
+
args: {
|
|
49
35
|
'aria-label': 'Group checkbox with indeterminate state',
|
|
50
|
-
disabled: false,
|
|
51
36
|
indeterminate: true,
|
|
52
|
-
}
|
|
53
|
-
|
|
37
|
+
},
|
|
38
|
+
render: (args) => {
|
|
39
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
40
|
+
const [indeterminate, setIndeterminate] = useState(true);
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<CheckboxButton
|
|
44
|
+
{...args}
|
|
45
|
+
checked
|
|
46
|
+
indeterminate={indeterminate}
|
|
47
|
+
onChange={() => setIndeterminate(!indeterminate)}
|
|
48
|
+
/>
|
|
49
|
+
);
|
|
50
|
+
},
|
|
54
51
|
};
|
package/src/radio/Radio.tsx
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { useTheme } from '@wise/components-theming';
|
|
2
1
|
import { clsx } from 'clsx';
|
|
3
2
|
|
|
4
3
|
import Body from '../body/Body';
|
|
@@ -22,20 +21,19 @@ export default function Radio<T extends string | number = ''>({
|
|
|
22
21
|
secondary,
|
|
23
22
|
...otherProps
|
|
24
23
|
}: RadioProps<T>) {
|
|
25
|
-
const { isModern } = useTheme();
|
|
26
24
|
return (
|
|
27
25
|
<div
|
|
28
26
|
className={clsx(
|
|
29
27
|
'radio np-radio',
|
|
30
28
|
{
|
|
31
29
|
'radio-lg': secondary,
|
|
32
|
-
disabled:
|
|
30
|
+
'radio-disabled': disabled,
|
|
33
31
|
},
|
|
34
32
|
className,
|
|
35
33
|
)}
|
|
36
34
|
>
|
|
37
35
|
<label className={clsx({ disabled })} htmlFor={id}>
|
|
38
|
-
<span className=
|
|
36
|
+
<span className="m-r-2 np-radio-button">
|
|
39
37
|
<RadioButton id={id} disabled={disabled} {...otherProps} />
|
|
40
38
|
</span>
|
|
41
39
|
<Body
|
|
@@ -44,11 +42,7 @@ export default function Radio<T extends string | number = ''>({
|
|
|
44
42
|
className="np-radio__text"
|
|
45
43
|
>
|
|
46
44
|
{label}
|
|
47
|
-
{secondary &&
|
|
48
|
-
<Body as="span" className={clsx({ secondary: !isModern })}>
|
|
49
|
-
{secondary}
|
|
50
|
-
</Body>
|
|
51
|
-
)}
|
|
45
|
+
{secondary && <Body as="span">{secondary}</Body>}
|
|
52
46
|
</Body>
|
|
53
47
|
{avatar && <span className="np-radio__avatar m-l-auto">{avatar}</span>}
|
|
54
48
|
</label>
|
|
@@ -2,6 +2,7 @@ import { StoryObj } from '@storybook/react';
|
|
|
2
2
|
import { userEvent, within } from '@storybook/test';
|
|
3
3
|
|
|
4
4
|
import TextareaWithDisplayFormat from './TextareaWithDisplayFormat';
|
|
5
|
+
import { Field } from '../field/Field';
|
|
5
6
|
|
|
6
7
|
export default {
|
|
7
8
|
component: TextareaWithDisplayFormat,
|
|
@@ -11,15 +12,19 @@ export default {
|
|
|
11
12
|
type Story = StoryObj<typeof TextareaWithDisplayFormat>;
|
|
12
13
|
|
|
13
14
|
export const Basic: Story = {
|
|
14
|
-
render: (
|
|
15
|
+
render: () => {
|
|
16
|
+
const label = 'Textarea with display format';
|
|
17
|
+
const id = label.replaceAll(' ', '-').toLowerCase();
|
|
18
|
+
|
|
15
19
|
return (
|
|
16
|
-
|
|
20
|
+
<Field id={id} label={label}>
|
|
17
21
|
<TextareaWithDisplayFormat
|
|
22
|
+
id={id}
|
|
18
23
|
value="0000"
|
|
19
24
|
displayPattern="**** - **** - ****"
|
|
20
25
|
onChange={console.log}
|
|
21
26
|
/>
|
|
22
|
-
|
|
27
|
+
</Field>
|
|
23
28
|
);
|
|
24
29
|
},
|
|
25
30
|
// intentionally use interactive typing (over init value via `value` prop)
|