fix examples components

BouyguesTelecom · Jul 31, 2024 · 0e52794 · 0e52794
1 parent 3105271
commit 0e52794
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 42 deletions.
diff --git a/packages/react/components/accordion/Accordion.example.tsx b/packages/react/components/accordion/Accordion.example.tsx
@@ -4,7 +4,7 @@ import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from './inde
 const AccordionExample: React.ReactNode = <Accordion>
   <AccordionItem
     active
-    id="UN"
+    id="1"
   >
     <AccordionHeader>
       Hello World

diff --git a/packages/react/components/breadcrumb/Breadcrumb.example.tsx b/packages/react/components/breadcrumb/Breadcrumb.example.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Breadcrumb, BreadcrumbItem } from './index'
+
+const BreadcrumbExample: React.ReactNode =
+  <Breadcrumb>
+    <BreadcrumbItem href="https://google.fr">
+      Google
+    </BreadcrumbItem>
+    <BreadcrumbItem to="#anchor">
+      Parent avec ancre
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+      Parent
+    </BreadcrumbItem>
+    <BreadcrumbItem active>
+      Page en cours
+    </BreadcrumbItem>
+  </Breadcrumb>
+
+export default BreadcrumbExample;
diff --git a/packages/react/components/breadcrumb/index.ts b/packages/react/components/breadcrumb/index.ts
@@ -1,4 +1,5 @@
 import Breadcrumb from './Breadcrumb'
 import BreadcrumbItem from './item'
+import BreadcrumbExample from './Breadcrumb.example'
 
-export { Breadcrumb, BreadcrumbItem }
+export { Breadcrumb, BreadcrumbItem, BreadcrumbExample }
diff --git a/packages/react/components/card/Card.example.tsx b/packages/react/components/card/Card.example.tsx
@@ -3,25 +3,54 @@ import { Card, CardImage, CardContent } from './index'
 import { Title } from '@/components/title'
 import { Text } from '@/components/text'
 import { Button } from '@/components/button'
+import { Rows, RowItem } from '@/components/rows'
 
-const CardExample: React.ReactNode = <Card>
-  <CardImage src="https://design.bouyguestelecom.fr/v1/card-sample.200bd9f7.png" />
-  <CardContent>
-    <Title>
-      Présentation
-    </Title>
-    <Title level="ONE">
-      Title lorem
-    </Title>
-    <Text level="ONE">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, neque eu, vulputate vera.
-    </Text>
-    <Button
-      variant="SECONDARY"
-    >
-      Voir plus...
-    </Button>
-  </CardContent>
-</Card>
+const CardExample: React.ReactNode =
+  <Rows>
+    <RowItem>
+      <Card>
+        <CardImage src="https://design.bouyguestelecom.fr/v1/card-sample.200bd9f7.png" />
+        <CardContent>
+          <Title>
+            Présentation
+          </Title>
+          <Title level="ONE">
+            Title lorem
+          </Title>
+          <Text level="ONE">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, neque eu,
+            vulputate vera.
+          </Text>
+          <Button
+            variant="SECONDARY"
+          >
+            Voir plus...
+          </Button>
+        </CardContent>
+      </Card>
+    </RowItem>
+    <RowItem>
+      <Card horizontal>
+        <CardImage src="https://design.bouyguestelecom.fr/v1/card-sample.200bd9f7.png" />
+        <CardContent>
+          <Title>
+            Présentation
+          </Title>
+          <Title level="ONE">
+            Title lorem
+          </Title>
+          <Text level="ONE">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, neque eu,
+            vulputate vera.
+          </Text>
+          <Button
+            variant="SECONDARY"
+          >
+            Voir plus...
+          </Button>
+        </CardContent>
+      </Card>
+    </RowItem>
+  </Rows>
 
 export default CardExample
diff --git a/packages/react/components/checkbox/Checkbox.example.tsx b/packages/react/components/checkbox/Checkbox.example.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Checkbox from '@/components/checkbox/Checkbox'
 
-const CheckboxExample: React.ReactNode = <>
+const CheckboxExample: React.ReactNode = <div>
   <Checkbox
     label="On peut me cocher grâce au controls ↓ "
     name="checkbox1"
@@ -19,6 +19,6 @@ const CheckboxExample: React.ReactNode = <>
     name="checkbox3"
     value="default value 3"
   />
-</>
+</div>
 
-export default CheckboxExample;
+export default CheckboxExample
diff --git a/packages/react/components/chips/Chips.example.tsx b/packages/react/components/chips/Chips.example.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Text } from '@/components/text'
-import {Chips, ChipsList} from './index'
+import { Chips, ChipsList } from './index'
 
-const ChipsExample: React.ReactNode = <>
+const ChipsExample: React.ReactNode = <div>
   <Text>
     Exemple de selection unique :
   </Text>
@@ -21,7 +21,7 @@ const ChipsExample: React.ReactNode = <>
     >
       Chips 3
     </Chips>
-    <Chips >
+    <Chips>
       Chips 4
     </Chips>
     <Chips
@@ -31,6 +31,6 @@ const ChipsExample: React.ReactNode = <>
       Chips disabled
     </Chips>
   </ChipsList>
-</>
+</div>
 
-export default ChipsExample;
+export default ChipsExample
diff --git a/packages/react/components/link/Link.example.tsx b/packages/react/components/link/Link.example.tsx
@@ -4,7 +4,7 @@ import { Divider } from '@/components/divider'
 import { Text } from '@/components/text'
 
 const LinkExample: React.ReactNode =
-  <>
+  <div>
     <Link>
       {' '}Mot de passe oublié ?
     </Link>
@@ -15,6 +15,6 @@ const LinkExample: React.ReactNode =
         lien standard
       </Link>
     </Text>
-  </>
+  </div>
 
-export default LinkExample;
+export default LinkExample
diff --git a/packages/react/components/list/List.example.tsx b/packages/react/components/list/List.example.tsx
@@ -23,4 +23,4 @@ const ListExample: React.ReactNode =
     </ListItem>
   </List>
 
-export default ListExample;
+export default ListExample
diff --git a/packages/react/components/modal/Modal.example.tsx b/packages/react/components/modal/Modal.example.tsx
@@ -13,4 +13,4 @@ const ModalExample: React.ReactNode =
   triggerMarkup="a"
 />
 
-export default ModalExample;
+export default ModalExample
diff --git a/packages/react/components/otp/Otp.example.tsx b/packages/react/components/otp/Otp.example.tsx
@@ -2,9 +2,10 @@ import React from 'react'
 import { Otp } from './index'
 
 const OtpExample: React.ReactNode =
+  <div>
+    <Otp
+      label="Saisir votre otp"
+    />
+  </div>
 
-  <Otp
-    label="Saisir votre otp"
-  />
-
-export default OtpExample;
+export default OtpExample
diff --git a/packages/react/components/radio/Radio.example.tsx b/packages/react/components/radio/Radio.example.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Radio } from './index'
 
 const RadioExample: React.ReactNode =
-  <>
+  <div>
     <Radio
       label="On peut me cocher grâce au controls ↓ "
       name="checkbox1"
@@ -20,6 +20,6 @@ const RadioExample: React.ReactNode =
       name="checkbox3"
       value="default value 3"
     />
-  </>
+  </div>
 
 export default RadioExample;
diff --git a/packages/react/components/textarea/index.ts b/packages/react/components/textarea/index.ts
@@ -1,3 +1,4 @@
 import Textarea from './Textarea'
+import TextareaExample from './Textarea.example'
 
-export { Textarea }
+export { Textarea, TextareaExample }