From 0aa187cbca3d4e0afa8bf24d5de7225db0e87e2a Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Wed, 21 Feb 2024 13:37:29 -0500 Subject: [PATCH] Fleet UI: Set up flow breadcrumbs refactor (#16905) --- .../RegistrationForm/RegistrationForm.jsx | 2 +- .../RegistrationForm.tests.jsx | 2 +- .../forms/RegistrationForm/_styles.scss | 2 +- .../Breadcrumbs/Breadcrumbs.jsx | 84 ------------------- .../Breadcrumbs/Breadcrumbs.tests.jsx | 60 ------------- .../Breadcrumbs/Breadcrumbs.tests.tsx | 37 ++++++++ .../Breadcrumbs/Breadcrumbs.tsx | 64 ++++++++++++++ .../RegistrationPage/Breadcrumbs/_styles.scss | 3 +- .../Breadcrumbs/{index.js => index.ts} | 0 .../RegistrationPage/RegistrationPage.tsx | 4 +- 10 files changed, 107 insertions(+), 151 deletions(-) delete mode 100644 frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx delete mode 100644 frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx create mode 100644 frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.tsx create mode 100644 frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tsx rename frontend/pages/RegistrationPage/Breadcrumbs/{index.js => index.ts} (100%) diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx index ec84799197..14fba06792 100644 --- a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx +++ b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx @@ -120,7 +120,7 @@ class RegistrationForm extends Component {
-

Setup user

+

Set up user

{ expect( container.querySelectorAll(".user-registration__container--admin").length ).toEqual(1); - expect(screen.getByText("Setup user")).toBeInTheDocument(); + expect(screen.getByText("Set up user")).toBeInTheDocument(); }); it("renders OrgDetails on the second page", () => { diff --git a/frontend/components/forms/RegistrationForm/_styles.scss b/frontend/components/forms/RegistrationForm/_styles.scss index cbe28f73ca..e4dfb02a99 100644 --- a/frontend/components/forms/RegistrationForm/_styles.scss +++ b/frontend/components/forms/RegistrationForm/_styles.scss @@ -181,7 +181,7 @@ .button { width: 160px; - margin-top: $pad-xxlarge; + margin-top: $pad-medium; // 40px total (24px gap + 16px more) } } } diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx deleted file mode 100644 index 549c00d6d2..0000000000 --- a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx +++ /dev/null @@ -1,84 +0,0 @@ -import React, { Component } from "react"; -import PropTypes from "prop-types"; -import classnames from "classnames"; - -class Breadcrumbs extends Component { - static propTypes = { - onClick: PropTypes.func, - pageProgress: PropTypes.number, - }; - - static defaultProps = { - pageProgress: 1, - }; - - onClick = (page) => { - return (evt) => { - evt.preventDefault(); - - const { onClick: handleClick } = this.props; - - return handleClick(page); - }; - }; - - render() { - const { onClick } = this; - const { pageProgress } = this.props; - const baseClass = "registration-breadcrumbs"; - const pageBaseClass = `${baseClass}__page`; - const page1ClassName = classnames( - pageBaseClass, - `${pageBaseClass}--1`, - "button--unstyled", - { - [`${pageBaseClass}--active`]: pageProgress === 1, - [`${pageBaseClass}--complete`]: pageProgress > 1, - } - ); - const page2TabIndex = pageProgress >= 2 ? 0 : -1; - const page2ClassName = classnames( - pageBaseClass, - `${pageBaseClass}--2`, - "button--unstyled", - { - [`${pageBaseClass}--active`]: pageProgress === 2, - [`${pageBaseClass}--complete`]: pageProgress > 2, - } - ); - const page3TabIndex = pageProgress >= 3 ? 0 : -1; - const page3ClassName = classnames( - pageBaseClass, - `${pageBaseClass}--3`, - "button--unstyled", - { - [`${pageBaseClass}--active`]: pageProgress === 3, - [`${pageBaseClass}--complete`]: pageProgress > 3, - } - ); - - return ( -
- - - -
- ); - } -} - -export default Breadcrumbs; diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx deleted file mode 100644 index c94ea32525..0000000000 --- a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from "react"; -import { fireEvent, render, screen } from "@testing-library/react"; - -import Breadcrumbs from "pages/RegistrationPage/Breadcrumbs"; - -describe("Breadcrumbs - component", () => { - it("renders 3 Button components", () => { - render(); - expect(screen.getAllByRole("button").length).toEqual(3); - }); - - it("renders page 1 Button as active when the page prop is 1", () => { - const { container } = render(); - const page1Btn = container.querySelector( - "button.registration-breadcrumbs__page--1" - ); - const page2Btn = container.querySelector( - "button.registration-breadcrumbs__page--2" - ); - const page3Btn = container.querySelector( - "button.registration-breadcrumbs__page--3" - ); - - expect(page1Btn.className).toContain( - "registration-breadcrumbs__page--active" - ); - expect(page2Btn.className).not.toContain( - "registration-breadcrumbs__page--active" - ); - expect(page3Btn.className).not.toContain( - "registration-breadcrumbs__page--active" - ); - }); - - it("calls the onClick prop with the page number when clicked", () => { - const onClickSpy = jest.fn(); - const { container } = render(); - const page1Btn = container.querySelector( - "button.registration-breadcrumbs__page--1" - ); - const page2Btn = container.querySelector( - "button.registration-breadcrumbs__page--2" - ); - const page3Btn = container.querySelector( - "button.registration-breadcrumbs__page--3" - ); - - fireEvent.click(page1Btn); - - expect(onClickSpy).toHaveBeenCalledWith(1); - - fireEvent.click(page2Btn); - - expect(onClickSpy).toHaveBeenCalledWith(2); - - fireEvent.click(page3Btn); - - expect(onClickSpy).toHaveBeenCalledWith(3); - }); -}); diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.tsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.tsx new file mode 100644 index 0000000000..74714ba4c2 --- /dev/null +++ b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import { fireEvent, render, screen } from "@testing-library/react"; +import { noop } from "lodash"; + +import Breadcrumbs from "pages/RegistrationPage/Breadcrumbs"; + +describe("Breadcrumbs - component", () => { + it("renders 3 Button components", () => { + render(); + expect(screen.getAllByRole("button").length).toEqual(3); + }); + + it("renders page 1 Button as active when the current page prop is 1", () => { + const { container } = render( + + ); + const page1Btn = container.querySelector( + "button.registration-breadcrumbs__page--1" + ); + const page2Btn = container.querySelector( + "button.registration-breadcrumbs__page--2" + ); + const page3Btn = container.querySelector( + "button.registration-breadcrumbs__page--3" + ); + + expect(page1Btn?.className).toContain( + "registration-breadcrumbs__page--active" + ); + expect(page2Btn?.className).not.toContain( + "registration-breadcrumbs__page--active" + ); + expect(page3Btn?.className).not.toContain( + "registration-breadcrumbs__page--active" + ); + }); +}); diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tsx new file mode 100644 index 0000000000..edeeef39ba --- /dev/null +++ b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tsx @@ -0,0 +1,64 @@ +import React, { MouseEventHandler } from "react"; +import classnames from "classnames"; + +import Button from "components/buttons/Button"; + +interface IBreadcrumbs { + onSetPage: (page: number) => void; + currentPage: number; + pageProgress: number; +} +const baseClass = "registration-breadcrumbs"; + +const Breadcrumbs = ({ + onSetPage, + currentPage = 1, + pageProgress = 1, +}: IBreadcrumbs): JSX.Element => { + const pageBaseClass = `${baseClass}__page`; + const page1ClassName = classnames(pageBaseClass, `${pageBaseClass}--1`, { + [`${pageBaseClass}--active`]: currentPage === 1, + [`${pageBaseClass}--complete`]: pageProgress > 1, + }); + + const page2TabIndex = pageProgress >= 2 ? 0 : -1; + const page2ClassName = classnames(pageBaseClass, `${pageBaseClass}--2`, { + [`${pageBaseClass}--active`]: currentPage === 2, + [`${pageBaseClass}--complete`]: pageProgress > 2, + }); + const page3TabIndex = pageProgress >= 3 ? 0 : -1; + const page3ClassName = classnames(pageBaseClass, `${pageBaseClass}--3`, { + [`${pageBaseClass}--active`]: currentPage === 3, + [`${pageBaseClass}--complete`]: pageProgress > 3, + }); + + return ( +
+ + + +
+ ); +}; + +export default Breadcrumbs; diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss index 97b54005d6..d8fe1f1695 100644 --- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss +++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss @@ -71,7 +71,6 @@ &--active { font-weight: $bold; - color: $core-white; } &--1 { @@ -97,7 +96,7 @@ &.registration-breadcrumbs__page--complete { &::before { - background-color: $core-white; + background: $core-white; background-size: auto; z-index: 2; } diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/index.js b/frontend/pages/RegistrationPage/Breadcrumbs/index.ts similarity index 100% rename from frontend/pages/RegistrationPage/Breadcrumbs/index.js rename to frontend/pages/RegistrationPage/Breadcrumbs/index.ts diff --git a/frontend/pages/RegistrationPage/RegistrationPage.tsx b/frontend/pages/RegistrationPage/RegistrationPage.tsx index 5d0fbd6445..84323d68e9 100644 --- a/frontend/pages/RegistrationPage/RegistrationPage.tsx +++ b/frontend/pages/RegistrationPage/RegistrationPage.tsx @@ -86,8 +86,8 @@ const RegistrationPage = ({ router }: IRegistrationPageProps) => { className={`${baseClass}__logo`} />