Fix Price align

BouyguesTelecom · Nov 12, 2024 · c80d189 · c80d189
1 parent a6525d6
commit c80d189
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/examples/react-template/screens/Price.tsx b/examples/react-template/screens/Price.tsx
@@ -1,4 +1,4 @@
-import { Columns, ColumnsItem, TrilogyColor } from '@trilogy-ds/react'
+import { Alignable, Columns, ColumnsItem, TrilogyColor } from '@trilogy-ds/react'
 import {
   Divider,
   Price,
@@ -19,9 +19,9 @@ export const PriceScreen = (): JSX.Element => {
         Prix classiques seuls
       </Title>
       <Spacer size={SpacerSize.FIVE} />
-      <Columns>
-        <ColumnsItem narrow>
-          <Price amount={10.99} level={1} />
+      <Columns multiline>
+        <ColumnsItem size={4}>
+          <Price amount={10.99} level={1} align={Alignable.ALIGNED_CENTER} />
         </ColumnsItem>
         <ColumnsItem narrow>
           <Price amount={10.99} level={1} hideCents />

diff --git a/packages/react/components/price/Price.tsx b/packages/react/components/price/Price.tsx
@@ -63,16 +63,6 @@ const Price = ({
     ),
   )
 
-  const priceParentNode = hashClass(
-    styled,
-    clsx(
-      (align == Alignable.ALIGNED_START && has('text-left')) ||
-        (align == Alignable.ALIGNED_CENTER && has('text-centered')) ||
-        (align == Alignable.ALIGNED_END && has('text-right')) ||
-        '',
-    ),
-  )
-
   let amountComponent = null
   let oldAmountComponent = null
   let tagAmountComponent = null
@@ -148,21 +138,28 @@ const Price = ({
     )
   }
 
-  const returnComponent = (
-    <div id={id} className={hashClass(styled, clsx('price-container', is(`level-${level || '1'}`)))}>
+  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')) ||
+            '',
+        ),
+      )}
+    >
       {overline && <p className={hashClass(styled, clsx('overline'))}>{overline}</p>}
       {oldAmountComponent}
       {amountComponent}
       {tagAmountComponent}
       {accessibilityLabel && <p className='sr-only'>{accessibilityLabel}</p>}
     </div>
   )
-
-  if (align) {
-    return <div className={priceParentNode}>{returnComponent}</div>
-  }
-
-  return returnComponent
 }
 
 export default Price