@elliemae/ds-icons 3.14.0-next.1 → 3.14.0-next.3
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/utils/SvgIcon.js +26 -17
- package/dist/cjs/utils/SvgIcon.js.map +2 -2
- package/dist/cjs/utils/styled.js +4 -4
- package/dist/cjs/utils/styled.js.map +2 -2
- package/dist/esm/utils/SvgIcon.js +26 -17
- package/dist/esm/utils/SvgIcon.js.map +2 -2
- package/dist/esm/utils/styled.js +16 -5
- package/dist/esm/utils/styled.js.map +2 -2
- package/package.json +4 -4
|
@@ -32,39 +32,45 @@ module.exports = __toCommonJS(SvgIcon_exports);
|
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
34
|
var import_react = require("react");
|
|
35
|
-
var import_ds_system = require("@elliemae/ds-system");
|
|
36
35
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
37
36
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
38
37
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
39
38
|
var import_styled = require("./styled");
|
|
40
39
|
const renderPaths = (paths) => paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: p }, i));
|
|
41
40
|
const SvgIcon = (props) => {
|
|
42
|
-
const { size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
|
|
43
|
-
const { className, width, height, style,
|
|
44
|
-
const defaultWidth = (
|
|
45
|
-
|
|
41
|
+
const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
|
|
42
|
+
const { className, width, height, style, title, ...restGlobals } = (0, import_ds_utilities.useGetGlobalAttributes)(props);
|
|
43
|
+
const defaultWidth = (0, import_react.useMemo)(() => {
|
|
44
|
+
if (width)
|
|
45
|
+
return parseInt(width.toString(), 10);
|
|
46
|
+
if (height)
|
|
47
|
+
return parseInt(height.toString(), 10);
|
|
48
|
+
return 16;
|
|
49
|
+
}, [width, height]);
|
|
50
|
+
const defaultHeight = (0, import_react.useMemo)(() => {
|
|
51
|
+
if (height)
|
|
52
|
+
return parseInt(height.toString(), 10);
|
|
53
|
+
if (width)
|
|
54
|
+
return parseInt(width.toString(), 10);
|
|
55
|
+
return 16;
|
|
56
|
+
}, [width, height]);
|
|
46
57
|
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(props);
|
|
47
58
|
const { cssClassName } = (0, import_ds_classnames.convertPropToCssClassName)("icon", className, {
|
|
48
59
|
size,
|
|
49
60
|
color
|
|
50
61
|
});
|
|
51
62
|
const finalColor = (0, import_react.useMemo)(() => {
|
|
52
|
-
if (!fill && !color)
|
|
53
|
-
return void 0;
|
|
54
|
-
let themeColor = "";
|
|
55
63
|
if (fill)
|
|
56
64
|
return fill;
|
|
57
65
|
if (!color)
|
|
58
|
-
return
|
|
66
|
+
return void 0;
|
|
59
67
|
if (color[0] === "brand-primary")
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
themeColor = `${color[0]}-${color[1]}`;
|
|
67
|
-
return import_ds_system.th.color(themeColor);
|
|
68
|
+
return `brand-${color[1]}`;
|
|
69
|
+
if (color[0] === "neutral" && color[1].toString() === "0")
|
|
70
|
+
return `neutral-000`;
|
|
71
|
+
if (color[0] === "neutral" && color[1].toString() === "900")
|
|
72
|
+
return `neutral-800`;
|
|
73
|
+
return `${color[0]}-${color[1]}`;
|
|
68
74
|
}, [color, fill]);
|
|
69
75
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
76
|
import_styled.StyledWrapper,
|
|
@@ -72,12 +78,15 @@ const SvgIcon = (props) => {
|
|
|
72
78
|
as: component,
|
|
73
79
|
ref: innerRef,
|
|
74
80
|
className: cssClassName,
|
|
81
|
+
"aria-hidden": title !== void 0 ? false : true,
|
|
82
|
+
title,
|
|
75
83
|
...restGlobals,
|
|
76
84
|
...containerProps,
|
|
77
85
|
...xstyledProps,
|
|
78
86
|
style,
|
|
79
87
|
height: !size ? defaultHeight : void 0,
|
|
80
88
|
width: !size ? defaultWidth : void 0,
|
|
89
|
+
size,
|
|
81
90
|
svgColor: finalColor,
|
|
82
91
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSvg, { viewBox, width: !size ? defaultWidth : void 0, height: !size ? defaultHeight : void 0, children: paths ? renderPaths(paths) : children })
|
|
83
92
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/SvgIcon.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/no-array-index-key */\nimport React, { useMemo } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { propTypes } from './react-desc-prop-types';\nimport { StyledSvg, StyledWrapper } from './styled';\n\nconst renderPaths = (paths: string[]) => paths.map((p, i) => <path key={i} d={p} />);\n\nconst SvgIcon: React.ComponentType<SvgIconT.Props> = (props) => {\n const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;\n\n const { className, width, height, style, title, ...restGlobals } = useGetGlobalAttributes(props);\n\n const defaultWidth = useMemo(() => {\n if (width) return parseInt(width.toString(), 10);\n if (height) return parseInt(height.toString(), 10);\n return 16;\n }, [width, height]);\n\n const defaultHeight = useMemo(() => {\n if (height) return parseInt(height.toString(), 10);\n if (width) return parseInt(width.toString(), 10);\n return 16;\n }, [width, height]);\n\n const xstyledProps = useGetXstyledProps(props);\n\n const { cssClassName } = convertPropToCssClassName('icon', className, {\n size,\n color,\n });\n\n const finalColor = useMemo(() => {\n if (fill) return fill;\n if (!color) return undefined;\n if (color[0] === 'brand-primary') return `brand-${color[1]}`;\n if (color[0] === 'neutral' && color[1].toString() === '0') return `neutral-000`;\n if (color[0] === 'neutral' && color[1].toString() === '900') return `neutral-800`;\n return `${color[0]}-${color[1]}`;\n }, [color, fill]);\n\n return (\n <StyledWrapper\n as={component}\n ref={innerRef}\n className={cssClassName}\n aria-hidden={title !== undefined ? false : true}\n title={title}\n {...restGlobals}\n {...containerProps}\n {...xstyledProps}\n style={style}\n height={!size ? defaultHeight : undefined}\n width={!size ? defaultWidth : undefined}\n size={size}\n svgColor={finalColor}\n >\n <StyledSvg viewBox={viewBox} width={!size ? defaultWidth : undefined} height={!size ? defaultHeight : undefined}>\n {paths ? renderPaths(paths) : children}\n </StyledSvg>\n </StyledWrapper>\n );\n};\n\nSvgIcon.propTypes = propTypes;\nSvgIcon.displayName = 'SvgIcon';\nconst IconWithSchema = describe(SvgIcon);\nIconWithSchema.propTypes = propTypes;\n\nexport { IconWithSchema, SvgIcon };\nexport default SvgIcon;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQsC;AAP7D,mBAA+B;AAC/B,0BAAqE;AACrE,2BAA0C;AAE1C,mCAA0B;AAC1B,oBAAyC;AAEzC,MAAM,cAAc,CAAC,UAAoB,MAAM,IAAI,CAAC,GAAG,MAAM,4CAAC,UAAa,GAAG,KAAN,CAAS,CAAE;AAEnF,MAAM,UAA+C,CAAC,UAAU;AAC9D,QAAM,EAAE,OAAO,MAAM,UAAU,gBAAgB,OAAO,MAAM,SAAS,UAAU,UAAU,IAAI;AAE7F,QAAM,EAAE,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,QAAI,4CAAuB,KAAK;AAE/F,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI;AAAO,aAAO,SAAS,MAAM,SAAS,GAAG,EAAE;AAC/C,QAAI;AAAQ,aAAO,SAAS,OAAO,SAAS,GAAG,EAAE;AACjD,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI;AAAQ,aAAO,SAAS,OAAO,SAAS,GAAG,EAAE;AACjD,QAAI;AAAO,aAAO,SAAS,MAAM,SAAS,GAAG,EAAE;AAC/C,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,QAAM,EAAE,aAAa,QAAI,gDAA0B,QAAQ,WAAW;AAAA,IACpE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,QAAI;AAAM,aAAO;AACjB,QAAI,CAAC;AAAO,aAAO;AACnB,QAAI,MAAM,OAAO;AAAiB,aAAO,SAAS,MAAM;AACxD,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAK,aAAO;AAClE,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAO,aAAO;AACpE,WAAO,GAAG,MAAM,MAAM,MAAM;AAAA,EAC9B,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,MACX,eAAa,UAAU,SAAY,QAAQ;AAAA,MAC3C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,QAAQ,CAAC,OAAO,gBAAgB;AAAA,MAChC,OAAO,CAAC,OAAO,eAAe;AAAA,MAC9B;AAAA,MACA,UAAU;AAAA,MAEV,sDAAC,2BAAU,SAAkB,OAAO,CAAC,OAAO,eAAe,QAAW,QAAQ,CAAC,OAAO,gBAAgB,QACnG,kBAAQ,YAAY,KAAK,IAAI,UAChC;AAAA;AAAA,EACF;AAEJ;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc;AACtB,MAAM,qBAAiB,8BAAS,OAAO;AACvC,eAAe,YAAY;AAG3B,IAAO,kBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/utils/styled.js
CHANGED
|
@@ -66,9 +66,6 @@ const xxsSizes = import_ds_system.css`
|
|
|
66
66
|
const standarSizes = import_ds_system.css`
|
|
67
67
|
${sSizes}
|
|
68
68
|
`;
|
|
69
|
-
const svgColorCss = import_ds_system.css`
|
|
70
|
-
fill: ${({ svgColor }) => svgColor} !important;
|
|
71
|
-
`;
|
|
72
69
|
const getSize = (size) => {
|
|
73
70
|
if (size === "xxl")
|
|
74
71
|
return xxlSizes;
|
|
@@ -115,7 +112,10 @@ const StyledWrapper = (0, import_ds_system.styled)("span", {
|
|
|
115
112
|
if (height)
|
|
116
113
|
return `height: ${height}px;`;
|
|
117
114
|
}}
|
|
118
|
-
${({ svgColor }) =>
|
|
115
|
+
${({ svgColor, theme }) => {
|
|
116
|
+
if (svgColor)
|
|
117
|
+
return `fill: ${import_ds_system.th.color(svgColor, svgColor)({ theme })};`;
|
|
118
|
+
}}
|
|
119
119
|
}
|
|
120
120
|
${import_ds_system.layout}
|
|
121
121
|
${import_ds_system.space}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import {\n styled,\n css,\n background,\n borders,\n sizing,\n space,\n boxShadows,\n flexboxes,\n layout,\n th,\n} from '@elliemae/ds-system';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { DSIconName, DSIconSlots } from './theming';\n\ninterface StyledWrapperPropsT {\n size: SvgIconT.SizeType | undefined;\n svgColor: string | undefined;\n width: number | undefined;\n height: number | undefined;\n}\n\nconst displaySizes = css`\n display: inline-flex;\n vertical-align: middle;\n`;\nconst xxlSizes = css`\n width: 64px;\n height: 64px;\n`;\n\nconst xlSizes = css`\n width: 48px;\n height: 48px;\n`;\n\nconst lSizes = css`\n width: 32px;\n height: 32px;\n`;\n\nconst mSizes = css`\n width: 24px;\n height: 24px;\n`;\n\nconst sSizes = css`\n width: 16px;\n height: 16px;\n`;\n\nconst xsSizes = css`\n width: 8px;\n height: 8px;\n`;\n\nconst xxsSizes = css`\n width: 4px;\n height: 4px;\n`;\n\nconst standarSizes = css`\n ${sSizes}\n`;\n\nconst getSize = (size: SvgIconT.SizeType | undefined) => {\n if (size === 'xxl') return xxlSizes;\n if (size === 'xl') return xlSizes;\n if (size === 'l') return lSizes;\n if (size === 'm') return mSizes;\n if (size === 's') return sSizes;\n if (size === 'xs') return xsSizes;\n if (size === 'xxs') return xxsSizes;\n return standarSizes;\n};\n\nexport const StyledSvg = styled('svg', {\n name: DSIconName,\n slot: DSIconSlots.SVG,\n})``;\n\nexport const StyledWrapper = styled('span', {\n name: DSIconName,\n slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n ${({ size, width, height }) => !width && !height && getSize(size)}\n ${({ width }) => {\n if (width) return `width: ${width}px;`;\n }}\n ${({ height }) => {\n if (height) return `height: ${height}px;`;\n }}\n ${displaySizes}\n\n &.em-ds-icon svg {\n ${({ size, width, height }) => !width && !height && getSize(size)}\n ${({ width }) => {\n if (width) return `width: ${width}px;`;\n }}\n ${({ height }) => {\n if (height) return `height: ${height}px;`;\n }}\n ${({ svgColor, theme }) => {\n if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n }}\n }\n ${layout}\n ${space}\n ${sizing}\n ${background}\n ${borders}\n ${boxShadows}\n ${flexboxes}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAWO;AAEP,qBAAwC;AASxC,MAAM,eAAe;AAAA;AAAA;AAAA;AAIrB,MAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,MAAM,UAAU;AAAA;AAAA;AAAA;AAKhB,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,UAAU;AAAA;AAAA;AAAA;AAKhB,MAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,MAAM,eAAe;AAAA,IACjB;AAAA;AAGJ,MAAM,UAAU,CAAC,SAAwC;AACvD,MAAI,SAAS;AAAO,WAAO;AAC3B,MAAI,SAAS;AAAM,WAAO;AAC1B,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAM,WAAO;AAC1B,MAAI,SAAS;AAAO,WAAO;AAC3B,SAAO;AACT;AAEO,MAAM,gBAAY,yBAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,2BAAY;AACpB,CAAC;AAEM,MAAM,oBAAgB,yBAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,2BAAY;AACpB,CAAC;AAAA,IACG,CAAC,EAAE,MAAM,OAAO,OAAO,MAAM,CAAC,SAAS,CAAC,UAAU,QAAQ,IAAI;AAAA,IAC9D,CAAC,EAAE,MAAM,MAAM;AACf,MAAI;AAAO,WAAO,UAAU;AAC9B;AAAA,IACE,CAAC,EAAE,OAAO,MAAM;AAChB,MAAI;AAAQ,WAAO,WAAW;AAChC;AAAA,IACE;AAAA;AAAA;AAAA,MAGE,CAAC,EAAE,MAAM,OAAO,OAAO,MAAM,CAAC,SAAS,CAAC,UAAU,QAAQ,IAAI;AAAA,MAC9D,CAAC,EAAE,MAAM,MAAM;AACf,MAAI;AAAO,WAAO,UAAU;AAC9B;AAAA,MACE,CAAC,EAAE,OAAO,MAAM;AAChB,MAAI;AAAQ,WAAO,WAAW;AAChC;AAAA,MACE,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AAAU,WAAO,SAAS,oBAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AACtE;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,39 +1,45 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo } from "react";
|
|
4
|
-
import { th } from "@elliemae/ds-system";
|
|
5
4
|
import { describe, useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-utilities";
|
|
6
5
|
import { convertPropToCssClassName } from "@elliemae/ds-classnames";
|
|
7
6
|
import { propTypes } from "./react-desc-prop-types";
|
|
8
7
|
import { StyledSvg, StyledWrapper } from "./styled";
|
|
9
8
|
const renderPaths = (paths) => paths.map((p, i) => /* @__PURE__ */ jsx("path", { d: p }, i));
|
|
10
9
|
const SvgIcon = (props) => {
|
|
11
|
-
const { size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
|
|
12
|
-
const { className, width, height, style,
|
|
13
|
-
const defaultWidth = ((
|
|
14
|
-
|
|
10
|
+
const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
|
|
11
|
+
const { className, width, height, style, title, ...restGlobals } = useGetGlobalAttributes(props);
|
|
12
|
+
const defaultWidth = useMemo(() => {
|
|
13
|
+
if (width)
|
|
14
|
+
return parseInt(width.toString(), 10);
|
|
15
|
+
if (height)
|
|
16
|
+
return parseInt(height.toString(), 10);
|
|
17
|
+
return 16;
|
|
18
|
+
}, [width, height]);
|
|
19
|
+
const defaultHeight = useMemo(() => {
|
|
20
|
+
if (height)
|
|
21
|
+
return parseInt(height.toString(), 10);
|
|
22
|
+
if (width)
|
|
23
|
+
return parseInt(width.toString(), 10);
|
|
24
|
+
return 16;
|
|
25
|
+
}, [width, height]);
|
|
15
26
|
const xstyledProps = useGetXstyledProps(props);
|
|
16
27
|
const { cssClassName } = convertPropToCssClassName("icon", className, {
|
|
17
28
|
size,
|
|
18
29
|
color
|
|
19
30
|
});
|
|
20
31
|
const finalColor = useMemo(() => {
|
|
21
|
-
if (!fill && !color)
|
|
22
|
-
return void 0;
|
|
23
|
-
let themeColor = "";
|
|
24
32
|
if (fill)
|
|
25
33
|
return fill;
|
|
26
34
|
if (!color)
|
|
27
|
-
return
|
|
35
|
+
return void 0;
|
|
28
36
|
if (color[0] === "brand-primary")
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
themeColor = `${color[0]}-${color[1]}`;
|
|
36
|
-
return th.color(themeColor);
|
|
37
|
+
return `brand-${color[1]}`;
|
|
38
|
+
if (color[0] === "neutral" && color[1].toString() === "0")
|
|
39
|
+
return `neutral-000`;
|
|
40
|
+
if (color[0] === "neutral" && color[1].toString() === "900")
|
|
41
|
+
return `neutral-800`;
|
|
42
|
+
return `${color[0]}-${color[1]}`;
|
|
37
43
|
}, [color, fill]);
|
|
38
44
|
return /* @__PURE__ */ jsx(
|
|
39
45
|
StyledWrapper,
|
|
@@ -41,12 +47,15 @@ const SvgIcon = (props) => {
|
|
|
41
47
|
as: component,
|
|
42
48
|
ref: innerRef,
|
|
43
49
|
className: cssClassName,
|
|
50
|
+
"aria-hidden": title !== void 0 ? false : true,
|
|
51
|
+
title,
|
|
44
52
|
...restGlobals,
|
|
45
53
|
...containerProps,
|
|
46
54
|
...xstyledProps,
|
|
47
55
|
style,
|
|
48
56
|
height: !size ? defaultHeight : void 0,
|
|
49
57
|
width: !size ? defaultWidth : void 0,
|
|
58
|
+
size,
|
|
50
59
|
svgColor: finalColor,
|
|
51
60
|
children: /* @__PURE__ */ jsx(StyledSvg, { viewBox, width: !size ? defaultWidth : void 0, height: !size ? defaultHeight : void 0, children: paths ? renderPaths(paths) : children })
|
|
52
61
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/SvgIcon.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-array-index-key */\nimport React, { useMemo } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { propTypes } from './react-desc-prop-types';\nimport { StyledSvg, StyledWrapper } from './styled';\n\nconst renderPaths = (paths: string[]) => paths.map((p, i) => <path key={i} d={p} />);\n\nconst SvgIcon: React.ComponentType<SvgIconT.Props> = (props) => {\n const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;\n\n const { className, width, height, style, title, ...restGlobals } = useGetGlobalAttributes(props);\n\n const defaultWidth = useMemo(() => {\n if (width) return parseInt(width.toString(), 10);\n if (height) return parseInt(height.toString(), 10);\n return 16;\n }, [width, height]);\n\n const defaultHeight = useMemo(() => {\n if (height) return parseInt(height.toString(), 10);\n if (width) return parseInt(width.toString(), 10);\n return 16;\n }, [width, height]);\n\n const xstyledProps = useGetXstyledProps(props);\n\n const { cssClassName } = convertPropToCssClassName('icon', className, {\n size,\n color,\n });\n\n const finalColor = useMemo(() => {\n if (fill) return fill;\n if (!color) return undefined;\n if (color[0] === 'brand-primary') return `brand-${color[1]}`;\n if (color[0] === 'neutral' && color[1].toString() === '0') return `neutral-000`;\n if (color[0] === 'neutral' && color[1].toString() === '900') return `neutral-800`;\n return `${color[0]}-${color[1]}`;\n }, [color, fill]);\n\n return (\n <StyledWrapper\n as={component}\n ref={innerRef}\n className={cssClassName}\n aria-hidden={title !== undefined ? false : true}\n title={title}\n {...restGlobals}\n {...containerProps}\n {...xstyledProps}\n style={style}\n height={!size ? defaultHeight : undefined}\n width={!size ? defaultWidth : undefined}\n size={size}\n svgColor={finalColor}\n >\n <StyledSvg viewBox={viewBox} width={!size ? defaultWidth : undefined} height={!size ? defaultHeight : undefined}>\n {paths ? renderPaths(paths) : children}\n </StyledSvg>\n </StyledWrapper>\n );\n};\n\nSvgIcon.propTypes = propTypes;\nSvgIcon.displayName = 'SvgIcon';\nconst IconWithSchema = describe(SvgIcon);\nIconWithSchema.propTypes = propTypes;\n\nexport { IconWithSchema, SvgIcon };\nexport default SvgIcon;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACQsC;AAP7D,SAAgB,eAAe;AAC/B,SAAS,UAAU,wBAAwB,0BAA0B;AACrE,SAAS,iCAAiC;AAE1C,SAAS,iBAAiB;AAC1B,SAAS,WAAW,qBAAqB;AAEzC,MAAM,cAAc,CAAC,UAAoB,MAAM,IAAI,CAAC,GAAG,MAAM,oBAAC,UAAa,GAAG,KAAN,CAAS,CAAE;AAEnF,MAAM,UAA+C,CAAC,UAAU;AAC9D,QAAM,EAAE,OAAO,MAAM,UAAU,gBAAgB,OAAO,MAAM,SAAS,UAAU,UAAU,IAAI;AAE7F,QAAM,EAAE,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,IAAI,uBAAuB,KAAK;AAE/F,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI;AAAO,aAAO,SAAS,MAAM,SAAS,GAAG,EAAE;AAC/C,QAAI;AAAQ,aAAO,SAAS,OAAO,SAAS,GAAG,EAAE;AACjD,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI;AAAQ,aAAO,SAAS,OAAO,SAAS,GAAG,EAAE;AACjD,QAAI;AAAO,aAAO,SAAS,MAAM,SAAS,GAAG,EAAE;AAC/C,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,EAAE,aAAa,IAAI,0BAA0B,QAAQ,WAAW;AAAA,IACpE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI;AAAM,aAAO;AACjB,QAAI,CAAC;AAAO,aAAO;AACnB,QAAI,MAAM,OAAO;AAAiB,aAAO,SAAS,MAAM;AACxD,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAK,aAAO;AAClE,QAAI,MAAM,OAAO,aAAa,MAAM,GAAG,SAAS,MAAM;AAAO,aAAO;AACpE,WAAO,GAAG,MAAM,MAAM,MAAM;AAAA,EAC9B,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,MACX,eAAa,UAAU,SAAY,QAAQ;AAAA,MAC3C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,QAAQ,CAAC,OAAO,gBAAgB;AAAA,MAChC,OAAO,CAAC,OAAO,eAAe;AAAA,MAC9B;AAAA,MACA,UAAU;AAAA,MAEV,8BAAC,aAAU,SAAkB,OAAO,CAAC,OAAO,eAAe,QAAW,QAAQ,CAAC,OAAO,gBAAgB,QACnG,kBAAQ,YAAY,KAAK,IAAI,UAChC;AAAA;AAAA,EACF;AAEJ;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc;AACtB,MAAM,iBAAiB,SAAS,OAAO;AACvC,eAAe,YAAY;AAG3B,IAAO,kBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/utils/styled.js
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
styled,
|
|
4
|
+
css,
|
|
5
|
+
background,
|
|
6
|
+
borders,
|
|
7
|
+
sizing,
|
|
8
|
+
space,
|
|
9
|
+
boxShadows,
|
|
10
|
+
flexboxes,
|
|
11
|
+
layout,
|
|
12
|
+
th
|
|
13
|
+
} from "@elliemae/ds-system";
|
|
3
14
|
import { DSIconName, DSIconSlots } from "./theming";
|
|
4
15
|
const displaySizes = css`
|
|
5
16
|
display: inline-flex;
|
|
@@ -36,9 +47,6 @@ const xxsSizes = css`
|
|
|
36
47
|
const standarSizes = css`
|
|
37
48
|
${sSizes}
|
|
38
49
|
`;
|
|
39
|
-
const svgColorCss = css`
|
|
40
|
-
fill: ${({ svgColor }) => svgColor} !important;
|
|
41
|
-
`;
|
|
42
50
|
const getSize = (size) => {
|
|
43
51
|
if (size === "xxl")
|
|
44
52
|
return xxlSizes;
|
|
@@ -85,7 +93,10 @@ const StyledWrapper = styled("span", {
|
|
|
85
93
|
if (height)
|
|
86
94
|
return `height: ${height}px;`;
|
|
87
95
|
}}
|
|
88
|
-
${({ svgColor }) =>
|
|
96
|
+
${({ svgColor, theme }) => {
|
|
97
|
+
if (svgColor)
|
|
98
|
+
return `fill: ${th.color(svgColor, svgColor)({ theme })};`;
|
|
99
|
+
}}
|
|
89
100
|
}
|
|
90
101
|
${layout}
|
|
91
102
|
${space}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n styled,\n css,\n background,\n borders,\n sizing,\n space,\n boxShadows,\n flexboxes,\n layout,\n th,\n} from '@elliemae/ds-system';\nimport type { SvgIconT } from './react-desc-prop-types';\nimport { DSIconName, DSIconSlots } from './theming';\n\ninterface StyledWrapperPropsT {\n size: SvgIconT.SizeType | undefined;\n svgColor: string | undefined;\n width: number | undefined;\n height: number | undefined;\n}\n\nconst displaySizes = css`\n display: inline-flex;\n vertical-align: middle;\n`;\nconst xxlSizes = css`\n width: 64px;\n height: 64px;\n`;\n\nconst xlSizes = css`\n width: 48px;\n height: 48px;\n`;\n\nconst lSizes = css`\n width: 32px;\n height: 32px;\n`;\n\nconst mSizes = css`\n width: 24px;\n height: 24px;\n`;\n\nconst sSizes = css`\n width: 16px;\n height: 16px;\n`;\n\nconst xsSizes = css`\n width: 8px;\n height: 8px;\n`;\n\nconst xxsSizes = css`\n width: 4px;\n height: 4px;\n`;\n\nconst standarSizes = css`\n ${sSizes}\n`;\n\nconst getSize = (size: SvgIconT.SizeType | undefined) => {\n if (size === 'xxl') return xxlSizes;\n if (size === 'xl') return xlSizes;\n if (size === 'l') return lSizes;\n if (size === 'm') return mSizes;\n if (size === 's') return sSizes;\n if (size === 'xs') return xsSizes;\n if (size === 'xxs') return xxsSizes;\n return standarSizes;\n};\n\nexport const StyledSvg = styled('svg', {\n name: DSIconName,\n slot: DSIconSlots.SVG,\n})``;\n\nexport const StyledWrapper = styled('span', {\n name: DSIconName,\n slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n ${({ size, width, height }) => !width && !height && getSize(size)}\n ${({ width }) => {\n if (width) return `width: ${width}px;`;\n }}\n ${({ height }) => {\n if (height) return `height: ${height}px;`;\n }}\n ${displaySizes}\n\n &.em-ds-icon svg {\n ${({ size, width, height }) => !width && !height && getSize(size)}\n ${({ width }) => {\n if (width) return `width: ${width}px;`;\n }}\n ${({ height }) => {\n if (height) return `height: ${height}px;`;\n }}\n ${({ svgColor, theme }) => {\n if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n }}\n }\n ${layout}\n ${space}\n ${sizing}\n ${background}\n ${borders}\n ${boxShadows}\n ${flexboxes}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY,mBAAmB;AASxC,MAAM,eAAe;AAAA;AAAA;AAAA;AAIrB,MAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,MAAM,UAAU;AAAA;AAAA;AAAA;AAKhB,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,SAAS;AAAA;AAAA;AAAA;AAKf,MAAM,UAAU;AAAA;AAAA;AAAA;AAKhB,MAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,MAAM,eAAe;AAAA,IACjB;AAAA;AAGJ,MAAM,UAAU,CAAC,SAAwC;AACvD,MAAI,SAAS;AAAO,WAAO;AAC3B,MAAI,SAAS;AAAM,WAAO;AAC1B,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAM,WAAO;AAC1B,MAAI,SAAS;AAAO,WAAO;AAC3B,SAAO;AACT;AAEO,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,YAAY;AACpB,CAAC;AAEM,MAAM,gBAAgB,OAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,YAAY;AACpB,CAAC;AAAA,IACG,CAAC,EAAE,MAAM,OAAO,OAAO,MAAM,CAAC,SAAS,CAAC,UAAU,QAAQ,IAAI;AAAA,IAC9D,CAAC,EAAE,MAAM,MAAM;AACf,MAAI;AAAO,WAAO,UAAU;AAC9B;AAAA,IACE,CAAC,EAAE,OAAO,MAAM;AAChB,MAAI;AAAQ,WAAO,WAAW;AAChC;AAAA,IACE;AAAA;AAAA;AAAA,MAGE,CAAC,EAAE,MAAM,OAAO,OAAO,MAAM,CAAC,SAAS,CAAC,UAAU,QAAQ,IAAI;AAAA,MAC9D,CAAC,EAAE,MAAM,MAAM;AACf,MAAI;AAAO,WAAO,UAAU;AAC9B;AAAA,MACE,CAAC,EAAE,OAAO,MAAM;AAChB,MAAI;AAAQ,WAAO,WAAW;AAChC;AAAA,MACE,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AAAU,WAAO,SAAS,GAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AACtE;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;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-icons",
|
|
3
|
-
"version": "3.14.0-next.
|
|
3
|
+
"version": "3.14.0-next.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Icons",
|
|
6
6
|
"files": [
|
|
@@ -1571,9 +1571,9 @@
|
|
|
1571
1571
|
"indent": 4
|
|
1572
1572
|
},
|
|
1573
1573
|
"dependencies": {
|
|
1574
|
-
"@elliemae/ds-classnames": "3.14.0-next.
|
|
1575
|
-
"@elliemae/ds-system": "3.14.0-next.
|
|
1576
|
-
"@elliemae/ds-utilities": "3.14.0-next.
|
|
1574
|
+
"@elliemae/ds-classnames": "3.14.0-next.3",
|
|
1575
|
+
"@elliemae/ds-system": "3.14.0-next.3",
|
|
1576
|
+
"@elliemae/ds-utilities": "3.14.0-next.3"
|
|
1577
1577
|
},
|
|
1578
1578
|
"devDependencies": {
|
|
1579
1579
|
"styled-components": "~5.3.6"
|