Merge pull request #166 from BouyguesTelecom/add/examples

Add component examples

packages/react/components/accordion/Accordion.example.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from './index'
+
+const AccordionExample: React.ReactNode = <Accordion>
+  <AccordionItem
+    active
+    id='1'
+  >
+    <AccordionHeader>
+      Hello World
+    </AccordionHeader>
+    <AccordionBody>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem., consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+    </AccordionBody>
+  </AccordionItem>
+  <AccordionItem id='DEUX'>
+    <AccordionHeader>
+      Hello World{' '}
+    </AccordionHeader>
+    <AccordionBody>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+    </AccordionBody>
+  </AccordionItem>
+  <AccordionItem id='TROIS'>
+    <AccordionHeader>
+      Hello World
+    </AccordionHeader>
+    <AccordionBody>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+    </AccordionBody>
+  </AccordionItem>
+  <AccordionItem
+    disabled
+    id='QUATRE'
+  >
+    <AccordionHeader>
+      Item disabled
+    </AccordionHeader>
+    <AccordionBody>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+    </AccordionBody>
+  </AccordionItem>
+</Accordion>
+
+export default AccordionExample

packages/react/components/accordion/index.ts

@@ -2,5 +2,6 @@ import Accordion from './Accordion'
 import AccordionItem from './item'
 import AccordionHeader from './header'
 import AccordionBody from './body'
+import AccordionExample from './Accordion.example'
 
-export { Accordion, AccordionItem, AccordionHeader, AccordionBody }
+export { Accordion, AccordionItem, AccordionHeader, AccordionBody, AccordionExample }

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>()

packages/react/components/alert/Alert.example.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Alert } from './index'
+import { Columns, ColumnsItem } from '../columns'
+
+const AlertExample: React.ReactNode =
+<Columns multiline>
+            <ColumnsItem size={6}>
+            <Alert
+              status='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
+              status='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
+              status='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
+              status='WARNING'
+              description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
+              display
+              title='Alert information'
+            />
+            </ColumnsItem>
+        </Columns>
+
+export default AlertExample

packages/react/components/alert/index.ts

@@ -1,4 +1,5 @@
 import Alert, { ToasterAlertProvider } from './Alert'
+import AlertExample from './Alert.example'
 import ToasterContext from './context'
 
-export { Alert, ToasterContext, ToasterAlertProvider }
+export { Alert, AlertExample, ToasterContext, ToasterAlertProvider }

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

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'
 
 /**

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],
-];
+]

packages/react/components/badge/Badge.example.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import {
+  Badge
+} from "./index"
+
+const BadgeExample: React.ReactNode = <Badge
+  content={5}
+/>
+
+export default BadgeExample

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

packages/react/components/badge/index.ts

@@ -1,5 +1,6 @@
 import Badge from './Badge'
+import BadgeExample from './Badge.example'
 
 export * from './BadgeEnum'
 
-export { Badge }
+export { Badge, BadgeExample }

packages/react/components/box/Box.example.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Box, BoxContent, BoxFooter } from './index'
+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 = (
+  <Columns multiline>
+    <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

packages/react/components/box/index.ts

@@ -5,7 +5,8 @@ import BoxHeader from './header'
 import BoxTableContainer from './table-container'
 import BoxItem from './item'
 import { BoxItemSize } from './item/BoxItemEnum'
+import BoxExample from './Box.example'
 
 export * from './BoxProps'
 
-export { Box, BoxItem, BoxItemSize, BoxHeader, BoxContent, BoxFooter, BoxTableContainer }
+export { Box, BoxItem, BoxItemSize, BoxHeader, BoxContent, BoxFooter, BoxTableContainer, BoxExample }

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

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 }

packages/react/components/button/Button.example.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { ButtonList, Button } from './index'
+
+const ButtonExample: React.ReactNode =
+  <ButtonList>
+    <Button
+      variant='CONVERSION'
+    >
+      Button
+    </Button>
+    <Button
+      variant='PRIMARY'
+    >
+      Button
+    </Button>
+    <Button
+      variant='SECONDARY'
+    >
+      Button
+    </Button>
+    <Button
+      disabled
+      variant='PRIMARY'
+    >
+      Button
+    </Button>
+    <Button
+      loading
+      variant='PRIMARY'
+    >
+      Button
+    </Button>
+  </ButtonList>
+
+export default ButtonExample
+

packages/react/components/button/index.ts

@@ -1,6 +1,7 @@
 import Button from './Button'
 import { ButtonList } from './list'
+import ButtonExample from './Button.example'
 
 export * from './ButtonEnum'
 
-export { Button, ButtonList }
+export { Button, ButtonList, ButtonExample }

packages/react/components/card/Card.example.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Card, CardImage, CardContent } from './index'
+import { Title, TitleLevels } from '@/components/title'
+import { Text, TextLevels } from '@/components/text'
+import { Button } from '@/components/button'
+import { Rows, RowItem } from '@/components/rows'
+
+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={TitleLevels.ONE}>
+            Title lorem
+          </Title>
+          <Text level={TextLevels.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={TitleLevels.ONE}>
+            Title lorem
+          </Title>
+          <Text level={TextLevels.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

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,

packages/react/components/card/index.ts

@@ -1,7 +1,8 @@
 import Card from './Card'
 import CardImage from './image'
 import CardContent from './content'
+import CardExample from './Card.example'
 
 export * from './image/CardImageEnum'
 
-export { Card, CardImage, CardContent }
+export { Card, CardImage, CardContent, CardExample }