old-ybbond

My old site that was written with ReactJS
Log | Files | Refs | README

commit 9f5d0ecaf38d5a36fd8f3e214713170017fead5e
parent b2a03949155242a792da348df8b1637c5c55687f
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Mon,  9 Mar 2020 14:25:29 +0700

feature(component): List

Diffstat:
Asrc/Components/List.js | 41+++++++++++++++++++++++++++++++++++++++++
Msrc/Components/Text.js | 2+-
Msrc/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};