@cypress-design/react-statusicon 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @cypress-design/react-statusicon
+
+## 0.0.1
+
+### Patch Changes
+
+- [#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), [`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e), [`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
+  - @cypress-design/react-icon@0.4.0

package/OutlineStatusIcon.ts

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+import { statuses } from '../outline-imports'
+import type { VariantStatusIconProps } from '../constants'
+import { compileProps } from './compileProps'
+
+export const OutlineStatusIcon: React.FC<
+  VariantStatusIconProps & SVGProps<SVGSVGElement>
+> = ({ size = '24', status = 'placeholder', ...rest }) => {
+  return React.createElement(
+    'svg',
+    compileProps({
+      status,
+      statuses,
+      className: rest.className,
+      size,
+    })
+  )
+}
+
+export default OutlineStatusIcon

package/ReadMe.md

@@ -0,0 +1,35 @@
+# StatusIcon
+
+## Summary
+
+The icons that get displayed to represent run, spec, group, and test result statuses.
+
+## Install
+
+```bash
+npm install @cypress-design/react-statusicon
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/react-statusicon
+```
+
+## Usage
+
+The simple way of using the StatusIcon component
+
+```tsx
+import StatusIcon from '@cypress-design/react-statusicon'
+
+export default () => <StatusIcon size="16" status="failed" variant="solid" />
+```
+
+The tree-shakable way (more optimized)
+
+```tsx
+import { SolidStatusIcon } from '@cypress-design/react-statusicon'
+
+export default () => <SolidStatusIcon size="16" status="failed" />
+```

package/SimpleStatusIcon.ts

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+import { statuses } from '../simple-imports'
+import type { VariantStatusIconProps } from '../constants'
+import { compileProps } from './compileProps'
+
+export const SimpleStatusIcon: React.FC<
+  VariantStatusIconProps & SVGProps<SVGSVGElement>
+> = ({ size = '24', status = 'placeholder', ...rest }) => {
+  return React.createElement(
+    'svg',
+    compileProps({
+      status,
+      statuses,
+      className: rest.className,
+      size,
+    })
+  )
+}
+
+export default SimpleStatusIcon

package/SolidStatusIcon.ts

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+import { statuses } from '../solid-imports'
+import type { VariantStatusIconProps } from '../constants'
+import { compileProps } from './compileProps'
+
+export const SolidStatusIcon: React.FC<
+  VariantStatusIconProps & SVGProps<SVGSVGElement>
+> = ({ size = '24', status = 'placeholder', ...rest }) => {
+  return React.createElement(
+    'svg',
+    compileProps({
+      status,
+      statuses,
+      className: rest.className,
+      size,
+    })
+  )
+}
+
+export default SolidStatusIcon

package/StatusIcon.rootstory.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import clsx from 'clsx'
+import StatusIcon from './StatusIcon'
+import { statuses } from '../constants'
+
+const sizes = ['4', '8', '12', '16', '24']
+
+export default () => (
+  <table className="w-full">
+    <thead>
+      <tr key="h0">
+        <th className="text-left">Status</th>
+        <th className="text-left">Variant</th>
+        <th className="text-left" colSpan={sizes.length}>
+          Size
+        </th>
+        <th className="text-left">Used for</th>
+      </tr>
+      <tr key="h1">
+        <th />
+        <th />
+        {sizes.map((size) => {
+          return (
+            <th key={`heading-${size}`} className="text-left">
+              {size}
+            </th>
+          )
+        })}
+        <th />
+      </tr>
+    </thead>
+    <tbody>
+      {Object.keys(statuses).map((status) => {
+        const statusInfo = statuses[status]
+
+        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 />
+                  )}
+
+                  <td>{variant}</td>
+                  {sizes.map((size) => {
+                    return (
+                      <td key={`${status}-${size}-${variant}`} className="py-2">
+                        <StatusIcon
+                          status={status}
+                          size={size}
+                          variant={variant}
+                        />
+                      </td>
+                    )
+                  })}
+                  <td className="align-top py-2">
+                    {i === 0 ? statusInfo.use : ''}
+                  </td>
+                </tr>
+              )
+            })}
+          </>
+        )
+      })}
+    </tbody>
+  </table>
+)

package/StatusIcon.stories.mdx

