From 6aa3fec246ba643b3c41ce66e32a4a0809435fff Mon Sep 17 00:00:00 2001
From: Eliott <ecormill@bouyguestelecom.fr>
Date: Thu, 10 Oct 2024 16:17:54 +0200
Subject: [PATCH] more example for alert, button, checkbox, box

---
 .../react/components/alert/Alert.example.tsx  | 45 +++++++--
 packages/react/components/box/Box.example.tsx | 75 ++++++++++++---
 .../components/button/Button.example.tsx      |  5 +
 .../components/checkbox/Checkbox.example.tsx  | 91 +++++++++++++++----
 .../container/Container.example.tsx           |  3 +-
 5 files changed, 184 insertions(+), 35 deletions(-)

diff --git a/packages/react/components/alert/Alert.example.tsx b/packages/react/components/alert/Alert.example.tsx
index 0a72f00e..f102ec68 100644
--- a/packages/react/components/alert/Alert.example.tsx
+++ b/packages/react/components/alert/Alert.example.tsx
@@ -1,11 +1,44 @@
 import React from 'react'
 import { Alert } from './index'
+import { Columns, ColumnsItem } from '../columns'
+
+const AlertExample: React.ReactNode =
+<>
+        <Columns multiline>
+            <ColumnsItem size={6}>
+            <Alert
+              alert='INFO'
+              description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
+              display
+              title='Alert information'
+            />
+            </ColumnsItem>
+            <ColumnsItem size={6}>
+            <Alert
+              alert='ERROR'
+              description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
+              display
+              title='Alert information'
+            />
+            </ColumnsItem>
+            <ColumnsItem size={6}>
+            <Alert
+              alert='SUCCESS'
+              description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
+              display
+              title='Alert information'
+            />
+            </ColumnsItem>
+            <ColumnsItem size={6}>
+            <Alert
+              alert='WARNING'
+              description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
+              display
+              title='Alert information'
+            />
+            </ColumnsItem>
+        </Columns>
+          </>
 
-const AlertExample: React.ReactNode = <Alert
-  alert='INFO'
-  description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
-  display
-  title='Alert information'
-/>
 
 export default AlertExample
diff --git a/packages/react/components/box/Box.example.tsx b/packages/react/components/box/Box.example.tsx
index c9ab48d9..c073e193 100644
--- a/packages/react/components/box/Box.example.tsx
+++ b/packages/react/components/box/Box.example.tsx
@@ -1,17 +1,70 @@
 import React from 'react'
-import { Box, BoxContent } from './index'
+import { Box, BoxContent, BoxFooter } from './index'
 import { Title } from '@/components/title'
 import { Text } from '@/components/text'
+import { Columns, ColumnsItem } from '../columns'
+import { Link } from '../link'
 
-const BoxExample: React.ReactNode = <Box>
-  <BoxContent>
-    <Title level="ONE">
-      Box Title
-    </Title>
-    <Text>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
-    </Text>
-  </BoxContent>
-</Box>
+
+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>
+  </>
 
 export default BoxExample
diff --git a/packages/react/components/button/Button.example.tsx b/packages/react/components/button/Button.example.tsx
index 61e4899e..299a25b9 100644
--- a/packages/react/components/button/Button.example.tsx
+++ b/packages/react/components/button/Button.example.tsx
@@ -3,6 +3,11 @@ import { ButtonList, Button } from './index'
 
 const ButtonExample: React.ReactNode =
   <ButtonList>
+    <Button
+      variant="CONVERSION"
+    >
+      Button
+    </Button>
     <Button
       variant="PRIMARY"
     >
diff --git a/packages/react/components/checkbox/Checkbox.example.tsx b/packages/react/components/checkbox/Checkbox.example.tsx
index f54531fb..a1955237 100644
--- a/packages/react/components/checkbox/Checkbox.example.tsx
+++ b/packages/react/components/checkbox/Checkbox.example.tsx
@@ -1,24 +1,81 @@
 import React from 'react'
 import Checkbox from '@/components/checkbox/Checkbox'
+import { Columns, ColumnsItem } from '../columns'
 
 const CheckboxExample: React.ReactNode = <div>
-  <Checkbox
-    label="On peut me cocher grâce au controls ↓ "
-    name="checkbox1"
-    value="default value 1"
-  />
-  <Checkbox
-    checked
-    label="Je suis cochée"
-    name="checkbox2"
-    value="default value 2"
-  />
-  <Checkbox
-    disabled
-    label="Je suis disabled"
-    name="checkbox3"
-    value="default value 3"
-  />
+            <>
+                <Columns multiline>
+                    <ColumnsItem size={4}>
+                        <Checkbox
+                            label="On peut me cocher grâce au controls ↓ "
+                            name="checkbox1"
+                            onChange={function noRefCheck() { }}
+                            onClick={function noRefCheck() { }}
+                            value="default value 1"
+                        />
+                    </ColumnsItem>
+
+                    <ColumnsItem size={4}>
+                        <Checkbox
+                            checked
+                            label="Je suis cochée"
+                            name="checkbox2"
+                            onClick={function noRefCheck() { }}
+                            value="default value 2"
+                        />
+                    </ColumnsItem>
+
+                    <ColumnsItem size={4}>
+                        <Checkbox
+                            disabled
+                            label="Je suis disabled"
+                            name="checkbox3"
+                            onClick={function noRefCheck() { }}
+                            value="default value 3"
+                        />
+                    </ColumnsItem>
+                    <ColumnsItem size={4}>
+                    <Checkbox
+                        description="On peut me cocher et ajouter une icône grâce au controls ↓ "
+                        horizontalTile
+                        iconTile="tri-check-circle"
+                        label="Checkbox tile horizontal"
+                        name="checkbox"
+                        onChange={function noRefCheck() { }}
+                        onClick={function noRefCheck() { }}
+                        tile
+                        value="default value 1"
+                    />
+                    </ColumnsItem>
+                    <ColumnsItem size={4}>
+                    <Checkbox
+                        checked
+                        description="Je suis la description de la checkbox"
+                        horizontalTile
+                        iconTile="tri-infos-circle"
+                        label="Checkbox tile avec Icône"
+                        name="checkbox"
+                        onClick={function noRefCheck() { }}
+                        tile
+                        value="default value 1"
+                    />
+                    </ColumnsItem>
+                    <ColumnsItem size={4}>
+                    <Checkbox
+                        description="Je suis la description de la checkbox"
+                        disabled
+                        horizontalTile
+                        iconTile="tri-watch"
+                        label="Checkbox tile horizontal disabled"
+                        name="checkbox"
+                        onClick={function noRefCheck() { }}
+                        tile
+                        value="default value 1"
+                    />
+                    </ColumnsItem>
+                </Columns>
+
+            </>
 </div>
 
 export default CheckboxExample
diff --git a/packages/react/components/container/Container.example.tsx b/packages/react/components/container/Container.example.tsx
index 0a441f0a..b44e029b 100644
--- a/packages/react/components/container/Container.example.tsx
+++ b/packages/react/components/container/Container.example.tsx
@@ -4,7 +4,8 @@ import { Box } from '@/components/box'
 import { Text } from '@/components/text'
 import { Container } from './index'
 
-const ContainerExample: React.ReactNode = <Container>
+const ContainerExample: React.ReactNode = 
+<Container>
   <Box>
     <Text>
       Je suis une box dans un container