commit 9f5d0ecaf38d5a36fd8f3e214713170017fead5e parent b2a03949155242a792da348df8b1637c5c55687f Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Mon, 9 Mar 2020 14:25:29 +0700 feature(component): List Diffstat:
| A | src/Components/List.js | | | 41 | +++++++++++++++++++++++++++++++++++++++++ |
| M | src/Components/Text.js | | | 2 | +- |
| M | src/Theme/colors.js | | | 1 | + |
3 files changed, 43 insertions(+), 1 deletion(-)
diff --git a/src/Components/List.js b/src/Components/List.js @@ -0,0 +1,41 @@ +// @flow +import React from 'react'; +import styled, {css, type StyledComponent} from 'styled-components'; +import Text from './Text'; +import {colors} from '../Theme/colors'; + +type Props = {| + as?: 'ol' | 'li', + children: React$Node, +|}; + +const ListBase: StyledComponent<Props, {}, {}> = styled.ul` + list-style: none; + padding: 0; + + ${props => + props.as === 'li' + ? css` + margin-bottom: 5px; + &:before { + content: '- '; + color: ${colors.orange}; + } + ` + : css``} +`; + +const List = (props: Props) => { + const {as, children, ...rest} = props; + return as && as === 'li' ? ( + <ListBase as={as} {...rest}> + <Text as="span">{children}</Text> + </ListBase> + ) : ( + <ListBase as={as} {...rest}> + {children} + </ListBase> + ); +}; + +export default List; diff --git a/src/Components/Text.js b/src/Components/Text.js @@ -64,7 +64,7 @@ const Text: StyledComponent<TextProps, {}, {}> = styled.p` } ${props => - props.as + props.as && props.as[0] === 'h' ? css` color: ${colorHeading}; &:before { diff --git a/src/Theme/colors.js b/src/Theme/colors.js @@ -10,6 +10,7 @@ const colors = { linkDark: '#2585ff', green: '#79d688', darkGreen: '#257933', + orange: '#f9690e', }; export {colors};