feat: add infography on quiz

app/(iframes)/iframes/quiz-infographie/page.tsx

@@ -0,0 +1,14 @@
+import CategorySimulator from 'components/outils/CategorySimulator'
+import { quizEquivalents } from 'components/outils/quiz/question.config'
+import Shareable from 'components/shareable/Shareable'
+import { overScreenQuizInfographyValues } from 'components/shareable/overScreens/Values'
+
+const page = () => {
+  return (
+    <Shareable slug='quiz-infographie' tracking='Quiz infographie' overScreens={overScreenQuizInfographyValues}>
+      <CategorySimulator tracking='Quiz infographie' equivalents={quizEquivalents} reverse />
+    </Shareable>
+  )
+}
+
+export default page

src/components/outils/quiz/Question.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslations } from 'next-intl'
 import { SetStateAction } from 'preact/compat'
-import React, { Dispatch, ForwardedRef, forwardRef, useCallback, useEffect, useMemo } from 'react'
+import { Dispatch, ForwardedRef, forwardRef, useCallback, useEffect, useMemo } from 'react'
 import { computedEquivalents } from 'src/providers/equivalents'
 import { Question as QuestionType } from 'types/question'
 import Button from 'components/base/buttons/Button'
@@ -109,8 +109,7 @@ const Question = (
                 data-testid='quiz-more-info'
                 id='quiz-more-info'
                 className={styles.moreInfo}
-                //@ts-expect-error: inert not managed by react
-                inert={displayMore ? undefined : ''}>
+                inert={displayMore ? undefined : true}>
                 {question.moreInfo}
               </div>
             </div>

src/components/outils/quiz/QuizInfography.module.css

@@ -0,0 +1,20 @@
+.category {
+  padding: 2rem 1.5rem;
+  max-height: 19.5rem;
+  overflow: hidden;
+}
+
+.displayAll {
+  max-height: none;
+  overflow: auto;
+}
+
+.text {
+  text-align: center;
+  color: var(--neutral-50);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+}

src/components/outils/quiz/QuizInfography.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslations } from 'use-intl'
+import Shareable from 'components/shareable/Shareable'
+import { overScreenQuizInfographyValues } from 'components/shareable/overScreens/Values'
+import shareableStyles from '../../shareable/Shareable.module.css'
+import CategoryDisplayAll from '../CategoryDisplayAll'
+import CategorySimulator from '../CategorySimulator'
+import styles from './QuizInfography.module.css'
+import { quizEquivalents } from './question.config'
+
+const QuizInfography = () => {
+  const t = useTranslations('quiz')
+  const [displayAll, setDisplayAll] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (ref.current) {
+      if (displayAll) {
+        ref.current.getElementsByTagName('a')[0].focus()
+      } else {
+        ref.current.getElementsByTagName('a')[0].scrollIntoView({ behavior: 'smooth', block: 'end' })
+      }
+    }
+  }, [ref, displayAll])
+
+  return (
+    <>
+      <div className={shareableStyles.separatorBothBorders} />
+      <div
+        className={classNames(styles.category, { [styles.displayAll]: displayAll })}
+        inert={displayAll ? undefined : true}>
+        <p className={styles.text}>{t('infography')}</p>
+        <Shareable slug='quiz-infographie' tracking='Quiz infographie' overScreens={overScreenQuizInfographyValues}>
+          <div ref={ref}>
+            <CategorySimulator tracking='Quiz infographie' equivalents={quizEquivalents} reverse />
+          </div>
+        </Shareable>
+      </div>
+      <CategoryDisplayAll
+        displayAll={displayAll}
+        setDisplayAll={setDisplayAll}
+        tracking='Quiz infographie'
+        displayAllText={t('displayAll')}
+        hideAllText={t('hideAll')}
+      />
+      <div className={shareableStyles.separatorBothBorders} />
+    </>
+  )
+}
+
+export default QuizInfography

src/components/outils/quiz/QuizSimulator.tsx

@@ -3,7 +3,7 @@
 import classNames from 'classnames'
 import { useTranslations } from 'next-intl'
 import Image from 'next/image'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { track } from 'utils/matomo'
 import Resource from 'components/base/Resource'
 import Button from 'components/base/buttons/Button'
@@ -12,6 +12,7 @@ import DropdownArrowUpIcon from 'components/base/icons/dropdown-arrow-up'
 import FullArrowLeftIcon from 'components/base/icons/full-arrow-left'
 import shareableStyles from '../../shareable/Shareable.module.css'
 import Question from './Question'
+import QuizInfography from './QuizInfography'
 import styles from './QuizSimulator.module.css'
 import { questions } from './question.config'
 
@@ -137,7 +138,7 @@ const QuizSimulator = () => {
               {t('restart')}
             </Button>
           </div>
-          <div className={shareableStyles.separatorBothBorders} />
+          <QuizInfography />
           <div className={styles.ressources}>
             <p>{t('read-more')}</p>
             <Resource

src/components/outils/quiz/question.config.tsx

@@ -1,3 +1,4 @@
+import { computedEquivalents } from 'src/providers/equivalents'
 import { Question } from 'types/question'
 import AvocatPoisson from './infos/AvocatPoisson'
 import BoeufTGV from './infos/BoeufTGV'
@@ -22,3 +23,9 @@ export const questions: Question[] = [
   { answer: 'A', slugA: 'email', valueA: 1000, slugB: 'smartphone', moreInfo: <EmailSmartphone /> },
   { answer: 'A', slugA: 'veloelectrique', valueA: 10, slugB: 'mangue', moreInfo: <VeloMangue />, last: true },
 ]
+
+export const quizEquivalents = computedEquivalents
+  .filter((equivalent) =>
+    questions.some((question) => question.slugA === equivalent.slug || question.slugB === equivalent.slug)
+  )
+  .filter((value, index, array) => array.findIndex((t) => t.slug === value.slug) === index)

src/components/shareable/overScreens/Values.tsx

@@ -189,6 +189,17 @@ export const overScreenOsezChangerValues: () => Record<string, OverScreenInfo> =
   }
 }
 
+export const overScreenQuizInfographyValues = {
+  partager: {
+    title: 'share',
+    children: <Share tracking='Quiz infographie' path='iframes/quiz-infographie' />,
+  },
+  integrer: {
+    title: 'integrate',
+    children: <Integrate path='quiz-infographie' tracking='Quiz infographie' />,
+  },
+}
+
 export const overScreenCategoryValues: (category: Category) => Record<string, OverScreenInfo> = (category) => {
   const values = {
     partager: {

src/providers/locales/en.json

@@ -1,5 +1,6 @@
 {
   "quiz": {
+    "infography": "REVIEW THE ORDERS OF MAGNITUDE",
     "question": "Question",
     "previous": "Prev.",
     "title": "In your opinion, what has <important>the least</important> impact on the climate?",

src/providers/locales/es.json

@@ -1,5 +1,6 @@
 {
   "quiz": {
+    "infography": "REVISAR LOS PEDIDOS DE TALLAS",
     "question": "Pregunta",
     "previous": "Ant.",
     "title": "Según tú, ¿qué tiene <important>menos</important> impacto en el clima?",

src/providers/locales/fr.json

@@ -1,5 +1,8 @@
 {
   "quiz": {
+    "infography": "REVOIR LES ORDRES DE GRANDEURS",
+    "hideAll": "Replier la liste des ordres de grandeur",
+    "displayAll": "Afficher tous les ordres de grandeur",
     "question": "Question",
     "previous": "Prec.",
     "title": "D’après vous, qu’est-ce qui a <important>le moins</important> d’impact sur le climat ?",