@elliemae/ds-button-v2 3.33.0-next.0 → 3.33.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/index.js +4 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/DSButton/DSButton.js +5 -0
- package/dist/cjs/parts/DSButton/DSButton.js.map +2 -2
- package/dist/cjs/parts/DSButton/DSButtonDefinitions.js +3 -3
- package/dist/cjs/parts/DSButton/DSButtonDefinitions.js.map +2 -2
- package/dist/cjs/parts/DSButton/react-desc-prop-types.js +1 -0
- package/dist/cjs/parts/DSButton/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/DSButton/styles.js +17 -4
- package/dist/cjs/parts/DSButton/styles.js.map +2 -2
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/parts/DSButton/DSButton.js +6 -1
- package/dist/esm/parts/DSButton/DSButton.js.map +2 -2
- package/dist/esm/parts/DSButton/DSButtonDefinitions.js +3 -3
- package/dist/esm/parts/DSButton/DSButtonDefinitions.js.map +2 -2
- package/dist/esm/parts/DSButton/react-desc-prop-types.js +8 -2
- package/dist/esm/parts/DSButton/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/DSButton/styles.js +17 -4
- package/dist/esm/parts/DSButton/styles.js.map +2 -2
- package/dist/types/index.d.ts +1 -0
- package/dist/types/parts/DSButton/DSButtonDefinitions.d.ts +3 -3
- package/dist/types/parts/DSButton/react-desc-prop-types.d.ts +3 -1
- package/dist/types/tests/DSButtonV3.test.d.ts +1 -0
- package/package.json +7 -7
package/dist/cjs/index.js
CHANGED
|
@@ -31,6 +31,9 @@ __export(src_exports, {
|
|
|
31
31
|
BUTTON_SHAPES: () => import_constants.BUTTON_SHAPES,
|
|
32
32
|
BUTTON_SIZES: () => import_constants.BUTTON_SIZES,
|
|
33
33
|
BUTTON_TYPES: () => import_constants.BUTTON_TYPES,
|
|
34
|
+
DSButtonDataTestId: () => import_DSButtonDefinitions.DSButtonDataTestId,
|
|
35
|
+
DSButtonName: () => import_DSButtonDefinitions.DSButtonName,
|
|
36
|
+
DSButtonSlots: () => import_DSButtonDefinitions.DSButtonSlots,
|
|
34
37
|
DSButtonV2: () => import_DSButtonV2.DSButtonV2,
|
|
35
38
|
DSButtonV2WithSchema: () => import_DSButtonV2.DSButtonV2WithSchema,
|
|
36
39
|
DSButtonV3: () => import_DSButtonV3.DSButtonV3,
|
|
@@ -41,4 +44,5 @@ var React = __toESM(require("react"));
|
|
|
41
44
|
var import_constants = require("./constants.js");
|
|
42
45
|
var import_DSButtonV2 = require("./parts/DSButtonV2/index.js");
|
|
43
46
|
var import_DSButtonV3 = require("./parts/DSButtonV3/index.js");
|
|
47
|
+
var import_DSButtonDefinitions = require("./parts/DSButton/DSButtonDefinitions.js");
|
|
44
48
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';\nexport { DSButtonV2, DSButtonV2WithSchema, type DSButtonV2T } from './parts/DSButtonV2/index.js';\nexport { DSButtonV3, DSButtonV3WithSchema, type DSButtonV3T } from './parts/DSButtonV3/index.js';\nexport type { DSButtonT } from './parts/DSButton/react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0D;AAC1D,wBAAmE;AACnE,wBAAmE;",
|
|
4
|
+
"sourcesContent": ["export { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';\nexport { DSButtonV2, DSButtonV2WithSchema, type DSButtonV2T } from './parts/DSButtonV2/index.js';\nexport { DSButtonV3, DSButtonV3WithSchema, type DSButtonV3T } from './parts/DSButtonV3/index.js';\nexport type { DSButtonT } from './parts/DSButton/react-desc-prop-types.js';\nexport { DSButtonName, DSButtonSlots, DSButtonDataTestId } from './parts/DSButton/DSButtonDefinitions.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0D;AAC1D,wBAAmE;AACnE,wBAAmE;AAEnE,iCAAgE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,6 +38,7 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
|
38
38
|
var import_useButton = require("./config/useButton.js");
|
|
39
39
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
40
40
|
var import_DSButtonDefinitions = require("./DSButtonDefinitions.js");
|
|
41
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
41
42
|
const DSButton = (props) => {
|
|
42
43
|
const {
|
|
43
44
|
propsWithDefault,
|
|
@@ -51,12 +52,16 @@ const DSButton = (props) => {
|
|
|
51
52
|
} = (0, import_useButton.useButton)(props);
|
|
52
53
|
const { size, buttonType, innerRef, children, type, shape, isV3 } = propsWithDefault;
|
|
53
54
|
const { disabled, ...restGlobalProps } = globalProps;
|
|
55
|
+
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
|
|
56
|
+
const ownerPropsConfig = (0, import_ds_utilities.useOwnerProps)(propsWithDefault, { ...props });
|
|
54
57
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
58
|
ButtonRenderer,
|
|
56
59
|
{
|
|
57
60
|
"aria-disabled": disabled ? "true" : false,
|
|
58
61
|
...restGlobalProps,
|
|
59
62
|
...xstyledProps,
|
|
63
|
+
...globalAttributes,
|
|
64
|
+
...ownerPropsConfig,
|
|
60
65
|
shape,
|
|
61
66
|
type,
|
|
62
67
|
buttonType,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSButton/DSButton.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useButton } from './config/useButton.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport { DSButtonName } from './DSButtonDefinitions.js';\n\nconst DSButton: React.ComponentType<DSButtonT.Props> = (props) => {\n const {\n propsWithDefault,\n tabIndex,\n handleOnMouseDown,\n globalProps,\n xstyledProps,\n handleOnKeyDown,\n handleOnClick,\n ButtonRenderer,\n } = useButton(props);\n const { size, buttonType, innerRef, children, type, shape, isV3 } = propsWithDefault;\n const { disabled, ...restGlobalProps } = globalProps;\n return (\n <ButtonRenderer\n aria-disabled={disabled ? 'true' : false}\n {...restGlobalProps}\n {...xstyledProps}\n shape={shape}\n type={type}\n buttonType={buttonType}\n tabIndex={tabIndex}\n size={size}\n isV3={isV3}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.propTypes = DSButtonPropTypes;\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useButton } from './config/useButton.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport { DSButtonName } from './DSButtonDefinitions.js';\nimport { useOwnerProps } from '@elliemae/ds-utilities';\n\nconst DSButton: React.ComponentType<DSButtonT.Props> = (props) => {\n const {\n propsWithDefault,\n tabIndex,\n handleOnMouseDown,\n globalProps,\n xstyledProps,\n handleOnKeyDown,\n handleOnClick,\n ButtonRenderer,\n } = useButton(props);\n const { size, buttonType, innerRef, children, type, shape, isV3 } = propsWithDefault;\n const { disabled, ...restGlobalProps } = globalProps;\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n return (\n <ButtonRenderer\n aria-disabled={disabled ? 'true' : false}\n {...restGlobalProps}\n {...xstyledProps}\n {...globalAttributes}\n {...ownerPropsConfig}\n shape={shape}\n type={type}\n buttonType={buttonType}\n tabIndex={tabIndex}\n size={size}\n isV3={isV3}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.propTypes = DSButtonPropTypes;\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAxBJ,8BAAiD;AACjD,uBAA0B;AAE1B,mCAAkC;AAClC,iCAA6B;AAC7B,0BAA8B;AAE9B,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,4BAAU,KAAK;AACnB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,OAAO,KAAK,IAAI;AACpE,QAAM,EAAE,UAAU,GAAG,gBAAgB,IAAI;AACzC,QAAM,uBAAmB,gDAAuB,gBAAgB;AAChE,QAAM,uBAAmB,mCAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,WAAW,SAAS;AAAA,MAClC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,10 +35,10 @@ __export(DSButtonDefinitions_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(DSButtonDefinitions_exports);
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
const DSButtonName = "DSButton";
|
|
38
|
-
const DSButtonDataTestId = {
|
|
39
|
-
ROOT: "ds-button"
|
|
40
|
-
};
|
|
41
38
|
const DSButtonSlots = {
|
|
42
39
|
ROOT: "root"
|
|
43
40
|
};
|
|
41
|
+
const DSButtonDataTestId = {
|
|
42
|
+
ROOT: "ds-button"
|
|
43
|
+
};
|
|
44
44
|
//# sourceMappingURL=DSButtonDefinitions.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSButton/DSButtonDefinitions.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSButtonName = 'DSButton';\n\nexport const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAErB,MAAM,
|
|
4
|
+
"sourcesContent": ["export const DSButtonName = 'DSButton';\n\nexport const DSButtonSlots = {\n ROOT: 'root',\n} as const;\n\nexport const DSButtonDataTestId = {\n ROOT: 'ds-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AACR;AAEO,MAAM,qBAAqB;AAAA,EAChC,MAAM;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -46,6 +46,7 @@ const defaultProps = {
|
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
const DSButtonPropTypes = {
|
|
49
|
+
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_DSButtonDefinitions.DSButtonName, import_DSButtonDefinitions.DSButtonSlots),
|
|
49
50
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
50
51
|
...import_ds_props_helpers.xstyledPropTypes,
|
|
51
52
|
children: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.node, import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.node)]).description(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSButton/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,
|
|
4
|
+
"sourcesContent": ["import type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\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.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\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 extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\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': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n};\n\nexport const DSButtonPropTypes = {\n ...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),\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(DSButtonDataTestId.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;ADGvB,8BAKO;AAEP,uBAYO;AACP,iCAAgE;AA6CzD,MAAM,eAAuC;AAAA,EAClD,MAAM,8BAAa;AAAA,EACnB,YAAY,8BAAa;AAAA,EACzB,OAAO,+BAAc;AAAA,EACrB,eAAe,8CAAmB;AAAA,EAClC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAClB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,OAAG,kDAAyB,yCAAc,wCAAa;AAAA,EACvD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,QAAQ,kCAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,kCAAU,MAAM,uCAAsB,EAC/C,YAAY,wCAAuB,EACnC,aAAa,8BAAa,MAAM;AAAA,EACnC,OAAO,kCAAU,MAAM,wCAAuB,EAC3C,YAAY,yCAAwB,EACpC,aAAa,+BAAc,OAAO;AAAA,EACrC,MAAM,kCAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,QAAQ;AAAA,EAC9E,MAAM,kCAAU,MAAM,uCAAsB,EAAE,YAAY,wCAAuB,EAAE,aAAa,8BAAa,CAAC;AAAA,EAC9G,SAAS,kCAAU,KAChB,YAAY,8FAA8F,EAC1G,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAE9G,eAAe,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,8CAAmB,IAAI;AAAA,EAC7G,yBAAyB,kCAAU,MAAM,wCAAuB,EAAE;AAAA,IAChE,iDAAiD;AAAA,EACnD;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -93,7 +93,10 @@ const RawButton = (0, import_ds_system.styled)("button", {
|
|
|
93
93
|
background: transparent;
|
|
94
94
|
}
|
|
95
95
|
`;
|
|
96
|
-
const DefaultButton = (0, import_ds_system.styled)(RawButton
|
|
96
|
+
const DefaultButton = (0, import_ds_system.styled)(RawButton, {
|
|
97
|
+
name: import_DSButtonDefinitions.DSButtonName,
|
|
98
|
+
slot: import_DSButtonDefinitions.DSButtonSlots.ROOT
|
|
99
|
+
})`
|
|
97
100
|
display: inline-grid;
|
|
98
101
|
grid-gap: 0.615rem;
|
|
99
102
|
position: relative;
|
|
@@ -129,7 +132,10 @@ const DefaultButton = (0, import_ds_system.styled)(RawButton)`
|
|
|
129
132
|
}
|
|
130
133
|
${import_ds_system.xStyledCommonProps}
|
|
131
134
|
`;
|
|
132
|
-
const FilledButton = (0, import_ds_system.styled)(DefaultButton
|
|
135
|
+
const FilledButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
136
|
+
name: import_DSButtonDefinitions.DSButtonName,
|
|
137
|
+
slot: import_DSButtonDefinitions.DSButtonSlots.ROOT
|
|
138
|
+
})`
|
|
133
139
|
background-color: brand-600;
|
|
134
140
|
border-color: brand-600;
|
|
135
141
|
color: neutral-000;
|
|
@@ -160,7 +166,10 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
|
160
166
|
}
|
|
161
167
|
}
|
|
162
168
|
`;
|
|
163
|
-
const OutlineButton = (0, import_ds_system.styled)(DefaultButton
|
|
169
|
+
const OutlineButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
170
|
+
name: import_DSButtonDefinitions.DSButtonName,
|
|
171
|
+
slot: import_DSButtonDefinitions.DSButtonSlots.ROOT
|
|
172
|
+
})`
|
|
164
173
|
background: neutral-000;
|
|
165
174
|
border-color: neutral-400;
|
|
166
175
|
color: brand-600;
|
|
@@ -179,6 +188,7 @@ const OutlineButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
|
179
188
|
&:active,
|
|
180
189
|
&[data-testemulatestate='hover'],
|
|
181
190
|
&[data-testemulatestate='active'] {
|
|
191
|
+
background-color: neutral-000;
|
|
182
192
|
border-color: brand-700;
|
|
183
193
|
color: brand-700;
|
|
184
194
|
& svg {
|
|
@@ -193,7 +203,10 @@ const OutlineButton = (0, import_ds_system.styled)(DefaultButton)`
|
|
|
193
203
|
}
|
|
194
204
|
}
|
|
195
205
|
`;
|
|
196
|
-
const TextButton = (0, import_ds_system.styled)(DefaultButton
|
|
206
|
+
const TextButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
207
|
+
name: import_DSButtonDefinitions.DSButtonName,
|
|
208
|
+
slot: import_DSButtonDefinitions.DSButtonSlots.ROOT
|
|
209
|
+
})`
|
|
197
210
|
border-color: transparent;
|
|
198
211
|
background-color: transparent;
|
|
199
212
|
border-width: 1px;
|
|
@@ -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`;\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)<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)<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
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAgD;AAChD,uBAA8E;AAE9E,iCAA4C;AAS5C,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,KAAK;AAAA,2BACzB,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,GAAG;AACpF,aAAO,cAAc,MAAM,UAAU,MAAM,GAAG;AAAA,IAChD,KAAK,8BAAa;AAChB,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM,GAAG;AAAA;AAAA,IAExC;AACE,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM,GAAG;AAAA;AAAA,EAE1C;AACF;AAAA;
|
|
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-600;\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
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -2,10 +2,14 @@ import * as React from "react";
|
|
|
2
2
|
import { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from "./constants.js";
|
|
3
3
|
import { DSButtonV2, DSButtonV2WithSchema } from "./parts/DSButtonV2/index.js";
|
|
4
4
|
import { DSButtonV3, DSButtonV3WithSchema } from "./parts/DSButtonV3/index.js";
|
|
5
|
+
import { DSButtonName, DSButtonSlots, DSButtonDataTestId } from "./parts/DSButton/DSButtonDefinitions.js";
|
|
5
6
|
export {
|
|
6
7
|
BUTTON_SHAPES,
|
|
7
8
|
BUTTON_SIZES,
|
|
8
9
|
BUTTON_TYPES,
|
|
10
|
+
DSButtonDataTestId,
|
|
11
|
+
DSButtonName,
|
|
12
|
+
DSButtonSlots,
|
|
9
13
|
DSButtonV2,
|
|
10
14
|
DSButtonV2WithSchema,
|
|
11
15
|
DSButtonV3,
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';\nexport { DSButtonV2, DSButtonV2WithSchema, type DSButtonV2T } from './parts/DSButtonV2/index.js';\nexport { DSButtonV3, DSButtonV3WithSchema, type DSButtonV3T } from './parts/DSButtonV3/index.js';\nexport type { DSButtonT } from './parts/DSButton/react-desc-prop-types.js';\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,cAAc,qBAAqB;AAC1D,SAAS,YAAY,4BAA8C;AACnE,SAAS,YAAY,4BAA8C;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';\nexport { DSButtonV2, DSButtonV2WithSchema, type DSButtonV2T } from './parts/DSButtonV2/index.js';\nexport { DSButtonV3, DSButtonV3WithSchema, type DSButtonV3T } from './parts/DSButtonV3/index.js';\nexport type { DSButtonT } from './parts/DSButton/react-desc-prop-types.js';\nexport { DSButtonName, DSButtonSlots, DSButtonDataTestId } from './parts/DSButton/DSButtonDefinitions.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,cAAc,qBAAqB;AAC1D,SAAS,YAAY,4BAA8C;AACnE,SAAS,YAAY,4BAA8C;AAEnE,SAAS,cAAc,eAAe,0BAA0B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { describe } from "@elliemae/ds-props-helpers";
|
|
3
|
+
import { describe, useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import { useButton } from "./config/useButton.js";
|
|
5
5
|
import { DSButtonPropTypes } from "./react-desc-prop-types.js";
|
|
6
6
|
import { DSButtonName } from "./DSButtonDefinitions.js";
|
|
7
|
+
import { useOwnerProps } from "@elliemae/ds-utilities";
|
|
7
8
|
const DSButton = (props) => {
|
|
8
9
|
const {
|
|
9
10
|
propsWithDefault,
|
|
@@ -17,12 +18,16 @@ const DSButton = (props) => {
|
|
|
17
18
|
} = useButton(props);
|
|
18
19
|
const { size, buttonType, innerRef, children, type, shape, isV3 } = propsWithDefault;
|
|
19
20
|
const { disabled, ...restGlobalProps } = globalProps;
|
|
21
|
+
const globalAttributes = useGetGlobalAttributes(propsWithDefault);
|
|
22
|
+
const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });
|
|
20
23
|
return /* @__PURE__ */ jsx(
|
|
21
24
|
ButtonRenderer,
|
|
22
25
|
{
|
|
23
26
|
"aria-disabled": disabled ? "true" : false,
|
|
24
27
|
...restGlobalProps,
|
|
25
28
|
...xstyledProps,
|
|
29
|
+
...globalAttributes,
|
|
30
|
+
...ownerPropsConfig,
|
|
26
31
|
shape,
|
|
27
32
|
type,
|
|
28
33
|
buttonType,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSButton/DSButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useButton } from './config/useButton.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport { DSButtonName } from './DSButtonDefinitions.js';\n\nconst DSButton: React.ComponentType<DSButtonT.Props> = (props) => {\n const {\n propsWithDefault,\n tabIndex,\n handleOnMouseDown,\n globalProps,\n xstyledProps,\n handleOnKeyDown,\n handleOnClick,\n ButtonRenderer,\n } = useButton(props);\n const { size, buttonType, innerRef, children, type, shape, isV3 } = propsWithDefault;\n const { disabled, ...restGlobalProps } = globalProps;\n return (\n <ButtonRenderer\n aria-disabled={disabled ? 'true' : false}\n {...restGlobalProps}\n {...xstyledProps}\n shape={shape}\n type={type}\n buttonType={buttonType}\n tabIndex={tabIndex}\n size={size}\n isV3={isV3}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.propTypes = DSButtonPropTypes;\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useButton } from './config/useButton.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport { DSButtonName } from './DSButtonDefinitions.js';\nimport { useOwnerProps } from '@elliemae/ds-utilities';\n\nconst DSButton: React.ComponentType<DSButtonT.Props> = (props) => {\n const {\n propsWithDefault,\n tabIndex,\n handleOnMouseDown,\n globalProps,\n xstyledProps,\n handleOnKeyDown,\n handleOnClick,\n ButtonRenderer,\n } = useButton(props);\n const { size, buttonType, innerRef, children, type, shape, isV3 } = propsWithDefault;\n const { disabled, ...restGlobalProps } = globalProps;\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n return (\n <ButtonRenderer\n aria-disabled={disabled ? 'true' : false}\n {...restGlobalProps}\n {...xstyledProps}\n {...globalAttributes}\n {...ownerPropsConfig}\n shape={shape}\n type={type}\n buttonType={buttonType}\n tabIndex={tabIndex}\n size={size}\n isV3={isV3}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.propTypes = DSButtonPropTypes;\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyBnB;AAxBJ,SAAS,UAAU,8BAA8B;AACjD,SAAS,iBAAiB;AAE1B,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAE9B,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAU,KAAK;AACnB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,OAAO,KAAK,IAAI;AACpE,QAAM,EAAE,UAAU,GAAG,gBAAgB,IAAI;AACzC,QAAM,mBAAmB,uBAAuB,gBAAgB;AAChE,QAAM,mBAAmB,cAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,WAAW,SAAS;AAAA,MAClC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
const DSButtonName = "DSButton";
|
|
3
|
-
const DSButtonDataTestId = {
|
|
4
|
-
ROOT: "ds-button"
|
|
5
|
-
};
|
|
6
3
|
const DSButtonSlots = {
|
|
7
4
|
ROOT: "root"
|
|
8
5
|
};
|
|
6
|
+
const DSButtonDataTestId = {
|
|
7
|
+
ROOT: "ds-button"
|
|
8
|
+
};
|
|
9
9
|
export {
|
|
10
10
|
DSButtonDataTestId,
|
|
11
11
|
DSButtonName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSButton/DSButtonDefinitions.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSButtonName = 'DSButton';\n\nexport const
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAErB,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSButtonName = 'DSButton';\n\nexport const DSButtonSlots = {\n ROOT: 'root',\n} as const;\n\nexport const DSButtonDataTestId = {\n ROOT: 'ds-button',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AACR;AAEO,MAAM,qBAAqB;AAAA,EAChC,MAAM;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
PropTypes,
|
|
4
|
+
getPropsPerSlotPropTypes,
|
|
5
|
+
globalAttributesPropTypes,
|
|
6
|
+
xstyledPropTypes
|
|
7
|
+
} from "@elliemae/ds-props-helpers";
|
|
3
8
|
import {
|
|
4
9
|
BUTTON_SIZES,
|
|
5
10
|
BUTTON_TYPES,
|
|
@@ -13,7 +18,7 @@ import {
|
|
|
13
18
|
ButtonShapesValuesArray,
|
|
14
19
|
ButtonShapesValuesString
|
|
15
20
|
} from "../../constants.js";
|
|
16
|
-
import { DSButtonDataTestId } from "./DSButtonDefinitions.js";
|
|
21
|
+
import { DSButtonDataTestId, DSButtonName, DSButtonSlots } from "./DSButtonDefinitions.js";
|
|
17
22
|
const defaultProps = {
|
|
18
23
|
size: BUTTON_SIZES.M,
|
|
19
24
|
buttonType: BUTTON_TYPES.FILLED,
|
|
@@ -24,6 +29,7 @@ const defaultProps = {
|
|
|
24
29
|
}
|
|
25
30
|
};
|
|
26
31
|
const DSButtonPropTypes = {
|
|
32
|
+
...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),
|
|
27
33
|
...globalAttributesPropTypes,
|
|
28
34
|
...xstyledPropTypes,
|
|
29
35
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSButton/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { RefCallback, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\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.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\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 extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\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': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n};\n\nexport const DSButtonPropTypes = {\n ...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),\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(DSButtonDataTestId.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;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;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,oBAAoB,cAAc,qBAAqB;AA6CzD,MAAM,eAAuC;AAAA,EAClD,MAAM,aAAa;AAAA,EACnB,YAAY,aAAa;AAAA,EACzB,OAAO,cAAc;AAAA,EACrB,eAAe,mBAAmB;AAAA,EAClC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAClB;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG,yBAAyB,cAAc,aAAa;AAAA,EACvD,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,oBAAoB,EAAE,aAAa,QAAQ;AAAA,EAC9E,MAAM,UAAU,MAAM,sBAAsB,EAAE,YAAY,uBAAuB,EAAE,aAAa,aAAa,CAAC;AAAA,EAC9G,SAAS,UAAU,KAChB,YAAY,8FAA8F,EAC1G,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,2BAA2B,EAAE,aAAa,mBAAmB,IAAI;AAAA,EAC7G,yBAAyB,UAAU,MAAM,uBAAuB,EAAE;AAAA,IAChE,iDAAiD;AAAA,EACnD;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -56,7 +56,10 @@ const RawButton = styled("button", {
|
|
|
56
56
|
background: transparent;
|
|
57
57
|
}
|
|
58
58
|
`;
|
|
59
|
-
const DefaultButton = styled(RawButton
|
|
59
|
+
const DefaultButton = styled(RawButton, {
|
|
60
|
+
name: DSButtonName,
|
|
61
|
+
slot: DSButtonSlots.ROOT
|
|
62
|
+
})`
|
|
60
63
|
display: inline-grid;
|
|
61
64
|
grid-gap: 0.615rem;
|
|
62
65
|
position: relative;
|
|
@@ -92,7 +95,10 @@ const DefaultButton = styled(RawButton)`
|
|
|
92
95
|
}
|
|
93
96
|
${xStyledCommonProps}
|
|
94
97
|
`;
|
|
95
|
-
const FilledButton = styled(DefaultButton
|
|
98
|
+
const FilledButton = styled(DefaultButton, {
|
|
99
|
+
name: DSButtonName,
|
|
100
|
+
slot: DSButtonSlots.ROOT
|
|
101
|
+
})`
|
|
96
102
|
background-color: brand-600;
|
|
97
103
|
border-color: brand-600;
|
|
98
104
|
color: neutral-000;
|
|
@@ -123,7 +129,10 @@ const FilledButton = styled(DefaultButton)`
|
|
|
123
129
|
}
|
|
124
130
|
}
|
|
125
131
|
`;
|
|
126
|
-
const OutlineButton = styled(DefaultButton
|
|
132
|
+
const OutlineButton = styled(DefaultButton, {
|
|
133
|
+
name: DSButtonName,
|
|
134
|
+
slot: DSButtonSlots.ROOT
|
|
135
|
+
})`
|
|
127
136
|
background: neutral-000;
|
|
128
137
|
border-color: neutral-400;
|
|
129
138
|
color: brand-600;
|
|
@@ -142,6 +151,7 @@ const OutlineButton = styled(DefaultButton)`
|
|
|
142
151
|
&:active,
|
|
143
152
|
&[data-testemulatestate='hover'],
|
|
144
153
|
&[data-testemulatestate='active'] {
|
|
154
|
+
background-color: neutral-000;
|
|
145
155
|
border-color: brand-700;
|
|
146
156
|
color: brand-700;
|
|
147
157
|
& svg {
|
|
@@ -156,7 +166,10 @@ const OutlineButton = styled(DefaultButton)`
|
|
|
156
166
|
}
|
|
157
167
|
}
|
|
158
168
|
`;
|
|
159
|
-
const TextButton = styled(DefaultButton
|
|
169
|
+
const TextButton = styled(DefaultButton, {
|
|
170
|
+
name: DSButtonName,
|
|
171
|
+
slot: DSButtonSlots.ROOT
|
|
172
|
+
})`
|
|
160
173
|
border-color: transparent;
|
|
161
174
|
background-color: transparent;
|
|
162
175
|
border-width: 1px;
|
|
@@ -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`;\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)<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)<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
|
-
"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;
|
|
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-600;\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/dist/types/index.d.ts
CHANGED
|
@@ -2,3 +2,4 @@ export { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES } from './constants.js';
|
|
|
2
2
|
export { DSButtonV2, DSButtonV2WithSchema, type DSButtonV2T } from './parts/DSButtonV2/index.js';
|
|
3
3
|
export { DSButtonV3, DSButtonV3WithSchema, type DSButtonV3T } from './parts/DSButtonV3/index.js';
|
|
4
4
|
export type { DSButtonT } from './parts/DSButton/react-desc-prop-types.js';
|
|
5
|
+
export { DSButtonName, DSButtonSlots, DSButtonDataTestId } from './parts/DSButton/DSButtonDefinitions.js';
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import type { RefCallback, WeakValidationMap } from 'react';
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
4
|
+
import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
|
|
4
5
|
import { BUTTON_SIZES, BUTTON_TYPES, BUTTON_SHAPES, ButtonInteractionStates } from '../../constants.js';
|
|
6
|
+
import { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';
|
|
5
7
|
export declare namespace DSButtonT {
|
|
6
8
|
type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';
|
|
7
9
|
type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];
|
|
@@ -16,7 +18,7 @@ export declare namespace DSButtonT {
|
|
|
16
18
|
onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
17
19
|
shape: ButtonShapesT;
|
|
18
20
|
}
|
|
19
|
-
interface OptionalProps {
|
|
21
|
+
interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots> {
|
|
20
22
|
innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;
|
|
21
23
|
}
|
|
22
24
|
interface RequiredProps {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-button-v2",
|
|
3
|
-
"version": "3.33.0-next.
|
|
3
|
+
"version": "3.33.0-next.10",
|
|
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-
|
|
41
|
-
"@elliemae/ds-
|
|
38
|
+
"@elliemae/ds-system": "3.33.0-next.10",
|
|
39
|
+
"@elliemae/ds-typescript-helpers": "3.33.0-next.10",
|
|
40
|
+
"@elliemae/ds-utilities": "3.33.0-next.10",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.33.0-next.10"
|
|
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.33.0-next.
|
|
46
|
+
"@elliemae/ds-monorepo-devops": "3.33.0-next.10"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"react": "^17.0.2",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
58
|
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
59
|
-
"test": "pui-cli test --passWithNoTests",
|
|
59
|
+
"test": "pui-cli test --passWithNoTests --coverage=\"false\"",
|
|
60
60
|
"lint": "node ../../../scripts/lint.mjs",
|
|
61
61
|
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
|
|
62
62
|
"dts": "node ../../../scripts/dts.mjs",
|