@cypress-design/react-icon 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @cypress-design/react-icon
 
+## 0.3.0
+
+### Minor Changes
+
+- [#41](https://github.com/cypress-io/cypress-design/pull/41) [`4259026`](https://github.com/cypress-io/cypress-design/commit/4259026314464260e89bcd88690c8a60ad2f0459) Thanks [@elevatebart](https://github.com/elevatebart)! - ## New syntaxes to add dynamic icon colors
+
+  ### With a prefix focus/hover
+
+  ```html
+  <IconBook
+    size="16"
+    strokeColor="blue-600"
+    hoverStrokeColor="jade-600"
+    focusStrokeColor="jade-900"
+  />
+  ```
+
+  ### With the same prefix acting on a group
+
+  ```html
+  <button class="group">
+    <IconBook
+      size="16"
+      strokeColor="blue-600"
+      hoverStrokeColor="jade-600"
+      focusStrokeColor="jade-900"
+      interactiveColorsOnGroup
+    />Read
+  </button>
+  ```
+
+### Patch Changes
+
+- [#39](https://github.com/cypress-io/cypress-design/pull/39) [`1b383f3`](https://github.com/cypress-io/cypress-design/commit/1b383f3d149948bf2cc062d3baa17d5ce032f07e) Thanks [@elevatebart](https://github.com/elevatebart)! - fix file path of sourcemaps
+
+- Updated dependencies [[`4259026`](https://github.com/cypress-io/cypress-design/commit/4259026314464260e89bcd88690c8a60ad2f0459)]:
+  - @cypress-design/icon-registry@0.4.0
+
 ## 0.2.1
 
 ### Patch Changes

package/Icon.stories.mdx

@@ -50,7 +50,7 @@ import { Icon } from './Icon'
   </Story>
 </Canvas>
 
-<ArgsTable/>
+<ArgsTable exclude={/^(hover|focus|hocus)/g} />
 
 ## Usage
 
@@ -73,7 +73,37 @@ import { IconBook } from '@cypress-design/react-icon'
 
 export const MyButtonWithIcon = () => {
   return (<button>
-    <IconBook size="16" strokeColor="blue-600" fillColor="red-200" />
+    <IconBook size="16" strokeColor="indigo-600" fillColor="red-200" />
+  </button>)
+}
+```
+
+Should you need to change the color of the icon on `hover` or `focus` prefix the props with these words.
+
+Here, the `strokeColor` will change on hover from indigo to jade
+
+```tsx
+import { IconBook } from '@cypress-design/react-icon'
+
+export const MyButtonWithIcon = () => {
+  return (<button>
+    <IconBook size="16" strokeColor="indigo-600" hoverStrokeColor="jade-600" />
+  </button>)
+}
+```
+
+If you need the `hover` or `focus` effect to be triggered on the parent group, use `interactiveColorsOnGroup`. 
+This prop will change all the pseudo prefixes to be group focused instead of triggered by the icon itself.
+
+To achieve the same goal, in WindiCSS, we would use `group-hover:` instead of `hover:`.
+
+```tsx
+import { IconBook } from '@cypress-design/react-icon'
+
+export const MyButtonWithIcon = () => {
+  return (<button className="group hover:text-jade-800">
+    <IconBook size="16" strokeColor="indigo-600" hoverStrokeColor="jade-600" interactiveColorsOnGroup />
+    Book
   </button>)
 }
 ```

package/Icon.tsx

@@ -21,20 +21,20 @@ export const compileReactIconProperties = ({
   body,
   compiledClasses,
   size,
-  strokeColor,
-  fillColor,
-  secondaryStrokeColor,
-  secondaryFillColor,
+  interactiveColorsOnGroup,
   ...attributes
 }: {
   body: string
   compiledClasses: string[]
   size: string
-  strokeColor?
-  fillColor?
-  secondaryStrokeColor?
-  secondaryFillColor?
+  interactiveColorsOnGroup?: boolean
 } & SVGPropsWithoutColorsOrSize) => {
+  Object.keys(attributes).forEach((key) => {
+    if (key.endsWith('Color')) {
+      // @ts-ignore
+      delete attributes[key]
+    }
+  })
   const componentProps = {
     width: size,
     height: size,

package/ReadMe.md

@@ -31,7 +31,50 @@ import { IconBook } from '@cypress-design/react-icon'
 export const MyButtonWithIcon = () => {
   return (
     <button>
-      <IconBook size="16" strokeColor="blue-600" fillColor="red-200" />
+      <IconBook size="16" strokeColor="indigo-600" fillColor="red-200" />
+    </button>
+  )
+}
+```
+
+Should you need to change the color of the icon on `hover` or `focus` prefix the props with these words.
+
+Here, the `strokeColor` will change on hover from indigo to jade
+
+```tsx
+import { IconBook } from '@cypress-design/react-icon'
+
+export const MyButtonWithIcon = () => {
+  return (
+    <button>
+      <IconBook
+        size="16"
+        strokeColor="indigo-600"
+        hoverStrokeColor="jade-600"
+      />
+    </button>
+  )
+}
+```
+
+If you need the `hover` or `focus` effect to be triggered on the parent group, use `interactiveColorsOnGroup`.
+This prop will change all the pseudo prefixes to be group focused instead of triggered by the icon itself.
+
+To achieve the same goal, in WindiCSS, we would use `group-hover:` instead of `hover:`.
+
+```tsx
+import { IconBook } from '@cypress-design/react-icon'
+
+export const MyButtonWithIcon = () => {
+  return (
+    <button className="group hover:text-jade-800">
+      <IconBook
+        size="16"
+        strokeColor="indigo-600"
+        hoverStrokeColor="jade-600"
+        interactiveColorsOnGroup
+      />
+      Book
     </button>
   )
 }

package/dist/Icon.d.ts

@@ -3,14 +3,11 @@ import type { FunctionComponent } from 'react';
 import type { IconProps } from '@cypress-design/icon-registry';
 declare type SVGPropsWithoutColorsOrSize = Omit<React.SVGProps<SVGSVGElement>, 'fill' | 'stroke' | 'fillColor' | 'strokeColor' | 'size'>;
 export declare const Icon: FunctionComponent<IconProps & SVGPropsWithoutColorsOrSize>;
-export declare const compileReactIconProperties: ({ body, compiledClasses, size, strokeColor, fillColor, secondaryStrokeColor, secondaryFillColor, ...attributes }: {
+export declare const compileReactIconProperties: ({ body, compiledClasses, size, interactiveColorsOnGroup, ...attributes }: {
     body: string;
     compiledClasses: string[];
     size: string;
-    strokeColor?: any;
-    fillColor?: any;
-    secondaryStrokeColor?: any;
-    secondaryFillColor?: any;
+    interactiveColorsOnGroup?: boolean | undefined;
 } & SVGPropsWithoutColorsOrSize) => {
     string?: string | number | undefined;
     className?: string | undefined;

package/dist/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAE9D,aAAK,2BAA2B,GAAG,IAAI,CACrC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAC7B,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CACzD,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAClC,SAAS,GAAG,2BAA2B,CAMxC,CAAA;AAED,eAAO,MAAM,0BAA0B;UAU/B,MAAM;qBACK,MAAM,EAAE;UACnB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBb,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAE9D,aAAK,2BAA2B,GAAG,IAAI,CACrC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAC7B,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CACzD,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAClC,SAAS,GAAG,2BAA2B,CAMxC,CAAA;AAED,eAAO,MAAM,0BAA0B;UAO/B,MAAM;qBACK,MAAM,EAAE;UACnB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBb,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/index.es.js

@@ -44,7 +44,13 @@ var Icon = function (props) {
     return React.createElement('svg', compileReactIconProperties$1(compileIcon(props)));
 };
 var compileReactIconProperties$1 = function (_a) {
-    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size; _a.strokeColor; _a.fillColor; _a.secondaryStrokeColor; _a.secondaryFillColor; var attributes = __rest(_a, ["body", "compiledClasses", "size", "strokeColor", "fillColor", "secondaryStrokeColor", "secondaryFillColor"]);
+    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size; _a.interactiveColorsOnGroup; var attributes = __rest(_a, ["body", "compiledClasses", "size", "interactiveColorsOnGroup"]);
+    Object.keys(attributes).forEach(function (key) {
+        if (key.endsWith('Color')) {
+            // @ts-ignore
+            delete attributes[key];
+        }
+    });
     var componentProps = __assign({ width: size, height: size, fill: 'none', dangerouslySetInnerHTML: {
             __html: body
         } }, attributes);