Icons

README.md

@@ -1,5 +1,6 @@
 # Practical Guide to NextJS. Build eCommerce education app
 
+
 ## Intro
 
 ### Create-next-app with Typescript support
@@ -59,3 +60,7 @@
 ### Tile component
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/11)
+
+### Icon component
+
+[pull request](https://github.com/nickovchinnikov/coursesbox/pull/12)

components/Button/Button.tsx

@@ -8,8 +8,11 @@ import { boxShadow, transition, borderRadius } from "@/components/styles";
 export type Color = "primary" | "secondary" | "danger" | "warning";
 
 export type Props = {
+  /** Text in the button */
   children: string;
+  /** Button color */
   color?: Color;
+  /** Click handler */
   onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 

components/Icon/Icon.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Icon } from "./index";
+
+export default {
+  title: "Content/Icon",
+  component: Icon,
+} as ComponentMeta<typeof Icon>;
+
+const Template: ComponentStory<typeof Icon> = (args) => <Icon {...args} />;
+
+export const BasicIcon = Template.bind({});
+BasicIcon.args = {
+  name: "Home",
+};

components/Icon/Icon.test.tsx

@@ -0,0 +1,11 @@
+import { render } from "@/test-utils";
+
+import { Icon } from "./Icon";
+
+describe("Icon test cases", () => {
+  it("Icon render check", () => {
+    const { asFragment } = render(<Icon name="Moon" />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

components/Icon/Icon.tsx

@@ -0,0 +1,36 @@
+import { FC } from "react";
+import styled from "@emotion/styled";
+
+import { Icons } from "./Icons";
+
+export type AvailableIcons = keyof typeof Icons;
+
+type WrapperProps = {
+  /** Width and height */
+  size?: string;
+};
+
+type Props = {
+  /** Icon name */
+  name: AvailableIcons;
+} & WrapperProps &
+  React.SVGProps<SVGSVGElement>;
+
+const Wrapper = styled.div<WrapperProps>`
+  color: ${({ theme }) => theme.font.regular};
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+`;
+
+// https://reactsvgicons.com/search
+
+export const Icon: FC<Props> = ({ name, size = "2rem", ...rest }) => {
+  const Icon = Icons[name];
+  const sizes = { width: size, height: size };
+
+  return (
+    <Wrapper size={size}>
+      <Icon {...sizes} {...rest} />
+    </Wrapper>
+  );
+};

components/Icon/Icons.tsx

@@ -0,0 +1,68 @@
+const User = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 1024 1024"
+    fill="currentColor"
+    height="1em"
+    width="1em"
+    {...props}
+  >
+    <path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" />
+  </svg>
+);
+
+const Moon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    height="1em"
+    width="1em"
+    {...props}
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path d="M10 6a8 8 0 0011.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0010 6zm-6 6a8 8 0 008 8 8.006 8.006 0 006.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 004 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 00-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 00-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0015.29.836L15.5 0h1l.209.836a2 2 0 001.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 00-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 00-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 001.455-1.455L20.5 5h1l.209.836a2 2 0 001.455 1.455z" />
+  </svg>
+);
+
+const Sun = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg fill="none" viewBox="0 0 24 24" height="1em" width="1em" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12 16a4 4 0 100-8 4 4 0 000 8zm0 2a6 6 0 100-12 6 6 0 000 12zM11 0h2v4.062a8.079 8.079 0 00-2 0V0zM7.094 5.68L4.222 2.808 2.808 4.222 5.68 7.094A8.048 8.048 0 017.094 5.68zM4.062 11H0v2h4.062a8.079 8.079 0 010-2zm1.618 5.906l-2.872 2.872 1.414 1.414 2.872-2.872a8.048 8.048 0 01-1.414-1.414zM11 19.938V24h2v-4.062a8.069 8.069 0 01-2 0zm5.906-1.618l2.872 2.872 1.414-1.414-2.872-2.872a8.048 8.048 0 01-1.414 1.414zM19.938 13H24v-2h-4.062a8.069 8.069 0 010 2zM18.32 7.094l2.872-2.872-1.414-1.414-2.872 2.872c.528.41 1.003.886 1.414 1.414z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const Home = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    height="1em"
+    width="1em"
+    {...props}
+  >
+    <path d="M3 13h1v7c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-7h1a1 1 0 00.707-1.707l-9-9a.999.999 0 00-1.414 0l-9 9A1 1 0 003 13zm7 7v-5h4v5h-4zm2-15.586l6 6V15l.001 5H16v-5c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H6v-9.586l6-6z" />
+  </svg>
+);
+
+const Settings = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 512 512"
+    fill="currentColor"
+    height="1em"
+    width="1em"
+    {...props}
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={32}
+      d="M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z"
+    />
+  </svg>
+);
+
+export const Icons = { User, Moon, Sun, Home, Settings };

components/Icon/__snapshots__/Icon.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon test cases Icon render check 1`] = `
+<DocumentFragment>
+  <div
+    class="css-1ak3luw"
+  >
+    <svg
+      fill="currentColor"
+      height="2rem"
+      viewBox="0 0 24 24"
+      width="2rem"
+    >
+      <path
+        d="M0 0h24v24H0z"
+        fill="none"
+      />
+      <path
+        d="M10 6a8 8 0 0011.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0010 6zm-6 6a8 8 0 008 8 8.006 8.006 0 006.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 004 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 00-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 00-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0015.29.836L15.5 0h1l.209.836a2 2 0 001.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 00-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 00-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 001.455-1.455L20.5 5h1l.209.836a2 2 0 001.455 1.455z"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;

components/Icon/index.tsx

@@ -0,0 +1 @@
+export { Icon } from "./Icon";

components/Tile/Tile.tsx

@@ -13,6 +13,7 @@ const Section = styled.section`
 `;
 
 type Props = {
+  /** Header string */
   header: string;
 };