@@ -0,0 +1,134 @@
+import { ArgsTable, Canvas, Meta, Story, Description } from '@storybook/addon-docs'
+import { version } from "./package.json"
+import changelog from "./CHANGELOG.md"
+import StatusIconStory from './StatusIcon.rootstory'
+import { statuses } from '../constants'
+
+import StatusIcon from './StatusIcon'
+import { OutlineStatusIcon, SimpleStatusIcon, SolidStatusIcon } from '@cypress-design/react-statusicon'
+
+<h1>StatusIcon<span className="text-lg font-normal"> - v{version}</span></h1>
+
+There is <a href="https://on.cypress.io/writing-and-organizing-tests" target="_blank">info in the docs</a> about what these statuses mean. The terminology can be a bit confusing, particularly around <a href="https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Pending" target="_blank">pending</a> and <a href="https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Skipped" target="_blank">skipped</a> test results.
+
+Runs, specs, and groups have one and only one of the following status: RUNNING, ERRORED, FAILED, TIMEDOUT, NOTESTS, PASSED, OVERLIMIT, or CANCELLED
+
+Specs can also have status UNCLAIMED
+
+Test results have one and only one of the following statuses: RUNNING, PENDING, SKIPPED, FAILED, PASSED, TIMEDOUT, ERRORED, or CANCELLED
+
+<Meta
+  title="StatusIcon"
+  component={StatusIcon}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/1WJ3GVQyMV5e7xVxPg3yID/Design-System?node-id=6814%3A10841",
+    }
+  }}
+  argTypes={{
+    size: {
+      control: { type: 'select' },
+      defaultValue: '16'
+    },
+    status: {
+      control: { type: 'select' },
+      options: Object.keys(statuses),
+      defaultValue: 'failed'
+    },
+    variant: {
+      control: { type: 'select' },
+      defaultValue: 'simple'
+    },
+  }} />
+
+<Canvas withSource="none">
+  <Story name="StatusIcon">
+    <StatusIconStory />
+  </Story>
+</Canvas>
+
+## Basic use
+
+```jsx
+import StatusIcon from '@cypress-design/react-statusicon'
+
+<StatusIcon status="failed" size="16" variant="simple" />
+```
+
+<Canvas>
+  <Story name="Basic use">
+    {(args) => {
+      return (
+        <StatusIcon
+          status={args.status}
+          size={args.size}
+          variant={args.variant}
+        />
+      )
+    }}
+  </Story>
+</Canvas>
+
+Not all statuses have unique icons for each variant. But if you pass any variant of the icon, it will default to one that is available for that status.
+
+As an example, if you pass `variant="simple"` with `status="errored"`, it will default to the solid variant, since the errored status has no simple variant available.
+
+<Canvas>
+  <StatusIcon
+    status="errored"
+    size="16"
+    variant="simple"
+  />
+</Canvas>
+
+## Tree-shakable
+
+If you want to avoid loading all the icon variants, you may use each variant separately.
+
+```jsx
+import { OutlineStatusIcon } from '@cypress-design/react-statusicon'
+
+<OutlineStatusIcon status="failed" size="16" />
+```
+
+<Canvas>
+  <Story name="Tree-shakable">
+    <OutlineStatusIcon
+      status="failed"
+      size="16"
+    />
+    <SimpleStatusIcon
+      status="failed"
+      size="16"
+    />
+    <SolidStatusIcon
+      status="failed"
+      size="16"
+    />
+  </Story>
+</Canvas>
+
+## Placeholder
+
+The placeholder icon appears if you pass a falsy status or no status at all.
+
+<Canvas>
+  <Story name="Placeholder">
+    <StatusIcon
+      status={null}
+      size="16"
+      variant="simple"
+    />
+    <StatusIcon
+      size="16"
+      variant="simple"
+    />
+  </Story>
+</Canvas>
+
+<ArgsTable />
+
+<Description>
+  {changelog.replace(/^# .+/, '## Changelog')}
+</Description>

package/StatusIcon.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+import type { Variant, Size } from '../constants'
+import { statuses } from '../constants'
+import OutlineStatusIcon from './OutlineStatusIcon'
+import SimpleStatusIcon from './SimpleStatusIcon'
+import SolidStatusIcon from './SolidStatusIcon'
+
+export type StatusIconProps = {
+  /**
+   * The size of the icon's canvas, in pixels.
+   */
+  size?: Size
+  /**
+    If there is no status provided, a placeholder icon will be shown
+  */
+  status?: keyof typeof statuses | null | undefined
+  /**
+   * If a status doesn't have an icon for that variant, it will default to one it does have
+   */
+  variant?: Variant
+}
+
+export const StatusIcon: React.FC<
+  StatusIconProps & SVGProps<SVGSVGElement>
+> = ({ size = '24', status, variant = 'simple', ...rest }) => {
+  if (variant === 'outline') {
+    return <OutlineStatusIcon size={size} status={status} {...rest} />
+  }
+
+  if (variant === 'simple') {
+    return <SimpleStatusIcon size={size} status={status} {...rest} />
+  }
+
+  return <SolidStatusIcon size={size} status={status} {...rest} />
+}
+
+export default StatusIcon

package/StatusIconReact.cy.tsx

@@ -0,0 +1,75 @@
+/// <reference types="cypress" />
+
+import * as React from 'react'
+import { mount } from 'cypress/react'
+import StatusIcon from './StatusIcon'
+import StatusIconStory from './StatusIcon.rootstory'
+
+describe('StatusIcon', () => {
+  it('renders', () => {
+    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>
+        <StatusIcon variant="simple" size="16" status="placeholder" />
+        <StatusIcon variant="solid" size="16" status="placeholder" />
+      </div>
+    )
+
+    cy.get('svg').first().invoke('html').as('firstIcon')
+    cy.get('svg').last().invoke('html').as('secondIcon')
+    cy.then(function () {
+      expect(this.firstIcon).to.eq(this.secondIcon)
+    })
+  })
+
+  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>
+    )
+
+    cy.get('svg').first().invoke('html').as('firstIcon')
+    cy.get('svg').last().invoke('html').as('secondIcon')
+    cy.then(function () {
+      expect(this.firstIcon).to.eq(this.secondIcon)
+    })
+  })
+
+  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>
+    )
+
+    cy.get('svg').first().invoke('html').as('firstIcon')
+    cy.get('svg').last().invoke('html').as('secondIcon')
+    cy.then(function () {
+      expect(this.firstIcon).to.eq(this.secondIcon)
+    })
+  })
+})

