Skip to content
This repository was archived by the owner on Nov 1, 2019. It is now read-only.

Commit a4e01bb

Browse files
hongaarMichiel87
hongaar
authored and
Michiel87
committed
feat: styled-system (#57)
* Added styled-system
1 parent 364e0ae commit a4e01bb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+965
-292
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[![Travis](https://img.shields.io/travis/com/exivity/ui.svg?style=flat-square)](https://travis-ci.com/exivity/ui)
66
[![Code Climate](https://img.shields.io/codeclimate/coverage/exivity/ui.svg?style=flat-square)](https://codecov.io/gh/exivity/ui)
77
[![Code Climate](https://img.shields.io/codeclimate/maintainability/exivity/ui.svg?style=flat-square)](https://codeclimate.com/github/exivity/ui)
8-
![Bunlephobia](https://img.shields.io/bundlephobia/min/@exivity/ui.svg?label=bundlesize&style=flat-square)
8+
[![Bunlephobia](https://img.shields.io/bundlephobia/minzip/@exivity/ui.svg?label=bundlesize&style=flat-square)](https://bundlephobia.com/result?p=@exivity/ui)
99

1010
A collection of components to build interfaces.
1111

‎docs/02.examples.stories.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1-
import React from 'react'
21
import { storiesOf } from '@storybook/react'
2+
import React from 'react'
33
import { Heading } from '../src/Heading'
4+
import { App } from './examples/App'
45

56
storiesOf('docs|Examples', module)
6-
.add('Kitchensink', () => <Heading>Kitchensink</Heading>)
7-
.add('App', () => <Heading>App</Heading>)
7+
.add('Dashboard', () => (
8+
<App>
9+
Dashboard
10+
<div style={{ height: '150vh' }} />
11+
</App>
12+
))
13+
.add('Master/Detail', () => <Heading>Master/Detail</Heading>)
14+
.add('Settings', () => <Heading>Settings</Heading>)

‎docs/examples/App.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import * as React from 'react'
2+
import { MdDashboard, MdInsertChart, MdLibraryBooks } from 'react-icons/md'
3+
import styled from 'styled-components'
4+
import { Section, Grid, Icon, Image, Link } from '../../src'
5+
import { fromTheme } from '../../src/utils/styled'
6+
7+
const headerHeight = 60
8+
const sidebarWidth = 250
9+
10+
const layout = `
11+
"logo header" ${headerHeight}px
12+
"nav main" 1fr / ${sidebarWidth}px 1fr
13+
`
14+
15+
const Header = styled.header`
16+
overflow: hidden;
17+
text-overflow: ellipsis;
18+
white-space: nowrap;
19+
20+
line-height: ${headerHeight}px;
21+
padding-left: ${fromTheme(theme => theme.global.baseSpacing)}em;
22+
`
23+
24+
export const App: React.FC = ({ children }) => (
25+
<Grid template={layout} style={{
26+
position: 'fixed',
27+
left: '0',
28+
top: '0',
29+
height: '100vh',
30+
width: '100vw'
31+
}}>
32+
<Grid.Item as='header' area='logo'>
33+
<Image src='http://acmelogos.com/images/logo-8.svg' width={sidebarWidth} height={headerHeight} />
34+
</Grid.Item>
35+
<Grid.Item as={Header} area='header'>
36+
Header
37+
</Grid.Item>
38+
<Grid.Item as='nav' area='nav' style={{ overflow: 'auto' }}>
39+
Navigation
40+
</Grid.Item>
41+
<Grid.Item as='main' area='main' style={{ overflow: 'auto' }}>
42+
{children}
43+
</Grid.Item>
44+
</Grid>
45+
)

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@
9191
"react-markdown": "^4.0.6",
9292
"react-syntax-highlighter": "^10.2.0",
9393
"react-window": "^1.7.1",
94-
"styled-components": "^4.1.3"
94+
"styled-components": "^4.1.3",
95+
"styled-system": "^4.0.5"
9596
},
9697
"devDependencies": {
9798
"@babel/core": "^7.3.4",
@@ -115,6 +116,7 @@
115116
"@types/storybook__addon-actions": "^3.4.2",
116117
"@types/storybook__react": "^4.0.1",
117118
"@types/styled-components": "^4.1.12",
119+
"@types/styled-system": "^4.0.0",
118120
"babel-loader": "^8.0.5",
119121
"commitizen": "^3.0.7",
120122
"cross-env": "^5.2.0",

‎src/AbstractInput/AbstractInput.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ export const inputStyles = css<StyledInputProps>`
6565
`}
6666
6767
${props => (!props.outlined && !props.flat) && css`
68-
border: ${fromTheme(theme => theme.global.borderWidth)}px solid ${fromTheme(theme => theme.colours.lightGray)};
69-
background-color: ${fromTheme(theme => theme.colours.lightGray)};
68+
border: ${fromTheme(theme => theme.global.borderWidth)}px solid ${fromTheme(theme => theme.colors.lightGray)};
69+
background-color: ${fromTheme(theme => theme.colors.lightGray)};
7070
7171
&:hover {
7272
border-bottom: ${fromTheme(theme => theme.global.borderWidth)}px solid rgba(var(--focus-color), 0.5);
@@ -82,11 +82,11 @@ export const inputStyles = css<StyledInputProps>`
8282
background-color: unset;
8383
8484
&:hover {
85-
border: ${fromTheme(theme => theme.global.borderWidth)}px solid ${fromTheme(theme => theme.colours.gray)};
85+
border: ${fromTheme(theme => theme.global.borderWidth)}px solid ${fromTheme(theme => theme.colors.gray)};
8686
}
8787
8888
&:focus {
89-
border: ${fromTheme(theme => theme.global.borderWidth)}px solid ${fromTheme(theme => theme.colours.dark)};
89+
border: ${fromTheme(theme => theme.global.borderWidth)}px solid ${fromTheme(theme => theme.colors.dark)};
9090
}
9191
`}
9292

‎src/Block/Block.stories.tsx

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1-
import React from 'react'
2-
// @ts-ignore
31
import { storiesOf } from '@storybook/react'
2+
import React from 'react'
43

54
import { Block } from '.'
6-
import { Button } from '../Button'
5+
import { Code } from '../Code'
6+
import { Text } from '../Text'
77

88
storiesOf('atoms|Block', module)
9-
.add('default', () => <>
10-
<Block><Button>Action</Button></Block>
11-
<Block><Button>Another action</Button></Block>
12-
</>)
9+
.add('default', () => (
10+
<Block>
11+
<Text>I'm Jenny from the <Code>&lt;Block/&gt;</Code></Text>
12+
</Block>
13+
))
14+
.add('dimensions', () => (
15+
<Block width={100} height={100} bg='blue' />
16+
))
17+
.add('padding', () => (
18+
<Block width={3 / 4} px={2} py={1} bg='yellow'>
19+
<Text color='red'>Padding and foreground color</Text>
20+
</Block>
21+
))

‎src/Block/Block.tsx

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,38 @@
11
import styled from 'styled-components'
2-
import { globalBlockSpacing } from '../utils/styled'
2+
import {
3+
border,
4+
BorderProps,
5+
color,
6+
ColorProps,
7+
height,
8+
HeightProps, maxHeight, MaxHeightProps, maxWidth, MaxWidthProps, minHeight, MinHeightProps, minWidth, MinWidthProps,
9+
space,
10+
SpaceProps,
11+
width,
12+
WidthProps
13+
} from 'styled-system'
14+
import { StyledProps } from '../utils/styled'
315

4-
export const Block = styled.div`
5-
${globalBlockSpacing};
16+
export type BlockProps =
17+
& StyledProps
18+
& SpaceProps
19+
& WidthProps
20+
& MaxWidthProps
21+
& MinWidthProps
22+
& HeightProps
23+
& MaxHeightProps
24+
& MinHeightProps
25+
& ColorProps
26+
27+
export const Block = styled.div<BlockProps>`
28+
${space}
29+
${width}
30+
${maxWidth}
31+
${minWidth}
32+
${height}
33+
${maxHeight}
34+
${minHeight}
35+
${color}
636
`
737

838
Block.displayName = 'Block'

0 commit comments

Comments
 (0)