From 8b9ae50c689c8d74371ff9da01e801ff7f413fc4 Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Thu, 21 Dec 2023 23:38:01 +0100
Subject: [PATCH] Create shared form components

---
 src/assets/variables.css                  |   4 +
 src/components/Shared/Fieldset.vue        |  16 ++++
 src/components/Shared/Selectfield.vue     |  75 ++++++++++++++++
 src/components/Shared/Textfield.vue       |  72 +++++++++++++++
 src/components/company/CaseStudyForm.vue  | 105 ++++------------------
 src/components/contributor/Newsletter.vue |  33 ++-----
 src/components/home/ContactForm.vue       |  78 +++-------------
 7 files changed, 200 insertions(+), 183 deletions(-)
 create mode 100644 src/components/Shared/Fieldset.vue
 create mode 100644 src/components/Shared/Selectfield.vue
 create mode 100644 src/components/Shared/Textfield.vue

diff --git a/src/assets/variables.css b/src/assets/variables.css
index 5c72218..6885635 100644
--- a/src/assets/variables.css
+++ b/src/assets/variables.css
@@ -1,3 +1,7 @@
 :root {
+    --color-primary: #355086;
+    --color-primary-lighter: hsl(220, 43%, 65%);
+    --color-primary-focus-ring: hsl(220, 43%, 37%, 20%);
+    --color-secondary: #57c18b;
     --color-on-surface: #022826;
 }
