Skip to content

Commit

Permalink
more example for alert, button, checkbox, box
Browse files Browse the repository at this point in the history
  • Loading branch information
Eliott committed Oct 10, 2024
1 parent 0e52794 commit 6aa3fec
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 35 deletions.
45 changes: 39 additions & 6 deletions packages/react/components/alert/Alert.example.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
75 changes: 64 additions & 11 deletions packages/react/components/box/Box.example.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
5 changes: 5 additions & 0 deletions packages/react/components/button/Button.example.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ import { ButtonList, Button } from './index'

const ButtonExample: React.ReactNode =
<ButtonList>
<Button
variant="CONVERSION"
>
Button
</Button>
<Button
variant="PRIMARY"
>
Expand Down
91 changes: 74 additions & 17 deletions packages/react/components/checkbox/Checkbox.example.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
3 changes: 2 additions & 1 deletion packages/react/components/container/Container.example.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 6aa3fec

Please sign in to comment.