feat: improve unit lisibility

Author: desoindx

src/components/base/CO2Quantity.module.css

@@ -0,0 +1,43 @@
+.gUnit,
+.tUnit,
+.mtUnit {
+  border-radius: 0.5rem;
+  padding: 0 0.5rem;
+}
+
+.gUnit {
+  background-color: var(--neutral-10);
+  color: var(--neutral-80);
+}
+
+.tUnit {
+  background-color: var(--neutral-60);
+  color: var(--neutral-10);
+}
+
+.mtUnit {
+  background-color: var(--neutral-80);
+  color: var(--neutral-10);
+}
+
+.gUnitSecondary,
+.tUnitSecondary,
+.mtUnitSecondary {
+  border-radius: 0.25rem;
+  padding: 0 0.25rem;
+}
+
+.gUnitSecondary {
+  background-color: var(--primary-20);
+  color: var(--primary-80);
+}
+
+.tUnitSecondary {
+  background-color: var(--primary-60);
+  color: var(--primary-10);
+}
+
+.mtUnitSecondary {
+  background-color: var(--primary-70);
+  color: var(--primary-10);
+}

src/components/base/CO2Quantity.tsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames'
+import { getNumberPrecision } from 'utils/formatNumberPrecision'
+import LocalNumber from './LocalNumber'
+import styles from './CO2Quantity.module.css'
+
+const getUnit = (value: number, unit: string, language: string) => {
+  if (unit === 'mt') {
+    if (language === 'en') {
+      return value >= 2 ? 'Millions t' : 'Million t'
+    }
+    if (language === 'es') {
+      return value >= 2 ? 'Millones t' : 'Millón t'
+    }
+    return value >= 2 ? 'Millions de t' : 'Million de t'
+  }
+  return unit
+}
+
+const CO2Quantity = ({
+  quantity,
+  className,
+  valueClassName,
+  secondary,
+  language,
+}: {
+  quantity: number
+  className?: string
+  valueClassName?: string
+  secondary?: boolean
+  language: string
+}) => {
+  const { value, unit } = getNumberPrecision(quantity)
+
+  return (
+    <p className={className}>
+      <span className={valueClassName}>
+        <LocalNumber number={value} />
+      </span>{' '}
+      <span className={classNames(styles[`${unit}Unit${secondary ? 'Secondary' : ''}`])}>
+        {getUnit(value, unit, language)} CO₂e
+      </span>
+    </p>
+  )
+}
+
+export default CO2Quantity

src/components/externalModules/shopify/Equivalent.tsx

@@ -1,7 +1,7 @@
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Language } from 'types/equivalent'
 import { getNumberPrecision } from 'utils/formatNumberPrecision'
-import LocalNumber from 'components/base/LocalNumber'
+import CO2Quantity from 'components/base/CO2Quantity'
 import EqualIcon from 'components/base/icons/equal'
 import RefreshIcon from 'components/base/icons/refresh'
 import Logo from '../Logo'
