@cypress-design/react-icon 0.2.1 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @cypress-design/react-icon
 
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`25c6260`](https://github.com/cypress-io/cypress-design/commit/25c62605be573dafafff090b47fb80091b35aea4)]:
+  - @cypress-design/icon-registry@0.6.0
+
+## 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

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

@@ -2,9 +2,10 @@ 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>,
+  SVGProps<SVGSVGElement>,
   'fill' | 'stroke' | 'fillColor' | 'strokeColor' | 'size'
 >
 
@@ -17,40 +18,4 @@ export const Icon: FunctionComponent<
   )
 }
 
-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

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/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>) => {
+} & 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,7 +29,7 @@ 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)