@elliemae/ds-button-v2 3.14.0-rc.4 → 3.14.0-rc.6
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/constants.js +6 -0
- package/dist/cjs/constants.js.map +2 -2
- package/dist/cjs/styles.js +16 -11
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/constants.js +6 -0
- package/dist/esm/constants.js.map +2 -2
- package/dist/esm/styles.js +17 -12
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/constants.d.ts +5 -0
- package/package.json +3 -3
package/dist/cjs/constants.js
CHANGED
|
@@ -35,6 +35,7 @@ __export(constants_exports, {
|
|
|
35
35
|
ButtonSizesValuesString: () => ButtonSizesValuesString,
|
|
36
36
|
ButtonTypesValuesArray: () => ButtonTypesValuesArray,
|
|
37
37
|
ButtonTypesValuesString: () => ButtonTypesValuesString,
|
|
38
|
+
mobileSizes: () => mobileSizes,
|
|
38
39
|
sizes: () => sizes
|
|
39
40
|
});
|
|
40
41
|
module.exports = __toCommonJS(constants_exports);
|
|
@@ -62,6 +63,11 @@ const sizes = {
|
|
|
62
63
|
m: "2.154rem",
|
|
63
64
|
l: "3.077rem"
|
|
64
65
|
};
|
|
66
|
+
const mobileSizes = {
|
|
67
|
+
s: "1.249625rem",
|
|
68
|
+
m: "1.750125rem",
|
|
69
|
+
l: "2.5rem"
|
|
70
|
+
};
|
|
65
71
|
const ButtonTypesValuesArray = Object.values(BUTTON_TYPES);
|
|
66
72
|
const ButtonSizesValuesArray = Object.values(BUTTON_SIZES);
|
|
67
73
|
const ButtonShapesValuesArray = Object.values(BUTTON_SHAPES);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/constants.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const BUTTON_TYPES = {\n FILLED: 'filled',\n OUTLINE: 'outline',\n TEXT: 'text',\n ICON: 'icon',\n ICON_FILLED: 'iconFilled',\n ICON_OUTLINE: 'iconOutline',\n RAW: 'raw',\n} as const;\n\nexport const BUTTON_SHAPES = {\n DEFAULT: 'default',\n ROUND: 'round',\n} as const;\n\nexport const BUTTON_SIZES = {\n S: 's',\n M: 'm',\n L: 'l',\n} as const;\n\nexport const sizes = {\n s: '1.538rem',\n m: '2.154rem',\n l: '3.077rem',\n} as const;\n\nexport const ButtonTypesValuesArray = Object.values(BUTTON_TYPES);\nexport const ButtonSizesValuesArray = Object.values(BUTTON_SIZES);\nexport const ButtonShapesValuesArray = Object.values(BUTTON_SHAPES);\nexport const ButtonInteractionStates = ['hover', 'focus', 'active'];\n\nexport const ButtonTypesValuesString = JSON.stringify(ButtonTypesValuesArray);\nexport const ButtonSizesValuesString = JSON.stringify(ButtonSizesValuesArray);\nexport const ButtonShapesValuesString = JSON.stringify(ButtonShapesValuesArray);\nexport const ButtonInteractionStatesValuesString = JSON.stringify(ButtonInteractionStates);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AAAA,EACb,cAAc;AAAA,EACd,KAAK;AACP;AAEO,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,QAAQ;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,0BAA0B,OAAO,OAAO,aAAa;AAC3D,MAAM,0BAA0B,CAAC,SAAS,SAAS,QAAQ;AAE3D,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,2BAA2B,KAAK,UAAU,uBAAuB;AACvE,MAAM,sCAAsC,KAAK,UAAU,uBAAuB;",
|
|
4
|
+
"sourcesContent": ["export const BUTTON_TYPES = {\n FILLED: 'filled',\n OUTLINE: 'outline',\n TEXT: 'text',\n ICON: 'icon',\n ICON_FILLED: 'iconFilled',\n ICON_OUTLINE: 'iconOutline',\n RAW: 'raw',\n} as const;\n\nexport const BUTTON_SHAPES = {\n DEFAULT: 'default',\n ROUND: 'round',\n} as const;\n\nexport const BUTTON_SIZES = {\n S: 's',\n M: 'm',\n L: 'l',\n} as const;\n\nexport const sizes = {\n s: '1.538rem',\n m: '2.154rem',\n l: '3.077rem',\n} as const;\n\nexport const mobileSizes = {\n s: '1.249625rem',\n m: '1.750125rem',\n l: '2.5rem',\n} as const;\n\nexport const ButtonTypesValuesArray = Object.values(BUTTON_TYPES);\nexport const ButtonSizesValuesArray = Object.values(BUTTON_SIZES);\nexport const ButtonShapesValuesArray = Object.values(BUTTON_SHAPES);\nexport const ButtonInteractionStates = ['hover', 'focus', 'active'];\n\nexport const ButtonTypesValuesString = JSON.stringify(ButtonTypesValuesArray);\nexport const ButtonSizesValuesString = JSON.stringify(ButtonSizesValuesArray);\nexport const ButtonShapesValuesString = JSON.stringify(ButtonShapesValuesArray);\nexport const ButtonInteractionStatesValuesString = JSON.stringify(ButtonInteractionStates);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AAAA,EACb,cAAc;AAAA,EACd,KAAK;AACP;AAEO,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,QAAQ;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,0BAA0B,OAAO,OAAO,aAAa;AAC3D,MAAM,0BAA0B,CAAC,SAAS,SAAS,QAAQ;AAE3D,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,2BAA2B,KAAK,UAAU,uBAAuB;AACvE,MAAM,sCAAsC,KAAK,UAAU,uBAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -102,8 +102,13 @@ const DefaultButton = (0, import_ds_system.styled)(RawButton)`
|
|
|
102
102
|
font-weight: 600;
|
|
103
103
|
padding: ${({ theme, buttonType }) => buttonType !== import_constants.BUTTON_TYPES.ICON && buttonType !== import_constants.BUTTON_TYPES.ICON_OUTLINE && buttonType !== import_constants.BUTTON_TYPES.ICON_FILLED ? `0 ${theme.space.xs}` : "0"};
|
|
104
104
|
border-style: solid;
|
|
105
|
-
|
|
106
|
-
|
|
105
|
+
|
|
106
|
+
height: ${({ size }) => import_constants.mobileSizes[size]};
|
|
107
|
+
min-width: ${({ size }) => import_constants.mobileSizes[size]};
|
|
108
|
+
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
109
|
+
height: ${({ size }) => import_constants.sizes[size]};
|
|
110
|
+
min-width: ${({ size }) => import_constants.sizes[size]};
|
|
111
|
+
}
|
|
107
112
|
border-radius: ${({ shape }) => shape === import_constants.BUTTON_SHAPES.DEFAULT ? "2px" : "50%"};
|
|
108
113
|
${fontSizeSettings}
|
|
109
114
|
${({ buttonType }) => buttonType === import_constants.BUTTON_TYPES.TEXT ? "text-transform: uppercase;" : ""}
|
|
@@ -124,7 +129,7 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
|
124
129
|
}
|
|
125
130
|
border-color: brand-700;
|
|
126
131
|
}
|
|
127
|
-
&
|
|
132
|
+
& svg {
|
|
128
133
|
fill: neutral-000;
|
|
129
134
|
}
|
|
130
135
|
&:hover,
|
|
@@ -138,7 +143,7 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
|
138
143
|
background-color: neutral-100;
|
|
139
144
|
border-color: neutral-100;
|
|
140
145
|
color: #5c6574;
|
|
141
|
-
&
|
|
146
|
+
& svg {
|
|
142
147
|
fill: #5c6574;
|
|
143
148
|
}
|
|
144
149
|
}
|
|
@@ -155,7 +160,7 @@ const OutlineButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
|
155
160
|
border-color: brand-600;
|
|
156
161
|
}
|
|
157
162
|
}
|
|
158
|
-
&
|
|
163
|
+
& svg {
|
|
159
164
|
fill: brand-600;
|
|
160
165
|
}
|
|
161
166
|
&:hover,
|
|
@@ -164,14 +169,14 @@ const OutlineButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
|
164
169
|
&[data-testemulatestate='active'] {
|
|
165
170
|
border-color: brand-700;
|
|
166
171
|
color: brand-700;
|
|
167
|
-
&
|
|
172
|
+
& svg {
|
|
168
173
|
fill: brand-700;
|
|
169
174
|
}
|
|
170
175
|
}
|
|
171
|
-
|
|
176
|
+
&[aria-disabled='true'] {
|
|
172
177
|
border-color: neutral-400;
|
|
173
178
|
color: neutral-500;
|
|
174
|
-
&
|
|
179
|
+
& svg {
|
|
175
180
|
fill: neutral-500;
|
|
176
181
|
}
|
|
177
182
|
}
|
|
@@ -188,14 +193,14 @@ const TextButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
|
188
193
|
}
|
|
189
194
|
}
|
|
190
195
|
color: brand-700;
|
|
191
|
-
&
|
|
196
|
+
& svg {
|
|
192
197
|
fill: brand-700;
|
|
193
198
|
}
|
|
194
199
|
&:hover:not([aria-disabled='true']),
|
|
195
200
|
&[data-testemulatestate='hover'] {
|
|
196
201
|
background-color: brand-200;
|
|
197
202
|
color: brand-700;
|
|
198
|
-
&
|
|
203
|
+
& svg {
|
|
199
204
|
fill: brand-700;
|
|
200
205
|
}
|
|
201
206
|
}
|
|
@@ -205,7 +210,7 @@ const TextButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
|
205
210
|
}
|
|
206
211
|
&[aria-disabled='true'] {
|
|
207
212
|
color: neutral-500;
|
|
208
|
-
&
|
|
213
|
+
& svg {
|
|
209
214
|
fill: neutral-500;
|
|
210
215
|
}
|
|
211
216
|
}
|
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": ["/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, sizes } from './constants';\nimport type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes';\nimport type { DSButtonT } from './react-desc-prop-types';\nimport { DSButtonV2Slots, DSButtonV2Name } from './DSButtonV2Definitions';\n\nexport interface StyledButtonPropsT {\n size: ButtonSizesT;\n buttonType: ButtonTypesT;\n shape: ButtonShapesT;\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n content: '';\n border-style: solid;\n border-width: ${({ size, buttonType }) =>\n size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${({ buttonType, shape, theme }) => {\n if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, size, buttonType }) => {\n switch (size) {\n case BUTTON_SIZES.S:\n if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\nexport const RawButton = styled('button', {\n name: DSButtonV2Name,\n slot: DSButtonV2Slots.ROOT,\n})<DSButtonT.Props>`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const DefaultButton = styled(RawButton)<StyledButtonPropsT>`\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: center;\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n padding: ${({ theme, buttonType }) =>\n buttonType !== BUTTON_TYPES.ICON &&\n buttonType !== BUTTON_TYPES.ICON_OUTLINE &&\n buttonType !== BUTTON_TYPES.ICON_FILLED\n ? `0 ${theme.space.xs}`\n : '0'};\n border-style: solid;\n height: ${({ size }) =>
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from './constants';\nimport type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes';\nimport type { DSButtonT } from './react-desc-prop-types';\nimport { DSButtonV2Slots, DSButtonV2Name } from './DSButtonV2Definitions';\n\nexport interface StyledButtonPropsT {\n size: ButtonSizesT;\n buttonType: ButtonTypesT;\n shape: ButtonShapesT;\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n content: '';\n border-style: solid;\n border-width: ${({ size, buttonType }) =>\n size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${({ buttonType, shape, theme }) => {\n if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, size, buttonType }) => {\n switch (size) {\n case BUTTON_SIZES.S:\n if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\nexport const RawButton = styled('button', {\n name: DSButtonV2Name,\n slot: DSButtonV2Slots.ROOT,\n})<DSButtonT.Props>`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const DefaultButton = styled(RawButton)<StyledButtonPropsT>`\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: center;\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n padding: ${({ theme, buttonType }) =>\n buttonType !== BUTTON_TYPES.ICON &&\n buttonType !== BUTTON_TYPES.ICON_OUTLINE &&\n buttonType !== BUTTON_TYPES.ICON_FILLED\n ? `0 ${theme.space.xs}`\n : '0'};\n border-style: solid;\n\n height: ${({ size }) => mobileSizes[size]};\n min-width: ${({ size }) => mobileSizes[size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n height: ${({ size }) => sizes[size]};\n min-width: ${({ size }) => sizes[size]};\n }\n border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n ${fontSizeSettings}\n ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton)<StyledButtonPropsT>`\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n }\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n }\n`;\n\nexport const OutlineButton = styled(DefaultButton)`\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-600;\n }\n }\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n\nexport const TextButton = styled(DefaultButton)`\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n &[aria-disabled='true'] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/constants.js
CHANGED
|
@@ -22,6 +22,11 @@ const sizes = {
|
|
|
22
22
|
m: "2.154rem",
|
|
23
23
|
l: "3.077rem"
|
|
24
24
|
};
|
|
25
|
+
const mobileSizes = {
|
|
26
|
+
s: "1.249625rem",
|
|
27
|
+
m: "1.750125rem",
|
|
28
|
+
l: "2.5rem"
|
|
29
|
+
};
|
|
25
30
|
const ButtonTypesValuesArray = Object.values(BUTTON_TYPES);
|
|
26
31
|
const ButtonSizesValuesArray = Object.values(BUTTON_SIZES);
|
|
27
32
|
const ButtonShapesValuesArray = Object.values(BUTTON_SHAPES);
|
|
@@ -42,6 +47,7 @@ export {
|
|
|
42
47
|
ButtonSizesValuesString,
|
|
43
48
|
ButtonTypesValuesArray,
|
|
44
49
|
ButtonTypesValuesString,
|
|
50
|
+
mobileSizes,
|
|
45
51
|
sizes
|
|
46
52
|
};
|
|
47
53
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/constants.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const BUTTON_TYPES = {\n FILLED: 'filled',\n OUTLINE: 'outline',\n TEXT: 'text',\n ICON: 'icon',\n ICON_FILLED: 'iconFilled',\n ICON_OUTLINE: 'iconOutline',\n RAW: 'raw',\n} as const;\n\nexport const BUTTON_SHAPES = {\n DEFAULT: 'default',\n ROUND: 'round',\n} as const;\n\nexport const BUTTON_SIZES = {\n S: 's',\n M: 'm',\n L: 'l',\n} as const;\n\nexport const sizes = {\n s: '1.538rem',\n m: '2.154rem',\n l: '3.077rem',\n} as const;\n\nexport const ButtonTypesValuesArray = Object.values(BUTTON_TYPES);\nexport const ButtonSizesValuesArray = Object.values(BUTTON_SIZES);\nexport const ButtonShapesValuesArray = Object.values(BUTTON_SHAPES);\nexport const ButtonInteractionStates = ['hover', 'focus', 'active'];\n\nexport const ButtonTypesValuesString = JSON.stringify(ButtonTypesValuesArray);\nexport const ButtonSizesValuesString = JSON.stringify(ButtonSizesValuesArray);\nexport const ButtonShapesValuesString = JSON.stringify(ButtonShapesValuesArray);\nexport const ButtonInteractionStatesValuesString = JSON.stringify(ButtonInteractionStates);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AAAA,EACb,cAAc;AAAA,EACd,KAAK;AACP;AAEO,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,QAAQ;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,0BAA0B,OAAO,OAAO,aAAa;AAC3D,MAAM,0BAA0B,CAAC,SAAS,SAAS,QAAQ;AAE3D,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,2BAA2B,KAAK,UAAU,uBAAuB;AACvE,MAAM,sCAAsC,KAAK,UAAU,uBAAuB;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const BUTTON_TYPES = {\n FILLED: 'filled',\n OUTLINE: 'outline',\n TEXT: 'text',\n ICON: 'icon',\n ICON_FILLED: 'iconFilled',\n ICON_OUTLINE: 'iconOutline',\n RAW: 'raw',\n} as const;\n\nexport const BUTTON_SHAPES = {\n DEFAULT: 'default',\n ROUND: 'round',\n} as const;\n\nexport const BUTTON_SIZES = {\n S: 's',\n M: 'm',\n L: 'l',\n} as const;\n\nexport const sizes = {\n s: '1.538rem',\n m: '2.154rem',\n l: '3.077rem',\n} as const;\n\nexport const mobileSizes = {\n s: '1.249625rem',\n m: '1.750125rem',\n l: '2.5rem',\n} as const;\n\nexport const ButtonTypesValuesArray = Object.values(BUTTON_TYPES);\nexport const ButtonSizesValuesArray = Object.values(BUTTON_SIZES);\nexport const ButtonShapesValuesArray = Object.values(BUTTON_SHAPES);\nexport const ButtonInteractionStates = ['hover', 'focus', 'active'];\n\nexport const ButtonTypesValuesString = JSON.stringify(ButtonTypesValuesArray);\nexport const ButtonSizesValuesString = JSON.stringify(ButtonSizesValuesArray);\nexport const ButtonShapesValuesString = JSON.stringify(ButtonShapesValuesArray);\nexport const ButtonInteractionStatesValuesString = JSON.stringify(ButtonInteractionStates);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AAAA,EACb,cAAc;AAAA,EACd,KAAK;AACP;AAEO,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,QAAQ;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,yBAAyB,OAAO,OAAO,YAAY;AACzD,MAAM,0BAA0B,OAAO,OAAO,aAAa;AAC3D,MAAM,0BAA0B,CAAC,SAAS,SAAS,QAAQ;AAE3D,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,0BAA0B,KAAK,UAAU,sBAAsB;AACrE,MAAM,2BAA2B,KAAK,UAAU,uBAAuB;AACvE,MAAM,sCAAsC,KAAK,UAAU,uBAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { css, styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
|
-
import { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, sizes } from "./constants";
|
|
3
|
+
import { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from "./constants";
|
|
4
4
|
import { DSButtonV2Slots, DSButtonV2Name } from "./DSButtonV2Definitions";
|
|
5
5
|
const pseudoBorder = css`
|
|
6
6
|
position: absolute;
|
|
@@ -69,8 +69,13 @@ const DefaultButton = styled(RawButton)`
|
|
|
69
69
|
font-weight: 600;
|
|
70
70
|
padding: ${({ theme, buttonType }) => buttonType !== BUTTON_TYPES.ICON && buttonType !== BUTTON_TYPES.ICON_OUTLINE && buttonType !== BUTTON_TYPES.ICON_FILLED ? `0 ${theme.space.xs}` : "0"};
|
|
71
71
|
border-style: solid;
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
|
|
73
|
+
height: ${({ size }) => mobileSizes[size]};
|
|
74
|
+
min-width: ${({ size }) => mobileSizes[size]};
|
|
75
|
+
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
76
|
+
height: ${({ size }) => sizes[size]};
|
|
77
|
+
min-width: ${({ size }) => sizes[size]};
|
|
78
|
+
}
|
|
74
79
|
border-radius: ${({ shape }) => shape === BUTTON_SHAPES.DEFAULT ? "2px" : "50%"};
|
|
75
80
|
${fontSizeSettings}
|
|
76
81
|
${({ buttonType }) => buttonType === BUTTON_TYPES.TEXT ? "text-transform: uppercase;" : ""}
|
|
@@ -91,7 +96,7 @@ const FilledButton = styled(DefaultButton)`
|
|
|
91
96
|
}
|
|
92
97
|
border-color: brand-700;
|
|
93
98
|
}
|
|
94
|
-
&
|
|
99
|
+
& svg {
|
|
95
100
|
fill: neutral-000;
|
|
96
101
|
}
|
|
97
102
|
&:hover,
|
|
@@ -105,7 +110,7 @@ const FilledButton = styled(DefaultButton)`
|
|
|
105
110
|
background-color: neutral-100;
|
|
106
111
|
border-color: neutral-100;
|
|
107
112
|
color: #5c6574;
|
|
108
|
-
&
|
|
113
|
+
& svg {
|
|
109
114
|
fill: #5c6574;
|
|
110
115
|
}
|
|
111
116
|
}
|
|
@@ -122,7 +127,7 @@ const OutlineButton = styled(DefaultButton)`
|
|
|
122
127
|
border-color: brand-600;
|
|
123
128
|
}
|
|
124
129
|
}
|
|
125
|
-
&
|
|
130
|
+
& svg {
|
|
126
131
|
fill: brand-600;
|
|
127
132
|
}
|
|
128
133
|
&:hover,
|
|
@@ -131,14 +136,14 @@ const OutlineButton = styled(DefaultButton)`
|
|
|
131
136
|
&[data-testemulatestate='active'] {
|
|
132
137
|
border-color: brand-700;
|
|
133
138
|
color: brand-700;
|
|
134
|
-
&
|
|
139
|
+
& svg {
|
|
135
140
|
fill: brand-700;
|
|
136
141
|
}
|
|
137
142
|
}
|
|
138
|
-
|
|
143
|
+
&[aria-disabled='true'] {
|
|
139
144
|
border-color: neutral-400;
|
|
140
145
|
color: neutral-500;
|
|
141
|
-
&
|
|
146
|
+
& svg {
|
|
142
147
|
fill: neutral-500;
|
|
143
148
|
}
|
|
144
149
|
}
|
|
@@ -155,14 +160,14 @@ const TextButton = styled(DefaultButton)`
|
|
|
155
160
|
}
|
|
156
161
|
}
|
|
157
162
|
color: brand-700;
|
|
158
|
-
&
|
|
163
|
+
& svg {
|
|
159
164
|
fill: brand-700;
|
|
160
165
|
}
|
|
161
166
|
&:hover:not([aria-disabled='true']),
|
|
162
167
|
&[data-testemulatestate='hover'] {
|
|
163
168
|
background-color: brand-200;
|
|
164
169
|
color: brand-700;
|
|
165
|
-
&
|
|
170
|
+
& svg {
|
|
166
171
|
fill: brand-700;
|
|
167
172
|
}
|
|
168
173
|
}
|
|
@@ -172,7 +177,7 @@ const TextButton = styled(DefaultButton)`
|
|
|
172
177
|
}
|
|
173
178
|
&[aria-disabled='true'] {
|
|
174
179
|
color: neutral-500;
|
|
175
|
-
&
|
|
180
|
+
& svg {
|
|
176
181
|
fill: neutral-500;
|
|
177
182
|
}
|
|
178
183
|
}
|
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", "/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, sizes } from './constants';\nimport type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes';\nimport type { DSButtonT } from './react-desc-prop-types';\nimport { DSButtonV2Slots, DSButtonV2Name } from './DSButtonV2Definitions';\n\nexport interface StyledButtonPropsT {\n size: ButtonSizesT;\n buttonType: ButtonTypesT;\n shape: ButtonShapesT;\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n content: '';\n border-style: solid;\n border-width: ${({ size, buttonType }) =>\n size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${({ buttonType, shape, theme }) => {\n if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, size, buttonType }) => {\n switch (size) {\n case BUTTON_SIZES.S:\n if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\nexport const RawButton = styled('button', {\n name: DSButtonV2Name,\n slot: DSButtonV2Slots.ROOT,\n})<DSButtonT.Props>`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const DefaultButton = styled(RawButton)<StyledButtonPropsT>`\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: center;\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n padding: ${({ theme, buttonType }) =>\n buttonType !== BUTTON_TYPES.ICON &&\n buttonType !== BUTTON_TYPES.ICON_OUTLINE &&\n buttonType !== BUTTON_TYPES.ICON_FILLED\n ? `0 ${theme.space.xs}`\n : '0'};\n border-style: solid;\n height: ${({ size }) =>
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,SAAS,cAAc,cAAc,eAAe,aAAa;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from './constants';\nimport type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes';\nimport type { DSButtonT } from './react-desc-prop-types';\nimport { DSButtonV2Slots, DSButtonV2Name } from './DSButtonV2Definitions';\n\nexport interface StyledButtonPropsT {\n size: ButtonSizesT;\n buttonType: ButtonTypesT;\n shape: ButtonShapesT;\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n content: '';\n border-style: solid;\n border-width: ${({ size, buttonType }) =>\n size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${({ buttonType, shape, theme }) => {\n if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, size, buttonType }) => {\n switch (size) {\n case BUTTON_SIZES.S:\n if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\nexport const RawButton = styled('button', {\n name: DSButtonV2Name,\n slot: DSButtonV2Slots.ROOT,\n})<DSButtonT.Props>`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const DefaultButton = styled(RawButton)<StyledButtonPropsT>`\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: center;\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n padding: ${({ theme, buttonType }) =>\n buttonType !== BUTTON_TYPES.ICON &&\n buttonType !== BUTTON_TYPES.ICON_OUTLINE &&\n buttonType !== BUTTON_TYPES.ICON_FILLED\n ? `0 ${theme.space.xs}`\n : '0'};\n border-style: solid;\n\n height: ${({ size }) => mobileSizes[size]};\n min-width: ${({ size }) => mobileSizes[size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n height: ${({ size }) => sizes[size]};\n min-width: ${({ size }) => sizes[size]};\n }\n border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n ${fontSizeSettings}\n ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton)<StyledButtonPropsT>`\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n }\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n }\n`;\n\nexport const OutlineButton = styled(DefaultButton)`\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-600;\n }\n }\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n\nexport const TextButton = styled(DefaultButton)`\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n &:focus,\n &[data-testemulatestate='focus'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n &[aria-disabled='true'] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -21,6 +21,11 @@ export declare const sizes: {
|
|
|
21
21
|
readonly m: "2.154rem";
|
|
22
22
|
readonly l: "3.077rem";
|
|
23
23
|
};
|
|
24
|
+
export declare const mobileSizes: {
|
|
25
|
+
readonly s: "1.249625rem";
|
|
26
|
+
readonly m: "1.750125rem";
|
|
27
|
+
readonly l: "2.5rem";
|
|
28
|
+
};
|
|
24
29
|
export declare const ButtonTypesValuesArray: ("filled" | "outline" | "text" | "icon" | "iconFilled" | "iconOutline" | "raw")[];
|
|
25
30
|
export declare const ButtonSizesValuesArray: ("s" | "m" | "l")[];
|
|
26
31
|
export declare const ButtonShapesValuesArray: ("default" | "round")[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-button-v2",
|
|
3
|
-
"version": "3.14.0-rc.
|
|
3
|
+
"version": "3.14.0-rc.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Button",
|
|
6
6
|
"files": [
|
|
@@ -63,8 +63,8 @@
|
|
|
63
63
|
"indent": 4
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@elliemae/ds-system": "3.14.0-rc.
|
|
67
|
-
"@elliemae/ds-utilities": "3.14.0-rc.
|
|
66
|
+
"@elliemae/ds-system": "3.14.0-rc.6",
|
|
67
|
+
"@elliemae/ds-utilities": "3.14.0-rc.6"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@testing-library/jest-dom": "~5.16.4",
|