From 898f38b27fc018b9801f211700e1e2e71aa76ad3 Mon Sep 17 00:00:00 2001
From: Nick Ovchinnikov <nickovchinnikof@gmail.com>
Date: Fri, 18 Mar 2022 18:21:22 +0400
Subject: [PATCH] Add tile component

---
 README.md                                     |  8 ++++
 components/Button/Button.stories.tsx          |  1 -
 components/Button/Button.tsx                  |  4 +-
 .../Button/__snapshots__/Button.test.tsx.snap |  2 +-
 components/Tile/Tile.stories.tsx              | 47 +++++++++++++++++++
 components/Tile/Tile.test.tsx                 | 19 ++++++++
 components/Tile/Tile.tsx                      | 24 ++++++++++
 .../Tile/__snapshots__/Tile.test.tsx.snap     | 14 ++++++
 components/styles.ts                          |  4 ++
 styles/themes.ts                              |  4 +-
 10 files changed, 121 insertions(+), 6 deletions(-)
 create mode 100644 components/Tile/Tile.stories.tsx
 create mode 100644 components/Tile/Tile.test.tsx
 create mode 100644 components/Tile/Tile.tsx
 create mode 100644 components/Tile/__snapshots__/Tile.test.tsx.snap

diff --git a/README.md b/README.md
index 7ad9e51..a261b1f 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,7 @@
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/4)
 
+
 ## React and Typescript Review
 
 ### JSX at Glance
@@ -51,3 +52,10 @@
 ### Visual testing and Chromatic
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/10)
+
+
+## Storybook and Components Library
+
+### Tile component
+
+[pull request](https://github.com/nickovchinnikov/coursesbox/pull/11)
diff --git a/components/Button/Button.stories.tsx b/components/Button/Button.stories.tsx
index 4859c94..836b5f0 100644
--- a/components/Button/Button.stories.tsx
+++ b/components/Button/Button.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { ComponentStoryObj, ComponentMeta } from "@storybook/react";
 import { expect } from "@storybook/jest";
 import { screen, userEvent } from "@storybook/testing-library";
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
index 8cb28b0..5b08652 100644
--- a/components/Button/Button.tsx
+++ b/components/Button/Button.tsx
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import { css, SerializedStyles } from "@emotion/react";
 
 import { AppTheme } from "@/styles/themes";
-import { boxShadow, transition } from "@/components/styles";
+import { boxShadow, transition, borderRadius } from "@/components/styles";
 
 export type Color = "primary" | "secondary" | "danger" | "warning";
 
@@ -46,7 +46,7 @@ export const Button = styled.button<Props>`
   font-size: 1.6rem;
   width: 15rem;
   height: 4rem;
-  border-radius: 1rem;
+  ${borderRadius};
   ${({ theme, color }) => getColors(theme, color)};
   &:hover {
     opacity: 0.9;
diff --git a/components/Button/__snapshots__/Button.test.tsx.snap b/components/Button/__snapshots__/Button.test.tsx.snap
index 7f63928..661f63b 100644
--- a/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/components/Button/__snapshots__/Button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Button test cases Render check 1`] = `
 <DocumentFragment>
   <button
-    class="css-1s99dgh"
+    class="css-1rttvxo"
     color="primary"
   >
     Button
diff --git a/components/Tile/Tile.stories.tsx b/components/Tile/Tile.stories.tsx
new file mode 100644
index 0000000..2e4e903
--- /dev/null
+++ b/components/Tile/Tile.stories.tsx
@@ -0,0 +1,47 @@
+import { expect } from "@storybook/jest";
+import { screen } from "@storybook/testing-library";
+import { ComponentStoryObj, ComponentMeta } from "@storybook/react";
+
+import { Tile } from "./Tile";
+
+export default {
+  title: "Content/Tile",
+  component: Tile,
+} as ComponentMeta<typeof Tile>;
+
+export const BasicTile: ComponentStoryObj<typeof Tile> = {
+  play: async () => {
+    await expect(screen.getByRole("heading")).toBeInTheDocument();
+  },
+  args: {
+    header: "Lorem ipsum dolor sit amet",
+    children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.`,
+  },
+};
diff --git a/components/Tile/Tile.test.tsx b/components/Tile/Tile.test.tsx
new file mode 100644
index 0000000..c626a5a
--- /dev/null
+++ b/components/Tile/Tile.test.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import { render } from "@/test-utils";
+
+import { Tile } from "./Tile";
+
+describe("Tile test cases", () => {
+  it("Tile render check", () => {
+    const { asFragment } = render(
+      <Tile header="Lorem ipsum dolor sit amet">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris
+      </Tile>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/components/Tile/Tile.tsx b/components/Tile/Tile.tsx
new file mode 100644
index 0000000..26c3513
--- /dev/null
+++ b/components/Tile/Tile.tsx
@@ -0,0 +1,24 @@
+import { FC } from "react";
+import styled from "@emotion/styled";
+
+import { boxShadow, borderRadius } from "@/components/styles";
+
+const Section = styled.section`
+  ${borderRadius};
+  padding: 1vmin 4vmin 4vmin;
+  background: ${({ theme }) => theme.background};
+  color: ${({ theme }) => theme.font.regular};
+  ${({ theme }) =>
+    boxShadow(theme.components.shadow1, theme.components.shadow2)}
+`;
+
+type Props = {
+  header: string;
+};
+
+export const Tile: FC<Props> = ({ header, children }) => (
+  <Section>
+    <h2>{header}</h2>
+    {children}
+  </Section>
+);
diff --git a/components/Tile/__snapshots__/Tile.test.tsx.snap b/components/Tile/__snapshots__/Tile.test.tsx.snap
new file mode 100644
index 0000000..c21c82b
--- /dev/null
+++ b/components/Tile/__snapshots__/Tile.test.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tile test cases Tile render check 1`] = `
+<DocumentFragment>
+  <section
+    class="css-brv202"
+  >
+    <h2>
+      Lorem ipsum dolor sit amet
+    </h2>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+  </section>
+</DocumentFragment>
+`;
diff --git a/components/styles.ts b/components/styles.ts
index 4ac0bd1..f56fca8 100644
--- a/components/styles.ts
+++ b/components/styles.ts
@@ -14,6 +14,10 @@ export const boxShadow = (
   `;
 };
 
+export const borderRadius = css`
+  border-radius: 1rem;
+`;
+
 export const transition = () =>
   css`
     transition: all 0.4s ease;
diff --git a/styles/themes.ts b/styles/themes.ts
index aaf30a6..5040f85 100644
--- a/styles/themes.ts
+++ b/styles/themes.ts
@@ -37,9 +37,9 @@ const light: AppTheme = {
     warning: "#ffca2ce6;",
   },
   font: {
-    regular: "#5e5c64e6",
+    regular: "#504e55e6",
     button: "#E4EBF5e6",
-    warning: "#5e5c64e6",
+    warning: "#504e55e6",
     valid: "#198754e6",
     invalid: "#dc3545e6",
   },