@elliemae/ds-separator 3.0.0-next.64 → 3.0.0-next.65
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/v2/DSSeparatorV2.js +3 -3
- package/dist/cjs/v2/DSSeparatorV2.js.map +2 -2
- package/dist/cjs/v2/react-desc-prop-types.js +4 -4
- package/dist/cjs/v2/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/v2/styles.js +11 -11
- package/dist/cjs/v2/styles.js.map +2 -2
- package/dist/esm/v2/DSSeparatorV2.js +3 -3
- package/dist/esm/v2/DSSeparatorV2.js.map +2 -2
- package/dist/esm/v2/react-desc-prop-types.js +4 -4
- package/dist/esm/v2/react-desc-prop-types.js.map +2 -2
- package/dist/esm/v2/styles.js +9 -9
- package/dist/esm/v2/styles.js.map +2 -2
- package/package.json +1 -2
|
@@ -62,12 +62,12 @@ var import_DSSeparatorV2Datatestid = require("./exported-related/DSSeparatorV2Da
|
|
|
62
62
|
const DSSeparatorV2 = (props) => {
|
|
63
63
|
(0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.propTypes);
|
|
64
64
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
65
|
-
const _a = propsWithDefault, {
|
|
65
|
+
const _a = propsWithDefault, { colorType, isDotted, isVertical, color } = _a, rest = __objRest(_a, ["colorType", "isDotted", "isVertical", "color"]);
|
|
66
66
|
const _b = (0, import_ds_utilities.useGetGlobalAttributes)(rest), { role } = _b, globalAttrs = __objRest(_b, ["role"]);
|
|
67
67
|
const xstyledAttrs = (0, import_ds_utilities.useGetXstyledProps)(rest);
|
|
68
68
|
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledSeparator, __spreadValues(__spreadValues(__spreadProps(__spreadValues({
|
|
69
|
-
colorType
|
|
70
|
-
|
|
69
|
+
colorType,
|
|
70
|
+
isDotted,
|
|
71
71
|
isVertical,
|
|
72
72
|
color,
|
|
73
73
|
role
|
|
@@ -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 React, { WeakValidationMap } 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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,0BAMO;AACP,oBAAgC;AAChC,mCAAwC;AACxC,qCAAwC;AAGxC,MAAM,gBAAgB,CAAC,UAA6C;AAClE,0DAA+B,OAAO,sCAAS;AAC/C,QAAM,mBAAmB,sDAAmD,OAAO,yCAAY;AAE/F,
|
|
4
|
+
"sourcesContent": ["import React, { WeakValidationMap } 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\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;ADAvB,mBAAyC;AACzC,0BAMO;AACP,oBAAgC;AAChC,mCAAwC;AACxC,qCAAwC;AAGxC,MAAM,gBAAgB,CAAC,UAA6C;AAClE,0DAA+B,OAAO,sCAAS;AAC/C,QAAM,mBAAmB,sDAAmD,OAAO,yCAAY;AAE/F,QAA4D,uBAApD,aAAW,UAAU,YAAY,UAAmB,IAAT,iBAAS,IAAT,CAA3C,aAAW,YAAU,cAAY;AAEzC,QAAiC,qDAAuB,IAAI,GAApD,WAAyB,IAAhB,wBAAgB,IAAhB,CAAT;AACR,QAAM,eAAe,4CAAmB,IAAI;AAE5C,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KACK,OAAO,EAAE,oBAAoB,aAAa,aAAa,aAAa,IAAI,SAN9E;AAAA,IAOC,eAAa,uDAAwB;AAAA,MACjC,cACA,aACN;AAEJ;AAEA,MAAM,0BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -45,13 +45,13 @@ var React = __toESM(require("react"));
|
|
|
45
45
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
46
46
|
const defaultProps = {
|
|
47
47
|
isVertical: false,
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
isDotted: false,
|
|
49
|
+
colorType: "dark"
|
|
50
50
|
};
|
|
51
51
|
const propTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), import_ds_utilities.xstyledPropTypes), {
|
|
52
52
|
isVertical: import_ds_utilities.PropTypes.bool.description("Set vertical orientation.").defaultValue(false),
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
isDotted: import_ds_utilities.PropTypes.bool.description("Set dashed style.").defaultValue(false),
|
|
54
|
+
colorType: import_ds_utilities.PropTypes.oneOf(["dark", "light"]).description("Set dark or light color types. Using color property will override this one.").defaultValue("dark"),
|
|
55
55
|
color: import_ds_utilities.PropTypes.string.description("Set a custom color.")
|
|
56
56
|
});
|
|
57
57
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport const defaultProps: DSSeparatorV2T.DefaultProps = {\n isVertical: false,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAEhE,MAAM,eAA4C;AAAA,EACvD,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,
|
|
4
|
+
"sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport const defaultProps: DSSeparatorV2T.DefaultProps = {\n isVertical: false,\n isDotted: false,\n colorType: 'dark',\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n isVertical: PropTypes.bool.description('Set vertical orientation.').defaultValue(false),\n isDotted: PropTypes.bool.description('Set dashed style.').defaultValue(false),\n colorType: PropTypes.oneOf(['dark', 'light'])\n .description('Set dark or light color types. Using color property will override this one.')\n .defaultValue('dark'),\n color: PropTypes.string.description('Set a custom color.'),\n};\n\nexport declare namespace DSSeparatorV2T {\n export interface DefaultProps {\n isVertical: boolean;\n isDotted: boolean;\n colorType: 'dark' | 'light';\n }\n\n export interface PropsOptional {\n color?: string;\n }\n\n export interface Props extends Partial<DefaultProps>, PropsOptional {}\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAEhE,MAAM,eAA4C;AAAA,EACvD,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,WAAW;AACb;AAEO,MAAM,YAAY,gDACpB,gDACA,uCAFoB;AAAA,EAGvB,YAAY,8BAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,KAAK;AAAA,EACtF,UAAU,8BAAU,KAAK,YAAY,mBAAmB,EAAE,aAAa,KAAK;AAAA,EAC5E,WAAW,8BAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACzC,YAAY,6EAA6E,EACzF,aAAa,MAAM;AAAA,EACtB,OAAO,8BAAU,OAAO,YAAY,qBAAqB;AAC3D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/v2/styles.js
CHANGED
|
@@ -25,32 +25,32 @@ __export(styles_exports, {
|
|
|
25
25
|
module.exports = __toCommonJS(styles_exports);
|
|
26
26
|
var React = __toESM(require("react"));
|
|
27
27
|
var import_ds_system = require("@elliemae/ds-system");
|
|
28
|
-
var import_styled_components = require("@xstyled/styled-components");
|
|
29
28
|
const defaultColorTypes = {
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
dark: "700",
|
|
30
|
+
light: "400"
|
|
32
31
|
};
|
|
33
32
|
const directionStyles = import_ds_system.css`
|
|
34
33
|
${({ isVertical }) => isVertical ? `height: 100%; width: 1px;` : `height: 1px; width: 100%;`}
|
|
35
34
|
`;
|
|
36
|
-
|
|
35
|
+
``;
|
|
36
|
+
const dottedBorder = import_ds_system.css`
|
|
37
37
|
background-image: linear-gradient(
|
|
38
38
|
to ${({ isVertical }) => !isVertical ? "right" : "bottom"},
|
|
39
|
-
${({ color, colorType }) => color || defaultColorTypes[colorType]}
|
|
39
|
+
${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]} 25%,
|
|
40
40
|
rgba(255, 255, 255, 0) 0%
|
|
41
41
|
);
|
|
42
42
|
background-position: bottom;
|
|
43
|
-
background-size: ${({ isVertical }) => isVertical ? "1px
|
|
43
|
+
background-size: ${({ isVertical }) => isVertical ? "1px 4px" : "4px 1px"};
|
|
44
44
|
background-repeat: ${({ isVertical }) => isVertical ? "repeat-y" : "repeat-x"};
|
|
45
45
|
`;
|
|
46
46
|
const solidBorder = import_ds_system.css`
|
|
47
|
-
background: ${({ color, colorType }) => color || defaultColorTypes[colorType]};
|
|
47
|
+
background: ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]};
|
|
48
48
|
`;
|
|
49
49
|
const StyledSeparator = (0, import_ds_system.styled)("div", { name: "DS-Separator", slot: "root" })`
|
|
50
50
|
${directionStyles}
|
|
51
|
-
${({
|
|
52
|
-
${
|
|
53
|
-
${
|
|
54
|
-
${
|
|
51
|
+
${({ isDotted }) => isDotted ? dottedBorder : solidBorder}
|
|
52
|
+
${import_ds_system.sizing}
|
|
53
|
+
${import_ds_system.space}
|
|
54
|
+
${import_ds_system.layout}
|
|
55
55
|
`;
|
|
56
56
|
//# sourceMappingURL=styles.js.map
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { styled, css, space, sizing, layout } 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: 'DS-Separator', slot: 'root' })<StyledSeparatorT>`\n ${directionStyles}\n ${({ isDotted }) => (isDotted ? dottedBorder : solidBorder)}\n ${sizing}\n ${space}\n ${layout}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAmD;AASnD,MAAM,oBAAoB;AAAA,EACxB,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,kBAAkB;AAAA,IACpB,CAAC,EAAE,iBAAkB,aAAa,8BAA8B;AAAA;AAEpE;AACA,MAAM,eAAe;AAAA;AAAA,SAEZ,CAAC,EAAE,iBAAkB,CAAC,aAAa,UAAU;AAAA,MAChD,CAAC,EAAE,OAAO,OAAO,gBAAgB,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAAA;AAAA;AAAA,qBAIlE,CAAC,EAAE,iBAAkB,aAAa,YAAY;AAAA,uBAC5C,CAAC,EAAE,iBAAkB,aAAa,aAAa;AAAA;AAGtE,MAAM,cAAc;AAAA,gBACJ,CAAC,EAAE,OAAO,OAAO,gBAAgB,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAG1F,MAAM,kBAAkB,6BAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,OAAO,CAAC;AAAA,IAC/E;AAAA,IACA,CAAC,EAAE,eAAgB,WAAW,eAAe;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -44,12 +44,12 @@ import { DSSeparatorV2Datatestid } from "./exported-related/DSSeparatorV2Datates
|
|
|
44
44
|
const DSSeparatorV2 = (props) => {
|
|
45
45
|
useValidateTypescriptPropTypes(props, propTypes);
|
|
46
46
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
47
|
-
const _a = propsWithDefault, {
|
|
47
|
+
const _a = propsWithDefault, { colorType, isDotted, isVertical, color } = _a, rest = __objRest(_a, ["colorType", "isDotted", "isVertical", "color"]);
|
|
48
48
|
const _b = useGetGlobalAttributes(rest), { role } = _b, globalAttrs = __objRest(_b, ["role"]);
|
|
49
49
|
const xstyledAttrs = useGetXstyledProps(rest);
|
|
50
50
|
return /* @__PURE__ */ React2.createElement(StyledSeparator, __spreadValues(__spreadValues(__spreadProps(__spreadValues({
|
|
51
|
-
colorType
|
|
52
|
-
|
|
51
|
+
colorType,
|
|
52
|
+
isDotted,
|
|
53
53
|
isVertical,
|
|
54
54
|
color,
|
|
55
55
|
role
|
|
@@ -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 React, { WeakValidationMap } 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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AACA;AAGA,MAAM,gBAAgB,CAAC,UAA6C;AAClE,iCAA+B,OAAO,SAAS;AAC/C,QAAM,mBAAmB,6BAAmD,OAAO,YAAY;AAE/F,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } 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\nconst DSSeparatorV2WithSchema = describe(DSSeparatorV2);\nDSSeparatorV2WithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSSeparatorV2, DSSeparatorV2WithSchema };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AACA;AAGA,MAAM,gBAAgB,CAAC,UAA6C;AAClE,iCAA+B,OAAO,SAAS;AAC/C,QAAM,mBAAmB,6BAAmD,OAAO,YAAY;AAE/F,QAA4D,uBAApD,aAAW,UAAU,YAAY,UAAmB,IAAT,iBAAS,IAAT,CAA3C,aAAW,YAAU,cAAY;AAEzC,QAAiC,4BAAuB,IAAI,GAApD,WAAyB,IAAhB,wBAAgB,IAAhB,CAAT;AACR,QAAM,eAAe,mBAAmB,IAAI;AAE5C,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KACK,OAAO,EAAE,oBAAoB,aAAa,aAAa,aAAa,IAAI,SAN9E;AAAA,IAOC,eAAa,wBAAwB;AAAA,MACjC,cACA,aACN;AAEJ;AAEA,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -21,13 +21,13 @@ import * as React from "react";
|
|
|
21
21
|
import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
|
|
22
22
|
const defaultProps = {
|
|
23
23
|
isVertical: false,
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
isDotted: false,
|
|
25
|
+
colorType: "dark"
|
|
26
26
|
};
|
|
27
27
|
const propTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAttributesPropTypes), xstyledPropTypes), {
|
|
28
28
|
isVertical: PropTypes.bool.description("Set vertical orientation.").defaultValue(false),
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
isDotted: PropTypes.bool.description("Set dashed style.").defaultValue(false),
|
|
30
|
+
colorType: PropTypes.oneOf(["dark", "light"]).description("Set dark or light color types. Using color property will override this one.").defaultValue("dark"),
|
|
31
31
|
color: PropTypes.string.description("Set a custom color.")
|
|
32
32
|
});
|
|
33
33
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport const defaultProps: DSSeparatorV2T.DefaultProps = {\n isVertical: false,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAEO,MAAM,eAA4C;AAAA,EACvD,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport const defaultProps: DSSeparatorV2T.DefaultProps = {\n isVertical: false,\n isDotted: false,\n colorType: 'dark',\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n isVertical: PropTypes.bool.description('Set vertical orientation.').defaultValue(false),\n isDotted: PropTypes.bool.description('Set dashed style.').defaultValue(false),\n colorType: PropTypes.oneOf(['dark', 'light'])\n .description('Set dark or light color types. Using color property will override this one.')\n .defaultValue('dark'),\n color: PropTypes.string.description('Set a custom color.'),\n};\n\nexport declare namespace DSSeparatorV2T {\n export interface DefaultProps {\n isVertical: boolean;\n isDotted: boolean;\n colorType: 'dark' | 'light';\n }\n\n export interface PropsOptional {\n color?: string;\n }\n\n export interface Props extends Partial<DefaultProps>, PropsOptional {}\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAEO,MAAM,eAA4C;AAAA,EACvD,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,WAAW;AACb;AAEO,MAAM,YAAY,gDACpB,4BACA,mBAFoB;AAAA,EAGvB,YAAY,UAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,KAAK;AAAA,EACtF,UAAU,UAAU,KAAK,YAAY,mBAAmB,EAAE,aAAa,KAAK;AAAA,EAC5E,WAAW,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACzC,YAAY,6EAA6E,EACzF,aAAa,MAAM;AAAA,EACtB,OAAO,UAAU,OAAO,YAAY,qBAAqB;AAC3D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/styles.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled, css } from "@elliemae/ds-system";
|
|
3
|
-
import { space, sizing, layout } from "@xstyled/styled-components";
|
|
2
|
+
import { styled, css, space, sizing, layout } from "@elliemae/ds-system";
|
|
4
3
|
const defaultColorTypes = {
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
dark: "700",
|
|
5
|
+
light: "400"
|
|
7
6
|
};
|
|
8
7
|
const directionStyles = css`
|
|
9
8
|
${({ isVertical }) => isVertical ? `height: 100%; width: 1px;` : `height: 1px; width: 100%;`}
|
|
10
9
|
`;
|
|
11
|
-
|
|
10
|
+
``;
|
|
11
|
+
const dottedBorder = css`
|
|
12
12
|
background-image: linear-gradient(
|
|
13
13
|
to ${({ isVertical }) => !isVertical ? "right" : "bottom"},
|
|
14
|
-
${({ color, colorType }) => color || defaultColorTypes[colorType]}
|
|
14
|
+
${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]} 25%,
|
|
15
15
|
rgba(255, 255, 255, 0) 0%
|
|
16
16
|
);
|
|
17
17
|
background-position: bottom;
|
|
18
|
-
background-size: ${({ isVertical }) => isVertical ? "1px
|
|
18
|
+
background-size: ${({ isVertical }) => isVertical ? "1px 4px" : "4px 1px"};
|
|
19
19
|
background-repeat: ${({ isVertical }) => isVertical ? "repeat-y" : "repeat-x"};
|
|
20
20
|
`;
|
|
21
21
|
const solidBorder = css`
|
|
22
|
-
background: ${({ color, colorType }) => color || defaultColorTypes[colorType]};
|
|
22
|
+
background: ${({ theme, color, colorType }) => color || theme.colors.neutral[defaultColorTypes[colorType]]};
|
|
23
23
|
`;
|
|
24
24
|
const StyledSeparator = styled("div", { name: "DS-Separator", slot: "root" })`
|
|
25
25
|
${directionStyles}
|
|
26
|
-
${({
|
|
26
|
+
${({ isDotted }) => isDotted ? dottedBorder : solidBorder}
|
|
27
27
|
${sizing}
|
|
28
28
|
${space}
|
|
29
29
|
${layout}
|
|
@@ -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
|
|
5
|
-
"mappings": "AAAA;ACAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, space, sizing, layout } 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: 'DS-Separator', slot: 'root' })<StyledSeparatorT>`\n ${directionStyles}\n ${({ isDotted }) => (isDotted ? dottedBorder : solidBorder)}\n ${sizing}\n ${space}\n ${layout}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AASA,MAAM,oBAAoB;AAAA,EACxB,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,kBAAkB;AAAA,IACpB,CAAC,EAAE,iBAAkB,aAAa,8BAA8B;AAAA;AAEpE;AACA,MAAM,eAAe;AAAA;AAAA,SAEZ,CAAC,EAAE,iBAAkB,CAAC,aAAa,UAAU;AAAA,MAChD,CAAC,EAAE,OAAO,OAAO,gBAAgB,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAAA;AAAA;AAAA,qBAIlE,CAAC,EAAE,iBAAkB,aAAa,YAAY;AAAA,uBAC5C,CAAC,EAAE,iBAAkB,aAAa,aAAa;AAAA;AAGtE,MAAM,cAAc;AAAA,gBACJ,CAAC,EAAE,OAAO,OAAO,gBAAgB,SAAS,MAAM,OAAO,QAAQ,kBAAkB;AAAA;AAG1F,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,OAAO,CAAC;AAAA,IAC/E;AAAA,IACA,CAAC,EAAE,eAAgB,WAAW,eAAe;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;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.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.65",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Separator",
|
|
6
6
|
"files": [
|
|
@@ -49,7 +49,6 @@
|
|
|
49
49
|
"@elliemae/ds-classnames": "workspace:*",
|
|
50
50
|
"@elliemae/ds-system": "workspace:*",
|
|
51
51
|
"@elliemae/ds-utilities": "workspace:*",
|
|
52
|
-
"@xstyled/styled-components": "~3.1.2",
|
|
53
52
|
"react-desc": "~4.1.3"
|
|
54
53
|
},
|
|
55
54
|
"peerDependencies": {
|