@elliemae/ds-button-v2 3.33.1 → 3.34.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -142,6 +142,12 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
|
142
142
|
border-width: ${({ size }) => size === "s" ? "1px;" : "2px"};
|
|
143
143
|
&:focus,
|
|
144
144
|
&[data-testemulatestate='focus'] {
|
|
145
|
+
&[aria-disabled='true'] {
|
|
146
|
+
&:after {
|
|
147
|
+
${pseudoBorder}
|
|
148
|
+
border-color: brand-700;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
145
151
|
&:after {
|
|
146
152
|
${pseudoBorder}
|
|
147
153
|
}
|
|
@@ -178,7 +184,7 @@ const OutlineButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
|
178
184
|
&[data-testemulatestate='focus'] {
|
|
179
185
|
&:after {
|
|
180
186
|
${pseudoBorder}
|
|
181
|
-
border-color: brand-
|
|
187
|
+
border-color: brand-700;
|
|
182
188
|
}
|
|
183
189
|
}
|
|
184
190
|
& svg {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSButton/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from '../../constants.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonSlots, DSButtonName } from './DSButtonDefinitions.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\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`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.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, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<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: ${({ buttonType, isV3 }) =>\n isV3 === false ||\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ size, isV3 }) => {\n if (isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: ${\n size === BUTTON_SIZES.S\n ? `calc(${sizes.s} - 3.75px);`\n : size === BUTTON_SIZES.M\n ? `calc(${sizes.m} - 12px);`\n : `calc(${sizes.l} - 24px);`\n };\n `;\n }\n }}\n padding: ${({ theme, buttonType, size, isV3 }) =>\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : isV3 === false\n ? `0 ${theme.space.xs};`\n : size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : size === BUTTON_SIZES.M && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : size === BUTTON_SIZES.L && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ size, isV3 }) => (isV3 ? `min-height: ${mobileSizes[size]};` : `height: ${mobileSizes[size]};`)}\n min-width: ${({ size }) => mobileSizes[size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ size, isV3 }) => (isV3 ? `min-height: ${sizes[size]};` : `height: ${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, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<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 name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\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-
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from '../../constants.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonSlots, DSButtonName } from './DSButtonDefinitions.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\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`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.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, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<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: ${({ buttonType, isV3 }) =>\n isV3 === false ||\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ size, isV3 }) => {\n if (isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: ${\n size === BUTTON_SIZES.S\n ? `calc(${sizes.s} - 3.75px);`\n : size === BUTTON_SIZES.M\n ? `calc(${sizes.m} - 12px);`\n : `calc(${sizes.l} - 24px);`\n };\n `;\n }\n }}\n padding: ${({ theme, buttonType, size, isV3 }) =>\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : isV3 === false\n ? `0 ${theme.space.xs};`\n : size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : size === BUTTON_SIZES.M && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : size === BUTTON_SIZES.L && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ size, isV3 }) => (isV3 ? `min-height: ${mobileSizes[size]};` : `height: ${mobileSizes[size]};`)}\n min-width: ${({ size }) => mobileSizes[size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ size, isV3 }) => (isV3 ? `min-height: ${sizes[size]};` : `height: ${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, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<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 &[aria-disabled='true'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\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 name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\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-700;\n }\n }\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\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 name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\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
|
}
|
|
@@ -105,6 +105,12 @@ const FilledButton = styled(DefaultButton, {
|
|
|
105
105
|
border-width: ${({ size }) => size === "s" ? "1px;" : "2px"};
|
|
106
106
|
&:focus,
|
|
107
107
|
&[data-testemulatestate='focus'] {
|
|
108
|
+
&[aria-disabled='true'] {
|
|
109
|
+
&:after {
|
|
110
|
+
${pseudoBorder}
|
|
111
|
+
border-color: brand-700;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
108
114
|
&:after {
|
|
109
115
|
${pseudoBorder}
|
|
110
116
|
}
|
|
@@ -141,7 +147,7 @@ const OutlineButton = styled(DefaultButton, {
|
|
|
141
147
|
&[data-testemulatestate='focus'] {
|
|
142
148
|
&:after {
|
|
143
149
|
${pseudoBorder}
|
|
144
|
-
border-color: brand-
|
|
150
|
+
border-color: brand-700;
|
|
145
151
|
}
|
|
146
152
|
}
|
|
147
153
|
& svg {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSButton/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from '../../constants.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonSlots, DSButtonName } from './DSButtonDefinitions.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\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`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.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, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<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: ${({ buttonType, isV3 }) =>\n isV3 === false ||\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ size, isV3 }) => {\n if (isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: ${\n size === BUTTON_SIZES.S\n ? `calc(${sizes.s} - 3.75px);`\n : size === BUTTON_SIZES.M\n ? `calc(${sizes.m} - 12px);`\n : `calc(${sizes.l} - 24px);`\n };\n `;\n }\n }}\n padding: ${({ theme, buttonType, size, isV3 }) =>\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : isV3 === false\n ? `0 ${theme.space.xs};`\n : size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : size === BUTTON_SIZES.M && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : size === BUTTON_SIZES.L && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ size, isV3 }) => (isV3 ? `min-height: ${mobileSizes[size]};` : `height: ${mobileSizes[size]};`)}\n min-width: ${({ size }) => mobileSizes[size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ size, isV3 }) => (isV3 ? `min-height: ${sizes[size]};` : `height: ${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, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<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 name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\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-
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,SAAS,cAAc,cAAc,eAAe,aAAa,aAAa;AAE9E,SAAS,eAAe,oBAAoB;AAS5C,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,KAAK;AAAA,2BACzB,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,GAAG;AACpF,aAAO,cAAc,MAAM,UAAU,MAAM,GAAG;AAAA,IAChD,KAAK,aAAa;AAChB,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM,GAAG;AAAA;AAAA,IAExC;AACE,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM,GAAG;AAAA;AAAA,EAE1C;AACF;AAAA;AAGK,MAAM,YAAY,OAAO,UAAU;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASM,MAAM,gBAAgB,OAAO,WAAW;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMgB,CAAC,EAAE,YAAY,KAAK,MACjC,SAAS,SACT,eAAe,aAAa,QAC5B,eAAe,aAAa,gBAC5B,eAAe,aAAa,cACxB,WACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKJ,CAAC,EAAE,MAAM,KAAK,MAAM;AACpB,MAAI,MAAM;AACR,WAAO;AAAA;AAAA;AAAA,uBAIH,SAAS,aAAa,IAClB,QAAQ,MAAM,iBACd,SAAS,aAAa,IACtB,QAAQ,MAAM,eACd,QAAQ,MAAM;AAAA;AAAA,EAGxB;AACF;AAAA,aACW,CAAC,EAAE,OAAO,YAAY,MAAM,KAAK,MAC1C,eAAe,aAAa,QAC5B,eAAe,aAAa,gBAC5B,eAAe,aAAa,cACxB,MACA,SAAS,QACT,KAAK,MAAM,MAAM,QACjB,SAAS,aAAa,IACtB,SAAS,MAAM,MAAM,aACrB,SAAS,aAAa,MAAM,eAAe,aAAa,WAAW,eAAe,aAAa,QAC/F,SAAS,MAAM,MAAM,aACrB,SAAS,aAAa,IACtB,OAAO,MAAM,MAAM,WACnB,SAAS,aAAa,MAAM,eAAe,aAAa,WAAW,eAAe,aAAa,QAC/F,SAAS,MAAM,MAAM,aACrB,OAAO,MAAM,MAAM;AAAA;AAAA,IAEvB,CAAC,EAAE,MAAM,KAAK,MAAO,OAAO,eAAe,YAAY,IAAI,OAAO,WAAW,YAAY,IAAI;AAAA,eAClF,CAAC,EAAE,KAAK,MAAM,YAAY,IAAI;AAAA,uBACtB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,MAClD,CAAC,EAAE,MAAM,KAAK,MAAO,OAAO,eAAe,MAAM,IAAI,OAAO,WAAW,MAAM,IAAI;AAAA,iBACtE,CAAC,EAAE,KAAK,MAAM,MAAM,IAAI;AAAA;AAAA,mBAEtB,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,eAAe;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIiB,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, mobileSizes, sizes } from '../../constants.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonSlots, DSButtonName } from './DSButtonDefinitions.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\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`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.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, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<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: ${({ buttonType, isV3 }) =>\n isV3 === false ||\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ size, isV3 }) => {\n if (isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: ${\n size === BUTTON_SIZES.S\n ? `calc(${sizes.s} - 3.75px);`\n : size === BUTTON_SIZES.M\n ? `calc(${sizes.m} - 12px);`\n : `calc(${sizes.l} - 24px);`\n };\n `;\n }\n }}\n padding: ${({ theme, buttonType, size, isV3 }) =>\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : isV3 === false\n ? `0 ${theme.space.xs};`\n : size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : size === BUTTON_SIZES.M && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : size === BUTTON_SIZES.L && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ size, isV3 }) => (isV3 ? `min-height: ${mobileSizes[size]};` : `height: ${mobileSizes[size]};`)}\n min-width: ${({ size }) => mobileSizes[size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ size, isV3 }) => (isV3 ? `min-height: ${sizes[size]};` : `height: ${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, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<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 &[aria-disabled='true'] {\n &:after {\n ${pseudoBorder}\n border-color: brand-700;\n }\n }\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 name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\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-700;\n }\n }\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\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 name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\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
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-button-v2",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.34.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Button",
|
|
6
6
|
"files": [
|
|
@@ -35,15 +35,15 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-
|
|
39
|
-
"@elliemae/ds-
|
|
40
|
-
"@elliemae/ds-typescript-helpers": "3.
|
|
41
|
-
"@elliemae/ds-utilities": "3.
|
|
38
|
+
"@elliemae/ds-props-helpers": "3.34.0-next.2",
|
|
39
|
+
"@elliemae/ds-system": "3.34.0-next.2",
|
|
40
|
+
"@elliemae/ds-typescript-helpers": "3.34.0-next.2",
|
|
41
|
+
"@elliemae/ds-utilities": "3.34.0-next.2"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
45
45
|
"styled-components": "~5.3.9",
|
|
46
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
46
|
+
"@elliemae/ds-monorepo-devops": "3.34.0-next.2"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"react": "^17.0.2",
|