old-ybbond

commit beecdacbca0ae4855d2435cb4f83f2d379e13d11
parent 5632a45fd4990d33b5eca7ae22286d2e3a0b9650
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Tue, 10 Mar 2020 01:50:15 +0700

refactor(Text): add variant as color

Diffstat:
M
src/Components/Link.js
 | 
5
+++--
M
src/Components/List.js
 | 
4
++--
M
src/Components/Text.js
 | 
42
++++++++++++++++++++++++++++++------------

diff --git a/src/Components/Link.js b/src/Components/Link.js
@@ -21,11 +21,12 @@ type LinkProps = {to: string, children: React$Node};
 const LinkBase: StyledComponent<{isCurrentRoute?: boolean}, {}, {}> = styled.a`
   color: ${({isCurrentRoute}) => (isCurrentRoute ? linkHoverColor : linkColor)};
   cursor: pointer;
-  text-decoration: none;
+  text-decoration: underline solid
+    ${({isCurrentRoute}) => (isCurrentRoute ? linkHoverColor : linkColor)} 0.5px;
 
   &:hover {
     color: ${linkHoverColor};
-    text-decoration: underline solid ${linkHoverColor};
+    text-decoration: underline solid ${linkHoverColor} 2px;
   }
 `;
 
diff --git a/src/Components/List.js b/src/Components/List.js
@@ -18,7 +18,7 @@ const ListBase: StyledComponent<Props, {}, {}> = styled.ul`
           position: relative;
           list-style: none;
           padding-left: 20px;
-          margin-bottom: 5px;
+          margin-bottom: 10px;
           &:before {
             display: inline-block;
             content: '- ';
@@ -35,7 +35,7 @@ const List = (props: Props) => {
   const {as, children, ...rest} = props;
   return as && as === 'li' ? (
     <ListBase as={as} {...rest}>
-      <Text as="span">{children}</Text>
+      <Text>{children}</Text>
     </ListBase>
   ) : (
     <ListBase as={as} {...rest}>
diff --git a/src/Components/Text.js b/src/Components/Text.js
@@ -1,16 +1,26 @@
 // @flow
+import React from 'react';
 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 color = theme.variants('mode', 'variant', {
+  default: {
+    light: colors.dark,
+    dark: colors.light,
+  },
+  green: {
+    light: colors.darkGreen,
+    dark: colors.green,
+  },
+  red: {
+    light: colors.brown,
+    dark: colors.orange,
+  },
+  blue: {
+    light: colors.linkDark,
+    dark: colors.linkLight,
+  },
 });
 
 const mobileSizeResolver = (as?: string) => {
@@ -50,10 +60,10 @@ const headingTagResolver = (as?: string) => {
 
 type TextProps = {
   as?: string,
-} & HTMLParagraphElement &
-  HTMLHeadingElement;
+  variant?: 'default' | 'red' | 'green' | 'blue',
+};
 
-const Text: StyledComponent<TextProps, {}, {}> = styled.p`
+const TextBase: StyledComponent<TextProps, {}, {}> = styled.p`
   color: ${color};
   letter-spacing: 0.03rem;
   line-height: 1.4;
@@ -68,7 +78,6 @@ const Text: StyledComponent<TextProps, {}, {}> = styled.p`
   ${props =>
     props.as && props.as[0] === 'h'
       ? css`
-          color: ${colorHeading};
           &:before {
             content: ${props => `"${headingTagResolver(props.as)}"`};
             font-size: 0.8em;
@@ -77,4 +86,13 @@ const Text: StyledComponent<TextProps, {}, {}> = styled.p`
       : css``}
 `;
 
+const Text = (props: TextProps) => {
+  let {as, variant: baseVariant} = props;
+  let variant = baseVariant ?? 'default';
+  if (as && as[0] === 'h') {
+    variant = 'green';
+  }
+  return <TextBase {...props} as={as} variant={baseVariant ?? variant} />;
+};
+
 export default Text;