@cypress-design/icon-registry 0.1.1 → 0.4.0

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,7 +27,8 @@ 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 = (_a) => {
+    var { size, availableSizes, interactiveColorsOnGroup } = _a, colors = __rest(_a, ["size", "availableSizes", "interactiveColorsOnGroup"]);
     const sizeWithDefault = size !== null && size !== void 0 ? size : (availableSizes.length >= 1
         ? availableSizes.indexOf('16') > -1
             ? '16'
@@ -25,12 +37,36 @@ const getComponentAttributes = ({ size, availableSizes, strokeColor, fillColor,
     // 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) => {
+        const colorWeight = colors[color];
+        if (!colorWeight) {
+            return false;
+        }
+        const lowerCaseColor = color.toLowerCase();
+        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
+            ? interactiveColorsOnGroup !== undefined &&
+                interactiveColorsOnGroup !== false
+                ? `group-${pseudoClass}:`
+                : `icon-${pseudoClass}:`
+            : '';
+        const finalClass = `${prefix}icon-${colorClass}${secondaryClass}-${colorWeight}`;
+        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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"}