reso-ui 1.1.0

package/src/components/External-Links/External-Links.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import { ILink } from "@interfaces/ILink";
+import { IMarginProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/External-Links.layout.scss";
+import "./styles/External-Links.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+import { methodHasValue } from "@utils/validations";
+
+export interface IExternalLinksProps
+  extends IComponent,
+    IThemeProps,
+    IMarginProps {
+  links: ILink[];
+  linkClassName?: string;
+  linkStyles?: React.CSSProperties;
+}
+
+export const ExternalLinks = ({
+  links,
+  rootClassName,
+  rootStyles = {},
+  linkClassName,
+  linkStyles = {},
+  theme = "light",
+  ...spacingsProps
+}: IExternalLinksProps) => {
+  const containerClasses = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          externalLinks_container: true,
+        },
+        spacingsProps
+      ),
+      rootClassName
+    ),
+    createThemeStyles("externalLinks_theme_", theme)
+  );
+
+  const linkClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        externalLinks_link: true,
+      },
+      linkClassName
+    ),
+    createThemeStyles("externalLinks_link_theme_", theme)
+  );
+
+  return (
+    <>
+      {links && links.length > 0 && (
+        <ul
+          data-testid="external-links-root"
+          className={containerClasses}
+          style={rootStyles}
+        >
+          {links.map((x, idx) => (
+            <li
+              data-testid={`external-links-link-${x}`}
+              className="externalLinks_linkContainer"
+              key={idx}
+            >
+              <a
+                href={x.link}
+                target="_blank"
+                rel="noreferrer"
+                className={linkClasses}
+                style={linkStyles}
+              >
+                {x.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </>
+  );
+};

package/src/components/External-Links/__test__/External-Links.test.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ExternalLinks } from "@components/External-Links";
+
+const sampleLinks = [
+  {
+    link: "#",
+    text: "Test Link 1",
+  },
+  {
+    link: "#",
+    text: "Test Link 2",
+  },
+];
+
+describe("External Links Component Unit Tests", () => {
+  test("should render itself without error", () => {
+    const { debug } = render(<ExternalLinks links={sampleLinks} />);
+
+    // debug();
+    const component = screen.queryByTestId("external-links-root");
+    expect(component).toBeInTheDocument();
+  });
+
+  test("should render link items correctly", () => {
+    const { debug } = render(<ExternalLinks links={sampleLinks} />);
+
+    // debug();
+    const component = screen.queryByTestId("external-links-root");
+    const links = component.childNodes;
+    expect(links.length).toEqual(2);
+    expect(links[0]).toHaveTextContent(sampleLinks[0].text);
+    expect(links[1]).toHaveTextContent(sampleLinks[1].text);
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    render(<ExternalLinks links={sampleLinks} rootClassName="sample_class" />);
+
+    const component = screen.queryByTestId("external-links-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      <ExternalLinks
+        links={sampleLinks}
+        rootStyles={{ border: "2px solid red" }}
+      />
+    );
+
+    const component = screen.queryByTestId("external-links-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply custom link className when provided as prop", () => {
+    render(
+      <ExternalLinks links={sampleLinks} linkClassName="sample_class123" />
+    );
+
+    const component = screen.queryByTestId("external-links-root");
+    const links = component.childNodes;
+
+    expect(links[0].firstChild).toHaveClass("sample_class123");
+    expect(links[1].firstChild).toHaveClass("sample_class123");
+  });
+
+  test("should apply custom link styles when provided as prop", () => {
+    render(
+      <ExternalLinks
+        links={sampleLinks}
+        linkStyles={{ border: "2px solid red" }}
+      />
+    );
+
+    const component = screen.queryByTestId("external-links-root");
+    const links = component.childNodes;
+
+    expect(links[0].firstChild).toHaveStyle("border: 2px solid red");
+    expect(links[1].firstChild).toHaveStyle("border: 2px solid red");
+  });
+});

package/src/components/External-Links/index.ts

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

package/src/components/External-Links/stories/External-Links.stories.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { ExternalLinks } from "@components/External-Links/External-Links";
+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: "Components/External Links",
+  component: ExternalLinks,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A \`ul\` component render a list of external links.
+
+            It supports Margin props.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof ExternalLinks>;
+
+const ComponentTemplate: ComponentStory<typeof ExternalLinks> = (args) => {
+  const storyProps = {
+    links: [
+      {
+        link: "#",
+        text: "Test Link 1",
+      },
+      {
+        link: "#",
+        text: "Test Link 2",
+      },
+      {
+        link: "#",
+        text: "Test Link 2",
+      },
+    ],
+    ...args,
+  };
+  return <ExternalLinks {...storyProps} />;
+};
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {};
+
+export const withCustomStyles = ComponentTemplate.bind({});
+withCustomStyles.args = {
+  rootStyles: {
+    background: "yellow",
+  },
+};
+
+export const withCustomLinkStyles = ComponentTemplate.bind({});
+withCustomLinkStyles.args = {
+  linkStyles: {
+    fontWeight: "bold",
+    color: "green",
+  },
+};
+
+export const withCustomHoverBehaviour = ComponentTemplate.bind({});
+withCustomHoverBehaviour.args = {
+  linkClassName: "external_links_stories_className",
+};
+
+// export const DefaultLink = ComponentTemplate.bind({});
+// DefaultLink.args = {
+//   type: "link",
+// };
+
+// export const Disabled = ComponentTemplate.bind({});
+// Disabled.args = {
+//   disabled: true,
+// };
+
+// export const WithCustomStyle = ComponentTemplate.bind({});
+// WithCustomStyle.args = {
+//   rootStyles: {
+//     borderColor: "green",
+//     borderWidth: "4px",
+//   },
+// };
+
+// export const WithCustomClass = ComponentTemplate.bind({});
+// WithCustomClass.args = {
+//   rootClassName: "button_generic_custom_class",
+// };
+
+// export const UseParentComponentWidth = () => {
+//   return (
+//     <div
+//       style={{
+//         width: "320px",
+//         height: "120px",
+//         border: "2px solid blue",
+//         padding: "10px",
+//       }}
+//     >
+//       <Button text="Click" inheritWidth />
+//     </div>
+//   );
+// };

package/src/components/External-Links/stories/storiesStyle.scss

@@ -0,0 +1,7 @@
+.external_links_stories_className {
+  &:hover {
+    text-decoration: none;
+    font-weight: bold;
+    color: red;
+  }
+}

package/src/components/External-Links/styles/External-Links.layout.scss

@@ -0,0 +1,14 @@
+.externalLinks_container {
+  padding: 0 $padding-xxsmall;
+  list-style: none;
+}
+
+.externalLinks_linkContainer {
+  //   border: 2px solid blue;
+  margin: $margin-xxsmall 0;
+}
+
+.externalLinks_link {
+  font-style: italic;
+  font-size: $font-size-default;
+}

package/src/components/External-Links/styles/External-Links.theme.scss

@@ -0,0 +1,4 @@
+.externalLinks_link_theme_light {
+  color: $link-blue;
+  background: unset;
+}

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import { IPaddingProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/Footer.layout.scss";
+import "./styles/Footer.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+export interface IFooterProps extends IComponent, IThemeProps, IPaddingProps {
+  children?: React.ReactNode;
+  positionFixed?: boolean;
+}
+
+export const Footer = ({
+  children,
+  positionFixed = false,
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+  ...spacingsProps
+}: IFooterProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          footer_container: true,
+          footer_container_positionFixed: positionFixed,
+        },
+        spacingsProps
+      ),
+      rootClassName
+    ),
+    createThemeStyles("footer_container_theme_", theme)
+  );
+
+  return (
+    <footer
+      data-testid="footer-root"
+      className={containerStyles}
+      style={rootStyles}
+    >
+      {children}
+    </footer>
+  );
+};

package/src/components/Footer/__test__/Footer.test.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Footer } from "@components/Footer";
+
+const SampleComponent = () => {
+  return (
+    <div data-testid="footer-child-test">
+      <p>This is a sample component</p>
+    </div>
+  );
+};
+
+describe("Footer Container Component Unit Tests", () => {
+  const defaultProps = {};
+
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      <Footer>
+        <SampleComponent />
+      </Footer>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("footer-root");
+    expect(component).toBeTruthy();
+
+    const child = screen.queryByTestId("footer-child-test");
+    expect(child).toBeInTheDocument();
+  });
+
+  test("should set class [positionFixed] when passed as prop", () => {
+    render(
+      <Footer positionFixed>
+        <SampleComponent />
+      </Footer>
+    );
+
+    const component = screen.queryByTestId("footer-root");
+    expect(component).toHaveClass("footer_container_positionFixed");
+  });
+
+  test("should have custom className when passed as prop", () => {
+    render(
+      <Footer rootClassName="test_custom_className">
+        <SampleComponent />
+      </Footer>
+    );
+
+    const component = screen.queryByTestId("footer-root");
+    expect(component).toHaveClass("test_custom_className");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      <Footer rootStyles={{ border: "2px solid red" }}>
+        <SampleComponent />
+      </Footer>
+    );
+
+    const component = screen.queryByTestId("footer-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

package/src/components/Footer/index.ts

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

package/src/components/Footer/stories/Footer.stories.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Footer } from "@components/Footer";
+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: "Containers/Footer",
+  component: Footer,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A footer wrapper component.
+
+            It supports Padding props.
+
+            You may also set [positionFixed] prop to true, to fix it at the bottom of the screen.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Footer>;
+
+const ComponentTemplate: ComponentStory<typeof Footer> = (args) => {
+  return (
+    <Footer {...args} pa={5}>
+      <div>Sample Footer child component</div>
+    </Footer>
+  );
+};
+
+export const DefaultWithPaddingAll = ComponentTemplate.bind({});
+DefaultWithPaddingAll.args = {};
+
+export const WithCustomContainerClassName = ComponentTemplate.bind({});
+WithCustomContainerClassName.args = {
+  rootClassName: "footer-stories-sample",
+};
+
+export const WithPositionFixed = ComponentTemplate.bind({});
+WithPositionFixed.args = {
+  positionFixed: true,
+};

package/src/components/Footer/stories/storiesStyle.scss

@@ -0,0 +1,5 @@
+.footer-stories-sample {
+  background: orange;
+  font-size: 18px;
+  color: green;
+}

package/src/components/Footer/styles/Footer.layout.scss

@@ -0,0 +1,13 @@
+.footer_container {
+  text-align: center;
+  width: 100%;
+  font-size: $font-size-1;
+}
+
+.footer_container_positionFixed {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  z-index: 10;
+}

package/src/components/Footer/styles/Footer.theme.scss

@@ -0,0 +1,4 @@
+.footer_container_theme_light {
+  background: $bg-footer;
+  color: $primary-grey-medium;
+}

package/src/components/Form/Form-Container/Form-Container.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import ISpacingsProps from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/Form-Container.layout.scss";
+import "./styles/Form-Container.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+export interface IFormContainerProps
+  extends IComponent,
+    IThemeProps,
+    ISpacingsProps {
+  children: React.ReactNode;
+  onSubmit: () => void;
+}
+
+export const Form = ({
+  rootClassName,
+  rootStyles = {},
+  onSubmit,
+  children,
+  theme = "light",
+  ...spacingsProps
+}: IFormContainerProps) => {
+  const containerClasses = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          form_container: true,
+        },
+        spacingsProps
+      ),
+      rootClassName
+    ),
+    createThemeStyles("form_container_theme_", theme)
+  );
+
+  return (
+    <form
+      data-testid="form-root"
+      className={containerClasses}
+      style={rootStyles}
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+    >
+      {children}
+    </form>
+  );
+};

package/src/components/Form/Form-Container/__test__/Form-Container.test.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Form } from "@components/Form";
+
+const SampleFormChildComponent = () => {
+  return (
+    <>
+      <input data-testid="form-input" />
+      <button data-testid="form-submit-button" type="submit">
+        Submit
+      </button>
+    </>
+  );
+};
+
+describe("Form Container Unit Tests", () => {
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      // tslint:disable-next-line: no-empty
+      <Form onSubmit={() => {}}>
+        <SampleFormChildComponent />
+      </Form>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("form-root");
+    expect(component).toBeInTheDocument();
+
+    const inputComponent = screen.queryByTestId("form-input");
+    expect(inputComponent).toBeInTheDocument();
+
+    const button = screen.queryByTestId("form-submit-button");
+    expect(button).toBeInTheDocument();
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    const { debug } = render(
+      // tslint:disable-next-line: no-empty
+      <Form onSubmit={() => {}} rootClassName="sample_class">
+        <SampleFormChildComponent />
+      </Form>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("form-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      // tslint:disable-next-line: no-empty
+      <Form onSubmit={() => {}} rootStyles={{ border: "2px solid red" }}>
+        <SampleFormChildComponent />
+      </Form>
+    );
+
+    const component = screen.queryByTestId("form-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should execute onSubmit when provided as prop", () => {
+    const onSubmitMock = jest.fn();
+    const { debug } = render(
+      <Form onSubmit={onSubmitMock}>
+        <SampleFormChildComponent />
+      </Form>
+    );
+
+    // debug();
+    const button = screen.queryByTestId("form-submit-button");
+    button.click();
+
+    expect(onSubmitMock).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Form/Form-Container/index.ts

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