feat: Built stepper form

CHR-onicles · Nov 3, 2023 · a0aab6d · a0aab6d
1 parent dcf477b
commit a0aab6d
Show file tree

Hide file tree

Showing 26 changed files with 465 additions and 631 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
 # Animated Stepper Form
 
-An animated stepper form built with React + TS
+Experimenting with an animated carousel built with a carousel library.
+
+&nbsp;
+
+![Animated form](assets/animated-form.png)
diff --git a/assets/animated-form.png b/assets/animated-form.png
diff --git a/index.html b/index.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Google font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
+      rel="stylesheet" />
     <title>Animated stepper form</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "react-datepicker": "^4.21.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.18.0",
     "react-use": "^17.4.0",
     "styled-components": "^6.1.0"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,24 @@
 import { RouterProvider } from "react-router-dom";
+import { useWindowSize } from "react-use";
+
+import { SmallScreenIndicator } from "@components/SmallScreenIndicator";
 
 import { GlobalStyles } from "@styles/GlobalStyles.styled";
 
 import { router } from "./router";
 
 
 export const App = () => {
+  const { width } = useWindowSize();
+
+  if (width < 768) {
+    return (
+      <>
+        <GlobalStyles />
+        <SmallScreenIndicator />
+      </>
+    );
+  }
   return (
     <>
       <GlobalStyles />

diff --git a/src/assets/black-panther.webp b/src/assets/black-panther.webp
diff --git a/src/assets/icons/rotate-phone.svg b/src/assets/icons/rotate-phone.svg
diff --git a/src/assets/misc/logo-procrea-half.png b/src/assets/misc/logo-procrea-half.png
diff --git a/src/assets/misc/logo-procrea.png b/src/assets/misc/logo-procrea.png
diff --git a/src/assets/misc/logo.png b/src/assets/misc/logo.png
diff --git a/src/components/Button/Button.styled.ts b/src/components/Button/Button.styled.ts
@@ -6,15 +6,19 @@ import { rem } from "@styles/Utilities.styled";
 export const StyledPrimaryButton = styled.button`
   padding: 0.5em 1.5em;
   color: var(--clr-white);
-  background-color: var(--clr-accent);
+  background-color: var(--clr-primary-400);
   font-size: ${rem(15)};
   font-weight: 500;
   border-radius: var(--border-radius-3);
   transition: background-color 0.2s;
 
   &:hover:not(:disabled),
   &:focus:not(:disabled) {
-    background-color: hsl(180, 96%, 35%);
+    background-color: color-mix(
+      in srgb,
+      var(--clr-primary-400) 80%,
+      rgb(255, 255, 255)
+    );
   }
 
   &:disabled {

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -2,18 +2,12 @@ import { StyledPrimaryButton } from "./Button.styled";
 
 
 interface ButtonProps {
-  className?: string;
   children: React.ReactNode;
 }
 
 export const PrimaryButton = ({
   children,
-  className,
   ...rest
 }: ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  return (
-    <StyledPrimaryButton className={className} {...rest}>
-      {children}
-    </StyledPrimaryButton>
-  );
+  return <StyledPrimaryButton {...rest}>{children}</StyledPrimaryButton>;
 };
diff --git a/src/components/CustomDatePicker/index.tsx b/src/components/CustomDatePicker/index.tsx
@@ -21,6 +21,7 @@ interface CustomDatePickerProps {
   placeholder?: string;
   minDate?: Date;
   showYearDropdown?: boolean;
+  required?: boolean;
 }
 
 export const CustomDatePicker = ({
@@ -35,6 +36,7 @@ export const CustomDatePicker = ({
   placeholder,
   minDate = new Date(1900, 0, 1),
   showYearDropdown = false,
+  required = false,
 }: CustomDatePickerProps) => {
   // console.log("[From Date picker]", startDate);
 
@@ -48,6 +50,7 @@ export const CustomDatePicker = ({
       {isInline ? null : <BsCalendar className="calendar-icon" />}
       <DatePicker
         locale={enGB}
+        required={required}
         selected={startDate}
         onChange={date => {
           setStartDate(date!);

diff --git a/src/components/Dropdown/Dropdown.styled.ts b/src/components/Dropdown/Dropdown.styled.ts