Storybook/sergeyro/expand loader

src/components/EditableHeading/__tests__/editableHeading.jest.js

@@ -1,6 +1,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import { render, cleanup, fireEvent } from "@testing-library/react";
+import { cleanup, fireEvent, render } from "@testing-library/react";
 import EditableHeading from "../EditableHeading";
 import "@testing-library/jest-dom";
 
@@ -55,7 +55,7 @@ describe("EditableHeading", () => {
 
     expect(mockCallback.mock.calls.length).toBe(1);
   });
-  
+
   it("should play the onStartEditing function with params when click on the input element inside the EditableHeading element", () => {
     const mockCallback = jest.fn(x => console.log(x));
     const { getByRole } = render(<EditableHeading onStartEditing={mockCallback} />);

src/components/Loader/Loader.jsx

@@ -1,7 +1,9 @@
 import React, { forwardRef, useMemo } from "react";
 import PropTypes from "prop-types";
-import "./Loader.scss";
+import cx from "classnames";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
+import { LOADER_COLORS, LOADER_SIZES, LOADER_TYPES } from "components/Loader/LoaderConstants";
+import styles from "./Loader.module.scss";
 
 const Loader = forwardRef(
   (
@@ -10,42 +12,85 @@ const Loader = forwardRef(
       svgClassName,
       className,
       size,
+      color,
+      hasBackground,
       id
     },
     ref
   ) => {
     const overrideClassName = backwardCompatibilityForProperties([className, svgClassName], "");
 
-    const style = useMemo(() => {
+    const sizeStyle = useMemo(() => {
       if (typeof size === "number") {
         return { width: size, height: size };
       }
       return undefined;
     }, [size]);
 
     return (
-      <div className="monday-loader-component" ref={ref} role="alert" title="loading" style={style} id={id}>
-        <svg className={`circle-loader-spinner ${overrideClassName}`} viewBox="0 0 50 50">
-          <circle className="circle-loader-spinner-path" cx="25" cy="25" r="20" fill="none" strokeWidth="5" />
+      <div
+        className={cx("monday-loader-component", styles.loaderContainer)}
+        ref={ref}
+        role="alert"
+        title="loading"
+        style={sizeStyle}
+        id={id}
+      >
+        <svg
+          className={cx("circle-loader-spinner", styles.circleLoaderSpinner, overrideClassName)}
+          viewBox="0 0 50 50"
+          color={color}
+        >
+          {hasBackground && (
+            <circle
+              className={styles.circleLoaderSpinnerBackground}
+              cx="25"
+              cy="25"
+              r="20"
+              fill="none"
+              strokeWidth="5"
+            />
+          )}
+          <circle
+            className={cx("circle-loader-spinner-path", styles.circleLoaderSpinnerPath)}
+            cx="25"
+            cy="25"
+            r="20"
+            fill="none"
+            strokeWidth="5"
+          />
         </svg>
       </div>
     );
   }
 );
 
+Loader.colors = LOADER_COLORS;
+Loader.sizes = LOADER_SIZES;
+Loader.types = LOADER_TYPES;
+
 Loader.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string,
-  /**
-   * The containing box of the loader
-   */
-  size: PropTypes.number
+  size: PropTypes.oneOfType([
+    PropTypes.oneOf([Loader.sizes.XS, Loader.sizes.SMALL, Loader.sizes.MEDIUM, Loader.sizes.LARGE]),
+    PropTypes.number
+  ]),
+  color: PropTypes.oneOf([
+    Loader.colors.PRIMARY,
+    Loader.colors.ON_PRIMARY,
+    Loader.colors.SECONDARY,
+    Loader.colors.DARK
+  ]),
+  hasBackground: PropTypes.bool
 };
 
 Loader.defaultProps = {
   id: undefined,
   className: undefined,
-  size: undefined
+  size: undefined,
+  color: undefined,
+  hasBackground: false
 };
 
 export default Loader;

src/components/Loader/Loader.scss → src/components/Loader/Loader.module.scss

@@ -1,19 +1,28 @@
-.monday-loader-component {
+.loaderContainer {
   position: relative;
   height: 100%;
   width: 100%;
 
-  .circle-loader-spinner {
+  .circleLoaderSpinnerBackground {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -50%;
+    margin-left: -50%;
+    stroke: var(--primary-background-hover-color);
+  }
+
+  .circleLoaderSpinner {
     animation: rotate 1s linear infinite;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -50%;
     margin-left: -50%;
+    stroke: currentColor;
+    stroke-linecap: round;
 
-    .circle-loader-spinner-path {
-      stroke: currentColor;
-      stroke-linecap: round;
+    .circleLoaderSpinnerPath {
       animation: dash 1s infinite;
     }
   }

src/components/Loader/LoaderConstants.js

@@ -0,0 +1,13 @@
+export const LOADER_COLORS = {
+  PRIMARY: "var(--primary-color)",
+  SECONDARY: "var(--secondary-text-color)",
+  ON_PRIMARY: "var(--text-color-on-inverted)",
+  DARK: "var(--primary-text-color)"
+};
+
+export const LOADER_SIZES = {
+  XS: 16,
+  SMALL: 24,
+  MEDIUM: 40,
+  LARGE: 64
+};