@elliemae/ds-button-v2 3.14.0-next.1 → 3.14.0-next.10
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/config/useButtonV2.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +1 -1
- package/dist/cjs/styles.js +6 -6
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/config/useButtonV2.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +7 -7
- package/dist/esm/styles.js.map +2 -2
- package/package.json +3 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useButtonV2.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport type { DSButtonT } from '../react-desc-prop-types';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types';\nimport { useValidateProps } from './useValidateProps';\nimport { useButtonRenderer } from './useButtonRenderer';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n tabIndex
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAyF;AAEzF,mCAAgD;AAChD,8BAAiC;AACjC,+BAAkC;AAa3B,MAAM,cAAc,CAAC,UAAkD;AAI5E,QAAM,uBAAmB,kDAAsD,OAAO,yCAAY;AAClG,gDAAiB,OAAO,8CAAiB;AAIzC,QAAM,kBAAc,4CAAmE,gBAAgB;AACvG,QAAM,mBAAe,wCAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,qBAAiB,4CAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,YAAY,IAAI;AAE5C,QAAM,kBAAiE,aAAAA,QAAM;AAAA,IAC3E,CAAC,MAAM;AACL,UAAI,YAAY,CAAC,WAAW;AAC1B;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AACzC,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,SAAS,SAAS;AAAA,EAC/B;AAEA,QAAM,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport type { DSButtonT } from '../react-desc-prop-types';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types';\nimport { useValidateProps } from './useValidateProps';\nimport { useButtonRenderer } from './useButtonRenderer';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n tabIndex?: WCAGTabIndex;\n handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButtonV2 = (props: DSButtonT.Props): ButtonV2Configuration => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n useValidateProps(props, DSButtonPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { disabled } = globalProps;\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const ButtonRenderer = useButtonRenderer(propsWithDefault);\n const { onKeyDown, onClick, onMouseDown } = propsWithDefault;\n\n const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n if (disabled || !onKeyDown) {\n return;\n }\n\n onKeyDown?.(e);\n const { key } = e;\n if (['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, onClick, onKeyDown],\n );\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n if (!disabled && onClick) {\n onClick(e);\n }\n },\n [disabled, onClick],\n );\n\n const handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n onMouseDown?.(e);\n },\n [disabled, onMouseDown],\n );\n\n const tabIndex = globalProps.disabled ? -1 : globalProps.tabIndex;\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAyF;AAEzF,mCAAgD;AAChD,8BAAiC;AACjC,+BAAkC;AAa3B,MAAM,cAAc,CAAC,UAAkD;AAI5E,QAAM,uBAAmB,kDAAsD,OAAO,yCAAY;AAClG,gDAAiB,OAAO,8CAAiB;AAIzC,QAAM,kBAAc,4CAAmE,gBAAgB;AACvG,QAAM,mBAAe,wCAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,qBAAiB,4CAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,YAAY,IAAI;AAE5C,QAAM,kBAAiE,aAAAA,QAAM;AAAA,IAC3E,CAAC,MAAM;AACL,UAAI,YAAY,CAAC,WAAW;AAC1B;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AACzC,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,SAAS,SAAS;AAAA,EAC/B;AAEA,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,CAAC,YAAY,SAAS;AACxB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AAEA,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,MAAM;AACL,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AACA,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,WAAW,YAAY,WAAW,KAAK,YAAY;AAEzD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from './constants';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions';\nimport type { ButtonSizesT, ButtonTypesT, ButtonShapesT } from './sharedTypes';\n\nexport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,0BAAuE;AACvE,uBAYO;AACP,mCAAqC;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from './constants';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions';\nimport type { ButtonSizesT, ButtonTypesT, ButtonShapesT } from './sharedTypes';\n\nexport declare namespace DSButtonT {\n type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n }\n export interface OptionalProps {\n innerRef?: React.RefObject<HTMLButtonElement> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonV2DataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n};\n\nexport const DSButtonPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n 'String, Number and/or Dimsum Icon',\n ).isRequired,\n buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n .description(ButtonTypesValuesString)\n .defaultValue(BUTTON_TYPES.FILLED),\n shape: PropTypes.oneOf(ButtonShapesValuesArray)\n .description(ButtonShapesValuesString)\n .defaultValue(BUTTON_SHAPES.DEFAULT),\n type: PropTypes.string.description('html \"type\" props').defaultValue('button'),\n size: PropTypes.oneOf(ButtonSizesValuesArray).description(ButtonSizesValuesString).defaultValue(BUTTON_SIZES.M),\n onClick: PropTypes.func\n .description('function executed when the button is activated (via keyboard \"space\" or enter OR via mouse)')\n .signature('(( e: React.SyntheticEvent ) => void )')\n .defaultValue(() => {}),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n\n 'data-testid': PropTypes.string.description('root element data-testid').defaultValue(DSButtonV2DataTestId.ROOT),\n 'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n ),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,0BAAuE;AACvE,uBAYO;AACP,mCAAqC;AAoC9B,MAAM,eAAuC;AAAA,EAClD,MAAM,8BAAa;AAAA,EACnB,YAAY,8BAAa;AAAA,EACzB,OAAO,+BAAc;AAAA,EACrB,eAAe,kDAAqB;AAAA,EACpC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAClB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,QAAQ,8BAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,8BAAU,MAAM,uCAAsB,EAC/C,YAAY,wCAAuB,EACnC,aAAa,8BAAa,MAAM;AAAA,EACnC,OAAO,8BAAU,MAAM,wCAAuB,EAC3C,YAAY,yCAAwB,EACpC,aAAa,+BAAc,OAAO;AAAA,EACrC,MAAM,8BAAU,OAAO,YAAY,mBAAmB,EAAE,aAAa,QAAQ;AAAA,EAC7E,MAAM,8BAAU,MAAM,uCAAsB,EAAE,YAAY,wCAAuB,EAAE,aAAa,8BAAa,CAAC;AAAA,EAC9G,SAAS,8BAAU,KAChB,YAAY,6FAA6F,EACzG,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAE9G,eAAe,8BAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,kDAAqB,IAAI;AAAA,EAC9G,yBAAyB,8BAAU,MAAM,wCAAuB,EAAE;AAAA,IAChE,iDAAiD;AAAA,EACnD;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/sharedTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES, ButtonInteractionStates } from './constants';\n\nexport type ButtonSizesT = typeof BUTTON_SIZES[keyof typeof BUTTON_SIZES];\n\nexport type ButtonTypesT = typeof BUTTON_TYPES[keyof typeof BUTTON_TYPES];\n\nexport type ButtonShapesT = typeof BUTTON_SHAPES[keyof typeof BUTTON_SHAPES];\n\nexport type ButtonInteractionStatesT = typeof ButtonInteractionStates[number];\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import type { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES, ButtonInteractionStates } from './constants';\n\nexport type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\nexport type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\nexport type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\nexport type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -113,9 +113,9 @@ const DefaultButton = (0, import_ds_system.styled)(RawButton)`
|
|
|
113
113
|
${import_ds_system.xStyledCommonProps}
|
|
114
114
|
`;
|
|
115
115
|
const FilledButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
116
|
-
background-color:
|
|
117
|
-
border-color:
|
|
118
|
-
color:
|
|
116
|
+
background-color: brand-600;
|
|
117
|
+
border-color: brand-600;
|
|
118
|
+
color: neutral-000;
|
|
119
119
|
border-width: ${({ size }) => size === "s" ? "1px;" : "2px"};
|
|
120
120
|
&:focus,
|
|
121
121
|
&[data-testemulatestate='focus'] {
|
|
@@ -144,9 +144,9 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
|
144
144
|
}
|
|
145
145
|
`;
|
|
146
146
|
const OutlineButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
147
|
-
background:
|
|
148
|
-
border-color:
|
|
149
|
-
color:
|
|
147
|
+
background: neutral-000;
|
|
148
|
+
border-color: neutral-400;
|
|
149
|
+
color: brand-600;
|
|
150
150
|
border-width: 1px;
|
|
151
151
|
&:focus,
|
|
152
152
|
&[data-testemulatestate='focus'] {
|
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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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: 8px;\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
|
+
"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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useButtonV2.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport type { DSButtonT } from '../react-desc-prop-types';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types';\nimport { useValidateProps } from './useValidateProps';\nimport { useButtonRenderer } from './useButtonRenderer';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n tabIndex
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAEzF,SAAS,cAAc,yBAAyB;AAChD,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAa3B,MAAM,cAAc,CAAC,UAAkD;AAI5E,QAAM,mBAAmB,6BAAsD,OAAO,YAAY;AAClG,mBAAiB,OAAO,iBAAiB;AAIzC,QAAM,cAAc,uBAAmE,gBAAgB;AACvG,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,iBAAiB,kBAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,YAAY,IAAI;AAE5C,QAAM,kBAAiEA,OAAM;AAAA,IAC3E,CAAC,MAAM;AACL,UAAI,YAAY,CAAC,WAAW;AAC1B;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AACzC,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,SAAS,SAAS;AAAA,EAC/B;AAEA,QAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport type { DSButtonT } from '../react-desc-prop-types';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types';\nimport { useValidateProps } from './useValidateProps';\nimport { useButtonRenderer } from './useButtonRenderer';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n tabIndex?: WCAGTabIndex;\n handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButtonV2 = (props: DSButtonT.Props): ButtonV2Configuration => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n useValidateProps(props, DSButtonPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { disabled } = globalProps;\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const ButtonRenderer = useButtonRenderer(propsWithDefault);\n const { onKeyDown, onClick, onMouseDown } = propsWithDefault;\n\n const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n if (disabled || !onKeyDown) {\n return;\n }\n\n onKeyDown?.(e);\n const { key } = e;\n if (['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, onClick, onKeyDown],\n );\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n if (!disabled && onClick) {\n onClick(e);\n }\n },\n [disabled, onClick],\n );\n\n const handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n onMouseDown?.(e);\n },\n [disabled, onMouseDown],\n );\n\n const tabIndex = globalProps.disabled ? -1 : globalProps.tabIndex;\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAEzF,SAAS,cAAc,yBAAyB;AAChD,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAa3B,MAAM,cAAc,CAAC,UAAkD;AAI5E,QAAM,mBAAmB,6BAAsD,OAAO,YAAY;AAClG,mBAAiB,OAAO,iBAAiB;AAIzC,QAAM,cAAc,uBAAmE,gBAAgB;AACvG,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,iBAAiB,kBAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,YAAY,IAAI;AAE5C,QAAM,kBAAiEA,OAAM;AAAA,IAC3E,CAAC,MAAM;AACL,UAAI,YAAY,CAAC,WAAW;AAC1B;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AACzC,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,SAAS,SAAS;AAAA,EAC/B;AAEA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,CAAC,YAAY,SAAS;AACxB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AAEA,QAAM,oBAAgEA,OAAM;AAAA,IAC1E,CAAC,MAAM;AACL,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AACA,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,WAAW,YAAY,WAAW,KAAK,YAAY;AAEzD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from './constants';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions';\nimport type { ButtonSizesT, ButtonTypesT, ButtonShapesT } from './sharedTypes';\n\nexport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from './constants';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions';\nimport type { ButtonSizesT, ButtonTypesT, ButtonShapesT } from './sharedTypes';\n\nexport declare namespace DSButtonT {\n type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n }\n export interface OptionalProps {\n innerRef?: React.RefObject<HTMLButtonElement> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonV2DataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n};\n\nexport const DSButtonPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n 'String, Number and/or Dimsum Icon',\n ).isRequired,\n buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n .description(ButtonTypesValuesString)\n .defaultValue(BUTTON_TYPES.FILLED),\n shape: PropTypes.oneOf(ButtonShapesValuesArray)\n .description(ButtonShapesValuesString)\n .defaultValue(BUTTON_SHAPES.DEFAULT),\n type: PropTypes.string.description('html \"type\" props').defaultValue('button'),\n size: PropTypes.oneOf(ButtonSizesValuesArray).description(ButtonSizesValuesString).defaultValue(BUTTON_SIZES.M),\n onClick: PropTypes.func\n .description('function executed when the button is activated (via keyboard \"space\" or enter OR via mouse)')\n .signature('(( e: React.SyntheticEvent ) => void )')\n .defaultValue(() => {}),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n\n 'data-testid': PropTypes.string.description('root element data-testid').defaultValue(DSButtonV2DataTestId.ROOT),\n 'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n ),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAoC9B,MAAM,eAAuC;AAAA,EAClD,MAAM,aAAa;AAAA,EACnB,YAAY,aAAa;AAAA,EACzB,OAAO,cAAc;AAAA,EACrB,eAAe,qBAAqB;AAAA,EACpC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAClB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,QAAQ,UAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,MAAM,sBAAsB,EAC/C,YAAY,uBAAuB,EACnC,aAAa,aAAa,MAAM;AAAA,EACnC,OAAO,UAAU,MAAM,uBAAuB,EAC3C,YAAY,wBAAwB,EACpC,aAAa,cAAc,OAAO;AAAA,EACrC,MAAM,UAAU,OAAO,YAAY,mBAAmB,EAAE,aAAa,QAAQ;AAAA,EAC7E,MAAM,UAAU,MAAM,sBAAsB,EAAE,YAAY,uBAAuB,EAAE,aAAa,aAAa,CAAC;AAAA,EAC9G,SAAS,UAAU,KAChB,YAAY,6FAA6F,EACzG,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAE9G,eAAe,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,qBAAqB,IAAI;AAAA,EAC9G,yBAAyB,UAAU,MAAM,uBAAuB,EAAE;AAAA,IAChE,iDAAiD;AAAA,EACnD;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { css, styled,
|
|
2
|
+
import { css, styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
3
|
import { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, sizes } from "./constants";
|
|
4
4
|
import { DSButtonV2Slots, DSButtonV2Name } from "./DSButtonV2Definitions";
|
|
5
5
|
const pseudoBorder = css`
|
|
@@ -80,9 +80,9 @@ const DefaultButton = styled(RawButton)`
|
|
|
80
80
|
${xStyledCommonProps}
|
|
81
81
|
`;
|
|
82
82
|
const FilledButton = styled(DefaultButton)`
|
|
83
|
-
background-color:
|
|
84
|
-
border-color:
|
|
85
|
-
color:
|
|
83
|
+
background-color: brand-600;
|
|
84
|
+
border-color: brand-600;
|
|
85
|
+
color: neutral-000;
|
|
86
86
|
border-width: ${({ size }) => size === "s" ? "1px;" : "2px"};
|
|
87
87
|
&:focus,
|
|
88
88
|
&[data-testemulatestate='focus'] {
|
|
@@ -111,9 +111,9 @@ const FilledButton = styled(DefaultButton)`
|
|
|
111
111
|
}
|
|
112
112
|
`;
|
|
113
113
|
const OutlineButton = styled(DefaultButton)`
|
|
114
|
-
background:
|
|
115
|
-
border-color:
|
|
116
|
-
color:
|
|
114
|
+
background: neutral-000;
|
|
115
|
+
border-color: neutral-400;
|
|
116
|
+
color: brand-600;
|
|
117
117
|
border-width: 1px;
|
|
118
118
|
&:focus,
|
|
119
119
|
&[data-testemulatestate='focus'] {
|
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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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: 8px;\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
|
+
"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.10",
|
|
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.10",
|
|
67
|
+
"@elliemae/ds-utilities": "3.14.0-next.10"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@testing-library/jest-dom": "~5.16.4",
|