@elliemae/ds-form-checkbox 3.10.2 → 3.10.4
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/react-desc-prop-types.js +1 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +19 -11
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/utils/styleHelpers.js +1 -1
- package/dist/cjs/utils/styleHelpers.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +19 -11
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/utils/styleHelpers.js +1 -1
- package/dist/esm/utils/styleHelpers.js.map +2 -2
- package/package.json +4 -4
|
@@ -44,7 +44,7 @@ const defaultProps = {
|
|
|
44
44
|
const propTypes = {
|
|
45
45
|
...import_ds_utilities.globalAttributesPropTypes,
|
|
46
46
|
...import_ds_utilities.xstyledPropTypes,
|
|
47
|
-
checked: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.bool, import_ds_utilities.PropTypes.string]).description("Wheter the checkbox is set as bool or mixed").defaultValue(false)
|
|
47
|
+
checked: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.bool, import_ds_utilities.PropTypes.string]).description("Wheter the checkbox is set as bool or mixed").isRequiredIf((props) => !props.disabled && !props.readOnly).defaultValue(false),
|
|
48
48
|
onChange: import_ds_utilities.PropTypes.func.description("function executed when the checkbox changes state").signature("(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )").isRequiredIf((props) => !props.disabled && !props.readOnly),
|
|
49
49
|
"aria-controls": import_ds_utilities.PropTypes.string.description('a11y required attribute when "mixed" state is to be supported').isRequiredIf(
|
|
50
50
|
(props) => props.checked === "mixed" && typeof props.ariaControls !== "string"
|
|
@@ -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 from 'react';\nimport { GlobalAttributesT, PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { DEVICE } from './constants/device';\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = typeof DEVICE[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown: React.KeyboardEventHandler;\n innerRef?: React.RefObject<HTMLInputElement>;\n 'data-testid'?: string;\n device?: Devices;\n }\n\n export interface LegacyAriaProps {\n ariaControls?: string;\n ariaLabel?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .defaultValue(false)
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA0F;AAC1F,oBAAuB;AA+DhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,KAAK
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { GlobalAttributesT, PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { DEVICE } from './constants/device';\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = typeof DEVICE[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown: React.KeyboardEventHandler;\n innerRef?: React.RefObject<HTMLInputElement>;\n 'data-testid'?: string;\n device?: Devices;\n }\n\n export interface LegacyAriaProps {\n ariaControls?: string;\n ariaLabel?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n .defaultValue(false),\n onChange: PropTypes.func\n .description('function executed when the checkbox changes state')\n .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n 'aria-controls': PropTypes.string\n .description('a11y required attribute when \"mixed\" state is to be supported')\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n ),\n ariaControls: PropTypes.string\n .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n ),\n label: PropTypes.string.description(\n 'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n hasError: PropTypes.bool.description('Whether the checkbox has error or not.').defaultValue(false),\n disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n device: PropTypes.oneOf(Object.values(DEVICE)).description(\n 'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n ),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA0F;AAC1F,oBAAuB;AA+DhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,8BAAU,KACjB,YAAY,mDAAmD,EAC/D,UAAU,+DAA+D,EACzE,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ;AAAA,EAC1F,iBAAiB,8BAAU,OACxB,YAAY,+DAA+D,EAC3E;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB;AAAA,EACrG;AAAA,EACF,cAAc,8BAAU,OACrB,YAAY,8EAA8E,EAC1F,WAAW,EAAE,SAAS,OAAO,SAAS,8BAA8B,CAAC,EACrE;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,qBAAqB;AAAA,EACzG;AAAA,EACF,OAAO,8BAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,8BAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,KAAK;AAAA,EACjG,UAAU,8BAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,UAAU,8BAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,8BAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,8BAAU,MAAM,OAAO,OAAO,oBAAM,CAAC,EAAE;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AACrG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -71,7 +71,7 @@ const StyledCheckBox = (0, import_ds_system.styled)("span")`
|
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
&:hover {
|
|
74
|
-
background: ${({ theme, checked, disabled }) => !disabled
|
|
74
|
+
background: ${({ theme, checked, disabled }) => !disabled ? theme.colors.brand[200] : void 0};
|
|
75
75
|
${({ theme, hasError, disabled, readOnly }) => !hasError && !disabled && !readOnly ? ` border: 1px solid ${theme.colors.brand[600]}` : void 0};
|
|
76
76
|
}
|
|
77
77
|
`;
|
|
@@ -108,35 +108,43 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
|
|
|
108
108
|
name: import_exported_related.DSCheckboxName,
|
|
109
109
|
slot: import_exported_related.DSCheckboxSlots.LABEL
|
|
110
110
|
})`
|
|
111
|
-
|
|
111
|
+
padding-top: 2px;
|
|
112
|
+
${({ wrapLabel, theme }) => wrapLabel ? `
|
|
113
|
+
overflow-wrap: break-word;
|
|
114
|
+
white-space: pre-wrap;
|
|
115
|
+
word-break: break-word;
|
|
116
|
+
padding: 2px 0px 4px 8px;
|
|
117
|
+
` : `padding-left: ${theme.space.xxs}`};
|
|
112
118
|
|
|
113
119
|
color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
114
120
|
font-size: 13px;
|
|
115
|
-
line-height:
|
|
121
|
+
line-height: 1.1;
|
|
116
122
|
|
|
117
123
|
${({ device, theme, wrapLabel }) => {
|
|
118
124
|
if (device === "mobile") {
|
|
119
|
-
return `
|
|
125
|
+
return `
|
|
126
|
+
padding-top: 5px;
|
|
120
127
|
font-size: 16px;
|
|
121
|
-
line-height:
|
|
122
|
-
${wrapLabel ? `padding:
|
|
128
|
+
line-height: 1.2;
|
|
129
|
+
${wrapLabel ? `padding: 5px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
123
130
|
`;
|
|
124
131
|
}
|
|
125
132
|
if (device === void 0) {
|
|
126
133
|
return `
|
|
127
134
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
135
|
+
padding-top: 5px;
|
|
128
136
|
font-size: 16px;
|
|
129
|
-
line-height:
|
|
130
|
-
${wrapLabel ? `padding:
|
|
137
|
+
line-height: 1.2;
|
|
138
|
+
${wrapLabel ? `padding: 5px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
131
139
|
}
|
|
132
140
|
|
|
133
141
|
font-size: 13px;
|
|
134
|
-
line-height:
|
|
142
|
+
line-height: 1.1;
|
|
135
143
|
`;
|
|
136
144
|
}
|
|
137
145
|
return `
|
|
138
146
|
font-size: 13px;
|
|
139
|
-
line-height:
|
|
147
|
+
line-height: 1.1;
|
|
140
148
|
`;
|
|
141
149
|
}}
|
|
142
150
|
|
|
@@ -172,6 +180,6 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
|
172
180
|
}}
|
|
173
181
|
display: inline-grid;
|
|
174
182
|
grid-template-rows: min-content;
|
|
175
|
-
align-items:
|
|
183
|
+
align-items: flex-start;
|
|
176
184
|
`;
|
|
177
185
|
//# sourceMappingURL=styles.js.map
|
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 { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\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\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 2px;\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, checked, disabled }) =>\n !disabled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAE5B,0BAAuD;AACvD,8BAAgD;AAEzC,MAAM,qBAAiB,yBAAO,MAAM;AAAA,IACvC,CAAC,EAAE,QAAQ,MAAM,MAAM;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;AAAA,sBAEoB,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,SAAS,UAAM,2CAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,UACxD,qCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MAAM;AAAA;AAAA,MAEzE,CAAC,EAAE,OAAO,UAAU,SAAS,MAC7B,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,OAAO,UACxD,qCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,kBAIhE,CAAC,EAAE,OAAO,SAAS,SAAS,MACxC,CAAC,
|
|
4
|
+
"sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\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\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 2px;\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, checked, disabled }) =>\n !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 checkboxStyles = 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: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n padding-top: 2px;\n ${({ wrapLabel, theme }) => (wrapLabel ? `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n padding: 2px 0px 4px 8px;\n` : `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: 1.1;\n\n ${({ device, theme, wrapLabel }) => {\n if (device === 'mobile') {\n return `\n padding-top: 5px;\n font-size: 16px;\n line-height: 1.2;\n ${wrapLabel ? `padding: 5px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n padding-top: 5px;\n font-size: 16px;\n line-height: 1.2;\n ${wrapLabel ? `padding: 5px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n }\n\n font-size: 13px;\n line-height: 1.1;\n `;\n }\n return `\n font-size: 13px;\n line-height: 1.1;\n `;\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\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.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: flex-start;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,7 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
|
|
|
37
37
|
if (disabled || readOnly) {
|
|
38
38
|
return colors.neutral[500];
|
|
39
39
|
}
|
|
40
|
-
if (isHovering
|
|
40
|
+
if (isHovering) {
|
|
41
41
|
return colors.brand[800];
|
|
42
42
|
}
|
|
43
43
|
return colors.brand[500];
|
|
@@ -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 indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\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 if (isHovering
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\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 if (isHovering) {\n return colors.brand[800];\n }\n return colors.brand[500];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device: string | undefined = undefined,\n): string => {\n const desktopMixedCheckmark = `\n position: absolute;\n content: '';\n top: 6px;\n left: 3px;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n width: ${theme.space.xxs};\n height: 2px;\n`;\n\n const normalMixedCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n top:10px;\n left:5px;\n height:2px;\n width:12px;\n }\n ${desktopMixedCheckmark}\n`;\n const mobileMixedCheckmark = `\n ${desktopMixedCheckmark}\n top:10px;\n left:5px;\n height:2px;\n width:12px;\n `;\n const desktopCheckmark = `\n position: absolute;\n content: '';\n top: 3px;\n left: 2px;\n border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n height: 5px;\n width: 10px;\n transform: rotate(-45deg);\n`;\n\n const normalCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n top: 5px;\n left: 3px;\n height: 8px;\n width: 17px;\n }\n ${desktopCheckmark}\n`;\n const mobileCheckmark = `\n ${desktopCheckmark}\n top: 5px;\n left: 3px;\n height: 8px;\n width: 17px;\n `;\n\n if (checked === 'mixed') {\n return `&:before {\n ${\n device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark\n }\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;ADKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,WAClF,MAAM,MAAM;AAAA;AAAA;AAIrB,QAAM,uBAAuB;AAAA,yBACN,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,uBAAuB;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKA,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,6BAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMxG,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOJ,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,QAEH,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAGjG;AACA,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -14,7 +14,7 @@ const defaultProps = {
|
|
|
14
14
|
const propTypes = {
|
|
15
15
|
...globalAttributesPropTypes,
|
|
16
16
|
...xstyledPropTypes,
|
|
17
|
-
checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).description("Wheter the checkbox is set as bool or mixed").defaultValue(false)
|
|
17
|
+
checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).description("Wheter the checkbox is set as bool or mixed").isRequiredIf((props) => !props.disabled && !props.readOnly).defaultValue(false),
|
|
18
18
|
onChange: PropTypes.func.description("function executed when the checkbox changes state").signature("(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )").isRequiredIf((props) => !props.disabled && !props.readOnly),
|
|
19
19
|
"aria-controls": PropTypes.string.description('a11y required attribute when "mixed" state is to be supported').isRequiredIf(
|
|
20
20
|
(props) => props.checked === "mixed" && typeof props.ariaControls !== "string"
|
|
@@ -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 from 'react';\nimport { GlobalAttributesT, PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { DEVICE } from './constants/device';\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = typeof DEVICE[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown: React.KeyboardEventHandler;\n innerRef?: React.RefObject<HTMLInputElement>;\n 'data-testid'?: string;\n device?: Devices;\n }\n\n export interface LegacyAriaProps {\n ariaControls?: string;\n ariaLabel?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .defaultValue(false)
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAA4B,WAAW,2BAA2B,wBAAwB;AAC1F,SAAS,cAAc;AA+DhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,KAAK
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { GlobalAttributesT, PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport { DEVICE } from './constants/device';\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = typeof DEVICE[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown: React.KeyboardEventHandler;\n innerRef?: React.RefObject<HTMLInputElement>;\n 'data-testid'?: string;\n device?: Devices;\n }\n\n export interface LegacyAriaProps {\n ariaControls?: string;\n ariaLabel?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n .defaultValue(false),\n onChange: PropTypes.func\n .description('function executed when the checkbox changes state')\n .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n 'aria-controls': PropTypes.string\n .description('a11y required attribute when \"mixed\" state is to be supported')\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n ),\n ariaControls: PropTypes.string\n .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n ),\n label: PropTypes.string.description(\n 'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n hasError: PropTypes.bool.description('Whether the checkbox has error or not.').defaultValue(false),\n disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n device: PropTypes.oneOf(Object.values(DEVICE)).description(\n 'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n ),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAA4B,WAAW,2BAA2B,wBAAwB;AAC1F,SAAS,cAAc;AA+DhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB,YAAY,mDAAmD,EAC/D,UAAU,+DAA+D,EACzE,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ;AAAA,EAC1F,iBAAiB,UAAU,OACxB,YAAY,+DAA+D,EAC3E;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB;AAAA,EACrG;AAAA,EACF,cAAc,UAAU,OACrB,YAAY,8EAA8E,EAC1F,WAAW,EAAE,SAAS,OAAO,SAAS,8BAA8B,CAAC,EACrE;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,qBAAqB;AAAA,EACzG;AAAA,EACF,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,KAAK;AAAA,EACjG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,UAAU,MAAM,OAAO,OAAO,MAAM,CAAC,EAAE;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AACrG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -37,7 +37,7 @@ const StyledCheckBox = styled("span")`
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
&:hover {
|
|
40
|
-
background: ${({ theme, checked, disabled }) => !disabled
|
|
40
|
+
background: ${({ theme, checked, disabled }) => !disabled ? theme.colors.brand[200] : void 0};
|
|
41
41
|
${({ theme, hasError, disabled, readOnly }) => !hasError && !disabled && !readOnly ? ` border: 1px solid ${theme.colors.brand[600]}` : void 0};
|
|
42
42
|
}
|
|
43
43
|
`;
|
|
@@ -74,35 +74,43 @@ const StyledLabel = styled("label", {
|
|
|
74
74
|
name: DSCheckboxName,
|
|
75
75
|
slot: DSCheckboxSlots.LABEL
|
|
76
76
|
})`
|
|
77
|
-
|
|
77
|
+
padding-top: 2px;
|
|
78
|
+
${({ wrapLabel, theme }) => wrapLabel ? `
|
|
79
|
+
overflow-wrap: break-word;
|
|
80
|
+
white-space: pre-wrap;
|
|
81
|
+
word-break: break-word;
|
|
82
|
+
padding: 2px 0px 4px 8px;
|
|
83
|
+
` : `padding-left: ${theme.space.xxs}`};
|
|
78
84
|
|
|
79
85
|
color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
80
86
|
font-size: 13px;
|
|
81
|
-
line-height:
|
|
87
|
+
line-height: 1.1;
|
|
82
88
|
|
|
83
89
|
${({ device, theme, wrapLabel }) => {
|
|
84
90
|
if (device === "mobile") {
|
|
85
|
-
return `
|
|
91
|
+
return `
|
|
92
|
+
padding-top: 5px;
|
|
86
93
|
font-size: 16px;
|
|
87
|
-
line-height:
|
|
88
|
-
${wrapLabel ? `padding:
|
|
94
|
+
line-height: 1.2;
|
|
95
|
+
${wrapLabel ? `padding: 5px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
89
96
|
`;
|
|
90
97
|
}
|
|
91
98
|
if (device === void 0) {
|
|
92
99
|
return `
|
|
93
100
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
101
|
+
padding-top: 5px;
|
|
94
102
|
font-size: 16px;
|
|
95
|
-
line-height:
|
|
96
|
-
${wrapLabel ? `padding:
|
|
103
|
+
line-height: 1.2;
|
|
104
|
+
${wrapLabel ? `padding: 5px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
97
105
|
}
|
|
98
106
|
|
|
99
107
|
font-size: 13px;
|
|
100
|
-
line-height:
|
|
108
|
+
line-height: 1.1;
|
|
101
109
|
`;
|
|
102
110
|
}
|
|
103
111
|
return `
|
|
104
112
|
font-size: 13px;
|
|
105
|
-
line-height:
|
|
113
|
+
line-height: 1.1;
|
|
106
114
|
`;
|
|
107
115
|
}}
|
|
108
116
|
|
|
@@ -138,7 +146,7 @@ const StyledContainer = styled("div", {
|
|
|
138
146
|
}}
|
|
139
147
|
display: inline-grid;
|
|
140
148
|
grid-template-rows: min-content;
|
|
141
|
-
align-items:
|
|
149
|
+
align-items: flex-start;
|
|
142
150
|
`;
|
|
143
151
|
export {
|
|
144
152
|
StyledCheckBox,
|
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 { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\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\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 2px;\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, checked, disabled }) =>\n !disabled
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAE5B,SAAS,uBAAuB,uBAAuB;AACvD,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,iBAAiB,OAAO,MAAM;AAAA,IACvC,CAAC,EAAE,QAAQ,MAAM,MAAM;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;AAAA,sBAEoB,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,SAAS,MAAM,sBAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MACxD,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,OAAO,MAAM;AAAA;AAAA,MAEzE,CAAC,EAAE,OAAO,UAAU,SAAS,MAC7B,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,OAAO,MACxD,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,kBAIhE,CAAC,EAAE,OAAO,SAAS,SAAS,MACxC,CAAC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\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\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 2px;\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, checked, disabled }) =>\n !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 checkboxStyles = 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: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n padding-top: 2px;\n ${({ wrapLabel, theme }) => (wrapLabel ? `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n padding: 2px 0px 4px 8px;\n` : `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: 1.1;\n\n ${({ device, theme, wrapLabel }) => {\n if (device === 'mobile') {\n return `\n padding-top: 5px;\n font-size: 16px;\n line-height: 1.2;\n ${wrapLabel ? `padding: 5px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n padding-top: 5px;\n font-size: 16px;\n line-height: 1.2;\n ${wrapLabel ? `padding: 5px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n }\n\n font-size: 13px;\n line-height: 1.1;\n `;\n }\n return `\n font-size: 13px;\n line-height: 1.1;\n `;\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\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.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: flex-start;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,7 +6,7 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
|
|
|
6
6
|
if (disabled || readOnly) {
|
|
7
7
|
return colors.neutral[500];
|
|
8
8
|
}
|
|
9
|
-
if (isHovering
|
|
9
|
+
if (isHovering) {
|
|
10
10
|
return colors.brand[800];
|
|
11
11
|
}
|
|
12
12
|
return colors.brand[500];
|
|
@@ -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 indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\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 if (isHovering
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\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 if (isHovering) {\n return colors.brand[800];\n }\n return colors.brand[500];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device: string | undefined = undefined,\n): string => {\n const desktopMixedCheckmark = `\n position: absolute;\n content: '';\n top: 6px;\n left: 3px;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n width: ${theme.space.xxs};\n height: 2px;\n`;\n\n const normalMixedCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n top:10px;\n left:5px;\n height:2px;\n width:12px;\n }\n ${desktopMixedCheckmark}\n`;\n const mobileMixedCheckmark = `\n ${desktopMixedCheckmark}\n top:10px;\n left:5px;\n height:2px;\n width:12px;\n `;\n const desktopCheckmark = `\n position: absolute;\n content: '';\n top: 3px;\n left: 2px;\n border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n height: 5px;\n width: 10px;\n transform: rotate(-45deg);\n`;\n\n const normalCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n top: 5px;\n left: 3px;\n height: 8px;\n width: 17px;\n }\n ${desktopCheckmark}\n`;\n const mobileCheckmark = `\n ${desktopCheckmark}\n top: 5px;\n left: 3px;\n height: 8px;\n width: 17px;\n `;\n\n if (checked === 'mixed') {\n return `&:before {\n ${\n device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark\n }\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,YAAY,WAAW;ACKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,WAClF,MAAM,MAAM;AAAA;AAAA;AAIrB,QAAM,uBAAuB;AAAA,yBACN,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,uBAAuB;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKA,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,6BAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMxG,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOJ,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,QAEH,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA,EAGjG;AACA,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,OAAO,GAAU,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-checkbox",
|
|
3
|
-
"version": "3.10.
|
|
3
|
+
"version": "3.10.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Checkbox",
|
|
6
6
|
"files": [
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-system": "3.10.
|
|
39
|
-
"@elliemae/ds-truncated-tooltip-text": "3.10.
|
|
40
|
-
"@elliemae/ds-utilities": "3.10.
|
|
38
|
+
"@elliemae/ds-system": "3.10.4",
|
|
39
|
+
"@elliemae/ds-truncated-tooltip-text": "3.10.4",
|
|
40
|
+
"@elliemae/ds-utilities": "3.10.4"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@elliemae/pui-theme": "~2.6.0",
|