feat: add NewsletterForm component to design system (open-sauced#1311)

components/atoms/TextInput/text-input.tsx

@@ -44,8 +44,8 @@ const TextInput = ({
 
   return (
     <>
-      <label className="flex w-full flex-col">
-        {label && <p className="mb-2 text-light-slate-9 text-sm">{label}</p>}
+      <label className="flex flex-col w-full">
+        {label && <p className="mb-2 text-sm text-light-slate-9">{label}</p>}
         <div
           className={clsx(
             "flex-1 px-3 text-light-slate-12 bg-white shadow-input border transition rounded-lg py-1 flex items-center",
@@ -72,10 +72,16 @@ const TextInput = ({
           {!disabled && (
             <>
               {state === "valid" ? (
-                <CheckCircleFillIcon className="text-light-orange-9" size={14} />
+                <CheckCircleFillIcon className="text-light-orange-9" size={12} />
               ) : !!value ? (
-                <span className="flex items-center" onClick={handleResetInput}>
-                  <XCircleFillIcon className="text-light-red-11" size={14} />
+                <span title="Clear input" className="flex items-center" onClick={handleResetInput}>
+                  <XCircleFillIcon
+                    className={clsx(
+                      state === "invalid" && errorMsg ? "text-light-red-11" : "text-light-slate-8",
+                      "cursor-pointer"
+                    )}
+                    size={12}
+                  />
                 </span>
               ) : (
                 ""
@@ -84,8 +90,8 @@ const TextInput = ({
           )}
         </div>
       </label>
-      {descriptionText ? <p className="mt-2 text-light-slate-9 text-sm">{descriptionText}</p> : ""}
-      {state === "invalid" && errorMsg ? <p className="mt-3 text-sm text-light-red-11  ">{errorMsg}</p> : ""}
+      {descriptionText ? <p className="mt-2 text-sm text-light-slate-9">{descriptionText}</p> : ""}
+      {state === "invalid" && errorMsg ? <p className="mt-3 text-sm text-light-red-11 ">{errorMsg}</p> : ""}
     </>
   );
 };

components/molecules/NewsletterForm/newsletter-form.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import { AiFillCloseCircle } from "react-icons/ai";
+import Button from "components/atoms/Button/button";
+import TextInput from "components/atoms/TextInput/text-input";
+import SaucedLogo from "img/fallbackImageColor.svg";
+import { validateEmail } from "lib/utils/validate-email";
+
+const NewsletterForm = () => {
+  const [loading, setLoading] = useState(false);
+  const [email, setEmail] = useState("");
+  const [isValidEmail, setIsValidEmail] = useState(false);
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!isValidEmail) {
+      setErrorMsg("Please enter a valid email");
+      return;
+    }
+
+    setLoading(true);
+
+    // TODO: Add API call to subscribe user
+    setTimeout(() => {
+      setLoading(false);
+      setIsSubscribed(true);
+    }, 3000);
+  };
+
+  const handleChange = (value: string) => {
+    setEmail(value);
+    const isValidEmail = validateEmail(email);
+    setIsValidEmail(!!isValidEmail);
+  };
+
+  useEffect(() => {
+    if (isValidEmail) {
+      setErrorMsg("");
+    }
+  }, [isValidEmail]);
+  return (
+    <>
+      {isSubscribed ? (
+        <div className="flex items-center justify-center gap-3 px-4 py-6 border rounded-lg h-44 bg-light-slate-1 w-80">
+          <div className="text-2xl text-center ">
+            <Image className="mx-auto" src={SaucedLogo} alt="Sauced Logo" />
+            <p>You’re Subscribed!</p>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3 px-4 py-6 border rounded-lg w-max">
+          <div className="w-64 space-y-1">
+            <h2 className="text-lg">Subscribe to our newsletter</h2>
+            <p className="text-sm text-light-slate-11">Stay up to date with the latest OpenSauced news and trends!</p>
+          </div>
+          <form className="w-full" onSubmit={handleSubmit}>
+            <div className="flex items-center justify-between gap-1 ">
+              <TextInput
+                handleChange={(value) => handleChange(value)}
+                state={isValidEmail ? "valid" : "invalid"}
+                value={email}
+                className="w-32 text-sm focus:outline-none"
+                type="text"
+                placeholder="Email"
+              />
+              <Button
+                loading={loading}
+                className="inline-block py-1 border-light-orange-7 text-light-orange-10"
+                type="submit"
+                variant="text"
+              >
+                Subscribe
+              </Button>
+            </div>
+            {errorMsg && (
+              <p className="flex items-center gap-1 mt-2 text-xs font-light text-red-500">
+                <AiFillCloseCircle onClick={() => setErrorMsg("")} className="text-sm cursor-pointer" /> {errorMsg}
+              </p>
+            )}
+          </form>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default NewsletterForm;

stories/atoms/scroll-area.stories.tsx

@@ -10,7 +10,7 @@ const storyConfig = {
 
 export default storyConfig;
 const ScrollTemplate: ComponentStory<typeof ScrollArea> = (args) => (
-  <ScrollArea className="rounded-md border p-4" {...args}>
+  <ScrollArea className="p-4 border rounded-md" {...args}>
     Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the
     king&apos;s pillow, in his soup, even in the royal toilet. The king was furious, but he couldn&apos;t seem to stop
     Jokester. And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that

stories/molecules/newsletter-form.stories.tsx

@@ -0,0 +1,12 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import NewsletterForm from "components/molecules/NewsletterForm/newsletter-form";
+
+const storyConfig = {
+  title: "Design System/Molecules/NewsletterForm",
+} as ComponentMeta<typeof NewsletterForm>;
+
+export default storyConfig;
+
+const NewsletterFormTemplate: ComponentStory<typeof NewsletterForm> = (args) => <NewsletterForm />;
+
+export const Default = NewsletterFormTemplate.bind({});