@cypress-design/react-statusicon 0.4.6 → 0.4.7

package/.turbo/turbo-build.log

@@ -8,5 +8,5 @@ $ rollup -c ./rollup.config.mjs
 index.ts
 
 Consumers of your bundle will have to use chunk.default to access their default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
-created ./dist/index.umd.js, ./dist/index.es.mjs in 17.7s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 28.3s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @cypress-design/react-statusicon
 
+## 0.4.7
+
+### Patch Changes
+
+- [#234](https://github.com/cypress-io/cypress-design/pull/234) [`ff95963`](https://github.com/cypress-io/cypress-design/commit/ff95963feb7ae5d9eb01e6122e5e411517f105b9) Thanks [@elevatebart](https://github.com/elevatebart)! - allow to use a gradient icon more than once
+
+- Updated dependencies [[`ff95963`](https://github.com/cypress-io/cypress-design/commit/ff95963feb7ae5d9eb01e6122e5e411517f105b9)]:
+  - @cypress-design/react-icon@0.22.2
+
 ## 0.4.6
 
 ### Patch Changes

package/_OutlineStatusIcon.ts

@@ -14,6 +14,7 @@ export const OutlineStatusIcon: React.FC<
       statuses: outline.statuses,
       className: rest.className,
       size,
+      variantName: 'outline',
     }),
   })
 }

package/_SimpleStatusIcon.ts

@@ -14,6 +14,7 @@ export const SimpleStatusIcon: React.FC<
       statuses: simple.statuses,
       className: rest.className,
       size,
+      variantName: 'simple',
     }),
   })
 }

package/_SolidStatusIcon.ts

@@ -14,6 +14,7 @@ export const SolidStatusIcon: React.FC<
       statuses: solid.statuses,
       className: rest.className,
       size,
+      variantName: 'solid',
     }),
   })
 }

package/compileProps.ts

@@ -11,9 +11,11 @@ export const compileProps = ({
   statuses,
   className,
   size,
+  variantName,
 }: VariantStatusIconProps & {
   statuses: Record<string, IconSet>
   className: string | undefined
+  variantName: string
 }) => {
   const statusInfo = status ? statuses[status] : statuses.placeholder
 
@@ -34,5 +36,6 @@ export const compileProps = ({
     body: iconData,
     compiledClasses: [...compiledClasses, classes],
     size,
+    name: `status_${status}_${size}_${variantName}`,
   })
 }

package/dist/_OutlineStatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_OutlineStatusIcon.d.ts","sourceRoot":"./","sources":["_OutlineStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CACtC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAWjD,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"_OutlineStatusIcon.d.ts","sourceRoot":"./","sources":["_OutlineStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CACtC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAYjD,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/_SimpleStatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_SimpleStatusIcon.d.ts","sourceRoot":"./","sources":["_SimpleStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CACrC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAWjD,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"_SimpleStatusIcon.d.ts","sourceRoot":"./","sources":["_SimpleStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CACrC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAYjD,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/_SolidStatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_SolidStatusIcon.d.ts","sourceRoot":"./","sources":["_SolidStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CACpC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAWjD,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"_SolidStatusIcon.d.ts","sourceRoot":"./","sources":["_SolidStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CACpC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAYjD,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/compileProps.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 /// <reference types="react" />
 import type { IconSet, VariantStatusIconProps } from '@cypress-design/constants-statusicon';
-export declare const compileProps: ({ status, statuses, className, size, }: VariantStatusIconProps & {
+export declare const compileProps: ({ status, statuses, className, size, variantName, }: VariantStatusIconProps & {
     statuses: Record<string, IconSet>;
     className: string | undefined;
+    variantName: string;
 }) => {
     className: string | undefined;
     color?: string | undefined;

package/dist/compileProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compileProps.d.ts","sourceRoot":"./","sources":["compileProps.ts"],"names":[],"mappings":";;AAAA,OAAO,KAAK,EACV,OAAO,EACP,sBAAsB,EACvB,MAAM,sCAAsC,CAAA;AAK7C,eAAO,MAAM,YAAY;cAMb,OAAO,MAAM,EAAE,OAAO,CAAC;eACtB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsB9B,CAAA"}
+{"version":3,"file":"compileProps.d.ts","sourceRoot":"./","sources":["compileProps.ts"],"names":[],"mappings":";;AAAA,OAAO,KAAK,EACV,OAAO,EACP,sBAAsB,EACvB,MAAM,sCAAsC,CAAA;AAK7C,eAAO,MAAM,YAAY;cAOb,OAAO,MAAM,EAAE,OAAO,CAAC;eACtB,MAAM,GAAG,SAAS;iBAChB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBpB,CAAA"}

package/dist/index.es.mjs

@@ -443,7 +443,7 @@ function __rest(s, e) {
 }
 
 var compileReactIconProperties = function (_a) {
-    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
+    var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name"]);
     var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
         if (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
             attrName !== 'name') {
@@ -454,6 +454,20 @@ var compileReactIconProperties = function (_a) {
         }
         return newAttributes;
     }, {});
+    React.useEffect(function () {
+        var iconFileId = "".concat(name, "_").concat(size);
+        if (defs) {
+            if (document.querySelector("[data-cy-svg-defs=\"".concat(iconFileId, "\"]"))) {
+                return;
+            }
+            var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svgElement.setAttribute('data-cy-svg-defs', iconFileId);
+            svgElement.setAttribute('width', '0');
+            svgElement.setAttribute('height', '0');
+            svgElement.innerHTML = defs;
+            document.body.appendChild(svgElement);
+        }
+    }, [defs]);
     var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
             __html: body,
         }, className: undefined }, filteredAttributes);
@@ -470,7 +484,7 @@ var compileReactIconProperties = function (_a) {
 /* <wind-keep class="filter"> */
 
 var compileProps = function (_a) {
-    var status = _a.status, statuses = _a.statuses, className = _a.className, size = _a.size;
+    var status = _a.status, statuses = _a.statuses, className = _a.className, size = _a.size, variantName = _a.variantName;
     var statusInfo = status ? statuses[status] : statuses.placeholder;
     var iconInfo = status ? statuses$3[status] : statuses$3.placeholder;
     var iconData = statusInfo["size".concat(size, "Icon")].data;
@@ -485,6 +499,7 @@ var compileProps = function (_a) {
         body: iconData,
         compiledClasses: __spreadArray(__spreadArray([], compiledClasses, true), [classes], false),
         size: size,
+        name: "status_".concat(status, "_").concat(size, "_").concat(variantName),
     });
 };
 
@@ -495,6 +510,7 @@ var OutlineStatusIcon = function (_a) {
         statuses: statuses$2,
         className: rest.className,
         size: size,
+        variantName: 'outline',
     })));
 };
 
@@ -505,6 +521,7 @@ var SimpleStatusIcon = function (_a) {
         statuses: statuses$1,
         className: rest.className,
         size: size,
+        variantName: 'simple',
     })));
 };
 
@@ -515,6 +532,7 @@ var SolidStatusIcon = function (_a) {
         statuses: statuses,
         className: rest.className,
         size: size,
+        variantName: 'solid',
     })));
 };