Merge pull request #31 from WildCodeSchool/feat-5410-sign_up_step

Add Correction PR
WildCodeSchool · Feb 6, 2025 · e83bc90 · e83bc90
2 parents 19fae6f + f43d236
commit e83bc90
Show file tree

Hide file tree

Showing 56 changed files with 4,086 additions and 520 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,61 +1,62 @@
 {
-	"name": "frontend",
-	"private": true,
-	"version": "0.0.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite",
-		"build": "tsc -b && vite build",
-		"preview": "vite preview",
-		"generate": "graphql-codegen",
-		"lint": "npx @biomejs/biome lint ./ ",
-		"format": "npx @biomejs/biome format ./ --write",
-		"test": "vitest --coverage",
-		"test:e2e": "npx playwright test"
-	},
-	"dependencies": {
-		"@apollo/client": "^3.11.8",
-		"@parcel/watcher": "^2.4.1",
-		"classname": "^0.0.0",
-		"classnames": "^2.5.1",
-		"graphql": "^16.9.0",
-		"i18next": "^23.16.2",
-		"i18next-browser-languagedetector": "^8.0.0",
-		"i18next-xhr-backend": "^3.2.2",
-		"jwt-decode": "^4.0.0",
-		"react": "^18.3.1",
-		"react-dom": "^18.3.1",
-		"react-hook-form": "^7.54.2",
-		"react-i18next": "^15.1.0",
-		"react-router-dom": "^6.27.0",
-		"rollup": "^3.0.0",
-		"swiper": "^11.1.15"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "1.9.4",
-		"@graphql-codegen/cli": "^5.0.2",
-		"@graphql-codegen/client-preset": "^4.3.3",
-		"@playwright/test": "^1.49.1",
-		"@testing-library/dom": "^10.4.0",
-		"@testing-library/jest-dom": "^6.6.2",
-		"@testing-library/react": "^16.0.1",
-		"@testing-library/user-event": "^14.5.2",
-		"@types/classnames": "^2.3.0",
-		"@types/i18next": "^12.1.0",
-		"@types/i18next-browser-languagedetector": "^2.0.2",
-		"@types/i18next-xhr-backend": "^1.4.1",
-		"@types/jest": "^29.5.14",
-		"@types/react": "^18.3.12",
-		"@types/react-dom": "^18.3.0",
-		"@types/react-i18next": "^7.8.3",
-		"@types/react-router-dom": "^5.3.3",
-		"@vitejs/plugin-react": "^4.3.1",
-		"@vitest/coverage-v8": "^2.1.3",
-		"globals": "^15.9.0",
-		"jsdom": "^25.0.1",
-		"sass": "^1.78.0",
-		"typescript": "^5.5.3",
-		"vite": "^5.4.1",
-		"vitest": "^2.1.3"
-	}
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "generate": "graphql-codegen",
+    "lint": "npx @biomejs/biome lint ./ ",
+    "format": "npx @biomejs/biome format ./ --write",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
+    "test:e2e": "npx playwright test"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.11.8",
+    "@parcel/watcher": "^2.4.1",
+    "classname": "^0.0.0",
+    "classnames": "^2.5.1",
+    "graphql": "^16.9.0",
+    "i18next": "^23.16.2",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-xhr-backend": "^3.2.2",
+    "jwt-decode": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.2",
+    "react-i18next": "^15.1.0",
+    "react-router-dom": "^6.27.0",
+    "rollup": "^3.0.0",
+    "swiper": "^11.1.15"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@graphql-codegen/cli": "^5.0.2",
+    "@graphql-codegen/client-preset": "^4.3.3",
+    "@playwright/test": "^1.49.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/classnames": "^2.3.0",
+    "@types/i18next": "^12.1.0",
+    "@types/i18next-browser-languagedetector": "^2.0.2",
+    "@types/i18next-xhr-backend": "^1.4.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-i18next": "^7.8.3",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.3",
+    "globals": "^15.9.0",
+    "jsdom": "^25.0.1",
+    "sass": "^1.78.0",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1",
+    "vitest": "^2.1.3"
+  }
 }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,8 +1,8 @@
 import "./App.css";
-import Landing from "./pages/LandingPage";
+import LandingPage from "@pages/LandingPage";
 
 function App() {
-	return <Landing />;
+  return <LandingPage />;
 }
 
 export default App;
