feat: Add Spinner Component (#157)

* upgrade deps

* package lock update

* initial spinner

* spinner export

* include license

* spinner dots

* simpler code

* spinner story

* support for color maybe???

* hard-coded spinner color

* move to SCSS woot

* convert to SCSS

* bundle SCSS

* sass var

* dynamic colors woot

* change class name

* default color

* accessible label tests

* custom color mappings

* spinner

* spinner setup

* spinner size tests

.storybook/main.js

@@ -1,12 +1,19 @@
+const path = require("path");
+
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app",
-    "@storybook/preset-scss",
-  ],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
   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;
+  },
 };

package.json

@@ -25,10 +25,11 @@
   },
   "scripts": {
     "bundle:css": "copyfiles -u 1 src/styles/**/* lib && copyfiles -u 1 src/**/*.css lib",
+    "bundle:scss": "copyfiles -u 1 src/styles/**/* lib && copyfiles -u 1 src/**/*.scss lib",
     "clean": "rimraf ./lib",
     "prebuild": "yarn clean",
     "build": "tsc --p tsconfig.lib.json",
-    "postbuild": "yarn bundle:css",
+    "postbuild": "yarn bundle:css && yarn bundle:scss",
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint . --max-warnings=0",
     "test": "react-scripts test",
@@ -84,13 +85,13 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.3.5",
-    "@storybook/addon-essentials": "^6.3.5",
-    "@storybook/addon-links": "^6.3.5",
-    "@storybook/node-logger": "^6.3.5",
+    "@storybook/addon-actions": "^6.3.6",
+    "@storybook/addon-essentials": "^6.3.6",
+    "@storybook/addon-links": "^6.3.6",
+    "@storybook/node-logger": "^6.3.6",
     "@storybook/preset-create-react-app": "^3.2.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.3.5",
+    "@storybook/react": "^6.3.6",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",

src/components/alert/Alert.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 import { Notification } from "..";
 import { AlertColor } from "../../types";
-import styles from "./Alert.module.css";
+import styles from "./Alert.module.scss";
 
 export type AlertProps = PropsWithChildren<{
   color: AlertColor;

src/components/alerts/Alerts.module.css → src/components/alerts/Alerts.module.scss

@@ -1,3 +1,5 @@
+$navbar-z: 30;
+
 .alerts {
   position: fixed;
   top: 1.5rem;
@@ -9,7 +11,7 @@
     working at all with using SCSS modules. Still looking into this but don't want to hold up this changeset on
     just this.
   */
-  z-index: 31;
+  z-index: $navbar-z + 1;
 }
 
 .alerts > * {

src/components/alerts/Alerts.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from "react";
-import styles from "./Alerts.module.css";
+import styles from "./Alerts.module.scss";
 
 export const Alerts = ({
   children,

src/components/column/Column.tsx

@@ -1,4 +1,4 @@
-import styles from "./Column.module.css";
+import styles from "./Column.module.scss";
 import { PropsWithChildren } from "react";
 import {
   ClassNameTransformMap,

src/components/fade/Fade.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 import { CSSTransition } from "react-transition-group";
 import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import styles from "./Fade.module.css";
+import styles from "./Fade.module.scss";
 
 export type FadeProps = PropsWithChildren<{
   visible: boolean;

src/components/index.ts

@@ -21,6 +21,7 @@ export * from "./level";
 export * from "./navigation";
 export * from "./notification";
 export * from "./smart-alerts";
+export * from "./spinner";
 export * from "./table";
 export * from "./tag";
 export * from "./tags";

src/components/spinner/Spinner.module.scss

@@ -0,0 +1,132 @@
+/**
+The MIT License (MIT)
+
+Copyright (c) 2020 Tobias Ahlin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+@use "sass:map";
+@use "sass:list";
+@import "../../styles/variables.scss";
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  position: relative;
+  animation: spinner 2.5s infinite linear both;
+}
+
+.spinner_dot {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  animation: spinner_dot 2s infinite ease-in-out both;
+}
+
+.spinner_dot:before {
+  content: "";
+  display: block;
+  width: 25%;
+  height: 25%;
+  border-radius: 100%;
+  animation: spinner_dot-before 2s infinite ease-in-out both;
+}
+
+.spinner_dot:nth-child(1) {
+  animation-delay: -1.1s;
+}
+.spinner_dot:nth-child(2) {
+  animation-delay: -1s;
+}
+.spinner_dot:nth-child(3) {
+  animation-delay: -0.9s;
+}
+.spinner_dot:nth-child(4) {
+  animation-delay: -0.8s;
+}
+.spinner_dot:nth-child(5) {
+  animation-delay: -0.7s;
+}
+.spinner_dot:nth-child(6) {
+  animation-delay: -0.6s;
+}
+.spinner_dot:nth-child(1):before {
+  animation-delay: -1.1s;
+}
+.spinner_dot:nth-child(2):before {
+  animation-delay: -1s;
+}
+.spinner_dot:nth-child(3):before {
+  animation-delay: -0.9s;
+}
+.spinner_dot:nth-child(4):before {
+  animation-delay: -0.8s;
+}
+.spinner_dot:nth-child(5):before {
+  animation-delay: -0.7s;
+}
+.spinner_dot:nth-child(6):before {
+  animation-delay: -0.6s;
+}
+
+@keyframes spinner {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner_dot {
+  80%,
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner_dot-before {
+  50% {
+    transform: scale(0.4);
+  }
+  100%,
+  0% {
+    transform: scale(1);
+  }
+}
+
+@each $colorName, $colorList in $colors {
+  .is-#{$colorName} {
+    .spinner_dot:before {
+      background-color: list.nth($colorList, 1);
+    }
+  }
+}
+
+$spinner-sizes: (
+  "small": 20px,
+  "normal": 40px,
+  "medium": 60px,
+  "large": 100px,
+);
+
+@each $sizeName, $size in $spinner-sizes {
+  .is-#{$sizeName} {
+    width: $size;
+    height: $size;
+  }
+}

src/components/spinner/Spinner.test.tsx

@@ -0,0 +1,32 @@
+import { screen, render } from "@testing-library/react";
+import { Spinner } from ".";
+import { Color, colors, Size, sizes } from "../../types";
+import styles from "./Spinner.module.scss";
+
+it("by default is white", () => {
+  render(<Spinner />);
+  expect(screen.getByRole("alert")).toHaveClass(styles["is-white"]);
+});
+
+it("by default is labeled with 'Loading...'", () => {
+  render(<Spinner />);
+  const spinner = screen.getByRole("alert");
+  expect(spinner).toHaveAttribute("aria-label", "Loading...");
+});
+
+it("supports a custom label", () => {
+  const label = "Loading Test...";
+  render(<Spinner label={label} />);
+  const spinner = screen.getByRole("alert");
+  expect(spinner).toHaveAttribute("aria-label", label);
+});
+
+it.each<Color>(colors)("can be colored in %p", (color: Color) => {
+  render(<Spinner color={color} />);
+  expect(screen.getByRole("alert")).toHaveClass(styles[`is-${color}`]);
+});
+
+it.each<Size>(sizes)("can be sized in %p", (size: Size) => {
+  render(<Spinner size={size} />);
+  expect(screen.getByRole("alert")).toHaveClass(styles[`is-${size}`]);
+});

src/components/spinner/Spinner.tsx

@@ -0,0 +1,44 @@
+import { Color } from "../..";
+import { Size } from "../../types";
+import {
+  ClassNameTransformMap,
+  createClassNameFromProps,
+} from "../../utilities";
+import styles from "./Spinner.module.scss";
+
+const SpinnerDot = (): JSX.Element => (
+  <div className={styles.spinner_dot} aria-hidden="true" />
+);
+
+type SpinnerProps = {
+  label?: string;
+  color?: Color;
+  size?: Size;
+};
+
+const classNameMapping: ClassNameTransformMap<SpinnerProps> = new Map([
+  ["color", (color: string) => styles[`is-${color}`]],
+  ["size", (size: string) => styles[`is-${size}`]],
+]);
+
+export const Spinner = ({
+  label = "Loading...",
+  color = "white",
+  size = "normal",
+}: SpinnerProps): JSX.Element => {
+  const className = createClassNameFromProps(
+    classNameMapping,
+    { color, size } as Partial<SpinnerProps>,
+    [styles.spinner]
+  );
+
+  return (
+    <div aria-label={label} role="alert" className={className}>
+      <SpinnerDot />
+      <SpinnerDot />
+      <SpinnerDot />
+      <SpinnerDot />
+      <SpinnerDot />
+    </div>
+  );
+};

src/components/spinner/index.ts

@@ -0,0 +1 @@
+export * from "./Spinner";

src/stories/Level.stories.tsx

@@ -3,8 +3,8 @@ import { Story, Meta } from "@storybook/react";
 import { Level, LevelItem, LevelProps } from "../components";
 
 export default {
-  component: Level,
   title: "Example/Level",
+  component: Level,
 } as Meta<LevelProps>;
 
 const StandardLevelTemplate: Story<LevelProps> = () => (

src/stories/Spinner.stories.tsx

@@ -0,0 +1,12 @@
+import { Story, Meta } from "@storybook/react";
+import { Spinner } from "../components";
+
+export default {
+  component: Spinner,
+  title: "Example/Spinner",
+} as Meta;
+
+const Template: Story = () => <Spinner color="primary" size="medium" />;
+
+export const DefaultSpinner = Template.bind({});
+DefaultSpinner.args = {};

src/styles/variables.scss

@@ -1 +1,2 @@
 @import "bulma/sass/utilities/initial-variables.sass";
+@import "bulma/sass/utilities/derived-variables.sass";