From efd31f06c63d77f5b5de1c42f27bfba03db26cbd Mon Sep 17 00:00:00 2001
From: Paul Naszalyi <pnaszaly@bouyguestelecom.fr>
Date: Mon, 28 Oct 2024 17:44:45 +0100
Subject: [PATCH] Fix examples

---
 .../accordion/item/AccordionItem.tsx          |  2 +-
 .../react/components/alert/Alert.example.tsx  |  8 +-
 .../autocomplete/AutoComplete.native.tsx      |  1 -
 .../autocomplete/AutoCompleteProps.ts         |  2 +-
 .../autolayout/DefaultSpacingMatrix.ts        |  2 +-
 packages/react/components/badge/Badge.tsx     |  2 +-
 packages/react/components/box/Box.example.tsx | 98 ++++++++-----------
 .../react/components/card/Card.example.tsx    | 12 +--
 .../card/image/CardImage.native.tsx           |  1 -
 .../components/columns/Columns.example.tsx    |  8 +-
 .../components/columns/Columns.native.tsx     | 29 +++---
 packages/react/components/columns/Columns.tsx |  2 +-
 .../react/components/hero/Hero.example.tsx    |  6 +-
 .../react/components/input/Input.native.tsx   |  2 +-
 packages/react/components/modal/Modal.tsx     |  2 +-
 packages/react/components/otp/Otp.tsx         |  2 -
 .../react/components/price/Price.example.tsx  |  2 +-
 packages/react/components/price/Price.tsx     | 18 ++--
 .../components/progress/Progress.example.tsx  | 17 +---
 .../progress/radial/ProgressRadial.tsx        | 83 ++++++++--------
 .../react/components/range/Range.native.tsx   |  2 +-
 packages/react/components/range/Range.tsx     |  2 +-
 .../components/section/Section.example.tsx    |  7 +-
 .../components/select/web/SelectDynamic.tsx   |  4 +-
 .../react/components/text/Text.example.tsx    |  4 +-
 .../components/textarea/Textarea.native.tsx   |  2 +-
 .../react/components/textarea/Textarea.tsx    |  2 +-
 .../timeline/item/TimelineItem.native.tsx     |  1 -
 .../react/components/title/Title.example.tsx  |  4 +-
 packages/react/objects/facets/Color.tsx       |  6 +-
 30 files changed, 150 insertions(+), 183 deletions(-)

