reso-ui 1.1.0

package/src/components/Buttons/Back/styles/Back.layout.scss

@@ -0,0 +1,12 @@
+.back_container {
+  width: fit-content;
+  padding: $padding-xxsmall;
+  //   border: 2px solid red;
+  cursor: pointer;
+  opacity: 0.9;
+  &:hover {
+    opacity: 1;
+  }
+  font-weight: 600;
+  font-size: $font-size-default;
+}

package/src/components/Buttons/Back/styles/Back.theme.scss

@@ -0,0 +1,7 @@
+.back_theme_light {
+  @include use_theme(none, "light");
+}
+
+.back_link_theme_light {
+  color: $fc-dark;
+}

package/src/components/Buttons/Button/Button.tsx

@@ -0,0 +1,85 @@
+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/Button.layout.scss";
+import "./styles/Button.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+import { methodHasValue } from "@utils/validations";
+
+export interface IButtonProps extends IComponent, IThemeProps, IMarginProps {
+  type?: "plain" | "primary" | "link";
+  role?: "button" | "submit";
+  id?: string;
+  text: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  inheritWidth?: boolean;
+  inline?: boolean;
+}
+
+export const Button = ({
+  id = null,
+  type = "plain",
+  role = "button",
+  text,
+  onClick,
+  disabled = false,
+  inheritWidth = false,
+  inline = false,
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+  ...spacingsProps
+}: IButtonProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          button_container: true,
+          button_container_inheritWidth: inheritWidth,
+          button_container_inline: inline,
+          button_container_link: type === "link",
+          button_text: true,
+        },
+        spacingsProps
+      ),
+      rootClassName,
+      {
+        disabled,
+        no_select: true,
+      }
+    ),
+    createThemeStyles(`button_${type}_theme_`, theme)
+  );
+
+  return (
+    <button
+      id={id ? id : null}
+      data-testid="button-root"
+      className={containerStyles}
+      style={rootStyles}
+      type={role}
+      onClick={() => {
+        if (methodHasValue(onClick)) {
+          onClick();
+        }
+      }}
+      disabled={disabled}
+    >
+      {text}
+    </button>
+  );
+};

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

