Input component

README.md

@@ -90,3 +90,7 @@
 ### IconButton component
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/18)
+
+### IconButton component
+
+[pull request](https://github.com/nickovchinnikov/coursesbox/pull/19)

components/Icon/Icon.tsx

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

components/Icon/Icons.tsx

@@ -65,4 +65,19 @@ const Settings = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export const Icons = { User, Moon, Sun, Home, Settings };
+const Search = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="64 64 896 896"
+    focusable="false"
+    data-icon="search"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+  </svg>
+);
+
+export const Icons = { User, Moon, Sun, Home, Settings, Search };

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

@@ -2,24 +2,22 @@
 
 exports[`Icon test cases Icon render check 1`] = `
 <DocumentFragment>
-  <div
-    class="css-14g5jgk"
-    size="2"
+  <svg
+    aria-label="Moon"
+    class="css-z3g3v6"
+    fill="currentColor"
+    height="2rem"
+    role="img"
+    viewBox="0 0 24 24"
+    width="2rem"
   >
-    <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>
+    <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>
 </DocumentFragment>
 `;

components/Icon/index.ts

@@ -1 +1 @@
-export { Icon, type Props } from "./Icon";
+export { Icon, type Props, type AvailableIcons } from "./Icon";

components/IconButton/__snapshots__/IconButton.test.tsx.snap

@@ -6,21 +6,19 @@ exports[`IconButton test cases Render check 1`] = `
     class="css-1d1ch75"
     title="Home"
   >
-    <div
-      class="css-14g5jgk"
-      size="2"
+    <svg
+      aria-label="Home"
+      class="css-z3g3v6"
+      fill="currentColor"
+      height="2rem"
+      role="img"
+      viewBox="0 0 24 24"
+      width="2rem"
     >
-      <svg
-        fill="currentColor"
-        height="2rem"
-        viewBox="0 0 24 24"
-        width="2rem"
-      >
-        <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>
-    </div>
+      <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>
   </button>
 </DocumentFragment>
 `;

components/Input/Feedback/Feedback.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentStoryObj, ComponentMeta } from "@storybook/react";
+import { expect } from "@storybook/jest";
+import { screen } from "@storybook/testing-library";
+
+import { Feedback } from "./Feedback";
+
+export default {
+  title: "Controls/Feedback",
+  component: Feedback,
+} as ComponentMeta<typeof Feedback>;
+
+export const ValidFeedback: ComponentStoryObj<typeof Feedback> = {
+  play: async () => {
+    await expect(screen.getByText("Looks good!")).toBeInTheDocument();
+  },
+};
+ValidFeedback.args = {
+  children: "Looks good!",
+  isValid: true,
+};
+
+export const InvalidFeedback: ComponentStoryObj<typeof Feedback> = {
+  play: async () => {
+    await expect(
+      screen.getByText("Please provide a valid value")
+    ).toBeInTheDocument();
+  },
+};
+InvalidFeedback.args = {
+  children: "Please provide a valid value",
+  isValid: false,
+};

components/Input/Feedback/Feedback.test.tsx

@@ -0,0 +1,18 @@
+import { render } from "@/test-utils";
+
+import { Feedback } from "./Feedback";
+
+describe("Feedback test cases", () => {
+  it("Render check for valid", () => {
+    const { asFragment } = render(<Feedback isValid>Looks good!</Feedback>);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("Render check for invalid", () => {
+    const { asFragment } = render(
+      <Feedback>Please provide a valid value</Feedback>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

components/Input/Feedback/Feedback.tsx

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+
+type Props = {
+  isValid?: boolean;
+};
+
+export const Feedback = styled.span<Props>`
+  color: ${({ isValid, theme }) =>
+    isValid ? theme.font.valid : theme.font.invalid};
+`;

components/Input/Feedback/__snapshots__/Feedback.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Feedback test cases Render check for invalid 1`] = `
+<DocumentFragment>
+  <span
+    class="css-sk8pyf"
+  >
+    Please provide a valid value
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Feedback test cases Render check for valid 1`] = `
+<DocumentFragment>
+  <span
+    class="css-3xrj9w"
+  >
+    Looks good!
+  </span>
+</DocumentFragment>
+`;

components/Input/Feedback/index.ts

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

components/Input/Input.stories.tsx

@@ -0,0 +1,53 @@
+import { ComponentStoryObj, ComponentMeta } from "@storybook/react";
+import { expect } from "@storybook/jest";
+import { screen, userEvent } from "@storybook/testing-library";
+
+import { Input } from "./Input";
+import { Feedback } from "./Feedback";
+
+export default {
+  title: "Controls/Input",
+  component: Input,
+  args: {
+    placeholder: "Your name",
+    label: "Name:",
+  },
+} as ComponentMeta<typeof Input>;
+
+export const PrimaryInput: ComponentStoryObj<typeof Input> = {
+  play: async ({ args }) => {
+    await userEvent.type(screen.getByRole("textbox"), "String");
+    await expect(args.onChange).toHaveBeenCalledTimes(6);
+  },
+  args: {
+    feedback: "Looks cool!",
+  },
+};
+
+export const WithIcon: ComponentStoryObj<typeof Input> = {
+  args: {
+    icon: "Search",
+  },
+};
+
+export const WithValidFeedback: ComponentStoryObj<typeof Input> = {
+  args: {
+    feedback: <Feedback isValid={true}>Looks good!</Feedback>,
+  },
+  argTypes: {
+    feedback: {
+      control: false,
+    },
+  },
+};
+
+export const WithInvalidFeedback: ComponentStoryObj<typeof Input> = {
+  args: {
+    feedback: <Feedback isValid={false}>Required!</Feedback>,
+  },
+  argTypes: {
+    feedback: {
+      control: false,
+    },
+  },
+};

components/Input/Input.test.tsx

@@ -0,0 +1,45 @@
+import { ChangeEventHandler } from "react";
+import userEvent from "@testing-library/user-event";
+
+import { render, screen } from "@/test-utils";
+
+import { Input } from "./Input";
+
+describe("Input test cases", () => {
+  it("Render check", () => {
+    const onChange = jest.fn();
+    const { asFragment } = render(
+      <Input
+        onChange={onChange as unknown as ChangeEventHandler<HTMLInputElement>}
+        label="Label"
+        placeholder="Plaiceholder"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("Render check with icon", () => {
+    const onChange = jest.fn();
+    const { asFragment } = render(
+      <Input
+        onChange={onChange as unknown as ChangeEventHandler<HTMLInputElement>}
+        icon="Search"
+        label="Label"
+        placeholder="Plaiceholder"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("Check onChange callback", () => {
+    const onChange = jest.fn();
+    render(
+      <Input
+        onChange={onChange as unknown as ChangeEventHandler<HTMLInputElement>}
+        label="Label"
+        placeholder="Plaiceholder"
+      />
+    );
+    const element = screen.getByRole("textbox");
+    userEvent.type(element, "String");
+    expect(onChange).toHaveBeenCalledTimes(6);
+  });
+});