@salt-ds/icons 1.6.0 → 1.7.0
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Style applied to the root element */\n.saltIcon {\n --icon-color:
|
|
3
|
+
var css_248z = "/* Style applied to the root element */\n.saltIcon {\n --icon-color: currentColor;\n --icon-size-multiplier: var(--saltIcon-size-multiplier, 1);\n --icon-base-size: var(--salt-icon-size-base, 12px);\n /**\n * Icon size will be the multiplier (an integer from the size prop) * the base size (set by the theme per density)\n * Icons should never be smaller than 12px for readability so we've added a max() to enforce this\n * Consumers can use --saltIcon-size variable to override this rule as an escape hatch\n */\n --icon-size: var(--saltIcon-size, max(calc(var(--icon-base-size) * var(--icon-size-multiplier)), 12px));\n}\n\n.saltIcon {\n fill: var(--saltIcon-color, var(--icon-color));\n display: inline-block;\n margin: var(--saltIcon-margin, 0);\n position: relative;\n width: var(--icon-size);\n height: var(--icon-size);\n min-width: var(--icon-size);\n min-height: var(--icon-size);\n}\n\n.saltIcon-primary {\n --icon-color: var(--salt-text-primary-foreground);\n}\n\n.saltIcon-secondary {\n --icon-color: var(--salt-text-secondary-foreground);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Icon.css.js.map
|
package/dist-cjs/icon/Icon.js
CHANGED
|
@@ -12,7 +12,14 @@ var Icon$1 = require('./Icon.css.js');
|
|
|
12
12
|
const makePrefixer = (prefix) => (...names) => [prefix, ...names].join("-");
|
|
13
13
|
const withBaseName = makePrefixer("saltIcon");
|
|
14
14
|
const DEFAULT_ICON_SIZE = 1;
|
|
15
|
-
const Icon = react.forwardRef(function Icon2({
|
|
15
|
+
const Icon = react.forwardRef(function Icon2({
|
|
16
|
+
children,
|
|
17
|
+
className,
|
|
18
|
+
color = "inherit",
|
|
19
|
+
size = DEFAULT_ICON_SIZE,
|
|
20
|
+
style: styleProp,
|
|
21
|
+
...rest
|
|
22
|
+
}, ref) {
|
|
16
23
|
const targetWindow = window.useWindow();
|
|
17
24
|
styles.useComponentCssInjection({
|
|
18
25
|
testId: "salt-icon",
|
|
@@ -24,7 +31,11 @@ const Icon = react.forwardRef(function Icon2({ children, className, size = DEFAU
|
|
|
24
31
|
"--saltIcon-size-multiplier": `${size}`
|
|
25
32
|
};
|
|
26
33
|
return /* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
27
|
-
className: clsx.clsx(
|
|
34
|
+
className: clsx.clsx(
|
|
35
|
+
withBaseName(),
|
|
36
|
+
{ [withBaseName(color)]: color !== "inherit" },
|
|
37
|
+
className
|
|
38
|
+
),
|
|
28
39
|
style,
|
|
29
40
|
role: "img",
|
|
30
41
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.tsx"],"sourcesContent":["import { forwardRef, SVGAttributes } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport iconCss from \"./Icon.css\";\n// Duplicate from core/util to avoid circular dependency\nexport const makePrefixer =\n (prefix: string): ((...names: string[]) => string) =>\n (...names: string[]): string =>\n [prefix, ...names].join(\"-\");\n\nconst withBaseName = makePrefixer(\"saltIcon\");\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /**\n * Multiplier for the base icon size. Should be a positive integer to conform to the rest of the design system.\n */\n size?: number;\n}\n\nexport const DEFAULT_ICON_SIZE = 1;\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n {
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.tsx"],"sourcesContent":["import { forwardRef, SVGAttributes } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport iconCss from \"./Icon.css\";\n// Duplicate from core/util to avoid circular dependency\nexport const makePrefixer =\n (prefix: string): ((...names: string[]) => string) =>\n (...names: string[]): string =>\n [prefix, ...names].join(\"-\");\n\nconst withBaseName = makePrefixer(\"saltIcon\");\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /*\n * The color of the icon. Defaults to \"inherit\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\";\n /**\n * Multiplier for the base icon size. Should be a positive integer to conform to the rest of the design system.\n */\n size?: number;\n}\n\nexport const DEFAULT_ICON_SIZE = 1;\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n {\n children,\n className,\n color = \"inherit\",\n size = DEFAULT_ICON_SIZE,\n style: styleProp,\n ...rest\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-icon\",\n css: iconCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltIcon-size-multiplier\": `${size}`,\n };\n\n return (\n <svg\n className={clsx(\n withBaseName(),\n { [withBaseName(color)]: color !== \"inherit\" },\n className\n )}\n style={style}\n role=\"img\"\n {...rest}\n ref={ref}\n >\n <g aria-hidden>{children}</g>\n </svg>\n );\n});\n"],"names":["forwardRef","Icon","useWindow","useComponentCssInjection","iconCss","jsx","clsx"],"mappings":";;;;;;;;;;;AAQa,MAAA,YAAA,GACX,CAAC,MAAA,KACD,CAAI,GAAA,KAAA,KACF,CAAC,MAAA,EAAQ,GAAG,KAAK,CAAE,CAAA,IAAA,CAAK,GAAG,EAAA;AAE/B,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAarC,MAAM,iBAAoB,GAAA,EAAA;AAEpB,MAAA,IAAA,GAAOA,gBAAqC,CAAA,SAASC,KAChE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,iBAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACJ,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAA8B,CAAG,EAAA,IAAA,CAAA,CAAA;AAAA,GACnC,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,UAAU,SAAU,EAAA;AAAA,MAC7C,SAAA;AAAA,KACF;AAAA,IACA,KAAA;AAAA,IACA,IAAK,EAAA,KAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAAD,cAAA,CAAA,GAAA,EAAA;AAAA,MAAE,aAAW,EAAA,IAAA;AAAA,MAAE,QAAA;AAAA,KAAS,CAAA;AAAA,GAC3B,CAAA,CAAA;AAEJ,CAAC;;;;;;"}
|
package/dist-es/icon/Icon.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Style applied to the root element */\n.saltIcon {\n --icon-color:
|
|
1
|
+
var css_248z = "/* Style applied to the root element */\n.saltIcon {\n --icon-color: currentColor;\n --icon-size-multiplier: var(--saltIcon-size-multiplier, 1);\n --icon-base-size: var(--salt-icon-size-base, 12px);\n /**\n * Icon size will be the multiplier (an integer from the size prop) * the base size (set by the theme per density)\n * Icons should never be smaller than 12px for readability so we've added a max() to enforce this\n * Consumers can use --saltIcon-size variable to override this rule as an escape hatch\n */\n --icon-size: var(--saltIcon-size, max(calc(var(--icon-base-size) * var(--icon-size-multiplier)), 12px));\n}\n\n.saltIcon {\n fill: var(--saltIcon-color, var(--icon-color));\n display: inline-block;\n margin: var(--saltIcon-margin, 0);\n position: relative;\n width: var(--icon-size);\n height: var(--icon-size);\n min-width: var(--icon-size);\n min-height: var(--icon-size);\n}\n\n.saltIcon-primary {\n --icon-color: var(--salt-text-primary-foreground);\n}\n\n.saltIcon-secondary {\n --icon-color: var(--salt-text-secondary-foreground);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Icon.css.js.map
|
package/dist-es/icon/Icon.js
CHANGED
|
@@ -8,7 +8,14 @@ import css_248z from './Icon.css.js';
|
|
|
8
8
|
const makePrefixer = (prefix) => (...names) => [prefix, ...names].join("-");
|
|
9
9
|
const withBaseName = makePrefixer("saltIcon");
|
|
10
10
|
const DEFAULT_ICON_SIZE = 1;
|
|
11
|
-
const Icon = forwardRef(function Icon2({
|
|
11
|
+
const Icon = forwardRef(function Icon2({
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
color = "inherit",
|
|
15
|
+
size = DEFAULT_ICON_SIZE,
|
|
16
|
+
style: styleProp,
|
|
17
|
+
...rest
|
|
18
|
+
}, ref) {
|
|
12
19
|
const targetWindow = useWindow();
|
|
13
20
|
useComponentCssInjection({
|
|
14
21
|
testId: "salt-icon",
|
|
@@ -20,7 +27,11 @@ const Icon = forwardRef(function Icon2({ children, className, size = DEFAULT_ICO
|
|
|
20
27
|
"--saltIcon-size-multiplier": `${size}`
|
|
21
28
|
};
|
|
22
29
|
return /* @__PURE__ */ jsx("svg", {
|
|
23
|
-
className: clsx(
|
|
30
|
+
className: clsx(
|
|
31
|
+
withBaseName(),
|
|
32
|
+
{ [withBaseName(color)]: color !== "inherit" },
|
|
33
|
+
className
|
|
34
|
+
),
|
|
24
35
|
style,
|
|
25
36
|
role: "img",
|
|
26
37
|
...rest,
|
package/dist-es/icon/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.tsx"],"sourcesContent":["import { forwardRef, SVGAttributes } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport iconCss from \"./Icon.css\";\n// Duplicate from core/util to avoid circular dependency\nexport const makePrefixer =\n (prefix: string): ((...names: string[]) => string) =>\n (...names: string[]): string =>\n [prefix, ...names].join(\"-\");\n\nconst withBaseName = makePrefixer(\"saltIcon\");\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /**\n * Multiplier for the base icon size. Should be a positive integer to conform to the rest of the design system.\n */\n size?: number;\n}\n\nexport const DEFAULT_ICON_SIZE = 1;\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n {
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.tsx"],"sourcesContent":["import { forwardRef, SVGAttributes } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport iconCss from \"./Icon.css\";\n// Duplicate from core/util to avoid circular dependency\nexport const makePrefixer =\n (prefix: string): ((...names: string[]) => string) =>\n (...names: string[]): string =>\n [prefix, ...names].join(\"-\");\n\nconst withBaseName = makePrefixer(\"saltIcon\");\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /*\n * The color of the icon. Defaults to \"inherit\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\";\n /**\n * Multiplier for the base icon size. Should be a positive integer to conform to the rest of the design system.\n */\n size?: number;\n}\n\nexport const DEFAULT_ICON_SIZE = 1;\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n {\n children,\n className,\n color = \"inherit\",\n size = DEFAULT_ICON_SIZE,\n style: styleProp,\n ...rest\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-icon\",\n css: iconCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltIcon-size-multiplier\": `${size}`,\n };\n\n return (\n <svg\n className={clsx(\n withBaseName(),\n { [withBaseName(color)]: color !== \"inherit\" },\n className\n )}\n style={style}\n role=\"img\"\n {...rest}\n ref={ref}\n >\n <g aria-hidden>{children}</g>\n </svg>\n );\n});\n"],"names":["Icon","iconCss"],"mappings":";;;;;;;AAQa,MAAA,YAAA,GACX,CAAC,MAAA,KACD,CAAI,GAAA,KAAA,KACF,CAAC,MAAA,EAAQ,GAAG,KAAK,CAAE,CAAA,IAAA,CAAK,GAAG,EAAA;AAE/B,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAarC,MAAM,iBAAoB,GAAA,EAAA;AAEpB,MAAA,IAAA,GAAO,UAAqC,CAAA,SAASA,KAChE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,iBAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACJ,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAA8B,CAAG,EAAA,IAAA,CAAA,CAAA;AAAA,GACnC,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,UAAU,SAAU,EAAA;AAAA,MAC7C,SAAA;AAAA,KACF;AAAA,IACA,KAAA;AAAA,IACA,IAAK,EAAA,KAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAA,GAAA,CAAA,GAAA,EAAA;AAAA,MAAE,aAAW,EAAA,IAAA;AAAA,MAAE,QAAA;AAAA,KAAS,CAAA;AAAA,GAC3B,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { SVGAttributes } from "react";
|
|
2
2
|
export declare const makePrefixer: (prefix: string) => (...names: string[]) => string;
|
|
3
3
|
export interface IconProps extends SVGAttributes<SVGSVGElement> {
|
|
4
|
+
color?: "inherit" | "primary" | "secondary";
|
|
4
5
|
/**
|
|
5
6
|
* Multiplier for the base icon size. Should be a positive integer to conform to the rest of the design system.
|
|
6
7
|
*/
|
package/package.json
CHANGED
|
@@ -1,13 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/icons",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/jpmorganchase/salt-ds.git",
|
|
8
|
+
"directory": "packages/icons"
|
|
9
|
+
},
|
|
10
|
+
"bugs": "https://github.com/jpmorganchase/salt-ds/issues",
|
|
5
11
|
"main": "dist-cjs/index.js",
|
|
6
12
|
"sideEffects": false,
|
|
7
13
|
"scripts": {
|
|
8
14
|
"build": "yarn clean && yarn node ./scripts/generateIcons.mjs '*.svg'",
|
|
9
15
|
"clean": "rimraf ./src/components"
|
|
10
16
|
},
|
|
17
|
+
"dependencies": {
|
|
18
|
+
"clsx": "^2.0.0",
|
|
19
|
+
"@salt-ds/window": "^0.1.1",
|
|
20
|
+
"@salt-ds/styles": "^0.1.1"
|
|
21
|
+
},
|
|
11
22
|
"peerDependencies": {
|
|
12
23
|
"@types/react": ">=16.14.0",
|
|
13
24
|
"react": ">=16.14.0",
|
|
@@ -19,6 +30,7 @@
|
|
|
19
30
|
}
|
|
20
31
|
},
|
|
21
32
|
"devDependencies": {
|
|
33
|
+
"glob": "^8.0.0",
|
|
22
34
|
"mustache": "^4.2.0",
|
|
23
35
|
"rimraf": "^4.4.0",
|
|
24
36
|
"svgo": "^3.0.0"
|
|
@@ -29,20 +41,10 @@
|
|
|
29
41
|
},
|
|
30
42
|
"module": "dist-es/index.js",
|
|
31
43
|
"typings": "dist-types/index.d.ts",
|
|
32
|
-
"dependencies": {
|
|
33
|
-
"clsx": "^2.0.0",
|
|
34
|
-
"@salt-ds/window": "^0.1.1",
|
|
35
|
-
"@salt-ds/styles": "^0.1.1"
|
|
36
|
-
},
|
|
37
44
|
"files": [
|
|
38
45
|
"dist-cjs",
|
|
39
46
|
"dist-es",
|
|
40
47
|
"dist-types",
|
|
41
48
|
"README.md"
|
|
42
|
-
]
|
|
43
|
-
"repository": {
|
|
44
|
-
"type": "git",
|
|
45
|
-
"url": "https://github.com/jpmorganchase/salt-ds",
|
|
46
|
-
"directory": "packages/icons"
|
|
47
|
-
}
|
|
49
|
+
]
|
|
48
50
|
}
|