feat(loader-bar): create loader-bar - FE-4119

cypress/features/regression/accessibility/accessibilityDesignSystem.feature

@@ -123,6 +123,7 @@ Feature: Accessibility tests - Design System folder
       | Flat Table            |
       | Hr                    |
       | Image                 |
+      | Loader Bar            |
       | Loader                |
       | Pager                 |
       | Simple color picker   |

cypress/features/regression/test/loader.feature

@@ -4,20 +4,22 @@ Feature: Loader default component
   @positive
   Scenario Outline: I set Loader component size to <size>
     When I open Test default "Loader" component in noIFrame with "loader" json from "commonComponents" using "<nameOfObject>" object name
-    Then Loader width is set to 1366 px and height is set to <height> px
+    Then Loader width and height is set to <height> px and margin is set to <margin> px
     Examples:
-      | size  | height | nameOfObject |
-      | small | 17     | sizeSmall    |
-      | large | 19     | sizeLarge    |
+      | size    | height | margin | nameOfObject |
+      | small   | 12     | 6      | sizeSmall    |
+      | default | 16     | 8      | sizeDefault  |
+      | large   | 20     | 8      | sizeLarge    |
 
   @positive
-  Scenario Outline: Verify size of button with loader
+  Scenario Outline: Verify size of button with <size> loader
     When I open Test default "Loader" component in noIFrame with "loader" json from "commonComponents" using "<nameOfObject>" object name
     Then button with loader width is set to <width> px and height is set to 40 px
     Examples:
-      | size  | width | nameOfObject        |
-      | small | 88    | isInsideButtonSmall |
-      | large | 120   | isInsideButtonLarge |
+      | size    | width | nameOfObject          |
+      | small   | 100   | isInsideButtonSmall   |
+      | default | 116   | isInsideButtonDefault |
+      | large   | 128   | isInsideButtonLarge   |
 
   @positive
   Scenario: Loader isInsideButton

cypress/features/regression/test/loaderBar.feature

@@ -0,0 +1,12 @@
+Feature: Loader Bar default component
+  I want to test Loader Bar component properties
+
+  @positive
+  Scenario Outline: I set Loader Bar component size to <size>
+    When I open Test default "Loader Bar" component in noIFrame with "loaderBar" json from "commonComponents" using "<nameOfObject>" object name
+    Then Loader Bar height is set to <height> px
+    Examples:
+      | size    | height | nameOfObject |
+      | small   | 4      | sizeSmall    |
+      | default | 8      | sizeDefault  |
+      | large   | 16     | sizeLarge    |

cypress/features/regression/themes/themes.feature

@@ -52,6 +52,16 @@ Feature: Theming addon
       | aegean | themeAegean  |
       | none   | themeNone    |
 
+  @positive
+  Scenario Outline: I set Loader Bar component theme to <theme>
+    When I open Test default "Loader Bar" component in noIFrame with "themeNames" json from "themes" using "<nameOfObject>" object name
+    Then Loader Bar component css background color is set to "<theme>"
+    Examples:
+      | theme  | nameOfObject |
+      | mint   | themeMint    |
+      | aegean | themeAegean  |
+      | none   | themeNone    |
+
   @positive
   Scenario Outline: I set Multiaction Button component theme to <theme>
     When I open default-story "Multi action button" component in noIFrame with "themeNames" json from "themes" using "<nameOfObject>" object name

cypress/fixtures/commonComponents/loader.json

@@ -1,4 +1,7 @@
 {
+  "sizeDefault": {
+
+  },
   "sizeSmall": {
     "size": "small"
   },
@@ -9,6 +12,10 @@
     "isInsideButton": true,
     "size": "small"
   },
+  "isInsideButtonDefault": {
+    "isInsideButton": true,
+    "size": "medium"
+  },
   "isInsideButtonLarge": {
     "isInsideButton": true,
     "size": "large"

cypress/fixtures/commonComponents/loaderBar.json

@@ -0,0 +1,11 @@
+{
+  "sizeDefault": {
+
+  },
+  "sizeSmall": {
+    "size": "small"
+  },
+  "sizeLarge": {
+    "size": "large"
+  }
+}

cypress/fixtures/themes/themes.json

@@ -13,5 +13,10 @@
         "mint": "rgb(0, 126, 91)",
         "aegean": "rgb(0, 92, 154)",
         "none": "rgb(0, 130, 0)"
+    },
+    "loader-bar": {
+        "mint": "rgb(179, 227, 214)",
+        "aegean": "rgb(179, 214, 239)",
+        "none": "rgb(179, 224, 179)"
     }
 }

