@elliemae/ds-icons 3.14.0-rc.3 → 3.14.0-rc.5
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 +16 -8
- package/dist/cjs/utils/SvgIcon.js.map +2 -2
- package/dist/cjs/utils/pixToRem.js +1 -1
- package/dist/cjs/utils/pixToRem.js.map +1 -1
- package/dist/cjs/utils/styled.js +80 -48
- package/dist/cjs/utils/styled.js.map +2 -2
- package/dist/esm/utils/SvgIcon.js +16 -8
- package/dist/esm/utils/SvgIcon.js.map +2 -2
- package/dist/esm/utils/pixToRem.js +1 -1
- package/dist/esm/utils/pixToRem.js.map +1 -1
- package/dist/esm/utils/styled.js +80 -55
- package/dist/esm/utils/styled.js.map +2 -2
- package/package.json +5 -4
|
@@ -36,7 +36,6 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
|
36
36
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
37
37
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
38
38
|
var import_styled = require("./styled");
|
|
39
|
-
var import_pixToRem = require("./pixToRem");
|
|
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
41
|
const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
|
|
@@ -47,10 +46,10 @@ const SvgIcon = (props) => {
|
|
|
47
46
|
if (String(height).includes("rem"))
|
|
48
47
|
return height;
|
|
49
48
|
if (width)
|
|
50
|
-
return
|
|
49
|
+
return parseInt(width.toString(), 10);
|
|
51
50
|
if (height)
|
|
52
|
-
return
|
|
53
|
-
return
|
|
51
|
+
return parseInt(height.toString(), 10);
|
|
52
|
+
return 16;
|
|
54
53
|
}, [width, height]);
|
|
55
54
|
const defaultHeight = (0, import_react.useMemo)(() => {
|
|
56
55
|
if (String(height).includes("rem"))
|
|
@@ -58,10 +57,10 @@ const SvgIcon = (props) => {
|
|
|
58
57
|
if (String(width).includes("rem"))
|
|
59
58
|
return width;
|
|
60
59
|
if (height)
|
|
61
|
-
return
|
|
60
|
+
return parseInt(height.toString(), 10);
|
|
62
61
|
if (width)
|
|
63
|
-
return
|
|
64
|
-
return
|
|
62
|
+
return parseInt(width.toString(), 10);
|
|
63
|
+
return 16;
|
|
65
64
|
}, [width, height]);
|
|
66
65
|
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(props);
|
|
67
66
|
const { cssClassName } = (0, import_ds_classnames.convertPropToCssClassName)("icon", className, {
|
|
@@ -97,7 +96,16 @@ const SvgIcon = (props) => {
|
|
|
97
96
|
width: !size ? defaultWidth : void 0,
|
|
98
97
|
size,
|
|
99
98
|
svgColor: finalColor,
|
|
100
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
99
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
100
|
+
import_styled.StyledSvg,
|
|
101
|
+
{
|
|
102
|
+
size,
|
|
103
|
+
viewBox,
|
|
104
|
+
width: !size ? defaultWidth : void 0,
|
|
105
|
+
height: !size ? defaultHeight : void 0,
|
|
106
|
+
children: paths ? renderPaths(paths) : children
|
|
107
|
+
}
|
|
108
|
+
)
|
|
101
109
|
}
|
|
102
110
|
);
|
|
103
111
|
};
|
|
@@ -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 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';\
|
|
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 (String(width).includes('rem')) return width;\n if (String(height).includes('rem')) return height;\n if (width) return parseInt(width.toString(), 10);\n if (height) return parseInt(height.toString(), 10);\n\n return 16;\n }, [width, height]);\n\n const defaultHeight = useMemo(() => {\n if (String(height).includes('rem')) return height;\n if (String(width).includes('rem')) return width;\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\n size={size}\n viewBox={viewBox}\n width={!size ? defaultWidth : undefined}\n height={!size ? defaultHeight : undefined}\n >\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,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI;AAAO,aAAO,SAAS,MAAM,SAAS,GAAG,EAAE;AAC/C,QAAI;AAAQ,aAAO,SAAS,OAAO,SAAS,GAAG,EAAE;AAEjD,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,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;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAO,CAAC,OAAO,eAAe;AAAA,UAC9B,QAAQ,CAAC,OAAO,gBAAgB;AAAA,UAE/B,kBAAQ,YAAY,KAAK,IAAI;AAAA;AAAA,MAChC;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
|
}
|
|
@@ -28,5 +28,5 @@ __export(pixToRem_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(pixToRem_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
const pixToRem = (size) => `${size /
|
|
31
|
+
const pixToRem = (size) => `${size / 13}rem`;
|
|
32
32
|
//# sourceMappingURL=pixToRem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/pixToRem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const pixToRem = (size: number) => `${size /
|
|
4
|
+
"sourcesContent": ["export const pixToRem = (size: number) => `${size / 13}rem`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,WAAW,CAAC,SAAiB,GAAG,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/utils/styled.js
CHANGED
|
@@ -36,32 +36,60 @@ const displaySizes = import_ds_system.css`
|
|
|
36
36
|
vertical-align: middle;
|
|
37
37
|
`;
|
|
38
38
|
const xxlSizes = import_ds_system.css`
|
|
39
|
-
width:
|
|
40
|
-
height:
|
|
39
|
+
width: 4rem;
|
|
40
|
+
height: 4rem;
|
|
41
|
+
@media (min-width: ${import_ds_system.th.breakpoint.small}) {
|
|
42
|
+
width: 4.923rem;
|
|
43
|
+
height: 4.923rem;
|
|
44
|
+
}
|
|
41
45
|
`;
|
|
42
46
|
const xlSizes = import_ds_system.css`
|
|
43
|
-
width:
|
|
44
|
-
height:
|
|
47
|
+
width: 3rem;
|
|
48
|
+
height: 3rem;
|
|
49
|
+
@media (min-width: ${import_ds_system.th.breakpoint.small}) {
|
|
50
|
+
width: 3.692rem;
|
|
51
|
+
height: 3.692rem;
|
|
52
|
+
}
|
|
45
53
|
`;
|
|
46
54
|
const lSizes = import_ds_system.css`
|
|
47
|
-
width:
|
|
48
|
-
height:
|
|
55
|
+
width: 2rem;
|
|
56
|
+
height: 2rem;
|
|
57
|
+
@media (min-width: ${import_ds_system.th.breakpoint.small}) {
|
|
58
|
+
width: 2.462rem;
|
|
59
|
+
height: 2.462rem;
|
|
60
|
+
}
|
|
49
61
|
`;
|
|
50
62
|
const mSizes = import_ds_system.css`
|
|
51
|
-
width: 1.
|
|
52
|
-
height: 1.
|
|
63
|
+
width: 1.5rem;
|
|
64
|
+
height: 1.5rem;
|
|
65
|
+
@media (min-width: ${import_ds_system.th.breakpoint.small}) {
|
|
66
|
+
width: 1.846rem;
|
|
67
|
+
height: 1.846rem;
|
|
68
|
+
}
|
|
53
69
|
`;
|
|
54
70
|
const sSizes = import_ds_system.css`
|
|
55
|
-
width:
|
|
56
|
-
height:
|
|
71
|
+
width: 1rem;
|
|
72
|
+
height: 1rem;
|
|
73
|
+
@media (min-width: ${import_ds_system.th.breakpoint.small}) {
|
|
74
|
+
width: 1.231rem;
|
|
75
|
+
height: 1.231rem;
|
|
76
|
+
}
|
|
57
77
|
`;
|
|
58
78
|
const xsSizes = import_ds_system.css`
|
|
59
|
-
width: 0.
|
|
60
|
-
height: 0.
|
|
79
|
+
width: 0.5rem;
|
|
80
|
+
height: 0.5rem;
|
|
81
|
+
@media (min-width: ${import_ds_system.th.breakpoint.small}) {
|
|
82
|
+
width: 0.615rem;
|
|
83
|
+
height: 0.615rem;
|
|
84
|
+
}
|
|
61
85
|
`;
|
|
62
86
|
const xxsSizes = import_ds_system.css`
|
|
63
|
-
width: 0.
|
|
64
|
-
height: 0.
|
|
87
|
+
width: 0.25rem;
|
|
88
|
+
height: 0.25rem;
|
|
89
|
+
@media (min-width: ${import_ds_system.th.breakpoint.small}) {
|
|
90
|
+
width: 0.308rem;
|
|
91
|
+
height: 0.308rem;
|
|
92
|
+
}
|
|
65
93
|
`;
|
|
66
94
|
const standarSizes = import_ds_system.css`
|
|
67
95
|
${sSizes}
|
|
@@ -86,51 +114,55 @@ const getSize = (size) => {
|
|
|
86
114
|
const StyledSvg = (0, import_ds_system.styled)("svg", {
|
|
87
115
|
name: import_theming.DSIconName,
|
|
88
116
|
slot: import_theming.DSIconSlots.SVG
|
|
89
|
-
})
|
|
117
|
+
})`
|
|
118
|
+
${({ width, height, theme, size }) => {
|
|
119
|
+
if (size)
|
|
120
|
+
return getSize(size);
|
|
121
|
+
if (String(width).includes("rem") && String(height).includes("rem"))
|
|
122
|
+
return `
|
|
123
|
+
width: ${width};
|
|
124
|
+
height: ${height};
|
|
125
|
+
`;
|
|
126
|
+
return `
|
|
127
|
+
width: ${width / 16}rem;
|
|
128
|
+
height: ${height / 16}rem;
|
|
129
|
+
|
|
130
|
+
@media (min-width: ${theme.breakpoints?.small}) {
|
|
131
|
+
width: ${width / 13}rem;
|
|
132
|
+
height: ${height / 13}rem;
|
|
133
|
+
|
|
134
|
+
}`;
|
|
135
|
+
}}
|
|
136
|
+
`;
|
|
90
137
|
const StyledWrapper = (0, import_ds_system.styled)("span", {
|
|
91
138
|
name: import_theming.DSIconName,
|
|
92
139
|
slot: import_theming.DSIconSlots.ICON_WRAPPER
|
|
93
140
|
})`
|
|
94
|
-
${({
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
141
|
+
${({ width, height, size, theme }) => {
|
|
142
|
+
if (size)
|
|
143
|
+
return getSize(size);
|
|
144
|
+
if (String(width).includes("rem") && String(height).includes("rem"))
|
|
145
|
+
return `
|
|
146
|
+
width: ${width};
|
|
147
|
+
height: ${height};
|
|
148
|
+
`;
|
|
149
|
+
return `
|
|
150
|
+
width: ${width / 16}rem;
|
|
151
|
+
height: ${height / 16}rem;
|
|
152
|
+
|
|
153
|
+
@media (min-width: ${theme.breakpoints?.small}) {
|
|
154
|
+
width: ${width / 13}rem;
|
|
155
|
+
height: ${height / 13}rem;
|
|
156
|
+
|
|
157
|
+
}`;
|
|
106
158
|
}}
|
|
107
159
|
${displaySizes}
|
|
108
160
|
|
|
109
|
-
|
|
110
|
-
${({ size, width, height }) => !width && !height && getSize(size)}
|
|
111
|
-
${({ width }) => {
|
|
112
|
-
if (String(width).includes("rem"))
|
|
113
|
-
return `width: ${width};`;
|
|
114
|
-
if (width)
|
|
115
|
-
return `width: ${width}px;`;
|
|
116
|
-
}}
|
|
117
|
-
${({ height }) => {
|
|
118
|
-
if (String(height).includes("rem"))
|
|
119
|
-
return `height: ${height};`;
|
|
120
|
-
if (height)
|
|
121
|
-
return `height: ${height}px;`;
|
|
122
|
-
}}
|
|
161
|
+
& svg {
|
|
123
162
|
${({ svgColor, theme }) => {
|
|
124
163
|
if (svgColor)
|
|
125
164
|
return `fill: ${import_ds_system.th.color(svgColor, svgColor)({ theme })};`;
|
|
126
165
|
}}
|
|
127
166
|
}
|
|
128
|
-
${import_ds_system.layout}
|
|
129
|
-
${import_ds_system.space}
|
|
130
|
-
${import_ds_system.sizing}
|
|
131
|
-
${import_ds_system.background}
|
|
132
|
-
${import_ds_system.borders}
|
|
133
|
-
${import_ds_system.boxShadows}
|
|
134
|
-
${import_ds_system.flexboxes}
|
|
135
167
|
`;
|
|
136
168
|
//# sourceMappingURL=styled.js.map
|
|
@@ -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 {\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: 4.923rem;\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;
|
|
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: 4rem;\n height: 4rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 4.923rem;\n height: 4.923rem;\n }\n`;\n\nconst xlSizes = css`\n width: 3rem;\n height: 3rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 3.692rem;\n height: 3.692rem;\n }\n`;\n\nconst lSizes = css`\n width: 2rem;\n height: 2rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 2.462rem;\n height: 2.462rem;\n }\n`;\n\nconst mSizes = css`\n width: 1.5rem;\n height: 1.5rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 1.846rem;\n height: 1.846rem;\n }\n`;\n\nconst sSizes = css`\n width: 1rem;\n height: 1rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 1.231rem;\n height: 1.231rem;\n }\n`;\n\nconst xsSizes = css`\n width: 0.5rem;\n height: 0.5rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 0.615rem;\n height: 0.615rem;\n }\n`;\n\nconst xxsSizes = css`\n width: 0.25rem;\n height: 0.25rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 0.308rem;\n height: 0.308rem;\n }\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 ${({ width, height, theme, size }) => {\n if (size) return getSize(size);\n\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n`;\n\nexport const StyledWrapper = styled('span', {\n name: DSIconName,\n slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n ${({ width, height, size, theme }) => {\n if (size) return getSize(size);\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n ${displaySizes}\n\n & svg {\n ${({ svgColor, theme }) => {\n if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n }}\n }\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,uBAGM,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGM,oBAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,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;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,OAAO,KAAK,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAE7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA;AAGK,MAAM,oBAAgB,yBAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,2BAAY;AACpB,CAAC;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,MAAM,MAAM,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAC7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA,IACE;AAAA;AAAA;AAAA,MAGE,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AAAU,WAAO,SAAS,oBAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AACtE;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,6 @@ import { describe, useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/
|
|
|
5
5
|
import { convertPropToCssClassName } from "@elliemae/ds-classnames";
|
|
6
6
|
import { propTypes } from "./react-desc-prop-types";
|
|
7
7
|
import { StyledSvg, StyledWrapper } from "./styled";
|
|
8
|
-
import { pixToRem } from "./pixToRem";
|
|
9
8
|
const renderPaths = (paths) => paths.map((p, i) => /* @__PURE__ */ jsx("path", { d: p }, i));
|
|
10
9
|
const SvgIcon = (props) => {
|
|
11
10
|
const { color, size, innerRef, containerProps, paths, fill, viewBox, children, component } = props;
|
|
@@ -16,10 +15,10 @@ const SvgIcon = (props) => {
|
|
|
16
15
|
if (String(height).includes("rem"))
|
|
17
16
|
return height;
|
|
18
17
|
if (width)
|
|
19
|
-
return
|
|
18
|
+
return parseInt(width.toString(), 10);
|
|
20
19
|
if (height)
|
|
21
|
-
return
|
|
22
|
-
return
|
|
20
|
+
return parseInt(height.toString(), 10);
|
|
21
|
+
return 16;
|
|
23
22
|
}, [width, height]);
|
|
24
23
|
const defaultHeight = useMemo(() => {
|
|
25
24
|
if (String(height).includes("rem"))
|
|
@@ -27,10 +26,10 @@ const SvgIcon = (props) => {
|
|
|
27
26
|
if (String(width).includes("rem"))
|
|
28
27
|
return width;
|
|
29
28
|
if (height)
|
|
30
|
-
return
|
|
29
|
+
return parseInt(height.toString(), 10);
|
|
31
30
|
if (width)
|
|
32
|
-
return
|
|
33
|
-
return
|
|
31
|
+
return parseInt(width.toString(), 10);
|
|
32
|
+
return 16;
|
|
34
33
|
}, [width, height]);
|
|
35
34
|
const xstyledProps = useGetXstyledProps(props);
|
|
36
35
|
const { cssClassName } = convertPropToCssClassName("icon", className, {
|
|
@@ -66,7 +65,16 @@ const SvgIcon = (props) => {
|
|
|
66
65
|
width: !size ? defaultWidth : void 0,
|
|
67
66
|
size,
|
|
68
67
|
svgColor: finalColor,
|
|
69
|
-
children: /* @__PURE__ */ jsx(
|
|
68
|
+
children: /* @__PURE__ */ jsx(
|
|
69
|
+
StyledSvg,
|
|
70
|
+
{
|
|
71
|
+
size,
|
|
72
|
+
viewBox,
|
|
73
|
+
width: !size ? defaultWidth : void 0,
|
|
74
|
+
height: !size ? defaultHeight : void 0,
|
|
75
|
+
children: paths ? renderPaths(paths) : children
|
|
76
|
+
}
|
|
77
|
+
)
|
|
70
78
|
}
|
|
71
79
|
);
|
|
72
80
|
};
|
|
@@ -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 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';\
|
|
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 (String(width).includes('rem')) return width;\n if (String(height).includes('rem')) return height;\n if (width) return parseInt(width.toString(), 10);\n if (height) return parseInt(height.toString(), 10);\n\n return 16;\n }, [width, height]);\n\n const defaultHeight = useMemo(() => {\n if (String(height).includes('rem')) return height;\n if (String(width).includes('rem')) return width;\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\n size={size}\n viewBox={viewBox}\n width={!size ? defaultWidth : undefined}\n height={!size ? defaultHeight : undefined}\n >\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,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI;AAAO,aAAO,SAAS,MAAM,SAAS,GAAG,EAAE;AAC/C,QAAI;AAAQ,aAAO,SAAS,OAAO,SAAS,GAAG,EAAE;AAEjD,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,OAAO,MAAM,EAAE,SAAS,KAAK;AAAG,aAAO;AAC3C,QAAI,OAAO,KAAK,EAAE,SAAS,KAAK;AAAG,aAAO;AAC1C,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;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAO,CAAC,OAAO,eAAe;AAAA,UAC9B,QAAQ,CAAC,OAAO,gBAAgB;AAAA,UAE/B,kBAAQ,YAAY,KAAK,IAAI;AAAA;AAAA,MAChC;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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/pixToRem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const pixToRem = (size: number) => `${size /
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const pixToRem = (size: number) => `${size / 13}rem`;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,WAAW,CAAC,SAAiB,GAAG,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/utils/styled.js
CHANGED
|
@@ -2,13 +2,6 @@ import * as React from "react";
|
|
|
2
2
|
import {
|
|
3
3
|
styled,
|
|
4
4
|
css,
|
|
5
|
-
background,
|
|
6
|
-
borders,
|
|
7
|
-
sizing,
|
|
8
|
-
space,
|
|
9
|
-
boxShadows,
|
|
10
|
-
flexboxes,
|
|
11
|
-
layout,
|
|
12
5
|
th
|
|
13
6
|
} from "@elliemae/ds-system";
|
|
14
7
|
import { DSIconName, DSIconSlots } from "./theming";
|
|
@@ -17,32 +10,60 @@ const displaySizes = css`
|
|
|
17
10
|
vertical-align: middle;
|
|
18
11
|
`;
|
|
19
12
|
const xxlSizes = css`
|
|
20
|
-
width:
|
|
21
|
-
height:
|
|
13
|
+
width: 4rem;
|
|
14
|
+
height: 4rem;
|
|
15
|
+
@media (min-width: ${th.breakpoint.small}) {
|
|
16
|
+
width: 4.923rem;
|
|
17
|
+
height: 4.923rem;
|
|
18
|
+
}
|
|
22
19
|
`;
|
|
23
20
|
const xlSizes = css`
|
|
24
|
-
width:
|
|
25
|
-
height:
|
|
21
|
+
width: 3rem;
|
|
22
|
+
height: 3rem;
|
|
23
|
+
@media (min-width: ${th.breakpoint.small}) {
|
|
24
|
+
width: 3.692rem;
|
|
25
|
+
height: 3.692rem;
|
|
26
|
+
}
|
|
26
27
|
`;
|
|
27
28
|
const lSizes = css`
|
|
28
|
-
width:
|
|
29
|
-
height:
|
|
29
|
+
width: 2rem;
|
|
30
|
+
height: 2rem;
|
|
31
|
+
@media (min-width: ${th.breakpoint.small}) {
|
|
32
|
+
width: 2.462rem;
|
|
33
|
+
height: 2.462rem;
|
|
34
|
+
}
|
|
30
35
|
`;
|
|
31
36
|
const mSizes = css`
|
|
32
|
-
width: 1.
|
|
33
|
-
height: 1.
|
|
37
|
+
width: 1.5rem;
|
|
38
|
+
height: 1.5rem;
|
|
39
|
+
@media (min-width: ${th.breakpoint.small}) {
|
|
40
|
+
width: 1.846rem;
|
|
41
|
+
height: 1.846rem;
|
|
42
|
+
}
|
|
34
43
|
`;
|
|
35
44
|
const sSizes = css`
|
|
36
|
-
width:
|
|
37
|
-
height:
|
|
45
|
+
width: 1rem;
|
|
46
|
+
height: 1rem;
|
|
47
|
+
@media (min-width: ${th.breakpoint.small}) {
|
|
48
|
+
width: 1.231rem;
|
|
49
|
+
height: 1.231rem;
|
|
50
|
+
}
|
|
38
51
|
`;
|
|
39
52
|
const xsSizes = css`
|
|
40
|
-
width: 0.
|
|
41
|
-
height: 0.
|
|
53
|
+
width: 0.5rem;
|
|
54
|
+
height: 0.5rem;
|
|
55
|
+
@media (min-width: ${th.breakpoint.small}) {
|
|
56
|
+
width: 0.615rem;
|
|
57
|
+
height: 0.615rem;
|
|
58
|
+
}
|
|
42
59
|
`;
|
|
43
60
|
const xxsSizes = css`
|
|
44
|
-
width: 0.
|
|
45
|
-
height: 0.
|
|
61
|
+
width: 0.25rem;
|
|
62
|
+
height: 0.25rem;
|
|
63
|
+
@media (min-width: ${th.breakpoint.small}) {
|
|
64
|
+
width: 0.308rem;
|
|
65
|
+
height: 0.308rem;
|
|
66
|
+
}
|
|
46
67
|
`;
|
|
47
68
|
const standarSizes = css`
|
|
48
69
|
${sSizes}
|
|
@@ -67,52 +88,56 @@ const getSize = (size) => {
|
|
|
67
88
|
const StyledSvg = styled("svg", {
|
|
68
89
|
name: DSIconName,
|
|
69
90
|
slot: DSIconSlots.SVG
|
|
70
|
-
})
|
|
91
|
+
})`
|
|
92
|
+
${({ width, height, theme, size }) => {
|
|
93
|
+
if (size)
|
|
94
|
+
return getSize(size);
|
|
95
|
+
if (String(width).includes("rem") && String(height).includes("rem"))
|
|
96
|
+
return `
|
|
97
|
+
width: ${width};
|
|
98
|
+
height: ${height};
|
|
99
|
+
`;
|
|
100
|
+
return `
|
|
101
|
+
width: ${width / 16}rem;
|
|
102
|
+
height: ${height / 16}rem;
|
|
103
|
+
|
|
104
|
+
@media (min-width: ${theme.breakpoints?.small}) {
|
|
105
|
+
width: ${width / 13}rem;
|
|
106
|
+
height: ${height / 13}rem;
|
|
107
|
+
|
|
108
|
+
}`;
|
|
109
|
+
}}
|
|
110
|
+
`;
|
|
71
111
|
const StyledWrapper = styled("span", {
|
|
72
112
|
name: DSIconName,
|
|
73
113
|
slot: DSIconSlots.ICON_WRAPPER
|
|
74
114
|
})`
|
|
75
|
-
${({
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
115
|
+
${({ width, height, size, theme }) => {
|
|
116
|
+
if (size)
|
|
117
|
+
return getSize(size);
|
|
118
|
+
if (String(width).includes("rem") && String(height).includes("rem"))
|
|
119
|
+
return `
|
|
120
|
+
width: ${width};
|
|
121
|
+
height: ${height};
|
|
122
|
+
`;
|
|
123
|
+
return `
|
|
124
|
+
width: ${width / 16}rem;
|
|
125
|
+
height: ${height / 16}rem;
|
|
126
|
+
|
|
127
|
+
@media (min-width: ${theme.breakpoints?.small}) {
|
|
128
|
+
width: ${width / 13}rem;
|
|
129
|
+
height: ${height / 13}rem;
|
|
130
|
+
|
|
131
|
+
}`;
|
|
87
132
|
}}
|
|
88
133
|
${displaySizes}
|
|
89
134
|
|
|
90
|
-
|
|
91
|
-
${({ size, width, height }) => !width && !height && getSize(size)}
|
|
92
|
-
${({ width }) => {
|
|
93
|
-
if (String(width).includes("rem"))
|
|
94
|
-
return `width: ${width};`;
|
|
95
|
-
if (width)
|
|
96
|
-
return `width: ${width}px;`;
|
|
97
|
-
}}
|
|
98
|
-
${({ height }) => {
|
|
99
|
-
if (String(height).includes("rem"))
|
|
100
|
-
return `height: ${height};`;
|
|
101
|
-
if (height)
|
|
102
|
-
return `height: ${height}px;`;
|
|
103
|
-
}}
|
|
135
|
+
& svg {
|
|
104
136
|
${({ svgColor, theme }) => {
|
|
105
137
|
if (svgColor)
|
|
106
138
|
return `fill: ${th.color(svgColor, svgColor)({ theme })};`;
|
|
107
139
|
}}
|
|
108
140
|
}
|
|
109
|
-
${layout}
|
|
110
|
-
${space}
|
|
111
|
-
${sizing}
|
|
112
|
-
${background}
|
|
113
|
-
${borders}
|
|
114
|
-
${boxShadows}
|
|
115
|
-
${flexboxes}
|
|
116
141
|
`;
|
|
117
142
|
export {
|
|
118
143
|
StyledSvg,
|
|
@@ -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 {\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: 4.923rem;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,
|
|
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: 4rem;\n height: 4rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 4.923rem;\n height: 4.923rem;\n }\n`;\n\nconst xlSizes = css`\n width: 3rem;\n height: 3rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 3.692rem;\n height: 3.692rem;\n }\n`;\n\nconst lSizes = css`\n width: 2rem;\n height: 2rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 2.462rem;\n height: 2.462rem;\n }\n`;\n\nconst mSizes = css`\n width: 1.5rem;\n height: 1.5rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 1.846rem;\n height: 1.846rem;\n }\n`;\n\nconst sSizes = css`\n width: 1rem;\n height: 1rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 1.231rem;\n height: 1.231rem;\n }\n`;\n\nconst xsSizes = css`\n width: 0.5rem;\n height: 0.5rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 0.615rem;\n height: 0.615rem;\n }\n`;\n\nconst xxsSizes = css`\n width: 0.25rem;\n height: 0.25rem;\n @media (min-width: ${th.breakpoint.small}) {\n width: 0.308rem;\n height: 0.308rem;\n }\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 ${({ width, height, theme, size }) => {\n if (size) return getSize(size);\n\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n`;\n\nexport const StyledWrapper = styled('span', {\n name: DSIconName,\n slot: DSIconSlots.ICON_WRAPPER,\n})<StyledWrapperPropsT>`\n ${({ width, height, size, theme }) => {\n if (size) return getSize(size);\n if (String(width).includes('rem') && String(height).includes('rem'))\n return `\n width: ${width};\n height: ${height};\n `;\n\n return `\n width: ${width / 16}rem;\n height: ${height / 16}rem;\n\n @media (min-width: ${theme.breakpoints?.small}) {\n width: ${width / 13}rem;\n height: ${height / 13}rem;\n\n }`;\n }}\n ${displaySizes}\n\n & svg {\n ${({ svgColor, theme }) => {\n if (svgColor) return `fill: ${th.color(svgColor, svgColor)({ theme })};`;\n }}\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EAQA;AAAA,OACK;AAEP,SAAS,YAAY,mBAAmB;AASxC,MAAM,eAAe;AAAA;AAAA;AAAA;AAIrB,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGM,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,SAAS;AAAA;AAAA;AAAA,uBAGQ,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,UAAU;AAAA;AAAA;AAAA,uBAGO,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,WAAW;AAAA;AAAA;AAAA,uBAGM,GAAG,WAAW;AAAA;AAAA;AAAA;AAAA;AAMrC,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;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,OAAO,KAAK,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAE7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA;AAGK,MAAM,gBAAgB,OAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,YAAY;AACpB,CAAC;AAAA,IACG,CAAC,EAAE,OAAO,QAAQ,MAAM,MAAM,MAAM;AACpC,MAAI;AAAM,WAAO,QAAQ,IAAI;AAC7B,MAAI,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,KAAK;AAChE,WAAO;AAAA,aACA;AAAA,cACC;AAAA;AAGV,SAAO;AAAA,aACE,QAAQ;AAAA,cACP,SAAS;AAAA;AAAA,yBAEE,MAAM,aAAa;AAAA,eAC7B,QAAQ;AAAA,gBACP,SAAS;AAAA;AAAA;AAGvB;AAAA,IACE;AAAA;AAAA;AAAA,MAGE,CAAC,EAAE,UAAU,MAAM,MAAM;AACzB,MAAI;AAAU,WAAO,SAAS,GAAG,MAAM,UAAU,QAAQ,EAAE,EAAE,MAAM,CAAC;AACtE;AAAA;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-rc.
|
|
3
|
+
"version": "3.14.0-rc.5",
|
|
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-rc.
|
|
1575
|
-
"@elliemae/ds-system": "3.14.0-rc.
|
|
1576
|
-
"@elliemae/ds-utilities": "3.14.0-rc.
|
|
1574
|
+
"@elliemae/ds-classnames": "3.14.0-rc.5",
|
|
1575
|
+
"@elliemae/ds-system": "3.14.0-rc.5",
|
|
1576
|
+
"@elliemae/ds-utilities": "3.14.0-rc.5"
|
|
1577
1577
|
},
|
|
1578
1578
|
"devDependencies": {
|
|
1579
1579
|
"styled-components": "~5.3.6"
|
|
@@ -1585,6 +1585,7 @@
|
|
|
1585
1585
|
"styled-components": "~5.3.6"
|
|
1586
1586
|
},
|
|
1587
1587
|
"scripts": {
|
|
1588
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
1588
1589
|
"test": "node ../../scripts/testing/test.mjs",
|
|
1589
1590
|
"lint": "node ../../scripts/lint.mjs",
|
|
1590
1591
|
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
|