Merge pull request #14 from betagouv/integration

Intégration statique de l'ensemble des pages du produit minimal et de son architecture, ainsi que de ses éléments visuels

CHANGELOG.md

@@ -1,4 +1,15 @@
 # CHANGELOG
+## 0.2.0 [#14](https://github.com/betagouv/aides-simulateur-front/pull/14)
+
+* Ajout de fonctionnalité.
+* Détail :
+  * Création du fond dynamique qui signe l'identité d'aides-simplifiées
+    * Pour permettre l'utilisation de plusieurs fonds en fonction de la hauteur du conteneur à décorer, ajout de l'utilitaire `useElementSize` de la libraire `VueUse` pour ces nombreux utilitaires légers.
+  * Création d'un composant `SectionContainer` pour gérer les styles des sections html
+  * Ajout d'une feuille de style globale à l'application pour les styles customisés
+  * Création d'un composant pour la section fil d'Arianne
+  * Ajout du menu de navigation principal
+  * Création de différentes pages statiques
 
 ## 0.1.0 [#21](https://github.com/betagouv/aides-simulateur-front/pull/21)
 

README.md

@@ -4,7 +4,7 @@ Interface graphique du simulateur aides-simplifiées.
 
 ## Pré-requis
 
-L'application `aides-simulateur-front` nécessite en particulier cet environnement : 
+L'application `aides-simulateur-front` nécessite en particulier cet environnement :
 
 * [Node.js](https://nodejs.org/fr) : environnement d'exécution JavaScript (version 22)
 
@@ -55,7 +55,7 @@ pnpm run dev
 
 ## Générer le code de production
 
-Génère le code de production de l’application :
+Génère le code de production de l’application :
 
 ```bash
 # npm
@@ -65,7 +65,7 @@ npm run build
 pnpm run build
 ```
 
-Prévisualisation du code de prod (nécessite un build préalable) :
+Prévisualisation du code de prod (nécessite un build préalable) :
 
 ```bash
 # npm

client/app.config.ts

@@ -1,14 +1,9 @@
 export default defineAppConfig({
   headerProps: {
     serviceTitle: 'aides simplifiées',
-    serviceDescription: 'La bonne aide, au bon endroit, au bon moment',
+    serviceDescription: 'La bonne aide, au bon moment, au bon endroit',
     logoText: ['République', 'Française'],
     quickLinks: [
-      {
-        label: 'À propos',
-        to: '/content/apropos',
-        icon: { name: 'ri-flag-line', ssr: true },
-      },
       {
         label: 'Affichage',
         icon: { name: 'ri-sun-line', ssr: true },
@@ -28,7 +23,7 @@ export default defineAppConfig({
     licenceTo: 'https://www.etalab.gouv.fr/licence-ouverte-open-licence',
     licenceName: 'Licence ouverte 2.0',
     a11yCompliance: 'partiellement conforme',
-    descText: 'Description du service',
+    descText: 'La bonne aide, au bon moment, au bon endroit',
     operatorImgAlt: 'Logo de l\'opérateur',
     operatorLinkText: 'Nom de l\'opérateur',
     operatorTo: 'https://www.interieur.gouv.fr',

client/components/AideCard.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { DsfrCardProps } from '@gouvminint/vue-dsfr'
+
+// export type DsfrCardProps = {
+//   link?: string | RouteLocationRaw
+//   title: string
+//   description: string
+//   size?: 'md' | 'medium' | 'large' | 'lg' | 'sm' | 'small' | undefined
+//   detail?: string
+//   detailIcon?: DsfrCardDetailProps['icon']
+//   endDetail?: string
+//   endDetailIcon?: DsfrCardDetailProps['icon']
+//   altImg?: string
+//   titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+//   badges?: DsfrBadgeProps[]
+//   buttons?: DsfrButtonProps[]
+//   imgRatio?: 'md' | 'medium' | 'lg' | 'large' | 'sm' | 'small'
+//   linksGroup?: {
+//     label: string
+//     to?: RouteLocationRaw
+//     /** @deprecated utiliser href à la place, link sera supprimé dans une version future */
+//     link?: string
+//     href?: string
+//   }[]
+//   noArrow?: boolean
+//   horizontal?: boolean
+//   download?: boolean
+//   enlarge?: boolean
+// }
+import type { RouteLocationRaw } from 'vue-router'
+
+interface AideCardProps {
+  title: string
+  horizontal?: boolean
+  titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  description: string
+  size?: 'md' | 'medium' | 'large' | 'lg' | 'sm' | 'small' | undefined
+  link?: string | RouteLocationRaw
+  typeAide?: TypeAide
+  instructeur?: string
+  montant?: number
+}
+const props = withDefaults(defineProps<AideCardProps>(), {
+  titleTag: 'h3',
+  size: 'md',
+  horizontal: false,
+})
+
+const sm = computed(() => {
+  return ['sm', 'small'].includes(props.size)
+})
+const lg = computed(() => {
+  return ['lg', 'large'].includes(props.size)
+})
+
+const externalLink = computed(() => {
+  return typeof props.link === 'string' && props.link.startsWith('http')
+})
+
+const titleEl = ref<HTMLElement | null>(null)
+function goToTargetLink () {
+  (titleEl.value?.querySelector('.fr-card__link') as HTMLDivElement).click()
+}
+defineExpose({ goToTargetLink })
+</script>
+
+<template>
+  <div
+    class="fr-card"
+    :class="{
+      'fr-card--horizontal': horizontal,
+      // 'fr-enlarge-link': !noArrow,
+      'fr-card--sm': sm,
+      'fr-card--lg': lg,
+      // 'fr-card--download': download,
+      // 'fr-enlarge-button': enlarge,
+    }"
+    data-testid="fr-card"
+  >
+    <div class="fr-card__body">
+      <div class="fr-card__content">
+        <component
+          :is="titleTag"
+          class="fr-card__title"
+        >
+          <a
+            v-if="externalLink"
+            :href="(link as string)"
+            data-testid="card-link"
+            class="fr-card__link"
+          >{{ title }}</a>
+          <RouterLink
+            v-else-if="link"
+            :to="link"
+            class="fr-card__link"
+            data-testid="card-link"
+            @click="$event.stopPropagation()"
+          >
+            {{ title }}
+          </RouterLink>
+          <template v-else>
+            {{ title }}
+          </template>
+        </component>
+        <p class="fr-card__desc">
+          {{ description }}
+        </p>
+      </div>
+      <div
+        v-if="typeAide"
+        class="fr-card__header"
+      >
+        <ul
+          class="fr-tags-group"
+        >
+          <TypeAideTag
+            small
+            :type="typeAide"
+          />
+        </ul>
+      </div>
+      <AideMontant
+        v-if="montant"
+        :montant="montant"
+        size="lg"
+      />
+    </div>
+  </div>
+</template>

client/components/AideMontant.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  montant: number
+  size?: 'md' | 'medium' | 'large' | 'lg' | 'sm' | 'small' | undefined
+}>(), {
+  size: 'md',
+})
+</script>
+
+<template>
+  <div
+    class="brand-montant fr-text--alt"
+    :class="[
+      `brand-montant--${size}`,
+    ]"
+  >
+    <div class="brand-montant__label">
+      {{ montant }}€
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.brand-montant {
+  font-weight: 700;
+  position: relative;
+  display: inline-block;
+  width: min-content;
+  line-height: 1;
+
+  &--sm {
+    font-size: 1.25rem;
+  }
+
+  &--md {
+    font-size: 1.5rem;
+  }
+
+  &--lg {
+    font-size: 2rem;
+  }
+
+  .brand-montant__label {
+    position: relative;
+    z-index: 1;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    top: 50%;
+    right: 0.15em;
+    left: -0.15em;
+    bottom: 0;
+    background: var(--blue-france-950-100);
+  }
+}
+</style>

client/components/TypeAideTag.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import type { DsfrTagProps } from '@gouvminint/vue-dsfr'
+
+const props = withDefaults(defineProps<
+  Omit<DsfrTagProps, 'icon'> & { type: TypeAide }
+>(), {
+  type: 'pret',
+})
+interface TypeAideTag {
+  type: TypeAide
+  iconName: string
+  label: string
+}
+const typeAideTags: TypeAideTag[] = [
+  { type: 'pret', label: 'Prêt', iconName: 'ri-arrow-left-right-line' },
+  { type: 'garantie', label: 'Garantie', iconName: 'ri-chat-check-line' },
+  { type: 'caution', label: 'Caution', iconName: 'ri-chat-check-line' },
+  { type: 'periode', label: '{Période}', iconName: 'ri-calendar-event-line' },
+  { type: 'une-fois', label: 'Une seule fois', iconName: 'ri-flashlight-line' },
+  { type: 'reduction-impots', label: 'Réduction d’impôts', iconName: 'ri-arrow-right-down-line' },
+  { type: 'aide-materielle', label: 'Aide matérielle', iconName: 'ri-shopping-bag-line' },
+  { type: 'financements', label: 'Financements', iconName: 'ri-bank-card-line' },
+]
+const typeAide = typeAideTags.find((tag) => {
+  return tag.type === props.type
+})
+
+/**
+ * The warning in template will be fixed in a future release of @gouvminint/vue-dsfr
+ * @see https://github.com/dnum-mi/vue-dsfr/pull/1044
+ */
+</script>
+
+<template>
+  <DsfrTag
+    v-if="typeAide"
+    v-bind="$props"
+    :icon="{ name: typeAide.iconName, ssr: true }"
+    :label="typeAide.label"
+  />
+</template>

client/components/layout/BrandBackgroundContainer.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { useElementSize } from '@vueuse/core'
+
+const props = withDefaults(defineProps<{
+  contrast?: boolean
+  subtle?: boolean
+  textured?: boolean
+  blue?: boolean
+}>(), {
+  contrast: false,
+  subtle: false,
+  textured: false,
+  blue: false,
+})
+
+const schemeStore = useSchemeStore()
+const { preferences } = storeToRefs(schemeStore)
+const mixBlendMode = computed(() => {
+  return preferences.value.theme === 'dark' ? 'lighten' : 'darken'
+})
+
+const opacity = props.subtle ? 0.2 : 0.8
+
+const backgroundColorClass = computed(() => {
+  if (props.blue) {
+    return 'fr-background-alt--blue-france'
+  }
+  return `fr-background-default--grey`
+})
+
+const bgContainer = ref(null)
+const { height: containerHeight } = useElementSize(bgContainer)
+</script>
+
+<template>
+  <div
+    class="container-with-bg"
+    :class="[
+      backgroundColorClass,
+    ]"
+  >
+    <div
+      v-if="textured"
+      ref="bgContainer"
+      class="container-with-bg__bg"
+      :style="{
+        opacity,
+        mixBlendMode,
+      }"
+    >
+      <BrandBackgroundTexture
+        :contrast="contrast"
+        :theme="preferences.theme"
+        :container-height="containerHeight"
+      />
+    </div>
+    <div class="container-with-bg__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container-with-bg {
+  position: relative;
+  width: 100%;
+}
+
+.container-with-bg__bg {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.container-with-bg__content {
+  position: relative;
+  z-index: 1;
+}
+</style>