cypress/locators/loader-bar/index.js

@@ -0,0 +1,5 @@
+import LOADER_BAR from "./locators";
+
+const loaderBar = () => cy.get(LOADER_BAR);
+
+export default loaderBar;

cypress/locators/loader-bar/locators.js

@@ -0,0 +1,4 @@
+// component preview locators
+const LOADER_BAR = '[data-component="loader-bar"]';
+
+export default LOADER_BAR;

cypress/locators/loader/index.js

@@ -1,5 +1,5 @@
 import LOADER from "./locators";
 import { BUTTON_DATA_COMPONENT_PREVIEW } from "../button/locators";
 
-export const loader = () => cy.get(LOADER);
+export const loader = (index) => cy.get(LOADER).find("div").eq(index);
 export const loaderInsideButton = () => cy.get(BUTTON_DATA_COMPONENT_PREVIEW);

cypress/locators/themes/index.js

@@ -2,6 +2,7 @@ import { getComponent } from "..";
 
 export const theme = (themeName) => cy.get(`[data-theme="${themeName}"]`);
 export const buttonToggleComponent = () =>
-getComponent("button-toggle").first().find("label");
+  getComponent("button-toggle").first().find("label");
 export const linkComponent = () => getComponent("link");
 export const loaderComponent = () => getComponent("loader").find("div");
+export const loaderBarComponent = () => getComponent("loader-bar");

cypress/support/step-definitions/loader-bar-steps.js

@@ -0,0 +1,11 @@
+import loaderBar from "../../locators/loader-bar";
+
+Then("Loader Bar height is set to {int} px", (height) => {
+  loaderBar().children().should("have.css", "height", `${height}px`);
+  loaderBar()
+    .children()
+    .children()
+    .should("have.css", "height", `${height}px`)
+    .and("have.css", "animation-duration", "2s")
+    .and("have.css", "animation-play-state", "running");
+});

cypress/support/step-definitions/loader-steps.js

@@ -1,11 +1,23 @@
 import { loader, loaderInsideButton } from "../../locators/loader";
 
 Then(
-  "Loader width is set to {int} px and height is set to {int} px",
-  (width, height) => {
-    loader()
-      .should("have.css", "height", `${height}px`)
-      .and("have.css", "width", `${width}px`);
+  "Loader width and height is set to {int} px and margin is set to {int} px",
+  (widthAndHeight, margin) => {
+    loader(0)
+      .should("have.css", "height", `${widthAndHeight}px`)
+      .and("have.css", "width", `${widthAndHeight}px`)
+      .and("have.css", "animation-delay", "0s")
+      .and("have.css", "margin-right", `${margin}px`);
+    loader(1)
+      .should("have.css", "height", `${widthAndHeight}px`)
+      .and("have.css", "width", `${widthAndHeight}px`)
+      .and("have.css", "animation-delay", "0.2s")
+      .and("have.css", "margin-right", `${margin}px`);
+    loader(2)
+      .should("have.css", "height", `${widthAndHeight}px`)
+      .and("have.css", "width", `${widthAndHeight}px`)
+      .and("have.css", "animation-delay", "0.4s")
+      .and("have.css", "margin-right", "0px");
   }
 );
 

cypress/support/step-definitions/select-steps.js

@@ -159,7 +159,9 @@ When("I click on Select input with lazy loading in no iframe", () => {
 });
 
 Then("Lazy loading is visible", () => {
-  loader().should("be.visible");
+  for (let i = 0; i < 3; i++) {
+    loader(i).should("be.visible");
+  }
 });
 
 When("I scroll to the {string} of Select List", (direction) => {

cypress/support/step-definitions/themes-steps.js

@@ -1,10 +1,8 @@
-import { 
-  getComponent, 
-  getElement,
-} from "../../locators";
+import { getComponent, getElement } from "../../locators";
 import {
   buttonToggleComponent,
   linkComponent,
+  loaderBarComponent,
   loaderComponent,
 } from "../../locators/themes";
 
@@ -85,3 +83,18 @@ Then(
     });
   }
 );
+
+Then(
+  "Loader Bar component css background color is set to {string}",
+  (themeName) => {
+    cy.fixture("themes/themes.json").then((json) => {
+      loaderBarComponent()
+        .children()
+        .should("have.css", BACKGROUND_COLOR, json["loader-bar"][themeName]);
+      loaderBarComponent()
+        .children()
+        .children()
+        .should("have.css", BACKGROUND_COLOR, json.common[themeName]);
+    });
+  }
+);

src/components/loader-bar/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./loader-bar";

src/components/loader-bar/index.js

