@elliemae/ds-button-v2 3.14.0-next.10 → 3.14.0-next.12
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 +3 -3
- package/dist/cjs/constants.js.map +1 -1
- package/dist/cjs/styles.js +1 -1
- package/dist/cjs/styles.js.map +1 -1
- package/dist/esm/constants.js +3 -3
- package/dist/esm/constants.js.map +1 -1
- package/dist/esm/styles.js +1 -1
- package/dist/esm/styles.js.map +1 -1
- package/package.json +3 -3
package/dist/cjs/constants.js
CHANGED
|
@@ -58,9 +58,9 @@ const BUTTON_SIZES = {
|
|
|
58
58
|
L: "l"
|
|
59
59
|
};
|
|
60
60
|
const sizes = {
|
|
61
|
-
s: "
|
|
62
|
-
m: "
|
|
63
|
-
l: "
|
|
61
|
+
s: "1.5rem",
|
|
62
|
+
m: "2.1rem",
|
|
63
|
+
l: "3.rem"
|
|
64
64
|
};
|
|
65
65
|
const ButtonTypesValuesArray = Object.values(BUTTON_TYPES);
|
|
66
66
|
const ButtonSizesValuesArray = Object.values(BUTTON_SIZES);
|
|
@@ -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: '
|
|
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.5rem',\n m: '2.1rem',\n l: '3.rem',\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
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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -91,7 +91,7 @@ const RawButton = (0, import_ds_system.styled)("button", {
|
|
|
91
91
|
`;
|
|
92
92
|
const DefaultButton = (0, import_ds_system.styled)(RawButton)`
|
|
93
93
|
display: inline-grid;
|
|
94
|
-
grid-gap:
|
|
94
|
+
grid-gap: 0.6rem;
|
|
95
95
|
position: relative;
|
|
96
96
|
grid-auto-flow: column;
|
|
97
97
|
place-items: center;
|
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:
|
|
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.6rem;\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 }) => sizes[size]};\n min-width: ${({ size }) => sizes[size]};\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 & .em-ds-icon 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 & .em-ds-icon 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 & .em-ds-icon 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 & .em-ds-icon svg {\n fill: brand-700;\n }\n }\n &:disabled {\n border-color: neutral-400;\n color: neutral-500;\n & .em-ds-icon 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 & .em-ds-icon 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 & .em-ds-icon 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 & .em-ds-icon svg {\n fill: neutral-500;\n }\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,uBAAiE;AAGjE,mCAAgD;AAQhD,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,kBAIH,CAAC,EAAE,MAAM,WAAW,MAClC,SAAS,8BAAa,KAAK,eAAe,8BAAa,SAAS,QAAQ;AAAA,IACxE,CAAC,EAAE,YAAY,OAAO,MAAM,MAAM;AAClC,MAAI,eAAe,8BAAa,UAAU,eAAe,8BAAa,aAAa;AACjF,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKa,MAAM,OAAO,QAAQ;AAAA,2BACpB,UAAU,+BAAc,UAAU,QAAQ;AAAA;AAAA,EAEjE;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKW,UAAU,+BAAc,UAAU,QAAQ;AAAA;AAE9D;AAAA;AAGF,MAAM,mBAAmB;AAAA,IACrB,CAAC,EAAE,OAAO,MAAM,WAAW,MAAM;AACjC,UAAQ,MAAM;AAAA,IACZ,KAAK,8BAAa;AAChB,UAAI,eAAe,8BAAa;AAAM,eAAO,cAAc,MAAM,UAAU,MAAM;AACjF,aAAO,cAAc,MAAM,UAAU,MAAM;AAAA,IAC7C,KAAK,8BAAa;AAChB,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM;AAAA;AAAA,IAErC;AACE,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM;AAAA;AAAA,EAEvC;AACF;AAAA;AAEK,MAAM,gBAAY,yBAAO,UAAU;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,6CAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASM,MAAM,oBAAgB,yBAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWhC,CAAC,EAAE,OAAO,WAAW,MAC9B,eAAe,8BAAa,QAC5B,eAAe,8BAAa,gBAC5B,eAAe,8BAAa,cACxB,KAAK,MAAM,MAAM,OACjB;AAAA;AAAA,YAEI,CAAC,EAAE,KAAK,MAAM,uBAAM;AAAA,eACjB,CAAC,EAAE,KAAK,MAAM,uBAAM;AAAA,mBAChB,CAAC,EAAE,MAAM,MAAO,UAAU,+BAAc,UAAU,QAAQ;AAAA,IACzE;AAAA,IACA,CAAC,EAAE,WAAW,MAAO,eAAe,8BAAa,OAAO,+BAA+B;AAAA;AAAA;AAAA;AAAA,IAIvF;AAAA;AAGG,MAAM,mBAAe,yBAAO,aAAa;AAAA;AAAA;AAAA;AAAA,kBAI9B,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA,QAIjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBD,MAAM,oBAAgB,yBAAO,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BD,MAAM,iBAAa,yBAAO,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/constants.js
CHANGED
|
@@ -18,9 +18,9 @@ const BUTTON_SIZES = {
|
|
|
18
18
|
L: "l"
|
|
19
19
|
};
|
|
20
20
|
const sizes = {
|
|
21
|
-
s: "
|
|
22
|
-
m: "
|
|
23
|
-
l: "
|
|
21
|
+
s: "1.5rem",
|
|
22
|
+
m: "2.1rem",
|
|
23
|
+
l: "3.rem"
|
|
24
24
|
};
|
|
25
25
|
const ButtonTypesValuesArray = Object.values(BUTTON_TYPES);
|
|
26
26
|
const ButtonSizesValuesArray = Object.values(BUTTON_SIZES);
|
|
@@ -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: '
|
|
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.5rem',\n m: '2.1rem',\n l: '3.rem',\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
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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
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:
|
|
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.6rem;\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 }) => sizes[size]};\n min-width: ${({ size }) => sizes[size]};\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 & .em-ds-icon 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 & .em-ds-icon 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 & .em-ds-icon 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 & .em-ds-icon svg {\n fill: brand-700;\n }\n }\n &:disabled {\n border-color: neutral-400;\n color: neutral-500;\n & .em-ds-icon 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 & .em-ds-icon 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 & .em-ds-icon 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 & .em-ds-icon svg {\n fill: neutral-500;\n }\n }\n`;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,SAAS,cAAc,cAAc,eAAe,aAAa;AAGjE,SAAS,iBAAiB,sBAAsB;AAQhD,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,kBAIH,CAAC,EAAE,MAAM,WAAW,MAClC,SAAS,aAAa,KAAK,eAAe,aAAa,SAAS,QAAQ;AAAA,IACxE,CAAC,EAAE,YAAY,OAAO,MAAM,MAAM;AAClC,MAAI,eAAe,aAAa,UAAU,eAAe,aAAa,aAAa;AACjF,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKa,MAAM,OAAO,QAAQ;AAAA,2BACpB,UAAU,cAAc,UAAU,QAAQ;AAAA;AAAA,EAEjE;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKW,UAAU,cAAc,UAAU,QAAQ;AAAA;AAE9D;AAAA;AAGF,MAAM,mBAAmB;AAAA,IACrB,CAAC,EAAE,OAAO,MAAM,WAAW,MAAM;AACjC,UAAQ,MAAM;AAAA,IACZ,KAAK,aAAa;AAChB,UAAI,eAAe,aAAa;AAAM,eAAO,cAAc,MAAM,UAAU,MAAM;AACjF,aAAO,cAAc,MAAM,UAAU,MAAM;AAAA,IAC7C,KAAK,aAAa;AAChB,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM;AAAA;AAAA,IAErC;AACE,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM;AAAA;AAAA,EAEvC;AACF;AAAA;AAEK,MAAM,YAAY,OAAO,UAAU;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASM,MAAM,gBAAgB,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWhC,CAAC,EAAE,OAAO,WAAW,MAC9B,eAAe,aAAa,QAC5B,eAAe,aAAa,gBAC5B,eAAe,aAAa,cACxB,KAAK,MAAM,MAAM,OACjB;AAAA;AAAA,YAEI,CAAC,EAAE,KAAK,MAAM,MAAM;AAAA,eACjB,CAAC,EAAE,KAAK,MAAM,MAAM;AAAA,mBAChB,CAAC,EAAE,MAAM,MAAO,UAAU,cAAc,UAAU,QAAQ;AAAA,IACzE;AAAA,IACA,CAAC,EAAE,WAAW,MAAO,eAAe,aAAa,OAAO,+BAA+B;AAAA;AAAA;AAAA;AAAA,IAIvF;AAAA;AAGG,MAAM,eAAe,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA,kBAI9B,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA,QAIjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBD,MAAM,gBAAgB,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BD,MAAM,aAAa,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-button-v2",
|
|
3
|
-
"version": "3.14.0-next.
|
|
3
|
+
"version": "3.14.0-next.12",
|
|
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-next.
|
|
67
|
-
"@elliemae/ds-utilities": "3.14.0-next.
|
|
66
|
+
"@elliemae/ds-system": "3.14.0-next.12",
|
|
67
|
+
"@elliemae/ds-utilities": "3.14.0-next.12"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@testing-library/jest-dom": "~5.16.4",
|