Merge pull request #5 from IvanRuskevych/Ruskevych/InputAnnotation

feat: InputAnnotation component & stories

src/App.tsx

@@ -1,11 +1,19 @@
+import { InputAnnotation, InputLabel } from "./shared/ui";
 import "./App.css";
-import { ThemeStyles } from "./shared/styles/Theme/Theme.tsx";
-import { InputLabel } from "./shared/ui/InputLabel/InputLabel.tsx";
+import { ThemeStyles } from "./shared/styles";
 
 function App() {
   return (
     <ThemeStyles theme={"light"}>
       <InputLabel label={"Email"} required={true} infoIcon={true} />
+      <InputAnnotation
+        text={"This is a hint text to help user."}
+        textOptions={"description"}
+      />
+      <InputAnnotation
+        text={"This is a hint text to help user."}
+        textOptions={"error"}
+      />
     </ThemeStyles>
   );
 }

src/shared/styles/Theme/Theme.tsx

@@ -6,16 +6,16 @@ import { GlobalStyles } from "../global.styles.ts";
 export const lightTheme = {
   colors: {
     textPrimary: "#1a1a1e",
+    textSecondary: "#51525c",
     error: "#D92D20",
-    secondary: "#000000",
   },
 };
 
 export const darkTheme = {
   colors: {
     textPrimary: "#FAFAFA",
-    error: "#D92D20",
-    secondary: "#ffffff",
+    textSecondary: "#A0A0AB",
+    error: "#F97066",
   },
 };
 

src/shared/types/InputAnnotation.types.ts

@@ -0,0 +1,6 @@
+export type textOptionsType = "description" | "error";
+
+export interface InputAnnotationProps {
+  text: string;
+  textOptions: textOptionsType;
+}

src/shared/types/index.ts

@@ -1,2 +1,3 @@
 export * from "./Theme.types.ts";
 export * from "./InputLabel.types.ts";
+export * from "./InputAnnotation.types.ts";

src/shared/ui/InputAnnotation/InputAnnotation.styles.ts

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const StyledParagraph = styled.p<{
+  textOptions: "description" | "error";
+}>`
+  color: ${({ textOptions, theme }) =>
+    textOptions === "description"
+      ? theme.colors.textSecondary
+      : theme.colors.error};
+
+  /* Text xxs/Regular */
+  font-family: Inter, sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 166.667% */
+`;

src/shared/ui/InputAnnotation/InputAnnotation.tsx

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { StyledParagraph } from "./InputAnnotation.styles.ts";
+import { InputAnnotationProps } from "../../types";
+
+export const InputAnnotation: FC<InputAnnotationProps> = ({
+  text,
+  textOptions,
+}) => {
+  return <StyledParagraph textOptions={textOptions}>{text}</StyledParagraph>;
+};

src/shared/ui/index.ts

@@ -1 +1,2 @@
 export * from "./InputLabel/InputLabel.tsx";
+export * from "./InputAnnotation/InputAnnotation.tsx";

src/stories/InputAnnotation.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { ThemeProvider } from "styled-components";
+
+import { InputAnnotationProps } from "../shared/types";
+import { InputAnnotation } from "../shared/ui";
+import { darkTheme, lightTheme } from "../shared/styles";
+
+const meta: Meta = {
+  title: "Components/InputAnnotation",
+  component: InputAnnotation,
+  argTypes: {
+    text: { control: "text" },
+    textOptions: { control: "radio", options: ["description", "error"] },
+    theme: { control: "radio", options: ["light", "dark"] },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<InputAnnotationProps & { theme: "light" | "dark" }> = (
+  args,
+) => {
+  const selectedTheme = args.theme === "light" ? lightTheme : darkTheme;
+
+  return (
+    <ThemeProvider theme={selectedTheme}>
+      <InputAnnotation {...args} />
+    </ThemeProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  text: "This is a hint text to help user.",
+  textOptions: "description",
+  theme: "light",
+};

src/stories/InputLabel.stories.tsx

@@ -37,11 +37,3 @@ Default.args = {
   infoIcon: true,
   theme: "light",
 };
-
-// export const DarkTheme = Template.bind({});
-// DarkTheme.args = {
-//   label: "Email",
-//   required: true,
-//   infoIcon: true,
-//   theme: "dark",
-// };