npm - @cypress-design/react-testresult - Versions diffs - 0.0.2 - Mend

@cypress-design/react-testresult 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/.turbo/turbo-build.log ADDED Viewed

@@ -0,0 +1,6 @@
+$ yarn build:module && yarn build:types
+$ rollup -c ./rollup.config.mjs
+[36m
+[1m./index.ts[22m → [1m./dist/index.umd.js, ./dist/index.es.mjs[22m...[39m
+[32mcreated [1m./dist/index.umd.js, ./dist/index.es.mjs[22m in [1m5.2s[22m[39m
+$ tsc --project ./tsconfig.build.json

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,10 @@
+# @cypress-design/react-testresult
+## 0.0.2
+### Patch Changes
+- [#366](https://github.com/cypress-io/cypress-design/pull/366) [`3a48cc3`](https://github.com/cypress-io/cypress-design/commit/3a48cc327666f1a3b067263a24dd13a3ba1f3b1e) Thanks [@ryanjwilke](https://github.com/ryanjwilke)! - create the component
+- Updated dependencies [[`3a48cc3`](https://github.com/cypress-io/cypress-design/commit/3a48cc327666f1a3b067263a24dd13a3ba1f3b1e)]:
+  - @cypress-design/constants-testresult@0.0.2

package/ReadMe.md ADDED Viewed

@@ -0,0 +1,75 @@
+# TestResult
+## Install
+```bash
+npm install @cypress-design/react-testresult
+```
+or with yarn
+```bash
+yarn add @cypress-design/react-testresult
+```
+## Usage
+```ts
+import TestResult from '@cypress-design/react-testresult'
+```
+```tsx live
+import { useState } from 'react'
+import TestResult from '@cypress-design/react-testresult'
+import Button from '@cypress-design/react-button'
+import {
+  IconActionTestReplay,
+  IconChevronRightSmall,
+} from '@cypress-design/react-icon'
+export const Demo = () => {
+  const [toggled, setToggled] = useState(false)
+  return (
+    <div className="bg-white p-2">
+      <TestResult
+        status="passed"
+        names={['<TestResults />', 'playground']}
+        flaky
+        modified
+        added
+        groups={
+          toggled
+            ? ['Chrome', 'Firefox'].map((group) => (
+                <div className="px-[16px] py-[8px] border border-gray-100 flex">
+                  <span className="flex-1">{group}</span>
+                  <Button
+                    variant="outline-light"
+                    size="32"
+                    className="!px-[8px] @lg/test-result:!px-[12px] h-[32px]"
+                  >
+                    <IconActionTestReplay />
+                    <span className="hidden @lg/test-result:inline ml-[8px]">
+                      Test Replay
+                    </span>
+                  </Button>
+                </div>
+              ))
+            : null
+        }
+      >
+        <Button
+          variant="outline-light"
+          size="32"
+          className="!px-[8px] hidden @xl/test-result:inline-block h-[32px]"
+          onClick={() => setToggled(!toggled)}
+        >
+          <IconChevronRightSmall
+            stroke-color="gray-500"
+            className={`${toggled ? 'rotate-90' : ''} transform transition-transform`}
+          />
+        </Button>
+      </TestResult>
+    </div>
+  )
+}
+```

package/TestResult.tsx ADDED Viewed

@@ -0,0 +1,142 @@
+import * as React from 'react'
+import clsx from 'clsx'
+import {
+  classes,
+  type TestResultData,
+} from '@cypress-design/constants-testresult'
+import StatusIcon from '@cypress-design/react-statusicon'
+import {
+  IconChevronRightSmall,
+  IconStatusFlaky,
+  IconDocumentModifiedSquareDot,
+  IconDocumentAddedSquarePlus,
+} from '@cypress-design/react-icon'
+export interface TestResultProps extends TestResultData {
+  className?: string
+  groups?: React.ReactNode
+}
+export const TestResult: React.FC<
+  TestResultProps & React.HTMLProps<HTMLDivElement>
+> = ({
+  status,
+  names,
+  flaky,
+  modified,
+  added,
+  className,
+  groups,
+  children,
+  ...rest
+}) => {
+  return (
+    <div
+      data-cy="cd-tr-container"
+      {...rest}
+      className={clsx(classes.container, className)}
+    >
+      <div data-cy="cd-tr-row" className={classes.row}>
+        <div data-cy="cd-tr-list" className={classes.list}>
+          <div data-cy="cd-tr-icon" className={classes.icon}>
+            <StatusIcon
+              size="16"
+              variant="solid"
+              status={status}
+              className={classes.status_icon}
+            />
+          </div>
+          <div
+            data-cy="cd-tr-name-container-column"
+            className={classes.name.container.column}
+          >
+            {names.slice(0, -1).length > 0 && (
+              <div
+                data-cy="cd-tr-name-container-describes"
+                className={classes.name.container.describes}
+              >
+                {names.slice(0, -1).map((name, index) => (
+                  <React.Fragment key={index}>
+                    <div
+                      data-cy="cd-tr-name-item"
+                      className={clsx({
+                        [classes.name.item.base]: true,
+                        [classes.name.item.first]:
+                          names.length >= 2 && index === 0,
+                        [classes.name.item.middle]:
+                          names.length >= 2 &&
+                          index > 0 &&
+                          index < names.length - 1,
+                      })}
+                    >
+                      <span
+                        data-cy="cd-tr-name-item-text"
+                        className={classes.name.item.text.base}
+                      >
+                        {name}
+                      </span>
+                    </div>
+                    {index < names.length - 1 && (
+                      <div
+                        data-cy="cd-tr-chevron"
+                        className={classes.chevron.container}
+                      >
+                        <IconChevronRightSmall
+                          strokeColor="gray-200"
+                          className="mt-[2px]"
+                        />
+                      </div>
+                    )}
+                  </React.Fragment>
+                ))}
+              </div>
+            )}
+            <div
+              data-cy="cd-tr-name-container-it"
+              className={classes.name.container.it}
+            >
+              <span
+                data-cy="cd-tr-name-item-text"
+                className={[
+                  classes.name.item.text.base,
+                  classes.name.item.text.it,
+                ].join(' ')}
+              >
+                {names.at(-1)}
+              </span>
+              {(flaky || modified || added) && (
+                <div
+                  data-cy="cd-tr-attributes"
+                  className={classes.attribute.container}
+                >
+                  {flaky && <IconStatusFlaky data-cy="cd-tr-flaky" />}
+                  {modified && (
+                    <IconDocumentModifiedSquareDot data-cy="cd-tr-modified" />
+                  )}
+                  {added && (
+                    <IconDocumentAddedSquarePlus data-cy="cd-tr-added" />
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+          {children ? (
+            <div data-cy="cd-tr-actions" className={classes.button.container}>
+              {children}
+            </div>
+          ) : null}
+        </div>
+        {groups ? (
+          <div
+            data-cy="cd-tr-group-container"
+            className={classes.group.container}
+          >
+            {groups}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+export default TestResult

package/TestResultReact.cy.tsx ADDED Viewed

@@ -0,0 +1,92 @@
+/// <reference types="cypress" />
+import * as React from 'react'
+import { mount } from 'cypress/react18'
+import TestResult from './TestResult'
+import {
+  TestResultData,
+  TestResults,
+} from '@cypress-design/constants-testresult'
+import Button from '@cypress-design/react-button'
+import {
+  IconActionTestReplay,
+  IconChevronRightSmall,
+} from '@cypress-design/react-icon'
+import assertions from '../assertions'
+import clsx from 'clsx'
+const TestResultSut = (result: TestResultData & { groups?: string[] }) => {
+  const [showGroupBox, setShowGroupBox] = React.useState(false)
+  return (
+    <TestResult
+      {...result}
+      groups={
+        showGroupBox ? (
+          <div className="flex flex-col">
+            {result.groups?.map((group, index) => (
+              <div
+                key={group + index}
+                className="px-[16px] py-[12px] border border-gray-100 flex mb-[-1px] h-[56px]"
+              >
+                <span className="flex-1">{group}</span>
+                <Button
+                  variant="outline-light"
+                  size="32"
+                  className="!px-[8px] @lg/test-result:!px-[12px] h-[32px]"
+                >
+                  <IconActionTestReplay />
+                  <span className="hidden @lg/test-result:inline ml-[8px]">
+                    Test Replay
+                  </span>
+                </Button>
+              </div>
+            ))}
+          </div>
+        ) : null
+      }
+      onClick={() => (result.groups ? setShowGroupBox(!showGroupBox) : null)}
+    >
+      {result.groups ? null : (
+        <Button
+          variant="outline-light"
+          size="32"
+          className="!px-[8px] @lg/test-result:!px-[12px]"
+        >
+          <IconActionTestReplay />
+          <span className="hidden @lg/test-result:inline ml-[8px]">
+            Test Replay
+          </span>
+        </Button>
+      )}
+      <Button
+        variant="outline-light"
+        size="32"
+        className="!px-[8px] hidden @xl/test-result:inline-block"
+        onClick={() => (result.groups ? setShowGroupBox(!showGroupBox) : null)}
+      >
+        <span className="sr-only">Expand Group</span>
+        <IconChevronRightSmall
+          stroke-color="gray-500"
+          className={clsx({
+            'transition-transform transform': true,
+            'rotate-90': showGroupBox,
+          })}
+        />
+      </Button>
+    </TestResult>
+  )
+}
+describe('<TestResult/>', () => {
+  function mountStory() {
+    mount(
+      <div className="p-[16px]">
+        {TestResults.map((result) => (
+          <TestResultSut {...result} key={result.id} />
+        ))}
+      </div>,
+    )
+  }
+  assertions(mountStory)
+})

package/dist/TestResult.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { type TestResultData } from '@cypress-design/constants-testresult';
+export interface TestResultProps extends TestResultData {
+    className?: string;
+    groups?: React.ReactNode;
+}
+export declare const TestResult: React.FC<TestResultProps & React.HTMLProps<HTMLDivElement>>;
+export default TestResult;
+//# sourceMappingURL=TestResult.d.ts.map

package/dist/TestResult.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TestResult.d.ts","sourceRoot":"./","sources":["TestResult.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,sCAAsC,CAAA;AAS7C,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAC/B,eAAe,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAuHlD,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default } from './TestResult';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"./","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}