Skip to content

Commit 1795198

Browse files
desoindxdesoindx
committed
feat: improve unit lisibility
1 parent c09c28e commit 1795198

14 files changed

Lines changed: 153 additions & 51 deletions

‎src/components/base/CO2Quantity.module.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.gUnit,
2+
.tUnit,
3+
.mtUnit {
4+
border-radius: 0.5rem;
5+
padding: 0 0.5rem;
6+
width: fit-content;
7+
}
8+
9+
.gUnit {
10+
background-color: var(--neutral-10);
11+
color: var(--neutral-80);
12+
}
13+
14+
.tUnit {
15+
background-color: var(--neutral-60);
16+
color: var(--neutral-10);
17+
}
18+
19+
.mtUnit {
20+
background-color: var(--neutral-80);
21+
color: var(--neutral-10);
22+
}
23+
24+
.gUnitSecondary,
25+
.tUnitSecondary,
26+
.mtUnitSecondary {
27+
border-radius: 0.25rem;
28+
padding: 0 0.25rem;
29+
width: fit-content;
30+
}
31+
32+
.gUnitSecondary {
33+
background-color: var(--primary-20);
34+
color: var(--primary-80);
35+
}
36+
37+
.tUnitSecondary {
38+
background-color: var(--primary-60);
39+
color: var(--primary-10);
40+
}
41+
42+
.mtUnitSecondary {
43+
background-color: var(--primary-70);
44+
color: var(--primary-10);
45+
}

‎src/components/base/CO2Quantity.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import classNames from 'classnames'
2+
import { getNumberPrecision } from 'utils/formatNumberPrecision'
3+
import LocalNumber from './LocalNumber'
4+
import styles from './CO2Quantity.module.css'
5+
6+
const getUnit = (value: number, unit: string, language: string) => {
7+
if (unit === 'mt') {
8+
if (language === 'en') {
9+
return value >= 2 ? 'Millions t' : 'Million t'
10+
}
11+
if (language === 'es') {
12+
return value >= 2 ? 'Millones t' : 'Millón t'
13+
}
14+
return value >= 2 ? 'Millions de t' : 'Million de t'
15+
}
16+
return unit
17+
}
18+
19+
const CO2Quantity = ({
20+
quantity,
21+
className,
22+
valueClassName,
23+
secondary,
24+
language,
25+
'data-testid': dataTestId,
26+
}: {
27+
quantity: number
28+
className?: string
29+
valueClassName?: string
30+
secondary?: boolean
31+
language: string
32+
['data-testid']?: string
33+
}) => {
34+
const { value, unit } = getNumberPrecision(quantity)
35+
36+
return (
37+
<p className={className} data-testid={dataTestId}>
38+
<span className={valueClassName}>
39+
<LocalNumber number={value} />
40+
</span>{' '}
41+
<span className={classNames(styles[`${unit}Unit${secondary ? 'Secondary' : ''}`])}>
42+
{getUnit(value, unit, language)} CO₂e
43+
</span>
44+
</p>
45+
)
46+
}
47+
48+
export default CO2Quantity

‎src/components/externalModules/shopify/ColumnEquivalent.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
display: flex;
1515
flex-direction: column;
1616
padding: 0.75rem 0.75rem 1rem 0.75rem;
17+
18+
font-size: 0.75em !important;
19+
font-weight: 500 !important;
20+
line-height: 1.33em !important;
1721
}
1822

1923
.comparison,