diff --git a/frontend/src/components/atoms/BasicButton/BasicButton.scss b/frontend/src/components/atoms/BasicButton/BasicButton.scss
@@ -1,18 +1,49 @@
 @import "@assets/variables.scss";
 
 .basic-button {
-  @include h2-phone;
-  cursor: pointer;
-  background: $secondary;
-  color: $white;
-  border-radius: 10px;
-  padding: 14px 24px;
-  border: none;
-  width: 300;
-  height: 50;
+  &--basic {
+    @include h2-phone;
+    cursor: pointer;
+    background: $secondary;
+    color: $white;
+    border-radius: 10px;
+    padding: 14px 24px;
+    border: none;
+    width: 300;
+    height: 50;
 
-  &:disabled {
-    opacity: 0.5;
-    border: 1px solid $white;
+    &:disabled {
+      opacity: 0.5;
+      border: 1px solid $white;
+    }
+  }
+
+  &--white {
+    @include h2-phone;
+    cursor: pointer;
+    background: $white;
+    color: $primary;
+    border-radius: 10px;
+    padding: 14px 24px;
+    border: none;
+    width: 300;
+    height: 50;
+
+    &--focus {
+      &:focus {
+        background-color: $tertiary;
+        color: $white;
+      }
+    }
+
+    &:hover {
+      background-color: $tertiary;
+      color: $white;
+    }
+
+    &[aria-pressed="true"] {
+      background-color: $tertiary;
+      color: $white;
+    }
   }
 }
diff --git a/frontend/src/components/atoms/BasicButton/BasicButton.type.ts b/frontend/src/components/atoms/BasicButton/BasicButton.type.ts
@@ -1,5 +1,7 @@
 export interface BasicButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-	children: React.ReactNode;
-	classnames?: string;
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  classnames?: string;
+  typeButton?: "basic" | "white";
+  hasFocus?: boolean;
 }
diff --git a/frontend/src/components/atoms/BasicButton/index.tsx b/frontend/src/components/atoms/BasicButton/index.tsx
@@ -2,14 +2,24 @@ import type { BasicButtonProps } from "./BasicButton.type";
 import "./BasicButton.scss";
 import classNames from "classnames";
 
