@elliemae/ds-separator 3.12.0-rc.2 → 3.12.0-rc.4
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/DSSeparator.js +22 -16
- package/dist/cjs/DSSeparator.js.map +1 -1
- package/dist/cjs/v2/DSSeparatorDefinitions.js +32 -0
- package/dist/cjs/v2/DSSeparatorDefinitions.js.map +7 -0
- package/dist/cjs/v2/DSSeparatorV2.js +17 -13
- package/dist/cjs/v2/DSSeparatorV2.js.map +2 -2
- package/dist/cjs/v2/styles.js +1 -1
- package/dist/cjs/v2/styles.js.map +2 -2
- package/dist/esm/DSSeparator.js +22 -16
- package/dist/esm/DSSeparator.js.map +1 -1
- package/dist/esm/v2/DSSeparatorDefinitions.js +6 -0
- package/dist/esm/v2/DSSeparatorDefinitions.js.map +7 -0
- package/dist/esm/v2/DSSeparatorV2.js +17 -13
- package/dist/esm/v2/DSSeparatorV2.js.map +2 -2
- package/dist/esm/v2/styles.js +1 -1
- package/dist/esm/v2/styles.js.map +2 -2
- package/package.json +4 -4
package/dist/cjs/DSSeparator.js
CHANGED
|
@@ -62,25 +62,31 @@ const Separator = (0, import_ds_classnames.aggregatedClasses)("div")(blockName,
|
|
|
62
62
|
[type]: type
|
|
63
63
|
}));
|
|
64
64
|
const types = ["category-level", "group-level", "non-form"];
|
|
65
|
-
const DSSeparator = ({ containerProps, dashed, margin, orientation, type, position, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
orientation,
|
|
71
|
-
dashed,
|
|
72
|
-
position
|
|
73
|
-
},
|
|
74
|
-
style,
|
|
75
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator, {
|
|
65
|
+
const DSSeparator = ({ containerProps, dashed, margin, orientation, type, position, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
SeparatorWrapper,
|
|
67
|
+
{
|
|
68
|
+
...containerProps,
|
|
69
|
+
className,
|
|
76
70
|
classProps: {
|
|
77
|
-
dashed,
|
|
78
71
|
margin,
|
|
79
72
|
orientation,
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
73
|
+
dashed,
|
|
74
|
+
position
|
|
75
|
+
},
|
|
76
|
+
style,
|
|
77
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
78
|
+
Separator,
|
|
79
|
+
{
|
|
80
|
+
classProps: {
|
|
81
|
+
dashed,
|
|
82
|
+
margin,
|
|
83
|
+
orientation,
|
|
84
|
+
type
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
)
|
|
88
|
+
}
|
|
89
|
+
);
|
|
84
90
|
DSSeparator.defaultProps = {
|
|
85
91
|
containerProps: {},
|
|
86
92
|
dashed: false,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSSeparator.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'separator';\n\nconst MARGIN_SIZE = {\n S: 's',\n M: 'm',\n L: 'l',\n none: 'none',\n};\n\nconst POSITION = {\n INITIAL: 'initial',\n CENTER: 'center',\n END: 'end',\n};\n\nconst SeparatorWrapper = aggregatedClasses('div')(\n 'separator-wrapper',\n null,\n ({ margin, orientation, dashed, position }) => ({\n dashed,\n [margin]: margin,\n [orientation]: orientation,\n [position]: position,\n }),\n);\n\nconst Separator = aggregatedClasses('div')(blockName, null, ({ dashed, margin, orientation, type }) => ({\n dashed,\n [margin]: margin,\n [orientation]: orientation,\n [type]: type,\n}));\n\nconst types = ['category-level', 'group-level', 'non-form'];\n\nconst DSSeparator = ({ containerProps, dashed, margin, orientation, type, position, className, style }) => (\n <SeparatorWrapper\n {...containerProps}\n className={className}\n classProps={{\n margin,\n orientation,\n dashed,\n position,\n }}\n style={style}\n >\n <Separator\n classProps={{\n dashed,\n margin,\n orientation,\n type,\n }}\n />\n </SeparatorWrapper>\n);\n\nDSSeparator.defaultProps = {\n containerProps: {},\n dashed: false,\n margin: MARGIN_SIZE.S,\n orientation: 'horizontal',\n type: 'category-level',\n position: POSITION.INITIAL,\n};\n\nconst props = {\n /** class for separator */\n className: PropTypes.string.description('class for separator'),\n /** style object for separator */\n style: PropTypes.object.description('style object for separator'),\n /** Injected props to wrapper element of component */\n containerProps: PropTypes.object.description('Injected props to wrapper element of component'),\n /**\n * If the separator has to be dashed or solid\n */\n dashed: PropTypes.bool.description('If the separator has to be dashed or solid'),\n /**\n * Amount of margin to be added to the separator\n */\n margin: PropTypes.oneOf(['s', 'm', 'l', 'none']).description('Amount of margin to be added to the separator'),\n /**\n * Orientation 'horizontal' or 'vertical'\n */\n orientation: PropTypes.string.description(\"Orientation 'horizontal' or 'vertical'\"),\n /**\n * ['category-level', 'group-level', 'non-form']\n */\n type: PropTypes.oneOf(types).description(\"['category-level', 'group-level', 'non-form']\"),\n /**\n * ['initial', 'center', 'end']\n */\n position: PropTypes.oneOf(['initial', 'center', 'end']).description(\"['initial', 'center', 'end']\"),\n};\n\nDSSeparator.propTypes = props;\nDSSeparator.displayName = 'DSSeparator';\nconst DSSeparatorWithSchema = describe(DSSeparator);\n\nDSSeparatorWithSchema.propTypes = props;\n\nexport { DSSeparator, DSSeparatorWithSchema };\nexport default DSSeparator;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDnB;AAlDJ,0BAAoC;AACpC,2BAAkC;AAElC,MAAM,YAAY;AAElB,MAAM,cAAc;AAAA,EAClB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM;AACR;AAEA,MAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AACP;AAEA,MAAM,uBAAmB,wCAAkB,KAAK;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,CAAC,EAAE,QAAQ,aAAa,QAAQ,SAAS,OAAO;AAAA,IAC9C;AAAA,IACA,CAAC,SAAS;AAAA,IACV,CAAC,cAAc;AAAA,IACf,CAAC,WAAW;AAAA,EACd;AACF;AAEA,MAAM,gBAAY,wCAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,QAAQ,QAAQ,aAAa,KAAK,OAAO;AAAA,EACtG;AAAA,EACA,CAAC,SAAS;AAAA,EACV,CAAC,cAAc;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,QAAQ,CAAC,kBAAkB,eAAe,UAAU;AAE1D,MAAM,cAAc,CAAC,EAAE,gBAAgB,QAAQ,QAAQ,aAAa,MAAM,UAAU,WAAW,MAAM,MACnG,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDnB;AAlDJ,0BAAoC;AACpC,2BAAkC;AAElC,MAAM,YAAY;AAElB,MAAM,cAAc;AAAA,EAClB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM;AACR;AAEA,MAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AACP;AAEA,MAAM,uBAAmB,wCAAkB,KAAK;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,CAAC,EAAE,QAAQ,aAAa,QAAQ,SAAS,OAAO;AAAA,IAC9C;AAAA,IACA,CAAC,SAAS;AAAA,IACV,CAAC,cAAc;AAAA,IACf,CAAC,WAAW;AAAA,EACd;AACF;AAEA,MAAM,gBAAY,wCAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,QAAQ,QAAQ,aAAa,KAAK,OAAO;AAAA,EACtG;AAAA,EACA,CAAC,SAAS;AAAA,EACV,CAAC,cAAc;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,QAAQ,CAAC,kBAAkB,eAAe,UAAU;AAE1D,MAAM,cAAc,CAAC,EAAE,gBAAgB,QAAQ,QAAQ,aAAa,MAAM,UAAU,WAAW,MAAM,MACnG;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA;AACF;AAGF,YAAY,eAAe;AAAA,EACzB,gBAAgB,CAAC;AAAA,EACjB,QAAQ;AAAA,EACR,QAAQ,YAAY;AAAA,EACpB,aAAa;AAAA,EACb,MAAM;AAAA,EACN,UAAU,SAAS;AACrB;AAEA,MAAM,QAAQ;AAAA,EAEZ,WAAW,8BAAU,OAAO,YAAY,qBAAqB;AAAA,EAE7D,OAAO,8BAAU,OAAO,YAAY,4BAA4B;AAAA,EAEhE,gBAAgB,8BAAU,OAAO,YAAY,gDAAgD;AAAA,EAI7F,QAAQ,8BAAU,KAAK,YAAY,4CAA4C;AAAA,EAI/E,QAAQ,8BAAU,MAAM,CAAC,KAAK,KAAK,KAAK,MAAM,CAAC,EAAE,YAAY,+CAA+C;AAAA,EAI5G,aAAa,8BAAU,OAAO,YAAY,wCAAwC;AAAA,EAIlF,MAAM,8BAAU,MAAM,KAAK,EAAE,YAAY,+CAA+C;AAAA,EAIxF,UAAU,8BAAU,MAAM,CAAC,WAAW,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AACpG;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,4BAAwB,8BAAS,WAAW;AAElD,sBAAsB,YAAY;AAGlC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
var DSSeparatorDefinitions_exports = {};
|
|
26
|
+
__export(DSSeparatorDefinitions_exports, {
|
|
27
|
+
DSSeparatorName: () => DSSeparatorName
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(DSSeparatorDefinitions_exports);
|
|
30
|
+
var React = __toESM(require("react"));
|
|
31
|
+
const DSSeparatorName = "DSSeparator";
|
|
32
|
+
//# sourceMappingURL=DSSeparatorDefinitions.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/v2/DSSeparatorDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export const DSSeparatorName = 'DSSeparator';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -34,25 +34,29 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
|
34
34
|
var import_styles = require("./styles");
|
|
35
35
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
36
36
|
var import_DSSeparatorV2Datatestid = require("./exported-related/DSSeparatorV2Datatestid");
|
|
37
|
+
var import_DSSeparatorDefinitions = require("./DSSeparatorDefinitions");
|
|
37
38
|
const DSSeparatorV2 = (props) => {
|
|
38
|
-
(0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.propTypes);
|
|
39
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.propTypes, import_DSSeparatorDefinitions.DSSeparatorName);
|
|
39
40
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
40
41
|
const { colorType, isDotted, isVertical, color, ...rest } = propsWithDefault;
|
|
41
42
|
const { role, ...globalAttrs } = (0, import_ds_utilities.useGetGlobalAttributes)(rest);
|
|
42
43
|
const xstyledAttrs = (0, import_ds_utilities.useGetXstyledProps)(rest);
|
|
43
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
44
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
45
|
+
import_styles.StyledSeparator,
|
|
46
|
+
{
|
|
47
|
+
colorType,
|
|
48
|
+
isDotted,
|
|
49
|
+
isVertical,
|
|
50
|
+
color,
|
|
51
|
+
role,
|
|
52
|
+
...role ? { "aria-orientation": isVertical ? "vertical" : "horizontal" } : void 0,
|
|
53
|
+
"data-testid": import_DSSeparatorV2Datatestid.DSSeparatorV2Datatestid.SEPARATOR,
|
|
54
|
+
...globalAttrs,
|
|
55
|
+
...xstyledAttrs
|
|
56
|
+
}
|
|
57
|
+
);
|
|
54
58
|
};
|
|
55
|
-
DSSeparatorV2.displayName =
|
|
59
|
+
DSSeparatorV2.displayName = import_DSSeparatorDefinitions.DSSeparatorName;
|
|
56
60
|
const DSSeparatorV2WithSchema = (0, import_ds_utilities.describe)(DSSeparatorV2);
|
|
57
61
|
DSSeparatorV2WithSchema.propTypes = import_react_desc_prop_types.propTypes;
|
|
58
62
|
//# sourceMappingURL=DSSeparatorV2.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/DSSeparatorV2.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { StyledSeparator } from './styles';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { DSSeparatorV2Datatestid } from './exported-related/DSSeparatorV2Datatestid';\nimport type { DSSeparatorV2T } from './react-desc-prop-types';\n\nconst DSSeparatorV2 = (props: DSSeparatorV2T.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes);\n const propsWithDefault = useMemoMergePropsWithDefault<DSSeparatorV2T.Props>(props, defaultProps);\n\n const { colorType, isDotted, isVertical, color, ...rest } = propsWithDefault;\n\n const { role, ...globalAttrs } = useGetGlobalAttributes(rest);\n const xstyledAttrs = useGetXstyledProps(rest);\n\n return (\n <StyledSeparator\n colorType={colorType}\n isDotted={isDotted}\n isVertical={isVertical}\n color={color}\n role={role}\n {...(role ? { 'aria-orientation': isVertical ? 'vertical' : 'horizontal' } : undefined)}\n data-testid={DSSeparatorV2Datatestid.SEPARATOR}\n {...globalAttrs}\n {...xstyledAttrs}\n />\n );\n};\n\nDSSeparatorV2.displayName =
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { StyledSeparator } from './styles';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { DSSeparatorV2Datatestid } from './exported-related/DSSeparatorV2Datatestid';\nimport type { DSSeparatorV2T } from './react-desc-prop-types';\nimport { DSSeparatorName } from './DSSeparatorDefinitions';\n\nconst DSSeparatorV2 = (props: DSSeparatorV2T.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSSeparatorName);\n const propsWithDefault = useMemoMergePropsWithDefault<DSSeparatorV2T.Props>(props, defaultProps);\n\n const { colorType, isDotted, isVertical, color, ...rest } = propsWithDefault;\n\n const { role, ...globalAttrs } = useGetGlobalAttributes(rest);\n const xstyledAttrs = useGetXstyledProps(rest);\n\n return (\n <StyledSeparator\n colorType={colorType}\n isDotted={isDotted}\n isVertical={isVertical}\n color={color}\n role={role}\n {...(role ? { 'aria-orientation': isVertical ? 'vertical' : 'horizontal' } : undefined)}\n data-testid={DSSeparatorV2Datatestid.SEPARATOR}\n {...globalAttrs}\n {...xstyledAttrs}\n />\n );\n};\n\nDSSeparatorV2.displayName = DSSeparatorName;\nconst DSSeparatorV2WithSchema = describe(DSSeparatorV2);\nDSSeparatorV2WithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSSeparatorV2, DSSeparatorV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAvBJ,0BAMO;AACP,oBAAgC;AAChC,mCAAwC;AACxC,qCAAwC;AAExC,oCAAgC;AAEhC,MAAM,gBAAgB,CAAC,UAA6C;AAClE,0DAA+B,OAAO,wCAAW,6CAAe;AAChE,QAAM,uBAAmB,kDAAmD,OAAO,yCAAY;AAE/F,QAAM,EAAE,WAAW,UAAU,YAAY,UAAU,KAAK,IAAI;AAE5D,QAAM,EAAE,SAAS,YAAY,QAAI,4CAAuB,IAAI;AAC5D,QAAM,mBAAe,wCAAmB,IAAI;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAI,OAAO,EAAE,oBAAoB,aAAa,aAAa,aAAa,IAAI;AAAA,MAC7E,eAAa,uDAAwB;AAAA,MACpC,GAAG;AAAA,MACH,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/v2/styles.js
CHANGED
|
@@ -50,7 +50,7 @@ const dottedBorder = import_ds_system.css`
|
|
|
50
50
|
const solidBorder = import_ds_system.css`
|
|
51
51
|
background: ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]};
|
|
52
52
|
`;
|
|
53
|
-
const StyledSeparator = (0, import_ds_system.styled)("div", { name: "
|
|
53
|
+
const StyledSeparator = (0, import_ds_system.styled)("div", { name: "DSSeparator", slot: "root" })`
|
|
54
54
|
${directionStyles}
|
|
55
55
|
${({ isDotted }) => isDotted ? dottedBorder : solidBorder}
|
|
56
56
|
${import_ds_system.xStyledCommonProps}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\n\ninterface StyledSeparatorT {\n isVertical: boolean;\n isDotted: boolean;\n color: string;\n colorType: 'dark' | 'light';\n}\n\nconst defaultColorTypes = {\n dark: '700',\n light: '400',\n};\n\nconst directionStyles = css`\n ${({ isVertical }) => (isVertical ? `height: 100%; width: 1px;` : `height: 1px; width: 100%;`)}\n`;\n``;\nconst dottedBorder = css`\n background-image: linear-gradient(\n to ${({ isVertical }) => (!isVertical ? 'right' : 'bottom')},\n ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]} 25%,\n rgba(255, 255, 255, 0) 0%\n );\n background-position: bottom;\n background-size: ${({ isVertical }) => (isVertical ? '1px 4px' : '4px 1px')};\n background-repeat: ${({ isVertical }) => (isVertical ? 'repeat-y' : 'repeat-x')};\n`;\n\nconst solidBorder = css`\n background: ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]};\n`;\n\nexport const StyledSeparator = styled('div', { name: '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAShD,MAAM,oBAAoB;AAAA,EACxB,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,kBAAkB;AAAA,IACpB,CAAC,EAAE,WAAW,MAAO,aAAa,8BAA8B;AAAA;AAEpE;AACA,MAAM,eAAe;AAAA;AAAA,SAEZ,CAAC,EAAE,WAAW,MAAO,CAAC,aAAa,UAAU;AAAA,MAChD,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAAA;AAAA;AAAA,qBAIlE,CAAC,EAAE,WAAW,MAAO,aAAa,YAAY;AAAA,uBAC5C,CAAC,EAAE,WAAW,MAAO,aAAa,aAAa;AAAA;AAGtE,MAAM,cAAc;AAAA,gBACJ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAG1F,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,
|
|
4
|
+
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\n\ninterface StyledSeparatorT {\n isVertical: boolean;\n isDotted: boolean;\n color: string;\n colorType: 'dark' | 'light';\n}\n\nconst defaultColorTypes = {\n dark: '700',\n light: '400',\n};\n\nconst directionStyles = css`\n ${({ isVertical }) => (isVertical ? `height: 100%; width: 1px;` : `height: 1px; width: 100%;`)}\n`;\n``;\nconst dottedBorder = css`\n background-image: linear-gradient(\n to ${({ isVertical }) => (!isVertical ? 'right' : 'bottom')},\n ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]} 25%,\n rgba(255, 255, 255, 0) 0%\n );\n background-position: bottom;\n background-size: ${({ isVertical }) => (isVertical ? '1px 4px' : '4px 1px')};\n background-repeat: ${({ isVertical }) => (isVertical ? 'repeat-y' : 'repeat-x')};\n`;\n\nconst solidBorder = css`\n background: ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]};\n`;\n\nexport const StyledSeparator = styled('div', { name: 'DSSeparator', slot: 'root' })<StyledSeparatorT>`\n ${directionStyles}\n ${({ isDotted }) => (isDotted ? dottedBorder : solidBorder)}\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAShD,MAAM,oBAAoB;AAAA,EACxB,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,kBAAkB;AAAA,IACpB,CAAC,EAAE,WAAW,MAAO,aAAa,8BAA8B;AAAA;AAEpE;AACA,MAAM,eAAe;AAAA;AAAA,SAEZ,CAAC,EAAE,WAAW,MAAO,CAAC,aAAa,UAAU;AAAA,MAChD,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAAA;AAAA;AAAA,qBAIlE,CAAC,EAAE,WAAW,MAAO,aAAa,YAAY;AAAA,uBAC5C,CAAC,EAAE,WAAW,MAAO,aAAa,aAAa;AAAA;AAGtE,MAAM,cAAc;AAAA,gBACJ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAG1F,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,eAAe,MAAM,OAAO,CAAC;AAAA,IAC9E;AAAA,IACA,CAAC,EAAE,SAAS,MAAO,WAAW,eAAe;AAAA,IAC7C;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSSeparator.js
CHANGED
|
@@ -31,25 +31,31 @@ const Separator = aggregatedClasses("div")(blockName, null, ({ dashed, margin, o
|
|
|
31
31
|
[type]: type
|
|
32
32
|
}));
|
|
33
33
|
const types = ["category-level", "group-level", "non-form"];
|
|
34
|
-
const DSSeparator = ({ containerProps, dashed, margin, orientation, type, position, className, style }) => /* @__PURE__ */ jsx(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
orientation,
|
|
40
|
-
dashed,
|
|
41
|
-
position
|
|
42
|
-
},
|
|
43
|
-
style,
|
|
44
|
-
children: /* @__PURE__ */ jsx(Separator, {
|
|
34
|
+
const DSSeparator = ({ containerProps, dashed, margin, orientation, type, position, className, style }) => /* @__PURE__ */ jsx(
|
|
35
|
+
SeparatorWrapper,
|
|
36
|
+
{
|
|
37
|
+
...containerProps,
|
|
38
|
+
className,
|
|
45
39
|
classProps: {
|
|
46
|
-
dashed,
|
|
47
40
|
margin,
|
|
48
41
|
orientation,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
42
|
+
dashed,
|
|
43
|
+
position
|
|
44
|
+
},
|
|
45
|
+
style,
|
|
46
|
+
children: /* @__PURE__ */ jsx(
|
|
47
|
+
Separator,
|
|
48
|
+
{
|
|
49
|
+
classProps: {
|
|
50
|
+
dashed,
|
|
51
|
+
margin,
|
|
52
|
+
orientation,
|
|
53
|
+
type
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
);
|
|
53
59
|
DSSeparator.defaultProps = {
|
|
54
60
|
containerProps: {},
|
|
55
61
|
dashed: false,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSSeparator.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'separator';\n\nconst MARGIN_SIZE = {\n S: 's',\n M: 'm',\n L: 'l',\n none: 'none',\n};\n\nconst POSITION = {\n INITIAL: 'initial',\n CENTER: 'center',\n END: 'end',\n};\n\nconst SeparatorWrapper = aggregatedClasses('div')(\n 'separator-wrapper',\n null,\n ({ margin, orientation, dashed, position }) => ({\n dashed,\n [margin]: margin,\n [orientation]: orientation,\n [position]: position,\n }),\n);\n\nconst Separator = aggregatedClasses('div')(blockName, null, ({ dashed, margin, orientation, type }) => ({\n dashed,\n [margin]: margin,\n [orientation]: orientation,\n [type]: type,\n}));\n\nconst types = ['category-level', 'group-level', 'non-form'];\n\nconst DSSeparator = ({ containerProps, dashed, margin, orientation, type, position, className, style }) => (\n <SeparatorWrapper\n {...containerProps}\n className={className}\n classProps={{\n margin,\n orientation,\n dashed,\n position,\n }}\n style={style}\n >\n <Separator\n classProps={{\n dashed,\n margin,\n orientation,\n type,\n }}\n />\n </SeparatorWrapper>\n);\n\nDSSeparator.defaultProps = {\n containerProps: {},\n dashed: false,\n margin: MARGIN_SIZE.S,\n orientation: 'horizontal',\n type: 'category-level',\n position: POSITION.INITIAL,\n};\n\nconst props = {\n /** class for separator */\n className: PropTypes.string.description('class for separator'),\n /** style object for separator */\n style: PropTypes.object.description('style object for separator'),\n /** Injected props to wrapper element of component */\n containerProps: PropTypes.object.description('Injected props to wrapper element of component'),\n /**\n * If the separator has to be dashed or solid\n */\n dashed: PropTypes.bool.description('If the separator has to be dashed or solid'),\n /**\n * Amount of margin to be added to the separator\n */\n margin: PropTypes.oneOf(['s', 'm', 'l', 'none']).description('Amount of margin to be added to the separator'),\n /**\n * Orientation 'horizontal' or 'vertical'\n */\n orientation: PropTypes.string.description(\"Orientation 'horizontal' or 'vertical'\"),\n /**\n * ['category-level', 'group-level', 'non-form']\n */\n type: PropTypes.oneOf(types).description(\"['category-level', 'group-level', 'non-form']\"),\n /**\n * ['initial', 'center', 'end']\n */\n position: PropTypes.oneOf(['initial', 'center', 'end']).description(\"['initial', 'center', 'end']\"),\n};\n\nDSSeparator.propTypes = props;\nDSSeparator.displayName = 'DSSeparator';\nconst DSSeparatorWithSchema = describe(DSSeparator);\n\nDSSeparatorWithSchema.propTypes = props;\n\nexport { DSSeparator, DSSeparatorWithSchema };\nexport default DSSeparator;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACmDnB;AAlDJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAElB,MAAM,cAAc;AAAA,EAClB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM;AACR;AAEA,MAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AACP;AAEA,MAAM,mBAAmB,kBAAkB,KAAK;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,CAAC,EAAE,QAAQ,aAAa,QAAQ,SAAS,OAAO;AAAA,IAC9C;AAAA,IACA,CAAC,SAAS;AAAA,IACV,CAAC,cAAc;AAAA,IACf,CAAC,WAAW;AAAA,EACd;AACF;AAEA,MAAM,YAAY,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,QAAQ,QAAQ,aAAa,KAAK,OAAO;AAAA,EACtG;AAAA,EACA,CAAC,SAAS;AAAA,EACV,CAAC,cAAc;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,QAAQ,CAAC,kBAAkB,eAAe,UAAU;AAE1D,MAAM,cAAc,CAAC,EAAE,gBAAgB,QAAQ,QAAQ,aAAa,MAAM,UAAU,WAAW,MAAM,MACnG,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmDnB;AAlDJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAElB,MAAM,cAAc;AAAA,EAClB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM;AACR;AAEA,MAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AACP;AAEA,MAAM,mBAAmB,kBAAkB,KAAK;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,CAAC,EAAE,QAAQ,aAAa,QAAQ,SAAS,OAAO;AAAA,IAC9C;AAAA,IACA,CAAC,SAAS;AAAA,IACV,CAAC,cAAc;AAAA,IACf,CAAC,WAAW;AAAA,EACd;AACF;AAEA,MAAM,YAAY,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,QAAQ,QAAQ,aAAa,KAAK,OAAO;AAAA,EACtG;AAAA,EACA,CAAC,SAAS;AAAA,EACV,CAAC,cAAc;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,QAAQ,CAAC,kBAAkB,eAAe,UAAU;AAE1D,MAAM,cAAc,CAAC,EAAE,gBAAgB,QAAQ,QAAQ,aAAa,MAAM,UAAU,WAAW,MAAM,MACnG;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA;AACF;AAGF,YAAY,eAAe;AAAA,EACzB,gBAAgB,CAAC;AAAA,EACjB,QAAQ;AAAA,EACR,QAAQ,YAAY;AAAA,EACpB,aAAa;AAAA,EACb,MAAM;AAAA,EACN,UAAU,SAAS;AACrB;AAEA,MAAM,QAAQ;AAAA,EAEZ,WAAW,UAAU,OAAO,YAAY,qBAAqB;AAAA,EAE7D,OAAO,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAEhE,gBAAgB,UAAU,OAAO,YAAY,gDAAgD;AAAA,EAI7F,QAAQ,UAAU,KAAK,YAAY,4CAA4C;AAAA,EAI/E,QAAQ,UAAU,MAAM,CAAC,KAAK,KAAK,KAAK,MAAM,CAAC,EAAE,YAAY,+CAA+C;AAAA,EAI5G,aAAa,UAAU,OAAO,YAAY,wCAAwC;AAAA,EAIlF,MAAM,UAAU,MAAM,KAAK,EAAE,YAAY,+CAA+C;AAAA,EAIxF,UAAU,UAAU,MAAM,CAAC,WAAW,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AACpG;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAElD,sBAAsB,YAAY;AAGlC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSSeparatorDefinitions.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSSeparatorName = 'DSSeparator';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -10,25 +10,29 @@ import {
|
|
|
10
10
|
import { StyledSeparator } from "./styles";
|
|
11
11
|
import { propTypes, defaultProps } from "./react-desc-prop-types";
|
|
12
12
|
import { DSSeparatorV2Datatestid } from "./exported-related/DSSeparatorV2Datatestid";
|
|
13
|
+
import { DSSeparatorName } from "./DSSeparatorDefinitions";
|
|
13
14
|
const DSSeparatorV2 = (props) => {
|
|
14
|
-
useValidateTypescriptPropTypes(props, propTypes);
|
|
15
|
+
useValidateTypescriptPropTypes(props, propTypes, DSSeparatorName);
|
|
15
16
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
16
17
|
const { colorType, isDotted, isVertical, color, ...rest } = propsWithDefault;
|
|
17
18
|
const { role, ...globalAttrs } = useGetGlobalAttributes(rest);
|
|
18
19
|
const xstyledAttrs = useGetXstyledProps(rest);
|
|
19
|
-
return /* @__PURE__ */ jsx(
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
21
|
+
StyledSeparator,
|
|
22
|
+
{
|
|
23
|
+
colorType,
|
|
24
|
+
isDotted,
|
|
25
|
+
isVertical,
|
|
26
|
+
color,
|
|
27
|
+
role,
|
|
28
|
+
...role ? { "aria-orientation": isVertical ? "vertical" : "horizontal" } : void 0,
|
|
29
|
+
"data-testid": DSSeparatorV2Datatestid.SEPARATOR,
|
|
30
|
+
...globalAttrs,
|
|
31
|
+
...xstyledAttrs
|
|
32
|
+
}
|
|
33
|
+
);
|
|
30
34
|
};
|
|
31
|
-
DSSeparatorV2.displayName =
|
|
35
|
+
DSSeparatorV2.displayName = DSSeparatorName;
|
|
32
36
|
const DSSeparatorV2WithSchema = describe(DSSeparatorV2);
|
|
33
37
|
DSSeparatorV2WithSchema.propTypes = propTypes;
|
|
34
38
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSSeparatorV2.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { StyledSeparator } from './styles';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { DSSeparatorV2Datatestid } from './exported-related/DSSeparatorV2Datatestid';\nimport type { DSSeparatorV2T } from './react-desc-prop-types';\n\nconst DSSeparatorV2 = (props: DSSeparatorV2T.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes);\n const propsWithDefault = useMemoMergePropsWithDefault<DSSeparatorV2T.Props>(props, defaultProps);\n\n const { colorType, isDotted, isVertical, color, ...rest } = propsWithDefault;\n\n const { role, ...globalAttrs } = useGetGlobalAttributes(rest);\n const xstyledAttrs = useGetXstyledProps(rest);\n\n return (\n <StyledSeparator\n colorType={colorType}\n isDotted={isDotted}\n isVertical={isVertical}\n color={color}\n role={role}\n {...(role ? { 'aria-orientation': isVertical ? 'vertical' : 'horizontal' } : undefined)}\n data-testid={DSSeparatorV2Datatestid.SEPARATOR}\n {...globalAttrs}\n {...xstyledAttrs}\n />\n );\n};\n\nDSSeparatorV2.displayName =
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { StyledSeparator } from './styles';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { DSSeparatorV2Datatestid } from './exported-related/DSSeparatorV2Datatestid';\nimport type { DSSeparatorV2T } from './react-desc-prop-types';\nimport { DSSeparatorName } from './DSSeparatorDefinitions';\n\nconst DSSeparatorV2 = (props: DSSeparatorV2T.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSSeparatorName);\n const propsWithDefault = useMemoMergePropsWithDefault<DSSeparatorV2T.Props>(props, defaultProps);\n\n const { colorType, isDotted, isVertical, color, ...rest } = propsWithDefault;\n\n const { role, ...globalAttrs } = useGetGlobalAttributes(rest);\n const xstyledAttrs = useGetXstyledProps(rest);\n\n return (\n <StyledSeparator\n colorType={colorType}\n isDotted={isDotted}\n isVertical={isVertical}\n color={color}\n role={role}\n {...(role ? { 'aria-orientation': isVertical ? 'vertical' : 'horizontal' } : undefined)}\n data-testid={DSSeparatorV2Datatestid.SEPARATOR}\n {...globalAttrs}\n {...xstyledAttrs}\n />\n );\n};\n\nDSSeparatorV2.displayName = DSSeparatorName;\nconst DSSeparatorV2WithSchema = describe(DSSeparatorV2);\nDSSeparatorV2WithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSSeparatorV2, DSSeparatorV2WithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyBnB;AAvBJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,WAAW,oBAAoB;AACxC,SAAS,+BAA+B;AAExC,SAAS,uBAAuB;AAEhC,MAAM,gBAAgB,CAAC,UAA6C;AAClE,iCAA+B,OAAO,WAAW,eAAe;AAChE,QAAM,mBAAmB,6BAAmD,OAAO,YAAY;AAE/F,QAAM,EAAE,WAAW,UAAU,YAAY,UAAU,KAAK,IAAI;AAE5D,QAAM,EAAE,SAAS,YAAY,IAAI,uBAAuB,IAAI;AAC5D,QAAM,eAAe,mBAAmB,IAAI;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAI,OAAO,EAAE,oBAAoB,aAAa,aAAa,aAAa,IAAI;AAAA,MAC7E,eAAa,wBAAwB;AAAA,MACpC,GAAG;AAAA,MACH,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/styles.js
CHANGED
|
@@ -21,7 +21,7 @@ const dottedBorder = css`
|
|
|
21
21
|
const solidBorder = css`
|
|
22
22
|
background: ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]};
|
|
23
23
|
`;
|
|
24
|
-
const StyledSeparator = styled("div", { name: "
|
|
24
|
+
const StyledSeparator = styled("div", { name: "DSSeparator", slot: "root" })`
|
|
25
25
|
${directionStyles}
|
|
26
26
|
${({ isDotted }) => isDotted ? dottedBorder : solidBorder}
|
|
27
27
|
${xStyledCommonProps}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\n\ninterface StyledSeparatorT {\n isVertical: boolean;\n isDotted: boolean;\n color: string;\n colorType: 'dark' | 'light';\n}\n\nconst defaultColorTypes = {\n dark: '700',\n light: '400',\n};\n\nconst directionStyles = css`\n ${({ isVertical }) => (isVertical ? `height: 100%; width: 1px;` : `height: 1px; width: 100%;`)}\n`;\n``;\nconst dottedBorder = css`\n background-image: linear-gradient(\n to ${({ isVertical }) => (!isVertical ? 'right' : 'bottom')},\n ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]} 25%,\n rgba(255, 255, 255, 0) 0%\n );\n background-position: bottom;\n background-size: ${({ isVertical }) => (isVertical ? '1px 4px' : '4px 1px')};\n background-repeat: ${({ isVertical }) => (isVertical ? 'repeat-y' : 'repeat-x')};\n`;\n\nconst solidBorder = css`\n background: ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]};\n`;\n\nexport const StyledSeparator = styled('div', { name: '
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAShD,MAAM,oBAAoB;AAAA,EACxB,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,kBAAkB;AAAA,IACpB,CAAC,EAAE,WAAW,MAAO,aAAa,8BAA8B;AAAA;AAEpE;AACA,MAAM,eAAe;AAAA;AAAA,SAEZ,CAAC,EAAE,WAAW,MAAO,CAAC,aAAa,UAAU;AAAA,MAChD,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAAA;AAAA;AAAA,qBAIlE,CAAC,EAAE,WAAW,MAAO,aAAa,YAAY;AAAA,uBAC5C,CAAC,EAAE,WAAW,MAAO,aAAa,aAAa;AAAA;AAGtE,MAAM,cAAc;AAAA,gBACJ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAG1F,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\n\ninterface StyledSeparatorT {\n isVertical: boolean;\n isDotted: boolean;\n color: string;\n colorType: 'dark' | 'light';\n}\n\nconst defaultColorTypes = {\n dark: '700',\n light: '400',\n};\n\nconst directionStyles = css`\n ${({ isVertical }) => (isVertical ? `height: 100%; width: 1px;` : `height: 1px; width: 100%;`)}\n`;\n``;\nconst dottedBorder = css`\n background-image: linear-gradient(\n to ${({ isVertical }) => (!isVertical ? 'right' : 'bottom')},\n ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]} 25%,\n rgba(255, 255, 255, 0) 0%\n );\n background-position: bottom;\n background-size: ${({ isVertical }) => (isVertical ? '1px 4px' : '4px 1px')};\n background-repeat: ${({ isVertical }) => (isVertical ? 'repeat-y' : 'repeat-x')};\n`;\n\nconst solidBorder = css`\n background: ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]};\n`;\n\nexport const StyledSeparator = styled('div', { name: 'DSSeparator', slot: 'root' })<StyledSeparatorT>`\n ${directionStyles}\n ${({ isDotted }) => (isDotted ? dottedBorder : solidBorder)}\n ${xStyledCommonProps}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAShD,MAAM,oBAAoB;AAAA,EACxB,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,kBAAkB;AAAA,IACpB,CAAC,EAAE,WAAW,MAAO,aAAa,8BAA8B;AAAA;AAEpE;AACA,MAAM,eAAe;AAAA;AAAA,SAEZ,CAAC,EAAE,WAAW,MAAO,CAAC,aAAa,UAAU;AAAA,MAChD,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAAA;AAAA;AAAA,qBAIlE,CAAC,EAAE,WAAW,MAAO,aAAa,YAAY;AAAA,uBAC5C,CAAC,EAAE,WAAW,MAAO,aAAa,aAAa;AAAA;AAGtE,MAAM,cAAc;AAAA,gBACJ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAG1F,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,eAAe,MAAM,OAAO,CAAC;AAAA,IAC9E;AAAA,IACA,CAAC,EAAE,SAAS,MAAO,WAAW,eAAe;AAAA,IAC7C;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-separator",
|
|
3
|
-
"version": "3.12.0-rc.
|
|
3
|
+
"version": "3.12.0-rc.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Separator",
|
|
6
6
|
"files": [
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"indent": 4
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@elliemae/ds-classnames": "3.12.0-rc.
|
|
43
|
-
"@elliemae/ds-system": "3.12.0-rc.
|
|
44
|
-
"@elliemae/ds-utilities": "3.12.0-rc.
|
|
42
|
+
"@elliemae/ds-classnames": "3.12.0-rc.4",
|
|
43
|
+
"@elliemae/ds-system": "3.12.0-rc.4",
|
|
44
|
+
"@elliemae/ds-utilities": "3.12.0-rc.4"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@testing-library/react": "~12.1.3",
|