-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: refactor Getting Started landing page DOC-1067 DOC-1069 (#2345)
* docs: refactor Getting Started landing page DOC-1067 * docs: add navigation card components * chore: Add a few more grid styles * docs: add Jest test and adjust Getting Started landing page * docs: fix formatting * docs: fix lint errors in SimpleCard * docs: refactor grid test DOC-1067 * docs: reduce duplication in SimpleCard test * docs: reduce duplication in SimpleCard test * docs: fix formatting DOC-1067 * docs: update SimpleCardGrid naming DOC-1067 * docs: reduce duplication in SimpleCard test * docs: reduce duplication in SimpleCard test * docs: add overview journey image * Optimised images with calibre/image-actions * docs: adjust landing page text * docs: update overview image * Optimised images with calibre/image-actions * docs: update overview image * docs: adjust width and hide toc * docs: hide image on mobile * docs: redo button * chore: Changes to cards * docs: remove row from simplecard * chore: Update the CSS on cards * chore: Make the cards hover * docs: extra fixes on simple cards * docs: loop elems once and remove button outline * docs: rephrase introduction * docs: fix the width & height of button * docs: change icon sizing to literal * docs: convert arrow to static asset to prevent jank * docs: fix up grid test * docs: remove unused param in grid test * docs: fix cursor on footer button * Apply suggestions from code review Co-authored-by: Karl Cardenas <[email protected]> * docs: fix formatting --------- Co-authored-by: yuliiiah <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Karl Cardenas <[email protected]>
- Loading branch information
4 people
committed
Mar 18, 2024
1 parent
49886b6
commit aacef07
Showing
16 changed files
with
399 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import RightArrow from "/static/assets/icons/arrow-right-long.svg"; | ||
| import styles from "./SimpleCardGrid.module.scss"; | ||
| import React from "react"; | ||
|
|
||
| interface FooterArrowProps { | ||
| index?: number; | ||
| } | ||
| export default function SimpleCardFooterArrow({ index }: FooterArrowProps) { | ||
| return <RightArrow className={styles.simpleCardFooterArrow} key={`simpleCardFooterArrow-${index}`} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| .simpleCardGrid { | ||
| display: grid; | ||
| grid-gap: 32px; | ||
| grid-template-columns: 1fr 1fr; | ||
| grid-template-rows: 2fr; | ||
| } | ||
|
|
||
| .simpleCard { | ||
| min-width: 360px; | ||
| padding: 12px 16px; | ||
| height: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| gap: 10px; | ||
| border: 1px solid var(--simpleCardBorder); | ||
| border-radius: 12px; | ||
| color: var(--ifm-font-color-base); | ||
| box-shadow: -10px 10px var(--simpleCardSecondary); | ||
| word-wrap: break-word; | ||
| } | ||
|
|
||
| .simpleCardDescription { | ||
| font-size: 14px; | ||
| font-weight: 400; | ||
| line-height: 20px; | ||
| color: var(--simpleCardSubtle); | ||
| } | ||
|
|
||
| .simpleCardHeader { | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| gap: 12px; | ||
| font-size: 20px; | ||
| font-weight: 500; | ||
| line-height: 24px; | ||
| } | ||
|
|
||
| .simpleCardFooter { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .simpleCardFooterBtn { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 10px; | ||
| background-color: var(--simpleCardSecondary); | ||
| border-radius: 4px; | ||
| color: var(--ifm-font-color-base); | ||
| font-size: 14px; | ||
| font-weight: var(--ifm-button-font-weight); | ||
| padding: 10px 16px; | ||
| border: none; | ||
| outline: none; | ||
| height: 32px; | ||
| width: 136px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .simpleCardFooterArrow { | ||
| height: 1em; | ||
| fill: var(--ifm-font-color-base); | ||
| } | ||
|
|
||
| .simpleCardIndex { | ||
| width: 32px; | ||
| height: 32px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| background-color: var(--simpleCardPrimary); | ||
| color: var(--ifm-background-color); | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| .simpleCard:hover { | ||
| box-shadow: -10px 10px var(--simpleCardSecondaryHover); | ||
| } | ||
|
|
||
| .simpleCard:hover .simpleCardFooter button { | ||
| background-color: var(--simpleCardSecondaryHover); | ||
| } | ||
|
|
||
| .simpleCard:hover .simpleCardIndex { | ||
| background-color: var(--simpleCardPrimaryHover); | ||
| } | ||
|
|
||
| @media (max-width: 1120px) { | ||
| .simpleCardGrid { | ||
| grid-template-columns: 1fr; | ||
| } | ||
|
|
||
| .simpleCard { | ||
| min-width: 280px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import React from "react"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import SimpleCardGrid from "./SimpleCardGrid"; | ||
|
|
||
| jest.mock("./SimpleCardFooterArrow", () => { | ||
| return jest.fn(() => { | ||
| return <div data-testid="mock-arrow"></div>; | ||
| }); | ||
| }); | ||
|
|
||
| describe("Display SimpleCardGrid", () => { | ||
| interface testCard { | ||
| title: string; | ||
| description: string; | ||
| buttonText: string; | ||
| relativeURL: string; | ||
| } | ||
|
|
||
| interface testCase { | ||
| name: string; | ||
| cards: testCard[]; | ||
| } | ||
|
|
||
| const testCards: testCard[] = [ | ||
| { | ||
| title: "First Card", | ||
| description: "Card 1", | ||
| buttonText: "Learn more 1", | ||
| relativeURL: "./getting-started-1", | ||
| }, | ||
| { | ||
| title: "Second Card", | ||
| description: "Card 2", | ||
| buttonText: "Learn more 2", | ||
| relativeURL: "./getting-started-2", | ||
| }, | ||
| { | ||
| title: "Third Card", | ||
| description: "Card 3", | ||
| buttonText: "Learn more 3", | ||
| relativeURL: "./getting-started-3", | ||
| }, | ||
| ]; | ||
|
|
||
| const testCases: testCase[] = [ | ||
| { | ||
| name: "multiple row cards", | ||
| cards: testCards.slice(), | ||
| }, | ||
| { | ||
| name: "single row cards", | ||
| cards: testCards.slice(2), | ||
| }, | ||
| { | ||
| name: "less cards than a single row", | ||
| cards: testCards.slice(1), | ||
| }, | ||
| { | ||
| name: "empty cards", | ||
| cards: [], | ||
| }, | ||
| ]; | ||
|
|
||
| function assert(testCards: testCard[]) { | ||
| render(<SimpleCardGrid cards={testCards} />); | ||
| if (testCards.length == 0) { | ||
| expect(screen.queryAllByRole("button")).toHaveLength(0); | ||
| return; | ||
| } | ||
|
|
||
| testCards.forEach((tc, index) => { | ||
| expect(screen.getByText(tc.title)).toBeInTheDocument(); | ||
| expect(screen.getByText(tc.description)).toBeInTheDocument(); | ||
| expect(screen.getByText(tc.buttonText, { selector: "button" })).toBeInTheDocument(); | ||
| expect( | ||
| screen.getAllByRole("link").filter((value) => { | ||
| return value.getAttribute("href") == tc.relativeURL; | ||
| }) | ||
| ).not.toBeNull(); | ||
| }); | ||
|
|
||
| expect(screen.getAllByTestId("mock-arrow")).toHaveLength(testCards.length); | ||
| expect(screen.getAllByRole("button")).toHaveLength(testCards.length); | ||
| } | ||
|
|
||
| testCases.forEach((tc) => { | ||
| it(tc.name, () => { | ||
| assert(tc.cards); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.