old-ybbond

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

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:
Asrc/Components/Button.js | 18++++++++++++++++++
Asrc/Components/Link.js | 19+++++++++++++++++++
Asrc/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;