Repository: hackclub/design-system
Branch: master
Commit: 0a4ced2b81a8
Files: 130
Total size: 165.5 KB
Directory structure:
gitextract_7404ezv9/
├── .babelrc
├── .gitignore
├── .npmignore
├── .storybook/
│ ├── .babelrc
│ ├── AAA.js
│ ├── Avatar.js
│ ├── BackgroundImage.js
│ ├── Badge.js
│ ├── BlockLink.js
│ ├── Box.js
│ ├── Button.js
│ ├── Card.js
│ ├── Colors.js
│ ├── Container.js
│ ├── Field.js
│ ├── Flex.js
│ ├── Heading.js
│ ├── Hide.js
│ ├── Icon.js
│ ├── IconButton.js
│ ├── Image.js
│ ├── Input.js
│ ├── Label.js
│ ├── LargeButton.js
│ ├── Layouts.js
│ ├── Link.js
│ ├── Loading.js
│ ├── OutlineButton.js
│ ├── Section.js
│ ├── Sheet.js
│ ├── Slider.js
│ ├── Submit.js
│ ├── Text.js
│ └── config.js
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── docs/
│ ├── Contributing.md
│ ├── GettingStarted.md
│ ├── README.md
│ ├── Theme.md
│ └── ThemeProvider.md
├── package.json
├── src/
│ ├── Avatar.js
│ ├── BackgroundImage.js
│ ├── Badge.js
│ ├── BlockLink.js
│ ├── Box.js
│ ├── Button.js
│ ├── Card.js
│ ├── Container.js
│ ├── Field.js
│ ├── Flex.js
│ ├── Heading.js
│ ├── Hide.js
│ ├── Icon.js
│ ├── IconButton.js
│ ├── Image.js
│ ├── Input.js
│ ├── Label.js
│ ├── LargeButton.js
│ ├── Link.js
│ ├── Loading.js
│ ├── OutlineButton.js
│ ├── Section.js
│ ├── Sheet.js
│ ├── Slider.js
│ ├── Submit.js
│ ├── Text.js
│ ├── ThemeProvider.js
│ ├── __tests__/
│ │ ├── Avatar.js
│ │ ├── BackgroundImage.js
│ │ ├── Badge.js
│ │ ├── BlockLink.js
│ │ ├── Box.js
│ │ ├── Button.js
│ │ ├── Card.js
│ │ ├── Container.js
│ │ ├── Field.js
│ │ ├── Flex.js
│ │ ├── Heading.js
│ │ ├── Hide.js
│ │ ├── Icon.js
│ │ ├── IconButton.js
│ │ ├── Image.js
│ │ ├── Input.js
│ │ ├── Label.js
│ │ ├── LargeButton.js
│ │ ├── Link.js
│ │ ├── Loading.js
│ │ ├── OutlineButton.js
│ │ ├── Section.js
│ │ ├── Sheet.js
│ │ ├── Slider.js
│ │ ├── Submit.js
│ │ ├── Text.js
│ │ ├── ThemeProvider.js
│ │ ├── __snapshots__/
│ │ │ ├── Avatar.js.snap
│ │ │ ├── BackgroundImage.js.snap
│ │ │ ├── Badge.js.snap
│ │ │ ├── BlockLink.js.snap
│ │ │ ├── Box.js.snap
│ │ │ ├── Button.js.snap
│ │ │ ├── Card.js.snap
│ │ │ ├── Container.js.snap
│ │ │ ├── Field.js.snap
│ │ │ ├── Flex.js.snap
│ │ │ ├── Heading.js.snap
│ │ │ ├── Hide.js.snap
│ │ │ ├── Icon.js.snap
│ │ │ ├── IconButton.js.snap
│ │ │ ├── Image.js.snap
│ │ │ ├── Input.js.snap
│ │ │ ├── Label.js.snap
│ │ │ ├── LargeButton.js.snap
│ │ │ ├── Link.js.snap
│ │ │ ├── Loading.js.snap
│ │ │ ├── OutlineButton.js.snap
│ │ │ ├── Section.js.snap
│ │ │ ├── Sheet.js.snap
│ │ │ ├── Slider.js.snap
│ │ │ ├── Submit.js.snap
│ │ │ ├── Text.js.snap
│ │ │ ├── ThemeProvider.js.snap
│ │ │ └── theme.js.snap
│ │ └── theme.js
│ ├── index.js
│ └── theme.js
└── test-setup.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": ["@babel/env", "@babel/preset-react"]
}
================================================
FILE: .gitignore
================================================
node_modules
npm-debug.log
coverage
dist
.site
.DS_Store
================================================
FILE: .npmignore
================================================
src
storybook
docs
test
================================================
FILE: .storybook/.babelrc
================================================
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
================================================
FILE: .storybook/AAA.js
================================================
import React, { Fragment } from 'react'
import { storiesOf } from '@storybook/react'
import { Box, Flex, Heading, Text, Link, Button, Avatar } from '../src'
import styled from 'styled-components'
const List = Box.withComponent('ul')
const Item = Text.withComponent('li')
const Code = Text.withComponent('pre')
const Flag = styled(Link)`
display: inline-block;
background: url(//hackclub.com/orpheus_flag.svg) no-repeat;
background-position: top center;
width: 8rem;
height: 3rem;
z-index: 0;
margin-top: -1rem;
`
storiesOf('👋 Welcome!', module).add('About the project', () => (
<Fragment>
<Flag href="https://hackclub.com" />
<Heading.h1 fontSize={5}>Welcome!</Heading.h1>
<Text fontSize={3} my={2}>
This is{' '}
<Link href="https://hackclub.com" underline children="Hack Club" />
’s Design System.
</Text>
<Text>It’s a collection of React components designed to:</Text>
<List>
<Item>Speed up design and development velocity</Item>
<Item>
Help create consistent, beautiful, and usable UI in our various websites
</Item>
<Item>
Promote best practices for accessibility and responsive web design
</Item>
</List>
<Text>We hope to accomplish these goals by:</Text>
<List>
<Item>Reducing the number of decisions needed when iterating on UI</Item>
<Item>Reducing the amount of code duplication in our apps</Item>
<Item>Serving as the standard for hackclub.com’s visual language</Item>
<Item>
Providing easy-to-use and extensible components for anyone to consume
</Item>
</List>
<Code bg="snow" p={3} my={3}>
yarn add @hackclub/design-system
</Code>
<Flex align="center" wrap>
<Button
href="https://github.com/hackclub/design-system"
mr={2}
children="GitHub"
/>
<Button
href="https://www.npmjs.com/package/@hackclub/design-system"
inverted
children="npm"
/>
</Flex>
<Flex align="center" mt={4}>
<Avatar src="https://hackclub.com/team/lachlan.jpg" size={48} mr={2} />
<Text>- @lachlanjc</Text>
</Flex>
</Fragment>
))
================================================
FILE: .storybook/Avatar.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Avatar } from '../src'
storiesOf('Avatar', module)
.add(
'Avatar component',
withInfo({
inline: true,
text: 'A circular avatar image primitive.'
})(() => <Avatar src="https://hackclub.com/team/zach.jpg" size={64} />)
)
.add('Team', () => (
<>
{['zach', 'max', 'lachlan', 'mingjie', 'athul'].map(key => (
<Avatar mr={2} src={`https://hackclub.com/team/${key}.jpg`} key={key} />
))}
</>
))
================================================
FILE: .storybook/BackgroundImage.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { BackgroundImage, Box, Text, Flex } from '../src'
const props = {
src:
'https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
'aria-label': 'Wooden desk with tools and chair'
}
storiesOf('BackgroundImage', module)
.add(
'BackgroundImage component',
withInfo({
inline: true,
text: 'A <Box /> extension for adding a CSS background-image.'
})(() => (
<BackgroundImage {...props} width={256}>
<Text fontSize={6} bold align="center" color="white" p={4}>
Hello
</Text>
</BackgroundImage>
))
)
.add('Fixed height', () => (
<BackgroundImage height={256} width={512} {...props}>
<Text fontSize={6} bold align="center" color="white" p={4}>
Height
</Text>
</BackgroundImage>
))
.add('Responsive', () => (
<BackgroundImage width={[128, 256, 512]} height="256px" {...props}>
<Text fontSize={6} bold align="center" color="white" p={4}>
Hello
</Text>
</BackgroundImage>
))
.add('Scale', () => (
<BackgroundImage height="512px" scale {...props}>
<Text fontSize={6} bold align="center" color="white" p={4}>
Hover
</Text>
</BackgroundImage>
))
================================================
FILE: .storybook/Badge.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Badge } from '../src'
storiesOf('Badge', module)
.add(
'Badge component',
withInfo({
inline: true,
text: 'Use the <Badge /> component to render a primitive badge.'
})(() => <Badge bg="primary">badge</Badge>)
)
.add('All colors', () => (
<React.Fragment>
{[
'primary',
'accent',
'error',
'warning',
'success',
'info',
'muted'
].map(key => (
<Badge mr={2} bg={key} children={key} key={key} />
))}
</React.Fragment>
))
================================================
FILE: .storybook/BlockLink.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { BlockLink, BackgroundImage, Box, Text } from '../src'
storiesOf('BlockLink', module).add(
'BlockLink',
withInfo({
inline: true,
text: `<BlockLink /> is a styled-components wrapper of <Link /> component to remove text-decoration and color styles, and set display as block.`
})(() => (
<BlockLink href="https://hackclub.com" target="_blank">
<BackgroundImage
src="https://hackclub.com/social-photo_2.jpg'"
width={640}
>
<Box p={4}>
<Text align="center" color="white">
Click to open hackclub.com in a new tab!
</Text>
</Box>
</BackgroundImage>
</BlockLink>
))
)
================================================
FILE: .storybook/Box.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Box } from '../src'
storiesOf('Box', module)
.add(
'Layout component',
withInfo({
text:
'A low-level layout component for setting width, margin, padding, and color',
inline: true
})(() => <Box p={3}>Hello</Box>)
)
.add('Padding', () => <Box p={3}>Hello</Box>)
.add('Margin', () => <Box m={3}>Hello</Box>)
.add('Color', () => (
<Box p={3} color="primary">
Hello
</Box>
))
.add('Background Color', () => (
<Box p={3} color="white" bg="accent">
Hello
</Box>
))
.add('Width', () => (
<Box p={3} width={1 / 2} color="white" bg="success">
Half Width
</Box>
))
.add('Pixel Width', () => (
<Box p={3} width={256} color="white" bg="warning">
256px width
</Box>
))
.add('VW Width', () => (
<Box p={3} width="50vw" color="white" bg="error">
50vw width
</Box>
))
.add('Directional Padding', () => (
<Box p={3}>
<Box m={1} pt={3} color="white" bg="red.5">
Padding Top
</Box>
<Box m={1} pr={3} color="white" bg="orange.5">
Padding Right
</Box>
<Box m={1} pb={3} color="white" bg="lime.5">
Padding Bottom
</Box>
<Box m={1} pl={3} color="white" bg="teal.5">
Padding Left
</Box>
<Box m={1} px={3} color="white" bg="blue.5">
Padding X-Axis
</Box>
<Box m={1} py={3} color="white" bg="violet.5">
Padding Y-Axis
</Box>
</Box>
))
.add('Directional Margin', () => (
<Box p={3}>
<Box mt={3} color="slate" bg="red.1">
Margin Top
</Box>
<Box mr={3} color="slate" bg="orange.1">
Margin Right
</Box>
<Box mb={3} color="slate" bg="lime.1">
Margin Bottom
</Box>
<Box ml={3} color="slate" bg="teal.1">
Margin Left
</Box>
<Box mx={3} color="slate" bg="blue.1">
Margin X-Axis
</Box>
<Box my={3} color="slate" bg="violet.1">
Margin Y-Axis
</Box>
</Box>
))
================================================
FILE: .storybook/Button.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Button, Flex } from '../src'
storiesOf('Button', module)
.add(
'Button component',
withInfo({
inline: true,
text: 'Use the <Button /> component to render a primitive button.'
})(() => <Button>Button</Button>)
)
.add('Colors', () => (
<Flex wrap>
<Button mr={2}>Button</Button>
<Button bg="accent" mr={2}>
Accent
</Button>
<Button bg="success" mr={2}>
Success
</Button>
<Button bg="accent" inverted mr={2}>
Inverted
</Button>
</Flex>
))
.add('Font size', () => (
<Flex align="baseline" wrap>
<Button mr={2} fontSize={1}>
Size 1
</Button>
<Button bg="accent" mr={2} fontSize={2}>
Size 2
</Button>
<Button bg="info" mr={2} fontSize={3}>
Size 3
</Button>
<Button bg="accent" inverted mr={2} fontSize={4}>
Size 4
</Button>
</Flex>
))
.add('Width', () => <Button width={1}>Full Width</Button>)
.add('Disabled', () => <Button disabled>Disabled</Button>)
.add('Scale', () => <Button scale>Scale</Button>)
.add('Chevrons', () => (
<Flex wrap>
<Button bg="info" mr={3} chevronLeft>
Back
</Button>
<Button bg="success" chevronRight>
Forward
</Button>
</Flex>
))
================================================
FILE: .storybook/Card.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Card } from '../src'
storiesOf('Card', module)
.add(
'Card component',
withInfo({
inline: true,
text: 'Box extension to control box-shadow.'
})(() => (
<div>
<Card
boxShadowSize="sm"
my={4}
p={3}
width={256}
color="black"
bg="white"
>
Small Shadow
</Card>
<Card
boxShadowSize="md"
my={4}
p={3}
width={256}
color="black"
bg="white"
>
Medium Shadow
</Card>
<Card
boxShadowSize="lg"
my={4}
p={3}
width={256}
color="black"
bg="white"
>
Large Shadow
</Card>
<Card
boxShadowSize="xl"
my={4}
p={3}
width={256}
color="black"
bg="white"
>
XLarge Shadow
</Card>
</div>
))
)
.add('Box Shadows with custom borders', () => (
<div>
<Card
boxShadowSize="sm"
my={4}
p={3}
width={256}
color="black"
bg="white"
borderWidth={2}
borderColor="accent"
>
Small Shadow
</Card>
<Card
boxShadowSize="md"
my={4}
p={3}
width={256}
color="black"
bg="orange.1"
borderWidth={2}
borderColor="warning"
>
Medium Shadow
</Card>
<Card
boxShadowSize="lg"
my={4}
p={3}
width={256}
color="black"
bg="teal.0"
borderWidth={2}
borderColor="success"
>
Large Shadow
</Card>
<Card
boxShadowSize="xl"
my={4}
p={3}
width={256}
color="black"
bg="red.1"
borderWidth={2}
borderColor="error"
>
XLarge Shadow
</Card>
</div>
))
.add('Box Shadows with varying border radii', () => (
<div>
<Card
boxShadowSize="sm"
my={4}
p={3}
width={256}
color="black"
bg="white"
borderRadius={0}
>
Small Shadow
</Card>
<Card
boxShadowSize="md"
my={4}
p={3}
width={256}
color="black"
bg="white"
borderRadius={8}
>
Medium Shadow
</Card>
<Card
boxShadowSize="lg"
my={4}
p={3}
width={256}
color="black"
bg="white"
borderRadius={24}
>
Large Shadow
</Card>
<Card
boxShadowSize="xl"
my={4}
p={3}
width={256}
color="black"
bg="white"
borderRadius="2rem"
>
XLarge Shadow
</Card>
</div>
))
================================================
FILE: .storybook/Colors.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import styled from 'styled-components'
import { Box, Flex, Text, Heading, theme } from '../src'
const keys = Object.keys(theme.colors).filter(
key => !Array.isArray(theme.colors[key])
)
const next = keys.map(key => ({ key, value: theme.colors[key] }))
const Chip = props => <Box width={1} p={5} {...props} />
const Pre = styled(Text.withComponent('pre'))`
font-family: ${theme.mono};
`
const Card = ({ name, color }) => (
<Box>
<Chip name={name} bg={color} />
<Text fontSize={2} m={0} bold>
{name}
</Text>
<Pre fontSize={0} m={0} color="muted">
{color}
</Pre>
</Box>
)
storiesOf('Color', module).add('Palette', () => (
<div>
<Heading.h1 p={3} fontSize={[4, 5]}>
Color Palette
</Heading.h1>
<Flex wrap>
{next.map(
color =>
!color.key[color.key.length - 1].match(/^\d+$/) ? (
<Box key={color.key} p={3} width={[1, 1 / 2, 1 / 3, 1 / 4, 1 / 5]}>
<Card name={color.key} color={color.value} />
</Box>
) : null
)}
</Flex>
</div>
))
================================================
FILE: .storybook/Container.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Container } from '../src'
storiesOf('Container', module)
.add(
'Container component',
withInfo({
inline: true,
text:
'<Box> to constrain the width of content and center it. Uses theme.maxContainerWidth if no maxWidth is provided'
})(() => (
<Container p={4} bg="smoke" style={{ height: '100vh' }}>
Container Component
</Container>
))
)
.add('Custom maxWidth', () => (
<Container maxWidth={32} p={4} bg="smoke" style={{ height: '100vh' }}>
32rem-width Container
</Container>
))
================================================
FILE: .storybook/Field.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Field } from '../src'
storiesOf('Field', module)
.add(
'Field component',
withInfo({
inline: true,
text: 'Compound component for form fields.'
})(() => <Field name="fname" label="First name" placeholder="Zach" />)
)
.add('with error', () => (
<Field
name="email"
type="email"
label="Email"
placeholder="zach@hackclub.com"
error="can’t be blank"
/>
))
.add('textarea type', () => (
<Field
name="comment"
type="textarea"
label="Write a comment"
placeholder="Be nice :)"
/>
))
.add('select type', () => (
<Field name="select" type="select" label="Select something">
<option>Two</option>
<option>Four</option>
<option>Eight</option>
<option>Sixteen</option>
<option>Thirty-Two</option>
<option>Sixty-Four</option>
</Field>
))
================================================
FILE: .storybook/Flex.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { Flex, Box } from '../src'
storiesOf('Flex', module)
.add('Basic', () => (
<Flex align="center">
<Box width={1 / 2} p={3} color="white" bg="primary">
Flex
</Box>
<Box width={1 / 2} p={1} color="white" bg="accent">
Box
</Box>
</Flex>
))
.add('Wrap', () => (
<Flex wrap>
<Box width={[1, 1 / 2]} p={3} color="white" bg="primary">
Flex
</Box>
<Box width={[1, 1 / 2]} p={3} color="white" bg="accent">
Wrap
</Box>
<Box width={[1, 1 / 2]} p={3} color="white" bg="slate">
Wrap
</Box>
</Flex>
))
.add('Justify', () => (
<Flex justify="space-around">
<Box width={1 / 3} p={2} color="white" bg="primary">
Flex
</Box>
<Box width={1 / 3} p={2} color="white" bg="accent">
Justify
</Box>
</Flex>
))
.add('Direction', () => (
<Flex flexDirection="column">
<Box width={1 / 3} p={2} color="white" bg="primary">
Flex
</Box>
<Box width={1 / 3} p={2} color="white" bg="accent">
Direction
</Box>
</Flex>
))
================================================
FILE: .storybook/Heading.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Heading } from '../src'
const description =
'A type of the <Text> component' +
' using HTML h1-h6 element for setting section headings,' +
' supporting all <Text> props.'
storiesOf('Heading', module)
.add(
'Heading component',
withInfo({
inline: true,
text: description
})(() => <Heading m={3}>Heading component (renders h2)</Heading>)
)
.add('Using dot-notation with h1-h6', () => (
<section>
<Heading.h1>Heading h1</Heading.h1>
<Heading.h2>Heading h2 (default)</Heading.h2>
<Heading.h3>Heading h3</Heading.h3>
<Heading.h4>Heading h4</Heading.h4>
<Heading.h5>Heading h5</Heading.h5>
<Heading.h6>Heading h6</Heading.h6>
</section>
))
.add('Using <Text> props', () => (
<section>
<Heading align="left" bold fontSize={6} color="primary">
Heading Left
</Heading>
<Heading align="center" medium fontSize={5} color="warning">
Heading Center
</Heading>
<Heading align="right" regular fontSize={4} color="error">
Heading Right
</Heading>
</section>
))
================================================
FILE: .storybook/Hide.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { Hide, Flex } from '../src'
storiesOf('Hide', module).add('Hide', () => (
<Flex justify="space-between" color="white">
<Hide xs p={2} bg="red.5">
Hide xs
</Hide>
<Hide sm p={2} bg="orange.5">
Hide sm
</Hide>
<Hide md p={2} bg="green.5">
Hide md
</Hide>
<Hide lg p={2} bg="blue.5">
Hide lg
</Hide>
<Hide xl p={2} bg="violet.5">
Hide xl
</Hide>
</Flex>
))
================================================
FILE: .storybook/Icon.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Icon, Flex, LargeButton } from '../src'
storiesOf('Icon', module)
.add(
'Icon component',
withInfo({
inline: true,
text: 'A wrapper component for @hackclub/icons.'
})(() => <Icon glyph="flag" color="primary" size={48} />)
)
.add('Examples', () => (
<div>
<Flex align="center" mb={3}>
<Icon glyph="challenge" size={128} color="accent" />
<Icon glyph="event-code" size={64} color="info" mx={2} />
<Icon glyph="important" size={32} color="primary" />
</Flex>
<LargeButton
href="https://hackclub-icons.now.sh/"
target="_blank"
chevronRight
>
See all icons
</LargeButton>
</div>
))
================================================
FILE: .storybook/IconButton.js
================================================
import React, { Fragment } from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { IconButton } from '../src'
storiesOf('IconButton', module)
.add(
'IconButton component',
withInfo({
inline: true,
text: 'Use the <IconButton /> component to render a primitive button.'
})(() => <IconButton glyph="view-close" color="error" />)
)
.add('Rectangular button', () => (
<IconButton glyph="send" bg="info" color="white" />
))
.add('Circular button', () => (
<IconButton glyph="checkmark" bg="success" color="white" circle />
))
.add('Disabled circular buttons', () => (
<Fragment>
<IconButton disabled glyph="view-close" color="error" />
<IconButton disabled glyph="view-close" bg="error" color="white" circle />
</Fragment>
))
================================================
FILE: .storybook/Image.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Image, Box } from '../src'
const text = 'A low-level layout component that renders an image'
const props = {
src: 'https://hackclub.com/social-photo_2.jpg',
alt: 'Smiling students at a hackathon'
}
storiesOf('Image', module)
.add(
'Image component',
withInfo({
text,
inline: true
})(() => <Image {...props} />)
)
.add('Responsive width, with Box', () => (
<Box width={1 / 2}>
<Image {...props} />
</Box>
))
================================================
FILE: .storybook/Input.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Box, Input, Label, theme } from '../src'
storiesOf('Input', module)
.add(
'Input component',
withInfo({
inline: true,
text:
'Simple styled input component that accepts a color and optionally, an error message.'
})(() => <Input my={3} id="hello" />)
)
.add('With external label', () => (
<Box width={256}>
<Label fontSize={4} htmlFor="sample-input">
Label!
</Label>
<Input id="sample-input" placeholder="Click the label" />
</Box>
))
================================================
FILE: .storybook/Label.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Label, Input } from '../src'
storiesOf('Label', module)
.add(
'Label component',
withInfo({
inline: true,
text:
'Simple styled label component that supports a number of the styled-system props.'
})(() => <Label m={3}>Label Component</Label>)
)
.add('Using fontSize', () => (
<div>
<Label fontSize={6}>Label with fontSize 6</Label>
<Label fontSize={5}>Label with fontSize 5</Label>
<Label fontSize={4}>Label with fontSize 4</Label>
<Label fontSize={3}>Label with fontSize 3</Label>
<Label fontSize={2}>Label with fontSize 2</Label>
<Label fontSize={1}>Label with fontSize 1</Label>
<Label fontSize={0}>Label with fontSize 0</Label>
</div>
))
.add('Spacing', () => (
<div>
<Label mt={4} mb={2}>
A tish of margin
</Label>
<Label pl={3}>A dash of padding</Label>
</div>
))
.add('Colors', () => (
<div>
<Label color="primary">A primary label</Label>
<Label color="accent">An accent label</Label>
</div>
))
.add('htmlFor', () => (
<div>
Clicking{' '}
<Label fontSize={4} htmlFor="sample-input">
here
</Label>{' '}
should focus on the input element.
<br />
<Input id="sample-input" />
</div>
))
================================================
FILE: .storybook/LargeButton.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { LargeButton } from '../src'
storiesOf('LargeButton', module)
.add(
'LargeButton component',
withInfo({
inline: true,
text: 'A bigger <Button /> component.'
})(() => <LargeButton>Button</LargeButton>)
)
.add('Colors', () => (
<div>
<LargeButton mr={3}>Button</LargeButton>
<LargeButton bg="accent" mr={3}>
Accent
</LargeButton>
<LargeButton bg="success" mr={3}>
Success
</LargeButton>
<LargeButton bg="accent" inverted mr={3}>
Inverted
</LargeButton>
</div>
))
.add('Width', () => <LargeButton width={1}>Full Width</LargeButton>)
.add('Disabled', () => <LargeButton disabled>Disabled</LargeButton>)
================================================
FILE: .storybook/Layouts.js
================================================
import React from 'react'
import styled from 'styled-components'
import { storiesOf } from '@storybook/react'
import { Flex, Box, Text, Icon, Image, Heading, Card, theme } from '../src'
storiesOf('Layout Examples', module)
.add('Grid', () => (
<Box p={4}>
<Flex wrap mx={-3} color="white">
<Box width={[1, 1 / 2]} px={3} mb={4}>
<Box bg="indigo.4" p={3}>
<Text>Hello</Text>
</Box>
</Box>
<Box width={[1, 1 / 2]} px={3} mb={4}>
<Box bg="indigo.5" p={3}>
<Text>Hello</Text>
</Box>
</Box>
</Flex>
</Box>
))
.add('Two-column', () => (
<Flex color="white">
<Box px={3} width={1 / 4}>
<Box bg="green.6" style={{ minHeight: '50vh' }}>
<Text p={3}>Hello</Text>
</Box>
</Box>
<Box px={3} width={3 / 4}>
<Box bg="teal.6" style={{ minHeight: '50vh' }}>
<Text p={3}>Hello</Text>
</Box>
</Box>
</Flex>
))
.add('Navbar', () => (
<Flex p={2} align="center" color="white" bg="accent">
<Border mr={3}>
<Icon glyph="menu" />
</Border>
<Text bold mx={2}>
Hello
</Text>
<Text mx={2}>Navbar</Text>
<Text ml="auto" mr={2}>
Right Side
</Text>
</Flex>
))
.add('Tiled Cards', () => (
<Flex wrap>
{cards.map(card => (
<Box key={card.id} p={3} width={[1 / 2, 1 / 3, 1 / 4]}>
<Tile {...card} />
</Box>
))}
</Flex>
))
const Border = styled(Box)`
border: 1px solid ${({ theme }) => theme.colors.smoke};
border-radius: ${({ theme }) => theme.radius};
line-height: 0;
`
const Tile = ({ image, title, text }) => (
<Card boxShadowSize="sm">
<Image src={image} width="512" height="256" />
<Box p={2}>
<Heading fontSize={2} bold>
{title}
</Heading>
<Text fontSize={1} color="slate">
{text}
</Text>
</Box>
</Card>
)
const cards = Array.from({ length: 12 }).map((n, i) => ({
id: i,
title: 'Hello' + i,
text: 'Card',
image: `http://placehold.it/512x256/${theme.colors.accent.replace('#', '')}`
}))
================================================
FILE: .storybook/Link.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Link } from '../src'
storiesOf('Link', module)
.add(
'Link component',
withInfo({
inline: true,
text: '<Text> extension for links.'
})(() => (
<Link href="https://hackclub.com" target="_blank">
Homepage
</Link>
))
)
.add('Open in same tab', () => (
<Link href="https://hackclub.com" target="_self">
Open the homepage in same tab
</Link>
))
.add('Color underline', () => (
<Link href="https://hackclub.com" color="primary" bold underline>
I’m extra Hack Club
</Link>
))
.add('Chevrons', () => (
<Link href="https://hackclub.com" fontSize={3} hoverline bold chevronRight>
Explore more
</Link>
))
================================================
FILE: .storybook/Loading.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Loading } from '../src'
storiesOf('Loading', module).add(
'Loading component',
withInfo({
inline: true,
text: 'An animated loading indicator. Centers itself in parent container.'
})(() => <Loading />)
)
================================================
FILE: .storybook/OutlineButton.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { OutlineButton, LargeButton } from '../src'
storiesOf('OutlineButton', module)
.add(
'OutlineButton component',
withInfo({
inline: true,
text: 'A <Button /> component with only an outline.'
})(() => <OutlineButton>Button</OutlineButton>)
)
.add('Colors', () => (
<div>
<OutlineButton mr={3}>Button</OutlineButton>
<OutlineButton bg="accent" mr={3}>
Accent
</OutlineButton>
<OutlineButton bg="success" mr={3}>
Success
</OutlineButton>
</div>
))
.add('Width', () => <OutlineButton width={1}>Full Width</OutlineButton>)
.add('Disabled', () => <OutlineButton disabled>Disabled</OutlineButton>)
================================================
FILE: .storybook/Section.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Section, Heading, Text } from '../src'
storiesOf('Section', module).add(
'Section component',
withInfo({
inline: true,
text:
'A section component meant to be used with a solid/gradient background.'
})(() => (
<Section bg="accent">
<Heading.h1>Hello</Heading.h1>
<Text>Hello</Text>
</Section>
))
)
================================================
FILE: .storybook/Sheet.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Sheet } from '../src'
storiesOf('Sheet', module).add(
'Sheet component',
withInfo({
inline: true,
text: 'A large, raised container card.'
})(() => (
<Sheet maxWidth={32} color="black" my={5}>
Hi, I’m a Sheet!
</Sheet>
))
)
================================================
FILE: .storybook/Slider.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Slider } from '../src'
storiesOf('Slider', module).add(
'Slider component',
withInfo({
inline: true,
text: 'Range input slider.'
})(() => <Slider />)
)
================================================
FILE: .storybook/Submit.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Submit } from '../src'
storiesOf('Submit', module).add(
'Submit component',
withInfo({
inline: true,
text: 'A form component for a submit button. Available in two sizes.'
})(() => (
<form>
<Submit value="Standard" mr={3} />
<Submit.lg value="Large" />
</form>
))
)
================================================
FILE: .storybook/Text.js
================================================
import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { Text } from '../src'
storiesOf('Text', module)
.add(
'Typography component',
withInfo({
inline: true,
text:
'A low-level component for setting font-size, typographic styles, margin, and color'
})(() => <Text m={3}>Hello</Text>)
)
.add('fontSize', () => (
<div>
<Text fontSize={6}>Hello 6</Text>
<Text fontSize={5}>Hello 5</Text>
<Text fontSize={4}>Hello 4</Text>
<Text fontSize={3}>Hello 3</Text>
<Text fontSize={2}>Hello 2</Text>
<Text fontSize={1}>Hello 1</Text>
<Text fontSize={0}>Hello 0</Text>
</div>
))
.add('align', () => (
<div>
<Text align="left">Hello Left</Text>
<Text align="center">Hello Center</Text>
<Text align="right">Hello Right</Text>
</div>
))
.add('regular', () => <Text regular>Hello Regular</Text>)
.add('bold', () => <Text bold>Hello Bold</Text>)
.add('caps', () => <Text caps>Hello Caps</Text>)
.add('maxWidth', () => (
<Text maxWidth={16}>
Hello I am some very long text that will be wrapped at 16rem because of my
maxWidth prop!
</Text>
))
.add('strikethrough', () => <Text.s>Hello Strikethrough</Text.s>)
.add('spacing', () => (
<div>
<Text mt={4} mb={2}>
Hello Margin
</Text>
<Text p={3}>Hello Padding</Text>
</div>
))
.add('color', () => (
<div>
<Text color="primary">Hello Primary</Text>
<Text color="accent">Hello Accent</Text>
<Text color="error">Hello Error</Text>
</div>
))
================================================
FILE: .storybook/config.js
================================================
import React from 'react'
import { configure, addDecorator } from '@storybook/react'
import { ThemeProvider, Box } from '../src'
addDecorator(story => (
<ThemeProvider webfonts>
<Box p={3}>{story()}</Box>
</ThemeProvider>
))
const req = require.context('.', true, /\.js$/)
const load = () => {
req.keys().forEach(req)
}
configure(load, module)
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- 12
after_success:
- npm run storybook
deploy:
provider: pages
skip_cleanup: true
github_token: $GH_TOKEN
local_dir: .site
on:
branch: master
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
If you’d like to contribute to the design system, we’d love to have your help.
Contributing doesn’t necessarily mean committing code, we also encourage you to:
- Open issues
- Join in on discussions in issues and PRs
- Help write documentation (storybook)
- Use the Design System and provide feedback
## Local Development
To contribute code to the Design System, first you’ll need to set it up for local development.
### Clone the repo
```sh
git clone https://github.com/hackclub/design-system.git
cd design-system
```
### Install dependencies
```sh
yarn
```
### Running tests
We use [Jest][jest] for testing, including unit tests for functionality and [snapshot testing][snapshots] for components.
```sh
yarn test
```
If you make intentional changes to an existing component, you will need to update its snapshot:
```sh
yarn test -u
```
If you want to check test coverage (goal is 100% coverage):
```sh
yarn run coverage
```
Jest will run, generate a coverage report, and open it in your browser.
### Storybook
We use [Storybook][storybook] for isolated UI component development, and
documentation for all the available components.
To run storybook locally:
```sh
yarn run dev
open http://localhost:8000/
```
## Creating a New Component
To make a new component you’ll need to make three files: the source code,
the test, and the storybook demo.
1. **Source file.** This goes in `src/New.js`, and should export a
`styled-component` with `export default New` at the end and the component’s
`propTypes` defined. Add an export to `src/index.js` so the component can be
used elsewhere.
2. **Test.** The test should verify the core functionality works, using
Jest’s snapshot testing. It should be located at `src/__tests__/New.js`,
and follow the others’ formats, like [this example test][example_test].
Once you’ve written the test, check that it passes (`npm test -- -u`) and
verify 100% test coverage of your component (`npm run coverage`).
3. **Storybook.** We use the storybook as a development environment and for
documentation. Create `.storybook/New.js` following the format of
[this example storybook][example_storybook] demoing sample usage and props.
[jest]: https://facebook.github.io/jest/
[snapshots]: https://facebook.github.io/jest/docs/en/snapshot-testing.html#content
[storybook]: https://storybook.js.org
[example_test]: ../src/__tests__/Badge.js
[example_storybook]: ../.storybook/Badge.js
================================================
FILE: LICENSE.md
================================================
# The MIT License (MIT)
Copyright (c) 2017–2019 hackclub.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
# Hack Club Design System
> Hack Club has transitioned to using `hackclub/theme` as its design system. This project is only being patched when needed.
https://design.hackclub.com/
```sh
yarn add @hackclub/design-system
```
This project is heavily inspired by [Priceline.com’s design system][pcln].
## Contributing
Please be sure to read the [Contributing](docs/Contributing.md) doc :)
## [Documentation](docs)
- [Getting Started](docs/GettingStarted.md)
- [Contributing](docs/Contributing.md)
- [Theme](docs/Theme.md)
- [ThemeProvider](docs/ThemeProvider.md)
## Goals
The core goals of this project are to:
- Speed up design and development velocity
- Help create consistent, beautiful, and usable UI in our various websites
- Promote best practices for accessibility and responsive web design
We hope to accomplish these goals by:
- Reducing the number of decisions needed when iterating on UI
- Reducing the amount of code duplication in our apps
- Serving as the standard for hackclub.com’s visual language
- Providing easy-to-use and extensible components for anyone to consume
[pcln]: https://github.com/pricelinelabs/design-system
[site]: https://design.hackclub.com/
[MIT License](LICENSE.md)
================================================
FILE: docs/Contributing.md
================================================
# Contributing
If you’d like to contribute to the design system, we’d love to have your help.
Contributing doesn’t necessarily mean committing code, we also encourage you to:
- Open issues
- Join in on discussions in issues and PRs
- Help write documentation (storybook)
- Use the Design System and provide feedback
## Local Development
To contribute code to the Design System, first you’ll need to set it up for local development.
### Clone the repo
```sh
git clone https://github.com/hackclub/design-system.git
cd design-system
```
### Install dependencies
```sh
yarn
```
### Running tests
We use [Jest][jest] for testing, including unit tests for functionality and [snapshot testing][snapshots] for components.
```sh
yarn test
```
If you make intentional changes to an existing component, you will need to update its snapshot:
```sh
yarn test -u
```
If you want to check test coverage (goal is 100% coverage):
```sh
yarn run coverage
```
Jest will run, generate a coverage report, and open it in your browser.
### Storybook
We use [Storybook][storybook] for isolated UI component development, and
documentation for all the available components.
To run storybook locally:
```sh
yarn run dev
open http://localhost:8000/
```
## Creating a New Component
To make a new component you’ll need to make three files: the source code,
the test, and the storybook demo.
1. **Source file.** This goes in `src/New.js`, and should export a
`styled-component` with `export default New` at the end and the component’s
`propTypes` defined. Add an export to `src/index.js` so the component can be
used elsewhere.
2. **Test.** The test should verify the core functionality works, using
Jest’s snapshot testing. It should be located at `src/__tests__/New.js`,
and follow the others’ formats, like [this example test][example_test].
Once you’ve written the test, check that it passes (`npm test -- -u`) and
verify 100% test coverage of your component (`npm run coverage`).
3. **Storybook.** We use the storybook as a development environment and for
documentation. Create `.storybook/New.js` following the format of
[this example storybook][example_storybook] demoing sample usage and props.
[jest]: https://facebook.github.io/jest/
[snapshots]: https://facebook.github.io/jest/docs/en/snapshot-testing.html#content
[storybook]: https://storybook.js.org
[example_test]: ../src/__tests__/Badge.js
[example_storybook]: ../.storybook/Badge.js
================================================
FILE: docs/GettingStarted.md
================================================
# Getting Started
Install the Design System in your application
```sh
yarn add @hackclub/design-system
```
## ThemeProvider
Wrap the root of your application with the `ThemeProvider` component,
which adds the Design System theme to context for use in `styled-components`
and sets typographic defaults (including loading our webfont, Averta).
This should only be included once in your application.
```jsx
import React from 'react'
import { ThemeProvider } from '@hackclub/design-system'
const App = () => (
<ThemeProvider webfonts>
<h1>Hello</h1>
</ThemeProvider>
)
```
## Primitive UI Components
The preferred way of using the design system in a React application is with UI primitives.
With effective use of the UI primitives, you can reduce the need to write custom CSS in your application.
```jsx
import React from 'react'
import { Box, Text } from '@hackclub/design-system'
const SomeView = props => (
<Box bg="primary" p={3}>
<Text color="white">Hello</Text>
</Box>
)
```
================================================
FILE: docs/README.md
================================================
# Documentation
- [Getting Started](GettingStarted.md)
- [Contributing](Contributing.md)
- [ThemeProvider](ThemeProvider.md)
- [Theme](Theme.md)
================================================
FILE: docs/Theme.md
================================================
# Theme
The theme style constants should be used whenever low-level access to font
sizes, margin, padding, media queries, and colors are needed.
```js
import { theme } from '@hackclub/design-system'
// or
import { colors, mediaQueries, fontSizes, space } from '@hackclub/design-system'
```
## Colors
```js
import { colors } from '@hackclub/design-system'
colors.primary // '#e42d42'
```
## Font Sizes
```js
import { fontSizes } from '@hackclub/design-system'
fontSizes[2] // 16
```
The theme includes a typographic scale as the `fontSizes` array.
Use these values whenever declaring a `font-size` in CSS.
## Spacing Scale
The `space` array should be used whenever declaring margin or padding values.
```js
import { space } from '@hackclub/design-system'
space[0] // 0
space[1] // 4
space[2] // 8
space[3] // 16
space[4] // 32
space[5] // 64
space[6] // 128
```
## Media Queries
The `mediaQueries` array can be used to add styles targeted for different
screen sizes. The design system is built for mobile-first design, so all media
queries use min-width.
```js
import { mediaQueries } from '@hackclub/design-system'
mediaQueries[0] // @media screen and (min-width:32em)
mediaQueries[1] // @media screen and (min-width:48em)
mediaQueries[2] // @media screen and (min-width:64em)
mediaQueries[3] // @media screen and (min-width:80em)
mediaQueries.sm // alias for mediaQueries[0]
mediaQueries.md // alias for mediaQueries[1]
mediaQueries.lg // alias for mediaQueries[2]
mediaQueries.xl // alias for mediaQueries[3]
```
================================================
FILE: docs/ThemeProvider.md
================================================
# ThemeProvider
The ThemeProvider component is a wrapper around the styled-components’ [ThemeProvider][1]
Wrap the root of your application with the `ThemeProvider` component,
which adds the Design System theme to context for use in styled-components
and sets typographic defaults (including, optionally, loading our webfont, Averta).
This should only be included once in your application.
```jsx
<ThemeProvider webfonts>
<Heading>Hello</Heading>
</ThemeProvider>
```
[1]: https://www.styled-components.com/docs/advanced#theming
================================================
FILE: package.json
================================================
{
"name": "@hackclub/design-system",
"version": "0.0.1-18",
"description": "Hack Club Design System",
"main": "dist/index.js",
"scripts": {
"prepare": "babel src -d dist --ignore __tests__ && yarn run fmt",
"dev": "start-storybook -p 9000 -c .storybook",
"build": "rm -rf .site && build-storybook -c .storybook -o .site",
"deploy": "storybook-to-ghpages",
"fmt": "npx prettier {.storybook,src}/**/*.js --single-quote --no-semi --write",
"coverage": "jest --coverage && serve coverage -o",
"test": "jest"
},
"author": "Lachlan Campbell <lachlan@hackclub.com>",
"license": "MIT",
"dependencies": {
"@hackclub/icons": "^0.0.3",
"lodash": "^4.17.15",
"palx": "1.0.2",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"styled-components": "3.4.10",
"styled-system": "1.1.7"
},
"devDependencies": {
"@babel/cli": "^7.8.3",
"@babel/core": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@babel/preset-react": "^7.8.3",
"@storybook/addon-info": "^5.3.9",
"@storybook/react": "^5.3.9",
"@storybook/storybook-deployer": "^2.8.1",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-preset-stage-0": "^6.24.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jest": "^24.9.0",
"jest-styled-components": "^6.3.4",
"react-test-renderer": "^16.12.0"
},
"jest": {
"coverageReporters": [
"text",
"lcov",
"html"
],
"collectCoverage": true,
"coveragePathIgnorePatterns": [
"dist/"
],
"setupFilesAfterEnv": [
"./test-setup.js"
]
},
"repository": {
"type": "git",
"url": "git+https://github.com/hackclub/design-system.git"
},
"bugs": {
"url": "https://github.com/hackclub/design-system/issues"
},
"homepage": "https://design.hackclub.com"
}
================================================
FILE: src/Avatar.js
================================================
import styled from 'styled-components'
import Box from './Box'
import PropTypes from 'prop-types'
import theme from './theme'
const px = a => (typeof a === 'number' ? `${a}px` : a)
const Avatar = styled(Box.withComponent('img'))`
border-radius: ${({ theme }) => theme.pill};
display: inline-block;
width: ${props => px(props.size)};
height: ${props => px(props.size)};
`
Avatar.displayName = 'Avatar'
Avatar.propTypes = {
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
}
Avatar.defaultProps = {
theme,
size: 48
}
export default Avatar
================================================
FILE: src/BackgroundImage.js
================================================
import Box from './Box'
import PropTypes from 'prop-types'
import theme from './theme'
import styled, { css } from 'styled-components'
const src = props => props.src && { backgroundImage: `url(${props.src})` }
const height = props => props.height && { height: props.height }
const BackgroundImage = styled(Box)`
background-position: center;
background-size: cover;
background-repeat: no-repeat;
${src} ${height};
${props =>
props.scale &&
css`
overflow: hidden;
transition: ${({ theme }) => theme.transition} background-size;
will-change: background-size;
background-size: auto ${({ theme }) => theme.scaleFactor * 100}%;
&:hover {
background-size: auto
${({ theme }) => (theme.scaleFactor + 1 / 16) * 100}%;
}
${({ theme }) => theme.mediaQueries.reduceMotion} {
transition: none;
background-size: cover !important;
}
`};
`
BackgroundImage.displayName = 'BackgroundImage'
BackgroundImage.propTypes = {
/** background-image url */
src: PropTypes.string.isRequired,
/** add hover animation */
scale: PropTypes.bool,
/** accessible label */
'aria-label': PropTypes.string.isRequired
}
BackgroundImage.defaultProps = {
theme,
bg: 'smoke'
}
export default BackgroundImage
================================================
FILE: src/Badge.js
================================================
import styled from 'styled-components'
import Text from './Text'
import theme from './theme'
const Badge = styled(Text.span)`
border-radius: ${({ theme }) => theme.pill};
display: inline-block;
font-weight: normal;
letter-spacing: 0.0375em;
line-height: 1.125;
text-transform: uppercase;
`
Badge.displayName = 'Badge'
Badge.defaultProps = {
theme,
px: 2,
py: 1,
bg: 'primary',
color: 'white',
fontSize: 1
}
export default Badge
================================================
FILE: src/BlockLink.js
================================================
import styled from 'styled-components'
import Text from './Text'
const BlockLink = styled(Text.withComponent('a')).attrs({ color: 'inherit' })`
display: block;
text-decoration: none;
`
BlockLink.displayName = 'BlockLink'
export default BlockLink
================================================
FILE: src/Box.js
================================================
import React from 'react'
import styled from 'styled-components'
import {
space,
width,
color,
fontSize,
textAlign,
propTypes
} from 'styled-system'
import theme from './theme'
const Box = styled.div([], space, width, color, fontSize, textAlign)
Box.displayName = 'Box'
Box.header = Box.withComponent('header')
Box.main = Box.withComponent('main')
Box.article = Box.withComponent('article')
Box.section = Box.withComponent('section')
Box.footer = Box.withComponent('footer')
Box.defaultProps = {
theme
}
Box.propTypes = {
...propTypes.textAlign,
...propTypes.fontSize,
...propTypes.space,
...propTypes.color
}
export default Box
================================================
FILE: src/Button.js
================================================
import Box from './Box'
import theme, { cx, hexa } from './theme'
import { css } from 'styled-components'
import PropTypes from 'prop-types'
const Button = Box.withComponent('a').extend`
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: ${({ theme }) => theme.bold};
line-height: 1.125;
appearance: none;
cursor: pointer;
transition: ${({ theme }) => theme.transition} box-shadow;
box-shadow: 0 2px 4px ${({ theme }) => theme.shadowColor};
border-radius: ${({ theme }) => theme.pill};
border: none;
${props =>
props.inverted && {
backgroundColor: cx(props.color),
color: cx(props.bg)
}};
&:hover,
&:focus {
outline: 0;
box-shadow: 0 2px 6px
${props =>
props.inverted ? props.theme.shadowColor : hexa(props.bg, 0.25)};
}
&:active {
outline: 0;
box-shadow: 0 2px 8px 2px
${props =>
props.inverted ? props.theme.shadowColor : hexa(props.bg, 0.25)};
}
${props => props.disabled && { opacity: 0.25, cursor: 'not-allowed' }};
${props =>
props.scale &&
css`
transition: ${({ theme }) => theme.transition} all;
will-change: transform;
transform: scale(1);
&:hover,
&:focus {
transform: scale(${({ theme }) => theme.scaleFactor});
}
${({ theme }) => theme.mediaQueries.reduceMotion} {
transform: none;
}
`};
${props =>
props.chevronLeft &&
css`
&:before {
content: '«';
padding-right: 0.25em;
}
`};
${props =>
props.chevronRight &&
css`
&:after {
content: '»';
padding-left: 0.25em;
}
`};
`
Button.displayName = 'Button'
Button.propTypes = {
/** flip colors */
inverted: PropTypes.bool,
/** add hover/focus animation */
scale: PropTypes.bool,
/** add left text arrows */
chevronLeft: PropTypes.bool,
/** add right text arrows */
chevronRight: PropTypes.bool
}
Button.defaultProps = {
theme,
bg: 'primary',
color: 'white',
fontSize: 3,
m: 0,
px: 3,
py: 2
}
Button.button = Button.withComponent('button')
Button.input = Button.withComponent('input')
export default Button
================================================
FILE: src/Card.js
================================================
import styled from 'styled-components'
import Box from './Box'
import theme from './theme'
import PropTypes from 'prop-types'
import { borderRadius, propTypes } from 'styled-system'
const boxShadow = props => {
const boxShadows = {
sm: theme.boxShadows[0],
md: theme.boxShadows[1],
lg: theme.boxShadows[2],
xl: theme.boxShadows[3]
}
return { boxShadow: boxShadows[props.boxShadowSize] }
}
const boxBorder = props => ({
border:
props.borderWidth > 0
? `${props.borderWidth}px solid ${props.theme.colors[props.borderColor]}`
: null
})
const Card = styled(Box)([], boxShadow, boxBorder, borderRadius)
Card.propTypes = {
/** use scale alias for theme values or null to remove shadow */
boxShadowSize: PropTypes.oneOf([null, 'sm', 'md', 'lg', 'xl']),
borderColor: PropTypes.string,
...propTypes.borderRadius,
/** use 0 to remove border */
borderWidth: PropTypes.oneOf([0, 1, 2])
}
Card.defaultProps = {
theme,
borderColor: 'smoke',
borderRadius: 1,
borderWidth: 0
}
Card.displayName = 'Card'
export default Card
================================================
FILE: src/Container.js
================================================
import styled from 'styled-components'
import Box from './Box'
import PropTypes from 'prop-types'
const Container = styled(Box)`
max-width: ${props => props.maxWidth}rem;
`
Container.displayName = 'Container'
Container.propTypes = {
maxWidth: PropTypes.number
}
Container.defaultProps = {
width: 1,
maxWidth: 72,
mx: 'auto'
}
export default Container
================================================
FILE: src/Field.js
================================================
import React from 'react'
import Label from './Label'
import Flex from './Flex'
import Text from './Text'
import Input, { InputSelect, InputTextarea } from './Input'
import Slider from './Slider'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import theme from './theme'
export const Error = styled(Text).attrs({
className: 'error',
color: 'error',
fontSize: 1,
ml: 1,
my: 0
})`
font-weight: normal;
&:before {
content: '— ';
}
`
const Field = ({ type, name, label, placeholder, error, ...props }) => {
const Component =
{
select: InputSelect,
slider: Slider,
textarea: InputTextarea
}[type] || Input
return (
<Label className={type} id={name} mb={2}>
<Flex align="center" mb="2px" wrap>
{label}
{error && <Error children={error} />}
</Flex>
<Component name={name} type={type} placeholder={placeholder} {...props} />
</Label>
)
}
Field.displayName = 'Field'
Field.propTypes = {
/** choose alternate field type (like email, password, textarea, or select) */
type: PropTypes.oneOf([
'checkbox',
'date',
'email',
'file',
'number',
'password',
'select',
'tel',
'textarea',
'url',
'text'
]),
name: PropTypes.string.isRequired,
/** label text */
label: PropTypes.string.isRequired,
/** validation message */
error: PropTypes.string,
/** placeholder text */
placeholder: PropTypes.string
}
Field.defaultProps = {
theme,
type: 'text'
}
export default Field
================================================
FILE: src/Flex.js
================================================
import styled from 'styled-components'
import {
alignSelf,
alignItems,
justifyContent,
flexDirection,
flex,
propTypes
} from 'styled-system'
import Box from './Box'
import PropTypes from 'prop-types'
const wrap = props => (props.wrap ? { flexWrap: 'wrap' } : null)
const Flex = styled(Box)`
display: flex;
${alignSelf} ${alignItems} ${justifyContent} ${wrap} ${flexDirection} ${flex};
`
Flex.propTypes = {
wrap: PropTypes.bool,
...propTypes.alignSelf,
...propTypes.alignItems,
...propTypes.justifyContent,
...propTypes.flexDirection,
...propTypes.flex
}
Flex.displayName = 'Flex'
export default Flex
================================================
FILE: src/Heading.js
================================================
import styled from 'styled-components'
import Text from './Text'
import theme from './theme'
const Heading = Text.withComponent('h2').extend`
line-height: 1.25;
`
Heading.displayName = 'Heading'
Heading.defaultProps = {
theme,
regular: true,
fontSize: 5,
m: 0
}
Heading.h1 = styled(Heading.withComponent('h1'))``
Heading.h1.defaultProps = {
bold: true,
fontSize: 6,
m: 0
}
Heading.h2 = Heading.withComponent('h2')
Heading.h2.defaultProps = {
bold: true,
fontSize: 5,
m: 0
}
Heading.h3 = Heading.withComponent('h3')
Heading.h3.defaultProps = {
bold: true,
fontSize: 4,
m: 0
}
Heading.h4 = Heading.withComponent('h4')
Heading.h4.defaultProps = {
regular: true,
fontSize: 3,
m: 0
}
Heading.h5 = Heading.withComponent('h5')
Heading.h5.defaultProps = {
bold: true,
fontSize: 2,
m: 0
}
Heading.h6 = Heading.withComponent('h6')
Heading.h6.defaultProps = {
bold: true,
caps: true,
fontSize: 0,
m: 0
}
export default Heading
================================================
FILE: src/Hide.js
================================================
import styled from 'styled-components'
import Box from './Box'
import PropTypes from 'prop-types'
import theme from './theme'
const mw = em => em - 0.01
const breakpoints = props => ({
xs: `@media screen and (max-width: ${mw(props.theme.breakpoints[0])}em)`,
sm: `@media screen and (min-width: ${
props.theme.breakpoints[0]
}em) and (max-width: ${mw(props.theme.breakpoints[1])}em)`,
md: `@media screen and (min-width: ${
props.theme.breakpoints[1]
}em) and (max-width: ${mw(props.theme.breakpoints[2])}em)`,
lg: `@media screen and (min-width: ${
props.theme.breakpoints[2]
}em) and (max-width: ${mw(props.theme.breakpoints[3])}em)`,
xl: `@media screen and (min-width: ${props.theme.breakpoints[3]}em)`
})
const hidden = key => props =>
props[key] ? { [breakpoints(props)[key]]: { display: 'none' } } : null
const Hide = styled(Box)(
[],
hidden('xs'),
hidden('sm'),
hidden('md'),
hidden('lg'),
hidden('xl')
)
Hide.displayName = 'Hide'
Hide.propTypes = {
xs: PropTypes.bool,
sm: PropTypes.bool,
md: PropTypes.bool,
lg: PropTypes.bool,
xl: PropTypes.bool
}
Hide.defaultProps = {
theme
}
export default Hide
================================================
FILE: src/Icon.js
================================================
import styled from 'styled-components'
import PropTypes from 'prop-types'
import Box from './Box'
import HCIcon from '@hackclub/icons'
const Icon = styled(Box.withComponent(HCIcon))`
flex: none;
`
Icon.displayName = 'Icon'
Icon.propTypes = {
/** which icon to draw */
glyph: PropTypes.string,
/** width/height, numbers in px */
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
}
Icon.defaultProps = {
glyph: 'flag',
size: 24
}
export default Icon
================================================
FILE: src/IconButton.js
================================================
import React from 'react'
import styled, { css } from 'styled-components'
import Icon from './Icon'
import Button from './Button'
import PropTypes from 'prop-types'
import theme from './theme'
const Base = styled(Button.button)`
box-shadow: none !important;
line-height: 0 !important;
${props =>
props.circle &&
css`
padding: ${props.theme.space[props.p || 2]}px;
`};
`
const IconButton = ({ glyph, size, color, ...props }) => (
<Base
children={<Icon glyph={glyph} size={size} color={color} />}
{...props}
/>
)
IconButton.displayName = 'IconButton'
IconButton.propTypes = {
glyph: PropTypes.string,
onClick: PropTypes.func,
circle: PropTypes.bool
}
IconButton.defaultProps = {
theme,
glyph: 'flag',
bg: 'transparent',
circle: false
}
export default IconButton
================================================
FILE: src/Image.js
================================================
import styled from 'styled-components'
import Box from './Box'
import PropTypes from 'prop-types'
const Image = styled(Box.withComponent('img'))`
display: block;
max-width: 100%;
height: auto;
`
Image.displayName = 'Image'
Image.propTypes = {
alt: PropTypes.string.isRequired
}
export default Image
================================================
FILE: src/Input.js
================================================
import React from 'react'
import styled from 'styled-components'
import { fontSize, space, width, color, propTypes } from 'styled-system'
import theme from './theme'
import PropTypes from 'prop-types'
const chevron = () => {
const props = `xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'`
const slate = '%23' + theme.colors.slate.replace('#', '')
const pathProps = `fill='${slate}' d='M2 0L0 2h4zm0 5L0 3h4z'`
return `%3Csvg ${props}%3E%3Cpath ${pathProps}/%3E%3C/svg%3E`
}
const Input = styled.input`
appearance: none;
display: block;
vertical-align: middle;
max-width: 32rem;
min-height: 36px;
line-height: inherit;
font-family: inherit;
background-color: transparent;
border-radius: ${({ theme }) => theme.radius};
border-width: 1px;
border-style: solid;
border-color: ${({ theme }) => theme.colors.smoke};
transition: ${({ theme }) => theme.transition} box-shadow;
::placeholder {
color: ${({ theme }) => theme.colors.grey};
}
::-ms-clear {
display: none;
}
&:focus {
outline: none;
border-color: ${({ theme }) => theme.colors.info};
box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.blue[2]};
}
&[type='select'] {
background: #fff url("data:image/svg+xml;charset=utf8,${chevron()}") no-repeat right .75rem center;
background-size: .5rem;
}
&[type='textarea'] {
resize: vertical;
}
${fontSize} ${space} ${width} ${color};
`
Input.displayName = 'Input'
Input.propTypes = {
id: PropTypes.string,
...propTypes.fontSize,
...propTypes.space,
...propTypes.width,
...propTypes.color
}
Input.defaultProps = {
theme,
width: 1,
m: 0,
py: 1,
px: 2,
fontSize: 2,
color: 'inherit',
bg: 'transparent'
}
export const InputSelect = Input.withComponent('select')
export const InputTextarea = Input.withComponent('textarea')
export default Input
================================================
FILE: src/Label.js
================================================
import styled from 'styled-components'
import Text from './Text'
import { propTypes } from 'styled-system'
import theme from './theme'
const Label = styled(Text.withComponent('label'))`
display: block;
a {
color: ${({ theme }) => theme.colors.info};
text-decoration: underline;
}
`
Label.displayName = 'Label'
Label.propTypes = {
...propTypes.width
}
Label.defaultProps = {
theme,
color: 'black',
fontSize: 2,
width: 1
}
export default Label
================================================
FILE: src/LargeButton.js
================================================
import Button from './Button'
import theme, { hexa } from './theme'
const LargeButton = Button.extend`
text-transform: uppercase;
box-shadow: 0 2px 12px ${({ theme }) => theme.shadowColor};
&:hover,
&:focus {
box-shadow: 0 2px 12px 2px
${props =>
props.inverted ? props.theme.shadowColor : hexa(props.bg, 0.25)};
}
&:active {
box-shadow: 0 4px 16px 2px
${props =>
props.inverted ? props.theme.shadowColor : hexa(props.bg, 0.25)};
}
`
LargeButton.displayName = 'LargeButton'
LargeButton.defaultProps = {
theme,
bg: 'primary',
color: 'white',
fontSize: 3,
m: 0,
py: 3,
px: 4
}
LargeButton.button = LargeButton.withComponent('button')
LargeButton.input = LargeButton.withComponent('input')
export default LargeButton
================================================
FILE: src/Link.js
================================================
import Text from './Text'
import PropTypes from 'prop-types'
import { css } from 'styled-components'
import theme from './theme'
const Link = Text.withComponent('a').extend`
text-decoration: ${props => (props.underline ? 'underline' : 'none')};
${props =>
props.hoverline &&
css`
&:focus,
&:hover {
text-decoration: underline;
}
`};
&:before,
&:after {
text-decoration: none !important;
display: inline-block;
}
${props =>
props.chevronLeft &&
css`
&:before {
content: '‹';
padding-right: 0.25em;
}
`};
${props =>
props.chevronRight &&
css`
&:after {
content: '›';
padding-left: 0.25em;
}
`};
`
Link.displayName = 'Link'
Link.propTypes = {
/** you know, where the link goes */
href: PropTypes.string,
/** enable text-decoration: underline */
underline: PropTypes.bool,
/** enable text-decoration: underline on hover*/
hoverline: PropTypes.bool,
/** add left text arrows */
chevronLeft: PropTypes.bool,
/** add right text arrows */
chevronRight: PropTypes.bool
}
Link.defaultProps = {
theme,
color: 'info'
}
export default Link
================================================
FILE: src/Loading.js
================================================
import styled from 'styled-components'
import React from 'react'
import Box from './Box'
import { keyframes } from 'styled-components'
import theme from './theme'
const animation = keyframes`
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 56px; // 64px - 3px border on two sides
height: 56px;
opacity: 0;
}
`
const Base = styled(Box)`
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
border-radius: 50%;
`
const Inner = styled(Box)`
position: absolute;
border: 4px solid currentColor;
opacity: 1;
border-radius: 50%;
transform-origin: center;
animation: ${animation} 0.975s ease-out infinite;
`
const Loading = props => (
<Base role="presentation" aria-label="Loading" {...props}>
<Inner />
<Inner />
</Base>
)
Loading.defaultProps = {
theme,
color: 'primary'
}
export default Loading
================================================
FILE: src/OutlineButton.js
================================================
import LargeButton from './LargeButton'
import theme, { cx } from './theme'
const OutlineButton = LargeButton.extend`
background: transparent;
border-width: 2px;
border-style: solid;
border-color: ${props => cx(props.bg)};
box-shadow: none;
color: ${props => cx(props.bg)};
&:focus:enabled,
&:hover:enabled {
background: ${props => cx(props.bg)};
color: ${props => cx(props.color)};
transition: ${({ theme }) => theme.transition} background,
${({ theme }) => theme.transition} color;
}
`
OutlineButton.displayName = 'OutlineButton'
OutlineButton.defaultProps = {
theme,
bg: 'primary',
color: 'white',
fontSize: 3,
py: theme.space[3] - 2,
px: theme.space[4] - 2,
m: 0
}
export default OutlineButton
================================================
FILE: src/Section.js
================================================
import styled from 'styled-components'
import Flex from './Flex'
import theme from './theme'
const Section = styled(Flex)`
text-align: center;
`
Section.displayName = 'Section'
Section.defaultProps = {
theme,
align: 'center',
justify: 'center',
flexDirection: 'column',
color: 'white',
py: [4, 5],
px: 3
}
export default Section
================================================
FILE: src/Sheet.js
================================================
import styled from 'styled-components'
import Card from './Card'
import Container from './Container'
import theme from './theme'
const Sheet = styled(Card.withComponent(Container))`
position: relative;
overflow: hidden;
border-radius: ${theme.radii[2]};
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.0625);
`
Sheet.displayName = 'Sheet'
Sheet.defaultProps = {
theme,
bg: 'rgba(255, 255, 255, 0.875)',
p: [3, 4]
}
export default Sheet
================================================
FILE: src/Slider.js
================================================
import styled from 'styled-components'
import { space, width, color, propTypes } from 'styled-system'
import theme from './theme'
const Slider = styled.input.attrs({ type: 'range' })`
appearance: none;
display: block;
border-radius: ${({ theme }) => theme.pill};
height: 4px;
cursor: pointer;
&::-webkit-slider-thumb {
width: 16px;
height: 16px;
background-color: currentColor;
border: 0;
border-radius: ${({ theme }) => theme.pill};
appearance: none;
}
${space} ${width} ${color};
`
Slider.displayName = 'Input'
Slider.propTypes = {
...propTypes.space,
...propTypes.width,
...propTypes.color
}
Slider.defaultProps = {
theme,
width: 1,
bg: 'smoke',
color: 'primary'
}
export default Slider
================================================
FILE: src/Submit.js
================================================
import styled from 'styled-components'
import Button from './Button'
import LargeButton from './LargeButton'
import { caps } from './Text'
import theme from './theme'
const Submit = styled(Button.input).attrs({
type: 'submit'
})([], caps)
Submit.lg = styled(LargeButton.input).attrs({
type: 'submit'
})([], caps)
const attrs = {
theme,
caps: true
}
Submit.defaultProps = attrs
Submit.lg.defaultProps = attrs
export default Submit
================================================
FILE: src/Text.js
================================================
import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import {
fontSize,
fontWeight,
textAlign,
space,
color,
propTypes
} from 'styled-system'
import theme from './theme'
export const caps = props => props.caps && { textTransform: 'uppercase' }
export const regular = props => props.regular && { fontWeight: 'regular' }
export const bold = props => props.bold && { fontWeight: 'bold' }
export const maxWidth = ({ maxWidth }) =>
maxWidth && { maxWidth: `${maxWidth}rem` }
const Text = styled.p(
[],
fontSize,
space,
color,
caps,
textAlign,
bold,
regular,
fontWeight,
maxWidth
)
Text.displayName = 'Text'
Text.propTypes = {
caps: PropTypes.bool,
regular: PropTypes.bool,
bold: PropTypes.bool,
maxWidth: PropTypes.number,
...propTypes.fontSize,
...propTypes.fontWeight,
...propTypes.textAlign,
...propTypes.space,
...propTypes.color
}
Text.defaultProps = {
theme,
m: 0
}
Text.span = Text.withComponent('span')
Text.p = Text.withComponent('p')
Text.s = Text.withComponent('s')
export default Text
================================================
FILE: src/ThemeProvider.js
================================================
import React, { Fragment } from 'react'
import { ThemeProvider as Root, injectGlobal, css } from 'styled-components'
import PropTypes from 'prop-types'
import theme from './theme'
const fontsCss = css`
@font-face {
font-family: 'Phantom Sans';
src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff')
format('woff'),
url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff2')
format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Phantom Sans';
src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff')
format('woff'),
url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff2')
format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
`
injectGlobal`
* {
box-sizing: border-box;
font-weight: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
html,
body {
min-height: 100%;
min-width: 100%;
}
body {
padding: 0;
margin: 0;
font-size: ${theme.fontSizes[2]}px;
font-family: ${theme.font};
line-height: 1.375;
position: relative;
height: 100%;
max-height: 100%;
width: 100%;
}
a {
color: currentColor;
text-decoration: none;
}
textarea {
resize: none;
}
strong {
font-weight: bold;
}
pre,
code,
kbd {
font-family: ${theme.mono};
}
`
const ThemeProvider = ({ theme, webfonts, ...props }) => {
if (webfonts) injectGlobal([], fontsCss)
return (
<Root
theme={theme}
{...props}
children={<Fragment>{props.children}</Fragment>}
/>
)
}
ThemeProvider.propTypes = {
theme: PropTypes.object,
webfonts: PropTypes.bool
}
ThemeProvider.defaultProps = {
theme,
webfonts: false
}
export default ThemeProvider
================================================
FILE: src/__tests__/Avatar.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Avatar } from '..'
describe('Avatar', () => {
test('renders', () => {
const json = renderer
.create(<Avatar src="https://hackclub.com/team/zach.png" />)
.toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('width', '48px')
})
test('renders string width', () => {
const json = renderer
.create(<Avatar src="https://hackclub.com/team/zach.png" size="10vw" />)
.toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('width', '10vw')
})
})
================================================
FILE: src/__tests__/BackgroundImage.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { theme, BackgroundImage } from '..'
const props = {
src:
'https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
'aria-label': 'Wooden desk with tools and chair'
}
describe('BackgroundImage', () => {
test('renders', () => {
const json = renderer.create(<BackgroundImage {...props} />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('background-image', `url(${props.src})`)
})
test('renders with height', () => {
const json = renderer
.create(<BackgroundImage height="256px" {...props} />)
.toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('height', '256px')
})
test('scale', () => {
const json = renderer.create(<BackgroundImage scale {...props} />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule(
'background-size',
`auto ${theme.scaleFactor * 100}%`
)
expect(json).toHaveStyleRule(
'background-size',
`auto ${(theme.scaleFactor + 1 / 16) * 100}%`,
{ modifier: ':hover' }
)
})
})
================================================
FILE: src/__tests__/Badge.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Badge, theme } from '..'
describe('Badge', () => {
test('renders', () => {
const json = renderer.create(<Badge />).toJSON()
expect(json).toMatchSnapshot()
})
test('accepts custom bg and color', () => {
const json = renderer.create(<Badge bg="white" color="accent" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('background-color', theme.colors.white)
expect(json).toHaveStyleRule('color', theme.colors.accent)
})
})
================================================
FILE: src/__tests__/BlockLink.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { BlockLink } from '..'
describe('BlockLink', () => {
test('renders', () => {
const json = renderer.create(<BlockLink>raw text</BlockLink>).toJSON()
expect(json).toMatchSnapshot()
})
})
================================================
FILE: src/__tests__/Box.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Box, theme } from '..'
describe('Box', () => {
test('renders', () => {
const json = renderer.create(<Box />).toJSON()
expect(json).toMatchSnapshot()
})
test('width prop sets width', () => {
const json = renderer.create(<Box width={1 / 2} />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('width', '50%')
})
test('m prop sets margin', () => {
const json = renderer.create(<Box m={1} />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('margin', theme.space[1] + 'px')
})
test('p prop sets padding', () => {
const json = renderer.create(<Box p={1} />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('padding', theme.space[1] + 'px')
})
test('color prop sets color', () => {
const json = renderer.create(<Box color="warning" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('color', theme.colors.warning)
})
test('bg prop sets background color', () => {
const json = renderer.create(<Box bg="accent" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('background-color', theme.colors.accent)
})
test('bg prop sets custom background color', () => {
const json = renderer.create(<Box bg="#ff6d00" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('background-color', '#ff6d00')
})
})
================================================
FILE: src/__tests__/Button.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Button, theme } from '..'
describe('Button', () => {
test('renders', () => {
const json = renderer.create(<Button />).toJSON()
expect(json).toMatchSnapshot()
})
test('custom bg', () => {
const json = renderer.create(<Button bg="accent" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('background-color', theme.colors.accent)
expect(json).toHaveStyleRule('color', theme.colors.white)
})
test('inverted', () => {
const json = renderer.create(<Button bg="accent" inverted />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('background-color', theme.colors.white)
expect(json).toHaveStyleRule('color', theme.colors.accent)
})
test('scale', () => {
const json = renderer.create(<Button scale />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('will-change', 'transform')
expect(json).toHaveStyleRule('transform', 'scale(1)')
expect(json).toHaveStyleRule('transform', `scale(${theme.scaleFactor})`, {
modifier: ':hover'
})
})
test('disabled prop sets', () => {
const json = renderer.create(<Button disabled />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('opacity', '0.25')
expect(json).toHaveStyleRule('cursor', 'not-allowed')
})
test('without disabled prop sets', () => {
const json = renderer.create(<Button bg="success" inverted />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('color', theme.colors.success)
expect(json).toHaveStyleRule(
'box-shadow',
`0 2px 6px ${theme.shadowColor}`,
{ modifier: ':hover' }
)
})
test('left chevron', () => {
const json = renderer.create(<Button chevronLeft />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('content', `'«'`, { modifier: ':before' })
})
test('right chevron', () => {
const json = renderer.create(<Button chevronRight />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('content', `'»'`, { modifier: ':after' })
})
})
================================================
FILE: src/__tests__/Card.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Card, theme } from '..'
describe('Card', () => {
test('renders small box shadow', () => {
const json = renderer.create(<Card boxShadowSize="sm" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('box-shadow', theme.boxShadows[0])
expect(json).toHaveStyleRule('border-radius', theme.radius)
})
test('renders lg shadow', () => {
const json = renderer.create(<Card boxShadowSize="lg" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('box-shadow', theme.boxShadows[2])
})
test('renders with 1px border', () => {
const json = renderer.create(<Card borderWidth={1} />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('border', `1px solid ${theme.colors.smoke}`)
})
})
================================================
FILE: src/__tests__/Container.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Container } from '..'
describe('Container', () => {
test('renders with default theme max-width', () => {
const json = renderer.create(<Container />).toJSON()
expect(json).toMatchSnapshot()
})
test('renders with maxWidth', () => {
const json = renderer.create(<Container maxWidth={32} />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('max-width', '32rem')
})
})
================================================
FILE: src/__tests__/Field.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Field } from '..'
describe('Field', () => {
test('renders', () => {
const json = renderer
.create(<Field name="renders" label="Renders" />)
.toJSON()
expect(json).toMatchSnapshot()
})
test('with error', () => {
const json = renderer
.create(<Field name="error" label="Error" error="error message" />)
.toJSON()
expect(json).toMatchSnapshot()
})
})
================================================
FILE: src/__tests__/Flex.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Flex } from '..'
describe('Flex', () => {
test('renders', () => {
const flex = renderer.create(<Flex />).toJSON()
expect(flex).toMatchSnapshot()
})
test('align prop', () => {
const flex = renderer.create(<Flex align="center" />).toJSON()
expect(flex).toMatchSnapshot()
expect(flex).toHaveStyleRule('align-items', 'center')
})
test('justify prop', () => {
const flex = renderer.create(<Flex justify="space-between" />).toJSON()
expect(flex).toMatchSnapshot()
expect(flex).toHaveStyleRule('justify-content', 'space-between')
})
test('wrap prop', () => {
const flex = renderer.create(<Flex wrap />).toJSON()
expect(flex).toMatchSnapshot()
expect(flex).toHaveStyleRule('flex-wrap', 'wrap')
})
test('direction prop', () => {
const flex = renderer.create(<Flex flexDirection="column" />).toJSON()
expect(flex).toMatchSnapshot()
expect(flex).toHaveStyleRule('flex-direction', 'column')
})
})
================================================
FILE: src/__tests__/Heading.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Heading, theme } from '..'
describe('Heading', () => {
test('renders', () => {
const json = renderer.create(<Heading />).toJSON()
expect(json).toMatchSnapshot()
})
const dotNotationTestCase = 'with h1-h6 dot-notation'
test(dotNotationTestCase, () => {
const headingH1json = renderer.create(<Heading.h1 />).toJSON()
const headingH2json = renderer.create(<Heading.h2 />).toJSON()
const headingH3json = renderer.create(<Heading.h3 />).toJSON()
const headingH4json = renderer.create(<Heading.h4 />).toJSON()
const headingH5json = renderer.create(<Heading.h5 />).toJSON()
const headingH6json = renderer.create(<Heading.h6 />).toJSON()
expect(headingH1json).toMatchSnapshot()
expect(headingH2json).toMatchSnapshot()
expect(headingH3json).toMatchSnapshot()
expect(headingH4json).toMatchSnapshot()
expect(headingH5json).toMatchSnapshot()
expect(headingH6json).toMatchSnapshot()
})
const defaultFontSizeTestCase =
'with default theme font size, when fontSize prop not used'
test(defaultFontSizeTestCase, () => {
const json = renderer.create(<Heading />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('font-size', theme.fontSizes[5] + 'px')
})
const usingTextPropsTestCase = 'uses <Text> component properties'
test(usingTextPropsTestCase, () => {
const json = renderer
.create(<Heading align="center" color="primary" />)
.toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('text-align', 'center')
expect(json).toHaveStyleRule('color', theme.colors['primary'])
})
})
================================================
FILE: src/__tests__/Hide.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Hide } from '..'
describe('Hide', () => {
test('renders', () => {
const json = renderer.create(<Hide />).toJSON()
expect(json).toMatchSnapshot()
})
test('renders with xs prop', () => {
const json = renderer.create(<Hide xs />).toJSON()
expect(json).toMatchSnapshot()
})
test('renders with sm prop', () => {
const json = renderer.create(<Hide sm />).toJSON()
expect(json).toMatchSnapshot()
})
test('renders with md prop', () => {
const json = renderer.create(<Hide md />).toJSON()
expect(json).toMatchSnapshot()
})
test('renders with lg prop', () => {
const json = renderer.create(<Hide lg />).toJSON()
expect(json).toMatchSnapshot()
})
test('renders with xl prop', () => {
const json = renderer.create(<Hide xl />).toJSON()
expect(json).toMatchSnapshot()
})
})
================================================
FILE: src/__tests__/Icon.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Icon } from '..'
describe('Icon', () => {
test('renders', () => {
const json = renderer.create(<Icon glyph="flag" />).toJSON()
expect(json).toMatchSnapshot()
})
})
================================================
FILE: src/__tests__/IconButton.js
================================================
/* eslint-env jest */
import React from 'react'
import renderer from 'react-test-renderer'
import { shallow } from 'enzyme'
import { IconButton } from '..'
describe('IconButton', () => {
test('renders', () => {
const json = renderer.create(<IconButton />).toJSON()
expect(json).toMatchSnapshot()
})
test('renders with circle prop', () => {
const json = renderer.create(<IconButton circle />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('border-radius', '9999px')
expect(json).toHaveStyleRule('padding', '12px')
})
test('executes onClick prop on click', () => {
const handleClick = jest.fn()
const wrapper = shallow(<IconButton onClick={handleClick} />)
wrapper.simulate('click')
expect(handleClick).toBeCalled()
})
})
================================================
FILE: src/__tests__/Image.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Image } from '..'
const imageSrc = 'https://hackclub.com/social-photo_2.jpg'
describe('Image', () => {
test('renders', () => {
const json = renderer
.create(<Image src={imageSrc} alt="Smiling students at a hackathon" />)
.toJSON()
expect(json).toMatchSnapshot()
})
})
================================================
FILE: src/__tests__/Input.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Input, theme } from '..'
describe('Input', () => {
test('renders', () => {
const json = renderer.create(<Input id="renders" />).toJSON()
expect(json).toMatchSnapshot()
})
test('renders with custom spacing', () => {
const json = renderer.create(<Input p={4} m={4} id="space" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('padding', theme.space[4] + 'px')
expect(json).toHaveStyleRule('margin', theme.space[4] + 'px')
})
test('renders with custom fontSize', () => {
const json = renderer.create(<Input fontSize={4} id="fontSize" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('font-size', theme.fontSizes[4] + 'px')
})
})
================================================
FILE: src/__tests__/Label.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Label } from '..'
describe('Label', () => {
test('it renders', () => {
const json = renderer.create(<Label />).toJSON()
expect(json).toMatchSnapshot()
})
})
================================================
FILE: src/__tests__/LargeButton.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { LargeButton, theme } from '..'
describe('LargeButton', () => {
test('renders', () => {
const json = renderer.create(<LargeButton />).toJSON()
expect(json).toMatchSnapshot()
})
test('inverted', () => {
const json = renderer.create(<LargeButton inverted />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule(
'box-shadow',
`0 2px 12px ${theme.shadowColor}`
)
expect(json).toHaveStyleRule(
'box-shadow',
`0 2px 12px 2px ${theme.shadowColor}`,
{
modifier: ':hover'
}
)
expect(json).toHaveStyleRule(
'box-shadow',
`0 4px 16px 2px ${theme.shadowColor}`,
{
modifier: ':active'
}
)
})
test('larger', () => {
const json = renderer.create(<LargeButton bg="accent" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('background-color', theme.colors.accent)
expect(json).toHaveStyleRule('color', theme.colors.white)
expect(json).toHaveStyleRule('padding-left', theme.space[4] + 'px')
})
})
================================================
FILE: src/__tests__/Link.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Link } from '..'
describe('Link', () => {
test('renders', () => {
const json = renderer.create(<Link>Hello</Link>).toJSON()
expect(json).toMatchSnapshot()
})
test('renders underline', () => {
const json = renderer.create(<Link underline>Underline</Link>).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('text-decoration', 'underline')
})
test('renders hoverline', () => {
const json = renderer.create(<Link hoverline>Hoverline</Link>).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('text-decoration', 'none')
expect(json).toHaveStyleRule('text-decoration', 'underline', {
modifier: ':hover'
})
})
test('renders chevronleft', () => {
const json = renderer.create(<Link chevronLeft>Left</Link>).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('content', `'‹'`, { modifier: ':before' })
})
test('renders chevronright', () => {
const json = renderer.create(<Link chevronRight>Right</Link>).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('content', `'›'`, { modifier: ':after' })
})
})
================================================
FILE: src/__tests__/Loading.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Loading } from '..'
describe('Loading', () => {
test('renders', () => {
const json = renderer.create(<Loading />).toJSON()
expect(json).toMatchSnapshot()
})
})
================================================
FILE: src/__tests__/OutlineButton.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { OutlineButton, theme } from '..'
describe('OutlineButton', () => {
test('renders', () => {
const json = renderer.create(<OutlineButton />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('border-style', 'solid')
expect(json).toHaveStyleRule('background', 'transparent')
})
test('disabled prop sets', () => {
const json = renderer.create(<OutlineButton disabled />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('opacity', '0.25')
})
test('with custom color', () => {
const json = renderer.create(<OutlineButton bg="white" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('color', theme.colors.white)
})
})
================================================
FILE: src/__tests__/Section.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Section } from '..'
describe('Section', () => {
test('renders', () => {
const json = renderer.create(<Section />).toJSON()
expect(json).toMatchSnapshot()
})
})
================================================
FILE: src/__tests__/Sheet.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Sheet } from '..'
describe('Sheet', () => {
test('renders', () => {
const json = renderer.create(<Sheet />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('background-color', 'rgba(255,255,255,0.875)')
})
})
================================================
FILE: src/__tests__/Slider.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Slider, theme } from '..'
describe('Slider', () => {
test('renders', () => {
const json = renderer.create(<Slider id="renders" />).toJSON()
expect(json).toMatchSnapshot()
})
})
================================================
FILE: src/__tests__/Submit.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Submit } from '..'
describe('Submit', () => {
test('renders', () => {
const json = renderer.create(<Submit />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('text-transform', 'uppercase')
})
test('renders lg', () => {
const json = renderer.create(<Submit lg />).toJSON()
expect(json).toMatchSnapshot()
})
})
================================================
FILE: src/__tests__/Text.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { Text, theme } from '..'
describe('Text', () => {
test('renders', () => {
const json = renderer.create(<Text />).toJSON()
expect(json).toMatchSnapshot()
})
test('align prop sets text-align', () => {
const json = renderer.create(<Text align="center" />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('text-align', 'center')
})
test('regular prop sets font-weight', () => {
const json = renderer.create(<Text regular />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('font-weight', 'regular')
})
test('bold prop sets font-weight', () => {
const json = renderer.create(<Text bold />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('font-weight', 'bold')
})
test('maxWidth prop sets max-width', () => {
const json = renderer.create(<Text maxWidth={48} />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('max-width', '48rem')
})
test('caps prop sets text-transform', () => {
const json = renderer.create(<Text caps />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('text-transform', 'uppercase')
})
test('fontSize prop sets font-size', () => {
const f0 = renderer.create(<Text fontSize={0} />).toJSON()
const f1 = renderer.create(<Text fontSize={1} />).toJSON()
const f2 = renderer.create(<Text fontSize={2} />).toJSON()
const f3 = renderer.create(<Text fontSize={3} />).toJSON()
const f4 = renderer.create(<Text fontSize={4} />).toJSON()
const f5 = renderer.create(<Text fontSize={5} />).toJSON()
const f6 = renderer.create(<Text fontSize={6} />).toJSON()
expect(f0).toHaveStyleRule('font-size', theme.fontSizes[0] + 'px')
expect(f1).toHaveStyleRule('font-size', theme.fontSizes[1] + 'px')
expect(f2).toHaveStyleRule('font-size', theme.fontSizes[2] + 'px')
expect(f3).toHaveStyleRule('font-size', theme.fontSizes[3] + 'px')
expect(f4).toHaveStyleRule('font-size', theme.fontSizes[4] + 'px')
expect(f5).toHaveStyleRule('font-size', theme.fontSizes[5] + 'px')
expect(f6).toHaveStyleRule('font-size', theme.fontSizes[6] + 'px')
})
test('mt prop sets margin-top', () => {
const json = renderer.create(<Text mt={2} />).toJSON()
expect(json).toMatchSnapshot()
expect(json).toHaveStyleRule('margin-top', theme.space[2] + 'px')
})
})
================================================
FILE: src/__tests__/ThemeProvider.js
================================================
import React from 'react'
import renderer from 'react-test-renderer'
import { ThemeProvider } from '..'
import styled from 'styled-components'
const Content = styled.p`
color: ${({ theme }) => theme.colors.primary};
`
describe('ThemeProvider', () => {
test('renders content with theme', () => {
const json = renderer.create(
<ThemeProvider>
<Content>Hello!</Content>
</ThemeProvider>
)
expect(json).toMatchSnapshot()
})
})
================================================
FILE: src/__tests__/__snapshots__/Avatar.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Avatar renders 1`] = `
.c0 {
border-radius: 9999px;
display: inline-block;
width: 48px;
height: 48px;
}
<img
className="c0 "
size={48}
src="https://hackclub.com/team/zach.png"
/>
`;
exports[`Avatar renders string width 1`] = `
.c0 {
border-radius: 9999px;
display: inline-block;
width: 10vw;
height: 10vw;
}
<img
className="c0 "
size="10vw"
src="https://hackclub.com/team/zach.png"
/>
`;
================================================
FILE: src/__tests__/__snapshots__/BackgroundImage.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`BackgroundImage renders 1`] = `
.c1 {
background-color: #dde1e4;
}
.c0 {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max);
}
<div
aria-label="Wooden desk with tools and chair"
className="c0 c1"
src="https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
/>
`;
exports[`BackgroundImage renders with height 1`] = `
.c1 {
background-color: #dde1e4;
}
.c0 {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max);
height: 256px;
}
<div
aria-label="Wooden desk with tools and chair"
className="c0 c1"
height="256px"
src="https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
/>
`;
exports[`BackgroundImage scale 1`] = `
.c1 {
background-color: #dde1e4;
}
.c0 {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max);
overflow: hidden;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background-size;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background-size;
will-change: background-size;
background-size: auto 106.25%;
}
.c0:hover {
background-size: auto 112.5%;
}
@media (prefers-reduced-motion:reduce) {
.c0 {
-webkit-transition: none;
transition: none;
background-size: cover !important;
}
}
<div
aria-label="Wooden desk with tools and chair"
className="c0 c1"
scale={true}
src="https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Badge.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Badge accepts custom bg and color 1`] = `
.c1 {
font-size: 16px;
margin: 0px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
background-color: #ffffff;
color: #7280ed;
}
.c0 {
border-radius: 9999px;
display: inline-block;
font-weight: normal;
-webkit-letter-spacing: 0.0375em;
-moz-letter-spacing: 0.0375em;
-ms-letter-spacing: 0.0375em;
letter-spacing: 0.0375em;
line-height: 1.125;
text-transform: uppercase;
}
<span
className="c0 c1"
color="accent"
fontSize={1}
/>
`;
exports[`Badge renders 1`] = `
.c1 {
font-size: 16px;
margin: 0px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
background-color: #e42d42;
color: #ffffff;
}
.c0 {
border-radius: 9999px;
display: inline-block;
font-weight: normal;
-webkit-letter-spacing: 0.0375em;
-moz-letter-spacing: 0.0375em;
-ms-letter-spacing: 0.0375em;
letter-spacing: 0.0375em;
line-height: 1.125;
text-transform: uppercase;
}
<span
className="c0 c1"
color="white"
fontSize={1}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/BlockLink.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`BlockLink renders 1`] = `
.c1 {
margin: 0px;
color: inherit;
}
.c0 {
display: block;
-webkit-text-decoration: none;
text-decoration: none;
}
<a
className="c0 c1"
color="inherit"
>
raw text
</a>
`;
================================================
FILE: src/__tests__/__snapshots__/Box.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Box bg prop sets background color 1`] = `
.c0 {
background-color: #7280ed;
}
<div
className="c0"
/>
`;
exports[`Box bg prop sets custom background color 1`] = `
.c0 {
background-color: #ff6d00;
}
<div
className="c0"
/>
`;
exports[`Box color prop sets color 1`] = `
.c0 {
color: #e4732d;
}
<div
className="c0"
color="warning"
/>
`;
exports[`Box m prop sets margin 1`] = `
.c0 {
margin: 6px;
}
<div
className="c0"
/>
`;
exports[`Box p prop sets padding 1`] = `
.c0 {
padding: 6px;
}
<div
className="c0"
/>
`;
exports[`Box renders 1`] = `
<div
className=""
/>
`;
exports[`Box width prop sets width 1`] = `
.c0 {
width: 50%;
}
<div
className="c0"
width={0.5}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Button.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button custom bg 1`] = `
.c0 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: #7280ed;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(114,128,237,0.25);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(114,128,237,0.25);
}
<a
className="c0"
color="white"
fontSize={3}
/>
`;
exports[`Button disabled prop sets 1`] = `
.c0 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: #e42d42;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
opacity: 0.25;
cursor: not-allowed;
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(228,45,66,0.25);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);
}
<a
className="c0"
color="white"
disabled={true}
fontSize={3}
/>
`;
exports[`Button inverted 1`] = `
.c0 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: #7280ed;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
background-color: #ffffff;
color: #7280ed;
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.125);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.125);
}
<a
className="c0"
color="white"
fontSize={3}
/>
`;
exports[`Button left chevron 1`] = `
.c0 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: #e42d42;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(228,45,66,0.25);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);
}
.c0:before {
content: '«';
padding-right: 0.25em;
}
<a
className="c0"
color="white"
fontSize={3}
/>
`;
exports[`Button renders 1`] = `
.c0 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: #e42d42;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(228,45,66,0.25);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);
}
<a
className="c0"
color="white"
fontSize={3}
/>
`;
exports[`Button right chevron 1`] = `
.c0 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: #e42d42;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(228,45,66,0.25);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);
}
.c0:after {
content: '»';
padding-left: 0.25em;
}
<a
className="c0"
color="white"
fontSize={3}
/>
`;
exports[`Button scale 1`] = `
.c0 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: #e42d42;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) all;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) all;
will-change: transform;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(228,45,66,0.25);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);
}
.c0:hover,
.c0:focus {
-webkit-transform: scale(1.0625);
-ms-transform: scale(1.0625);
transform: scale(1.0625);
}
@media (prefers-reduced-motion:reduce) {
.c0 {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
<a
className="c0"
color="white"
fontSize={3}
scale={true}
/>
`;
exports[`Button without disabled prop sets 1`] = `
.c0 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: #2de473;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
background-color: #ffffff;
color: #2de473;
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.125);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.125);
}
<a
className="c0"
color="white"
fontSize={3}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Card.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Card renders lg shadow 1`] = `
.c0 {
box-shadow: 0 0 2px 0 rgba(0,0,0,.0625),0 12px 12px 0 rgba(0,0,0,0.125);
border-radius: 4px;
}
<div
className="c0 "
/>
`;
exports[`Card renders small box shadow 1`] = `
.c0 {
box-shadow: 0 0 2px 0 rgba(0,0,0,.0625),0 2px 4px 0 rgba(0,0,0,0.125);
border-radius: 4px;
}
<div
className="c0 "
/>
`;
exports[`Card renders with 1px border 1`] = `
.c0 {
border: 1px solid #dde1e4;
border-radius: 4px;
}
<div
className="c0 "
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Container.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Container renders with default theme max-width 1`] = `
.c1 {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.c0 {
max-width: 72rem;
}
<div
className="c0 c1"
width={1}
/>
`;
exports[`Container renders with maxWidth 1`] = `
.c1 {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.c0 {
max-width: 32rem;
}
<div
className="c0 c1"
width={1}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Field.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Field renders 1`] = `
.c3 {
margin-bottom: 2px;
text-align: center;
}
.c1 {
font-size: 18px;
margin: 0px;
margin-bottom: 12px;
color: #384046;
}
.c0 {
display: block;
}
.c0 a {
color: #2d9ee4;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.c4 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
vertical-align: middle;
max-width: 32rem;
min-height: 36px;
line-height: inherit;
font-family: inherit;
background-color: transparent;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: #dde1e4;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
font-size: 18px;
margin: 0px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
width: 100%;
color: inherit;
background-color: transparent;
}
.c4::-ms-clear {
display: none;
}
.c4::-ms-clear {
display: none;
}
.c4::-ms-clear {
display: none;
}
.c4::-ms-clear {
display: none;
}
.c4:focus {
outline: none;
border-color: #2d9ee4;
box-shadow: 0 0 0 2px #add9f5;
}
.c4[type='select'] {
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23606e77' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
background-size: .5rem;
}
.c4[type='textarea'] {
resize: vertical;
}
<label
className="text c0 c1"
color="black"
fontSize={2}
id="renders"
width={1}
>
<div
className="c2 c3"
wrap={true}
>
Renders
</div>
<input
className="c4"
color="inherit"
fontSize={2}
name="renders"
type="text"
width={1}
/>
</label>
`;
exports[`Field with error 1`] = `
.c3 {
margin-bottom: 2px;
text-align: center;
}
.c5 {
font-size: 16px;
margin: 0px;
margin-left: 6px;
margin-top: 0px;
margin-bottom: 0px;
color: #b52434;
}
.c1 {
font-size: 18px;
margin: 0px;
margin-bottom: 12px;
color: #384046;
}
.c0 {
display: block;
}
.c0 a {
color: #2d9ee4;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.c6 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
vertical-align: middle;
max-width: 32rem;
min-height: 36px;
line-height: inherit;
font-family: inherit;
background-color: transparent;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: #dde1e4;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
font-size: 18px;
margin: 0px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
width: 100%;
color: inherit;
background-color: transparent;
}
.c6::-ms-clear {
display: none;
}
.c6::-ms-clear {
display: none;
}
.c6::-ms-clear {
display: none;
}
.c6::-ms-clear {
display: none;
}
.c6:focus {
outline: none;
border-color: #2d9ee4;
box-shadow: 0 0 0 2px #add9f5;
}
.c6[type='select'] {
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23606e77' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
background-size: .5rem;
}
.c6[type='textarea'] {
resize: vertical;
}
.c4 {
font-weight: normal;
}
.c4:before {
content: '— ';
}
<label
className="text c0 c1"
color="black"
fontSize={2}
id="error"
width={1}
>
<div
className="c2 c3"
wrap={true}
>
Error
<p
className="error c4 c5"
color="error"
fontSize={1}
>
error message
</p>
</div>
<input
className="c6"
color="inherit"
fontSize={2}
name="error"
type="text"
width={1}
/>
</label>
`;
================================================
FILE: src/__tests__/__snapshots__/Flex.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Flex align prop 1`] = `
.c1 {
text-align: center;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<div
className="c0 c1"
/>
`;
exports[`Flex direction prop 1`] = `
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
<div
className="c0 "
/>
`;
exports[`Flex justify prop 1`] = `
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
<div
className="c0 "
/>
`;
exports[`Flex renders 1`] = `
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<div
className="c0 "
/>
`;
exports[`Flex wrap prop 1`] = `
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
<div
className="c0 "
wrap={true}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Heading.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Heading renders 1`] = `
.c0 {
font-size: 36px;
margin: 0px;
font-weight: regular;
line-height: 1.25;
}
<h2
className="c0"
fontSize={5}
/>
`;
exports[`Heading uses <Text> component properties 1`] = `
.c0 {
font-size: 36px;
margin: 0px;
color: #e42d42;
text-align: center;
font-weight: regular;
line-height: 1.25;
}
<h2
className="c0"
color="primary"
fontSize={5}
/>
`;
exports[`Heading with default theme font size, when fontSize prop not used 1`] = `
.c0 {
font-size: 36px;
margin: 0px;
font-weight: regular;
line-height: 1.25;
}
<h2
className="c0"
fontSize={5}
/>
`;
exports[`Heading with h1-h6 dot-notation 1`] = `
.c0 {
font-size: 48px;
margin: 0px;
font-weight: bold;
font-weight: regular;
line-height: 1.25;
}
<h1
className="c0"
fontSize={6}
/>
`;
exports[`Heading with h1-h6 dot-notation 2`] = `
.c0 {
font-size: 32px;
margin: 0px;
font-weight: bold;
line-height: 1.25;
}
<h2
className="c0"
fontSize={5}
/>
`;
exports[`Heading with h1-h6 dot-notation 3`] = `
.c0 {
font-size: 24px;
margin: 0px;
font-weight: bold;
line-height: 1.25;
}
<h3
className="c0"
fontSize={4}
/>
`;
exports[`Heading with h1-h6 dot-notation 4`] = `
.c0 {
font-size: 20px;
margin: 0px;
font-weight: regular;
line-height: 1.25;
}
<h4
className="c0"
fontSize={3}
/>
`;
exports[`Heading with h1-h6 dot-notation 5`] = `
.c0 {
font-size: 16px;
margin: 0px;
font-weight: bold;
line-height: 1.25;
}
<h5
className="c0"
fontSize={2}
/>
`;
exports[`Heading with h1-h6 dot-notation 6`] = `
.c0 {
font-size: 12px;
margin: 0px;
text-transform: uppercase;
font-weight: bold;
line-height: 1.25;
}
<h6
className="c0"
fontSize={0}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Hide.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Hide renders 1`] = `
<div
className=""
/>
`;
exports[`Hide renders with lg prop 1`] = `
@media screen and (min-width:64em) and (max-width:79.99em) {
.c0 {
display: none;
}
}
<div
className="c0 "
/>
`;
exports[`Hide renders with md prop 1`] = `
@media screen and (min-width:48em) and (max-width:63.99em) {
.c0 {
display: none;
}
}
<div
className="c0 "
/>
`;
exports[`Hide renders with sm prop 1`] = `
@media screen and (min-width:32em) and (max-width:47.99em) {
.c0 {
display: none;
}
}
<div
className="c0 "
/>
`;
exports[`Hide renders with xl prop 1`] = `
@media screen and (min-width:80em) {
.c0 {
display: none;
}
}
<div
className="c0 "
/>
`;
exports[`Hide renders with xs prop 1`] = `
@media screen and (max-width:31.99em) {
.c0 {
display: none;
}
}
<div
className="c0 "
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Icon.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Icon renders 1`] = `
.c0 {
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
<svg
aria-label="flag"
className="c0 "
clipRule="evenodd"
fill="currentColor"
fillRule="evenodd"
height={24}
preserveAspectRatio="xMidYMid meet"
strokeLinejoin="round"
strokeMiterlimit="1.414"
theme={
Object {
"bold": "bold",
"boxShadows": Array [
"0 0 2px 0 rgba(0,0,0,.0625),0 2px 4px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 4px 8px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 12px 12px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 24px 24px 0 rgba(0,0,0,0.125)",
],
"breakpoints": Array [
32,
48,
64,
80,
],
"colors": Object {
"accent": "#7280ed",
"base": "#2d9ce4",
"black": "#384046",
"blue": Array [
"#e6f4fc",
"#cce7f8",
"#add9f5",
"#8bc9f0",
"#62b6eb",
"#2d9ee4",
"#298fce",
"#247db4",
"#1d6795",
"#154a6b",
],
"cyan": Array [
"#e7fcfa",
"#ccf9f3",
"#aff5ed",
"#8cf0e5",
"#63ebdb",
"#2de4cf",
"#29cebb",
"#24b5a5",
"#1e9789",
"#166d63",
],
"dark": "#17171d",
"darker": "#121217",
"error": "#b52434",
"fuschia": Array [
"#faebfc",
"#f5d4fa",
"#efbaf6",
"#e89bf2",
"#df73ed",
"#cf2de4",
"#bb29ce",
"#a424b5",
"#881d95",
"#61156b",
],
"gray": Array [
"#f9f9fa",
"#ebeeef",
"#dde1e4",
"#cdd4d8",
"#bcc5cb",
"#a9b5bc",
"#93a2ab",
"#7a8c97",
"#606e77",
"#384046",
],
"green": Array [
"#eafce7",
"#d2f9cd",
"#b7f5b0",
"#99f08d",
"#73eb64",
"#42e42d",
"#3cce29",
"#35b524",
"#2c971e",
"#206d16",
],
"indigo": Array [
"#ebedfc",
"#d4d8f9",
"#bac1f6",
"#9aa4f2",
"#7280ed",
"#2d42e4",
"#283bcd",
"#2334b3",
"#1d2a92",
"#141e66",
],
"info": "#2d9ee4",
"lime": Array [
"#f2fbe4",
"#e5f8c6",
"#d6f4a6",
"#c6ef83",
"#b3ea5b",
"#9ee42d",
"#8fce29",
"#7eb524",
"#69971e",
"#4c6d16",
],
"muted": "#7a8c97",
"orange": Array [
"#fcefe7",
"#f9ddcc",
"#f5caaf",
"#f0b38d",
"#eb9763",
"#e4732d",
"#ce6829",
"#b45b24",
"#954b1d",
"#6b3615",
],
"pink": Array [
"#fcebf6",
"#fad5eb",
"#f6bbdf",
"#f29cd1",
"#ed73be",
"#e42d9e",
"#ce298f",
"#b5247d",
"#961e68",
"#6b154a",
],
"primary": "#e42d42",
"red": Array [
"#fcebed",
"#fad5d9",
"#f6bcc2",
"#f29da7",
"#ed7582",
"#e42d42",
"#ce293c",
"#b52434",
"#951d2b",
"#6b151f",
],
"silver": "#7a8c97",
"slate": "#606e77",
"smoke": "#dde1e4",
"snow": "#f9f9fa",
"success": "#2de473",
"teal": Array [
"#e7fcef",
"#cdf9de",
"#b0f5ca",
"#8df0b3",
"#64eb98",
"#2de473",
"#29ce68",
"#24b55c",
"#1e974c",
"#166d37",
],
"violet": Array [
"#f2ebfc",
"#e3d4fa",
"#d1baf6",
"#bd9bf2",
"#a173ed",
"#732de4",
"#6829cd",
"#5a23b3",
"#4a1d93",
"#341467",
],
"warning": "#e4732d",
"white": "#ffffff",
"yellow": Array [
"#fbf9e3",
"#f7f2c4",
"#f3eaa4",
"#efe280",
"#ead959",
"#e4cf2d",
"#cebb29",
"#b5a524",
"#97891e",
"#6d6316",
],
},
"cx": [Function],
"font": "\\"Phantom Sans\\",-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\"",
"fontSizes": Array [
13.5,
16,
18,
24,
27,
36,
48,
54,
72,
96,
],
"fontWeights": Object {
"bold": "bold",
"regular": "regular",
},
"gradient": [Function],
"hexa": [Function],
"mediaQueries": Object {
"0": "@media screen and (min-width:32em)",
"1": "@media screen and (min-width:48em)",
"2": "@media screen and (min-width:64em)",
"3": "@media screen and (min-width:80em)",
"reduceMotion": "@media (prefers-reduced-motion: reduce)",
"reduceTransparency": "@media (prefers-reduced-transparency: reduce)",
},
"mono": "SFMono-Regular,\\"Roboto Mono\\",Menlo,monospace",
"pill": "9999px",
"radii": Array [
"0px",
"4px",
"8px",
"16px",
"9999px",
],
"radius": "4px",
"regular": "regular",
"scaleFactor": 1.0625,
"shadowColor": "rgba(0,0,0,0.125)",
"space": Array [
0,
6,
12,
18,
24,
36,
72,
108,
144,
288,
432,
],
"transition": "0.1875s cubic-bezier(0.375, 0, 0.675, 1)",
}
}
viewBox="0 0 32 32"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M10.953 5.034a1 1 0 0 0-1.225.707L4.034 26.992a1 1 0 1 0 1.932.517l5.694-21.25a1 1 0 0 0-.707-1.225zm2.107 9.005c.425-1.703.798-3.036 1.225-4.079.429-1.058.766-1.43.912-1.532a.216.216 0 0 0 .022-.023l.017.003c.131-.022.133-.021.353.073l.065.028c.584.23 1.492.826 2.826 2.076 1.584 1.462 3.173 2.338 4.36 2.738a9.906 9.906 0 0 0 2.045.4c-.312 1.161-.627 2.297-1.028 3.334-.405 1.061-.756 1.774-1.284 2.307-.385.41-.719.542-1.131.527-.519-.018-1.447-.289-2.901-1.37-1.746-1.291-3.25-2.073-4.327-2.514a17.61 17.61 0 0 0-1.498-.524c.08-.375.193-.838.344-1.444zm12.104-1.615a.522.522 0 0 1 0 0zm-13.21 2.816l.017.008a.08.08 0 0 1-.017-.008zm-.834-1.685c1.727-6.93 3.174-9.634 8.727-4.43 2.833 2.655 4.933 2.646 6.14 2.641 1.16-.005 1.494-.007.86 2.359-1.294 4.83-3.053 10.796-9.5 6-2.638-1.962-4.392-2.486-5.449-2.801-1.526-.456-1.599-.478-.778-3.769z"
/>
</g>
</svg>
`;
================================================
FILE: src/__tests__/__snapshots__/IconButton.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`IconButton renders 1`] = `
.c1 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: transparent;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
}
.c1:hover,
.c1:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.125);
}
.c1:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.125);
}
.c2 {
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
.c0 {
box-shadow: none !important;
line-height: 0 !important;
}
<button
className="c0 c1"
color="white"
fontSize={3}
>
<svg
aria-label="flag"
className="c2 "
clipRule="evenodd"
fill="currentColor"
fillRule="evenodd"
height={24}
preserveAspectRatio="xMidYMid meet"
strokeLinejoin="round"
strokeMiterlimit="1.414"
theme={
Object {
"bold": "bold",
"boxShadows": Array [
"0 0 2px 0 rgba(0,0,0,.0625),0 2px 4px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 4px 8px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 12px 12px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 24px 24px 0 rgba(0,0,0,0.125)",
],
"breakpoints": Array [
32,
48,
64,
80,
],
"colors": Object {
"accent": "#7280ed",
"base": "#2d9ce4",
"black": "#384046",
"blue": Array [
"#e6f4fc",
"#cce7f8",
"#add9f5",
"#8bc9f0",
"#62b6eb",
"#2d9ee4",
"#298fce",
"#247db4",
"#1d6795",
"#154a6b",
],
"cyan": Array [
"#e7fcfa",
"#ccf9f3",
"#aff5ed",
"#8cf0e5",
"#63ebdb",
"#2de4cf",
"#29cebb",
"#24b5a5",
"#1e9789",
"#166d63",
],
"dark": "#17171d",
"darker": "#121217",
"error": "#b52434",
"fuschia": Array [
"#faebfc",
"#f5d4fa",
"#efbaf6",
"#e89bf2",
"#df73ed",
"#cf2de4",
"#bb29ce",
"#a424b5",
"#881d95",
"#61156b",
],
"gray": Array [
"#f9f9fa",
"#ebeeef",
"#dde1e4",
"#cdd4d8",
"#bcc5cb",
"#a9b5bc",
"#93a2ab",
"#7a8c97",
"#606e77",
"#384046",
],
"green": Array [
"#eafce7",
"#d2f9cd",
"#b7f5b0",
"#99f08d",
"#73eb64",
"#42e42d",
"#3cce29",
"#35b524",
"#2c971e",
"#206d16",
],
"indigo": Array [
"#ebedfc",
"#d4d8f9",
"#bac1f6",
"#9aa4f2",
"#7280ed",
"#2d42e4",
"#283bcd",
"#2334b3",
"#1d2a92",
"#141e66",
],
"info": "#2d9ee4",
"lime": Array [
"#f2fbe4",
"#e5f8c6",
"#d6f4a6",
"#c6ef83",
"#b3ea5b",
"#9ee42d",
"#8fce29",
"#7eb524",
"#69971e",
"#4c6d16",
],
"muted": "#7a8c97",
"orange": Array [
"#fcefe7",
"#f9ddcc",
"#f5caaf",
"#f0b38d",
"#eb9763",
"#e4732d",
"#ce6829",
"#b45b24",
"#954b1d",
"#6b3615",
],
"pink": Array [
"#fcebf6",
"#fad5eb",
"#f6bbdf",
"#f29cd1",
"#ed73be",
"#e42d9e",
"#ce298f",
"#b5247d",
"#961e68",
"#6b154a",
],
"primary": "#e42d42",
"red": Array [
"#fcebed",
"#fad5d9",
"#f6bcc2",
"#f29da7",
"#ed7582",
"#e42d42",
"#ce293c",
"#b52434",
"#951d2b",
"#6b151f",
],
"silver": "#7a8c97",
"slate": "#606e77",
"smoke": "#dde1e4",
"snow": "#f9f9fa",
"success": "#2de473",
"teal": Array [
"#e7fcef",
"#cdf9de",
"#b0f5ca",
"#8df0b3",
"#64eb98",
"#2de473",
"#29ce68",
"#24b55c",
"#1e974c",
"#166d37",
],
"violet": Array [
"#f2ebfc",
"#e3d4fa",
"#d1baf6",
"#bd9bf2",
"#a173ed",
"#732de4",
"#6829cd",
"#5a23b3",
"#4a1d93",
"#341467",
],
"warning": "#e4732d",
"white": "#ffffff",
"yellow": Array [
"#fbf9e3",
"#f7f2c4",
"#f3eaa4",
"#efe280",
"#ead959",
"#e4cf2d",
"#cebb29",
"#b5a524",
"#97891e",
"#6d6316",
],
},
"cx": [Function],
"font": "\\"Phantom Sans\\",-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\"",
"fontSizes": Array [
13.5,
16,
18,
24,
27,
36,
48,
54,
72,
96,
],
"fontWeights": Object {
"bold": "bold",
"regular": "regular",
},
"gradient": [Function],
"hexa": [Function],
"mediaQueries": Object {
"0": "@media screen and (min-width:32em)",
"1": "@media screen and (min-width:48em)",
"2": "@media screen and (min-width:64em)",
"3": "@media screen and (min-width:80em)",
"reduceMotion": "@media (prefers-reduced-motion: reduce)",
"reduceTransparency": "@media (prefers-reduced-transparency: reduce)",
},
"mono": "SFMono-Regular,\\"Roboto Mono\\",Menlo,monospace",
"pill": "9999px",
"radii": Array [
"0px",
"4px",
"8px",
"16px",
"9999px",
],
"radius": "4px",
"regular": "regular",
"scaleFactor": 1.0625,
"shadowColor": "rgba(0,0,0,0.125)",
"space": Array [
0,
6,
12,
18,
24,
36,
72,
108,
144,
288,
432,
],
"transition": "0.1875s cubic-bezier(0.375, 0, 0.675, 1)",
}
}
viewBox="0 0 32 32"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M10.953 5.034a1 1 0 0 0-1.225.707L4.034 26.992a1 1 0 1 0 1.932.517l5.694-21.25a1 1 0 0 0-.707-1.225zm2.107 9.005c.425-1.703.798-3.036 1.225-4.079.429-1.058.766-1.43.912-1.532a.216.216 0 0 0 .022-.023l.017.003c.131-.022.133-.021.353.073l.065.028c.584.23 1.492.826 2.826 2.076 1.584 1.462 3.173 2.338 4.36 2.738a9.906 9.906 0 0 0 2.045.4c-.312 1.161-.627 2.297-1.028 3.334-.405 1.061-.756 1.774-1.284 2.307-.385.41-.719.542-1.131.527-.519-.018-1.447-.289-2.901-1.37-1.746-1.291-3.25-2.073-4.327-2.514a17.61 17.61 0 0 0-1.498-.524c.08-.375.193-.838.344-1.444zm12.104-1.615a.522.522 0 0 1 0 0zm-13.21 2.816l.017.008a.08.08 0 0 1-.017-.008zm-.834-1.685c1.727-6.93 3.174-9.634 8.727-4.43 2.833 2.655 4.933 2.646 6.14 2.641 1.16-.005 1.494-.007.86 2.359-1.294 4.83-3.053 10.796-9.5 6-2.638-1.962-4.392-2.486-5.449-2.801-1.526-.456-1.599-.478-.778-3.769z"
/>
</g>
</svg>
</button>
`;
exports[`IconButton renders with circle prop 1`] = `
.c1 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: transparent;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
}
.c1:hover,
.c1:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.125);
}
.c1:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.125);
}
.c2 {
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
.c0 {
box-shadow: none !important;
line-height: 0 !important;
padding: 12px;
}
<button
className="c0 c1"
color="white"
fontSize={3}
>
<svg
aria-label="flag"
className="c2 "
clipRule="evenodd"
fill="currentColor"
fillRule="evenodd"
height={24}
preserveAspectRatio="xMidYMid meet"
strokeLinejoin="round"
strokeMiterlimit="1.414"
theme={
Object {
"bold": "bold",
"boxShadows": Array [
"0 0 2px 0 rgba(0,0,0,.0625),0 2px 4px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 4px 8px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 12px 12px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 24px 24px 0 rgba(0,0,0,0.125)",
],
"breakpoints": Array [
32,
48,
64,
80,
],
"colors": Object {
"accent": "#7280ed",
"base": "#2d9ce4",
"black": "#384046",
"blue": Array [
"#e6f4fc",
"#cce7f8",
"#add9f5",
"#8bc9f0",
"#62b6eb",
"#2d9ee4",
"#298fce",
"#247db4",
"#1d6795",
"#154a6b",
],
"cyan": Array [
"#e7fcfa",
"#ccf9f3",
"#aff5ed",
"#8cf0e5",
"#63ebdb",
"#2de4cf",
"#29cebb",
"#24b5a5",
"#1e9789",
"#166d63",
],
"dark": "#17171d",
"darker": "#121217",
"error": "#b52434",
"fuschia": Array [
"#faebfc",
"#f5d4fa",
"#efbaf6",
"#e89bf2",
"#df73ed",
"#cf2de4",
"#bb29ce",
"#a424b5",
"#881d95",
"#61156b",
],
"gray": Array [
"#f9f9fa",
"#ebeeef",
"#dde1e4",
"#cdd4d8",
"#bcc5cb",
"#a9b5bc",
"#93a2ab",
"#7a8c97",
"#606e77",
"#384046",
],
"green": Array [
"#eafce7",
"#d2f9cd",
"#b7f5b0",
"#99f08d",
"#73eb64",
"#42e42d",
"#3cce29",
"#35b524",
"#2c971e",
"#206d16",
],
"indigo": Array [
"#ebedfc",
"#d4d8f9",
"#bac1f6",
"#9aa4f2",
"#7280ed",
"#2d42e4",
"#283bcd",
"#2334b3",
"#1d2a92",
"#141e66",
],
"info": "#2d9ee4",
"lime": Array [
"#f2fbe4",
"#e5f8c6",
"#d6f4a6",
"#c6ef83",
"#b3ea5b",
"#9ee42d",
"#8fce29",
"#7eb524",
"#69971e",
"#4c6d16",
],
"muted": "#7a8c97",
"orange": Array [
"#fcefe7",
"#f9ddcc",
"#f5caaf",
"#f0b38d",
"#eb9763",
"#e4732d",
"#ce6829",
"#b45b24",
"#954b1d",
"#6b3615",
],
"pink": Array [
"#fcebf6",
"#fad5eb",
"#f6bbdf",
"#f29cd1",
"#ed73be",
"#e42d9e",
"#ce298f",
"#b5247d",
"#961e68",
"#6b154a",
],
"primary": "#e42d42",
"red": Array [
"#fcebed",
"#fad5d9",
"#f6bcc2",
"#f29da7",
"#ed7582",
"#e42d42",
"#ce293c",
"#b52434",
"#951d2b",
"#6b151f",
],
"silver": "#7a8c97",
"slate": "#606e77",
"smoke": "#dde1e4",
"snow": "#f9f9fa",
"success": "#2de473",
"teal": Array [
"#e7fcef",
"#cdf9de",
"#b0f5ca",
"#8df0b3",
"#64eb98",
"#2de473",
"#29ce68",
"#24b55c",
"#1e974c",
"#166d37",
],
"violet": Array [
"#f2ebfc",
"#e3d4fa",
"#d1baf6",
"#bd9bf2",
"#a173ed",
"#732de4",
"#6829cd",
"#5a23b3",
"#4a1d93",
"#341467",
],
"warning": "#e4732d",
"white": "#ffffff",
"yellow": Array [
"#fbf9e3",
"#f7f2c4",
"#f3eaa4",
"#efe280",
"#ead959",
"#e4cf2d",
"#cebb29",
"#b5a524",
"#97891e",
"#6d6316",
],
},
"cx": [Function],
"font": "\\"Phantom Sans\\",-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\"",
"fontSizes": Array [
13.5,
16,
18,
24,
27,
36,
48,
54,
72,
96,
],
"fontWeights": Object {
"bold": "bold",
"regular": "regular",
},
"gradient": [Function],
"hexa": [Function],
"mediaQueries": Object {
"0": "@media screen and (min-width:32em)",
"1": "@media screen and (min-width:48em)",
"2": "@media screen and (min-width:64em)",
"3": "@media screen and (min-width:80em)",
"reduceMotion": "@media (prefers-reduced-motion: reduce)",
"reduceTransparency": "@media (prefers-reduced-transparency: reduce)",
},
"mono": "SFMono-Regular,\\"Roboto Mono\\",Menlo,monospace",
"pill": "9999px",
"radii": Array [
"0px",
"4px",
"8px",
"16px",
"9999px",
],
"radius": "4px",
"regular": "regular",
"scaleFactor": 1.0625,
"shadowColor": "rgba(0,0,0,0.125)",
"space": Array [
0,
6,
12,
18,
24,
36,
72,
108,
144,
288,
432,
],
"transition": "0.1875s cubic-bezier(0.375, 0, 0.675, 1)",
}
}
viewBox="0 0 32 32"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M10.953 5.034a1 1 0 0 0-1.225.707L4.034 26.992a1 1 0 1 0 1.932.517l5.694-21.25a1 1 0 0 0-.707-1.225zm2.107 9.005c.425-1.703.798-3.036 1.225-4.079.429-1.058.766-1.43.912-1.532a.216.216 0 0 0 .022-.023l.017.003c.131-.022.133-.021.353.073l.065.028c.584.23 1.492.826 2.826 2.076 1.584 1.462 3.173 2.338 4.36 2.738a9.906 9.906 0 0 0 2.045.4c-.312 1.161-.627 2.297-1.028 3.334-.405 1.061-.756 1.774-1.284 2.307-.385.41-.719.542-1.131.527-.519-.018-1.447-.289-2.901-1.37-1.746-1.291-3.25-2.073-4.327-2.514a17.61 17.61 0 0 0-1.498-.524c.08-.375.193-.838.344-1.444zm12.104-1.615a.522.522 0 0 1 0 0zm-13.21 2.816l.017.008a.08.08 0 0 1-.017-.008zm-.834-1.685c1.727-6.93 3.174-9.634 8.727-4.43 2.833 2.655 4.933 2.646 6.14 2.641 1.16-.005 1.494-.007.86 2.359-1.294 4.83-3.053 10.796-9.5 6-2.638-1.962-4.392-2.486-5.449-2.801-1.526-.456-1.599-.478-.778-3.769z"
/>
</g>
</svg>
</button>
`;
================================================
FILE: src/__tests__/__snapshots__/Image.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Image renders 1`] = `
.c0 {
display: block;
max-width: 100%;
height: auto;
}
<img
alt="Smiling students at a hackathon"
className="c0 "
src="https://hackclub.com/social-photo_2.jpg"
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Input.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Input renders 1`] = `
.c0 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
vertical-align: middle;
max-width: 32rem;
min-height: 36px;
line-height: inherit;
font-family: inherit;
background-color: transparent;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: #dde1e4;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
font-size: 18px;
margin: 0px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
width: 100%;
color: inherit;
background-color: transparent;
}
.c0::-ms-clear {
display: none;
}
.c0::-ms-clear {
display: none;
}
.c0::-ms-clear {
display: none;
}
.c0::-ms-clear {
display: none;
}
.c0:focus {
outline: none;
border-color: #2d9ee4;
box-shadow: 0 0 0 2px #add9f5;
}
.c0[type='select'] {
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23606e77' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
background-size: .5rem;
}
.c0[type='textarea'] {
resize: vertical;
}
<input
className="c0"
color="inherit"
fontSize={2}
id="renders"
width={1}
/>
`;
exports[`Input renders with custom fontSize 1`] = `
.c0 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
vertical-align: middle;
max-width: 32rem;
min-height: 36px;
line-height: inherit;
font-family: inherit;
background-color: transparent;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: #dde1e4;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
font-size: 27px;
margin: 0px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
width: 100%;
color: inherit;
background-color: transparent;
}
.c0::-ms-clear {
display: none;
}
.c0::-ms-clear {
display: none;
}
.c0::-ms-clear {
display: none;
}
.c0::-ms-clear {
display: none;
}
.c0:focus {
outline: none;
border-color: #2d9ee4;
box-shadow: 0 0 0 2px #add9f5;
}
.c0[type='select'] {
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23606e77' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
background-size: .5rem;
}
.c0[type='textarea'] {
resize: vertical;
}
<input
className="c0"
color="inherit"
fontSize={4}
id="fontSize"
width={1}
/>
`;
exports[`Input renders with custom spacing 1`] = `
.c0 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
vertical-align: middle;
max-width: 32rem;
min-height: 36px;
line-height: inherit;
font-family: inherit;
background-color: transparent;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: #dde1e4;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
font-size: 18px;
margin: 24px;
padding: 24px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
width: 100%;
color: inherit;
background-color: transparent;
}
.c0::-ms-clear {
display: none;
}
.c0::-ms-clear {
display: none;
}
.c0::-ms-clear {
display: none;
}
.c0::-ms-clear {
display: none;
}
.c0:focus {
outline: none;
border-color: #2d9ee4;
box-shadow: 0 0 0 2px #add9f5;
}
.c0[type='select'] {
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23606e77' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
background-size: .5rem;
}
.c0[type='textarea'] {
resize: vertical;
}
<input
className="c0"
color="inherit"
fontSize={2}
id="space"
width={1}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Label.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Label it renders 1`] = `
.c1 {
font-size: 18px;
margin: 0px;
color: #384046;
}
.c0 {
display: block;
}
.c0 a {
color: #2d9ee4;
-webkit-text-decoration: underline;
text-decoration: underline;
}
<label
className="c0 c1"
color="black"
fontSize={2}
width={1}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/LargeButton.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LargeButton inverted 1`] = `
.c0 {
margin: 0px;
padding-left: 24px;
padding-right: 24px;
padding-top: 18px;
padding-bottom: 18px;
background-color: #e42d42;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
background-color: #ffffff;
color: #e42d42;
text-transform: uppercase;
box-shadow: 0 2px 12px rgba(0,0,0,0.125);
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.125);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.125);
}
.c0:hover,
.c0:focus {
box-shadow: 0 2px 12px 2px rgba(0,0,0,0.125);
}
.c0:active {
box-shadow: 0 4px 16px 2px rgba(0,0,0,0.125);
}
<a
className="c0"
color="white"
fontSize={3}
/>
`;
exports[`LargeButton larger 1`] = `
.c0 {
margin: 0px;
padding-left: 24px;
padding-right: 24px;
padding-top: 18px;
padding-bottom: 18px;
background-color: #7280ed;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
text-transform: uppercase;
box-shadow: 0 2px 12px rgba(0,0,0,0.125);
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(114,128,237,0.25);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(114,128,237,0.25);
}
.c0:hover,
.c0:focus {
box-shadow: 0 2px 12px 2px rgba(114,128,237,0.25);
}
.c0:active {
box-shadow: 0 4px 16px 2px rgba(114,128,237,0.25);
}
<a
className="c0"
color="white"
fontSize={3}
/>
`;
exports[`LargeButton renders 1`] = `
.c0 {
margin: 0px;
padding-left: 24px;
padding-right: 24px;
padding-top: 18px;
padding-bottom: 18px;
background-color: #e42d42;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
text-transform: uppercase;
box-shadow: 0 2px 12px rgba(0,0,0,0.125);
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(228,45,66,0.25);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);
}
.c0:hover,
.c0:focus {
box-shadow: 0 2px 12px 2px rgba(228,45,66,0.25);
}
.c0:active {
box-shadow: 0 4px 16px 2px rgba(228,45,66,0.25);
}
<a
className="c0"
color="white"
fontSize={3}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Link.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Link renders 1`] = `
.c0 {
color: #2d9ee4;
-webkit-text-decoration: none;
text-decoration: none;
}
.c0:before,
.c0:after {
-webkit-text-decoration: none !important;
text-decoration: none !important;
display: inline-block;
}
<a
className="c0"
color="info"
>
Hello
</a>
`;
exports[`Link renders chevronleft 1`] = `
.c0 {
color: #2d9ee4;
-webkit-text-decoration: none;
text-decoration: none;
}
.c0:before,
.c0:after {
-webkit-text-decoration: none !important;
text-decoration: none !important;
display: inline-block;
}
.c0:before {
content: '‹';
padding-right: 0.25em;
}
<a
className="c0"
color="info"
>
Left
</a>
`;
exports[`Link renders chevronright 1`] = `
.c0 {
color: #2d9ee4;
-webkit-text-decoration: none;
text-decoration: none;
}
.c0:before,
.c0:after {
-webkit-text-decoration: none !important;
text-decoration: none !important;
display: inline-block;
}
.c0:after {
content: '›';
padding-left: 0.25em;
}
<a
className="c0"
color="info"
>
Right
</a>
`;
exports[`Link renders hoverline 1`] = `
.c0 {
color: #2d9ee4;
-webkit-text-decoration: none;
text-decoration: none;
}
.c0:focus,
.c0:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c0:before,
.c0:after {
-webkit-text-decoration: none !important;
text-decoration: none !important;
display: inline-block;
}
<a
className="c0"
color="info"
>
Hoverline
</a>
`;
exports[`Link renders underline 1`] = `
.c0 {
color: #2d9ee4;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c0:before,
.c0:after {
-webkit-text-decoration: none !important;
text-decoration: none !important;
display: inline-block;
}
<a
className="c0"
color="info"
>
Underline
</a>
`;
================================================
FILE: src/__tests__/__snapshots__/Loading.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Loading renders 1`] = `
.c1 {
color: #e42d42;
}
.c0 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 64px;
height: 64px;
border-radius: 50%;
}
.c2 {
position: absolute;
border: 4px solid currentColor;
opacity: 1;
border-radius: 50%;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-animation: EdArQ 0.975s ease-out infinite;
animation: EdArQ 0.975s ease-out infinite;
}
<div
aria-label="Loading"
className="c0 c1"
color="primary"
role="presentation"
>
<div
className="c2 "
/>
<div
className="c2 "
/>
</div>
`;
================================================
FILE: src/__tests__/__snapshots__/OutlineButton.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`OutlineButton disabled prop sets 1`] = `
.c0 {
margin: 0px;
padding-left: 22px;
padding-right: 22px;
padding-top: 16px;
padding-bottom: 16px;
background-color: #e42d42;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
opacity: 0.25;
cursor: not-allowed;
text-transform: uppercase;
box-shadow: 0 2px 12px rgba(0,0,0,0.125);
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #e42d42;
box-shadow: none;
color: #e42d42;
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(228,45,66,0.25);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);
}
.c0:hover,
.c0:focus {
box-shadow: 0 2px 12px 2px rgba(228,45,66,0.25);
}
.c0:active {
box-shadow: 0 4px 16px 2px rgba(228,45,66,0.25);
}
.c0:focus:enabled,
.c0:hover:enabled {
background: #e42d42;
color: #ffffff;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;
}
<a
className="c0"
color="white"
disabled={true}
fontSize={3}
/>
`;
exports[`OutlineButton renders 1`] = `
.c0 {
margin: 0px;
padding-left: 22px;
padding-right: 22px;
padding-top: 16px;
padding-bottom: 16px;
background-color: #e42d42;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
text-transform: uppercase;
box-shadow: 0 2px 12px rgba(0,0,0,0.125);
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #e42d42;
box-shadow: none;
color: #e42d42;
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(228,45,66,0.25);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);
}
.c0:hover,
.c0:focus {
box-shadow: 0 2px 12px 2px rgba(228,45,66,0.25);
}
.c0:active {
box-shadow: 0 4px 16px 2px rgba(228,45,66,0.25);
}
.c0:focus:enabled,
.c0:hover:enabled {
background: #e42d42;
color: #ffffff;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;
}
<a
className="c0"
color="white"
fontSize={3}
/>
`;
exports[`OutlineButton with custom color 1`] = `
.c0 {
margin: 0px;
padding-left: 22px;
padding-right: 22px;
padding-top: 16px;
padding-bottom: 16px;
background-color: #ffffff;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
text-transform: uppercase;
box-shadow: 0 2px 12px rgba(0,0,0,0.125);
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
}
.c0:hover,
.c0:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(255,255,255,0.25);
}
.c0:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(255,255,255,0.25);
}
.c0:hover,
.c0:focus {
box-shadow: 0 2px 12px 2px rgba(255,255,255,0.25);
}
.c0:active {
box-shadow: 0 4px 16px 2px rgba(255,255,255,0.25);
}
.c0:focus:enabled,
.c0:hover:enabled {
background: #ffffff;
color: #ffffff;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;
}
<a
className="c0"
color="white"
fontSize={3}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Section.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Section renders 1`] = `
.c2 {
padding-left: 18px;
padding-right: 18px;
padding-top: 24px;
padding-bottom: 24px;
color: #ffffff;
text-align: center;
}
.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c0 {
text-align: center;
}
@media screen and (min-width:32em) {
.c2 {
padding-top: 36px;
padding-bottom: 36px;
}
}
<div
className="c0 c1 c2"
color="white"
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Sheet.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Sheet renders 1`] = `
.c3 {
margin-left: auto;
margin-right: auto;
padding: 18px;
width: 100%;
background-color: rgba(255,255,255,0.875);
}
.c2 {
max-width: 72rem;
}
.c1 {
border-radius: 4px;
}
.c0 {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,0.0625);
}
@media screen and (min-width:32em) {
.c3 {
padding: 24px;
}
}
<div
className="c0 c1 c2 c3"
width={1}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Slider.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Slider renders 1`] = `
.c0 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
border-radius: 9999px;
height: 4px;
cursor: pointer;
width: 100%;
background-color: #dde1e4;
color: #e42d42;
}
.c0::-webkit-slider-thumb {
width: 16px;
height: 16px;
background-color: currentColor;
border: 0;
border-radius: 9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<input
className="c0"
color="primary"
id="renders"
type="range"
width={1}
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Submit.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Submit renders 1`] = `
.c1 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: #e42d42;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
}
.c1:hover,
.c1:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(228,45,66,0.25);
}
.c1:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);
}
.c0 {
text-transform: uppercase;
}
<input
className="c0 c1"
color="white"
fontSize={3}
type="submit"
/>
`;
exports[`Submit renders lg 1`] = `
.c1 {
margin: 0px;
padding-left: 18px;
padding-right: 18px;
padding-top: 12px;
padding-bottom: 12px;
background-color: #e42d42;
color: #ffffff;
font-size: 24px;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: bold;
line-height: 1.125;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
-webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;
box-shadow: 0 2px 4px rgba(0,0,0,0.125);
border-radius: 9999px;
border: none;
}
.c1:hover,
.c1:focus {
outline: 0;
box-shadow: 0 2px 6px rgba(228,45,66,0.25);
}
.c1:active {
outline: 0;
box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);
}
.c0 {
text-transform: uppercase;
}
<input
className="c0 c1"
color="white"
fontSize={3}
type="submit"
/>
`;
================================================
FILE: src/__tests__/__snapshots__/Text.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Text align prop sets text-align 1`] = `
.c0 {
margin: 0px;
text-align: center;
}
<p
className="c0"
/>
`;
exports[`Text bold prop sets font-weight 1`] = `
.c0 {
margin: 0px;
font-weight: bold;
}
<p
className="c0"
/>
`;
exports[`Text caps prop sets text-transform 1`] = `
.c0 {
margin: 0px;
text-transform: uppercase;
}
<p
className="c0"
/>
`;
exports[`Text maxWidth prop sets max-width 1`] = `
.c0 {
margin: 0px;
max-width: 48rem;
}
<p
className="c0"
/>
`;
exports[`Text mt prop sets margin-top 1`] = `
.c0 {
margin: 0px;
margin-top: 12px;
}
<p
className="c0"
/>
`;
exports[`Text regular prop sets font-weight 1`] = `
.c0 {
margin: 0px;
font-weight: regular;
}
<p
className="c0"
/>
`;
exports[`Text renders 1`] = `
.c0 {
margin: 0px;
}
<p
className="c0"
/>
`;
================================================
FILE: src/__tests__/__snapshots__/ThemeProvider.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ThemeProvider renders content with theme 1`] = `
.c0 {
color: #e42d42;
}
<p
className="c0"
>
Hello!
</p>
`;
================================================
FILE: src/__tests__/__snapshots__/theme.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`theme snapshot 1`] = `
Object {
"bold": "bold",
"boxShadows": Array [
"0 0 2px 0 rgba(0,0,0,.0625),0 2px 4px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 4px 8px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 12px 12px 0 rgba(0,0,0,0.125)",
"0 0 2px 0 rgba(0,0,0,.0625),0 24px 24px 0 rgba(0,0,0,0.125)",
],
"breakpoints": Array [
32,
48,
64,
80,
],
"colors": Object {
"accent": "#7280ed",
"base": "#2d9ce4",
"black": "#384046",
"blue": Array [
"#e6f4fc",
"#cce7f8",
"#add9f5",
"#8bc9f0",
"#62b6eb",
"#2d9ee4",
"#298fce",
"#247db4",
"#1d6795",
"#154a6b",
],
"cyan": Array [
"#e7fcfa",
"#ccf9f3",
"#aff5ed",
"#8cf0e5",
"#63ebdb",
"#2de4cf",
"#29cebb",
"#24b5a5",
"#1e9789",
"#166d63",
],
"dark": "#17171d",
"darker": "#121217",
"error": "#b52434",
"fuschia": Array [
"#faebfc",
"#f5d4fa",
"#efbaf6",
"#e89bf2",
"#df73ed",
"#cf2de4",
"#bb29ce",
"#a424b5",
"#881d95",
"#61156b",
],
"gray": Array [
"#f9f9fa",
"#ebeeef",
"#dde1e4",
"#cdd4d8",
"#bcc5cb",
"#a9b5bc",
"#93a2ab",
"#7a8c97",
"#606e77",
"#384046",
],
"green": Array [
"#eafce7",
"#d2f9cd",
"#b7f5b0",
"#99f08d",
"#73eb64",
"#42e42d",
"#3cce29",
"#35b524",
"#2c971e",
"#206d16",
],
"indigo": Array [
"#ebedfc",
"#d4d8f9",
"#bac1f6",
"#9aa4f2",
"#7280ed",
"#2d42e4",
"#283bcd",
"#2334b3",
"#1d2a92",
"#141e66",
],
"info": "#2d9ee4",
"lime": Array [
"#f2fbe4",
"#e5f8c6",
"#d6f4a6",
"#c6ef83",
"#b3ea5b",
"#9ee42d",
"#8fce29",
"#7eb524",
"#69971e",
"#4c6d16",
],
"muted": "#7a8c97",
"orange": Array [
"#fcefe7",
"#f9ddcc",
"#f5caaf",
"#f0b38d",
"#eb9763",
"#e4732d",
"#ce6829",
"#b45b24",
"#954b1d",
"#6b3615",
],
"pink": Array [
"#fcebf6",
"#fad5eb",
"#f6bbdf",
"#f29cd1",
"#ed73be",
"#e42d9e",
"#ce298f",
"#b5247d",
"#961e68",
"#6b154a",
],
"primary": "#e42d42",
"red": Array [
"#fcebed",
"#fad5d9",
"#f6bcc2",
"#f29da7",
"#ed7582",
"#e42d42",
"#ce293c",
"#b52434",
"#951d2b",
"#6b151f",
],
"silver": "#7a8c97",
"slate": "#606e77",
"smoke": "#dde1e4",
"snow": "#f9f9fa",
"success": "#2de473",
"teal": Array [
"#e7fcef",
"#cdf9de",
"#b0f5ca",
"#8df0b3",
"#64eb98",
"#2de473",
"#29ce68",
"#24b55c",
"#1e974c",
"#166d37",
],
"violet": Array [
"#f2ebfc",
"#e3d4fa",
"#d1baf6",
"#bd9bf2",
"#a173ed",
"#732de4",
"#6829cd",
"#5a23b3",
"#4a1d93",
"#341467",
],
"warning": "#e4732d",
"white": "#ffffff",
"yellow": Array [
"#fbf9e3",
"#f7f2c4",
"#f3eaa4",
"#efe280",
"#ead959",
"#e4cf2d",
"#cebb29",
"#b5a524",
"#97891e",
"#6d6316",
],
},
"cx": [Function],
"font": "\\"Phantom Sans\\",-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\"",
"fontSizes": Array [
13.5,
16,
18,
24,
27,
36,
48,
54,
72,
96,
],
"fontWeights": Object {
"bold": "bold",
"regular": "regular",
},
"gradient": [Function],
"hexa": [Function],
"mediaQueries": Object {
"0": "@media screen and (min-width:32em)",
"1": "@media screen and (min-width:48em)",
"2": "@media screen and (min-width:64em)",
"3": "@media screen and (min-width:80em)",
"reduceMotion": "@media (prefers-reduced-motion: reduce)",
"reduceTransparency": "@media (prefers-reduced-transparency: reduce)",
},
"mono": "SFMono-Regular,\\"Roboto Mono\\",Menlo,monospace",
"pill": "9999px",
"radii": Array [
"0px",
"4px",
"8px",
"16px",
"9999px",
],
"radius": "4px",
"regular": "regular",
"scaleFactor": 1.0625,
"shadowColor": "rgba(0,0,0,0.125)",
"space": Array [
0,
6,
12,
18,
24,
36,
72,
108,
144,
288,
432,
],
"transition": "0.1875s cubic-bezier(0.375, 0, 0.675, 1)",
}
`;
================================================
FILE: src/__tests__/theme.js
================================================
import theme, { cx, colors, space, fontSizes, boxShadows } from '../theme'
const aliases = ['sm', 'md', 'lg', 'xl']
describe('theme', () => {
test('exports an object', () => {
expect(typeof theme).toBe('object')
})
test('snapshot', () => {
expect(theme).toMatchSnapshot()
})
test('exports colors', () => {
expect(typeof colors).toBe('object')
})
test('cx works', () => {
expect(theme.cx('red.5')).toBe(theme.colors.red[5])
expect(theme.cx('#ff6d00')).toBe('#ff6d00')
})
test('hexa works', () => {
expect(theme.hexa('primary')).toBe('rgb(228, 45, 66)')
expect(theme.hexa('primary', 0.5)).toBe('rgba(228, 45, 66, 0.5)')
})
test('gradient works', () => {
const sample = theme.gradient('accent', 'info')
expect(sample).toMatch('radial-gradient')
expect(sample).toMatch(cx('accent'))
expect(sample).toMatch(cx('info'))
})
test('scales are objects', () => {
expect(typeof space).toBe('object')
expect(typeof fontSizes).toBe('object')
expect(typeof boxShadows).toBe('object')
})
test('breakpoints have aliases', () => {
aliases.forEach((alias, i) =>
expect(theme.breakpoints[alias]).toEqual(theme.breakpoints[i])
)
})
test('media queries have aliases', () => {
aliases.forEach((alias, i) =>
expect(theme.mediaQueries[alias]).toEqual(theme.mediaQueries[i])
)
expect(theme.mediaQueries.reduceMotion).toEqual(
'@media (prefers-reduced-motion: reduce)'
)
expect(theme.mediaQueries.reduceTransparency).toEqual(
'@media (prefers-reduced-transparency: reduce)'
)
})
})
================================================
FILE: src/index.js
================================================
export { default as Avatar } from './Avatar'
export { default as BackgroundImage } from './BackgroundImage'
export { default as Badge } from './Badge'
export { default as BlockLink } from './BlockLink'
export { default as Box } from './Box'
export { default as Button } from './Button'
export { default as Card } from './Card'
export { default as Container } from './Container'
export { default as Field } from './Field'
export { default as Flex } from './Flex'
export { default as Heading } from './Heading'
export { default as Hide } from './Hide'
export { default as Icon } from './Icon'
export { default as IconButton } from './IconButton'
export { default as Image } from './Image'
export { default as Input } from './Input'
export { default as Label } from './Label'
export { default as LargeButton } from './LargeButton'
export { default as Link } from './Link'
export { default as Loading } from './Loading'
export { default as OutlineButton } from './OutlineButton'
export { default as Section } from './Section'
export { default as Sheet } from './Sheet'
export { default as Slider } from './Slider'
export { default as Submit } from './Submit'
export { default as Text } from './Text'
export { default as theme } from './theme'
export { default as ThemeProvider } from './ThemeProvider'
export * from './theme'
================================================
FILE: src/theme.js
================================================
import palx from 'palx'
import { includes, get } from 'lodash'
const red = '#e42d42'
const blue = '#2d9ce4'
export const palette = palx(blue)
export const grays = {
darker: '#121217',
dark: '#17171d',
black: palette.black,
slate: palette.gray[8],
silver: palette.gray[7],
smoke: palette.gray[2],
snow: palette.gray[0],
white: '#ffffff'
}
export const brand = {
primary: red,
accent: palette.indigo[4],
success: palette.teal[5],
info: palette.blue[5],
warning: palette.orange[5],
error: palette.red[7],
muted: grays.silver
}
export const colors = {
...brand,
...grays,
...palette
}
export const cx = key => get(colors, key, key)
const createMediaQuery = n => `@media screen and (min-width:${n}em)`
const addAliases = (arr, aliases) =>
aliases.forEach((key, i) =>
Object.defineProperty(arr, key, {
enumerable: false,
get() {
return this[i]
}
})
)
const aliases = ['sm', 'md', 'lg', 'xl']
export const breakpoints = [32, 48, 64, 80]
export const mediaQueries = {
...breakpoints.map(createMediaQuery),
reduceMotion: '@media (prefers-reduced-motion: reduce)',
reduceTransparency: '@media (prefers-reduced-transparency: reduce)'
}
addAliases(breakpoints, aliases)
addAliases(mediaQueries, aliases)
export const space = [0, 6, 12, 18, 24, 36, 72, 108, 144, 288, 432]
const emoji = '"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
export const font = `"Phantom Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif,${emoji}`
export const mono = 'SFMono-Regular,"Roboto Mono",Menlo,monospace'
export const fontSizes = [13.5, 16, 18, 24, 27, 36, 48, 54, 72, 96]
export const regular = 'regular'
export const bold = 'bold'
// styled-system's `fontWeight` function can hook into the `fontWeights` object
export const fontWeights = { regular, bold }
export const scaleFactor = 17 / 16
export const transition = `${3 / 16}s cubic-bezier(0.375, 0, 0.675, 1)`
// styled-system’s `borderRadius` function can hook into the `radii` object/array
export const pill = '9999px'
export const radii = ['0px', '4px', '8px', '16px', pill]
export const radius = '4px'
export const shadowColor = 'rgba(0,0,0,0.125)'
export const baseShadow = '0 0 2px 0 rgba(0,0,0,.0625),'
export const boxShadows = [
baseShadow + `0 2px 4px 0 ${shadowColor}`,
baseShadow + `0 4px 8px 0 ${shadowColor}`,
baseShadow + `0 12px 12px 0 ${shadowColor}`,
baseShadow + `0 24px 24px 0 ${shadowColor}`
]
export const hexa = (color, alpha) => {
const hex = cx(color)
if (!includes(hex, '#')) return shadowColor
const r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16)
if (alpha >= 0) {
return `rgba(${r}, ${g}, ${b}, ${alpha})`
} else {
return `rgb(${r}, ${g}, ${b})`
}
}
export const gradient = (color1, color2) =>
`radial-gradient(
ellipse farthest-corner at top left,
${cx(color1)} 0%, ${cx(color2)} 100%
)`
const theme = {
breakpoints,
mediaQueries,
space,
mono,
font,
fontSizes,
fontWeights,
regular,
bold,
colors,
radii,
radius,
pill,
scaleFactor,
transition,
boxShadows,
shadowColor,
cx,
hexa,
gradient
}
export default theme
================================================
FILE: test-setup.js
================================================
import 'jest-styled-components'
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({ adapter: new Adapter() })
gitextract_7404ezv9/ ├── .babelrc ├── .gitignore ├── .npmignore ├── .storybook/ │ ├── .babelrc │ ├── AAA.js │ ├── Avatar.js │ ├── BackgroundImage.js │ ├── Badge.js │ ├── BlockLink.js │ ├── Box.js │ ├── Button.js │ ├── Card.js │ ├── Colors.js │ ├── Container.js │ ├── Field.js │ ├── Flex.js │ ├── Heading.js │ ├── Hide.js │ ├── Icon.js │ ├── IconButton.js │ ├── Image.js │ ├── Input.js │ ├── Label.js │ ├── LargeButton.js │ ├── Layouts.js │ ├── Link.js │ ├── Loading.js │ ├── OutlineButton.js │ ├── Section.js │ ├── Sheet.js │ ├── Slider.js │ ├── Submit.js │ ├── Text.js │ └── config.js ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── docs/ │ ├── Contributing.md │ ├── GettingStarted.md │ ├── README.md │ ├── Theme.md │ └── ThemeProvider.md ├── package.json ├── src/ │ ├── Avatar.js │ ├── BackgroundImage.js │ ├── Badge.js │ ├── BlockLink.js │ ├── Box.js │ ├── Button.js │ ├── Card.js │ ├── Container.js │ ├── Field.js │ ├── Flex.js │ ├── Heading.js │ ├── Hide.js │ ├── Icon.js │ ├── IconButton.js │ ├── Image.js │ ├── Input.js │ ├── Label.js │ ├── LargeButton.js │ ├── Link.js │ ├── Loading.js │ ├── OutlineButton.js │ ├── Section.js │ ├── Sheet.js │ ├── Slider.js │ ├── Submit.js │ ├── Text.js │ ├── ThemeProvider.js │ ├── __tests__/ │ │ ├── Avatar.js │ │ ├── BackgroundImage.js │ │ ├── Badge.js │ │ ├── BlockLink.js │ │ ├── Box.js │ │ ├── Button.js │ │ ├── Card.js │ │ ├── Container.js │ │ ├── Field.js │ │ ├── Flex.js │ │ ├── Heading.js │ │ ├── Hide.js │ │ ├── Icon.js │ │ ├── IconButton.js │ │ ├── Image.js │ │ ├── Input.js │ │ ├── Label.js │ │ ├── LargeButton.js │ │ ├── Link.js │ │ ├── Loading.js │ │ ├── OutlineButton.js │ │ ├── Section.js │ │ ├── Sheet.js │ │ ├── Slider.js │ │ ├── Submit.js │ │ ├── Text.js │ │ ├── ThemeProvider.js │ │ ├── __snapshots__/ │ │ │ ├── Avatar.js.snap │ │ │ ├── BackgroundImage.js.snap │ │ │ ├── Badge.js.snap │ │ │ ├── BlockLink.js.snap │ │ │ ├── Box.js.snap │ │ │ ├── Button.js.snap │ │ │ ├── Card.js.snap │ │ │ ├── Container.js.snap │ │ │ ├── Field.js.snap │ │ │ ├── Flex.js.snap │ │ │ ├── Heading.js.snap │ │ │ ├── Hide.js.snap │ │ │ ├── Icon.js.snap │ │ │ ├── IconButton.js.snap │ │ │ ├── Image.js.snap │ │ │ ├── Input.js.snap │ │ │ ├── Label.js.snap │ │ │ ├── LargeButton.js.snap │ │ │ ├── Link.js.snap │ │ │ ├── Loading.js.snap │ │ │ ├── OutlineButton.js.snap │ │ │ ├── Section.js.snap │ │ │ ├── Sheet.js.snap │ │ │ ├── Slider.js.snap │ │ │ ├── Submit.js.snap │ │ │ ├── Text.js.snap │ │ │ ├── ThemeProvider.js.snap │ │ │ └── theme.js.snap │ │ └── theme.js │ ├── index.js │ └── theme.js └── test-setup.js
SYMBOL INDEX (1 symbols across 1 files)
FILE: src/theme.js
method get (line 43) | get() {
Condensed preview — 130 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (187K chars).
[
{
"path": ".babelrc",
"chars": 55,
"preview": "{\n \"presets\": [\"@babel/env\", \"@babel/preset-react\"]\n}\n"
},
{
"path": ".gitignore",
"chars": 57,
"preview": "node_modules\nnpm-debug.log\ncoverage\ndist\n.site\n.DS_Store\n"
},
{
"path": ".npmignore",
"chars": 24,
"preview": "src\nstorybook\ndocs\ntest\n"
},
{
"path": ".storybook/.babelrc",
"chars": 60,
"preview": "{ \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"] }\n"
},
{
"path": ".storybook/AAA.js",
"chars": 2186,
"preview": "import React, { Fragment } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { Box, Flex, Heading, Text, "
},
{
"path": ".storybook/Avatar.js",
"chars": 578,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/BackgroundImage.js",
"chars": 1406,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Badge.js",
"chars": 668,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/BlockLink.js",
"chars": 795,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Box.js",
"chars": 2146,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Button.js",
"chars": 1437,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Card.js",
"chars": 2973,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Colors.js",
"chars": 1146,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport styled from 'styled-components'\nimport { B"
},
{
"path": ".storybook/Container.js",
"chars": 685,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Field.js",
"chars": 1006,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Flex.js",
"chars": 1193,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { Flex, Box } from '../src'\n\nstoriesOf('Fl"
},
{
"path": ".storybook/Heading.js",
"chars": 1230,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Hide.js",
"chars": 508,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { Hide, Flex } from '../src'\n\nstoriesOf('H"
},
{
"path": ".storybook/Icon.js",
"chars": 833,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/IconButton.js",
"chars": 849,
"preview": "import React, { Fragment } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storyboo"
},
{
"path": ".storybook/Image.js",
"chars": 588,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Input.js",
"chars": 637,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Label.js",
"chars": 1426,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/LargeButton.js",
"chars": 838,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Layouts.js",
"chars": 2169,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport { storiesOf } from '@storybook/react'\nimport { F"
},
{
"path": ".storybook/Link.js",
"chars": 830,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Loading.js",
"chars": 347,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/OutlineButton.js",
"chars": 809,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Section.js",
"chars": 469,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Sheet.js",
"chars": 383,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Slider.js",
"chars": 296,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Submit.js",
"chars": 431,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/Text.js",
"chars": 1659,
"preview": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\n"
},
{
"path": ".storybook/config.js",
"chars": 358,
"preview": "import React from 'react'\nimport { configure, addDecorator } from '@storybook/react'\nimport { ThemeProvider, Box } from "
},
{
"path": ".travis.yml",
"chars": 188,
"preview": "language: node_js\nnode_js:\n - 12\nafter_success:\n - npm run storybook\ndeploy:\n provider: pages\n skip_cleanup: true\n "
},
{
"path": "CONTRIBUTING.md",
"chars": 2472,
"preview": "# Contributing\n\nIf you’d like to contribute to the design system, we’d love to have your help.\n\nContributing doesn’t nec"
},
{
"path": "LICENSE.md",
"chars": 1086,
"preview": "# The MIT License (MIT)\n\nCopyright (c) 2017–2019 hackclub.com\n\nPermission is hereby granted, free of charge, to any pers"
},
{
"path": "README.md",
"chars": 1215,
"preview": "# Hack Club Design System\n\n> Hack Club has transitioned to using `hackclub/theme` as its design system. This project is "
},
{
"path": "docs/Contributing.md",
"chars": 2472,
"preview": "# Contributing\n\nIf you’d like to contribute to the design system, we’d love to have your help.\n\nContributing doesn’t nec"
},
{
"path": "docs/GettingStarted.md",
"chars": 1003,
"preview": "# Getting Started\n\nInstall the Design System in your application\n\n```sh\nyarn add @hackclub/design-system\n```\n\n## ThemePr"
},
{
"path": "docs/README.md",
"chars": 146,
"preview": "# Documentation\n\n- [Getting Started](GettingStarted.md)\n- [Contributing](Contributing.md)\n- [ThemeProvider](ThemeProvide"
},
{
"path": "docs/Theme.md",
"chars": 1534,
"preview": "# Theme\n\nThe theme style constants should be used whenever low-level access to font\nsizes, margin, padding, media querie"
},
{
"path": "docs/ThemeProvider.md",
"chars": 535,
"preview": "# ThemeProvider\n\nThe ThemeProvider component is a wrapper around the styled-components’ [ThemeProvider][1]\n\nWrap the roo"
},
{
"path": "package.json",
"chars": 1883,
"preview": "{\n \"name\": \"@hackclub/design-system\",\n \"version\": \"0.0.1-18\",\n \"description\": \"Hack Club Design System\",\n \"main\": \"d"
},
{
"path": "src/Avatar.js",
"chars": 572,
"preview": "import styled from 'styled-components'\nimport Box from './Box'\nimport PropTypes from 'prop-types'\nimport theme from './t"
},
{
"path": "src/BackgroundImage.js",
"chars": 1295,
"preview": "import Box from './Box'\nimport PropTypes from 'prop-types'\nimport theme from './theme'\nimport styled, { css } from 'styl"
},
{
"path": "src/Badge.js",
"chars": 456,
"preview": "import styled from 'styled-components'\nimport Text from './Text'\nimport theme from './theme'\n\nconst Badge = styled(Text."
},
{
"path": "src/BlockLink.js",
"chars": 253,
"preview": "import styled from 'styled-components'\nimport Text from './Text'\n\nconst BlockLink = styled(Text.withComponent('a')).attr"
},
{
"path": "src/Box.js",
"chars": 656,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport {\n space,\n width,\n color,\n fontSize,\n textA"
},
{
"path": "src/Button.js",
"chars": 2305,
"preview": "import Box from './Box'\nimport theme, { cx, hexa } from './theme'\nimport { css } from 'styled-components'\nimport PropTyp"
},
{
"path": "src/Card.js",
"chars": 1074,
"preview": "import styled from 'styled-components'\nimport Box from './Box'\nimport theme from './theme'\nimport PropTypes from 'prop-t"
},
{
"path": "src/Container.js",
"chars": 366,
"preview": "import styled from 'styled-components'\nimport Box from './Box'\nimport PropTypes from 'prop-types'\n\nconst Container = sty"
},
{
"path": "src/Field.js",
"chars": 1544,
"preview": "import React from 'react'\nimport Label from './Label'\nimport Flex from './Flex'\nimport Text from './Text'\nimport Input, "
},
{
"path": "src/Flex.js",
"chars": 633,
"preview": "import styled from 'styled-components'\nimport {\n alignSelf,\n alignItems,\n justifyContent,\n flexDirection,\n flex,\n "
},
{
"path": "src/Heading.js",
"chars": 974,
"preview": "import styled from 'styled-components'\nimport Text from './Text'\nimport theme from './theme'\n\nconst Heading = Text.withC"
},
{
"path": "src/Hide.js",
"chars": 1167,
"preview": "import styled from 'styled-components'\nimport Box from './Box'\nimport PropTypes from 'prop-types'\nimport theme from './t"
},
{
"path": "src/Icon.js",
"chars": 481,
"preview": "import styled from 'styled-components'\nimport PropTypes from 'prop-types'\nimport Box from './Box'\nimport HCIcon from '@h"
},
{
"path": "src/IconButton.js",
"chars": 816,
"preview": "import React from 'react'\nimport styled, { css } from 'styled-components'\nimport Icon from './Icon'\nimport Button from '"
},
{
"path": "src/Image.js",
"chars": 311,
"preview": "import styled from 'styled-components'\nimport Box from './Box'\nimport PropTypes from 'prop-types'\n\nconst Image = styled("
},
{
"path": "src/Input.js",
"chars": 1866,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport { fontSize, space, width, color, propTypes } fro"
},
{
"path": "src/Label.js",
"chars": 472,
"preview": "import styled from 'styled-components'\nimport Text from './Text'\nimport { propTypes } from 'styled-system'\nimport theme "
},
{
"path": "src/LargeButton.js",
"chars": 785,
"preview": "import Button from './Button'\nimport theme, { hexa } from './theme'\n\nconst LargeButton = Button.extend`\n text-transform"
},
{
"path": "src/Link.js",
"chars": 1198,
"preview": "import Text from './Text'\nimport PropTypes from 'prop-types'\nimport { css } from 'styled-components'\nimport theme from '"
},
{
"path": "src/Loading.js",
"chars": 998,
"preview": "import styled from 'styled-components'\nimport React from 'react'\nimport Box from './Box'\nimport { keyframes } from 'styl"
},
{
"path": "src/OutlineButton.js",
"chars": 752,
"preview": "import LargeButton from './LargeButton'\nimport theme, { cx } from './theme'\n\nconst OutlineButton = LargeButton.extend`\n "
},
{
"path": "src/Section.js",
"chars": 349,
"preview": "import styled from 'styled-components'\nimport Flex from './Flex'\nimport theme from './theme'\n\nconst Section = styled(Fle"
},
{
"path": "src/Sheet.js",
"chars": 445,
"preview": "import styled from 'styled-components'\nimport Card from './Card'\nimport Container from './Container'\nimport theme from '"
},
{
"path": "src/Slider.js",
"chars": 751,
"preview": "import styled from 'styled-components'\nimport { space, width, color, propTypes } from 'styled-system'\nimport theme from "
},
{
"path": "src/Submit.js",
"chars": 443,
"preview": "import styled from 'styled-components'\nimport Button from './Button'\nimport LargeButton from './LargeButton'\nimport { ca"
},
{
"path": "src/Text.js",
"chars": 1105,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport PropTypes from 'prop-types'\nimport {\n fontSize,"
},
{
"path": "src/ThemeProvider.js",
"chars": 2084,
"preview": "import React, { Fragment } from 'react'\nimport { ThemeProvider as Root, injectGlobal, css } from 'styled-components'\nimp"
},
{
"path": "src/__tests__/Avatar.js",
"chars": 604,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Avatar } from '..'\n\ndescribe('Avatar', () "
},
{
"path": "src/__tests__/BackgroundImage.js",
"chars": 1211,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { theme, BackgroundImage } from '..'\n\nconst "
},
{
"path": "src/__tests__/Badge.js",
"chars": 554,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Badge, theme } from '..'\n\ndescribe('Badge'"
},
{
"path": "src/__tests__/BlockLink.js",
"chars": 275,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { BlockLink } from '..'\n\ndescribe('BlockLink"
},
{
"path": "src/__tests__/Box.js",
"chars": 1507,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Box, theme } from '..'\n\ndescribe('Box', ()"
},
{
"path": "src/__tests__/Button.js",
"chars": 2195,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Button, theme } from '..'\n\ndescribe('Butto"
},
{
"path": "src/__tests__/Card.js",
"chars": 862,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Card, theme } from '..'\n\ndescribe('Card', "
},
{
"path": "src/__tests__/Container.js",
"chars": 493,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Container } from '..'\n\ndescribe('Container"
},
{
"path": "src/__tests__/Field.js",
"chars": 476,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Field } from '..'\n\ndescribe('Field', () =>"
},
{
"path": "src/__tests__/Flex.js",
"chars": 1044,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Flex } from '..'\n\ndescribe('Flex', () => {"
},
{
"path": "src/__tests__/Heading.js",
"chars": 1701,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Heading, theme } from '..'\n\ndescribe('Head"
},
{
"path": "src/__tests__/Hide.js",
"chars": 917,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Hide } from '..'\n\ndescribe('Hide', () => {"
},
{
"path": "src/__tests__/Icon.js",
"chars": 255,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Icon } from '..'\n\ndescribe('Icon', () => {"
},
{
"path": "src/__tests__/IconButton.js",
"chars": 799,
"preview": "/* eslint-env jest */\n\nimport React from 'react'\nimport renderer from 'react-test-renderer'\nimport { shallow } from 'enz"
},
{
"path": "src/__tests__/Image.js",
"chars": 372,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Image } from '..'\n\nconst imageSrc = 'https"
},
{
"path": "src/__tests__/Input.js",
"chars": 802,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Input, theme } from '..'\n\ndescribe('Input'"
},
{
"path": "src/__tests__/Label.js",
"chars": 248,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Label } from '..'\n\ndescribe('Label', () =>"
},
{
"path": "src/__tests__/LargeButton.js",
"chars": 1148,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { LargeButton, theme } from '..'\n\ndescribe('"
},
{
"path": "src/__tests__/Link.js",
"chars": 1240,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Link } from '..'\n\ndescribe('Link', () => {"
},
{
"path": "src/__tests__/Loading.js",
"chars": 251,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Loading } from '..'\n\ndescribe('Loading', ("
},
{
"path": "src/__tests__/OutlineButton.js",
"chars": 807,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { OutlineButton, theme } from '..'\n\ndescribe"
},
{
"path": "src/__tests__/Section.js",
"chars": 251,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Section } from '..'\n\ndescribe('Section', ("
},
{
"path": "src/__tests__/Sheet.js",
"chars": 325,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Sheet } from '..'\n\ndescribe('Sheet', () =>"
},
{
"path": "src/__tests__/Slider.js",
"chars": 268,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Slider, theme } from '..'\n\ndescribe('Slide"
},
{
"path": "src/__tests__/Submit.js",
"chars": 439,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Submit } from '..'\n\ndescribe('Submit', () "
},
{
"path": "src/__tests__/Text.js",
"chars": 2488,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Text, theme } from '..'\n\ndescribe('Text', "
},
{
"path": "src/__tests__/ThemeProvider.js",
"chars": 463,
"preview": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { ThemeProvider } from '..'\nimport styled fr"
},
{
"path": "src/__tests__/__snapshots__/Avatar.js.snap",
"chars": 472,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Avatar renders 1`] = `\n.c0 {\n border-radius: 9999px;\n display: in"
},
{
"path": "src/__tests__/__snapshots__/BackgroundImage.js.snap",
"chars": 2168,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`BackgroundImage renders 1`] = `\n.c1 {\n background-color: #dde1e4;\n"
},
{
"path": "src/__tests__/__snapshots__/Badge.js.snap",
"chars": 1134,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Badge accepts custom bg and color 1`] = `\n.c1 {\n font-size: 16px;\n"
},
{
"path": "src/__tests__/__snapshots__/BlockLink.js.snap",
"chars": 268,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`BlockLink renders 1`] = `\n.c1 {\n margin: 0px;\n color: inherit;\n}\n"
},
{
"path": "src/__tests__/__snapshots__/Box.js.snap",
"chars": 756,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Box bg prop sets background color 1`] = `\n.c0 {\n background-color:"
},
{
"path": "src/__tests__/__snapshots__/Button.js.snap",
"chars": 8894,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Button custom bg 1`] = `\n.c0 {\n margin: 0px;\n padding-left: 18px;"
},
{
"path": "src/__tests__/__snapshots__/Card.js.snap",
"chars": 536,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Card renders lg shadow 1`] = `\n.c0 {\n box-shadow: 0 0 2px 0 rgba(0"
},
{
"path": "src/__tests__/__snapshots__/Container.js.snap",
"chars": 436,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Container renders with default theme max-width 1`] = `\n.c1 {\n marg"
},
{
"path": "src/__tests__/__snapshots__/Field.js.snap",
"chars": 4490,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Field renders 1`] = `\n.c3 {\n margin-bottom: 2px;\n text-align: cen"
},
{
"path": "src/__tests__/__snapshots__/Flex.js.snap",
"chars": 1301,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Flex align prop 1`] = `\n.c1 {\n text-align: center;\n}\n\n.c0 {\n disp"
},
{
"path": "src/__tests__/__snapshots__/Heading.js.snap",
"chars": 1786,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Heading renders 1`] = `\n.c0 {\n font-size: 36px;\n margin: 0px;\n f"
},
{
"path": "src/__tests__/__snapshots__/Hide.js.snap",
"chars": 895,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Hide renders 1`] = `\n<div\n className=\"\"\n/>\n`;\n\nexports[`Hide rende"
},
{
"path": "src/__tests__/__snapshots__/Icon.js.snap",
"chars": 6903,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Icon renders 1`] = `\n.c0 {\n -webkit-flex: none;\n -ms-flex: none;\n"
},
{
"path": "src/__tests__/__snapshots__/IconButton.js.snap",
"chars": 16983,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`IconButton renders 1`] = `\n.c1 {\n margin: 0px;\n padding-left: 18p"
},
{
"path": "src/__tests__/__snapshots__/Image.js.snap",
"chars": 254,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Image renders 1`] = `\n.c0 {\n display: block;\n max-width: 100%;\n "
},
{
"path": "src/__tests__/__snapshots__/Input.js.snap",
"chars": 4106,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Input renders 1`] = `\n.c0 {\n -webkit-appearance: none;\n -moz-appe"
},
{
"path": "src/__tests__/__snapshots__/Label.js.snap",
"chars": 339,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Label it renders 1`] = `\n.c1 {\n font-size: 18px;\n margin: 0px;\n "
},
{
"path": "src/__tests__/__snapshots__/LargeButton.js.snap",
"chars": 3773,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`LargeButton inverted 1`] = `\n.c0 {\n margin: 0px;\n padding-left: 2"
},
{
"path": "src/__tests__/__snapshots__/Link.js.snap",
"chars": 1816,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Link renders 1`] = `\n.c0 {\n color: #2d9ee4;\n -webkit-text-decorat"
},
{
"path": "src/__tests__/__snapshots__/Loading.js.snap",
"chars": 1131,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Loading renders 1`] = `\n.c1 {\n color: #e42d42;\n}\n\n.c0 {\n display:"
},
{
"path": "src/__tests__/__snapshots__/OutlineButton.js.snap",
"chars": 5152,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`OutlineButton disabled prop sets 1`] = `\n.c0 {\n margin: 0px;\n pad"
},
{
"path": "src/__tests__/__snapshots__/Section.js.snap",
"chars": 811,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Section renders 1`] = `\n.c2 {\n padding-left: 18px;\n padding-right"
},
{
"path": "src/__tests__/__snapshots__/Sheet.js.snap",
"chars": 502,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Sheet renders 1`] = `\n.c3 {\n margin-left: auto;\n margin-right: au"
},
{
"path": "src/__tests__/__snapshots__/Slider.js.snap",
"chars": 594,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Slider renders 1`] = `\n.c0 {\n -webkit-appearance: none;\n -moz-app"
},
{
"path": "src/__tests__/__snapshots__/Submit.js.snap",
"chars": 2182,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Submit renders 1`] = `\n.c1 {\n margin: 0px;\n padding-left: 18px;\n "
},
{
"path": "src/__tests__/__snapshots__/Text.js.snap",
"chars": 865,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Text align prop sets text-align 1`] = `\n.c0 {\n margin: 0px;\n text"
},
{
"path": "src/__tests__/__snapshots__/ThemeProvider.js.snap",
"chars": 168,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ThemeProvider renders content with theme 1`] = `\n.c0 {\n color: #e4"
},
{
"path": "src/__tests__/__snapshots__/theme.js.snap",
"chars": 4673,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`theme snapshot 1`] = `\nObject {\n \"bold\": \"bold\",\n \"boxShadows\": A"
},
{
"path": "src/__tests__/theme.js",
"chars": 1613,
"preview": "import theme, { cx, colors, space, fontSizes, boxShadows } from '../theme'\n\nconst aliases = ['sm', 'md', 'lg', 'xl']\n\nde"
},
{
"path": "src/index.js",
"chars": 1324,
"preview": "export { default as Avatar } from './Avatar'\nexport { default as BackgroundImage } from './BackgroundImage'\nexport { def"
},
{
"path": "src/theme.js",
"chars": 3243,
"preview": "import palx from 'palx'\nimport { includes, get } from 'lodash'\n\nconst red = '#e42d42'\nconst blue = '#2d9ce4'\nexport cons"
},
{
"path": "test-setup.js",
"chars": 153,
"preview": "import 'jest-styled-components'\nimport Enzyme from 'enzyme'\nimport Adapter from 'enzyme-adapter-react-16'\n\nEnzyme.config"
}
]
About this extraction
This page contains the full source code of the hackclub/design-system GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 130 files (165.5 KB), approximately 55.4k tokens, and a symbol index with 1 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.