diff --git a/src/components/Shared/Fieldset.vue b/src/components/Shared/Fieldset.vue
new file mode 100644
index 0000000..0ace7c5
--- /dev/null
+++ b/src/components/Shared/Fieldset.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="app-fieldset">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-fieldset {
+  display: grid;
+  gap: 1rem;
+
+  @media (min-width: 796px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/src/components/Shared/Selectfield.vue b/src/components/Shared/Selectfield.vue
new file mode 100644
index 0000000..37bb6f6
--- /dev/null
+++ b/src/components/Shared/Selectfield.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+defineEmits(['update:modelValue'])
+defineOptions({inheritAttrs: false})
+defineProps<{ id: string; label: string; modelValue: string; items: string[] }>()
+</script>
+
+<template>
+  <div class="app-selectfield">
+    <label :for="id">{{ label }}</label>
+    <div class="container">
+      <select
+          :value="modelValue"
+          @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+          :id="id"
+          v-bind="$attrs"
+      >
+        <option v-for="item in items" :key="item">{{ item }}</option>
+      </select>
+      <svg viewBox="0 0 16 16" fill="currentColor">
+        <path
+            d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+            fill-rule="evenodd"></path>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-selectfield {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  & > label {
+    color: var(--color-primary);
+    font-size: 18px;
+    font-weight: 900;
+    cursor: pointer;
+  }
+
+  & > .container {
+    position: relative;
+    height: 56px;
+    background-color: white;
+    border-radius: 0.25rem;
+    border: solid 1px #d8dae5;
+    transition: box-shadow .08s ease-in-out;
+    overflow: hidden;
+
+    & > select {
+      background: none;
+      appearance: none;
+      border: none;
+      outline: none;
+      width: 100%;
+      padding: 1rem 3rem 1rem 1rem;
+      font-size: 18px;
+    }
+
+    & > svg {
+      position: absolute;
+      right: 1rem;
+      top: 1rem;
+      width: 24px;
+      height: 24px;
+      color: var(--color-primary);
+    }
+
+    &:focus, &:focus-within {
+      border-color: var(--color-primary-lighter);
+      box-shadow: var(--color-primary-focus-ring) 0 0 0 3px;
+    }
+  }
+}
+</style>
diff --git a/src/components/Shared/Textfield.vue b/src/components/Shared/Textfield.vue
new file mode 100644
index 0000000..2c8782e
--- /dev/null
+++ b/src/components/Shared/Textfield.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+defineEmits(['update:modelValue'])
+defineOptions({ inheritAttrs: false })
+withDefaults(
+    defineProps<{ id: string; label: string; modelValue: string; type?: string; centered?: boolean }>(),
+    { type: 'text', centered: false }
+)
+</script>
+
+<template>
+  <div class="app-textfield">
+    <label :for="id" :class="centered ? 'centered' : ''">{{ label }}</label>
+    <input
+        v-if="type !== 'textarea'"
+        :value="modelValue"
+        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        :type="type"
+        :id="id"
+        v-bind="$attrs"
+    />
+    <textarea
+        v-else
+        :value="modelValue"
+        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        :id="id"
+        v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+.app-textfield {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  & > label {
+    color: var(--color-primary);
+    font-size: 18px;
+    font-weight: 900;
+    cursor: pointer;
+
+    &.centered {
+      text-align: center;
+    }
+  }
+
+  & > input,
+  & > textarea {
+    appearance: none;
+    height: 56px;
+    background-color: white;
+    padding: 1rem;
+    border-radius: 0.25rem;
+    border: solid 1px #d8dae5;
+    font-size: 18px;
+    font-weight: 500;
+    outline: none;
+    transition: box-shadow .08s ease-in-out;
+
+    &:focus, &:focus-within {
+      border-color: var(--color-primary-lighter);
+      box-shadow: var(--color-primary-focus-ring) 0 0 0 3px;
+    }
+  }
+
+  & > textarea {
+    height: 135px;
+    resize: none;
+  }
+}
+</style>
diff --git a/src/components/company/CaseStudyForm.vue b/src/components/company/CaseStudyForm.vue
index 5a8d9cc..25159e6 100644
--- a/src/components/company/CaseStudyForm.vue
+++ b/src/components/company/CaseStudyForm.vue
@@ -1,46 +1,22 @@
 <template>
   <form @submit.prevent="submitForm" aria-label="Formulaire de contact">
-    <div class="form-fieldset">
-      <div class="form-field">
-        <label class="text-label" for="lastname">Nom :</label>
-        <input v-model="lastname" class="input" type="text" id="lastname" autocomplete="family-name"/>
-      </div>
-      <div class="form-field">
-        <label class="text-label" for="firstname">Prénom :</label>
-        <input v-model="firstname" class="input" type="text" id="firstname" autocomplete="given-name"/>
-      </div>
-    </div>
-
-    <div class="form-field">
-      <label class="text-label" for="company">Organisation :</label>
-      <input v-model="company" class="input" type="text" id="company" autocomplete="organization"/>
-    </div>
+    <Fieldset>
+      <Textfield id="lastname" v-model="lastname" label="Nom :" autocomplete="family-name"/>
+      <Textfield id="firstname" v-model="firstname" label="Prénom :" autocomplete="given-name"/>
+    </Fieldset>
 
-    <div class="form-field">
-      <label class="text-label" for="role">Rôle :</label>
-      <input v-model="role" class="input" type="text" id="role" autocomplete="organization-title"/>
-    </div>
+    <Textfield id="company" v-model="company" label="Organisation :" autocomplete="organization"/>
+    <Textfield id="role" v-model="role" label="Rôle :" autocomplete="organization-title"/>
 
-    <div class="form-fieldset">
-      <div class="form-field">
-        <label class="text-label" for="phone">Téléphone :</label>
-        <input v-model="phone" class="input" type="tel" id="phone" autocomplete="tel"/>
-      </div>
-      <div class="form-field">
-        <label class="text-label" for="email">E-mail * :</label>
-        <input v-model="email" required class="input" type="email" id="email" autocomplete="email"/>
-      </div>
-    </div>
+    <Fieldset>
+      <Textfield id="email" v-model="email" type="email" label="E-mail * :" autocomplete="email"/>
+      <Textfield id="phone" v-model="phone" type="tel" label="Téléphone :" autocomplete="tel"/>
+    </Fieldset>
 
-    <div class="form-field">
-      <label class="text-label" for="message">Votre besoin :</label>
-      <textarea v-model="message" id="message"></textarea>
-    </div>
+    <Textfield id="message" type="textarea" v-model="message" label="Votre besoin :"/>
 
-    <div class="hcaptcha">
-      <vue-hcaptcha @verify="getCaptcha" sitekey="359a430d-a0bf-4548-a583-959e93110b6d"
-                    aria-label="Rendez vous sur https://www.hcaptcha.com/accessibility pour obtenir un passe-droit accessible"/>
-    </div>
+    <vue-hcaptcha @verify="getCaptcha" sitekey="359a430d-a0bf-4548-a583-959e93110b6d"
+                  aria-label="Rendez vous sur https://www.hcaptcha.com/accessibility pour obtenir un passe-droit accessible"/>
 
     <div class="form-submit">
       <div class="error-message" v-if="error" aria-live="assertive">{{ error }}</div>
@@ -57,6 +33,8 @@ import { ref } from 'vue';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import ButtonBlock from '@/components/global/Button.vue';
 import { post } from '@/util/fetch';
+import Textfield from "@/components/Shared/Textfield.vue";
+import Fieldset from "@/components/Shared/Fieldset.vue";
 
 /**
  * Validates an email address to ensure it is not empty and follows a valid email format.
@@ -179,60 +157,9 @@ form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  margin-top: 1rem;
-}
-
-.text-label {
-  color: #355086;
-  font-size: 18px;
-  font-weight: 900;
-  outline: none;
-}
 
-.form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.form-fieldset {
-  display: grid;
-  gap: 1rem;
-}
-
-@media (min-width: 796px) {
-  form {
+  @media (min-width: 796px) {
     width: 768px;
   }
-
-  .form-fieldset {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.input {
-  height: 60px;
-  background-color: #ffffff;
-  padding: 1rem;
-  border-radius: 8px;
-  border: solid 1px rgba(0, 0, 0, 0.2);
-  color: #022826;
-  font-size: 18px;
-  font-weight: 500;
-  outline: none;
-}
-
-textarea {
-  width: 100%;
-  height: 135px;
-  background-color: #ffffff;
-  padding: 1rem;
-  border-radius: 8px;
-  border: solid 1px rgba(0, 0, 0, 0.2);
-  color: #022826;
-  font-size: 18px;
-  font-weight: 500;
-  outline: none;
-  resize: none;
 }
 </style>
diff --git a/src/components/contributor/Newsletter.vue b/src/components/contributor/Newsletter.vue
index fe51b9d..65962dc 100644
--- a/src/components/contributor/Newsletter.vue
+++ b/src/components/contributor/Newsletter.vue
@@ -3,9 +3,8 @@
     <span class="title">Rejoins ecoCode !</span>
     <span class="subtitle">Rejoins-nous et contribue à faire du numérique un domaine plus durable.</span>
 
-    <div class="form-field">
-      <label class="text-input" for="email">E-mail * :</label>
-      <input v-model="email" id="email" type="email" autocomplete="email"/>
+    <div class="text-field">
+      <Textfield id="email" v-model="email" type="email" label="E-mail * :" autocomplete="email" centered/>
     </div>
 
     <div style="margin-top: 15px;">
@@ -30,6 +29,7 @@ import { ref } from 'vue';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import ButtonBlock from '@/components/global/Button.vue';
 import { post } from '@/util/fetch';
+import Textfield from "@/components/Shared/Textfield.vue";
 
 const validateEmail = () => {
   const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
@@ -115,33 +115,10 @@ form {
     max-width: 779px;
 }
 
-.form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 320px;
+.text-field {
   margin: 3rem 1rem 0;
+  width: 320px;
   max-width: 100%;
-
-  label {
-    color: #355086;
-    font-size: 18px;
-    font-weight: 900;
-    outline: none;
-    text-align: center;
-  }
-
-  input {
-    height: 60px;
-    background-color: #ffffff;
-    padding: 1rem;
-    border-radius: 8px;
-    border: solid 1px rgba(0, 0, 0, 0.2);
-    color: #022826;
-    font-size: 18px;
-    font-weight: 500;
-    outline: none;
-  }
 }
 
 .join-us {
diff --git a/src/components/home/ContactForm.vue b/src/components/home/ContactForm.vue
index 1c8056e..eb9caea 100644
--- a/src/components/home/ContactForm.vue
+++ b/src/components/home/ContactForm.vue
@@ -15,33 +15,16 @@
         </div>
       </div>
 
-      <div class="form-field">
-        <label for="subject" class="text-label">Je souhaite :</label>
-        <select v-model="subject" id="subject" aria-label="Sélectionnez votre sujet">
-          <option v-for="option in options" :key="option">{{ option }}</option>
-        </select>
-      </div>
+      <Selectfield id="subject" v-model="subject" label="Je souhaite :" :items="options"/>
 
-      <div class="form-field">
-        <label class="text-label" for="entity-name">Nom de l’entreprise / Personne :</label>
-        <input class="input" v-model="name" type="text" id="entity-name"/>
-      </div>
+      <Textfield id="entity-name" v-model="name" label="Nom de l’entreprise / Personne"/>
 
-      <div class="form-fieldset">
-        <div class="form-field">
-          <label class="text-label" for="email">E-mail * :</label>
-          <input class="input" required v-model="email" type="email" id="email" autocomplete="email"/>
-        </div>
-        <div class="form-field">
-          <label class="text-label" for="phone">Téléphone :</label>
-          <input class="input" v-model="phone" type="tel" id="phone" autocomplete="tel"/>
-        </div>
-      </div>
+      <Fieldset>
+        <Textfield id="email" v-model="email" type="email" label="E-mail * :" required autocomplete="email"/>
+        <Textfield id="phone" v-model="phone" type="tel" label="Téléphone :" autocomplete="tel"/>
+      </Fieldset>
 
-      <div class="form-field">
-        <label class="text-label" for="message">Des éléments supplémentaires ?</label>
-        <input class="input" v-model="message" type="text" id="message"/>
-      </div>
+      <Textfield id="message" v-model="message" label="Des éléments supplémentaires ?"/>
 
       <div class="hcaptcha">
         <vue-hcaptcha @verify="getCaptcha" sitekey="359a430d-a0bf-4548-a583-959e93110b6d"
@@ -63,6 +46,9 @@ import { ref, watch } from 'vue';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import { post } from '@/util/fetch';
 import ButtonBlock from "@/components/global/Button.vue";
+import Textfield from "@/components/Shared/Textfield.vue";
+import Fieldset from "@/components/Shared/Fieldset.vue";
+import Selectfield from "@/components/Shared/Selectfield.vue";
 
 let captcha = ref("");
 const error = ref("");
@@ -244,31 +230,12 @@ form {
   gap: 0.5rem;
 }
 
-.form-fieldset {
-  display: grid;
-  gap: 1rem;
-}
-
 .radio-field {
   display: flex;
   gap: 1rem;
   margin-block-end: 0.5rem;
 }
 
-select {
-  width: 100%;
-  padding: 1rem 3.5rem 1rem 1rem;
-  border-radius: 8px;
-  border: solid 1px rgba(0, 0, 0, 0.2);
-  font-size: 18px;
-  color: #022826;
-  appearance: none;
-  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
-  background-repeat: no-repeat;
-  background-position: right 30px top 50%;
-  background-size: 0.65rem auto;
-}
-
 label {
   cursor: pointer;
 }
@@ -287,32 +254,15 @@ input[type="radio"] {
   border-radius: 50%;
   font-size: 18px;
   font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.56;
-  letter-spacing: 0.21px;
-  color: #022826;
 
   &:checked {
     width: 20px;
     height: 20px;
-    border: 2px solid #57c18b;
-    background-color: #57c18b;
+    border: 2px solid var(--color-secondary);
+    background-color: var(--color-secondary);
   }
 }
 
-.input {
-  height: 60px;
-  background-color: #ffffff;
-  padding: 1rem;
-  border-radius: 8px;
-  border: solid 1px rgba(0, 0, 0, 0.2);
-  color: #022826;
-  font-size: 18px;
-  font-weight: 500;
-  outline: none;
-}
-
 .form-submit {
   display: flex;
   flex-direction: column;
@@ -328,9 +278,5 @@ input[type="radio"] {
   form {
     width: 768px;
   }
-
-  .form-fieldset {
-    grid-template-columns: repeat(2, 1fr);
-  }
 }
 </style>