reso-ui 1.1.0

package/src/components/Banners/Banner/__test__/Banner.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Banner } from "@components/Banners/Banner";
+
+// import from index does not work for jest.spyOn
+import * as ButtonModule from "@components/Buttons/Button/Button";
+
+describe("Banner Component Unit Tests", () => {
+  beforeEach(() => {
+    jest
+      .spyOn(ButtonModule, "Button")
+      .mockImplementation(({ rootClassName, rootStyles, onClick, text }) => {
+        return (
+          <button
+            data-testid="banner-close-button"
+            className={rootClassName}
+            style={rootStyles}
+            onClick={onClick}
+          >
+            {text}
+          </button>
+        );
+      });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test("should render info banner without crashing", () => {
+    const { debug } = render(<Banner text="banner text test" type="info" />);
+
+    // debug();
+    const component = screen.queryByTestId("banner-root");
+    expect(component).toBeInTheDocument();
+
+    expect(component).toHaveClass("banner_container_info");
+  });
+
+  test("should render success banner without crashing", () => {
+    const { debug } = render(<Banner text="banner text test" type="success" />);
+
+    // debug();
+    const component = screen.queryByTestId("banner-root");
+    expect(component).toBeInTheDocument();
+
+    expect(component).toHaveClass("banner_container_success");
+  });
+
+  test("should render warning banner without crashing", () => {
+    const { debug } = render(<Banner text="banner text test" type="warning" />);
+
+    // debug();
+    const component = screen.queryByTestId("banner-root");
+    expect(component).toBeInTheDocument();
+
+    expect(component).toHaveClass("banner_container_warning");
+  });
+
+  test("should render error banner without crashing", () => {
+    const { debug } = render(<Banner text="banner text test" type="error" />);
+
+    // debug();
+    const component = screen.queryByTestId("banner-root");
+    expect(component).toBeInTheDocument();
+
+    expect(component).toHaveClass("banner_container_error");
+  });
+
+  test("should render info banner with text without crashing", () => {
+    const { debug } = render(<Banner text="banner text test" type="info" />);
+
+    // debug();
+    const component = screen.queryByTestId("banner-root");
+    expect(component).toHaveTextContent("banner text test");
+  });
+
+  test("should not render info banner when close button is clicked", () => {
+    const { debug } = render(<Banner text="banner text test" type="info" />);
+
+    // debug();
+    const closeButton = screen.queryByTestId("banner-close-button");
+    closeButton.click();
+
+    const component = screen.queryByTestId("banner-root");
+    expect(component).not.toBeInTheDocument();
+  });
+});

package/src/components/Banners/Banner/index.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+import "@styles/global.scss";
+export * from "./Banner";

package/src/components/Banners/Banner/stories/Banner.stories.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Banner } from "@components/Banners/Banner";
+import "./storiesStyle.scss";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Banners/Banner",
+  component: Banner,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A generic Banner component with various types.
+
+            Import statement: \`import { Banner } from 'reso-ui/Banner'\`
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Banner>;
+
+const ComponentTemplate: ComponentStory<typeof Banner> = (args) => {
+  const storyProps = {
+    text: "Some Information",
+    ...args,
+  };
+  return <Banner {...storyProps} />;
+};
+
+export const DefaultInfo = ComponentTemplate.bind({});
+DefaultInfo.args = {
+  type: "info",
+};
+
+export const DefaultSuccess = ComponentTemplate.bind({});
+DefaultSuccess.args = {
+  type: "success",
+};
+
+export const DefaultWarning = ComponentTemplate.bind({});
+DefaultWarning.args = {
+  type: "warning",
+};
+
+export const DefaultError = ComponentTemplate.bind({});
+DefaultError.args = {
+  type: "error",
+};
+
+export const WithCustomStyle = ComponentTemplate.bind({});
+WithCustomStyle.args = {
+  type: "info",
+  rootStyles: {
+    borderStyle: "solid",
+    borderColor: "green",
+    borderWidth: "3px",
+    background: "yellow",
+    color: "black",
+  },
+};
+
+export const WithCustomClass = ComponentTemplate.bind({});
+WithCustomClass.args = {
+  type: "info",
+  rootClassName: "banner_generic_custom_class",
+};
+
+export const OverflowBehaviour = ComponentTemplate.bind({});
+OverflowBehaviour.args = {
+  type: "info",
+  text: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
+};

package/src/components/Banners/Banner/stories/storiesStyle.scss

@@ -0,0 +1,4 @@
+.banner_generic_custom_class {
+  background-color: grey;
+  border: 2px solid black;
+}

package/src/components/Banners/Banner/styles/Banner.layout.scss

@@ -0,0 +1,51 @@
+// padding-right must be the same with the width of close button
+.banner_container {
+  //   border: 2px solid red;
+  width: 100%;
+  height: auto;
+  max-height: 140px;
+  overflow-y: auto;
+  padding: $padding-small;
+  padding-right: $padding-large;
+  text-align: center;
+  //text
+  font-weight: 600;
+  font-size: $font-size-default;
+}
+
+.banner_close_button {
+  //   border: 2px solid blue;
+  background: unset;
+  border-radius: 0;
+  color: inherit;
+  border: none;
+  width: $padding-large;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  &:hover {
+    background-color: $primary-grey-dark-transparent;
+    color: inherit;
+  }
+}
+
+.banner_container_info {
+  background-color: $blue;
+  color: $fc-light;
+}
+
+.banner_container_warning {
+  background-color: $primary-yellow;
+  color: $fc-light;
+}
+
+.banner_container_error {
+  background-color: $bg-alert-banner-error;
+  color: $fc-light;
+}
+
+.banner_container_success {
+  background-color: $bg-alert-banner-success;
+  color: $fc-light;
+}

package/src/components/Banners/Banner-Wrapper/Banner-Wrapper.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+
+// styles
+import "./styles/Banner-Wrapper.layout.scss";
+
+// utils
+import { createComponentStyles, createLayoutStyles } from "@utils/styles";
+
+export interface IBannerWrapperProps extends IComponent {
+  children: React.ReactNode;
+  positionAbsolute?: boolean;
+  hasMaxHeight?: boolean;
+}
+
+export const BannerWrapper = ({
+  children,
+  positionAbsolute = false,
+  hasMaxHeight = false,
+  rootClassName,
+  rootStyles = {},
+}: IBannerWrapperProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        banner_wrapper_container: true,
+        banner_wrapper_container_positionAbsolute: positionAbsolute,
+        banner_wrapper_container_scroll: hasMaxHeight,
+      },
+      rootClassName
+    )
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      style={rootStyles}
+      data-testid="banner-wrapper-root"
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Banners/Banner-Wrapper/__test__/Banner-Wrapper.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { BannerWrapper } from "@components/Banners/Banner-Wrapper";
+
+const SampleComponent = () => {
+  return (
+    <div data-testid="banner-wrapper-child-test">
+      <p>This is a sample component</p>
+    </div>
+  );
+};
+
+describe("Panel Wrapper Unit Tests", () => {
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      <BannerWrapper>
+        <SampleComponent />
+      </BannerWrapper>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("banner-wrapper-root");
+    expect(component).toBeTruthy();
+
+    const child = screen.queryByTestId("banner-wrapper-child-test");
+    expect(child).toBeTruthy();
+  });
+
+  test("should apply positionAbsolute className when provided as prop", () => {
+    render(
+      <BannerWrapper positionAbsolute>
+        <SampleComponent />
+      </BannerWrapper>
+    );
+
+    const component = screen.queryByTestId("banner-wrapper-root");
+    expect(component).toHaveClass("banner_wrapper_container_positionAbsolute");
+  });
+
+  test("should apply scroll className when hasMaxheight is true", () => {
+    render(
+      <BannerWrapper hasMaxHeight>
+        <SampleComponent />
+      </BannerWrapper>
+    );
+
+    const component = screen.queryByTestId("banner-wrapper-root");
+    expect(component).toHaveClass("banner_wrapper_container_scroll");
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    render(
+      <BannerWrapper rootClassName="sample_class">
+        <SampleComponent />
+      </BannerWrapper>
+    );
+
+    const component = screen.queryByTestId("banner-wrapper-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      <BannerWrapper rootStyles={{ border: "2px solid red" }}>
+        <SampleComponent />
+      </BannerWrapper>
+    );
+
+    const component = screen.queryByTestId("banner-wrapper-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

package/src/components/Banners/Banner-Wrapper/index.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+import "@styles/global.scss";
+export * from "./Banner-Wrapper";

package/src/components/Banners/Banner-Wrapper/stories/Banner-Wrapper.stories.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Banner } from "@components/Banners/Banner";
+import { BannerWrapper } from "@components/Banners/Banner-Wrapper";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Banners/Wrapper",
+  component: BannerWrapper,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A wrapper component to put and stack all Banners.
+
+            You can use it as it is (which behaves like any other block element), or place it as \`position: absolute\`, by enabling the
+            *positionAbsolute* property.
+
+            You can set *hasMaxHeight* to true to enable scrolling, if you wish to set the Banner Wrapper a maximum height.
+
+            Only conditionally render this component, to prevent empty Divs (when all the Banners are closed) on your rendered dom.
+
+            Import statement: \`import { Banner Wrapper } from 'reso-ui/Banner-Wrapper'\`
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof BannerWrapper>;
+
+const ComponentTemplateDefault: ComponentStory<typeof BannerWrapper> = (
+  args
+) => (
+  <BannerWrapper {...args}>
+    <Banner type="info" text="Some information" />
+    <Banner type="success" text="Some information" />
+  </BannerWrapper>
+);
+
+const ComponentTemplatePositionAbsolute: ComponentStory<typeof BannerWrapper> =
+  (args) => (
+    <div
+      style={{
+        width: "100%",
+        height: "240px",
+        position: "relative",
+        border: "2px solid red",
+        paddingTop: "120px",
+      }}
+    >
+      <BannerWrapper {...args}>
+        <Banner type="info" text="Some information" />
+        <Banner type="success" text="Some information" />
+        <Banner type="warning" text="Some information" />
+      </BannerWrapper>
+      <p>Other content</p>
+    </div>
+  );
+
+export const Default = ComponentTemplateDefault.bind({});
+Default.args = {};
+
+export const WithCustomStyle = ComponentTemplateDefault.bind({});
+WithCustomStyle.args = {
+  rootStyles: {
+    border: "4px solid red",
+  },
+};
+
+export const WithPositionAbsolute = ComponentTemplatePositionAbsolute.bind({});
+WithPositionAbsolute.args = {
+  positionAbsolute: true,
+};
+
+export const WithPositionAbsoluteAndHasMaxHeight =
+  ComponentTemplatePositionAbsolute.bind({});
+WithPositionAbsoluteAndHasMaxHeight.args = {
+  positionAbsolute: true,
+  hasMaxHeight: true,
+  rootStyles: {
+    maxHeight: "120px",
+  },
+};

package/src/components/Banners/Banner-Wrapper/styles/Banner-Wrapper.layout.scss

@@ -0,0 +1,18 @@
+.banner_wrapper_container {
+  //   border: 2px solid green;
+  display: block;
+  margin-bottom: $margin-xxlarge;
+  width: 100%;
+}
+
+.banner_wrapper_container_positionAbsolute {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 3;
+}
+
+.banner_wrapper_container_scroll {
+  border-bottom: 1px solid $primary-grey-medium;
+  overflow-y: auto;
+}

package/src/components/Banners/index.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+export * from "./Banner";
+export * from "./Banner-Wrapper";

package/src/components/Buttons/Back/Back.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import { IMarginProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/Back.layout.scss";
+import "./styles/Back.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+export interface IBackProps extends IComponent, IThemeProps, IMarginProps {
+  to: string;
+  text?: string;
+  disabled?: boolean;
+  linkClassName?: string;
+  linkStyles?: React.CSSProperties;
+}
+
+export const Back = ({
+  to,
+  text = "Back",
+  disabled = false,
+  rootClassName,
+  rootStyles = {},
+  linkClassName,
+  linkStyles = {},
+  theme = "light",
+  ...spacingsProps
+}: IBackProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          back_container: true,
+          button_text: true,
+        },
+        spacingsProps
+      ),
+      rootClassName,
+      {
+        disabled,
+        no_select: true,
+      }
+    ),
+    createThemeStyles("back_theme_", theme)
+  );
+
+  const linkClasses = createComponentStyles(
+    createLayoutStyles({}, linkClassName),
+    createThemeStyles("back_link_theme", theme)
+  );
+
+  return (
+    <div
+      data-testid="back-root"
+      className={containerStyles}
+      style={rootStyles}
+      role="navigation"
+    >
+      <a
+        rel="noreferrer"
+        href={to}
+        className={linkClasses}
+        style={linkStyles}
+        data-testid="back-link"
+      >
+        {"<"} {text}
+      </a>
+    </div>
+  );
+};

package/src/components/Buttons/Back/__test__/Back.test.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Back } from "@components/Buttons/Back";
+
+describe("Back Button Component Unit Tests", () => {
+  test("should render itself with default text without error", () => {
+    const { debug } = render(<Back to="/" />);
+
+    // debug();
+    const component = screen.queryByTestId("back-root");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveTextContent("Back");
+  });
+
+  test("should render itself with custom text without error", () => {
+    const { debug } = render(<Back to="/" text="Return" />);
+
+    // debug();
+    const component = screen.queryByTestId("back-root");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveTextContent("Return");
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    render(<Back to="/" rootClassName="sample_back_root_className" />);
+
+    const component = screen.queryByTestId("back-root");
+    expect(component).toHaveClass("sample_back_root_className");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(<Back to="/" rootStyles={{ border: "2px solid red" }} />);
+
+    const component = screen.queryByTestId("back-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply link className when provided as prop", () => {
+    render(<Back to="/" linkClassName="sample_back_className" />);
+
+    const component = screen.queryByTestId("back-link");
+    expect(component).toHaveClass("sample_back_className");
+  });
+
+  test("should apply custom link styles when provided as prop", () => {
+    render(<Back to="/" linkStyles={{ color: "orange" }} />);
+
+    const component = screen.queryByTestId("back-link");
+    expect(component).toHaveStyle("color: orange");
+  });
+});

package/src/components/Buttons/Back/index.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+import "@styles/global.scss";
+export * from "./Back";

package/src/components/Buttons/Back/stories/Back.stories.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Back } from "@components/Buttons/Back";
+import "./storiesStyle.scss";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Buttons/Back",
+  component: Back,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A Back Button component.
+
+            It supports Margin props.
+
+            You can customize hover and behaviour via linkClassName.
+
+            Import statement: \`import { Back } from 'reso-ui/Back'\`
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Back>;
+
+const ComponentTemplate: ComponentStory<typeof Back> = (args) => {
+  const storyProps = {
+    to: "/",
+    text: "Back",
+    ...args,
+  };
+  return <Back {...storyProps} />;
+};
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {};
+
+export const WithCustomContainerClassName = ComponentTemplate.bind({});
+WithCustomContainerClassName.args = {
+  rootClassName: "back-stories-sample",
+};
+
+export const WithCustomContainerStyles = ComponentTemplate.bind({});
+WithCustomContainerStyles.args = {
+  rootStyles: {
+    backgroundColor: "red",
+  },
+};
+
+export const WithCustomLinkClassName = ComponentTemplate.bind({});
+WithCustomLinkClassName.args = {
+  linkClassName: "back-stories-sample-link",
+};
+
+export const WithCustomLinkStyles = ComponentTemplate.bind({});
+WithCustomLinkStyles.args = {
+  linkStyles: {
+    color: "red",
+  },
+};
+
+export const Disabled = ComponentTemplate.bind({});
+Disabled.args = {
+  disabled: true,
+};

package/src/components/Buttons/Back/stories/storiesStyle.scss

@@ -0,0 +1,11 @@
+.back-stories-sample {
+  background-color: yellow;
+  color: white;
+}
+
+.back-stories-sample-link {
+  color: blue;
+  &:hover {
+    color: green;
+  }
+}