@@ -0,0 +1 @@
+export { default } from "./loader-bar.component";

src/components/loader-bar/loader-bar-test.stories.mdx

@@ -0,0 +1,36 @@
+import { Meta, Story, Preview } from "@storybook/addon-docs";
+import LoaderBar from ".";
+import Button from "../button";
+import { LOADER_BAR_SIZES } from "./loader-bar.config";
+
+<Meta
+  title="Design System/Loader Bar/Test"
+  parameters={{
+    info: { disable: true },
+    chromatic: {
+      disable: true,
+    },
+  }}
+  argTypes={{
+    size: {
+      options: LOADER_BAR_SIZES,
+      control: {
+        type: "select",
+      },
+    },
+  }}
+/>
+
+export const LoaderStory = ({ size, ...args }) => {
+  return <LoaderBar size={size} />;
+};
+
+# LoaderBar
+
+### Default
+
+<Preview>
+  <Story name="default" args={{}}>
+    {LoaderStory.bind({})}
+  </Story>
+</Preview>

src/components/loader-bar/loader-bar.component.js

@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import tagComponent from "../../utils/helpers/tags";
+import StyledLoaderBar, { InnerBar, StyledLoader } from "./loader-bar.style";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
+
+const LoaderBar = ({ size = "medium", ...rest }) => {
+  return (
+    <StyledLoader {...rest} {...tagComponent("loader-bar", rest)}>
+      <StyledLoaderBar size={size}>
+        <InnerBar size={size} />
+      </StyledLoaderBar>
+    </StyledLoader>
+  );
+};
+
+LoaderBar.propTypes = {
+  ...marginPropTypes,
+  /** Size of the loader. */
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+};
+
+export default LoaderBar;

src/components/loader-bar/loader-bar.config.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const LOADER_BAR_SIZES = ["small", "medium", "large"];

src/components/loader-bar/loader-bar.d.ts

@@ -0,0 +1,10 @@
+import { MarginProps } from "styled-system";
+
+export interface LoaderBarProps extends MarginProps {
+  /** Size of the loaderBar. */
+  size?: "small" | "medium" | "large";
+}
+
+declare function LoaderBar(props: LoaderBarProps): JSX.Element;
+
+export default LoaderBar;

src/components/loader-bar/loader-bar.spec.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { mount } from "enzyme";
+import StyledLoaderBar, { InnerBar } from "./loader-bar.style";
+import { assertStyleMatch } from "../../__spec_helper__/test-utils";
+import baseTheme from "../../style/themes/base";
+import LoaderBar from "./loader-bar.component";
+
+describe("LoaderBar", () => {
+  let wrapper;
+  it("renders component as expected", () => {
+    wrapper = mount(<LoaderBar />);
+    const innerBar = wrapper.find(InnerBar);
+    expect(innerBar).toBeTruthy();
+  });
+
+  describe("when size is not specified", () => {
+    beforeEach(() => {
+      wrapper = mount(<LoaderBar />);
+    });
+    it("renders outer bar as expected", () => {
+      assertStyleMatch(
+        {
+          backgroundColor: baseTheme.colors.loadingBarBackground,
+          width: "256px",
+          height: "8px",
+        },
+        wrapper.find(StyledLoaderBar)
+      );
+    });
+    it("renders inner bar as expected", () => {
+      assertStyleMatch(
+        {
+          backgroundColor: baseTheme.colors.primary,
+          width: "128px",
+          height: "8px",
+        },
+        wrapper.find(InnerBar)
+      );
+    });
+  });
+
+  describe("when size is set to small", () => {
+    beforeEach(() => {
+      wrapper = mount(<LoaderBar size="small" />);
+    });
+    it("applies proper width and height to outer bar", () => {
+      assertStyleMatch(
+        { width: "256px", height: "4px" },
+        wrapper.find(StyledLoaderBar)
+      );
+    });
+
+    it("applies proper width and height to inner bar", () => {
+      assertStyleMatch(
+        { width: "128px", height: "4px" },
+        wrapper.find(InnerBar)
+      );
+    });
+  });
+  describe("when size is set to large", () => {
+    beforeEach(() => {
+      wrapper = mount(<LoaderBar size="large" />);
+    });
+    it("applies proper width and height to outer bar", () => {
+      assertStyleMatch(
+        { width: "256px", height: "16px" },
+        wrapper.find(StyledLoaderBar)
+      );
+    });
+
+    it("applies proper width and height to inner bar", () => {
+      assertStyleMatch(
+        { width: "128px", height: "16px" },
+        wrapper.find(InnerBar)
+      );
+    });
+  });
+});