Merge pull request #182 from BouyguesTelecom/back/Price

Back to the good old time
BouyguesTelecom · Oct 31, 2024 · a6b8c3f · a6b8c3f
2 parents ab5f8a1 + 34b757d
commit a6b8c3f
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 67 deletions.
diff --git a/packages/react/components/alert/Alert.tsx b/packages/react/components/alert/Alert.tsx
@@ -1,15 +1,15 @@
 import clsx from "clsx"
 import * as React from "react"
-import { getStatusClassName, getStatusIconName } from "@/objects/facets/Status"
-import { has, is } from "@/services/classify"
-import { Icon, IconName, IconSize } from "@/components/icon"
-import { Text } from "@/components/text"
-import { Title, TitleLevels } from "@/components/title"
-import { AlertProps, ToasterAlertPosition, ToasterStatusProps } from "./AlertProps"
-import { hashClass } from "@/helpers"
-import { useTrilogyContext } from "@/context"
+import {CSSProperties, useEffect, useRef, useState} from "react"
+import {getStatusClassName, getStatusIconName} from "@/objects/facets/Status"
+import {has, is} from "@/services/classify"
+import {Icon, IconName, IconSize} from "@/components/icon"
+import {Text, TextLevels} from "@/components/text"
+import {Title, TitleLevels} from "@/components/title"
+import {AlertProps, ToasterAlertPosition, ToasterStatusProps} from "./AlertProps"
+import {hashClass} from "@/helpers"
+import {useTrilogyContext} from "@/context"
 import ToasterContext from './context'
-import { CSSProperties, useEffect, useRef, useState } from "react"
 
 /**
  * Toaster Component
@@ -145,7 +145,7 @@ const Alert = ({
             title
           )}
           {description && typeof description.valueOf() === "string" ? (
-            <Text>{description}</Text>
+            <Text level={TextLevels.TWO}>{description}</Text>
           ) : (
             description
           )}

diff --git a/packages/react/components/price/Price.tsx b/packages/react/components/price/Price.tsx
@@ -55,7 +55,6 @@ const Price = ({
     styled,
     clsx(
       "price",
-      level && is(`level-${level}`),
       inverted && is("inverted"),
       inline && is("inlined"),
       overline && has("suptitle"),
@@ -67,7 +66,6 @@ const Price = ({
     styled,
     clsx(
       "price",
-      level && level == PriceLevel.ONE && is(`level-3`) || level == PriceLevel.TWO && is(`level-4`) || level == PriceLevel.THREE && is(`level-5`) || level == PriceLevel.FOUR && is(`level-6`) || is(`level-7`),
       inverted && is("inverted"),
       inline && is("inlined"),
       strikedAmount && is("striked"),
@@ -108,12 +106,13 @@ const Price = ({
     "€"
 
   const returnComponent = (
-    <div className={hashClass(styled, clsx("price-container"))}>
-      {overline && <p className={hashClass(styled, clsx("overline"))}>{overline}</p>}
+    <div className={hashClass(styled, clsx("price-container", is(`level-${level || '1'}`)) )}>
+      {overline && <p className={hashClass(styled,clsx("overline"))}>{overline}</p>}
       {/* StrikedAmount Price */}
       {strikedAmount && (
-        <span
-            aria-hidden='true'
+        <>
+          <span
+            aria-hidden="true"
             data-testid={testId}
             className={classesStriked}
             {...others}
@@ -133,14 +132,15 @@ const Price = ({
               )}
             </span>
           </span>
+        </>
       )}
-        <span
-          aria-hidden='true'
-          data-testid={testId}
-          aria-label={accessibilityLabel}
-          className={classes}
-          {...others}
-        >
+      <span
+        aria-hidden="true"
+        data-testid={testId}
+        aria-label={accessibilityLabel}
+        className={classes}
+        {...others}
+      >
           <Text markup={TextMarkup.SPAN}>{`${whole}`}</Text>
           <span className={hashClass(styled, clsx("price-details"))}>
             <span className={hashClass(styled, clsx("cents"))}>
@@ -156,13 +156,13 @@ const Price = ({
             )}
           </span>
         </span>
