@cypress-design/react-statusicon 0.0.9 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @cypress-design/react-statusicon
 
+## 0.1.0
+
+### Minor Changes
+
+- [#105](https://github.com/cypress-io/cypress-design/pull/105) [`2f54f5b`](https://github.com/cypress-io/cypress-design/commit/2f54f5b867b60ba5ce2e40fd38870bd65187ba30) Thanks [@elevatebart](https://github.com/elevatebart)! - move animation of running status to SMIL
+
+### Patch Changes
+
+- [#103](https://github.com/cypress-io/cypress-design/pull/103) [`e82d8cb`](https://github.com/cypress-io/cypress-design/commit/e82d8cb60882a379d89f86d1ff7b8f1d5b56ce66) Thanks [@mapsandapps](https://github.com/mapsandapps)! - Change the status icon for noTests; fix some icon colors
+
+- Updated dependencies [[`2f54f5b`](https://github.com/cypress-io/cypress-design/commit/2f54f5b867b60ba5ce2e40fd38870bd65187ba30), [`e82d8cb`](https://github.com/cypress-io/cypress-design/commit/e82d8cb60882a379d89f86d1ff7b8f1d5b56ce66)]:
+  - @cypress-design/react-icon@0.11.0
+  - @cypress-design/icon-registry@0.13.0
+
+## 0.0.10
+
+### Patch Changes
+
+- [#98](https://github.com/cypress-io/cypress-design/pull/98) [`f41d962`](https://github.com/cypress-io/cypress-design/commit/f41d962b3331767e89a74f0dc6ba207b11ff6226) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: status colors should be in status icons
+
+- Updated dependencies [[`f41d962`](https://github.com/cypress-io/cypress-design/commit/f41d962b3331767e89a74f0dc6ba207b11ff6226)]:
+  - @cypress-design/react-icon@0.10.1
+  - @cypress-design/icon-registry@0.12.1
+
 ## 0.0.9
 
 ### Patch Changes

package/OutlineStatusIcon.ts

@@ -7,15 +7,15 @@ import { compileProps } from './compileProps'
 export const OutlineStatusIcon: React.FC<
   VariantStatusIconProps & SVGProps<SVGSVGElement>
 > = ({ size = '24', status = 'placeholder', ...rest }) => {
-  return React.createElement(
-    'svg',
-    compileProps({
+  return React.createElement('svg', {
+    ...rest,
+    ...compileProps({
       status,
       statuses,
       className: rest.className,
       size,
-    })
-  )
+    }),
+  })
 }
 
 export default OutlineStatusIcon

package/SimpleStatusIcon.ts

@@ -7,15 +7,15 @@ import { compileProps } from './compileProps'
 export const SimpleStatusIcon: React.FC<
   VariantStatusIconProps & SVGProps<SVGSVGElement>
 > = ({ size = '24', status = 'placeholder', ...rest }) => {
-  return React.createElement(
-    'svg',
-    compileProps({
+  return React.createElement('svg', {
+    ...rest,
+    ...compileProps({
       status,
       statuses,
       className: rest.className,
       size,
-    })
-  )
+    }),
+  })
 }
 
 export default SimpleStatusIcon

package/SolidStatusIcon.ts

@@ -7,15 +7,15 @@ import { compileProps } from './compileProps'
 export const SolidStatusIcon: React.FC<
   VariantStatusIconProps & SVGProps<SVGSVGElement>
 > = ({ size = '24', status = 'placeholder', ...rest }) => {
-  return React.createElement(
-    'svg',
-    compileProps({
+  return React.createElement('svg', {
+    ...rest,
+    ...compileProps({
       status,
       statuses,
       className: rest.className,
       size,
-    })
-  )
+    }),
+  })
 }
 
 export default SolidStatusIcon

package/StatusIcon.rootstory.tsx

@@ -30,9 +30,7 @@ export default () => (
       </tr>
     </thead>
     <tbody>
-      {Object.keys(statuses).map((status) => {
-        const statusInfo = statuses[status]
-
+      {Object.entries(statuses).map(([status, statusInfo]) => {
         return (
           <>
             {statusInfo.variants.map((variant, i) => {
@@ -64,8 +62,8 @@ export default () => (
                     return (
                       <td key={`${status}-${size}-${variant}`} className="py-2">
                         <StatusIcon
-                          status={status}
-                          size={size}
+                          status={status as any}
+                          size={size as any}
                           variant={variant}
                         />
                       </td>

package/StatusIconReact.cy.tsx

@@ -10,24 +10,6 @@ describe('StatusIcon', () => {
     mount(<StatusIconStory />)
   })
 
-  it('running icon spins', () => {
-    mount(<StatusIcon variant="simple" size="16" status="running" />)
-
-    cy.get('svg').should('have.class', 'animate-spin')
-  })
-
-  it('small running icon does not spin', () => {
-    mount(<StatusIcon variant="simple" size="4" status="running" />)
-
-    cy.get('svg').should('not.have.class', 'animate-spin')
-  })
-
-  it('other icons do not spin', () => {
-    mount(<StatusIcon variant="simple" size="16" status="passed" />)
-
-    cy.get('svg').should('not.have.class', 'animate-spin')
-  })
-
   it('defaults to a variant that exists if the one provided does not exist', () => {
     mount(
       <div>

package/compileProps.ts

@@ -1,5 +1,7 @@
 import type { IconSet, VariantStatusIconProps } from '../constants'
+import { statuses as StatusForColor } from '../constants'
 import { compileReactIconProperties } from '@cypress-design/react-icon'
+import { getComponentAttributes } from '@cypress-design/icon-registry'
 
 export const compileProps = ({
   status,
@@ -12,15 +14,23 @@ export const compileProps = ({
 }) => {
   const statusInfo = status ? statuses[status] : statuses.placeholder
 
-  const icon = statusInfo[`size${size}Icon`]
+  const iconInfo = status ? StatusForColor[status] : StatusForColor.placeholder
 
-  const classes = `inline-block ${className || ''} ${
-    statusInfo.shouldSpin && size !== '4' ? 'animate-spin' : ''
-  }`
+  const { data: iconData, name } = statusInfo[`size${size}Icon`]
+
+  const classes = `inline-block ${className || ''}`
+
+  const { compiledClasses } = getComponentAttributes({
+    name,
+    strokeColor: iconInfo.color,
+    size,
+    availableSizes: [size],
+    fillColor: iconInfo.secondaryColor,
+  })
 
   return compileReactIconProperties({
-    body: icon.data,
-    compiledClasses: [classes],
+    body: iconData,
+    compiledClasses: [...compiledClasses, classes],
     size,
   })
 }

package/dist/constants.d.ts

@@ -1,17 +1,18 @@
+import type { WindiColor } from '@cypress-design/icon-registry';
 export declare type Variant = 'outline' | 'simple' | 'solid';
 export declare type Size = '4' | '8' | '12' | '16' | '24';
 declare type StatusInfo = {
-    color: string;
+    color: WindiColor;
     link?: string;
     use: string;
     variants: readonly Variant[];
+    secondaryColor?: WindiColor;
 };
 export declare type IconContents = {
     name: string;
     data: string;
 };
 export declare type IconSet = {
-    shouldSpin: boolean;
     size4Icon: IconContents;
     size8Icon: IconContents;
     size12Icon: IconContents;
@@ -26,6 +27,7 @@ declare const constStatuses: {
         readonly color: "indigo-400";
         readonly use: "Runs, specs, groups, test results";
         readonly variants: readonly ["outline"];
+        readonly secondaryColor: "gray-100";
     };
     readonly passed: {
         readonly color: "jade-400";
@@ -55,7 +57,7 @@ declare const constStatuses: {
         readonly variants: readonly ["outline", "solid"];
     };
     readonly noTests: {
-        readonly color: "gray-400";
+        readonly color: "orange-400";
         readonly use: "Runs, specs, groups";
         readonly variants: readonly ["outline", "solid"];
     };

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,oBAAY,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AACpD,oBAAY,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEjD,aAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAA;CAC7B,CAAA;AAED,oBAAY,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,oBAAY,OAAO,GAAG;IACpB,UAAU,EAAE,OAAO,CAAA;IACnB,SAAS,EAAE,YAAY,CAAA;IACvB,SAAS,EAAE,YAAY,CAAA;IACvB,UAAU,EAAE,YAAY,CAAA;IACxB,UAAU,EAAE,YAAY,CAAA;IACxB,UAAU,EAAE,YAAY,CAAA;CACzB,CAAA;AAED;;GAEG;AACH,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkET,CAAA;AAEV,oBAAY,WAAW,GAAG,MAAM,OAAO,aAAa,CAAA;AAEpD;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE,UAAU,CAAiB,CAAA;AAEtE,oBAAY,sBAAsB,GAAG;IACnC,IAAI,EAAE,IAAI,CAAA;IACV;;MAEE;IACF,MAAM,CAAC,EAAE,MAAM,OAAO,QAAQ,GAAG,IAAI,GAAG,SAAS,CAAA;CAClD,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC/D,oBAAY,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AACpD,oBAAY,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEjD,aAAK,UAAU,GAAG;IAChB,KAAK,EAAE,UAAU,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAA;IAC5B,cAAc,CAAC,EAAE,UAAU,CAAA;CAC5B,CAAA;AAED,oBAAY,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,oBAAY,OAAO,GAAG;IACpB,SAAS,EAAE,YAAY,CAAA;IACvB,SAAS,EAAE,YAAY,CAAA;IACvB,UAAU,EAAE,YAAY,CAAA;IACxB,UAAU,EAAE,YAAY,CAAA;IACxB,UAAU,EAAE,YAAY,CAAA;CACzB,CAAA;AAED;;GAEG;AACH,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFT,CAAA;AAEV,oBAAY,WAAW,GAAG,MAAM,OAAO,aAAa,CAAA;AAEpD;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE,UAAU,CAAiB,CAAA;AAEtE,oBAAY,sBAAsB,GAAG;IACnC,IAAI,EAAE,IAAI,CAAA;IACV;;MAEE;IACF,MAAM,CAAC,EAAE,MAAM,OAAO,QAAQ,GAAG,IAAI,GAAG,SAAS,CAAA;CAClD,CAAA"}