@cypress-design/react-icon 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @cypress-design/react-icon
 
+## 0.4.0
+
+### Minor Changes
+
+- [#51](https://github.com/cypress-io/cypress-design/pull/51) [`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e) Thanks [@elevatebart](https://github.com/elevatebart)! - in the build asset, add a comment containing all used windicss classes in the component
+
+### Patch Changes
+
+- [#56](https://github.com/cypress-io/cypress-design/pull/56) [`0866c65`](https://github.com/cypress-io/cypress-design/commit/0866c654f24c36951c98468d789462748606b428) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: avoid using `delete` to avoid memory leaks
+
+* [#52](https://github.com/cypress-io/cypress-design/pull/52) [`43b53eb`](https://github.com/cypress-io/cypress-design/commit/43b53eb6bd10111629239a87374cfcc894eda0e3) Thanks [@mapsandapps](https://github.com/mapsandapps)! - New icons for statuses
+
+* Updated dependencies [[`31aaa18`](https://github.com/cypress-io/cypress-design/commit/31aaa182c8cd415f2884289144f504183e5ab418), [`0866c65`](https://github.com/cypress-io/cypress-design/commit/0866c654f24c36951c98468d789462748606b428), [`43b53eb`](https://github.com/cypress-io/cypress-design/commit/43b53eb6bd10111629239a87374cfcc894eda0e3)]:
+  - @cypress-design/icon-registry@0.5.0
+
+## 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
+
+- Updated dependencies [[`5f9cf10`](https://github.com/cypress-io/cypress-design/commit/5f9cf10ff4709fcd7d322c2dc5dbc676473b433e), [`69b3327`](https://github.com/cypress-io/cypress-design/commit/69b332757ba3b73d0ae881c5959daa7a2e644fe0)]:
+  - @cypress-design/icon-registry@0.3.0
+
 ## 0.2.0
 
 ### Minor 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

@@ -1,9 +1,13 @@
-import * as React from 'react';
-import type { FunctionComponent, SVGProps } from 'react';
-import { compileIcon } from '@cypress-design/icon-registry';
-import type { IconProps } from '@cypress-design/icon-registry';
+import * as React from 'react'
+import type { FunctionComponent, SVGProps } from 'react'
+import { compileIcon } from '@cypress-design/icon-registry'
+import type { IconProps } from '@cypress-design/icon-registry'
+import { compileReactIconProperties } from './compileProperties'
 
-type SVGPropsWithoutColorsOrSize = Omit<React.SVGProps<SVGSVGElement>, 'fill' | 'stroke' | 'fillColor' | 'strokeColor' | 'size' >
+type SVGPropsWithoutColorsOrSize = Omit<
+  SVGProps<SVGSVGElement>,
+  'fill' | 'stroke' | 'fillColor' | 'strokeColor' | 'size'
+>
 
 export const Icon: FunctionComponent<
   IconProps & SVGPropsWithoutColorsOrSize
@@ -11,43 +15,7 @@ export const Icon: FunctionComponent<
   return React.createElement(
     'svg',
     compileReactIconProperties(compileIcon(props))
-  );
-};
+  )
+}
 
-export const compileReactIconProperties = ({
-  body,
-  compiledClasses,
-  size,
-  strokeColor,
-  fillColor,
-  secondaryStrokeColor,
-  secondaryFillColor,
-  ...attributes
-}: {
-  body: string;
-  compiledClasses: string[];
-  size: string;
-  strokeColor?;
-  fillColor?;
-  secondaryStrokeColor?;
-  secondaryFillColor?;
-} & SVGPropsWithoutColorsOrSize) => {
-  const componentProps = {
-    width: size,
-    height: size,
-    fill: 'none',
-    dangerouslySetInnerHTML: {
-      __html: body,
-    },
-    ...attributes, // add all standard attributes back to the svg tag
-  };
-  if (attributes.className) {
-    compiledClasses.push(attributes.className);
-  }
-  if (compiledClasses.length) {
-    componentProps.className = compiledClasses.join(' ');
-  }
-  return componentProps;
-};
-
-export default Icon;
+export default Icon

package/IconReact.cy.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import Icon, { IconObjectBookCode } from './index'
+import { mount } from 'cypress/react'
+
+describe('Icon', () => {
+  it('renders correctly', () => {
+    mount(
+      <ul className="m-4">
+        <li className="flex items-center mb-3 px-2">
+          fillColor="red-100" -{' '}
+          <IconObjectBookCode
+            fillColor="red-100"
+            className="ml-2"
+            strokeColor="red-500"
+            secondaryFillColor="indigo-100"
+            secondaryStrokeColor="indigo-600"
+          />
+        </li>
+        <li className="flex items-center mb-3 px-2 bg-magenta-100">
+          fillColor="transparent" -{' '}
+          <Icon
+            name="arrow-outline-down"
+            strokeColor="magenta-500"
+            fillColor="transparent"
+            className="ml-2"
+          />
+        </li>
+        <li className="flex items-center px-2">
+          strokeColor="current" -{' '}
+          <button className="flex gap-2 items-center m-2 bg-jade-600 hover:bg-jade-800 text-white py-1 px-2 rounded">
+            <Icon name="action-add-large" strokeColor="current" />
+            Add a new icon
+          </button>
+        </li>
+      </ul>
+    )
+  })
+})

package/ReadMe.md

@@ -5,7 +5,7 @@
 The simple way using the Icon component
 
 ```tsx
-import { Icon } from '@cypress-design/react-icon';
+import { Icon } from '@cypress-design/react-icon'
 
 export const MyButtonWithIcon = () => {
   return (
@@ -19,22 +19,65 @@ export const MyButtonWithIcon = () => {
       />
       Read
     </button>
-  );
-};
+  )
+}
 ```
 
 The tree-shakable way (more optimized)
 
 ```tsx
-import { IconBook } from '@cypress-design/react-icon';
+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>
+  )
+}
 ```
 
 ## install

package/compileProperties.ts

@@ -1,21 +1,27 @@
+import type { ColorIconProps } from '@cypress-design/icon-registry'
+import { ICON_COLOR_PROP_NAMES } from '@cypress-design/icon-registry'
+
 export const compileReactIconProperties = ({
   body,
   compiledClasses,
   size,
-  strokeColor,
-  fillColor,
-  secondaryStrokeColor,
-  secondaryFillColor,
   ...attributes
 }: {
-  body: string;
-  compiledClasses: string[];
-  size: string;
-  strokeColor?;
-  fillColor?;
-  secondaryStrokeColor?;
-  secondaryFillColor?;
-} & React.SVGProps<SVGSVGElement>) => {
+  body: string
+  compiledClasses: string[]
+  size: string
+} & ColorIconProps &
+  React.SVGProps<SVGSVGElement>) => {
+  const filteredAttributes = Object.keys(attributes).reduce(
+    (newAttributes, attrName) => {
+      if (!ICON_COLOR_PROP_NAMES.includes(attrName)) {
+        newAttributes[attrName] =
+          attributes[attrName as keyof typeof attributes]
+      }
+      return newAttributes
+    },
+    {} as Record<string, any>
+  )
   const componentProps: any = {
     width: size,
     height: size,
@@ -23,13 +29,13 @@ export const compileReactIconProperties = ({
     dangerouslySetInnerHTML: {
       __html: body,
     },
-    ...attributes, // add all standard attributes back to the svg tag
-  };
+    ...filteredAttributes, // add all standard attributes back to the svg tag
+  }
   if (attributes.className) {
-    compiledClasses.push(attributes.className);
+    compiledClasses.push(attributes.className)
   }
   if (compiledClasses.length) {
-    componentProps.className = compiledClasses.join(' ');
+    componentProps.className = compiledClasses.join(' ')
   }
-  return componentProps;
-};
+  return componentProps
+}