commit 0663a9f73645bed1f9a27f3ffe08a146db99b512 parent 6049e38ae31024c29e75961a8a0d712480f85183 Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Mon, 9 Mar 2020 02:04:06 +0700 feature(component): Button, Link, Text Diffstat:
| A | src/Components/Button.js | | | 18 | ++++++++++++++++++ |
| A | src/Components/Link.js | | | 19 | +++++++++++++++++++ |
| A | src/Components/Text.js | | | 78 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
3 files changed, 115 insertions(+), 0 deletions(-)
diff --git a/src/Components/Button.js b/src/Components/Button.js @@ -0,0 +1,18 @@ +// @flow +import styled, {type StyledComponent} from 'styled-components'; +import {colors} from '../Theme/colors'; + +type ButtonProps = { + onClick: () => void, +} & HTMLButtonElement; + +const Button: StyledComponent<ButtonProps, {}, {}> = styled.button` + background-color: ${colors.transparent}; + border-color: ${colors.transparent}; + border-width: 0; + cursor: pointer; + font-size: 1em; + padding: 0; +`; + +export default Button; diff --git a/src/Components/Link.js b/src/Components/Link.js @@ -0,0 +1,19 @@ +// @flow +import styled, {type StyledComponent} from 'styled-components'; +import theme from 'styled-theming'; + +import {colors} from '../Theme/colors'; + +const linkColor = theme('mode', { + light: colors.linkDark, + dark: colors.linkLight, +}); + +type LinkProps = {} & HTMLAnchorElement; + +const LinkBase: StyledComponent<LinkProps, {}, {}> = styled.a` + color: ${linkColor}; + text-decoration: underline solid ${linkColor}; +`; + +export default LinkBase; diff --git a/src/Components/Text.js b/src/Components/Text.js @@ -0,0 +1,78 @@ +// @flow +import styled, {css, type StyledComponent} from 'styled-components'; +import theme from 'styled-theming'; +import {colors} from '../Theme/colors'; + +const color = theme('mode', { + light: colors.dark, + dark: colors.light, +}); + +const colorHeading = theme('mode', { + light: colors.darkGreen, + dark: colors.green, +}); + +const mobileSizeResolver = (as?: string) => { + switch (as) { + case 'h1': + return 1.1; + case 'h2': + return 1.05; + case 'h3': + return 1; + case 'h4': + case 'h5': + case 'h6': + default: + return 0.9; + } +}; + +const headingTagResolver = (as?: string) => { + switch (as) { + case 'h1': + return '# '; + case 'h2': + return '## '; + case 'h3': + return '### '; + case 'h4': + return '#### '; + case 'h5': + return '##### '; + case 'h6': + return '###### '; + default: + return ''; + } +}; + +type TextProps = { + as?: string, +} & HTMLParagraphElement & + HTMLHeadingElement; + +const Text: StyledComponent<TextProps, {}, {}> = styled.p` + color: ${color}; + letter-spacing: 0.03rem; + line-height: 1.4; + + @media (max-width: 599px) { + font-size: ${({as}) => `${mobileSizeResolver(as)}rem`}; + line-height: 1.45; + } + + ${props => + props.as + ? css` + color: ${colorHeading}; + &:before { + content: ${props => `"${headingTagResolver(props.as)}"`}; + font-size: 0.8em; + } + ` + : css``} +`; + +export default Text;