Skip to content

Commit ce05e8f

Browse files
Barthélémy Ledouxjaffrepaul
Barthélémy Ledoux
and
jaffrepaul
authored
Update documentation design with cypress design system (#5572)
* add tailwindcss * install cypress design css * remove unwanted changes * eject sidebar to start swindling * use the docmenu * make menu work fine * simplify css and finish menu * navbar v1 * swizzle the navbar * menu better * NavBar & titles * almost done * some changes updates * setup dark mode switch * make dark mode switch work * consolidate announcement bar * fix svg warning * remove unused import * repair build * update react-docmenu * Add contents on top of side menu * some updates to dark mode * finish the job about announcement bar * remove negative margin in toc * fix gray background in dark mode * fix: navbar * css fixes * two css fixes * update react docmenu once more * two fixes on the layout of lists and edit button (CSS) * fix search bar * remove scrollbar gutter * adjustments in design * better ssr? * adjustments on toc * fix ssr bug (turns out immutability is a pain) * update menu and navbar dark border * fix plugins page * remove alert shadow * fix: index plugins list * fix plugins page * some simplification * adjust FAQ a little * fix border or search box * add white background to search button * remove off-white background * fix borders * base font as 16px * fix search mode * fix: update prettier * fix: link color has to be blue * bring more space to paragraphs * fix: add margin around code * fix: margin-bottom of code * fix some spacing * add "new" label to menu * smaller margin bottom on h2 * fix backdrop when navbar is in mobile mode * implement mobile docmenu * update dependencies * lots of fixes and some string typing * remove shadow in mobile menu * last set a fixes * use js because types are unnecessary * fix broken links * remove hover background * add chevron to primary menu * admonition scss heading fixes * fix bold section headers * add space between img & caption * fix render issues * fix branch review * fix spacing of tags * fix content placement in large screens * fix spacing of admonition * restore first level list marker * fix: some css --------- Co-authored-by: Paul Jaffre <[email protected]>
1 parent 997fec6 commit ce05e8f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+11373
-473
lines changed

‎docs/api/actions/scrollintoview.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -131,4 +131,4 @@ console outputs the following:
131131

132132
## See also
133133

134-
- [`cy.scrollTo()`](/api/commands/scrollto)
134+
- [`cy.scrollTo()`](/api/commands/scrollTo)

‎docs/api/actions/scrollto.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -224,4 +224,4 @@ following:
224224

225225
## See also
226226

227-
- [`.scrollIntoView()`](/api/commands/scrollintoview)
227+
- [`.scrollIntoView()`](/api/commands/scrollIntoView)

‎docs/api/commands/intercept.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ argument
5656

5757
### Usage
5858

59-
<Icon name="check-circle" color="green" /> ****Correct Usage**
59+
<Icon name="check-circle" color="green" /> **Correct Usage**
6060

6161
```js
6262
// spying

‎docs/api/cypress-api/custom-commands.mdx

+7-7
Original file line numberDiff line numberDiff line change
@@ -405,7 +405,7 @@ with an existing subject or without one.
405405
Examples of dual commands:
406406

407407
- [`cy.screenshot()`](/api/commands/screenshot)
408-
- [`cy.scrollTo()`](/api/commands/scrollto)
408+
- [`cy.scrollTo()`](/api/commands/scrollTo)
409409
- [`cy.wait()`](/api/commands/wait)
410410

411411
#### Custom Dual Command
@@ -616,13 +616,13 @@ Cypress.Commands.add(
616616
)
617617
```
618618

619-
<Icon name="check-circle" color="green" /> Valid Usage**
619+
<Icon name="check-circle" color="green" /> **Valid Usage**
620620

621621
```javascript
622622
cy.get('button').click() // has subject, and is `element`
623623
```
624624

625-
<Icon name="exclamation-triangle" color="red" /> Invalid Usage**
625+
<Icon name="exclamation-triangle" color="red" /> **Invalid Usage**
626626

627627
```javascript
628628
cy.click() // no subject, will error
@@ -649,15 +649,15 @@ Cypress.Commands.add(
649649
)
650650
```
651651

652-
<Icon name="check-circle" color="green" /> Valid Usage**
652+
<Icon name="check-circle" color="green" /> **Valid Usage**
653653

654654
```javascript
655655
cy.get('button').trigger() // has subject, and is `element`
656656
cy.document().trigger() // has subject, and is `document`
657657
cy.window().trigger() // has subject, and is `window`
658658
```
659659

660-
<Icon name="exclamation-triangle" color="red" /> Invalid Usage**
660+
<Icon name="exclamation-triangle" color="red" /> **Invalid Usage**
661661

662662
```javascript
663663
cy.trigger() // no subject, will error
@@ -693,15 +693,15 @@ Cypress.Commands.add(
693693
)
694694
```
695695

696-
<Icon name="check-circle" color="green" /> Valid Usage**
696+
<Icon name="check-circle" color="green" /> **Valid Usage**
697697

698698
```javascript
699699
cy.scrollTo() // no subject, but valid because it's optional
700700
cy.get('#main').scrollTo() // has subject, and is `element`
701701
cy.visit().scrollTo() // has subject, and since visit yields `window` it's ok
702702
```
703703

704-
<Icon name="exclamation-triangle" color="red" /> Invalid Usage**
704+
<Icon name="exclamation-triangle" color="red" /> **Invalid Usage**
705705

706706
```javascript
707707
cy.document().scrollTo() // has subject, but it's a `document`, will error

‎docs/api/table-of-contents.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ Learn more about action commands in our
9393
| [`.click()`](/api/commands/click) | Click a DOM element. |
9494
| [`.dblclick()`](/api/commands/dblclick) | Double-click a DOM element. |
9595
| [`.rightclick()`](/api/commands/rightclick) | Right click a DOM element. |
96-
| [`.scrollIntoView()`](/api/commands/scrollintoview) | Scroll an element into view. |
97-
| [`.scrollTo()`](/api/commands/scrollto) | Scroll to a specific position. |
96+
| [`.scrollIntoView()`](/api/commands/scrollIntoView) | Scroll an element into view. |
97+
| [`.scrollTo()`](/api/commands/scrollTo) | Scroll to a specific position. |
9898
| [`.select()`](/api/commands/select) | Select an `<option>` within a `<select>`. |
9999
| [`.selectFile()`](/api/commands/selectfile) | Selects a file in an HTML5 input element, or simulates dragging a file into the browser. |
100100
| [`.trigger()`](/api/commands/trigger) | Trigger an event on a DOM element. |

‎docs/guides/cloud/branch-review.mdx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Branch Review
33
sidebar_position: 50
4-
sidebar_class_name: new_label
4+
sidebar_custom_props: { 'new_label': true }
55
---
66

77
:::info
@@ -129,15 +129,15 @@ Recording exactly one run for every commit as the best/only way to ensure comple
129129
2. Get a glance of changes in your branch across key statuses
130130
3. See what has changed in a specific status, for example:
131131
- <img
132-
className="br-ui"
132+
className="br-ui inline-block"
133133
src="/img/guides/cloud/branch-review/test-status-up.png"
134134
/> total number introduced in your branch
135135
- <img
136-
className="br-ui"
136+
className="br-ui inline-block"
137137
src="/img/guides/cloud/branch-review/test-status-down.png"
138138
/> total number decreased or resolved in your branch
139139
- <img
140-
className="br-ui"
140+
className="br-ui inline-block"
141141
src="/img/guides/cloud/branch-review/test-status-total.png"
142142
/> total count, for example, _3 new and 1 existing_
143143
4. The test state (failed, flaky, pending) is also indicated at the spec level

‎docs/guides/cloud/test-replay.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Test Replay
33
sidebar_position: 40
4-
sidebar_class_name: new_label
4+
sidebar_custom_props: { 'new_label': true }
55
---
66

77
:::info

‎docs/guides/component-testing/getting-started.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ To begin we need to install Cypress in your project if you have not already done
2121
npm install cypress -D
2222
```
2323

24-
### Open Cypress:
24+
### Open Cypress
2525

2626
Once Cypress has been installed you can launch Cypress using the following command:
2727

‎docs/guides/core-concepts/introduction-to-cypress.mdx

+6-6
Original file line numberDiff line numberDiff line change
@@ -570,7 +570,7 @@ Remembering that Cypress commands run asynchronously is important if you are
570570
attempting to mix Cypress commands with synchronous code. Synchronous code will
571571
execute immediately - not waiting for the Cypress commands above it to execute.
572572

573-
<Icon name="exclamation-triangle" color="red" /> Incorrect usage**
573+
<Icon name="exclamation-triangle" color="red" /> **Incorrect usage**
574574

575575
In the example below, the `el` evaluates immediately, before the `cy.visit()`
576576
has executed, so will always evaluate to an empty array.
@@ -604,7 +604,7 @@ it('does not work as we expect', () => {
604604
// Cypress will begin running them in order!
605605
```
606606

607-
<Icon name="check-circle" color="green" /> Correct usage**
607+
<Icon name="check-circle" color="green" /> **Correct usage**
608608

609609
Below is one way the code above could be rewritten in order to ensure the
610610
commands run as expected.
@@ -633,7 +633,7 @@ it('does not work as we expect', () => {
633633
// Cypress will begin running them in order!
634634
```
635635

636-
<Icon name="exclamation-triangle" color="red" /> Incorrect usage**
636+
<Icon name="exclamation-triangle" color="red" /> **Incorrect usage**
637637

638638
In the example below, the check on the `username` value gets evaluated
639639
immediately, before the `cy.visit()` has executed, so will always evaluate to
@@ -669,7 +669,7 @@ it('test', () => {
669669
// Cypress will begin running them in order!
670670
```
671671

672-
<Icon name="check-circle" color="green" /> Correct usage**
672+
<Icon name="check-circle" color="green" /> **Correct usage**
673673

674674
Below is one way the code above could be rewritten in order to ensure the
675675
commands run as expected.
@@ -745,7 +745,7 @@ displayed the test reloads the page and checks again.
745745
**Note:** you can find this application and the correct test in our
746746
[Recipes](https://github.com/cypress-io/cypress-example-recipes#testing-the-dom).
747747

748-
<Icon name="exclamation-triangle" color="red" /> Incorrect test**
748+
<Icon name="exclamation-triangle" color="red" /> **Incorrect test**
749749

750750
The test written below WILL NOT work and most likely will crash your browser.
751751

@@ -777,7 +777,7 @@ without executing any! The chain of commands keeps growing, but never executes -
777777
since the test function never finishes running. The `while` loop never allows
778778
Cypress to start executing even the very first `cy.get(...)` command.
779779

780-
<Icon name="check-circle" color="green" /> Correct test**
780+
<Icon name="check-circle" color="green" /> **Correct test**
781781

782782
We need to give the test a chance to run a few commands before deciding if it
783783
needs to continue. Thus the correct test would use recursion.

‎docs/guides/overview/why-cypress.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ sidebar_position: 10
1616

1717
## In a nutshell
1818

19-
Cypress is a next generation front end testing tool built for the modern web. We
20-
address the key pain points developers and QA engineers face when testing modern
21-
applications.
19+
Cypress is a next generation front end testing tool built for the modern web.
20+
We address the key pain points developers and QA engineers
21+
face when testing modern applications.
2222

2323
We make it possible to:
2424

‎docs/guides/references/changelog.mdx

+6-6
Original file line numberDiff line numberDiff line change
@@ -6000,7 +6000,7 @@ _Released 7/21/2020_
60006000
**Features:**
60016001

60026002
- You can now pass an `ensureScrollability: false` option to
6003-
[.scrollTo()](/api/commands/scrollto) to skip checking whether the element is
6003+
[.scrollTo()](/api/commands/scrollTo) to skip checking whether the element is
60046004
scrollable. Addresses
60056005
[#1924](https://github.com/cypress-io/cypress/issues/1924).
60066006
- [cy.clock()](/api/commands/clock) now accepts Dates as well as a Number for
@@ -9979,7 +9979,7 @@ _Released 5/29/2018_
99799979
[#1753](https://github.com/cypress-io/cypress/issues/1753).
99809980
- The type definition for [`.filter()`](/api/commands/filter) now correctly
99819981
supports a function argument.
9982-
- The type definition for [`.scrollIntoView()`](/api/commands/scrollintoview) no
9982+
- The type definition for [`.scrollIntoView()`](/api/commands/scrollIntoView) no
99839983
longer errors when passed a `duration` option. Fixes
99849984
[#1606](https://github.com/cypress-io/cypress/issues/1606).
99859985
- `NODE_OPTIONS` environment variables now print within the `cypress:cli` logs
@@ -10983,11 +10983,11 @@ _Released 09/10/2017_
1098310983
- New [.trigger()](/api/commands/trigger) command. Useful for triggering
1098410984
arbitrary events. Fixes
1098510985
[#406](https://github.com/cypress-io/cypress/issues/406).
10986-
- New [cy.scrollTo()](/api/commands/scrollto) command. Useful for having a
10986+
- New [cy.scrollTo()](/api/commands/scrollTo) command. Useful for having a
1098710987
container scroll to a specific position. Fixes
1098810988
[#497](https://github.com/cypress-io/cypress/issues/497) &
1098910989
[#313](https://github.com/cypress-io/cypress/issues/313).
10990-
- New [.scrollIntoView()](/api/commands/scrollintoview) command. Useful for
10990+
- New [.scrollIntoView()](/api/commands/scrollIntoView) command. Useful for
1099110991
scrolling an element into view. Fixes
1099210992
[#498](https://github.com/cypress-io/cypress/issues/498) &
1099310993
[#313](https://github.com/cypress-io/cypress/issues/313) &
@@ -11266,8 +11266,8 @@ Note: we are still updating all of the docs to reflect all the 0.20.0 changes.
1126611266
- [New "Cypress.Commands"](/api/cypress-api/custom-commands)
1126711267
- [New "Cypress.log"](/api/cypress-api/cypress-log)
1126811268
- [New ".trigger()"](/api/commands/trigger)
11269-
- [New "cy.scrollTo()"](/api/commands/scrollto)
11270-
- [New ".scrollIntoView()"](/api/commands/scrollintoview)
11269+
- [New "cy.scrollTo()"](/api/commands/scrollTo)
11270+
- [New ".scrollIntoView()"](/api/commands/scrollIntoView)
1127111271
- [Updated "Installing Cypress"](/guides/getting-started/installing-cypress)
1127211272
- [Updated "Writing Your First Test"](/guides/end-to-end-testing/writing-your-first-end-to-end-test)
1127311273
- [Updated "Testing Your App"](/guides/end-to-end-testing/testing-your-app)

‎docs/guides/references/configuration.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@ We provide two options to override the configuration while your test are
316316
running, `Cypress.config()` and suite-specific or test-specific configuration
317317
overrides.
318318

319-
‼️ **Note:** The configuration values below are all writeable and **can be
319+
⚠️ **Note:** The configuration values below are all writeable and **can be
320320
changed** via per test configuration. Any other configuration values are
321321
readonly and cannot be changed at run time.
322322

@@ -459,7 +459,7 @@ To block a host:
459459
- ✅ Pass only the host
460460
- ✅ Use wildcard `*` patterns
461461
- ✅ Include the port other than `80` and `443`
462-
- ‼️ Do **NOT** include protocol: `http://` or `https://`
462+
- ❌ Do **NOT** include protocol: `http://` or `https://`
463463

464464
:::info
465465

@@ -502,7 +502,7 @@ For instance given a URL: `https://google.com/search?q=cypress`
502502

503503
- ✅ Matches `google.com`
504504
- ✅ Matches `*google.com`
505-
- ‼️ Does NOT match `*.google.com`
505+
- ❌ Does NOT match `*.google.com`
506506

507507
:::
508508

‎docs/guides/references/migration-guide.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ You can enable this with the `videoCompression` [configuration](/guides/referenc
5959

6060
### `cy.readFile()` is now a query command
6161

62-
In Cypress `v13`, the [`.readFile()`](/api/commands/readFile) command is now a query.
62+
In Cypress `v13`, the [`.readFile()`](/api/commands/readfile) command is now a query.
6363
Tests written using it should continue to operate exactly as before; no changes
6464
are necessary.
6565

‎docusaurus.config.js

+14-19
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,18 @@ const config = {
9595
],
9696
'docusaurus-plugin-sass',
9797
require.resolve('docusaurus-plugin-image-zoom'),
98+
// ....
99+
async function myPlugin(context, options) {
100+
return {
101+
name: 'docusaurus-tailwindcss',
102+
configurePostCss(postcssOptions) {
103+
// Appends TailwindCSS and AutoPrefixer.
104+
postcssOptions.plugins.push(require('tailwindcss'))
105+
postcssOptions.plugins.push(require('autoprefixer'))
106+
return postcssOptions
107+
},
108+
}
109+
},
98110
],
99111
themeConfig:
100112
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
@@ -105,55 +117,38 @@ const config = {
105117
logo: {
106118
href: '/guides/overview/why-cypress',
107119
alt: 'Cypress Logo',
108-
src: '/img/logo/cypress-logo-dark.png',
120+
src: '/img/logo/cypress-logo-light.svg',
121+
srcDark: '/img/logo/cypress-logo-dark.svg',
109122
},
110123
items: [
111124
{
112125
to: '/guides/overview/why-cypress',
113126
label: 'Guides',
114-
position: 'left',
115127
activeBasePath: 'guides',
116128
},
117129
{
118130
to: '/api/table-of-contents',
119131
label: 'API',
120-
position: 'left',
121132
activeBasePath: 'api',
122133
},
123134
{
124135
to: '/plugins',
125136
label: 'Plugins',
126-
position: 'left',
127137
activeBasePath: 'plugins',
128138
},
129139
{
130140
to: '/examples/recipes',
131141
label: 'Examples',
132-
position: 'left',
133142
activeBasePath: 'examples',
134143
},
135144
{
136145
to: '/faq/questions/using-cypress-faq',
137146
label: 'FAQ',
138-
position: 'left',
139147
activeBasePath: 'faq',
140148
},
141149
{
142150
to: 'https://learn.cypress.io',
143151
label: 'Learn',
144-
position: 'left',
145-
},
146-
{
147-
href: 'https://github.com/cypress-io/cypress-documentation',
148-
position: 'right',
149-
className: 'github-logo',
150-
'aria-label': 'Cypress GitHub repository',
151-
},
152-
{
153-
href: 'https://on.cypress.io/discord',
154-
position: 'right',
155-
className: 'discord-logo',
156-
'aria-label': 'Cypress Discord',
157152
},
158153
],
159154
},

0 commit comments

Comments
 (0)