package/compileProps.ts

@@ -0,0 +1,26 @@
+import type { IconSet, VariantStatusIconProps } from '../constants'
+import { compileReactIconProperties } from '@cypress-design/react-icon'
+
+export const compileProps = ({
+  status,
+  statuses,
+  className,
+  size,
+}: VariantStatusIconProps & {
+  statuses: Record<string, IconSet>
+  className: string | undefined
+}) => {
+  const statusInfo = status ? statuses[status] : statuses.placeholder
+
+  const icon = statusInfo[`size${size}Icon`]
+
+  const classes = `inline-block ${className || ''} ${
+    statusInfo.shouldSpin && size !== '4' ? 'animate-spin' : ''
+  }`
+
+  return compileReactIconProperties({
+    body: icon.data,
+    compiledClasses: [classes],
+    size,
+  })
+}

package/dist/constants.d.ts

@@ -0,0 +1,104 @@
+export declare type Variant = 'outline' | 'simple' | 'solid';
+export declare type Size = '4' | '8' | '12' | '16' | '24';
+declare type StatusInfo = {
+    color: string;
+    link?: string;
+    use: string;
+    variants: readonly Variant[];
+};
+export declare type IconContents = {
+    name: string;
+    data: string;
+};
+export declare type IconSet = {
+    shouldSpin: boolean;
+    size4Icon: IconContents;
+    size8Icon: IconContents;
+    size12Icon: IconContents;
+    size16Icon: IconContents;
+    size24Icon: IconContents;
+};
+/**
+ * This "const" is used to create the list of statuses
+ */
+declare const constStatuses: {
+    readonly running: {
+        readonly color: "indigo-400";
+        readonly use: "Runs, specs, groups, test results";
+        readonly variants: readonly ["outline"];
+    };
+    readonly passed: {
+        readonly color: "jade-400";
+        readonly use: "Runs, specs, groups, test results";
+        readonly link: "https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Passed";
+        readonly variants: readonly ["outline", "simple", "solid"];
+    };
+    readonly failed: {
+        readonly color: "red-400";
+        readonly use: "Runs, specs, groups, test results";
+        readonly link: "https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Failed";
+        readonly variants: readonly ["outline", "simple", "solid"];
+    };
+    readonly unclaimed: {
+        readonly color: "gray-100";
+        readonly use: "Specs";
+        readonly variants: readonly ["outline"];
+    };
+    readonly placeholder: {
+        readonly color: "gray-300";
+        readonly use: "Placeholder";
+        readonly variants: readonly ["solid"];
+    };
+    readonly cancelled: {
+        readonly color: "gray-300";
+        readonly use: "Runs, specs, groups, test results";
+        readonly variants: readonly ["outline", "solid"];
+    };
+    readonly noTests: {
+        readonly color: "gray-400";
+        readonly use: "Runs, specs, groups";
+        readonly variants: readonly ["outline", "solid"];
+    };
+    readonly errored: {
+        readonly color: "orange-400";
+        readonly use: "Runs, specs, groups, test results";
+        readonly variants: readonly ["outline", "solid"];
+    };
+    readonly timedOut: {
+        readonly color: "orange-400";
+        readonly use: "Runs, specs, groups, test results";
+        readonly variants: readonly ["outline", "solid"];
+    };
+    readonly overLimit: {
+        readonly color: "orange-400";
+        readonly use: "Runs, specs, groups";
+        readonly link: "https://docs.cypress.io/faq/questions/dashboard-faq#What-happens-once-I-reach-the-test-results-limit";
+        readonly variants: readonly ["outline", "solid"];
+    };
+    readonly skipped: {
+        readonly color: "gray-400";
+        readonly use: "Test results";
+        readonly link: "https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Skipped";
+        readonly variants: readonly ["outline"];
+    };
+    readonly pending: {
+        readonly color: "gray-300";
+        readonly use: "Test results";
+        readonly link: "https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Pending";
+        readonly variants: readonly ["outline"];
+    };
+};
+export declare type statusTypes = keyof typeof constStatuses;
+/**
+ * The status we have here, allow us to check the validity of the constant
+ */
+export declare const statuses: Record<statusTypes, StatusInfo>;
+export declare type VariantStatusIconProps = {
+    size: Size;
+    /**
+      If there is no status provided, a placeholder icon will be shown
+    */
+    status?: keyof typeof statuses | null | undefined;
+};
+export {};
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +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"}