Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1236 from atanasster/preset-sketchy-style-guide
- Loading branch information
Showing
3 changed files
with
250 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,232 @@ | ||
| <!-- original from https://github.com/beerose/theme-ui-sketchy/blob/master/src/components/components.mdx --> | ||
|
|
||
| import { useTheme } from '@emotion/react' | ||
| import { | ||
| Message, | ||
| NavLink, | ||
| Divider, | ||
| Container, | ||
| Box, | ||
| Button, | ||
| Card, | ||
| Text, | ||
| Paragraph, | ||
| Image, | ||
| Slider, | ||
| Label, | ||
| Flex, | ||
| Checkbox, | ||
| Select, | ||
| Textarea, | ||
| Radio, | ||
| Input, | ||
| Link, | ||
| Progress, | ||
| Badge, | ||
| Alert, | ||
| } from 'theme-ui' | ||
|
|
||
| export const Radii = () => { | ||
| const theme = useTheme() | ||
| if (typeof theme.radii === 'object') { | ||
| return ( | ||
| <React.Fragment> | ||
| <Divider /> | ||
| <h2>Borders</h2> | ||
| <Flex sx={{ flexWrap: 'wrap' }}> | ||
| {Object.keys(theme.radii).map((key) => ( | ||
| <Box | ||
| key={`border_${key}`} | ||
| p={3} | ||
| m={2} | ||
| color="text" | ||
| bg="muted" | ||
| sx={{ | ||
| border: '2px solid black', | ||
| borderRadius: { key }, | ||
| minWidth: '100px', | ||
| }}> | ||
| {key} | ||
| </Box> | ||
| ))} | ||
| </Flex> | ||
| </React.Fragment> | ||
| ) | ||
| } | ||
| return null | ||
| } | ||
|
|
||
| # Example components | ||
|
|
||
| <Radii /> | ||
|
|
||
| export const Buttons = () => { | ||
| const theme = useTheme() | ||
| if (typeof theme.buttons === 'object') { | ||
| return ( | ||
| <React.Fragment> | ||
| <Divider /> | ||
| <h2>Buttons</h2> | ||
| <Flex sx={{ flexWrap: 'wrap' }}> | ||
| {Object.keys(theme.buttons).map((key) => ( | ||
| <Button key={`button_${key}`} variant={key} m={10}> | ||
| {key} | ||
| </Button> | ||
| ))} | ||
| </Flex> | ||
| </React.Fragment> | ||
| ) | ||
| } | ||
| return null | ||
| } | ||
|
|
||
| <Buttons /> | ||
|
|
||
| --- | ||
|
|
||
| ## Form elements | ||
|
|
||
| <Box | ||
| as="form" | ||
| pb={3} | ||
| onSubmit={(e) => e.preventDefault()} | ||
| sx={{ width: '100%', maxWidth: '500px' }}> | ||
| <Label htmlFor="username">Username</Label> | ||
| <Input id="username" mb={3} /> | ||
| <Label htmlFor="password">Password</Label> | ||
| <Input type="password" id="password" mb={3} /> | ||
| <Box> | ||
| <Label mb={3}> | ||
| <Checkbox /> | ||
| Remember me | ||
| </Label> | ||
| </Box> | ||
| <Label htmlFor="sound">Sound</Label> | ||
| <Select id="sound" mb={3}> | ||
| <option>Beep</option> | ||
| <option>Boop</option> | ||
| <option>Blip</option> | ||
| </Select> | ||
| <Label htmlFor="comment">Comment</Label> | ||
| <Textarea id="comment" rows="6" mb={3} /> | ||
| <Flex mb={3}> | ||
| <Label> | ||
| <Radio name="letter" /> Alpha | ||
| </Label> | ||
| <Label> | ||
| <Radio name="letter" /> Bravo | ||
| </Label> | ||
| <Label> | ||
| <Radio name="letter" /> Charlie | ||
| </Label> | ||
| </Flex> | ||
| <Button>Submit</Button> | ||
| </Box> | ||
|
|
||
| --- | ||
|
|
||
| ## Links | ||
|
|
||
| <Box pb={20}> | ||
| <Link href="#!">Hello</Link> | ||
| </Box> | ||
|
|
||
| export const Badges = () => { | ||
| const theme = useTheme() | ||
| if (typeof theme.badges === 'object') { | ||
| return ( | ||
| <React.Fragment> | ||
| <Divider /> | ||
| <h2>Badges</h2> | ||
| <Flex sx={{ flexWrap: 'wrap' }}> | ||
| {Object.keys(theme.badges).map((key) => ( | ||
| <Badge key={`button_${key}`} variant={key} m={10}> | ||
| {key} | ||
| </Badge> | ||
| ))} | ||
| </Flex> | ||
| </React.Fragment> | ||
| ) | ||
| } | ||
| return null | ||
| } | ||
|
|
||
| <Badges /> | ||
|
|
||
| export const Alerts = () => { | ||
| const theme = useTheme() | ||
| if (typeof theme.alerts === 'object') { | ||
| return ( | ||
| <React.Fragment> | ||
| <Divider /> | ||
| <h2>Alerts</h2> | ||
| <Flex sx={{ flexDirection: 'column' }}> | ||
| {Object.keys(theme.alerts).map((key) => ( | ||
| <Alert key={`button_${key}`} variant={key} m={10}> | ||
| {key} | ||
| </Alert> | ||
| ))} | ||
| </Flex> | ||
| </React.Fragment> | ||
| ) | ||
| } | ||
| return null | ||
| } | ||
|
|
||
| <Alerts /> | ||
|
|
||
| --- | ||
|
|
||
| ## Navigation | ||
|
|
||
| <Box pb={20}> | ||
| <Flex as="nav"> | ||
| <NavLink href="#!" p={2}> | ||
| Home | ||
| </NavLink> | ||
| <NavLink href="#!" p={2}> | ||
| Blog | ||
| </NavLink> | ||
| <NavLink href="#!" p={2}> | ||
| About | ||
| </NavLink> | ||
| </Flex> | ||
| </Box> | ||
|
|
||
| --- | ||
|
|
||
| ## Table | ||
|
|
||
| <table style={{ paddingBottom: 20 }}> | ||
| <thead> | ||
| <tr> | ||
| <th colSpan="2">The table header</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>The table body</td> | ||
| <td>with two columns</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| --- | ||
|
|
||
| ## Card | ||
|
|
||
| <Card | ||
| mb={5} | ||
| sx={{ | ||
| maxWidth: 400, | ||
| padding: '30px', | ||
| }}> | ||
| <Paragraph> | ||
| Cupcake ipsum dolor sit amet chocolate bar. Apple pie macaroon muffin jelly | ||
| candy cake soufflé muffin croissant. Gummies jelly beans cotton candy | ||
| fruitcake. Wafer lemon drops soufflé cookie. Sesame snaps fruitcake | ||
| cheesecake danish toffee marzipan biscuit. | ||
| </Paragraph> | ||
| </Card> | ||
|
|
||
| --- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters