From 108ddd048f1607c34cd0943e072d7ac936ffe2c2 Mon Sep 17 00:00:00 2001 From: Brendan Tierney Date: Mon, 26 Jul 2021 21:49:04 -0600 Subject: [PATCH] feat: Implement Page Spinner (#159) * default color is black for spinner now * initial page spinner * black color * page spinner setup * scss preset * way more accurate story * clean up tests --- .storybook/main.js | 17 ++++------ src/components/index.ts | 1 + .../page-spinner/PageSpinner.module.scss | 7 ++++ .../page-spinner/PageSpinner.stories.tsx | 32 +++++++++++++++++++ src/components/page-spinner/PageSpinner.tsx | 12 +++++++ src/components/page-spinner/index.ts | 1 + src/components/spinner/Spinner.test.tsx | 2 +- src/components/spinner/Spinner.tsx | 4 +-- src/stories/PageSpinner.stories.scss | 3 ++ src/stories/PageSpinner.stories.tsx | 32 +++++++++++++++++++ src/stories/Spinner.stories.tsx | 25 ++++++++++++--- 11 files changed, 117 insertions(+), 19 deletions(-) create mode 100644 src/components/page-spinner/PageSpinner.module.scss create mode 100644 src/components/page-spinner/PageSpinner.stories.tsx create mode 100644 src/components/page-spinner/PageSpinner.tsx create mode 100644 src/components/page-spinner/index.ts create mode 100644 src/stories/PageSpinner.stories.scss create mode 100644 src/stories/PageSpinner.stories.tsx diff --git a/.storybook/main.js b/.storybook/main.js index ce6ba816..4b1a9db9 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -2,18 +2,13 @@ const path = require("path"); module.exports = { stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], - addons: ["@storybook/addon-links", "@storybook/addon-essentials"], + addons: [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-controls", + "@storybook/preset-scss", + ], typescript: { reactDocgen: "react-docgen", }, - webpackFinal: async (config) => { - // add SCSS support for CSS Modules - config.module.rules.push({ - test: /\.scss$/, - use: ["style-loader", "css-loader?modules&importLoaders", "sass-loader"], - include: path.resolve(__dirname, "../"), - }); - - return config; - }, }; diff --git a/src/components/index.ts b/src/components/index.ts index f8e680e9..68237653 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -20,6 +20,7 @@ export * from "./image"; export * from "./level"; export * from "./navigation"; export * from "./notification"; +export * from "./page-spinner"; export * from "./smart-alerts"; export * from "./spinner"; export * from "./table"; diff --git a/src/components/page-spinner/PageSpinner.module.scss b/src/components/page-spinner/PageSpinner.module.scss new file mode 100644 index 00000000..51e47b2b --- /dev/null +++ b/src/components/page-spinner/PageSpinner.module.scss @@ -0,0 +1,7 @@ +.container { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/components/page-spinner/PageSpinner.stories.tsx b/src/components/page-spinner/PageSpinner.stories.tsx new file mode 100644 index 00000000..9ee3c2e1 --- /dev/null +++ b/src/components/page-spinner/PageSpinner.stories.tsx @@ -0,0 +1,32 @@ +import { screen, render } from "@testing-library/react"; +import { PageSpinner } from "."; +import { Color, colors, Size, sizes } from "../../types"; +import styles from "../spinner/Spinner.module.scss"; + +it("by default is white", () => { + render(); + expect(screen.getByRole("alert")).toHaveClass(styles["is-black"]); +}); + +it("by default is labeled with 'Loading...'", () => { + render(); + const spinner = screen.getByRole("alert"); + expect(spinner).toHaveAttribute("aria-label", "Loading..."); +}); + +it("supports a custom label", () => { + const label = "Loading Test..."; + render(); + const spinner = screen.getByRole("alert"); + expect(spinner).toHaveAttribute("aria-label", label); +}); + +it.each(colors)("can be colored in %p", (color: Color) => { + render(); + expect(screen.getByRole("alert")).toHaveClass(styles[`is-${color}`]); +}); + +it.each(sizes)("can be sized in %p", (size: Size) => { + render(); + expect(screen.getByRole("alert")).toHaveClass(styles[`is-${size}`]); +}); diff --git a/src/components/page-spinner/PageSpinner.tsx b/src/components/page-spinner/PageSpinner.tsx new file mode 100644 index 00000000..a4f6bee8 --- /dev/null +++ b/src/components/page-spinner/PageSpinner.tsx @@ -0,0 +1,12 @@ +import { Spinner, SpinnerProps } from ".."; +import styles from "./PageSpinner.module.scss"; + +export type PageSpinnerProps = SpinnerProps; + +export const PageSpinner = (props: PageSpinnerProps): JSX.Element => { + return ( +
+ +
+ ); +}; diff --git a/src/components/page-spinner/index.ts b/src/components/page-spinner/index.ts new file mode 100644 index 00000000..be716ce2 --- /dev/null +++ b/src/components/page-spinner/index.ts @@ -0,0 +1 @@ +export * from "./PageSpinner"; diff --git a/src/components/spinner/Spinner.test.tsx b/src/components/spinner/Spinner.test.tsx index 919cbe26..9c144157 100644 --- a/src/components/spinner/Spinner.test.tsx +++ b/src/components/spinner/Spinner.test.tsx @@ -5,7 +5,7 @@ import styles from "./Spinner.module.scss"; it("by default is white", () => { render(); - expect(screen.getByRole("alert")).toHaveClass(styles["is-white"]); + expect(screen.getByRole("alert")).toHaveClass(styles["is-black"]); }); it("by default is labeled with 'Loading...'", () => { diff --git a/src/components/spinner/Spinner.tsx b/src/components/spinner/Spinner.tsx index b8559187..8ab3347b 100644 --- a/src/components/spinner/Spinner.tsx +++ b/src/components/spinner/Spinner.tsx @@ -10,7 +10,7 @@ const SpinnerDot = (): JSX.Element => (