@elliemae/ds-form-radio 3.3.0 → 3.3.1-rc.2
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/dist/cjs/ControlledRadio.js +5 -1
- package/dist/cjs/ControlledRadio.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +63 -15
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/utils/styleHelpers.js +28 -17
- package/dist/cjs/utils/styleHelpers.js.map +2 -2
- package/dist/esm/ControlledRadio.js +5 -2
- package/dist/esm/ControlledRadio.js.map +2 -2
- package/dist/esm/config/useValidateProps.js +0 -1
- package/dist/esm/config/useValidateProps.js.map +1 -1
- package/dist/esm/exported-related/data-test-ids.js +0 -1
- package/dist/esm/exported-related/data-test-ids.js.map +1 -1
- package/dist/esm/exported-related/index.js +0 -1
- package/dist/esm/exported-related/index.js.map +1 -1
- package/dist/esm/exported-related/theming.js +0 -1
- package/dist/esm/exported-related/theming.js.map +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +63 -16
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/utils/styleHelpers.js +28 -18
- package/dist/esm/utils/styleHelpers.js.map +2 -2
- package/package.json +4 -4
|
@@ -36,7 +36,8 @@ var import_useValidateProps = require("./config/useValidateProps");
|
|
|
36
36
|
const DSControlledRadio = (props) => {
|
|
37
37
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
38
38
|
(0, import_useValidateProps.useValidateProps)(props, import_react_desc_prop_types.propTypes);
|
|
39
|
-
const { checked, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;
|
|
39
|
+
const { checked, device, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;
|
|
40
|
+
console.log(device, "device");
|
|
40
41
|
const { id, disabled, readOnly, label, className, tabIndex, ...restGlobals } = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
|
|
41
42
|
const instanceUid = (0, import_react.useMemo)(() => id || (0, import_uid.uid)(5), [id]);
|
|
42
43
|
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
|
|
@@ -45,10 +46,12 @@ const DSControlledRadio = (props) => {
|
|
|
45
46
|
onChange(value, e);
|
|
46
47
|
}, [onChange, value]);
|
|
47
48
|
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, {
|
|
49
|
+
device,
|
|
48
50
|
"data-testid": "ds-radio-container",
|
|
49
51
|
className,
|
|
50
52
|
...xstyledProps
|
|
51
53
|
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledRadio, {
|
|
54
|
+
device,
|
|
52
55
|
checked,
|
|
53
56
|
hasError,
|
|
54
57
|
disabled,
|
|
@@ -63,6 +66,7 @@ const DSControlledRadio = (props) => {
|
|
|
63
66
|
disabled,
|
|
64
67
|
onChange: handleOnChange
|
|
65
68
|
})), label && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, {
|
|
69
|
+
device,
|
|
66
70
|
htmlFor: instanceUid,
|
|
67
71
|
disabled,
|
|
68
72
|
readOnly,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ControlledRadio.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles';\nimport { DSControlledRadioT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+D;AAC/D,0BAKO;AACP,iBAAoB;AAEpB,uCAA2C;AAC3C,oBAAwF;AACxF,mCAA4D;AAC5D,8BAAiC;AAEjC,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM,mBAAmB,sDAA6B,OAAO,yCAAY;AACzE,gDAAiB,OAAO,sCAAS;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles';\nimport { DSControlledRadioT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n const { checked, device, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;\n console.log(device, 'device');\n const { id, disabled, readOnly, label, className, tabIndex, ...restGlobals } =\n useGetGlobalAttributes<DSControlledRadioT.Props>(propsWithDefault);\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const handleOnChange = useCallback(\n (e: React.ChangeEvent) => {\n if (onChange && value) onChange(value, e);\n },\n [onChange, value],\n );\n\n return (\n <StyledContainer device={device} data-testid=\"ds-radio-container\" className={className} {...xstyledProps}>\n <StyledRadio device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n <StyledInput\n data-testid=\"ds-radio\"\n type=\"radio\"\n {...restGlobals}\n id={instanceUid}\n ref={innerRef}\n checked={checked}\n disabled={disabled}\n onChange={handleOnChange}\n />\n </StyledRadio>\n {label && (\n <StyledLabel\n device={device}\n htmlFor={instanceUid}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-radio-label\"\n wrapLabel={wrapLabel}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n\nDSControlledRadio.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledRadio.displayName = 'DSControlledRadio';\nconst DSControlledRadioWithSchema = describe(DSControlledRadio);\nDSControlledRadioWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledRadio, DSControlledRadioWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+D;AAC/D,0BAKO;AACP,iBAAoB;AAEpB,uCAA2C;AAC3C,oBAAwF;AACxF,mCAA4D;AAC5D,8BAAiC;AAEjC,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM,mBAAmB,sDAA6B,OAAO,yCAAY;AACzE,gDAAiB,OAAO,sCAAS;AACjC,QAAM,EAAE,SAAS,QAAQ,UAAU,UAAU,OAAO,WAAW,aAAa;AAC5E,UAAQ,IAAI,QAAQ,QAAQ;AAC5B,QAAM,EAAE,IAAI,UAAU,UAAU,OAAO,WAAW,aAAa,gBAC7D,gDAAiD,gBAAgB;AAEnE,QAAM,cAAc,0BAAQ,MAAM,MAAM,oBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AACpD,QAAM,eAAe,4CAAmB,gBAAgB;AAExD,QAAM,iBAAiB,8BACrB,CAAC,MAAyB;AACxB,QAAI,YAAY;AAAO,eAAS,OAAO,CAAC;AAAA,EAC1C,GACA,CAAC,UAAU,KAAK,CAClB;AAEA,SACE,mDAAC;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAqB;AAAA,IAAuB,GAAG;AAAA,KAC1F,mDAAC;AAAA,IAAY;AAAA,IAAgB;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACrF,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,MAAK;AAAA,IACJ,GAAG;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,GACZ,CACF,GACC,SACC,mDAAC;AAAA,IACC;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,KAEC,YAAY,mDAAC,qCAAiB,KAAM,IAAqB,mDAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,6 +41,7 @@ const propTypes = {
|
|
|
41
41
|
checked: import_ds_utilities.PropTypes.bool.description("Whether the radio is checked or not"),
|
|
42
42
|
hasError: import_ds_utilities.PropTypes.bool.description("Whether the radio has error or not."),
|
|
43
43
|
innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.object]).description("Radio input ref."),
|
|
44
|
-
wrapLabel: import_ds_utilities.PropTypes.bool.description("Whether to wrap or truncate the label")
|
|
44
|
+
wrapLabel: import_ds_utilities.PropTypes.bool.description("Whether to wrap or truncate the label"),
|
|
45
|
+
device: import_ds_utilities.PropTypes.string.description("Whether to use mobile styling")
|
|
45
46
|
};
|
|
46
47
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { ChangeEvent, MouseEvent } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes, GlobalAttributesT } from '@elliemae/ds-utilities';\nexport declare namespace DSControlledRadioT {\n export interface DefaultProps {\n checked: boolean;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n }\n\n export interface OptionalProps {\n value?: string;\n onChange?: (newValue: string, e: ChangeEvent | MouseEvent<HTMLLabelElement>) => void;\n label?: string;\n innerRef?: React.RefObject<HTMLInputElement>;\n }\n\n export interface Props extends DefaultProps, OptionalProps, GlobalAttributesT {}\n\n export interface StyledRadioT {\n checked?: boolean;\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean;\n wrapLabel: boolean;\n onClick?: React.MouseEventHandler<HTMLLabelElement>;\n }\n}\n\nexport const defaultProps: Partial<DSControlledRadioT.Props> = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Radio value'),\n onChange: PropTypes.func\n .description('Radio onchange callback')\n .signature('((newValue: string,e: React.ChangeEvent) => void)'),\n label: PropTypes.string.description(\n 'Radio Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n checked: PropTypes.bool.description('Whether the radio is checked or not'),\n hasError: PropTypes.bool.description('Whether the radio has error or not.'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Radio input ref.'),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA0F;
|
|
4
|
+
"sourcesContent": ["import React, { ChangeEvent, MouseEvent } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes, GlobalAttributesT } from '@elliemae/ds-utilities';\nexport declare namespace DSControlledRadioT {\n export interface DefaultProps {\n checked: boolean;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n }\n\n export interface OptionalProps {\n value?: string;\n onChange?: (newValue: string, e: ChangeEvent | MouseEvent<HTMLLabelElement>) => void;\n label?: string;\n innerRef?: React.RefObject<HTMLInputElement>;\n }\n\n export interface Props extends DefaultProps, OptionalProps, GlobalAttributesT {}\n\n export interface StyledRadioT {\n checked?: boolean;\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: 'mobile' | 'desktop';\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean;\n wrapLabel: boolean;\n onClick?: React.MouseEventHandler<HTMLLabelElement>;\n device?: 'mobile' | 'desktop';\n }\n}\n\nexport const defaultProps: Partial<DSControlledRadioT.Props> = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Radio value'),\n onChange: PropTypes.func\n .description('Radio onchange callback')\n .signature('((newValue: string,e: React.ChangeEvent) => void)'),\n label: PropTypes.string.description(\n 'Radio Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n checked: PropTypes.bool.description('Whether the radio is checked or not'),\n hasError: PropTypes.bool.description('Whether the radio has error or not.'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Radio input ref.'),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n device: PropTypes.string.description('Whether to use mobile styling'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA0F;AAoCnF,MAAM,eAAkD;AAAA,EAC7D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AACX;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,8BAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,8BAAU,KACjB,YAAY,yBAAyB,EACrC,UAAU,mDAAmD;AAAA,EAChE,OAAO,8BAAU,OAAO,YACtB,gGACF;AAAA,EACA,SAAS,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EAC1E,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAChG,WAAW,8BAAU,KAAK,YAAY,uCAAuC;AAAA,EAC7E,QAAQ,8BAAU,OAAO,YAAY,+BAA+B;AACtE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -36,30 +36,58 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
|
36
36
|
name: import_exported_related.DSRadioName,
|
|
37
37
|
slot: import_exported_related.DSRadioSlots.CONTAINER
|
|
38
38
|
})`
|
|
39
|
+
${({ device, theme }) => {
|
|
40
|
+
if (device === "mobile") {
|
|
41
|
+
return `
|
|
42
|
+
grid-template-columns: 24px auto;`;
|
|
43
|
+
}
|
|
44
|
+
if (device === void 0) {
|
|
45
|
+
return `
|
|
46
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
47
|
+
grid-template-columns: 24px auto;
|
|
48
|
+
}
|
|
49
|
+
grid-template-columns: ${theme.space.xs} auto;
|
|
50
|
+
`;
|
|
51
|
+
}
|
|
52
|
+
return `
|
|
53
|
+
grid-template-columns: ${theme.space.xs} auto;
|
|
54
|
+
`;
|
|
55
|
+
}}
|
|
39
56
|
display: inline-grid;
|
|
40
57
|
grid-template-rows: min-content;
|
|
41
|
-
grid-template-columns: ${({ theme }) => theme.space.xs} auto;
|
|
42
|
-
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
43
|
-
grid-template-columns: 24px auto;
|
|
44
|
-
}
|
|
45
58
|
align-items: center;
|
|
46
59
|
`;
|
|
47
60
|
const StyledRadio = (0, import_ds_system.styled)("span")`
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
61
|
+
${({ device, theme }) => {
|
|
62
|
+
if (device === "mobile") {
|
|
63
|
+
return `
|
|
64
|
+
width: 24px;
|
|
65
|
+
height: 24px;`;
|
|
53
66
|
}
|
|
67
|
+
if (device === void 0) {
|
|
68
|
+
return `
|
|
69
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
70
|
+
width: 24px;
|
|
71
|
+
height: 24px;
|
|
72
|
+
}
|
|
73
|
+
width: ${theme.space.xs};
|
|
74
|
+
height: ${theme.space.xs};
|
|
75
|
+
`;
|
|
76
|
+
}
|
|
77
|
+
return `
|
|
78
|
+
width: ${theme.space.xs};
|
|
79
|
+
height: ${theme.space.xs};
|
|
80
|
+
`;
|
|
81
|
+
}}
|
|
54
82
|
border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
|
|
55
83
|
border-radius: 50px;
|
|
56
84
|
position: relative;
|
|
57
85
|
background: ${({ theme, disabled }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled)};
|
|
58
|
-
${({ theme, checked, disabled, readOnly, hasError }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError)}
|
|
86
|
+
${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, false, device)}
|
|
59
87
|
&:focus-within {
|
|
60
88
|
${({ theme, hasError, disabled }) => !disabled ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]} ` : void 0};
|
|
61
89
|
&:hover {
|
|
62
|
-
${({ theme, checked, disabled, readOnly, hasError }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true)}
|
|
90
|
+
${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true, device)}
|
|
63
91
|
}
|
|
64
92
|
}
|
|
65
93
|
&:hover {
|
|
@@ -96,11 +124,31 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
|
|
|
96
124
|
color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
97
125
|
font-size: 13px;
|
|
98
126
|
line-height: 13px;
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
127
|
+
${({ device, theme, wrapLabel }) => {
|
|
128
|
+
if (device === "mobile") {
|
|
129
|
+
return `
|
|
130
|
+
font-size: 16px;
|
|
131
|
+
line-height: 16px;
|
|
132
|
+
${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
133
|
+
`;
|
|
134
|
+
}
|
|
135
|
+
if (device === void 0) {
|
|
136
|
+
return `
|
|
137
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
138
|
+
font-size: 16px;
|
|
139
|
+
line-height: 16px;
|
|
140
|
+
${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
font-size: 13px;
|
|
144
|
+
line-height: 13px;
|
|
145
|
+
`;
|
|
103
146
|
}
|
|
147
|
+
return `
|
|
148
|
+
font-size: 13px;
|
|
149
|
+
line-height: 13px;
|
|
150
|
+
`;
|
|
151
|
+
}}
|
|
104
152
|
display: inherit;
|
|
105
153
|
|
|
106
154
|
${({ disabled }) => disabled ? `&:hover {
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledRadioT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSRadioName, DSRadioSlots } from './exported-related';\nexport const StyledContainer = styled('div', {\n name: DSRadioName,\n slot: DSRadioSlots.CONTAINER,\n})
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAE5B,0BAAuD;AACvD,8BAA0C;AACnC,MAAM,kBAAkB,6BAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,qCAAa;AACrB,CAAC;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledRadioT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSRadioName, DSRadioSlots } from './exported-related';\nexport const StyledContainer = styled('div', {\n name: DSRadioName,\n slot: DSRadioSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n grid-template-columns: 24px auto;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }\n return `\n grid-template-columns: ${theme.space.xs} auto;\n`;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: center;\n`;\n\nexport const StyledRadio = styled('span')<DSControlledRadioT.StyledRadioT>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width: 24px;\n height: 24px;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }\n return `\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }}\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 50px;\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n &:focus-within {\n ${({ theme, hasError, disabled }) =>\n !disabled\n ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${\n hasError ? theme.colors.danger[900] : theme.colors.brand[700]\n } `\n : undefined};\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n }\n }\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n ${({ theme, hasError, disabled, readOnly }) =>\n !hasError && !disabled && !readOnly ? ` border: 1px solid ${theme.colors.brand[600]}` : undefined};\n }\n`;\n\nconst radioStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSRadioName,\n slot: DSRadioSlots.INPUT,\n})`\n ${radioStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSRadioName,\n slot: DSRadioSlots.LABEL,\n})<DSControlledRadioT.StyledLabelT>`\n ${({ wrapLabel, theme }) => (wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`)};\n\n color: ${({ theme, disabled, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 13px;\n ${({ device, theme, wrapLabel }) => {\n if (device === 'mobile') {\n return ` \n font-size: 16px;\n line-height: 16px;\n ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 16px;\n line-height: 16px;\n ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n }\n\n font-size: 13px;\n line-height: 13px;\n `;\n }\n return `\n font-size: 13px;\n line-height: 13px;\n `;\n }}\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAE5B,0BAAuD;AACvD,8BAA0C;AACnC,MAAM,kBAAkB,6BAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,qCAAa;AACrB,CAAC;AAAA,IACG,CAAC,EAAE,QAAQ,YAAY;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA,EAET;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,2BACc,MAAM,YAAY;AAAA;AAAA;AAAA,+BAGd,MAAM,MAAM;AAAA;AAAA,EAEvC;AACA,SAAO;AAAA,6BACkB,MAAM,MAAM;AAAA;AAEvC;AAAA;AAAA;AAAA;AAAA;AAMK,MAAM,cAAc,6BAAO,MAAM;AAAA,IACpC,CAAC,EAAE,QAAQ,YAAY;AACvB,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,iBAI9B,MAAM,MAAM;AAAA,kBACX,MAAM,MAAM;AAAA;AAAA,EAE1B;AACA,SAAO;AAAA,eACI,MAAM,MAAM;AAAA,gBACX,MAAM,MAAM;AAAA;AAE1B;AAAA,sBACoB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,eAAe,+CAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,aACjD,yCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MAAM;AAAA;AAAA,MAEzE,CAAC,EAAE,OAAO,UAAU,eACpB,CAAC,WACG,qBAAqB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,6BAC5E,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,UAE3D;AAAA;AAAA,QAEF,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,aACjD,yCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,kBAIhE,CAAC,EAAE,OAAO,eAAgB,CAAC,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA,MAC5E,CAAC,EAAE,OAAO,UAAU,UAAU,eAC9B,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,uBAAuB,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAI/F,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYb,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,qCAAa;AACrB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,qCAAa;AACrB,CAAC;AAAA,IACG,CAAC,EAAE,WAAW,YAAa,YAAY,8BAA8B,iBAAiB,MAAM,MAAM;AAAA;AAAA,WAE3F,CAAC,EAAE,OAAO,UAAU,eAC3B,YAAY,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAGxE,CAAC,EAAE,QAAQ,OAAO,gBAAgB;AAClC,MAAI,WAAW,UAAU;AACvB,WAAO;AAAA;AAAA;AAAA,QAGL,YAAY,+BAA+B,iBAAiB,MAAM,MAAM;AAAA;AAAA,EAE5E;AACA,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,6BACgB,MAAM,YAAY;AAAA;AAAA;AAAA,YAGnC,YAAY,+BAA+B,iBAAiB,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMhF;AACA,SAAO;AAAA;AAAA;AAAA;AAIT;AAAA;AAAA;AAAA,IAGE,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,6BAAO,MAAM;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,24 +36,35 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
|
|
|
36
36
|
}
|
|
37
37
|
return colors.brand[600];
|
|
38
38
|
};
|
|
39
|
-
const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
39
|
+
const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
|
|
40
|
+
const desktopCheckmark = `
|
|
41
|
+
content:"";
|
|
42
|
+
width: ${theme.space.xxs};
|
|
43
|
+
height: ${theme.space.xxs};
|
|
44
|
+
|
|
45
|
+
border-radius:50%;
|
|
46
|
+
display:inline-block;
|
|
47
|
+
margin:3px;
|
|
48
|
+
background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
49
|
+
`;
|
|
50
|
+
const normalCheckmark = `
|
|
51
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
52
|
+
width: 12px;
|
|
53
|
+
height: 12px;
|
|
54
|
+
margin: 5px;
|
|
55
55
|
}
|
|
56
|
-
|
|
56
|
+
${desktopCheckmark}
|
|
57
|
+
`;
|
|
58
|
+
const mobileCheckmark = `
|
|
59
|
+
${desktopCheckmark}
|
|
60
|
+
width: 12px;
|
|
61
|
+
height: 12px;
|
|
62
|
+
margin: 5px;
|
|
63
|
+
`;
|
|
64
|
+
if (checked) {
|
|
65
|
+
return `&:before {
|
|
66
|
+
${device === void 0 ? normalCheckmark : device === "mobile" ? mobileCheckmark : desktopCheckmark}
|
|
67
|
+
}`;
|
|
57
68
|
}
|
|
58
69
|
return "";
|
|
59
70
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean,\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n\n return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked?: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n): string => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,uBAAuB,CAClC,EAAE,UACF,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean,\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n\n return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked?: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device = undefined,\n): string => {\n const desktopCheckmark = `\n content:\"\";\n width: ${theme.space.xxs};\n height: ${theme.space.xxs};\n\n border-radius:50%;\n display:inline-block;\n margin:3px;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n`;\n\n const normalCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 12px;\n height: 12px;\n margin: 5px;\n }\n ${desktopCheckmark}\n`;\n const mobileCheckmark = `\n ${desktopCheckmark}\n width: 12px;\n height: 12px;\n margin: 5px;\n `;\n\n if (checked) {\n return `&:before {\n ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n }`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,uBAAuB,CAClC,EAAE,UACF,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAAS,WACE;AACX,QAAM,mBAAmB;AAAA;AAAA,WAEhB,MAAM,MAAM;AAAA,YACX,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKR,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAG3F,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,MAKrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAMJ,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,UAAiB,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
import * as React from "react";
|
|
3
2
|
import React2, { useCallback, useMemo } from "react";
|
|
4
3
|
import {
|
|
@@ -15,7 +14,8 @@ import { useValidateProps } from "./config/useValidateProps";
|
|
|
15
14
|
const DSControlledRadio = (props) => {
|
|
16
15
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
17
16
|
useValidateProps(props, propTypes);
|
|
18
|
-
const { checked, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;
|
|
17
|
+
const { checked, device, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;
|
|
18
|
+
console.log(device, "device");
|
|
19
19
|
const { id, disabled, readOnly, label, className, tabIndex, ...restGlobals } = useGetGlobalAttributes(propsWithDefault);
|
|
20
20
|
const instanceUid = useMemo(() => id || uid(5), [id]);
|
|
21
21
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
@@ -24,10 +24,12 @@ const DSControlledRadio = (props) => {
|
|
|
24
24
|
onChange(value, e);
|
|
25
25
|
}, [onChange, value]);
|
|
26
26
|
return /* @__PURE__ */ React2.createElement(StyledContainer, {
|
|
27
|
+
device,
|
|
27
28
|
"data-testid": "ds-radio-container",
|
|
28
29
|
className,
|
|
29
30
|
...xstyledProps
|
|
30
31
|
}, /* @__PURE__ */ React2.createElement(StyledRadio, {
|
|
32
|
+
device,
|
|
31
33
|
checked,
|
|
32
34
|
hasError,
|
|
33
35
|
disabled,
|
|
@@ -42,6 +44,7 @@ const DSControlledRadio = (props) => {
|
|
|
42
44
|
disabled,
|
|
43
45
|
onChange: handleOnChange
|
|
44
46
|
})), label && /* @__PURE__ */ React2.createElement(StyledLabel, {
|
|
47
|
+
device,
|
|
45
48
|
htmlFor: instanceUid,
|
|
46
49
|
disabled,
|
|
47
50
|
readOnly,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledRadio.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles';\nimport { DSControlledRadioT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, WeakValidationMap } from 'react';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledRadio } from './styles';\nimport { DSControlledRadioT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledRadio: React.ComponentType<DSControlledRadioT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n const { checked, device, hasError, innerRef, value, wrapLabel, onChange } = propsWithDefault;\n console.log(device, 'device');\n const { id, disabled, readOnly, label, className, tabIndex, ...restGlobals } =\n useGetGlobalAttributes<DSControlledRadioT.Props>(propsWithDefault);\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const handleOnChange = useCallback(\n (e: React.ChangeEvent) => {\n if (onChange && value) onChange(value, e);\n },\n [onChange, value],\n );\n\n return (\n <StyledContainer device={device} data-testid=\"ds-radio-container\" className={className} {...xstyledProps}>\n <StyledRadio device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n <StyledInput\n data-testid=\"ds-radio\"\n type=\"radio\"\n {...restGlobals}\n id={instanceUid}\n ref={innerRef}\n checked={checked}\n disabled={disabled}\n onChange={handleOnChange}\n />\n </StyledRadio>\n {label && (\n <StyledLabel\n device={device}\n htmlFor={instanceUid}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-radio-label\"\n wrapLabel={wrapLabel}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n\nDSControlledRadio.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledRadio.displayName = 'DSControlledRadio';\nconst DSControlledRadioWithSchema = describe(DSControlledRadio);\nDSControlledRadioWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledRadio, DSControlledRadioWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAEA;AACA;AACA;AACA;AAEA,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,mBAAiB,OAAO,SAAS;AACjC,QAAM,EAAE,SAAS,QAAQ,UAAU,UAAU,OAAO,WAAW,aAAa;AAC5E,UAAQ,IAAI,QAAQ,QAAQ;AAC5B,QAAM,EAAE,IAAI,UAAU,UAAU,OAAO,WAAW,aAAa,gBAC7D,uBAAiD,gBAAgB;AAEnE,QAAM,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AACpD,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,iBAAiB,YACrB,CAAC,MAAyB;AACxB,QAAI,YAAY;AAAO,eAAS,OAAO,CAAC;AAAA,EAC1C,GACA,CAAC,UAAU,KAAK,CAClB;AAEA,SACE,qCAAC;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAqB;AAAA,IAAuB,GAAG;AAAA,KAC1F,qCAAC;AAAA,IAAY;AAAA,IAAgB;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACrF,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,MAAK;AAAA,IACJ,GAAG;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,GACZ,CACF,GACC,SACC,qCAAC;AAAA,IACC;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,KAEC,YAAY,qCAAC,uBAAiB,KAAM,IAAqB,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSControlledRadioT } from '../react-desc-prop-types';\n\nconst throwError = (message: string): void => {\n throw new Error(\n `DSControlledRadio:: ${message}\n `,\n );\n};\n\nexport const useValidateProps = (props: DSControlledRadioT.Props, propTypes: DSControlledRadioT.Props): void => {\n useValidateTypescriptPropTypes(props, propTypes);\n if (typeof props.label === 'undefined' && typeof props['aria-label'] === 'undefined') {\n throwError(`Please provide a label or ariaLabel property to use this component.`);\n }\n};\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AAGA,MAAM,aAAa,CAAC,YAA0B;AAC5C,QAAM,IAAI,MACR,uBAAuB;AAAA,GAEzB;AACF;AAEO,MAAM,mBAAmB,CAAC,OAAiC,cAA8C;AAC9G,iCAA+B,OAAO,SAAS;AAC/C,MAAI,OAAO,MAAM,UAAU,eAAe,OAAO,MAAM,kBAAkB,aAAa;AACpF,eAAW,qEAAqE;AAAA,EAClF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/data-test-ids.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSRadioDataTestIds = {\n CONTAINER: 'ds-radio-container',\n INPUT: 'ds-radio',\n};\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids';\nexport * from './theming';\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSRadioName = 'DS-Radio';\n\nexport const DSRadioSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n};\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,cAAc;AAEpB,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSControlledRadio, DSControlledRadioWithSchema } from './ControlledRadio';\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
import * as React from "react";
|
|
3
2
|
import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
|
|
4
3
|
const defaultProps = {
|
|
@@ -15,7 +14,8 @@ const propTypes = {
|
|
|
15
14
|
checked: PropTypes.bool.description("Whether the radio is checked or not"),
|
|
16
15
|
hasError: PropTypes.bool.description("Whether the radio has error or not."),
|
|
17
16
|
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Radio input ref."),
|
|
18
|
-
wrapLabel: PropTypes.bool.description("Whether to wrap or truncate the label")
|
|
17
|
+
wrapLabel: PropTypes.bool.description("Whether to wrap or truncate the label"),
|
|
18
|
+
device: PropTypes.string.description("Whether to use mobile styling")
|
|
19
19
|
};
|
|
20
20
|
export {
|
|
21
21
|
defaultProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { ChangeEvent, MouseEvent } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes, GlobalAttributesT } from '@elliemae/ds-utilities';\nexport declare namespace DSControlledRadioT {\n export interface DefaultProps {\n checked: boolean;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n }\n\n export interface OptionalProps {\n value?: string;\n onChange?: (newValue: string, e: ChangeEvent | MouseEvent<HTMLLabelElement>) => void;\n label?: string;\n innerRef?: React.RefObject<HTMLInputElement>;\n }\n\n export interface Props extends DefaultProps, OptionalProps, GlobalAttributesT {}\n\n export interface StyledRadioT {\n checked?: boolean;\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean;\n wrapLabel: boolean;\n onClick?: React.MouseEventHandler<HTMLLabelElement>;\n }\n}\n\nexport const defaultProps: Partial<DSControlledRadioT.Props> = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Radio value'),\n onChange: PropTypes.func\n .description('Radio onchange callback')\n .signature('((newValue: string,e: React.ChangeEvent) => void)'),\n label: PropTypes.string.description(\n 'Radio Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n checked: PropTypes.bool.description('Whether the radio is checked or not'),\n hasError: PropTypes.bool.description('Whether the radio has error or not.'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Radio input ref.'),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n};\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { ChangeEvent, MouseEvent } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes, GlobalAttributesT } from '@elliemae/ds-utilities';\nexport declare namespace DSControlledRadioT {\n export interface DefaultProps {\n checked: boolean;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n }\n\n export interface OptionalProps {\n value?: string;\n onChange?: (newValue: string, e: ChangeEvent | MouseEvent<HTMLLabelElement>) => void;\n label?: string;\n innerRef?: React.RefObject<HTMLInputElement>;\n }\n\n export interface Props extends DefaultProps, OptionalProps, GlobalAttributesT {}\n\n export interface StyledRadioT {\n checked?: boolean;\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: 'mobile' | 'desktop';\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean;\n wrapLabel: boolean;\n onClick?: React.MouseEventHandler<HTMLLabelElement>;\n device?: 'mobile' | 'desktop';\n }\n}\n\nexport const defaultProps: Partial<DSControlledRadioT.Props> = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Radio value'),\n onChange: PropTypes.func\n .description('Radio onchange callback')\n .signature('((newValue: string,e: React.ChangeEvent) => void)'),\n label: PropTypes.string.description(\n 'Radio Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n checked: PropTypes.bool.description('Whether the radio is checked or not'),\n hasError: PropTypes.bool.description('Whether the radio has error or not.'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Radio input ref.'),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n device: PropTypes.string.description('Whether to use mobile styling'),\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AAoCO,MAAM,eAAkD;AAAA,EAC7D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AACX;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,UAAU,KACjB,YAAY,yBAAyB,EACrC,UAAU,mDAAmD;AAAA,EAChE,OAAO,UAAU,OAAO,YACtB,gGACF;AAAA,EACA,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC1E,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAChG,WAAW,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAC7E,QAAQ,UAAU,OAAO,YAAY,+BAA+B;AACtE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
import * as React from "react";
|
|
3
2
|
import { styled, css } from "@elliemae/ds-system";
|
|
4
3
|
import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers";
|
|
@@ -7,30 +6,58 @@ const StyledContainer = styled("div", {
|
|
|
7
6
|
name: DSRadioName,
|
|
8
7
|
slot: DSRadioSlots.CONTAINER
|
|
9
8
|
})`
|
|
9
|
+
${({ device, theme }) => {
|
|
10
|
+
if (device === "mobile") {
|
|
11
|
+
return `
|
|
12
|
+
grid-template-columns: 24px auto;`;
|
|
13
|
+
}
|
|
14
|
+
if (device === void 0) {
|
|
15
|
+
return `
|
|
16
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
17
|
+
grid-template-columns: 24px auto;
|
|
18
|
+
}
|
|
19
|
+
grid-template-columns: ${theme.space.xs} auto;
|
|
20
|
+
`;
|
|
21
|
+
}
|
|
22
|
+
return `
|
|
23
|
+
grid-template-columns: ${theme.space.xs} auto;
|
|
24
|
+
`;
|
|
25
|
+
}}
|
|
10
26
|
display: inline-grid;
|
|
11
27
|
grid-template-rows: min-content;
|
|
12
|
-
grid-template-columns: ${({ theme }) => theme.space.xs} auto;
|
|
13
|
-
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
14
|
-
grid-template-columns: 24px auto;
|
|
15
|
-
}
|
|
16
28
|
align-items: center;
|
|
17
29
|
`;
|
|
18
30
|
const StyledRadio = styled("span")`
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
31
|
+
${({ device, theme }) => {
|
|
32
|
+
if (device === "mobile") {
|
|
33
|
+
return `
|
|
34
|
+
width: 24px;
|
|
35
|
+
height: 24px;`;
|
|
24
36
|
}
|
|
37
|
+
if (device === void 0) {
|
|
38
|
+
return `
|
|
39
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
40
|
+
width: 24px;
|
|
41
|
+
height: 24px;
|
|
42
|
+
}
|
|
43
|
+
width: ${theme.space.xs};
|
|
44
|
+
height: ${theme.space.xs};
|
|
45
|
+
`;
|
|
46
|
+
}
|
|
47
|
+
return `
|
|
48
|
+
width: ${theme.space.xs};
|
|
49
|
+
height: ${theme.space.xs};
|
|
50
|
+
`;
|
|
51
|
+
}}
|
|
25
52
|
border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
|
|
26
53
|
border-radius: 50px;
|
|
27
54
|
position: relative;
|
|
28
55
|
background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};
|
|
29
|
-
${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}
|
|
56
|
+
${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}
|
|
30
57
|
&:focus-within {
|
|
31
58
|
${({ theme, hasError, disabled }) => !disabled ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]} ` : void 0};
|
|
32
59
|
&:hover {
|
|
33
|
-
${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}
|
|
60
|
+
${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}
|
|
34
61
|
}
|
|
35
62
|
}
|
|
36
63
|
&:hover {
|
|
@@ -67,11 +94,31 @@ const StyledLabel = styled("label", {
|
|
|
67
94
|
color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
68
95
|
font-size: 13px;
|
|
69
96
|
line-height: 13px;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
97
|
+
${({ device, theme, wrapLabel }) => {
|
|
98
|
+
if (device === "mobile") {
|
|
99
|
+
return `
|
|
100
|
+
font-size: 16px;
|
|
101
|
+
line-height: 16px;
|
|
102
|
+
${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
103
|
+
`;
|
|
104
|
+
}
|
|
105
|
+
if (device === void 0) {
|
|
106
|
+
return `
|
|
107
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
108
|
+
font-size: 16px;
|
|
109
|
+
line-height: 16px;
|
|
110
|
+
${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
font-size: 13px;
|
|
114
|
+
line-height: 13px;
|
|
115
|
+
`;
|
|
74
116
|
}
|
|
117
|
+
return `
|
|
118
|
+
font-size: 13px;
|
|
119
|
+
line-height: 13px;
|
|
120
|
+
`;
|
|
121
|
+
}}
|
|
75
122
|
display: inherit;
|
|
76
123
|
|
|
77
124
|
${({ disabled }) => disabled ? `&:hover {
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledRadioT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSRadioName, DSRadioSlots } from './exported-related';\nexport const StyledContainer = styled('div', {\n name: DSRadioName,\n slot: DSRadioSlots.CONTAINER,\n})
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledRadioT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSRadioName, DSRadioSlots } from './exported-related';\nexport const StyledContainer = styled('div', {\n name: DSRadioName,\n slot: DSRadioSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n grid-template-columns: 24px auto;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }\n return `\n grid-template-columns: ${theme.space.xs} auto;\n`;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: center;\n`;\n\nexport const StyledRadio = styled('span')<DSControlledRadioT.StyledRadioT>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width: 24px;\n height: 24px;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }\n return `\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }}\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 50px;\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n &:focus-within {\n ${({ theme, hasError, disabled }) =>\n !disabled\n ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${\n hasError ? theme.colors.danger[900] : theme.colors.brand[700]\n } `\n : undefined};\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n }\n }\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? theme.colors.brand[200] : undefined)};\n ${({ theme, hasError, disabled, readOnly }) =>\n !hasError && !disabled && !readOnly ? ` border: 1px solid ${theme.colors.brand[600]}` : undefined};\n }\n`;\n\nconst radioStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSRadioName,\n slot: DSRadioSlots.INPUT,\n})`\n ${radioStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSRadioName,\n slot: DSRadioSlots.LABEL,\n})<DSControlledRadioT.StyledLabelT>`\n ${({ wrapLabel, theme }) => (wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`)};\n\n color: ${({ theme, disabled, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 13px;\n ${({ device, theme, wrapLabel }) => {\n if (device === 'mobile') {\n return ` \n font-size: 16px;\n line-height: 16px;\n ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 16px;\n line-height: 16px;\n ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n }\n\n font-size: 13px;\n line-height: 13px;\n `;\n }\n return `\n font-size: 13px;\n line-height: 13px;\n `;\n }}\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
import * as React from "react";
|
|
3
2
|
const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnly, hasError) => {
|
|
4
3
|
if (hasError) {
|
|
@@ -9,24 +8,35 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
|
|
|
9
8
|
}
|
|
10
9
|
return colors.brand[600];
|
|
11
10
|
};
|
|
12
|
-
const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
11
|
+
const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
|
|
12
|
+
const desktopCheckmark = `
|
|
13
|
+
content:"";
|
|
14
|
+
width: ${theme.space.xxs};
|
|
15
|
+
height: ${theme.space.xxs};
|
|
16
|
+
|
|
17
|
+
border-radius:50%;
|
|
18
|
+
display:inline-block;
|
|
19
|
+
margin:3px;
|
|
20
|
+
background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
21
|
+
`;
|
|
22
|
+
const normalCheckmark = `
|
|
23
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
24
|
+
width: 12px;
|
|
25
|
+
height: 12px;
|
|
26
|
+
margin: 5px;
|
|
28
27
|
}
|
|
29
|
-
|
|
28
|
+
${desktopCheckmark}
|
|
29
|
+
`;
|
|
30
|
+
const mobileCheckmark = `
|
|
31
|
+
${desktopCheckmark}
|
|
32
|
+
width: 12px;
|
|
33
|
+
height: 12px;
|
|
34
|
+
margin: 5px;
|
|
35
|
+
`;
|
|
36
|
+
if (checked) {
|
|
37
|
+
return `&:before {
|
|
38
|
+
${device === void 0 ? normalCheckmark : device === "mobile" ? mobileCheckmark : desktopCheckmark}
|
|
39
|
+
}`;
|
|
30
40
|
}
|
|
31
41
|
return "";
|
|
32
42
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean,\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n\n return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked?: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n): string => {\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean,\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n\n return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked?: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device = undefined,\n): string => {\n const desktopCheckmark = `\n content:\"\";\n width: ${theme.space.xxs};\n height: ${theme.space.xxs};\n\n border-radius:50%;\n display:inline-block;\n margin:3px;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n`;\n\n const normalCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 12px;\n height: 12px;\n margin: 5px;\n }\n ${desktopCheckmark}\n`;\n const mobileCheckmark = `\n ${desktopCheckmark}\n width: 12px;\n height: 12px;\n margin: 5px;\n `;\n\n if (checked) {\n return `&:before {\n ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n }`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n return colors.neutral['000'];\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACGO,MAAM,uBAAuB,CAClC,EAAE,UACF,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAAS,WACE;AACX,QAAM,mBAAmB;AAAA;AAAA,WAEhB,MAAM,MAAM;AAAA,YACX,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKR,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAG3F,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,MAKrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAMJ,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,UAAiB,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-radio",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.1-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Radio",
|
|
6
6
|
"files": [
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-system": "3.3.
|
|
39
|
-
"@elliemae/ds-truncated-tooltip-text": "3.3.
|
|
40
|
-
"@elliemae/ds-utilities": "3.3.
|
|
38
|
+
"@elliemae/ds-system": "3.3.1-rc.2",
|
|
39
|
+
"@elliemae/ds-truncated-tooltip-text": "3.3.1-rc.2",
|
|
40
|
+
"@elliemae/ds-utilities": "3.3.1-rc.2"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@elliemae/pui-theme": "~2.6.0",
|