🐛 Fix price align

BouyguesTelecom · Dec 17, 2024 · b426642 · b426642
1 parent 44f4c6f
commit b426642
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 19 deletions.
diff --git a/examples/react-template/screens/Price.tsx b/examples/react-template/screens/Price.tsx
@@ -73,18 +73,13 @@ export const PriceScreen = (): JSX.Element => {
 
       <Price level={2} amount={18.99} />
 
-      <Divider />
-      <Title level={TitleLevels.THREE}>Inlined</Title>
-
-      <Price level={7} amount={1000} mention='(1)' period='months' />
-
       <Divider />
       <Title level={TitleLevels.THREE}>Alignement</Title>
-      <Price level={1} amount={1000} mention='(1)' period='months' />
+      <Price level={1} amount={1000} mention='(1)' period='months' align={Alignable.ALIGNED_START} />
 
-      <Price level={1} amount={1000} mention='(1)' period='months' />
+      <Price level={1} amount={1000} mention='(1)' period='months' align={Alignable.ALIGNED_CENTER} />
 
-      <Price level={1} amount={1000} mention='(1)' period='months' />
+      <Price level={1} amount={1000} mention='(1)' period='months' align={Alignable.ALIGNED_END} />
 
       <Divider />
 

diff --git a/packages/react/components/price/Price.tsx b/packages/react/components/price/Price.tsx
@@ -102,20 +102,16 @@ const Price = ({
     )
   }
 
+  const alignmentClasses = {
+    [Alignable.ALIGNED_START]: 'justified-start',
+    [Alignable.ALIGNED_CENTER]: 'justified-center',
+    [Alignable.ALIGNED_END]: 'justified-end',
+  }
+
   return (
     <div
       id={id}
-      className={hashClass(
-        styled,
-        clsx(
-          'price-container',
-          is(`level-${level || '1'}`),
-          (align == Alignable.ALIGNED_START && is('justified-left')) ||
-            (align == Alignable.ALIGNED_CENTER && is('justified-center')) ||
-            (align == Alignable.ALIGNED_END && is('justified-right')) ||
-            '',
-        ),
-      )}
+      className={hashClass(styled, clsx('price-container', is(`level-${level || '1'}`), align && is(alignmentClasses[align])))}
     >
       {overline && <p className={hashClass(styled, clsx('overline'))}>{overline}</p>}
       {oldAmountComponent}