@cypress-design/react-statusicon 0.2.6 → 0.4.0

package/index.ts

@@ -1,5 +1,5 @@
 export { default } from './StatusIcon'
-export { OutlineStatusIcon } from './OutlineStatusIcon'
-export { SimpleStatusIcon } from './SimpleStatusIcon'
-export { SolidStatusIcon } from './SolidStatusIcon'
-export type { statusTypes as StatusType } from '../constants'
+export { OutlineStatusIcon } from './_OutlineStatusIcon'
+export { SimpleStatusIcon } from './_SimpleStatusIcon'
+export { SolidStatusIcon } from './_SolidStatusIcon'
+export type { statusTypes as StatusType } from '@cypress-design/constants-statusicon'

package/package.json

@@ -1,27 +1,31 @@
 {
-	"name": "@cypress-design/react-statusicon",
-	"version": "0.2.6",
-	"files": [
-		"*"
-	],
-	"typings": "./dist/react/index.d.ts",
-	"main": "./dist/index.umd.js",
-	"module": "./dist/index.es.mjs",
-	"exports": {
-		".": {
-			"import": "./dist/index.es.mjs",
-			"require": "./dist/index.umd.js"
-		}
-	},
-	"scripts": {
-		"build": "yarn build:module && yarn build:types",
-		"build:module": "rollup -c ./rollup.config.mjs",
-		"build:types": "tsc --project ./tsconfig.build.json"
-	},
-	"dependencies": {
-		"@cypress-design/icon-registry": "^0.20.2",
-		"@cypress-design/react-icon": "^0.18.0",
-		"clsx": "*"
-	},
-	"license": "MIT"
+  "name": "@cypress-design/react-statusicon",
+  "version": "0.4.0",
+  "files": [
+    "*"
+  ],
+  "typings": "./dist/index.d.ts",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.mjs",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "yarn build:module && yarn build:types",
+    "build:module": "rollup -c ./rollup.config.mjs",
+    "build:types": "tsc --project ./tsconfig.build.json"
+  },
+  "dependencies": {
+    "@cypress-design/react-icon": "^0.20.0",
+    "clsx": "*"
+  },
+  "devDependencies": {
+    "@cypress-design/constants-statusicon": "*",
+    "@cypress-design/css": "*"
+  },
+  "license": "MIT"
 }

package/tsconfig.build.json

@@ -1,8 +1,8 @@
 {
   "extends": "../../../tsconfig.react.build.json",
-  "include": ["./StatusIcon.tsx", "./*.ts", "../constants.ts"],
+  "include": ["./StatusIcon.tsx", "./*.ts"],
   "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "../"
+    "sourceRoot": "./",
+    "outDir": "dist"
   }
 }

package/tsconfig.json

@@ -1,9 +1,8 @@
 {
   "extends": "../../../tsconfig.react.json",
-  "include": [
-    "*.tsx",
-    "*.ts",
-    "../constants.ts",
-    "../../../cypress/support/*.ts"
-  ]
+  "compilerOptions": {
+    "sourceRoot": "./",
+    "outDir": "dist"
+  },
+  "include": ["*.tsx", "*.ts", "../../../cypress/support/*.ts"]
 }

package/StatusIcon.stories.mdx

@@ -1,134 +0,0 @@
-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/dist/constants.d.ts

@@ -1,106 +0,0 @@
-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: WindiColor;
-    link?: string;
-    use: string;
-    variants: readonly Variant[];
-    secondaryColor?: WindiColor;
-};
-export declare type IconContents = {
-    name: string;
-    data: string;
-};
-export declare type IconSet = {
-    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 secondaryColor: "gray-100";
-    };
-    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: "orange-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

@@ -1 +0,0 @@
-{"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/outline-imports.d.ts

@@ -1,3 +0,0 @@
-import type { IconSet } from './constants';
-export declare const statuses: Record<string, IconSet>;
-//# sourceMappingURL=outline-imports.d.ts.map

package/dist/outline-imports.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-imports.d.ts","sourceRoot":"","sources":["../../outline-imports.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAkD1C,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAqF5C,CAAA"}

package/dist/react/OutlineStatusIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OutlineStatusIcon.d.ts","sourceRoot":"","sources":["../../OutlineStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAG1D,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CACtC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAWjD,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/react/SimpleStatusIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SimpleStatusIcon.d.ts","sourceRoot":"","sources":["../../SimpleStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAG1D,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CACrC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAWjD,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/react/SolidStatusIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SolidStatusIcon.d.ts","sourceRoot":"","sources":["../../SolidStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAG1D,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CACpC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAWjD,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/react/StatusIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../StatusIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAKvC,oBAAY,eAAe,GAAG;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IACX;;MAEE;IACF,MAAM,CAAC,EAAE,MAAM,OAAO,QAAQ,GAAG,IAAI,GAAG,SAAS,CAAA;IACjD;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAC/B,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,CAW1C,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/react/compileProps.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"compileProps.d.ts","sourceRoot":"","sources":["../../compileProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAKnE,eAAO,MAAM,YAAY;cAMb,OAAO,MAAM,EAAE,OAAO,CAAC;eACtB,MAAM,GAAG,SAAS;SAuB9B,CAAA"}

package/dist/react/index.d.ts

@@ -1,6 +0,0 @@
-export { default } from './StatusIcon';
-export { OutlineStatusIcon } from './OutlineStatusIcon';
-export { SimpleStatusIcon } from './SimpleStatusIcon';
-export { SolidStatusIcon } from './SolidStatusIcon';
-export type { statusTypes as StatusType } from '../constants';
-//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,YAAY,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/dist/simple-imports.d.ts

@@ -1,3 +0,0 @@
-import type { IconSet } from './constants';
-export declare const statuses: Record<string, IconSet>;
-//# sourceMappingURL=simple-imports.d.ts.map

package/dist/simple-imports.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"simple-imports.d.ts","sourceRoot":"","sources":["../../simple-imports.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAiD1C,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAqF5C,CAAA"}

package/dist/solid-imports.d.ts

@@ -1,3 +0,0 @@
-import type { IconSet } from './constants';
-export declare const statuses: Record<string, IconSet>;
-//# sourceMappingURL=solid-imports.d.ts.map

package/dist/solid-imports.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"solid-imports.d.ts","sourceRoot":"","sources":["../../solid-imports.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAkD1C,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAqF5C,CAAA"}