@cypress-design/icon-registry 0.2.0 → 0.4.1

package/ReadMe.md

@@ -26,17 +26,17 @@ import {
   iconsMetadata,
   compileIcon,
   getComponentAttributes,
-} from '@cypress-design/icon-registry';
+} from '@cypress-design/icon-registry'
 
 iconSet.forEach((icon) => {
   // `icon.name` contains "book-code-x16"
   // since we mostly need the rooId we can extract it from the name
-  const [rootId] = icon.name.split('_x');
+  const [rootId] = icon.name.split('_x')
   // these information sets are intended to be used in a template or a render function
   console.log({
     body: icon.data,
     metaData: icons[rootId],
-  });
+  })
 
   const { size, compiledClasses, body } = compileIcon({
     name: rootId,
@@ -44,11 +44,11 @@ iconSet.forEach((icon) => {
     // colors from the windicss set of colors
     strokeColor: 'red-600',
     fillColor: 'amber-300',
-  });
+  })
   // size: the size of the icon with the default value if possible,
   // compiledClasses: all css classes that we will hav to add to our SVG element becaus eof the color passed,
   // body: the interior of the SVG element between the opening and closing SVG tags,
-});
+})
 ```
 
 ## Build
@@ -59,23 +59,23 @@ Sample:
 
 ```ts
 // lists all the colors available from windi classes
-export type WindiColors = 'jade-200' | 'jade-300' | 'red-200' | 'red-300';
+export type WindiColors = 'jade-200' | 'jade-300' | 'red-200' | 'red-300'
 
 export type IconProps =
   | IconActionDeleteCircleProps
-  | IconTestingTypeComponentProps;
+  | IconTestingTypeComponentProps
 // | ...
 
 interface IconActionDeleteCircleProps {
-  name: 'action-delete-circle';
-  color?: keyof typeof colors;
+  name: 'action-delete-circle'
+  color?: keyof typeof colors
 }
 
 interface IconTestingTypeComponentProps {
-  name: 'testing-type-component';
-  size?: 16 | 24 | 64 | 120;
-  color?: keyof typeof colors;
-  bgColor?: keyof typeof colors;
+  name: 'testing-type-component'
+  size?: 16 | 24 | 64 | 120
+  color?: keyof typeof colors
+  bgColor?: keyof typeof colors
 }
 
 //...

package/dist/cjs/compileIcon.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getComponentAttributes = exports.compileIcon = void 0;
 const icons_1 = require("./icons");
@@ -16,21 +27,54 @@ const compileIcon = (props) => {
     return Object.assign(Object.assign({}, props), { size: sizeWithDefault, compiledClasses, body: iconData.data });
 };
 exports.compileIcon = compileIcon;