-function BasicButton({ children, className, ...props }: BasicButtonProps) {
-	const buttonClass = classNames("basic-button", className);
+function BasicButton({
+  children,
+  className,
+  typeButton = "basic",
+  hasFocus,
+  ...props
+}: BasicButtonProps) {
+  const buttonClass = classNames("basic-button", className, {
+    "basic-button--basic": typeButton === "basic",
+    "basic-button--white": typeButton === "white",
+    "basic-button--white--focus": hasFocus,
+  });
 
-	return (
-		<button className={buttonClass} type="button" {...props}>
-			{children}
-		</button>
-	);
+  return (
+    <button className={buttonClass} type="button" {...props}>
+      {children}
+    </button>
+  );
 }
 
 export default BasicButton;
diff --git a/frontend/src/components/atoms/LittleLogo/LittleLogo.type.ts b/frontend/src/components/atoms/LittleLogo/LittleLogo.type.ts
@@ -1,4 +1,4 @@
 export interface LittleLogoProps {
-	hasLabel?: boolean;
-	size?: "mobile" | "giant" | "desktop";
+  hasLabel?: boolean;
+  size?: "mobile" | "giant" | "desktop";
 }
diff --git a/frontend/src/components/atoms/LittleLogo/index.tsx b/frontend/src/components/atoms/LittleLogo/index.tsx
@@ -5,28 +5,28 @@ import logoMobile from "@assets/icons/mobile-logo.svg";
 import type { LittleLogoProps } from "./LittleLogo.type";
 
 function LittleLogo({ hasLabel = false, size = "desktop" }: LittleLogoProps) {
-	const littleLogoClassName = classNames("little-logo", {
-		"little-logo--mobile": size === "mobile",
-		"little-logo--giant": size === "giant",
-		"little-logo--desktop": size === "desktop",
-	});
+  const littleLogoClassName = classNames("little-logo", {
+    "little-logo--mobile": size === "mobile",
+    "little-logo--giant": size === "giant",
+    "little-logo--desktop": size === "desktop",
+  });
 
-	const littleLogoTitleClassName = classNames("little-logo__title", {
-		"little-logo__title--mobile": size === "mobile",
-		"little-logo__title--giant": size === "giant",
-		"little-logo__title--desktop": size === "desktop",
-	});
+  const littleLogoTitleClassName = classNames("little-logo__title", {
+    "little-logo__title--mobile": size === "mobile",
+    "little-logo__title--giant": size === "giant",
+    "little-logo__title--desktop": size === "desktop",
+  });
 
-	return (
-		<div className={littleLogoClassName}>
-			<img
-				className="little-logo__img"
-				src={logoMobile}
-				alt="Logo Pulse Form"
-			/>
-			{hasLabel && <p className={littleLogoTitleClassName}>{"Pulse Form"}</p>}
-		</div>
-	);
+  return (
+    <div className={littleLogoClassName}>
+      <img
+        className="little-logo__img"
+        src={logoMobile}
+        alt="Logo Pulse Form"
+      />
+      {hasLabel && <p className={littleLogoTitleClassName}>{"Pulse Form"}</p>}
+    </div>
+  );
 }
 
 export default LittleLogo;
diff --git a/frontend/src/components/atoms/WhiteButton/WhiteButton.scss b/frontend/src/components/atoms/WhiteButton/WhiteButton.scss
diff --git a/frontend/src/components/atoms/WhiteButton/WhiteButton.type.ts b/frontend/src/components/atoms/WhiteButton/WhiteButton.type.ts
diff --git a/frontend/src/components/atoms/WhiteButton/index.tsx b/frontend/src/components/atoms/WhiteButton/index.tsx
diff --git a/frontend/src/components/molecules/BodyStepQuestions/BodyStepQuestions.type.ts b/frontend/src/components/molecules/BodyStepQuestions/BodyStepQuestions.type.ts
@@ -1,9 +1,9 @@
 import type { MouseEventHandler } from "react";
 
 export interface BodyStepQuestionsProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-	children: React.ReactNode;
-	ctaExit: MouseEventHandler<HTMLButtonElement>;
-	questionLabel: string;
-	isDesktopView?: boolean;
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  ctaExit: MouseEventHandler<HTMLButtonElement>;
+  questionLabel: string;
+  isDesktopView?: boolean;
 }
diff --git a/...onents/ExitSignUpStep/ExitSignUpStep.scss → ...ecules/ExitSignUpStep/ExitSignUpStep.scss b/...onents/ExitSignUpStep/ExitSignUpStep.scss → ...ecules/ExitSignUpStep/ExitSignUpStep.scss
diff --git a/...nts/ExitSignUpStep/ExitSignUpStep.type.ts → ...les/ExitSignUpStep/ExitSignUpStep.type.ts b/...nts/ExitSignUpStep/ExitSignUpStep.type.ts → ...les/ExitSignUpStep/ExitSignUpStep.type.ts
@@ -1,3 +1,3 @@
 export interface ExitSignUpStepProps {
   isCompleted?: boolean;
-}
+}
diff --git a/...ignUp/components/ExitSignUpStep/index.tsx → ...onents/molecules/ExitSignUpStep/index.tsx b/...ignUp/components/ExitSignUpStep/index.tsx → ...onents/molecules/ExitSignUpStep/index.tsx
@@ -1,6 +1,8 @@
-import blobMenGirl from "@assets/images/blob-men-girl.svg";
-import BasicButton from "@components/atoms/BasicButton";
 import { useTranslation } from "react-i18next";
+
+import BasicButton from "@components/atoms/BasicButton";
+
+import blobMenGirl from "@assets/images/blob-men-girl.svg";
 import "./ExitSignUpStep.scss";
 import type { ExitSignUpStepProps } from "./ExitSignUpStep.type";
 

diff --git a/...p/components/SignUpStep4/SignUpStep4.scss → ...es/FitnessGoalsView/FitnessGoalsView.scss b/...p/components/SignUpStep4/SignUpStep4.scss → ...es/FitnessGoalsView/FitnessGoalsView.scss
@@ -1,6 +1,6 @@
 @import "@assets/variables.scss";
 
-.sign-up-step-4 {
+.fitness-goals-view {
   height: 100vh;
 
   &__container {