@@ -0,0 +1,66 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Button } from "@components/Buttons/Button";
+
+describe("Generic Button Component Unit Tests", () => {
+  test("should render itself without error", () => {
+    const { debug } = render(<Button text="test" />);
+
+    // debug();
+    const component = screen.queryByTestId("button-root");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveTextContent("test");
+  });
+
+  test("should apply inheritWidth className when provided as prop", () => {
+    render(<Button text="test" inheritWidth />);
+
+    const component = screen.queryByTestId("button-root");
+    expect(component).toHaveClass("button_container_inheritWidth");
+  });
+
+  test("should apply inline className when provided as prop", () => {
+    render(<Button text="test" inline />);
+
+    const component = screen.queryByTestId("button-root");
+    expect(component).toHaveClass("button_container_inline");
+  });
+
+  test("should apply link className when type is link", () => {
+    render(<Button text="test" type="link" />);
+
+    const component = screen.queryByTestId("button-root");
+    expect(component).toHaveClass("button_container_link");
+  });
+
+  test("should apply disabled className when provided as prop", () => {
+    render(<Button text="test" disabled />);
+
+    const component = screen.queryByTestId("button-root");
+    expect(component).toHaveClass("component_disabled");
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    render(<Button text="test" rootClassName="sample_class" />);
+
+    const component = screen.queryByTestId("button-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(<Button text="test" rootStyles={{ border: "2px solid red" }} />);
+
+    const component = screen.queryByTestId("button-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should execute onClick when provided as prop", () => {
+    const onClickSpy = jest.fn();
+    render(<Button text="test" onClick={onClickSpy} />);
+
+    const component = screen.queryByTestId("button-root");
+    component.click();
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,2 @@
+import "@styles/global.scss";
+export * from "./Button";

package/src/components/Buttons/Button/stories/Button.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 { Button } from "@components/Buttons/Button";
+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/Button",
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A generic button component.
+
+            It supports Margin props.
+
+            You can customize hover behaviour via rootClassName.
+
+            Import statement: \`import { Button } from 'reso-ui/Button'\`
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+const ComponentTemplate: ComponentStory<typeof Button> = (args) => {
+  const storyProps = {
+    text: "Click",
+    onClick: () => {
+      alert("Button clicked!");
+    },
+    ...args,
+  };
+  return <Button {...storyProps} />;
+};
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {};
+
+export const DefaultPrimary = ComponentTemplate.bind({});
+DefaultPrimary.args = {
+  type: "primary",
+};
+
+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/Buttons/Button/stories/storiesStyle.scss

@@ -0,0 +1,7 @@
+.button_generic_custom_class {
+  font-weight: bold;
+  background-color: orange;
+  &:hover {
+    background-color: green;
+  }
+}

package/src/components/Buttons/Button/styles/Button.layout.scss

@@ -0,0 +1,30 @@
+.button_container {
+  display: block;
+  width: 120px;
+  height: 48px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: $border-radius-default;
+  transition: background-color ease 0.1s;
+  cursor: pointer;
+}
+
+.button_container_inheritWidth {
+  width: 100%;
+  min-width: inherit;
+}
+
+.button_container_inline {
+  display: inline-block;
+}
+
+.button_container_link {
+  // border: 2px solid red;
+  border: none;
+  padding: $padding-xxsmall;
+  width: fit-content;
+  height: initial;
+  &:hover {
+    text-decoration: underline;
+  }
+}

package/src/components/Buttons/Button/styles/Button.theme.scss

@@ -0,0 +1,42 @@
+///////////////////////////////
+// for type Plain
+///////////////////////////////
+.button_plain_theme_light {
+  @include use_theme($primary-grey-light, "light");
+  border-color: $primary-grey-medium;
+  &:hover {
+    background: $primary-grey-dark;
+    color: $fc-light;
+  }
+}
+
+.button_plain_theme_dark {
+  @include use_theme($primary-grey-dark, "dark");
+  border-color: $primary-grey-medium;
+  &:hover {
+    background: $primary-grey-medium-light;
+    color: $fc-dark;
+  }
+}
+
+///////////////////////////////
+// for type Primary
+///////////////////////////////
+.button_primary_theme_light {
+  @include use_theme($bg-button-primary, "dark");
+  border: none;
+  opacity: 0.9;
+  &:hover {
+    // background: $bg-button-primary;
+    // color: $fc-light;
+    opacity: 1;
+  }
+}
+
+///////////////////////////////
+// for type Link
+///////////////////////////////
+.button_link_theme_light {
+  @include use_theme(unset, "light");
+  color: $lc-blue;
+}

package/src/components/Buttons/index.ts

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

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

@@ -0,0 +1,59 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import ISpacingsProps, { IMarginProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/Card-Container.layout.scss";
+import "./styles/Card-Container.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+export interface ICardContainerProps
+  extends IComponent,
+    IThemeProps,
+    ISpacingsProps {
+  children: React.ReactNode;
+}
+
+export const Card = ({
+  children,
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+  ...spacingsProps
+}: ICardContainerProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          card_container: true,
+        },
+        spacingsProps
+      ),
+      rootClassName,
+      {
+        no_select: true,
+      }
+    ),
+    createThemeStyles("card_container_theme_", theme)
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      style={rootStyles}
+      data-testid="card-container-root"
+    >
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,62 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Card } from "@components/Card/";
+
+const SampleComponent = () => {
+  return (
+    <div data-testid="card-container-child-test">
+      <p>This is a sample component</p>
+    </div>
+  );
+};
+
+describe("Card Container Component Unit Tests", () => {
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      <Card>
+        <SampleComponent />
+      </Card>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("card-container-root");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveClass("card_container");
+
+    const child = screen.queryByTestId("card-container-child-test");
+    expect(child).toBeInTheDocument();
+  });
+
+  test("should have custom rootClassName when passed as prop", () => {
+    render(
+      <Card rootClassName="test_custom_className">
+        <SampleComponent />
+      </Card>
+    );
+
+    const component = screen.queryByTestId("card-container-root");
+    expect(component).toHaveClass("test_custom_className");
+  });
+
+  test("should have custom rootStyles when passed as prop", () => {
+    render(
+      <Card rootStyles={{ border: "2px solid red" }}>
+        <SampleComponent />
+      </Card>
+    );
+
+    const component = screen.queryByTestId("card-container-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply padding class when passed as prop", () => {
+    render(
+      <Card pa={5}>
+        <SampleComponent />
+      </Card>
+    );
+
+    const component = screen.queryByTestId("card-container-root");
+    expect(component).toHaveClass("spacing-pa-5");
+  });
+});

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

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

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Card } from "@components/Card";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Card/Container",
+  component: Card,
+  // 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 Card>;
+
+const ComponentTemplate: ComponentStory<typeof Card> = (args) => (
+  <Card pa={5} {...args}>
+    Sample
+  </Card>
+);
+
+export const Default = ComponentTemplate.bind({});
+Default.args = {};
+
+export const WithCustomStyle = ComponentTemplate.bind({});
+WithCustomStyle.args = {
+  rootStyles: {
+    background: "green",
+    color: "white",
+  },
+};

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

@@ -0,0 +1,8 @@
+.card_container {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: $border-radius-default;
+  width: 180px;
+  min-height: 160px;
+  @include box_shadow_default;
+}

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

@@ -0,0 +1,9 @@
+.card_container_theme_light {
+  @include use_theme($primary-grey-light, "light");
+  border-color: $primary-grey-dark;
+}
+
+.card_container_theme_dark {
+  @include use_theme($primary-grey-dark, "dark");
+  border-color: $primary-grey-dark;
+}

package/src/components/Card/Card-Content/Card-Content.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import ISpacingsProps from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/Card-Content.layout.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+export interface ICardContentProps extends IComponent, ISpacingsProps {
+  children: React.ReactNode;
+  wrap?: boolean;
+}
+
+export const CardContent = ({
+  children,
+  wrap = true,
+  rootClassName,
+  rootStyles = {},
+  ...spacingProps
+}: ICardContentProps) => {
+  const containerStyles = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          card_content_container: true,
+          card_content_container_wrap: wrap,
+        },
+        spacingProps
+      ),
+      rootClassName
+    )
+  );
+
+  return (
+    <div
+      className={containerStyles}
+      style={rootStyles}
+      data-testid="card-content-root"
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Card/Card-Content/__test__/Card-Content.test.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { CardContent } from "@components/Card/Card-Content";
+
+const SampleComponent = () => {
+  return (
+    <div data-testid="card-content-child-test">
+      <p>This is a sample component</p>
+    </div>
+  );
+};
+
+describe("Card Content Component Unit Tests", () => {
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      <CardContent>
+        <SampleComponent />
+      </CardContent>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("card-content-root");
+    expect(component).toBeInTheDocument();
+    expect(component).toHaveClass("card_content_container");
+
+    const child = screen.queryByTestId("card-content-child-test");
+    expect(child).toBeInTheDocument();
+  });
+
+  test("should apply wrap class by default", () => {
+    render(
+      <CardContent pa={5}>
+        <SampleComponent />
+      </CardContent>
+    );
+
+    const component = screen.queryByTestId("card-content-root");
+    expect(component).toHaveClass("card_content_container_wrap");
+  });
+
+  test("should not apply wrap class when passed as prop", () => {
+    render(
+      <CardContent pa={5} wrap={false}>
+        <SampleComponent />
+      </CardContent>
+    );
+
+    const component = screen.queryByTestId("card-content-root");
+    expect(component).not.toHaveClass("card_content_container_wrap");
+  });
+
+  test("should have custom rootClassName when passed as prop", () => {
+    render(
+      <CardContent rootClassName="test_custom_className">
+        <SampleComponent />
+      </CardContent>
+    );
+
+    const component = screen.queryByTestId("card-content-root");
+    expect(component).toHaveClass("test_custom_className");
+  });
+
+  test("should have custom rootStyles when passed as prop", () => {
+    render(
+      <CardContent rootStyles={{ border: "2px solid red" }}>
+        <SampleComponent />
+      </CardContent>
+    );
+
+    const component = screen.queryByTestId("card-content-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply padding class when passed as prop", () => {
+    render(
+      <CardContent pa={5}>
+        <SampleComponent />
+      </CardContent>
+    );
+
+    const component = screen.queryByTestId("card-content-root");
+    expect(component).toHaveClass("spacing-pa-5");
+  });
+});

package/src/components/Card/Card-Content/index.ts

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