-const getComponentAttributes = ({ size, availableSizes, strokeColor, fillColor, secondaryStrokeColor, secondaryFillColor, }) => {
+const getComponentAttributes = (props) => {
+    const { size, availableSizes, interactiveColorsOnGroup, name } = props, // not used, just removed from colors
+    others = __rest(props, ["size", "availableSizes", "interactiveColorsOnGroup", "name"]);
     const sizeWithDefault = size !== null && size !== void 0 ? size : (availableSizes.length >= 1
         ? availableSizes.indexOf('16') > -1
             ? '16'
             : availableSizes[0]
         : '');
+    const protectedInteractiveColorsOnGroup = interactiveColorsOnGroup === undefined
+        ? others['interactive-colors-on-group']
+        : interactiveColorsOnGroup;
+    const colors = others;
     // TODO: when all icons are converted to using the design system,
     // replace dark by stroke and light by fill,
     // both here and in the windi plugins configs.
-    const compiledClasses = [
-        strokeColor && `icon-dark-${strokeColor}`,
-        fillColor && `icon-light-${fillColor}`,
-        secondaryStrokeColor && `icon-dark-secondary-${secondaryStrokeColor}`,
-        secondaryFillColor && `icon-light-secondary-${secondaryFillColor}`,
-    ].filter(Boolean);
+    const compiledClasses = Object.keys(colors)
+        .map((color) => {
+        if (color === 'interactive-colors-on-group') {
+            return false;
+        }
+        const weightedColor = colors[color];
+        if (!weightedColor) {
+            return false;
+        }
+        const lowerCaseColor = color.toLowerCase().replace(/-/g, '');
+        const colorClass = lowerCaseColor.includes('strokecolor')
+            ? 'dark'
+            : 'light';
+        const secondaryClass = lowerCaseColor.includes('secondary')
+            ? '-secondary'
+            : '';
+        const pseudoClass = lowerCaseColor.includes('hover')
+            ? 'hover'
+            : lowerCaseColor.includes('focus')
+                ? 'focus'
+                : lowerCaseColor.includes('hocus')
+                    ? 'hocus'
+                    : '';
+        const prefix = pseudoClass.length
+            ? protectedInteractiveColorsOnGroup !== undefined &&
+                protectedInteractiveColorsOnGroup !== false
+                ? `group-${pseudoClass}:`
+                : `icon-${pseudoClass}:`
+            : '';
+        const finalClass = `${prefix}icon-${colorClass}${secondaryClass}-${weightedColor}`;
+        return finalClass;
+    })
+        .filter((cl) => cl !== false);
     return { compiledClasses, sizeWithDefault };
 };
 exports.getComponentAttributes = getComponentAttributes;

package/dist/cjs/compileIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"compileIcon.js","sourceRoot":"","sources":["../../src/compileIcon.ts"],"names":[],"mappings":";;;AAAA,mCAAwD;AACxD,2CAAsC;AACtC,yCAAkC;AAE3B,MAAM,WAAW,GAAG,CAAC,KAAgB,EAAE,EAAE;IAC9C,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvB,MAAM,EAAE,cAAc,EAAE,GAAG,qBAAa,CAAC,IAAI,CAAC,CAAC;IAE/C,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,IAAA,8BAAsB,kCAC7D,KAAa,KACjB,cAAc,IACd,CAAC;IAEH,MAAM,YAAY,GAAG,IAAA,mBAAS,EAAC,GAAG,IAAI,KAAK,eAAe,EAAE,CAAC,CAAC;IAC9D,MAAM,QAAQ,GAAG,mBAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;IAC9D,IAAI,CAAC,QAAQ,EAAE;QACb,MAAM,IAAI,KAAK,CAAC,SAAS,IAAI,aAAa,eAAe,YAAY,CAAC,CAAC;KACxE;IACD,uCACM,KAAa,KACjB,IAAI,EAAE,eAAe,EACrB,eAAe,EACf,IAAI,EAAE,QAAQ,CAAC,IAAI,IACnB;AACJ,CAAC,CAAC;AApBW,QAAA,WAAW,eAoBtB;AAEK,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EACJ,cAAc,EACd,WAAW,EACX,SAAS,EACT,oBAAoB,EACpB,kBAAkB,GAQnB,EAAE,EAAE;IACH,MAAM,eAAe,GACnB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GACJ,CAAC,cAAc,CAAC,MAAM,IAAI,CAAC;QACzB,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACjC,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;QACrB,CAAC,CAAC,EAAE,CAAC,CAAC;IAEV,iEAAiE;IACjE,4CAA4C;IAC5C,8CAA8C;IAC9C,MAAM,eAAe,GAAG;QACtB,WAAW,IAAI,aAAa,WAAW,EAAE;QACzC,SAAS,IAAI,cAAc,SAAS,EAAE;QACtC,oBAAoB,IAAI,uBAAuB,oBAAoB,EAAE;QACrE,kBAAkB,IAAI,wBAAwB,kBAAkB,EAAE;KACnE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAElB,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAC9C,CAAC,CAAC;AAlCW,QAAA,sBAAsB,0BAkCjC"}
+{"version":3,"file":"compileIcon.js","sourceRoot":"","sources":["../../src/compileIcon.ts"],"names":[],"mappings":"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"}