Merge pull request #11 from nickovchinnikov/nick/tile

Add tile component

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)

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";

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;

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

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.`,
+  },
+};

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();
+  });
+});

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>
+);

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>
+`;

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;

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",
   },