@cypress-design/react-statusicon 0.4.15 → 0.4.17

package/.turbo/turbo-build.log

@@ -8,5 +8,5 @@ $ rollup -c ./rollup.config.mjs
 index.ts
 
 Consumers of your bundle will have to use chunk.default to access their default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
-created ./dist/index.umd.js, ./dist/index.es.mjs in 14.4s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 14.5s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @cypress-design/react-statusicon
 
+## 0.4.17
+
+### Patch Changes
+
+- Updated dependencies [[`7f9ebbb`](https://github.com/cypress-io/cypress-design/commit/7f9ebbb83744d4109498f921f7de5539ccc3b479), [`2f984a0`](https://github.com/cypress-io/cypress-design/commit/2f984a02807f344a878ac65ac9fab62bc0c9442d)]:
+  - @cypress-design/react-icon@0.32.0
+
+## 0.4.16
+
+### Patch Changes
+
+- Updated dependencies [[`04bd296`](https://github.com/cypress-io/cypress-design/commit/04bd296f515ad300450deb2f838dc3ac6bae26f7)]:
+  - @cypress-design/react-icon@0.31.0
+
 ## 0.4.15
 
 ### Patch Changes

package/ReadMe.md

@@ -20,15 +20,17 @@ import StatusIcon from '@cypress-design/react-statusicon'
 
 The simple way of using the StatusIcon component
 
-```tsx
+```tsx live
 import StatusIcon from '@cypress-design/react-statusicon'
 
-export default () => <StatusIcon size="16" status="failed" variant="solid" />
+export default () => {
+  return <StatusIcon size="16" status="failed" variant="solid" />
+}
 ```
 
 The tree-shakable way (more optimized)
 
-```tsx
+```tsx live
 import { SolidStatusIcon } from '@cypress-design/react-statusicon'
 
 export default () => <SolidStatusIcon size="16" status="failed" />

package/StatusIcon.rootstory.tsx

@@ -5,7 +5,7 @@ import { statuses } from '../constants'
 
 const sizes = ['4', '8', '12', '16', '24']
 
-export default () => (
+export const Story = () => (
   <table className="w-full">
     <thead>
       <tr key="h0">
@@ -30,54 +30,46 @@ export default () => (
       </tr>
     </thead>
     <tbody>
-      {Object.entries(statuses).map(([status, statusInfo]) => {
-        return (
-          <>
-            {statusInfo.variants.map((variant, i) => {
-              return (
-                <tr
-                  className={clsx(i === 0 && 'border-t')}
-                  key={`${status}-${variant}`}
-                >
-                  {i === 0 ? (
-                    <td>
-                      {statusInfo.link ? (
-                        <a
-                          href={statusInfo.link}
-                          className="text-indigo-500 underline"
-                          target="_blank"
-                        >
-                          {status}
-                        </a>
-                      ) : (
-                        status
-                      )}
-                    </td>
-                  ) : (
-                    <td />
-                  )}
+      {Object.entries(statuses).map(([status, statusInfo]) =>
+        statusInfo.variants.map((variant, i) => (
+          <tr
+            className={clsx(i === 0 && 'border-t')}
+            key={`${status}-${variant}`}
+          >
+            {i === 0 ? (
+              <td>
+                {statusInfo.link ? (
+                  <a
+                    href={statusInfo.link}
+                    className="text-indigo-500 underline"
+                    target="_blank"
+                  >
+                    {status}
+                  </a>
+                ) : (
+                  status
+                )}
+              </td>
+            ) : (
+              <td />
+            )}
 
-                  <td>{variant}</td>
-                  {sizes.map((size) => {
-                    return (
-                      <td key={`${status}-${size}-${variant}`} className="py-2">
-                        <StatusIcon
-                          status={status as any}
-                          size={size as any}
-                          variant={variant}
-                        />
-                      </td>
-                    )
-                  })}
-                  <td className="py-2 align-top">
-                    {i === 0 ? statusInfo.use : ''}
-                  </td>
-                </tr>
+            <td>{variant}</td>
+            {sizes.map((size) => {
+              return (
+                <td key={`${status}-${size}-${variant}`} className="py-2">
+                  <StatusIcon
+                    status={status as any}
+                    size={size as any}
+                    variant={variant}
+                  />
+                </td>
               )
             })}
-          </>
-        )
-      })}
+            <td className="py-2 align-top">{i === 0 ? statusInfo.use : ''}</td>
+          </tr>
+        )),
+      )}
     </tbody>
   </table>
 )

package/StatusIconReact.cy.tsx

@@ -3,15 +3,25 @@
 import * as React from 'react'
 import { mount } from 'cypress/react18'
 import StatusIcon from './StatusIcon'
-import StatusIconStory from './StatusIcon.rootstory'
+import { Story as StatusIconStory } from './StatusIcon.rootstory'
 
 describe('StatusIcon', () => {
   it('defaults to a variant that exists if the one provided does not exist', () => {
     mount(
       <div>
-        <StatusIcon variant="simple" size="16" status="placeholder" />
-        <StatusIcon variant="solid" size="16" status="placeholder" />
-      </div>
+        <StatusIcon
+          key="simple"
+          variant="simple"
+          size="16"
+          status="placeholder"
+        />
+        <StatusIcon
+          key="solid"
+          variant="solid"
+          size="16"
+          status="placeholder"
+        />
+      </div>,
     )
 
     cy.get('svg').first().invoke('html').as('firstIcon')
@@ -24,9 +34,14 @@ describe('StatusIcon', () => {
   it('displays a placeholder icon if no status is passed', () => {
     mount(
       <div>
-        <StatusIcon variant="simple" size="16" />
-        <StatusIcon variant="solid" size="16" status="placeholder" />
-      </div>
+        <StatusIcon key="simple" variant="simple" size="16" />
+        <StatusIcon
+          key="solid"
+          variant="solid"
+          size="16"
+          status="placeholder"
+        />
+      </div>,
     )
 
     cy.get('svg').first().invoke('html').as('firstIcon')
@@ -39,9 +54,14 @@ describe('StatusIcon', () => {
   it('displays a placeholder icon if null status is passed', () => {
     mount(
       <div>
-        <StatusIcon variant="simple" size="16" status={null} />
-        <StatusIcon variant="simple" size="16" status="placeholder" />
-      </div>
+        <StatusIcon key="simple-1" variant="simple" size="16" status={null} />
+        <StatusIcon
+          key="simple-2"
+          variant="simple"
+          size="16"
+          status="placeholder"
+        />
+      </div>,
     )
 
     cy.get('svg').first().invoke('html').as('firstIcon')

package/dist/index.es.mjs

@@ -482,7 +482,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 var compileReactIconProperties = function (_a) {
-    var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name"]);
+    var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, alt = _a.alt, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name", "alt"]);
     var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
         if (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
             attrName !== 'name') {
@@ -509,7 +509,11 @@ var compileReactIconProperties = function (_a) {
         }
     }, [defs, name, size]);
     var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
-            __html: body,
+            __html: alt
+                ? "<title>".concat(alt.replace(/[><]/g, function (s) {
+                    return s === '>' ? '&gt;' : '&lt;';
+                }), "</title>").concat(body)
+                : body,
         }, className: undefined }, filteredAttributes);
     if (attributes.className) {
         compiledClasses.push(attributes.className);
@@ -521,7 +525,7 @@ var compileReactIconProperties = function (_a) {
 };
 
 
-/* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
+/* <wind-keep class="filter icon-light-secondary icon-dark-secondary h-1 h-2"> */
 
 var compileProps = function (_a) {
     var status = _a.status, statuses = _a.statuses, className = _a.className, size = _a.size, variantName = _a.variantName;