reso-ui 1.1.0

package/src/components/Modal/Modal-Header/__test__/Modal-Header.test.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ModalHeader } from "@components/Modal/Modal-Header";
+import * as ButtonModule from "@components/Buttons/Button/Button";
+
+describe("Modal Header Component Unit Tests", () => {
+  beforeEach(() => {
+    jest.spyOn(ButtonModule, "Button").mockImplementation((props) => {
+      const { text, onClick } = props;
+
+      return (
+        <button onClick={onClick} data-testid="modal-header-button-mock">
+          {text}
+        </button>
+      );
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test("should render itself without error", () => {
+    const { debug } = render(
+      // tslint:disable-next-line: no-empty
+      <ModalHeader onClose={() => {}} title="sample title" />
+    );
+
+    // debug();
+    const component = screen.queryByTestId("modal-header-root");
+    expect(component).toBeInTheDocument();
+
+    const title = screen.queryByTestId("modal-header-title");
+    expect(title).toHaveTextContent("sample title");
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    render(
+      <ModalHeader
+        // tslint:disable-next-line: no-empty
+        onClose={() => {}}
+        title="sample title"
+        rootClassName="sample_class"
+      />
+    );
+
+    const component = screen.queryByTestId("modal-header-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      <ModalHeader
+        // tslint:disable-next-line: no-empty
+        onClose={() => {}}
+        title="sample title"
+        rootStyles={{ border: "2px solid red" }}
+      />
+    );
+
+    const component = screen.queryByTestId("modal-header-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should execute onClose when provided as prop and Close button clicked", () => {
+    const onCloseMock = jest.fn();
+    render(<ModalHeader onClose={onCloseMock} title="sample title" />);
+
+    const closeButton = screen.queryByTestId("modal-header-button-mock");
+    closeButton.click();
+
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+});

package/src/components/Modal/Modal-Header/index.ts

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

package/src/components/Modal/Modal-Header/stories/Modal-Header.stories.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Modal } from "@components/Modal/";
+import { ModalHeader } from "@components/Modal/Modal-Header";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Modal/Modal Header",
+  component: ModalHeader,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A header component suited for the Modal container.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof ModalHeader>;
+
+const SampleChildComponent = () => {
+  return (
+    <div className="story_modal_child_sample" style={{ width: "320px" }}>
+      Test Child Modal
+    </div>
+  );
+};
+export const Default = () => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  return (
+    <>
+      {showModal && (
+        <Modal isOpen={showModal} pa={5}>
+          <ModalHeader
+            title="Sample Title"
+            onClose={() => setShowModal(false)}
+          />
+
+          <SampleChildComponent />
+        </Modal>
+      )}
+      <button onClick={() => setShowModal(true)}>Show Modal</button>
+    </>
+  );
+};
+
+export const WithContainerStyles = () => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  return (
+    <>
+      {showModal && (
+        <Modal isOpen={showModal} pa={5}>
+          <ModalHeader
+            title="Sample Title"
+            onClose={() => setShowModal(false)}
+            rootStyles={{
+              borderBottom: "3px solid red",
+            }}
+          />
+          <SampleChildComponent />
+        </Modal>
+      )}
+      <button onClick={() => setShowModal(true)}>Show Modal</button>
+    </>
+  );
+};

package/src/components/Modal/Modal-Header/styles/Modal-Header.layout.scss

@@ -0,0 +1,15 @@
+.modal_header {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $margin-xsmall;
+  padding-bottom: $padding-xxsmall;
+}
+
+.modal_header_closeButton {
+  width: fit-content;
+  padding: 0 $padding-xxsmall;
+}

package/src/components/Modal/Modal-Header/styles/Modal-Header.theme.scss

@@ -0,0 +1,4 @@
+.modal_header_theme_light {
+  @include use_theme(unset, "light");
+  border-bottom-color: $primary-grey-medium;
+}

package/src/components/Modal/index.ts

@@ -0,0 +1,4 @@
+/* istanbul ignore file */
+export * from "./Modal-Container";
+export * from "./Modal-Body";
+export * from "./Modal-Header";

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

@@ -0,0 +1,47 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// styles
+import "./styles/Panel-Container.layout.scss";
+import "./styles/Panel-Container.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+export interface IPanelContainerProps extends IComponent, IThemeProps {
+  children: React.ReactNode;
+}
+
+export const Panel = ({
+  children,
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+}: IPanelContainerProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        panel_container: true,
+      },
+      rootClassName
+    ),
+    createThemeStyles("panel_container_theme_", theme)
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      style={rootStyles}
+      data-testid="panel-container-root"
+    >
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Panel } from "@components/Panel/";
+
+const SampleComponent = () => {
+  return (
+    <div data-testid="panel-container-child-test">
+      <p>This is a sample component</p>
+    </div>
+  );
+};
+
+describe("Panel Container Component Unit Tests", () => {
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      <Panel>
+        <SampleComponent />
+      </Panel>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("panel-container-root");
+    expect(component).toBeInTheDocument();
+
+    const child = screen.queryByTestId("panel-container-child-test");
+    expect(child).toBeInTheDocument();
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    render(
+      <Panel rootClassName="sample_class">
+        <SampleComponent />
+      </Panel>
+    );
+
+    const component = screen.queryByTestId("panel-container-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      <Panel rootStyles={{ border: "2px solid red" }}>
+        <SampleComponent />
+      </Panel>
+    );
+
+    const component = screen.queryByTestId("panel-container-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

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

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

package/src/components/Panel/Panel-Container/stories/Panel-Container.stories.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Panel } from "@components/Panel/";
+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: "Panel/Container",
+  component: Panel,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A container component with customised look and feel.
+
+            It supports both Margin and Padding props.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Panel>;
+
+const ComponentTemplate: ComponentStory<typeof Panel> = (args) => (
+  <Panel {...args}>Sample</Panel>
+);
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {};
+
+export const WithClassName = ComponentTemplate.bind({});
+WithClassName.args = {
+  rootClassName: "panel_container_root_class",
+};
+
+export const WithCustomStyle = ComponentTemplate.bind({});
+WithCustomStyle.args = {
+  rootStyles: {
+    background: "green",
+    color: "white",
+  },
+};

package/src/components/Panel/Panel-Container/stories/storiesStyle.scss

@@ -0,0 +1,3 @@
+.panel_container_root_class {
+  background-color: beige;
+}

package/src/components/Panel/Panel-Container/styles/Panel-Container.layout.scss

@@ -0,0 +1,9 @@
+.panel_container {
+  width: 264px;
+  min-height: 120px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: $border-radius-default;
+  padding: $padding-small;
+  @include box_shadow_default;
+}

package/src/components/Panel/Panel-Container/styles/Panel-Container.theme.scss

@@ -0,0 +1,4 @@
+.panel_container_theme_light {
+  @include use_theme($white, "light");
+  border-color: $primary-grey-medium-light;
+}

package/src/components/Panel/Panel-Row/Panel-Row.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+
+// styles
+import "./styles/Panel-Row.layout.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+export interface IPanelRowProps extends IComponent {
+  keyStr: string;
+  value: string | number;
+  keyClassName?: string;
+  keyStyles?: React.CSSProperties;
+  valueClassName?: string;
+  valueStyles?: React.CSSProperties;
+}
+
+export const PanelRow = ({
+  keyStr,
+  value,
+  rootClassName,
+  rootStyles = {},
+  keyClassName,
+  keyStyles = {},
+  valueClassName,
+  valueStyles = {},
+}: IPanelRowProps) => {
+  const rowClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        panel_row_container: true,
+      },
+      rootClassName
+    )
+  );
+
+  const keyClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        panel_row_key: true,
+      },
+      keyClassName
+    )
+  );
+
+  const valueClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        panel_row_value: true,
+      },
+      valueClassName
+    )
+  );
+
+  return (
+    <div className={rowClasses} style={rootStyles} data-testid="panel-row-root">
+      <span
+        className={keyClasses}
+        style={keyStyles}
+        data-testid="panel-row-key"
+      >
+        {keyStr}
+      </span>
+      <span
+        className={valueClasses}
+        style={valueStyles}
+        data-testid="panel-row-value"
+      >
+        {value}
+      </span>
+    </div>
+  );
+};