@@ -14,7 +14,6 @@ const Equivalent = ({
   className,
   baseValue,
   comparisons,
-  title,
   animated,
   url,
   language,
@@ -23,7 +22,6 @@ const Equivalent = ({
   className?: string
   baseValue: string | number
   comparisons: string[]
-  title?: (unit: string, roundedValue: number, intValue: number) => ReactNode
   animated?: boolean
   url?: string
   language: Language
@@ -56,16 +54,17 @@ const Equivalent = ({
 
   return (
     <div className={className}>
-      {title && title(unit, value, intValue)}
       <div className={styles.container}>
         <div className={styles.left}>
           <Logo value={preciseValue} url={url} />
-          <p className={styles.leftContent}>
-            <span className={styles.value} data-testid='etiquette-value'>
-              <LocalNumber number={value} />
-            </span>
-            <span className={styles.label}>{unit} CO₂e</span>
-          </p>
+          <CO2Quantity
+            quantity={preciseValue / 1000}
+            className={styles.leftContent}
+            valueClassName={styles.value}
+            data-testid='etiquette-value'
+            secondary
+            language={language}
+          />
         </div>
         <div className={styles.right}>
           <div className={isAnimated ? styles.animatedEqual : styles.equal}>

src/components/outils/equivalents/EquivalentCardContent.tsx

@@ -1,14 +1,12 @@
 'use client'
 
 import { useTranslations } from 'next-intl'
-import React from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { Category } from 'types/category'
 import { ComputedEquivalent } from 'types/equivalent'
 import { getName } from 'utils/Equivalent/equivalent'
-import { getNumberPrecision } from 'utils/formatNumberPrecision'
+import CO2Quantity from 'components/base/CO2Quantity'
 import EquivalentIcon from 'components/base/EquivalentIcon'
-import LocalNumber from 'components/base/LocalNumber'
 import styles from './EquivalentCardContent.module.css'
 
 const EquivalentCardContent = ({
@@ -20,9 +18,6 @@ const EquivalentCardContent = ({
   category: Category
   output?: string
 }) => {
-  const { value, unit } = getNumberPrecision(
-    equivalent.carpool ? equivalent.value / (equivalent.carpool + 1) : equivalent.value
-  )
   const { language } = useParamContext()
   const t = useTranslations('unit')
   const unitLabel = equivalent.unit || category.unit
@@ -32,12 +27,12 @@ const EquivalentCardContent = ({
       <div>
         <p className={styles.title}>{getName(language, equivalent)}</p>
         <Result form={output}>
-          <p className={styles.value}>
-            <span className={styles.valueNumber}>
-              <LocalNumber number={value} />
-            </span>{' '}
-            {unit} CO₂e
-          </p>
+          <CO2Quantity
+            quantity={equivalent.carpool ? equivalent.value / (equivalent.carpool + 1) : equivalent.value}
+            className={styles.value}
+            valueClassName={styles.valueNumber}
+            language={language}
+          />
         </Result>
         {unitLabel && (
           <p className={styles.unit}>

src/utils/formatName.ts

@@ -4,7 +4,7 @@ export default function formatName(name = '', value = 1) {
   }
 
   return name
-    .replace(/\[s\]/g, value > 1 ? 's' : '')
-    .replace(/\[x\]/g, value > 1 ? 'x' : '')
-    .replace(/\[es\]/g, value > 1 ? 'es' : '')
+    .replace(/\[s\]/g, value >= 2 ? 's' : '')
+    .replace(/\[x\]/g, value >= 2 ? 'x' : '')
+    .replace(/\[es\]/g, value >= 2 ? 'es' : '')
 }

src/utils/formatNumberPrecision.ts

@@ -1,5 +1,14 @@
 import formatNumber from './formatNumber'
 
 export const getNumberPrecision = (number: number) => {
-  return number >= 1 ? { value: formatNumber(number), unit: 'kg' } : { value: formatNumber(number * 1000), unit: 'g' }
+  if (number >= 1_000_000) {
+    return { value: formatNumber(number / 1_000_000), unit: 'mt' }
+  }
+  if (number >= 1_000) {
+    return { value: formatNumber(number / 1_000), unit: 't' }
+  }
+  if (number >= 1) {
+    return { value: formatNumber(number), unit: 'kg' }
+  }
+  return { value: formatNumber(number * 1000), unit: 'g' }
 }

testu/formatName.test.ts

@@ -22,7 +22,7 @@ describe('formatName', () => {
     expect(res).toEqual('les cadeaux des choux')
   })
   test('le résultat peut éventuellement garder ses majuscules originales', () => {
-    const res = formatName('Le[s] Cadeau[x] De[s] Chou[x]', 2, true)
+    const res = formatName('Le[s] Cadeau[x] De[s] Chou[x]', 2)
     expect(res).toEqual('Les Cadeaux Des Choux')
   })
 })