@cypress-design/react-statusicon 0.0.10 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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

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

@@ -18,9 +18,7 @@ export const compileProps = ({
 
   const { data: iconData, name } = statusInfo[`size${size}Icon`]
 
-  const classes = `inline-block ${className || ''} ${
-    iconInfo.shouldSpin && size !== '4' ? 'animate-spin' : ''
-  }`
+  const classes = `inline-block ${className || ''}`
 
   const { compiledClasses } = getComponentAttributes({
     name,

package/dist/constants.d.ts

@@ -7,7 +7,6 @@ declare type StatusInfo = {
     use: string;
     variants: readonly Variant[];
     secondaryColor?: WindiColor;
-    shouldSpin?: boolean;
 };
 export declare type IconContents = {
     name: string;
@@ -29,7 +28,6 @@ declare const constStatuses: {
         readonly use: "Runs, specs, groups, test results";
         readonly variants: readonly ["outline"];
         readonly secondaryColor: "gray-100";
-        readonly shouldSpin: true;
     };
     readonly passed: {
         readonly color: "jade-400";
@@ -59,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,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;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFT,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"}

package/dist/index.es.mjs

@@ -93,11 +93,11 @@ var statuses$3 = {
         size24Icon: cyStatusCancelledOutlineX24
     },
     noTests: {
-        size4Icon: cyStatusCancelledSimpleX4,
-        size8Icon: cyStatusCancelledSimpleX8,
-        size12Icon: cyStatusCancelledSolidX12,
-        size16Icon: cyStatusCancelledOutlineX16,
-        size24Icon: cyStatusCancelledOutlineX24
+        size4Icon: cyStatusErroredSimpleX4,
+        size8Icon: cyStatusErroredSimpleX8,
+        size12Icon: cyStatusErroredSolidX12,
+        size16Icon: cyStatusErroredOutlineX16,
+        size24Icon: cyStatusErroredOutlineX24
     },
     errored: {
         size4Icon: cyStatusErroredSimpleX4,
@@ -146,8 +146,7 @@ var constStatuses = {
         use: 'Runs, specs, groups, test results',
         variants: ['outline'],
         // <windi-keep fillColor="gray-100" />
-        secondaryColor: 'gray-100',
-        shouldSpin: true
+        secondaryColor: 'gray-100'
     },
     passed: {
         // <windi-keep strokeColor="jade-400" />
@@ -182,8 +181,8 @@ var constStatuses = {
         variants: ['outline', 'solid']
     },
     noTests: {
-        // <windi-keep strokeColor="gray-400" />
-        color: 'gray-400',
+        // <windi-keep strokeColor="orange-400" />
+        color: 'orange-400',
         use: 'Runs, specs, groups',
         variants: ['outline', 'solid']
     },
@@ -292,7 +291,7 @@ var compileProps = function (_a) {
     var statusInfo = status ? statuses[status] : statuses.placeholder;
     var iconInfo = status ? statuses$2[status] : statuses$2.placeholder;
     var _b = statusInfo["size" + size + "Icon"], iconData = _b.data, name = _b.name;
-    var classes = "inline-block " + (className || '') + " " + (iconInfo.shouldSpin && size !== '4' ? 'animate-spin' : '');
+    var classes = "inline-block " + (className || '');
     var compiledClasses = getComponentAttributes({
         name: name,
         strokeColor: iconInfo.color,
@@ -309,12 +308,12 @@ var compileProps = function (_a) {
 
 var OutlineStatusIcon = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '24' : _b, _c = _a.status, status = _c === void 0 ? 'placeholder' : _c, rest = __rest$1(_a, ["size", "status"]);
-    return React.createElement('svg', compileProps({
+    return React.createElement('svg', __assign$1(__assign$1({}, rest), compileProps({
         status: status,
         statuses: statuses$3,
         className: rest.className,
         size: size
-    }));
+    })));
 };
 
 var statuses$1 = {
@@ -361,11 +360,11 @@ var statuses$1 = {
         size24Icon: cyStatusCancelledSolidX24
     },
     noTests: {
-        size4Icon: cyStatusCancelledSimpleX4,
-        size8Icon: cyStatusCancelledSimpleX8,
-        size12Icon: cyStatusCancelledSolidX12,
-        size16Icon: cyStatusCancelledSolidX16,
-        size24Icon: cyStatusCancelledSolidX24
+        size4Icon: cyStatusErroredSimpleX4,
+        size8Icon: cyStatusErroredSimpleX8,
+        size12Icon: cyStatusErroredSolidX12,
+        size16Icon: cyStatusErroredSolidX16,
+        size24Icon: cyStatusErroredSolidX24
     },
     errored: {
         size4Icon: cyStatusErroredSimpleX4,
@@ -406,12 +405,12 @@ var statuses$1 = {
 
 var SimpleStatusIcon = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '24' : _b, _c = _a.status, status = _c === void 0 ? 'placeholder' : _c, rest = __rest$1(_a, ["size", "status"]);
-    return React.createElement('svg', compileProps({
+    return React.createElement('svg', __assign$1(__assign$1({}, rest), compileProps({
         status: status,
         statuses: statuses$1,
         className: rest.className,
         size: size
-    }));
+    })));
 };
 
 var statuses = {
@@ -458,11 +457,11 @@ var statuses = {
         size24Icon: cyStatusCancelledSolidX24
     },
     noTests: {
-        size4Icon: cyStatusCancelledSimpleX4,
-        size8Icon: cyStatusCancelledSimpleX8,
-        size12Icon: cyStatusCancelledSolidX12,
-        size16Icon: cyStatusCancelledSolidX16,
-        size24Icon: cyStatusCancelledSolidX24
+        size4Icon: cyStatusErroredSimpleX4,
+        size8Icon: cyStatusErroredSimpleX8,
+        size12Icon: cyStatusErroredSolidX12,
+        size16Icon: cyStatusErroredSolidX16,
+        size24Icon: cyStatusErroredSolidX24
     },
     errored: {
         size4Icon: cyStatusErroredSimpleX4,
@@ -503,12 +502,12 @@ var statuses = {
 
 var SolidStatusIcon = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '24' : _b, _c = _a.status, status = _c === void 0 ? 'placeholder' : _c, rest = __rest$1(_a, ["size", "status"]);
-    return React.createElement('svg', compileProps({
+    return React.createElement('svg', __assign$1(__assign$1({}, rest), compileProps({
         status: status,
         statuses: statuses,
         className: rest.className,
         size: size
-    }));
+    })));
 };
 
 var StatusIcon = function (_a) {
@@ -524,5 +523,5 @@ var StatusIcon = function (_a) {
 
 export { OutlineStatusIcon, SimpleStatusIcon, SolidStatusIcon, StatusIcon as default };
 
-/* <windicss-keep class="outline inline-block animate-spin icon-dark-indigo-400 icon-light-gray-100 icon-dark-jade-400 icon-dark-red-400 icon-dark-gray-100 icon-dark-gray-300 icon-dark-gray-400 icon-dark-orange-400"> */
+/* <windicss-keep class="outline inline-block icon-dark-indigo-400 icon-light-gray-100 icon-dark-jade-400 icon-dark-red-400 icon-dark-gray-100 icon-dark-gray-300 icon-dark-orange-400 icon-dark-gray-400"> */
 //# sourceMappingURL=index.es.mjs.map