@elliemae/ds-button-v2 3.14.0-rc.5 → 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.
Files changed (5) hide show
  1. package/dist/cjs/styles.js +9 -9
  2. package/dist/cjs/styles.js.map +1 -1
  3. package/dist/esm/styles.js +9 -9
  4. package/dist/esm/styles.js.map +1 -1
  5. package/package.json +3 -3
package/dist/cjs/styles.js CHANGED
@@ -129,7 +129,7 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton)`
129
129
  }
130
130
  border-color: brand-700;
131
131
  }
132
- & .em-ds-icon svg {
132
+ & svg {
133
133
  fill: neutral-000;
134
134
  }
135
135
  &:hover,
@@ -143,7 +143,7 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton)`
143
143
  background-color: neutral-100;
144
144
  border-color: neutral-100;
145
145
  color: #5c6574;
146
- & .em-ds-icon svg {
146
+ & svg {
147
147
  fill: #5c6574;
148
148
  }
149
149
  }
@@ -160,7 +160,7 @@ const OutlineButton = (0, import_ds_system.styled)(DefaultButton)`
160
160
  border-color: brand-600;
161
161
  }
162
162
  }
163
- & .em-ds-icon svg {
163
+ & svg {
164
164
  fill: brand-600;
165
165
  }
166
166
  &:hover,
@@ -169,14 +169,14 @@ const OutlineButton = (0, import_ds_system.styled)(DefaultButton)`
169
169
  &[data-testemulatestate='active'] {
170
170
  border-color: brand-700;
171
171
  color: brand-700;
172
- & .em-ds-icon svg {
172
+ & svg {
173
173
  fill: brand-700;
174
174
  }
175
175
  }
176
- &:disabled {
176
+ &[aria-disabled='true'] {
177
177
  border-color: neutral-400;
178
178
  color: neutral-500;
179
- & .em-ds-icon svg {
179
+ & svg {
180
180
  fill: neutral-500;
181
181
  }
182
182
  }
@@ -193,14 +193,14 @@ const TextButton = (0, import_ds_system.styled)(DefaultButton)`
193
193
  }
194
194
  }
195
195
  color: brand-700;
196
- & .em-ds-icon svg {
196
+ & svg {
197
197
  fill: brand-700;
198
198
  }
199
199
  &:hover:not([aria-disabled='true']),
200
200
  &[data-testemulatestate='hover'] {
201
201
  background-color: brand-200;
202
202
  color: brand-700;
203
- & .em-ds-icon svg {
203
+ & svg {
204
204
  fill: brand-700;
205
205
  }
206
206
  }
@@ -210,7 +210,7 @@ const TextButton = (0, import_ds_system.styled)(DefaultButton)`
210
210
  }
211
211
  &[aria-disabled='true'] {
212
212
  color: neutral-500;
213
- & .em-ds-icon svg {
213
+ & svg {
214
214
  fill: neutral-500;
215
215
  }
216
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, 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 & .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"],
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
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/styles.js CHANGED
@@ -96,7 +96,7 @@ const FilledButton = styled(DefaultButton)`
96
96
  }
97
97
  border-color: brand-700;
98
98
  }
99
- & .em-ds-icon svg {
99
+ & svg {
100
100
  fill: neutral-000;
101
101
  }
102
102
  &:hover,
@@ -110,7 +110,7 @@ const FilledButton = styled(DefaultButton)`
110
110
  background-color: neutral-100;
111
111
  border-color: neutral-100;
112
112
  color: #5c6574;
113
- & .em-ds-icon svg {
113
+ & svg {
114
114
  fill: #5c6574;
115
115
  }
116
116
  }
@@ -127,7 +127,7 @@ const OutlineButton = styled(DefaultButton)`
127
127
  border-color: brand-600;
128
128
  }
129
129
  }
130
- & .em-ds-icon svg {
130
+ & svg {
131
131
  fill: brand-600;
132
132
  }
133
133
  &:hover,
@@ -136,14 +136,14 @@ const OutlineButton = styled(DefaultButton)`
136
136
  &[data-testemulatestate='active'] {
137
137
  border-color: brand-700;
138
138
  color: brand-700;
139
- & .em-ds-icon svg {
139
+ & svg {
140
140
  fill: brand-700;
141
141
  }
142
142
  }
143
- &:disabled {
143
+ &[aria-disabled='true'] {
144
144
  border-color: neutral-400;
145
145
  color: neutral-500;
146
- & .em-ds-icon svg {
146
+ & svg {
147
147
  fill: neutral-500;
148
148
  }
149
149
  }
@@ -160,14 +160,14 @@ const TextButton = styled(DefaultButton)`
160
160
  }
161
161
  }
162
162
  color: brand-700;
163
- & .em-ds-icon svg {
163
+ & svg {
164
164
  fill: brand-700;
165
165
  }
166
166
  &:hover:not([aria-disabled='true']),
167
167
  &[data-testemulatestate='hover'] {
168
168
  background-color: brand-200;
169
169
  color: brand-700;
170
- & .em-ds-icon svg {
170
+ & svg {
171
171
  fill: brand-700;
172
172
  }
173
173
  }
@@ -177,7 +177,7 @@ const TextButton = styled(DefaultButton)`
177
177
  }
178
178
  &[aria-disabled='true'] {
179
179
  color: neutral-500;
180
- & .em-ds-icon svg {
180
+ & svg {
181
181
  fill: neutral-500;
182
182
  }
183
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, 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 & .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"],
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
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.14.0-rc.5",
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.5",
67
- "@elliemae/ds-utilities": "3.14.0-rc.5"
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",