package/src/components/Panel/Panel-Row/__test__/Panel-Row.test.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { PanelRow } from "@components/Panel/Panel-Row";
+
+describe("Panel Title Component Unit Tests", () => {
+  test("should render itself without error", () => {
+    const { debug } = render(<PanelRow keyStr="testKey" value="testValue" />);
+
+    // debug();
+    const component = screen.queryByTestId("panel-row-root");
+    expect(component).toBeInTheDocument();
+
+    const keySpan = screen.queryByTestId("panel-row-key");
+    expect(keySpan).toHaveTextContent("testKey");
+
+    const valueSpan = screen.queryByTestId("panel-row-value");
+    expect(valueSpan).toHaveTextContent("testValue");
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    render(
+      <PanelRow
+        keyStr="testKey"
+        value="testValue"
+        rootClassName="sample_class"
+      />
+    );
+
+    const component = screen.queryByTestId("panel-row-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      <PanelRow
+        keyStr="testKey"
+        value="testValue"
+        rootStyles={{ border: "2px solid red" }}
+      />
+    );
+
+    const component = screen.queryByTestId("panel-row-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

package/src/components/Panel/Panel-Row/index.ts

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

package/src/components/Panel/Panel-Row/stories/Panel-Row.stories.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Panel } from "@components/Panel/";
+import { PanelRow } from "@components/Panel/Panel-Row";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Panel/Panel Row",
+  component: PanelRow,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A row component suited for the Panel container, meant to show key-value pairs of information.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof PanelRow>;
+
+const ComponentTemplate: ComponentStory<typeof PanelRow> = (args) => (
+  <Panel>
+    <PanelRow {...args} />
+  </Panel>
+);
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {
+  keyStr: "Sample key:",
+  value: "Sample value",
+};
+
+export const WithCustomStyle = ComponentTemplate.bind({});
+WithCustomStyle.args = {
+  keyStr: "Sample key:",
+  value: "Sample value",
+  rootStyles: {
+    color: "green",
+  },
+};
+
+export const WithCustomKeyStyle = ComponentTemplate.bind({});
+WithCustomKeyStyle.args = {
+  keyStr: "Sample key:",
+  value: "Sample value",
+  keyStyles: {
+    color: "green",
+  },
+};

package/src/components/Panel/Panel-Row/styles/Panel-Row.layout.scss

@@ -0,0 +1,16 @@
+.panel_row_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  margin-bottom: $margin-small;
+}
+
+.panel_row_key {
+  color: inherit;
+  font-weight: 600;
+}
+
+.panel_row_value {
+  color: inherit;
+}

package/src/components/Panel/Panel-Title/Panel-Title.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+
+// styles
+import "./styles/Panel-Title.layout.scss";
+import "./styles/Panel-Title.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+export interface IPanelTitleProps extends IComponent, IThemeProps {
+  text: string;
+}
+
+export const PanelTitle = ({
+  text,
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+}: IPanelTitleProps) => {
+  const titleStyles = createComponentStyles(
+    createLayoutStyles(
+      {
+        panel_title: true,
+      },
+      rootClassName
+    ),
+    createThemeStyles("panel_title_theme_", theme)
+  );
+
+  return (
+    <p
+      className={titleStyles}
+      style={rootStyles}
+      data-testid="panel-title-root"
+    >
+      {text}
+    </p>
+  );
+};

package/src/components/Panel/Panel-Title/__test__/Panel-Title.test.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { PanelTitle } from "@components/Panel/Panel-Title";
+
+describe("Panel Title Component Unit Tests", () => {
+  test("should render itself without error", () => {
+    const { debug } = render(<PanelTitle text="test" />);
+
+    // debug();
+    const component = screen.queryByTestId("panel-title-root");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveTextContent("test");
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    render(<PanelTitle text="test" rootClassName="sample_class" />);
+
+    const component = screen.queryByTestId("panel-title-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(<PanelTitle text="test" rootStyles={{ border: "2px solid red" }} />);
+
+    const component = screen.queryByTestId("panel-title-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

package/src/components/Panel/Panel-Title/index.ts

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