@elliemae/ds-button-v2 3.14.0-next.9 → 3.14.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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/dist/types/DSButtonV2.d.ts +5 -0
- package/dist/types/DSButtonV2Definitions.d.ts +7 -0
- package/dist/types/config/useButtonRenderer.d.ts +2 -0
- package/dist/types/config/useButtonV2.d.ts +15 -0
- package/dist/types/config/useValidateProps.d.ts +3 -0
- package/dist/types/constants.d.ts +31 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/react-desc-prop-types.d.ts +27 -0
- package/dist/types/sharedTypes.d.ts +5 -0
- package/dist/types/styles.d.ts +12 -0
- 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.538rem",
|
|
62
|
+
m: "2.154rem",
|
|
63
|
+
l: "3.077rem"
|
|
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.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
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.615rem;
|
|
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.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 }) => 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.538rem",
|
|
22
|
+
m: "2.154rem",
|
|
23
|
+
l: "3.077rem"
|
|
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.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
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.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 }) => 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
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DSButtonT } from './react-desc-prop-types';
|
|
3
|
+
declare const DSButtonV2: React.ComponentType<DSButtonT.Props>;
|
|
4
|
+
declare const DSButtonV2WithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSButtonT.Props>;
|
|
5
|
+
export { DSButtonV2, DSButtonV2WithSchema };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';
|
|
3
|
+
import type { DSButtonT } from '../react-desc-prop-types';
|
|
4
|
+
import { useButtonRenderer } from './useButtonRenderer';
|
|
5
|
+
export interface ButtonV2Configuration {
|
|
6
|
+
propsWithDefault: DSButtonT.InternalProps;
|
|
7
|
+
globalProps: ReturnType<typeof useGetGlobalAttributes>;
|
|
8
|
+
xstyledProps: ReturnType<typeof useGetXstyledProps>;
|
|
9
|
+
ButtonRenderer: ReturnType<typeof useButtonRenderer>;
|
|
10
|
+
handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;
|
|
11
|
+
tabIndex?: WCAGTabIndex;
|
|
12
|
+
handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
13
|
+
handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;
|
|
14
|
+
}
|
|
15
|
+
export declare const useButtonV2: (props: DSButtonT.Props) => ButtonV2Configuration;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export declare const BUTTON_TYPES: {
|
|
2
|
+
readonly FILLED: "filled";
|
|
3
|
+
readonly OUTLINE: "outline";
|
|
4
|
+
readonly TEXT: "text";
|
|
5
|
+
readonly ICON: "icon";
|
|
6
|
+
readonly ICON_FILLED: "iconFilled";
|
|
7
|
+
readonly ICON_OUTLINE: "iconOutline";
|
|
8
|
+
readonly RAW: "raw";
|
|
9
|
+
};
|
|
10
|
+
export declare const BUTTON_SHAPES: {
|
|
11
|
+
readonly DEFAULT: "default";
|
|
12
|
+
readonly ROUND: "round";
|
|
13
|
+
};
|
|
14
|
+
export declare const BUTTON_SIZES: {
|
|
15
|
+
readonly S: "s";
|
|
16
|
+
readonly M: "m";
|
|
17
|
+
readonly L: "l";
|
|
18
|
+
};
|
|
19
|
+
export declare const sizes: {
|
|
20
|
+
readonly s: "1.538rem";
|
|
21
|
+
readonly m: "2.154rem";
|
|
22
|
+
readonly l: "3.077rem";
|
|
23
|
+
};
|
|
24
|
+
export declare const ButtonTypesValuesArray: ("filled" | "outline" | "text" | "icon" | "iconFilled" | "iconOutline" | "raw")[];
|
|
25
|
+
export declare const ButtonSizesValuesArray: ("s" | "m" | "l")[];
|
|
26
|
+
export declare const ButtonShapesValuesArray: ("default" | "round")[];
|
|
27
|
+
export declare const ButtonInteractionStates: string[];
|
|
28
|
+
export declare const ButtonTypesValuesString: string;
|
|
29
|
+
export declare const ButtonSizesValuesString: string;
|
|
30
|
+
export declare const ButtonShapesValuesString: string;
|
|
31
|
+
export declare const ButtonInteractionStatesValuesString: string;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { RefCallback, WeakValidationMap } from 'react';
|
|
2
|
+
import type React from 'react';
|
|
3
|
+
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';
|
|
4
|
+
import type { ButtonSizesT, ButtonTypesT, ButtonShapesT } from './sharedTypes';
|
|
5
|
+
export declare namespace DSButtonT {
|
|
6
|
+
type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';
|
|
7
|
+
interface DefaultProps {
|
|
8
|
+
'data-testid': string;
|
|
9
|
+
size: ButtonSizesT;
|
|
10
|
+
type: HTMLButtonTypeProp;
|
|
11
|
+
buttonType: ButtonTypesT;
|
|
12
|
+
onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
13
|
+
shape: ButtonShapesT;
|
|
14
|
+
}
|
|
15
|
+
interface OptionalProps {
|
|
16
|
+
innerRef?: React.RefObject<HTMLButtonElement> | RefCallback<HTMLButtonElement>;
|
|
17
|
+
}
|
|
18
|
+
interface RequiredProps {
|
|
19
|
+
children: React.ReactNode;
|
|
20
|
+
}
|
|
21
|
+
interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>, XstyledProps, RequiredProps {
|
|
22
|
+
}
|
|
23
|
+
interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>, XstyledProps, RequiredProps {
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
export declare const defaultProps: DSButtonT.DefaultProps;
|
|
27
|
+
export declare const DSButtonPropTypes: WeakValidationMap<unknown>;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES, ButtonInteractionStates } from './constants';
|
|
2
|
+
export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];
|
|
3
|
+
export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];
|
|
4
|
+
export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];
|
|
5
|
+
export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes';
|
|
2
|
+
import type { DSButtonT } from './react-desc-prop-types';
|
|
3
|
+
export interface StyledButtonPropsT {
|
|
4
|
+
size: ButtonSizesT;
|
|
5
|
+
buttonType: ButtonTypesT;
|
|
6
|
+
shape: ButtonShapesT;
|
|
7
|
+
}
|
|
8
|
+
export declare const RawButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props, never>;
|
|
9
|
+
export declare const DefaultButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & StyledButtonPropsT, never>;
|
|
10
|
+
export declare const FilledButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & StyledButtonPropsT, never>;
|
|
11
|
+
export declare const OutlineButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & StyledButtonPropsT & object, never>;
|
|
12
|
+
export declare const TextButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & StyledButtonPropsT & object, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-button-v2",
|
|
3
|
-
"version": "3.14.0-
|
|
3
|
+
"version": "3.14.0-rc.0",
|
|
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-
|
|
67
|
-
"@elliemae/ds-utilities": "3.14.0-
|
|
66
|
+
"@elliemae/ds-system": "3.14.0-rc.0",
|
|
67
|
+
"@elliemae/ds-utilities": "3.14.0-rc.0"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@testing-library/jest-dom": "~5.16.4",
|