-        {tagAmount && (
-          <span {...{ role: 'paragraph' }} className={hashClass(styled, clsx(('price-tag')))}>
-            <Text markup={TextMarkup.SPAN} typo={[TypographyBold.TEXT_WEIGHT_SEMIBOLD, TypographyColor.TEXT_WHITE]}>{tagAmount} {tagSymbol ? tagSymbol : '€'}</Text>
-            {tagSymbol === '€' && period && <Text markup={TextMarkup.SPAN} typo={[TypographyBold.TEXT_WEIGHT_NORMAL, TypographyColor.TEXT_WHITE]}>&nbsp;/{period}</Text>}
+      {tagAmount && (
+        <span {...{ role: 'paragraph' }} className={hashClass(styled, clsx(('price-tag')))}>
+            <Text className={clsx('tag-amount')} markup={TextMarkup.SPAN} typo={[TypographyBold.TEXT_WEIGHT_SEMIBOLD, TypographyColor.TEXT_WHITE]}>{tagAmount} {tagSymbol ? tagSymbol : '€'}</Text>
+          {tagSymbol === '€' && period && <Text className={clsx('tag-period')} markup={TextMarkup.SPAN} typo={[TypographyBold.TEXT_WEIGHT_NORMAL, TypographyColor.TEXT_WHITE]}>&nbsp;/{period}</Text>}
           </span>
-        )}
-        {accessibilityLabel && <p className='sr-only'>{accessibilityLabel}</p>}
+      )}
+      {accessibilityLabel && <p className='sr-only'>{accessibilityLabel}</p>}
     </div>
   )
 

diff --git a/packages/styles/framework/src/components/_price.scss b/packages/styles/framework/src/components/_price.scss
@@ -1,11 +1,11 @@
 $price-levels: (
-    [$text-64, $text-44, $text-28, $text-16],
-    [$text-56, $text-32, $text-22, $text-16],
-    [$text-48, $text-28, $text-16, $text-16],
-    [$text-40, $text-24, $text-10, $text-10],
-    [$text-36, $text-20, $text-10, $text-10],
-    [$text-24, $text-20, $text-10, $text-10],
-    [$text-20, $text-20, $text-10, $text-10],
+  [$text-64, $text-44, $text-28, $text-16],
+  [$text-56, $text-32, $text-22, $text-16],
+  [$text-48, $text-28, $text-16, $text-16],
+  [$text-40, $text-24, $text-10, $text-10],
+  [$text-36, $text-20, $text-10, $text-10],
+  [$text-24, $text-20, $text-10, $text-10],
+  [$text-20, $text-20, $text-10, $text-10],
 );
 
 .price-container {
@@ -83,41 +83,41 @@ $price-levels: (
   line-height: 0.8;
   margin-bottom: 0;
 
-    // the details : cents + period
+  // the details : cents + period
 
-    .price-details {
-      padding-left: $spacing-1;
+  .price-details {
+    padding-left: $spacing-1;
 
-      .cents,
-      .centimes,
-      .periode,
-      .period {
-        line-height: 1;
-        display: block;
-      }
+    .cents,
+    .centimes,
+    .periode,
+    .period {
+      line-height: 1;
+      display: block;
+    }
 
-      .cents,
-      .centimes {
-        font-weight: 600;
-        font-size: 0.475em;
-        vertical-align: top;
-        text-align: left;
-
-        sup {
-          font-weight: $weight-medium;
-          padding-left: 2px;
-          top: -0.3em;
-        }
+    .cents,
+    .centimes {
+      font-weight: 600;
+      font-size: 0.475em;
+      vertical-align: top;
+      text-align: left;
+
+      sup {
+        font-weight: $weight-medium;
+        padding-left: 2px;
+        top: -0.3em;
       }
+    }
 
-      .period,
-      .periode {
-        font-size: 0.375em;
-        margin-top: 0;
-        padding-left: 0.1em;
-        text-align: left;
-      }
+    .period,
+    .periode {
+      font-size: 0.375em;
+      margin-top: 0;
+      padding-left: 0.1em;
+      text-align: left;
     }
+  }
 
   &.is-inverted {
     color: getColor('background');

diff --git a/packages/styles/framework/src/elements/_paragraph.scss b/packages/styles/framework/src/elements/_paragraph.scss
@@ -13,8 +13,6 @@ $text-levels-mobile: (
 
 
 .text {
-  line-height: $text-20;
-
   @each $text-level in $text-levels {
             $i: index($text-levels, $text-level);
             $font-size: nth($text-level, 1);