Refacto props

BouyguesTelecom · Nov 8, 2024 · 477360e · 477360e
1 parent 0bc1ec8
commit 477360e
Show file tree

Hide file tree

Showing 92 changed files with 778 additions and 1,309 deletions.
diff --git a/examples/react-template/Menu.tsx b/examples/react-template/Menu.tsx
@@ -38,7 +38,7 @@ export const MenuScreen = ({ navigation }: any): JSX.Element => {
     <View markup='main' className='main-content'>
       <AutoLayout>
         <ScrollView>
-          <Section>
+          <Section inverted>
             <Title level={TitleLevels.ONE} typo={[TypographyAlign.TEXT_CENTERED]}>
               You need to test components in other screens
             </Title>

diff --git a/examples/react-template/screens/Accordion.tsx b/examples/react-template/screens/Accordion.tsx
@@ -24,7 +24,7 @@ export const AccordionScreen = (): JSX.Element => {
           <AccordionHeader>
             <Text >Hello World 1</Text>
           </AccordionHeader>
-          <AccordionBody dataId="totooooo-test-id" testId="totooooo">
+          <AccordionBody data-id="totooooo-test-id" testId="totooooo">
             <Text>Lorem ipsum dolor sit amet lorem</Text>
           </AccordionBody>
         </AccordionItem>

diff --git a/examples/react-template/screens/Column.tsx b/examples/react-template/screens/Column.tsx
@@ -14,7 +14,6 @@ import {
   Price,
   Section,
   Text,
-  TextLevels,
   Title,
   TitleLevels,
 } from '@trilogy-ds/react/components'
@@ -26,13 +25,13 @@ export const ColumnScreen = (): JSX.Element => {
     <Section>
       <Box>
         <Columns scrollable fullBleed gap={GapSize.FIVE}>
-          <ColumnsItem size={4}>
-            <Text>Test</Text>
+          <ColumnsItem verticalAlign={Alignable.ALIGNED_CENTER}>
+            <Text>Test hello</Text>
           </ColumnsItem>
-          <ColumnsItem size={4}>
+          <ColumnsItem>
             <Text>Test</Text>
           </ColumnsItem>
-          <ColumnsItem size={4}>
+          <ColumnsItem>
             <Text>Test</Text>
           </ColumnsItem>
         </Columns>

diff --git a/examples/react-template/screens/Divider.tsx b/examples/react-template/screens/Divider.tsx
@@ -1,21 +1,24 @@
-import * as React from "react";
-import {
-  Section,
-  Divider,
-  Box,
-  BoxContent,
-  IconName,
-  Text,
-} from "@trilogy-ds/react/components";
-import { TrilogyColor } from "@trilogy-ds/react/objects";
+import * as React from 'react'
+import { Box, BoxContent, Divider, IconName, Section, Text } from '@trilogy-ds/react/components'
+import { TrilogyColor } from '@trilogy-ds/react/objects'
+import { RowItem, Rows, Spacer, SpacerSize } from '@trilogy-ds/react'
+import { GapSize } from '@trilogy-ds/react/lib/components/columns/ColumnsTypes'
 
 export const DividerScreen = (): JSX.Element => {
   return (
     <Section>
-      <Box>
-        <Divider iconName={IconName.EYE_SLASH} />
-        <Text>Lorem ipsum dolor sit amet</Text>
+      <Rows gap={GapSize.EIGHT}>
+        <RowItem>
+          <Divider />
+        </RowItem>
+        <RowItem>
+          <Divider />
+        </RowItem>
+      </Rows>
 
+      <Spacer size={SpacerSize.EIGHT} />
+
+      <Box>
         <Divider
           color={TrilogyColor.MAIN}
           backgroundColor={TrilogyColor.MAIN}
@@ -31,7 +34,7 @@ export const DividerScreen = (): JSX.Element => {
           color={TrilogyColor.MAIN}
           textColor={TrilogyColor.MAIN}
           backgroundColor={TrilogyColor.BACKGROUND}
-          content={"New Message"}
+          content={'New Message'}
         />
         <Text>Lorem ipsum dolor sit amet</Text>
       </Box>
@@ -42,5 +45,5 @@ export const DividerScreen = (): JSX.Element => {
       </Box>
       <Divider />
     </Section>
-  );
-};
+  )
+}
diff --git a/examples/react-template/screens/Progress.tsx b/examples/react-template/screens/Progress.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import {
   Divider,
   Progress,
-  ProgressLegend,
   ProgressRadial,
   Section,
   StatusState,
@@ -44,15 +43,13 @@ export const ProgressScreen = (): JSX.Element => {
         <Title level={TitleLevels.THREE}>Progression avec unique légende</Title>
         <Divider />
 
-        <Progress value={30} status={StatusState.INFO} uniqueLegend='My unique legend' />
+        <Progress value={30} status={StatusState.INFO} />
       </Section>
       <Section>
         <Title level={TitleLevels.THREE}>Progression avec légendes aux extremités</Title>
         <Divider />
 
-        <Progress value={15} status={StatusState.INFO} firstExtremLegend='0 Go' secondExtremLegend='5 Go'>
-          <ProgressLegend center={'Legend'} end={'5 Go'} />
-        </Progress>
+        <Progress value={15} status={StatusState.INFO} legendStart='0Go' legendCenter='Je suis une légende' legendEnd="5Go" />
       </Section>
       <Section>
         <Title level={TitleLevels.THREE}>Barre de progression circulaire children custo</Title>

diff --git a/examples/react-template/screens/Range.tsx b/examples/react-template/screens/Range.tsx
@@ -6,19 +6,16 @@ export const RangeScreen = (): JSX.Element => {
     <Section>
       <Range
         min={0}
-        max={100}
-        labelValueCursorMin={"€"}
-        labelValueCursorMax={"€"}
-        valueCursorMin={0}
-        valueCursorMax={50}
+        max={4}
+        unit={"%"}
+        valueMin={0}
+        valueMax={4}
         label="Ceci est un label"
-        idMin="min"
-        idMax="max"
-        nameMax="max"
-        nameMin="min"
+        id={"test"}
+        name="name-range"
         onChangeMin={(e) => console.log(e)}
         onChangeMax={(e) => console.log(e)}
-        gap={0}
+        gap={2}
       />
     </Section>
   );

diff --git a/examples/react-template/screens/Stepper.tsx b/examples/react-template/screens/Stepper.tsx
@@ -1,7 +1,5 @@
-import * as React from "react";
+import * as React from 'react'
 import {
-  Box,
-  BoxContent,
   Button,
   Divider,
   IconName,
@@ -11,70 +9,48 @@ import {
   StepperStep,
   Title,
   TitleLevels,
-} from "@trilogy-ds/react/components";
+} from '@trilogy-ds/react/components'
 
 export const StepperScreen = (): JSX.Element => {
-  const [activeStep, setActiveStep] = React.useState<number>(1);
+  const [activeStep, setActiveStep] = React.useState<number>(1)
 
   const handleClickNext = React.useCallback(() => {
     if (activeStep === 5) {
-      setActiveStep(1);
+      setActiveStep(1)
     } else {
-      setActiveStep((curr) => curr + 1);
+      setActiveStep((curr) => curr + 1)
     }
-  }, [activeStep]);
+  }, [activeStep])
 
   return (
     <Section>
       <Title level={TitleLevels.THREE}>Etapes</Title>
       <Divider />
-
-      <Box>
-        <BoxContent>
-          <Title level={TitleLevels.ONE}>Mon panier</Title>
-          <Spacer size={30}></Spacer>
-          <Stepper>
-            <StepperStep
-              done={1 < activeStep}
-              current={activeStep === 1}
-              iconName={IconName.EYE}
-              label="Recup"
-              step={1}
-            />
-            <StepperStep
-              done={2 < activeStep}
-              current={activeStep === 2}
-              label="Compléments"
-              step={2}
-            />
-            <StepperStep
-              error
-              done={3 < activeStep}
-              current={activeStep === 3}
-              iconName={IconName.SEARCH}
-              label="Coordonate"
-              step={3}
-            />
-            <StepperStep
-              done={4 < activeStep}
-              current={activeStep === 4}
-              label="Livraison"
-              step={4}
-            />
-            <StepperStep
-              done={5 < activeStep}
-              current={activeStep === 5}
-              iconName={IconName.EYE}
-              label="Confirm"
-              step={5}
-            />
-          </Stepper>
-        </BoxContent>
-      </Box>
+      <Title level={TitleLevels.ONE}>Mon panier</Title>
+      <Spacer size={30}></Spacer>
+      <Stepper>
+        <StepperStep done={1 < activeStep} current={activeStep === 1} iconName={IconName.EYE} label='Recup' />
+        <StepperStep done={2 < activeStep} current={activeStep === 2} label='Compléments' />
+        <StepperStep
+          error
+          done={3 < activeStep}
+          current={activeStep === 3}
+          iconName={IconName.SEARCH}
+          label='Coordonate'
+          step={3}
+        />
+        <StepperStep done={4 < activeStep} current={activeStep === 4} label='Livraison' />
+        <StepperStep
+          done={5 < activeStep}
+          current={activeStep === 5}
+          iconName={IconName.EYE}
+          label='Confirm'
+        />
+      </Stepper>
       <Spacer size={30}></Spacer>
-      <Button onClick={handleClickNext} variant={"PRIMARY"}>
+      <Button onClick={handleClickNext} variant={'PRIMARY'}>
         Next
       </Button>
     </Section>
-  );
-};
+  )
+}
diff --git a/examples/react-template/screens/Sticker.tsx b/examples/react-template/screens/Sticker.tsx
@@ -1,36 +1,27 @@
-import {
-  Box,
-  BoxContent,
-  Section,
-  Spacer,
-  SpacerSize,
-  Sticker,
-} from "@trilogy-ds/react/components";
-import {Price, VariantState} from "@trilogy-ds/react";
+import { Box, BoxContent, Section, Spacer, SpacerSize, Sticker } from '@trilogy-ds/react/components'
+import { Price, VariantState } from '@trilogy-ds/react'
 
 export const StickerScreen = (): JSX.Element => {
   return (
     <Section>
-      <Sticker>Sticker</Sticker>
-      <Sticker variant={"ACCENT"}>Sticker</Sticker>
-      <Sticker variant={"INFO"}>Sticker</Sticker>
-      <Spacer size={SpacerSize.SIX} horizontal/>
-      <Sticker variant={VariantState.ACCENT} small>
-        Sticker
-      </Sticker>
-      <Sticker variant={VariantState.INFO} small>
-        Sticker
-      </Sticker>
-      <Sticker variant={VariantState.MAIN} small>
-        Sticker
-      </Sticker>
-      <Spacer size={SpacerSize.SIX}/>
-      <Box hat>
-        <Sticker hat>Im a sticker hat</Sticker>
+      <Sticker label='Sticker' />
+      <Sticker variant={VariantState.ACCENT} label='Sticker' />
+      <Sticker variant={VariantState.INFO} label='Sticker' />
+
+      <Spacer size={SpacerSize.SIX} horizontal />
+
+      <Sticker label='Sticker' small />
+      <Sticker variant={VariantState.ACCENT} label='Sticker' small />
+      <Sticker variant={VariantState.INFO} label='Sticker' small />
+
+      <Spacer size={SpacerSize.SIX} />
+
+      <Box>
+        <Sticker label='PROMO' variant={VariantState.ACCENT} />
         <BoxContent>
-          <Price amount={100}/>
+          <Price amount={100} />
         </BoxContent>
       </Box>
     </Section>
-  );
-};
+  )
+}