‎src/components/externalModules/shopify/ColumnEquivalent.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import classNames from 'classnames'
22
import { useEffect, useMemo, useState } from 'react'
33
import { Language } from 'types/equivalent'
44
import { getNumberPrecision } from 'utils/formatNumberPrecision'
5-
import LocalNumber from 'components/base/LocalNumber'
5+
import CO2Quantity from 'components/base/CO2Quantity'
66
import EqualIcon from 'components/base/icons/equal'
77
import RefreshIcon from 'components/base/icons/refresh'
88
import Logo from '../Logo'
@@ -43,12 +43,14 @@ const ColumnEquivalent = ({
4343
return (
4444
<div className={classNames(styles.container, { [styles.withRandomize]: !!randomize })}>
4545
<div className={baseStyles.top}>
46-
<p className={styles.leftContent}>
47-
<span className={baseStyles.value} data-testid='etiquette-value'>
48-
<LocalNumber number={value} />
49-
</span>
50-
<span className={baseStyles.label}>{unit} CO₂e</span>
51-
</p>
46+
<CO2Quantity
47+
quantity={preciseValue / 1000}
48+
className={styles.leftContent}
49+
valueClassName={baseStyles.value}
50+
data-testid='etiquette-value'
51+
secondary
52+
language={language}
53+
/>
5254
<Logo value={preciseValue} right />
5355
</div>
5456
<div className={baseStyles.rightColumn}>

‎src/components/externalModules/shopify/Equivalent.module.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@
4343
margin: auto !important;
4444
display: flex !important;
4545
flex-direction: column !important;
46+
47+
font-size: 0.75em !important;
48+
font-weight: 500 !important;
49+
line-height: 1.33em !important;
4650
}
4751

4852
.rightColumn,
@@ -151,14 +155,10 @@
151155
visibility: visible !important;
152156
}
153157

154-
.empty,
155-
.label {
158+
.empty {
156159
font-size: 0.75em !important;
157160
font-weight: 500 !important;
158161
line-height: 1.33em !important;
159-
}
160-
161-
.empty {
162162
max-width: 10.375rem;
163163
}
164164

‎src/components/externalModules/shopify/Equivalent.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
1+
import { useEffect, useMemo, useRef, useState } from 'react'
22
import { Language } from 'types/equivalent'
33
import { getNumberPrecision } from 'utils/formatNumberPrecision'
4-
import LocalNumber from 'components/base/LocalNumber'
4+
import CO2Quantity from 'components/base/CO2Quantity'
55
import EqualIcon from 'components/base/icons/equal'
66
import RefreshIcon from 'components/base/icons/refresh'
77
import Logo from '../Logo'
@@ -14,7 +14,6 @@ const Equivalent = ({
1414
className,
1515
baseValue,
1616
comparisons,
17-
title,
1817
animated,
1918
url,
2019
language,
@@ -23,7 +22,6 @@ const Equivalent = ({
2322
className?: string
2423
baseValue: string | number
2524
comparisons: string[]
26-
title?: (unit: string, roundedValue: number, intValue: number) => ReactNode
2725
animated?: boolean
2826
url?: string
2927
language: Language
@@ -56,16 +54,17 @@ const Equivalent = ({
5654

5755
return (
5856
<div className={className}>
59-
{title && title(unit, value, intValue)}
6057
<div className={styles.container}>
6158
<div className={styles.left}>
6259
<Logo value={preciseValue} url={url} />
63-
<p className={styles.leftContent}>
64-
<span className={styles.value} data-testid='etiquette-value'>
65-
<LocalNumber number={value} />
66-
</span>
67-
<span className={styles.label}>{unit} CO₂e</span>
68-
</p>
60+
<CO2Quantity
61+
quantity={preciseValue / 1000}
62+
className={styles.leftContent}
63+
valueClassName={styles.value}
64+
data-testid='etiquette-value'
65+
secondary
66+
language={language}
67+
/>
6968
</div>
7069
<div className={styles.right}>
7170
<div className={isAnimated ? styles.animatedEqual : styles.equal}>

‎src/components/outils/equivalents/EquivalentCardContent.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
'use client'
22

33
import { useTranslations } from 'next-intl'
4-
import React from 'react'
54
import useParamContext from 'src/providers/ParamProvider'
65
import { Category } from 'types/category'
76
import { ComputedEquivalent } from 'types/equivalent'
87
import { getName } from 'utils/Equivalent/equivalent'
9-
import { getNumberPrecision } from 'utils/formatNumberPrecision'
8+
import CO2Quantity from 'components/base/CO2Quantity'
109
import EquivalentIcon from 'components/base/EquivalentIcon'
11-
import LocalNumber from 'components/base/LocalNumber'
1210
import styles from './EquivalentCardContent.module.css'
1311

1412
const EquivalentCardContent = ({
@@ -20,9 +18,6 @@ const EquivalentCardContent = ({
2018
category: Category
2119
output?: string
2220
}) => {
23-
const { value, unit } = getNumberPrecision(
24-
equivalent.carpool ? equivalent.value / (equivalent.carpool + 1) : equivalent.value
25-
)
2621
const { language } = useParamContext()
2722
const t = useTranslations('unit')
2823
const unitLabel = equivalent.unit || category.unit
@@ -32,12 +27,12 @@ const EquivalentCardContent = ({
3227
<div>
3328
<p className={styles.title}>{getName(language, equivalent)}</p>
3429
<Result form={output}>
35-
<p className={styles.value}>
36-
<span className={styles.valueNumber}>
37-
<LocalNumber number={value} />
38-
</span>{' '}
39-
{unit} CO₂e
40-
</p>
30+
<CO2Quantity
31+
quantity={equivalent.carpool ? equivalent.value / (equivalent.carpool + 1) : equivalent.value}
32+
className={styles.value}
33+
valueClassName={styles.valueNumber}
34+
language={language}
35+
/>
4136
</Result>
4237
{unitLabel && (
4338
<p className={styles.unit}>

‎src/utils/formatName.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function formatName(name = '', value = 1) {
44
}
55

66
return name
7-
.replace(/\[s\]/g, value > 1 ? 's' : '')
8-
.replace(/\[x\]/g, value > 1 ? 'x' : '')
9-
.replace(/\[es\]/g, value > 1 ? 'es' : '')
7+
.replace(/\[s\]/g, value >= 2 ? 's' : '')
8+
.replace(/\[x\]/g, value >= 2 ? 'x' : '')
9+
.replace(/\[es\]/g, value >= 2 ? 'es' : '')
1010
}

‎src/utils/formatNumberPrecision.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
import formatNumber from './formatNumber'
22

33
export const getNumberPrecision = (number: number) => {
4-
return number >= 1 ? { value: formatNumber(number), unit: 'kg' } : { value: formatNumber(number * 1000), unit: 'g' }
4+
if (number >= 1_000_000) {
5+
return { value: formatNumber(number / 1_000_000), unit: 'mt' }
6+
}
7+
if (number >= 1_000) {
8+
return { value: formatNumber(number / 1_000), unit: 't' }
9+
}
10+
if (number >= 1) {
11+
return { value: formatNumber(number), unit: 'kg' }
12+
}
13+
return { value: formatNumber(number * 1000), unit: 'g' }
514
}

‎teste/comparateur.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ test('Iframes', async ({ page }) => {
1919
await page.goto(
2020
'http://localhost:3000/iframes/comparateur/etiquette-animee?value=7.26&comparisons=abricot,ail,tomate,voitureelectrique+3'
2121
)
22-
await expect(page.getByTestId('etiquette-value')).toHaveText('7.26')
22+
await expect(page.getByTestId('etiquette-value')).toHaveText('7.26 kg CO₂e')
2323
await expect(page.getByTestId('etiquette-abricot-value')).toHaveText('5')
2424
await expect(page.getByTestId('etiquette-ail-value')).toHaveText('18.9')
2525
await expect(page.getByTestId('etiquette-tomate-value')).toHaveText('11.6')
@@ -28,7 +28,7 @@ test('Iframes', async ({ page }) => {
2828
await page.goto(
2929
'http://localhost:3000/iframes/comparateur/etiquette?value=7.26&comparisons=abricot,ail,tomate,voitureelectrique+3'
3030
)
31-
await expect(page.getByTestId('etiquette-value')).toHaveText('7.26')
31+
await expect(page.getByTestId('etiquette-value')).toHaveText('7.26 kg CO₂e')
3232
await expect(page.getByTestId('etiquette-abricot-value')).toHaveText('5')
3333
await expect(page.getByTestId('etiquette-ail-value')).toHaveText('18.9')
3434
await expect(page.getByTestId('etiquette-tomate-value')).toHaveText('11.6')

0 commit comments

Comments
 (0)