diff --git a/docs/accessibility/get-started/introduction.mdx b/docs/accessibility/get-started/introduction.mdx index 1884e48161..ce4dcd55c8 100644 --- a/docs/accessibility/get-started/introduction.mdx +++ b/docs/accessibility/get-started/introduction.mdx @@ -6,22 +6,47 @@ sidebar_position: 10 sidebar_custom_props: { 'new_label': true } --- -# Cypress Accessibility +# Cypress Accessibility + Add-on - +Instantly visualize, triage, and fix accessibility violations without any additional code or configuration. +Dive deep into each violation with live, fully-rendered DOM snapshots of your application as it appeared during your tests. +Track your team's progress over time with historical scores to monitor improvements and identify regressions. +Looking for a general guide for Accessibility testing in Cypress App? [Go here](/app/guides/accessibility-testing). -## What is Cypress Accessibility? - -Cypress Accessibility provides organized, visual, and actionable accessibility reports, based completely on the tests you record to Cypress Cloud, and powered by Axe Core® by Deque Systems. This is the documentation page for that product. To learn about the general topic of accessibility testing using the Cypress App, see [our guide on this topic](/app/guides/accessibility-testing). - -Cypress Accessibility generates a sortable, filterable report, to see scores and violation counts by page/component, or a combined rule-based report for the entire run. It also includes a drill-in view with live DOM snapshots highlighting each issue detected. + + + -## How are reports created? +## Get Started + +You don't need to make any changes to your code or your test setup. If you record test runs to the Cypress Cloud with Test Replay, you're ready to start using Cypress Accessibility. +You'll start your [free trial](https://www.cypress.io/accessibility?utm_medium=intro-cta&utm_source=docs.cypress.io&utm_content=Request%20trial) with personalized support +from our sales team and your existing test data to instantly see full accessibility reports for all your Cypress projects. +From there, you can integrate with CI to set your own standards for handling the results. + +## How it Works + +Cypress Accessibility provides organized, visual, and actionable accessibility reports, based completely on the tests you record to Cypress Cloud, and powered by Axe Core® by Deque Systems. This is the documentation page for that product. To learn about the general topic of accessibility testing using the Cypress App, see [our guide on this topic](/app/guides/accessibility-testing). + +Cypress Accessibility generates a sortable, filterable report, to see scores and violation counts by page/component, or a combined rule-based report for the entire run. It also includes a drill-in view with live DOM snapshots highlighting each issue detected. :::caution diff --git a/docs/cloud/get-started/introduction.mdx b/docs/cloud/get-started/introduction.mdx index d4c2cd36bc..2a38c00942 100644 --- a/docs/cloud/get-started/introduction.mdx +++ b/docs/cloud/get-started/introduction.mdx @@ -4,14 +4,32 @@ sidebar_position: 10 sidebar_label: Introduction --- -:::info +# Cypress Cloud -##### What you'll learn +Cypress Cloud unlocks the full potential of Cypress test automation tools in your CI pipeline. Scale every facet of Cypress testing, and push your code with confidence every time. -- The benefits of using Cypress Cloud -- How to get started with Cypress Cloud + + + -::: + + +## Benefits [Cypress Cloud](https://on.cypress.io/cloud) is our enterprise-ready companion to the open-source Cypress app, allowing you to: @@ -26,11 +44,6 @@ to the open-source Cypress app, allowing you to: Cypress app. - [Configure Cypress Cloud how you want](#Flexible-enterprise-configuration-and-single-sign-on) and enable enterprise single sign on. -[Start a free trial of Cypress Cloud](/cloud/get-started/setup) now, or -read on for more benefits of Cypress Cloud. - -## Benefits - ### View and debug past test results Each test run is stored in Cypress Cloud, where you can see past results and the @@ -42,11 +55,6 @@ Or view each test's [command logs, screenshots, video replays, stack traces, and CI logs](/cloud/features/recorded-runs#Test-detail-sidebar). Quickly identifying a test failure in CI is just a click away. - - ### Analyze and diagnose test health View each [run's overview](/cloud/features/recorded-runs#Overview-tab) to see and compare diff --git a/docs/ui-coverage/get-started/introduction.mdx b/docs/ui-coverage/get-started/introduction.mdx index 2572a4b2a6..a96d65e8ae 100644 --- a/docs/ui-coverage/get-started/introduction.mdx +++ b/docs/ui-coverage/get-started/introduction.mdx @@ -6,13 +6,37 @@ sidebar_position: 10 sidebar_custom_props: { 'new_label': true } --- -# UI Coverage +# UI Coverage + Add-on - +Easily track, monitor, and visualize the test coverage of your UI to prevent regressions by ensuring critical flows of your app are tested. Save CI resources by removing redundant tests and improve your team's productivity with a visual overview of UI coverage across every page and component. -## What is UI Coverage + + + + + -UI Coverage is a visual test coverage report based on the interactive elements that make up your application. It highlights areas of missed test coverage directly within every page of your application, that you can use to make data-driven testing decisions. UI Coverage gives you the tools you need to understand coverage gaps, inform your testing strategy, and ship high-quality code with confidence. +## Get Started + +UI Coverage works instantly, with no setup or code instrumentation required. If you record test runs to the Cypress Cloud with Test Replay, you're ready to start using UI Coverage. +You'll start your free trial with personalized support from our sales team and your existing test data to instantly see where testing gaps exist for all of your Cypress projects. +From there, you can easily customize reports to fit your needs with flexible configuration options. ## How it Works @@ -29,12 +53,3 @@ UI Coverage captures "snapshots" of every page visited by your Cypress tests (an As a result, a UI Coverage score is generated. This score quantifies coverage across your application by measuring the ratio of the unique elements that have been tested to the total unique elements that are found across your application. Because Cypress Accessibility uses data captured through Cypress Test Replay, it is subject to any [limitations of Test Replay](https://docs.cypress.io/faq/questions/cloud-faq#Is-everything-captured-and-replayed-in-Test-Replay) data captured and browser support. - -## Getting Started - -To access UI Coverage, navigate to the 'UI Coverage' tab in a run's details page. You can access a run's details page by clicking on a run in the 'Latest runs' tab. - - diff --git a/package-lock.json b/package-lock.json index 72310971ce..0795df9406 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,10 @@ "version": "0.0.0", "hasInstallScript": true, "dependencies": { - "@cypress-design/css": "^0.18.0", - "@cypress-design/react-docmenu": "^0.7.1", - "@cypress-design/react-tag": "^0.3.3", + "@cypress-design/css": "^1.0.0", + "@cypress-design/react-button": "^1.0.1", + "@cypress-design/react-docmenu": "^1.0.2", + "@cypress-design/react-tag": "^1.0.3", "@docusaurus/core": "^3.1.1", "@docusaurus/preset-classic": "^3.1.1", "@fortawesome/fontawesome-svg-core": "^6.5.1", @@ -2146,72 +2147,70 @@ "node": ">=0.1.90" } }, - "node_modules/@cypress-design/constants-docmenu": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@cypress-design/constants-docmenu/-/constants-docmenu-0.2.0.tgz", - "integrity": "sha512-IyPavlB7vcvBb0zlfFefC8Jr2zcxihqP8c2O5pj2UR9nsTfgYTksMWRSNbQgGtEXzpUSKum7M+sBiRVrPDrjTw==" - }, - "node_modules/@cypress-design/constants-tag": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@cypress-design/constants-tag/-/constants-tag-0.1.0.tgz", - "integrity": "sha512-btIx0xCj6/OOCOMzprrxWJk0TdJ3Y5pOj56PpSjyHV/0bkUNWlhQ/D4h05LvjW2AsG4/DWBqwGRcuiSGfHFFng==" + "node_modules/@cypress-design/color-constants": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@cypress-design/color-constants/-/color-constants-1.0.0.tgz", + "integrity": "sha512-ZGSfWR5zSQQkc6+k0xiRiuCdxUzoPYOwdIOHIK6M0PqhPg3rmP455M752U082jbIsQvoea4k9CNE053oOna4Zw==", + "dependencies": { + "@tailwindcss/container-queries": "^0.1.1", + "lodash": "^4.17.21", + "resolve-pkg": "^2.0.0", + "tailwindcss": "^3.4.3", + "tailwindcss-hocus": "^0.0.7" + } }, "node_modules/@cypress-design/css": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/@cypress-design/css/-/css-0.18.0.tgz", - "integrity": "sha512-ZlWBxRcGdVJCCnfUva8IZdfiV2yOoWAyLdEE74TgC9rlhRFaZqzqYq3gLKpiQyFgg70SnVV3/AUkVMRARALcMg==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@cypress-design/css/-/css-1.0.0.tgz", + "integrity": "sha512-FtKERQybOTBd+2USvTKQVZYnXE9EF2y8hLCslm2iNyb1TbcKU4fLc3aeSTEFKupDsZxCCYDDQJHSYxjWjgYiTg==", "dependencies": { "@tailwindcss/container-queries": "^0.1.1", "lodash": "^4.17.21", "resolve-pkg": "^2.0.0", - "tailwindcss": "^3.4.1" + "tailwindcss": "^3.4.3", + "tailwindcss-hocus": "^0.0.7" } }, "node_modules/@cypress-design/icon-registry": { - "version": "0.34.0", - "resolved": "https://registry.npmjs.org/@cypress-design/icon-registry/-/icon-registry-0.34.0.tgz", - "integrity": "sha512-X8zW6/WipS3XFn+XbVG+kDEvTxHKngNVE+b5l+wYUxxDnabxvgaTPNmJSwmm3ya/Va5oU0hdL4llUop36BQM4Q==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@cypress-design/icon-registry/-/icon-registry-1.5.2.tgz", + "integrity": "sha512-IXo1ISzRVk2rCmHHahHswwlOouR8ZRkw6PQZW97pAFf0cMKelzYWrUzHedmWAGKcJjsbJe9eCfZkQOe/4PeZhQ==", "dependencies": { - "@cypress-design/css": "^0.17.1" + "@cypress-design/color-constants": "^1.0.0" } }, - "node_modules/@cypress-design/icon-registry/node_modules/@cypress-design/css": { - "version": "0.17.1", - "resolved": "https://registry.npmjs.org/@cypress-design/css/-/css-0.17.1.tgz", - "integrity": "sha512-eQlCwbifrTTU8qApJv+c4rS5u1sI06yaGZAYeA4J47mOe3Goxadq7P3lVVW0n3WZrcHEZvkAh5qj0AN2Hpsakg==", + "node_modules/@cypress-design/react-button": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@cypress-design/react-button/-/react-button-1.0.1.tgz", + "integrity": "sha512-6zY/zgEC+5IMQsgr3mcmeyeFCSMo1NqnJifd0uc2GNVlZ8aR07C2znJpEqyP9eHPdUAyGGCILNtXqMP0CaAGTw==", "dependencies": { - "@tailwindcss/container-queries": "^0.1.1", - "lodash": "^4.17.21", - "resolve-pkg": "^2.0.0", - "tailwindcss": "^3.4.1" + "clsx": "^2.1.1" } }, "node_modules/@cypress-design/react-docmenu": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/@cypress-design/react-docmenu/-/react-docmenu-0.7.1.tgz", - "integrity": "sha512-Ln8C33JxEWI/xv9w9onmz9QZND80EGa/sIy2qxW/5GZjnou0Cfuz/TYIkp9a13Ct9DhPWl2RMaQSzGJ9n80gHQ==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@cypress-design/react-docmenu/-/react-docmenu-1.0.2.tgz", + "integrity": "sha512-8qJxkUeLb/JjvDFJVwOZS7Xt9AzzaPPIXQimOoFhfHuuFSzfWr9ojG9/oT3pAYC85IK7nte+OpReis7aYpg5gA==", "dependencies": { - "@cypress-design/constants-docmenu": "^0.2.0", - "@cypress-design/react-icon": "^0.31.0", - "clsx": "^2.1.0" + "@cypress-design/react-icon": "^1.2.0", + "clsx": "^2.1.1" } }, "node_modules/@cypress-design/react-icon": { - "version": "0.31.0", - "resolved": "https://registry.npmjs.org/@cypress-design/react-icon/-/react-icon-0.31.0.tgz", - "integrity": "sha512-hnGWOiTmVSPIoDC67y5pHwQ69Dx02mbY06yV0kKNykLNn/8dX1YbKgCcAlB24IBv45AKU9ULcqGxM5wRefa6iw==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@cypress-design/react-icon/-/react-icon-1.5.2.tgz", + "integrity": "sha512-kTT76JsE5DF+No2yHbLFpLFgrDSlnYVzJI8MlrCpfC7ClIi8EZzSOzPGhma6f6FD6JwYeDUROIhPl52cXtU6hg==", "dependencies": { - "@cypress-design/icon-registry": "^0.34.0", - "clsx": "^2.1.0" + "@cypress-design/icon-registry": "^1.5.2", + "clsx": "^2.1.1" } }, "node_modules/@cypress-design/react-tag": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@cypress-design/react-tag/-/react-tag-0.3.3.tgz", - "integrity": "sha512-twSukLxUu3QRRndqZ6cW6LMPWP+0TogwacXFSHFIkrqQAqhjaMPXOhCvm1gYEiCj+78xSH+9e0Ka5ED4s2cPHg==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@cypress-design/react-tag/-/react-tag-1.0.3.tgz", + "integrity": "sha512-8JN2NVOlUkHxA92t0wy4J++0eRoL1mP9/wkT37abgu3aeLAKb4UKNLbmiXqVo34zAHq4bOdAUKVIZFqEKqbfSg==", "dependencies": { - "@cypress-design/constants-tag": "*", - "clsx": "*" + "clsx": "^2.1.1" } }, "node_modules/@cypress/request": { @@ -5330,9 +5329,9 @@ } }, "node_modules/clsx": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", - "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", "engines": { "node": ">=6" } @@ -15536,9 +15535,9 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", - "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==", + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz", + "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==", "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -15548,7 +15547,7 @@ "fast-glob": "^3.3.0", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.19.1", + "jiti": "^1.21.0", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", @@ -15571,6 +15570,14 @@ "node": ">=14.0.0" } }, + "node_modules/tailwindcss-hocus": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/tailwindcss-hocus/-/tailwindcss-hocus-0.0.7.tgz", + "integrity": "sha512-KY3jLlppAoPkCLRhDqbe503c1Ryq//G1bLQqFCZz1pnB0JFzHa3VK0bXvjTa8n/dwCxgkhi5uJm1d6gp8OzPhw==", + "peerDependencies": { + "tailwindcss": "^3.0.0" + } + }, "node_modules/tailwindcss/node_modules/glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", diff --git a/package.json b/package.json index 62629bbed9..51fdde78fc 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,10 @@ "typecheck": "tsc" }, "dependencies": { - "@cypress-design/css": "^0.18.0", - "@cypress-design/react-docmenu": "^0.7.1", - "@cypress-design/react-tag": "^0.3.3", + "@cypress-design/css": "^1.0.0", + "@cypress-design/react-button": "^1.0.1", + "@cypress-design/react-docmenu": "^1.0.2", + "@cypress-design/react-tag": "^1.0.3", "@docusaurus/core": "^3.1.1", "@docusaurus/preset-classic": "^3.1.1", "@fortawesome/fontawesome-svg-core": "^6.5.1", diff --git a/src/components/badge/style.module.css b/src/components/badge/style.module.css index e2cfb7b5be..807f9118b4 100644 --- a/src/components/badge/style.module.css +++ b/src/components/badge/style.module.css @@ -13,22 +13,41 @@ p > .badge { display: inline; } +h1 > .badge { + vertical-align: middle; +} + .success { - background-color: #28a745; + background-color: var(--ifm-color-jade-100); + color: var(--ifm-color-jade-600); + + [data-theme='dark'] & { + background-color: var(--ifm-color-jade-1000); + } } .danger { - background-color: #dc3545; + background-color: var(--ifm-color-red-100); + color: var(--ifm-color-red-600); + + [data-theme='dark'] & { + background-color: var(--ifm-color-red-1000); + } } .info { - background-color: #007bff; + background-color: var(--ifm-color-teal-100); + color: var(--ifm-color-teal-600); + + [data-theme='dark'] & { + background-color: var(--ifm-color-teal-1000); + } } /* large light-green badge in page/content titles */ .hint { background-color: #cff1e6; - color: #127458; + color: var(--ifm-color-jade-600); padding: 0.125rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx new file mode 100644 index 0000000000..c9bf96ade5 --- /dev/null +++ b/src/components/button/index.tsx @@ -0,0 +1,52 @@ +import { + default as Button, + VariantClassesTable, +} from '@cypress-design/react-button' +import Icon from '@cypress-design/react-icon' + +import React from 'react'; + +// Define the types for the props +interface BtnProps { + size?: 20 | 24 | 32 | 40 | 48 + variant?: keyof typeof VariantClassesTable + block?: boolean; + disabled?: boolean; + target?: string; + className?: string; + href?: string; + label?: string; + icon?: string; +} + +// Build the Button component with the specified props +const Btn: React.FC = ({ + size = 32, // The size of the button + variant = 'outline-purple', // The variant of the button + disabled = false, // Whether the button should be disabled + target = '_self', // The target of the button link + className, // Custom classes for the button + href, // The URL the button should link to + label, // The text of the button + icon, // The icon in the button +}) => { + return ( + + ) +} + +export default Btn \ No newline at end of file diff --git a/src/components/docs-image/types.d.ts b/src/components/docs-image/types.d.ts index aeb9eed6c9..646262bb0e 100644 --- a/src/components/docs-image/types.d.ts +++ b/src/components/docs-image/types.d.ts @@ -5,4 +5,5 @@ export interface DocsImageProps { title: string width: number; noBorder: boolean + style: string } diff --git a/src/components/line-break/index.tsx b/src/components/line-break/index.tsx new file mode 100644 index 0000000000..f608b8b8d7 --- /dev/null +++ b/src/components/line-break/index.tsx @@ -0,0 +1,5 @@ + +export default function LineBreak() { + return ( +
+)} \ No newline at end of file diff --git a/src/components/logo/index.tsx b/src/components/logo/index.tsx index 3b81692f49..0533890f47 100644 --- a/src/components/logo/index.tsx +++ b/src/components/logo/index.tsx @@ -1,6 +1,32 @@ import React from "react"; +import { + IconTechnologyUiCoverage, + IconTechnologyAccessibility, +} from '@cypress-design/react-icon' + +export default function Logo({ alt, src, title, product: product }: { alt: string, src: string, title: string, product: string }) { + if (product === 'ui-coverage') { + return ( + + ) + } + + if (product === 'accessibility') { + return( + + ) + } -export default function Logo({ alt, src, title }) { return (