diff --git a/packages/react/components/accordion/item/AccordionItem.tsx b/packages/react/components/accordion/item/AccordionItem.tsx
index 5c751006..c3d303c3 100644
--- a/packages/react/components/accordion/item/AccordionItem.tsx
+++ b/packages/react/components/accordion/item/AccordionItem.tsx
@@ -28,7 +28,7 @@ const AccordionItem = ({
   ...others
 }: AccordionItemProps): JSX.Element => {
   const ref = useRef<HTMLDetailsElement>(null)
-  const {styled} = useTrilogyContext()
+  const { styled } = useTrilogyContext()
 
   const [isActive, setIsActive] = useState<boolean>(active || false)
   const [expandedHeight, setExpandedHeight] = useState<string>()
diff --git a/packages/react/components/alert/Alert.example.tsx b/packages/react/components/alert/Alert.example.tsx
index 443b9dae..c48134b9 100644
--- a/packages/react/components/alert/Alert.example.tsx
+++ b/packages/react/components/alert/Alert.example.tsx
@@ -6,7 +6,7 @@ const AlertExample: React.ReactNode =
 <Columns multiline>
             <ColumnsItem size={6}>
             <Alert
-              alert='INFO'
+              status='INFO'
               description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
               display
               title='Alert information'
@@ -14,7 +14,7 @@ const AlertExample: React.ReactNode =
             </ColumnsItem>
             <ColumnsItem size={6}>
             <Alert
-              alert='ERROR'
+              status='ERROR'
               description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
               display
               title='Alert information'
@@ -22,7 +22,7 @@ const AlertExample: React.ReactNode =
             </ColumnsItem>
             <ColumnsItem size={6}>
             <Alert
-              alert='SUCCESS'
+              status='SUCCESS'
               description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
               display
               title='Alert information'
@@ -30,7 +30,7 @@ const AlertExample: React.ReactNode =
             </ColumnsItem>
             <ColumnsItem size={6}>
             <Alert
-              alert='WARNING'
+              status='WARNING'
               description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
               display
               title='Alert information'
diff --git a/packages/react/components/autocomplete/AutoComplete.native.tsx b/packages/react/components/autocomplete/AutoComplete.native.tsx
index 0e654888..cc6863ee 100644
--- a/packages/react/components/autocomplete/AutoComplete.native.tsx
+++ b/packages/react/components/autocomplete/AutoComplete.native.tsx
@@ -7,7 +7,6 @@ import { defaultMatching, getLabel } from './Autocomplete.helpers'
 import AutoCompleteMenuNative from './menu/AutoCompleteMenu.native'
 import { debounce } from './utils'
 
-
 /**
  * AutoComplete Component
  * @param placeholder {string} placeholder for input
diff --git a/packages/react/components/autocomplete/AutoCompleteProps.ts b/packages/react/components/autocomplete/AutoCompleteProps.ts
index ab6a799d..a6850c9a 100644
--- a/packages/react/components/autocomplete/AutoCompleteProps.ts
+++ b/packages/react/components/autocomplete/AutoCompleteProps.ts
@@ -1,4 +1,4 @@
-import { InputChangeEventWeb,InputChangeEventNative, InputClickEvent, InputProps } from '@/components/input/InputProps'
+import { InputChangeEventWeb, InputChangeEventNative, InputClickEvent, InputProps } from '@/components/input/InputProps'
 import { FocusEventHandler } from 'react'
 
 /**
diff --git a/packages/react/components/autolayout/DefaultSpacingMatrix.ts b/packages/react/components/autolayout/DefaultSpacingMatrix.ts
index 1f06a860..c57dd788 100644
--- a/packages/react/components/autolayout/DefaultSpacingMatrix.ts
+++ b/packages/react/components/autolayout/DefaultSpacingMatrix.ts
@@ -39,4 +39,4 @@ export const DEFAULT_SPACING_MATRIX: SpacingMatrix = [
   [INSERT_SPACE_BETWEEN, 'Link', 'default', TWO],
   [INSERT_SPACE_BETWEEN, 'Sticker', 'default', TWO],
   [INSERT_SPACE_BETWEEN, 'Tag', 'default', TWO],
-];
+]
diff --git a/packages/react/components/badge/Badge.tsx b/packages/react/components/badge/Badge.tsx
index 48a3dc83..96fb41d9 100644
--- a/packages/react/components/badge/Badge.tsx
+++ b/packages/react/components/badge/Badge.tsx
@@ -4,7 +4,7 @@ import { Text, TextMarkup } from "@/components/text"
 import clsx from "clsx"
 import { hashClass } from "@/helpers"
 import { useTrilogyContext } from "@/context"
-import {is} from "@/services";
+import { is } from "@/services"
 
 /**
  * Badge Component
diff --git a/packages/react/components/box/Box.example.tsx b/packages/react/components/box/Box.example.tsx
index f867dd25..8f8037d1 100644
--- a/packages/react/components/box/Box.example.tsx
+++ b/packages/react/components/box/Box.example.tsx
@@ -1,67 +1,49 @@
 import React from 'react'
 import { Box, BoxContent, BoxFooter } from './index'
-import { Title } from '@/components/title'
+import { Title, TitleLevels } from '@/components/title'
 import { Text } from '@/components/text'
 import { Columns, ColumnsItem } from '../columns'
 import { Link } from '../link'
+import { TrilogyColor } from '@/objects'
 
-const BoxExample: React.ReactNode =
+const BoxExample: React.ReactNode = (
   <Columns multiline>
-      <ColumnsItem size={4}>
-        <Box>
-          <BoxContent>
-            <Title level='ONE'>
-              Box Title
-            </Title>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
-            </Text>
-          </BoxContent>
-        </Box>
-      </ColumnsItem>
-      <ColumnsItem size={4}>
-        <Box flat>
-          <BoxContent>
-            <Title level='ONE'>
-              Box Title
-            </Title>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
-            </Text>
-          </BoxContent>
-        </Box>
-      </ColumnsItem>
-      <ColumnsItem size={4}>
-        <Box
-          leftBorder='WARNING'
-        >
-          <BoxContent>
-            <Title level='ONE'>
-              Box Title
-            </Title>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
-            </Text>
-          </BoxContent>
-        </Box>
-      </ColumnsItem>
-      <ColumnsItem size={12}>
-        <Box>
-          <BoxContent>
-            <Title level='ONE'>
-              Box Title
-            </Title>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
-            </Text>
-          </BoxContent>
-          <BoxFooter>
-            <Link>
-              Link
-            </Link>
-          </BoxFooter>
-        </Box>
-      </ColumnsItem>
-    </Columns>
+    <ColumnsItem size={4}>
+      <Box>
+        <BoxContent>
+          <Title level={TitleLevels.ONE}>Box Title</Title>
+          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.</Text>
+        </BoxContent>
+      </Box>
+    </ColumnsItem>
+    <ColumnsItem size={4}>
+      <Box flat>
+        <BoxContent>
+          <Title level={TitleLevels.ONE}>Box Title</Title>
+          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.</Text>
+        </BoxContent>
+      </Box>
+    </ColumnsItem>
+    <ColumnsItem size={4}>
+      <Box highlighted={TrilogyColor.WARNING}>
+        <BoxContent>
+          <Title level={TitleLevels.ONE}>Box Title</Title>
+          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.</Text>
+        </BoxContent>
+      </Box>
+    </ColumnsItem>
+    <ColumnsItem size={12}>
+      <Box>
+        <BoxContent>
+          <Title level={TitleLevels.ONE}>Box Title</Title>
+          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.</Text>
+        </BoxContent>
+        <BoxFooter>
+          <Link>Link</Link>
+        </BoxFooter>
+      </Box>
+    </ColumnsItem>
+  </Columns>
+)
 
 export default BoxExample
diff --git a/packages/react/components/card/Card.example.tsx b/packages/react/components/card/Card.example.tsx
index ba88b841..c49c9b97 100644
--- a/packages/react/components/card/Card.example.tsx
+++ b/packages/react/components/card/Card.example.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Card, CardImage, CardContent } from './index'
-import { Title } from '@/components/title'
-import { Text } from '@/components/text'
+import { Title, TitleLevels } from '@/components/title'
+import { Text, TextLevels } from '@/components/text'
 import { Button } from '@/components/button'
 import { Rows, RowItem } from '@/components/rows'
 
@@ -14,10 +14,10 @@ const CardExample: React.ReactNode =
           <Title>
             Présentation
           </Title>
-          <Title level='ONE'>
+          <Title level={TitleLevels.ONE}>
             Title lorem
           </Title>
-          <Text level='ONE'>
+          <Text level={TextLevels.ONE}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, neque eu,
             vulputate vera.
           </Text>
@@ -36,10 +36,10 @@ const CardExample: React.ReactNode =
           <Title>
             Présentation
           </Title>
-          <Title level='ONE'>
+          <Title level={TitleLevels.ONE}>
             Title lorem
           </Title>
-          <Text level='ONE'>
+          <Text level={TextLevels.ONE}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, neque eu,
             vulputate vera.
           </Text>
diff --git a/packages/react/components/card/image/CardImage.native.tsx b/packages/react/components/card/image/CardImage.native.tsx
index b034885c..592b6214 100644
--- a/packages/react/components/card/image/CardImage.native.tsx
+++ b/packages/react/components/card/image/CardImage.native.tsx
@@ -18,7 +18,6 @@ const CardImage = ({ src, size, alt, onClick, contain, ...others }: CardImagePro
   const maxSize = horizontal ? '50%' : '100%'
   const [ratio, setRatio] = useState(1)
 
-
   const getBorderRadius = (isHorizontal: boolean, isReversed: boolean, isActive: boolean) => ({
     borderBottomRightRadius: (isHorizontal && 1) || (isReversed && 8) || 0,
     borderBottomLeftRadius: (isHorizontal && 8) || (isReversed && 8) || 0,
diff --git a/packages/react/components/columns/Columns.example.tsx b/packages/react/components/columns/Columns.example.tsx
index e7cc4810..4ae3d8ef 100644
--- a/packages/react/components/columns/Columns.example.tsx
+++ b/packages/react/components/columns/Columns.example.tsx
@@ -1,26 +1,26 @@
 import React from 'react'
 import { Columns, ColumnsItem } from './index'
-import { Title } from '@/components/title'
+import { Title, TitleLevels } from '@/components/title'
 import { Box } from '@/components/box'
 
 const ColumnsExample: React.ReactNode = <Columns>
   <ColumnsItem>
     <Box flat>
-      <Title level='TWO'>
+      <Title level={TitleLevels.TWO}>
         Column
       </Title>
     </Box>
   </ColumnsItem>
   <ColumnsItem>
     <Box flat>
-      <Title level='TWO'>
+      <Title level={TitleLevels.TWO}>
         Column
       </Title>
     </Box>
   </ColumnsItem>
   <ColumnsItem>
     <Box flat>
-      <Title level='TWO'>
+      <Title level={TitleLevels.TWO}>
         Column
       </Title>
     </Box>
diff --git a/packages/react/components/columns/Columns.native.tsx b/packages/react/components/columns/Columns.native.tsx
index 9b8370ba..c30f7a43 100644
--- a/packages/react/components/columns/Columns.native.tsx
+++ b/packages/react/components/columns/Columns.native.tsx
@@ -1,11 +1,10 @@
-import React, {createContext, useState} from "react"
-import {Dimensions, LayoutChangeEvent, StyleSheet} from "react-native"
-import {View} from "@/components/view"
-import {ColumnsProps} from "./ColumnsProps"
-import {ComponentName} from "@/components/enumsComponentsName"
-import {ScrollView} from 'react-native'
-import {ColumnsGap, ColumnsGapValue} from "@/components/columns/ColumnsTypes"
-import {Text} from "@/components/text";
+import React, { createContext, useState } from "react"
+import { Dimensions, LayoutChangeEvent, StyleSheet, ScrollView } from "react-native"
+import { View } from "@/components/view"
+import { ColumnsProps } from "./ColumnsProps"
+import { ComponentName } from "@/components/enumsComponentsName"
+import { ColumnsGap, ColumnsGapValue } from "@/components/columns/ColumnsTypes"
+import { Text } from "@/components/text"
 
 /**
  * Columns Native Component
@@ -17,7 +16,7 @@ import {Text} from "@/components/text";
  * @param gap {ColumnsGap} Gap between columns
  */
 
-export const ColumnsContext = createContext({scrollable: false})
+export const ColumnsContext = createContext({ scrollable: false })
 
 const Columns = ({
                    children,
@@ -36,7 +35,7 @@ const Columns = ({
 
   const onLayoutHandler = (event: LayoutChangeEvent) => {
     if (!width) {
-      const {width} = event.nativeEvent.layout
+      const { width } = event.nativeEvent.layout
       if (fullBleed) {
         setEnlarge((Dimensions.get('screen').width - width) / 2)
       }
@@ -86,15 +85,15 @@ const Columns = ({
           verticalCentered && styles.verticalAlign,
         ]}
               {...others}
-              {...{onLayout: onLayoutHandler}}
+              {...{ onLayout: onLayoutHandler }}
         >
           {// eslint-disable-next-line @typescript-eslint/no-explicit-any
             React.Children.map(children, (child: any) =>
 
                 child && React.cloneElement(child, {
                   style: [child.props.style,
-                    {width: nbCols && (width / nbCols) - realGap || child.props.size && (width * child.props.size / 12) - realGap || 'auto'},
-                    child.props.narrow && {flex: 'none', flexShrink: 1},
+                    { width: nbCols && (width / nbCols) - realGap || child.props.size && (width * child.props.size / 12) - realGap || 'auto' },
+                    child.props.narrow && { flex: 'none', flexShrink: 1 },
                   ]
                 })
             )}
@@ -106,7 +105,7 @@ const Columns = ({
   return <View style={{
     width: `100% + ${enlarge * 2}px`,
     marginHorizontal: -(enlarge)
-  }} {...{onLayout: onLayoutHandler}}>
+  }} {...{ onLayout: onLayoutHandler }}>
     <ScrollView horizontal contentContainerStyle={styles.scrollContainer}>
       {// eslint-disable-next-line @typescript-eslint/no-explicit-any
         React.Children.map(children, (child: any) =>
@@ -114,7 +113,7 @@ const Columns = ({
             style: [child.props.style, {
               width: width / (12 / (child.props.size || child.props.mobileSize || 12)) - 2 * realGap,
               flexGrow: 0,
-            }, child.props.narrow && {flex: 'none', flexShrink: 1}],
+            }, child.props.narrow && { flex: 'none', flexShrink: 1 }],
           })
         )}
     </ScrollView>
diff --git a/packages/react/components/columns/Columns.tsx b/packages/react/components/columns/Columns.tsx
index 926ade5b..a966f7e4 100644
--- a/packages/react/components/columns/Columns.tsx
+++ b/packages/react/components/columns/Columns.tsx
@@ -4,7 +4,7 @@ import { ColumnsProps } from "./ColumnsProps"
 import { is, has } from "@/services/classify"
 import { hashClass } from "@/helpers"
 import { useTrilogyContext } from "@/context"
-import {ColumnsGap} from "@/components/columns/ColumnsTypes";
+import { ColumnsGap } from "@/components/columns/ColumnsTypes"
 
 /**
  * Columns Component
diff --git a/packages/react/components/hero/Hero.example.tsx b/packages/react/components/hero/Hero.example.tsx
index 89d30591..2ed91be6 100644
--- a/packages/react/components/hero/Hero.example.tsx
+++ b/packages/react/components/hero/Hero.example.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Hero } from './index'
 import { Container } from '@/components/container'
-import { Title } from '@/components/title'
+import { Title, TitleLevels } from '@/components/title'
 import { Columns, ColumnsItem } from '@/components/columns'
 import { Section } from '@/components/section'
 import { Box, BoxContent } from '@/components/box'
@@ -12,7 +12,7 @@ const HeroExample: React.ReactNode = (
     <ColumnsItem>
       <Hero overlap className='has-pattern-dark'>
         <Container>
-          <Title inverted level='TWO' markup='h1'>
+          <Title inverted level={TitleLevels.TWO} markup='h1'>
             Internet garanti
           </Title>
           <Text className='is-inverted has-text-weight-bold' inverted>
@@ -25,7 +25,7 @@ const HeroExample: React.ReactNode = (
         <Container>
           <Box>
             <BoxContent>
-              <Title level='TWO'>Internet garanti</Title>
+              <Title level={TitleLevels.TWO}>Internet garanti</Title>
             </BoxContent>
           </Box>
         </Container>
diff --git a/packages/react/components/input/Input.native.tsx b/packages/react/components/input/Input.native.tsx
index dc097d9a..3e75740b 100644
--- a/packages/react/components/input/Input.native.tsx
+++ b/packages/react/components/input/Input.native.tsx
@@ -1,7 +1,7 @@
 import { ComponentName } from '@/components/enumsComponentsName'
 import { Icon, IconName, IconSize } from '@/components/icon'
 import { Text, TextLevels } from '@/components/text'
-import {grayscale, TypographyColor} from '@/objects'
+import { grayscale, TypographyColor } from '@/objects'
 import { Alignable } from '@/objects/facets/Alignable'
 import { TrilogyColor, getColorStyle } from '@/objects/facets/Color'
 import { StatusState } from '@/objects/facets/Status'
diff --git a/packages/react/components/modal/Modal.tsx b/packages/react/components/modal/Modal.tsx
index fbf13e9d..e56893de 100644
--- a/packages/react/components/modal/Modal.tsx
+++ b/packages/react/components/modal/Modal.tsx
@@ -40,7 +40,7 @@ const idTitle = shortid.generate()
  * @param panel {boolean} Panel Side Modal
  * @param accessibilityLabel {string} Accessibility label
  * @param testId {string} Test id
- * @param ctaCancelContent {string} content of button close 
+ * @param ctaCancelContent {string} content of button close
  * @param footer {React.ReactNode}
  * @param footerClassNames {string} Additionnal CSS Classes for footer
  * - -------------------------- NATIVE PROPERTIES -------------------------------
diff --git a/packages/react/components/otp/Otp.tsx b/packages/react/components/otp/Otp.tsx
index 8a5537df..b17d2fdb 100644
--- a/packages/react/components/otp/Otp.tsx
+++ b/packages/react/components/otp/Otp.tsx
@@ -7,8 +7,6 @@ import { hashClass } from "@/helpers/hashClassesHelpers"
 import { is } from "@/services/classify"
 import { useTrilogyContext } from "@/context/index"
 
-
-
 type NumberOrNull = number | null;
 
 const stringToCode = (str: string|undefined, codeSize: number): Array<NumberOrNull> => {
diff --git a/packages/react/components/price/Price.example.tsx b/packages/react/components/price/Price.example.tsx
index 9647a8ec..7a835079 100644
--- a/packages/react/components/price/Price.example.tsx
+++ b/packages/react/components/price/Price.example.tsx
@@ -19,7 +19,7 @@ const PriceExample: React.ReactNode =
             mention='(1)'
             period='mois'
             showCents
-            striked
+            strikedAmount={29.99}
         />
     </ColumnsItem>
     <ColumnsItem>
diff --git a/packages/react/components/price/Price.tsx b/packages/react/components/price/Price.tsx
index 684bfeef..036d6268 100644
--- a/packages/react/components/price/Price.tsx
+++ b/packages/react/components/price/Price.tsx
@@ -55,6 +55,7 @@ const Price = ({
     styled,
     clsx(
       "price",
+      level && is(`level-${level}`),
       inverted && is("inverted"),
       inline && is("inlined"),
       overline && has("suptitle"),
@@ -66,6 +67,7 @@ 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"),
@@ -106,13 +108,12 @@ const Price = ({
     "€"
 
   const returnComponent = (
-    <div className={hashClass(styled, clsx("price-container", is(`level-${level || '1'}`)) )}>
-      {overline && <p className={hashClass(styled,clsx("overline"))}>{overline}</p>}
+    <div className={hashClass(styled, clsx("price-container"))}>
+      {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}
@@ -132,10 +133,9 @@ const Price = ({
               )}
             </span>
           </span>
-        </>
       )}
         <span
-          aria-hidden="true"
+          aria-hidden='true'
           data-testid={testId}
           aria-label={accessibilityLabel}
           className={classes}
@@ -158,8 +158,8 @@ const Price = ({
         </span>
         {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>}
+            <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>}
           </span>
         )}
         {accessibilityLabel && <p className='sr-only'>{accessibilityLabel}</p>}
diff --git a/packages/react/components/progress/Progress.example.tsx b/packages/react/components/progress/Progress.example.tsx
index 035ae3fd..41c962bb 100644
--- a/packages/react/components/progress/Progress.example.tsx
+++ b/packages/react/components/progress/Progress.example.tsx
@@ -1,20 +1,11 @@
 import React from 'react'
 import { Progress } from './index'
 
-const ProgressExample: React.ReactNode =
-
+const ProgressExample: React.ReactNode = (
   <>
-    <Progress
-      alert='INFO'
-      percent={30}
-      uniqueLegend='My unique legend'
-    />
-    <Progress
-      alert='INFO'
-      firstExtremLegend='0 Go'
-      percent={15}
-      secondExtremLegend='5 Go'
-    />
+    <Progress status='INFO' percent={30} uniqueLegend='My unique legend' />
+    <Progress status='INFO' firstExtremLegend='0 Go' percent={15} secondExtremLegend='5 Go' />
   </>
+)
 
 export default ProgressExample
diff --git a/packages/react/components/progress/radial/ProgressRadial.tsx b/packages/react/components/progress/radial/ProgressRadial.tsx
index 2310d976..3bcf9558 100644
--- a/packages/react/components/progress/radial/ProgressRadial.tsx
+++ b/packages/react/components/progress/radial/ProgressRadial.tsx
@@ -1,13 +1,12 @@
-import React, { useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
-import { ProgressRadialProps } from './ProgressRadialProps';
-import { is } from '../../../services/index';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
+import React, { useEffect, useRef, useState } from 'react'
+import clsx from 'clsx'
+import { ProgressRadialProps } from './ProgressRadialProps'
+import { is } from '../../../services/index'
+import { hashClass } from '../../../helpers'
+import { useTrilogyContext } from '../../../context'
 import { Title, TitleLevels } from '../../title'
 import { Text, TextLevels } from '../../text'
-import {getColorStyle} from "@/objects/facets/Color";
-
+import { getColorStyle } from "@/objects/facets/Color"
 
 /**
  * Progress Radial component
@@ -38,61 +37,61 @@ const ProgressRadial = ({
   small,
   ...others
 }: ProgressRadialProps): JSX.Element => {
-  const { styled } = useTrilogyContext();
-  const [firstProgressCurrentValue, setFirstProgressCurrentValue] = useState(0);
-  const [secondProgressCurrentValue, setSecondProgressCurrentValue] = useState(0);
+  const { styled } = useTrilogyContext()
+  const [firstProgressCurrentValue, setFirstProgressCurrentValue] = useState(0)
+  const [secondProgressCurrentValue, setSecondProgressCurrentValue] = useState(0)
 
-  const classes = hashClass(styled, clsx('progress-radial', skeleton && is('loading'), small && is('small'), className));
-  const classesContent = hashClass(styled, clsx('progress-radial-content'));
+  const classes = hashClass(styled, clsx('progress-radial', skeleton && is('loading'), small && is('small'), className))
+  const classesContent = hashClass(styled, clsx('progress-radial-content'))
 
-  const progressRadialRef = useRef<HTMLDivElement>(null);
+  const progressRadialRef = useRef<HTMLDivElement>(null)
 
   // Function to update the background style based on the current progress
   const updateBackgroundStyle = (firstValue: number, secondValue: number) => {
-    const progressRadial = progressRadialRef.current;
+    const progressRadial = progressRadialRef.current
     if (!progressRadial) {
-      return;
+      return
     }
 
-    const firstProgressDegree = (360 * firstValue) / 100;
-    const secondProgressDegree = (360 * secondValue) / 100;
+    const firstProgressDegree = (360 * firstValue) / 100
+    const secondProgressDegree = (360 * secondValue) / 100
 
     // Ensure the second progress starts where the first ends
-    const secondProgressStartDegree = firstProgressDegree;
+    const secondProgressStartDegree = firstProgressDegree
 
-    let styleBackground;
-    styleBackground = `radial-gradient(circle at center, white 58%, transparent 58.1%),`;
-    styleBackground += `conic-gradient(#0C7B91 0 ${firstProgressDegree}deg, ${getColorStyle('MAIN')} ${secondProgressStartDegree}deg ${secondProgressStartDegree + secondProgressDegree}deg, gainsboro ${secondProgressStartDegree + secondProgressDegree}deg 360deg)`;
-    progressRadial.style.background = styleBackground;
-  };
+    let styleBackground
+    styleBackground = `radial-gradient(circle at center, white 58%, transparent 58.1%),`
+    styleBackground += `conic-gradient(#0C7B91 0 ${firstProgressDegree}deg, ${getColorStyle('MAIN')} ${secondProgressStartDegree}deg ${secondProgressStartDegree + secondProgressDegree}deg, gainsboro ${secondProgressStartDegree + secondProgressDegree}deg 360deg)`
+    progressRadial.style.background = styleBackground
+  }
 
   useEffect(() => {
-    let animationFrameId: any;
+    let animationFrameId: any
 
     // Reset the current values whenever the provided percent or secondPercent change
-    setFirstProgressCurrentValue(0);
-    setSecondProgressCurrentValue(0);
-    updateBackgroundStyle(percent, secondPercent); // if percent or secondPercent are 0, update immediately
+    setFirstProgressCurrentValue(0)
+    setSecondProgressCurrentValue(0)
+    updateBackgroundStyle(percent, secondPercent) // if percent or secondPercent are 0, update immediately
 
     const frame = () => {
       setFirstProgressCurrentValue((value) => {
-        return value < percent ? value + 1 : value;
-      });
+        return value < percent ? value + 1 : value
+      })
       setSecondProgressCurrentValue((value) => {
-        return value < secondPercent ? value + 1 : value;
-      });
-      animationFrameId = requestAnimationFrame(frame);
-    };
+        return value < secondPercent ? value + 1 : value
+      })
+      animationFrameId = requestAnimationFrame(frame)
+    }
 
-    animationFrameId = requestAnimationFrame(frame);
+    animationFrameId = requestAnimationFrame(frame)
 
     // Cleanup
-    return () => cancelAnimationFrame(animationFrameId);
-  }, [percent, secondPercent]);
+    return () => cancelAnimationFrame(animationFrameId)
+  }, [percent, secondPercent])
 
   useEffect(() => {
-    updateBackgroundStyle(firstProgressCurrentValue, secondProgressCurrentValue);
-  }, [firstProgressCurrentValue, secondProgressCurrentValue]);
+    updateBackgroundStyle(firstProgressCurrentValue, secondProgressCurrentValue)
+  }, [firstProgressCurrentValue, secondProgressCurrentValue])
 
   return (
     <div {...others} className={classes} ref={progressRadialRef}>
@@ -102,7 +101,7 @@ const ProgressRadial = ({
         {!label && !description && children}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default ProgressRadial;
+export default ProgressRadial
diff --git a/packages/react/components/range/Range.native.tsx b/packages/react/components/range/Range.native.tsx
index 20da7bf7..df229992 100644
--- a/packages/react/components/range/Range.native.tsx
+++ b/packages/react/components/range/Range.native.tsx
@@ -25,7 +25,7 @@ import { ComponentName } from "@/components/enumsComponentsName"
  * @param valueCursorMax {number} number of input max
  * @param onChangeMin {function} on change min cursor
  * @param onChangeMax {function} on change max cursor
- * @param testId {string} Test Id for Test Integration 
+ * @param testId {string} Test Id for Test Integration
  */
 const Range = ({
   min,
diff --git a/packages/react/components/range/Range.tsx b/packages/react/components/range/Range.tsx
index 7780ceb1..d700df7f 100644
--- a/packages/react/components/range/Range.tsx
+++ b/packages/react/components/range/Range.tsx
@@ -24,7 +24,7 @@ import { useTrilogyContext } from "@/context"
  * @param valueCursorMax {number} number of input max
  * @param onChangeMin {function} on change min cursor
  * @param onChangeMax {function} on change max cursor
- * @param testId {string} Test Id for Test Integration 
+ * @param testId {string} Test Id for Test Integration
  */
 const Range = ({
   min,
diff --git a/packages/react/components/section/Section.example.tsx b/packages/react/components/section/Section.example.tsx
index 104ebd00..c2d1b20c 100644
--- a/packages/react/components/section/Section.example.tsx
+++ b/packages/react/components/section/Section.example.tsx
@@ -2,22 +2,23 @@ import React from 'react'
 import { Section } from './index'
 import { Title } from '@/components/title'
 import { Columns, ColumnsItem } from '@/components/columns'
+import { TitleLevels } from '@/components/title/TitleEnum'
 
 const SectionExample: React.ReactNode = (
   <Columns>
     <ColumnsItem>
       <Section>
-        <Title level='ONE'>Première section</Title>
+        <Title level={TitleLevels.ONE}>Première section</Title>
       </Section>
     </ColumnsItem>
     <ColumnsItem>
       <Section>
-        <Title level='ONE'>Deuxième section</Title>
+        <Title level={TitleLevels.ONE}>Deuxième section</Title>
       </Section>
     </ColumnsItem>
     <ColumnsItem>
       <Section>
-        <Title level='ONE'>Troisième section</Title>
+        <Title level={TitleLevels.ONE}>Troisième section</Title>
       </Section>
     </ColumnsItem>
   </Columns>
diff --git a/packages/react/components/select/web/SelectDynamic.tsx b/packages/react/components/select/web/SelectDynamic.tsx
index 83fe2f50..55180660 100644
--- a/packages/react/components/select/web/SelectDynamic.tsx
+++ b/packages/react/components/select/web/SelectDynamic.tsx
@@ -51,9 +51,9 @@ const SelectDynamic = ({
 
   const isChecked = useCallback(
     (value: string) =>
-      multiple && selectedValues && typeof selectedValues !== 'string' && typeof selectedValues !== 'number'
+      (multiple && selectedValues && typeof selectedValues !== 'string' && typeof selectedValues !== 'number'
         ? selectedValues?.includes(value)
-        : selectedValues === value,
+        : selectedValues === value),
     [multiple, selectedValues],
   )
 
diff --git a/packages/react/components/text/Text.example.tsx b/packages/react/components/text/Text.example.tsx
index fc4617f0..7290272b 100644
--- a/packages/react/components/text/Text.example.tsx
+++ b/packages/react/components/text/Text.example.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Text } from './index'
+import { Text, TextLevels } from './index'
 
 const TextExample: React.ReactNode =
   <Text
     accessibilityLabel='ceci est un paragraphe'
-    level='ONE'
+    level={TextLevels.ONE}
     markup='p'
     typo='has-text-weight-semibold'
   >
diff --git a/packages/react/components/textarea/Textarea.native.tsx b/packages/react/components/textarea/Textarea.native.tsx
index 702f0660..b15e3bfa 100644
--- a/packages/react/components/textarea/Textarea.native.tsx
+++ b/packages/react/components/textarea/Textarea.native.tsx
@@ -6,7 +6,7 @@ import {
   InputKeyboardType,
   InputTextContentType,
 } from '@/components/input/InputEnum'
-import {grayscale, TypographyColor} from '@/objects'
+import { grayscale, TypographyColor } from '@/objects'
 import { getColorStyle, TrilogyColor } from '@/objects/facets/Color'
 import { StatusState } from '@/objects/facets/Status'
 import React, { forwardRef, useEffect, useRef, useState } from 'react'
diff --git a/packages/react/components/textarea/Textarea.tsx b/packages/react/components/textarea/Textarea.tsx
index fa817d8e..854d6c28 100644
--- a/packages/react/components/textarea/Textarea.tsx
+++ b/packages/react/components/textarea/Textarea.tsx
@@ -25,7 +25,7 @@ import { TypographyColor } from '@/objects'
  * @param iconName {IconName | IconNameValues} display Icon
  * @param statusIconName {IconName | IconNameValues} display status Icon
  * @param testId {string} Test Id for Test Integration
- * @param dynamicPlaceholder {boolean} 
+ * @param dynamicPlaceholder {boolean}
  * @param status {InputStatus} Textarea with status - (SUCCESS|WARNING|ERROR|DEFAULT)
  * @param required {boolean} Required
  * - -------------------------- WEB PROPERTIES -------------------------------
diff --git a/packages/react/components/timeline/item/TimelineItem.native.tsx b/packages/react/components/timeline/item/TimelineItem.native.tsx
index 975ff808..5b9a0450 100644
--- a/packages/react/components/timeline/item/TimelineItem.native.tsx
+++ b/packages/react/components/timeline/item/TimelineItem.native.tsx
@@ -4,7 +4,6 @@ import { TimelineHeightContext } from '@/components/timeline/Timeline.native'
 import { TimelineItemProps } from './TimelineItemProps'
 import { ComponentName } from '@/components/enumsComponentsName'
 
-
 export const TimelineItemContext = createContext({ done: false, active: false, undone: false, cancel: false })
 
 /**
diff --git a/packages/react/components/title/Title.example.tsx b/packages/react/components/title/Title.example.tsx
index 939a8a69..7c3d0fd1 100644
--- a/packages/react/components/title/Title.example.tsx
+++ b/packages/react/components/title/Title.example.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Columns, ColumnsItem } from '../columns'
-import { Title } from './index'
+import { Title, TitleLevels } from './index'
 
 const TitleExample: React.ReactNode = (
   <Columns multiline>
     <ColumnsItem size={12}>
-      <Title level='ONE'>Ceci titre</Title>
+      <Title level={TitleLevels.ONE}>Ceci titre</Title>
     </ColumnsItem>
     <ColumnsItem size={12}>
       <Title subtitle>Ceci est un sous-titre</Title>
diff --git a/packages/react/objects/facets/Color.tsx b/packages/react/objects/facets/Color.tsx
index ab45cd89..5831b84b 100644
--- a/packages/react/objects/facets/Color.tsx
+++ b/packages/react/objects/facets/Color.tsx
@@ -157,11 +157,11 @@ function rgbToHex(r: number, g: number, b: number): string {
 }
 
 export function grayscale(hex: string): string {
-    const { r, g, b } = hexToRgb(hex);
+    const { r, g, b } = hexToRgb(hex)
 
     // Formule de luminosité relative
-    const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
+    const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b)
 
     // Retourner la couleur en niveaux de gris
-    return rgbToHex(gray, gray, gray);
+    return rgbToHex(gray, gray, gray)
 }