style(component): structure for UI components

Author: unllamas

src/components/Shared/Heading/index.jsx

@@ -6,22 +6,22 @@ const Heading = (props) => {
   const variants = {
     h1: {
       fontSize: {
-        base: '48px',
-        md: '68px',
+        base: '32px',
+        md: '42px',
       },
       lineHeight: {
-        base: '48px',
-        md: '68px',
+        base: '38px',
+        md: '50px',
       },
     },
     h2: {
       fontSize: {
-        base: '42px',
-        md: '54px',
+        base: '26px',
+        md: '32px',
       },
       lineHeight: {
-        base: '42px',
-        md: '54px',
+        base: '32px',
+        md: '38px',
       },
     },
     h3: {
@@ -38,6 +38,14 @@ const Heading = (props) => {
       fontSize: '20px',
       lineHeight: '26px',
     },
+    h5: {
+      fontSize: '18px',
+      lineHeight: '24px',
+    },
+    h6: {
+      fontSize: '16px',
+      lineHeight: '22px',
+    },
   };
 
   return (

src/components/Shared/Input/index.jsx

@@ -1,8 +1,65 @@
-import { Input as InputBox } from '@chakra-ui/react';
-import { style } from './style';
+import { Box, Input } from '@chakra-ui/react';
 
-const Input = (props) => {
-  return <InputBox padding='20px' borderRadius='8px' {...props} {...style} />;
+import Text from 'src/components/Shared/Text';
+
+const Component = (props) => {
+  const { ref, iconLeft, disabled } = props;
+
+  const boxStyle = {
+    overflow: 'hiddden',
+
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flex: 1,
+    width: '100%',
+
+    backgroundColor: 'gray5',
+    borderRadius: '10px',
+    borderWidth: '1px',
+    borderColor: 'gray5',
+
+    color: 'text',
+  };
+
+  const iconLeftStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%',
+    minHeight: '60px',
+
+    padding: '0 20px',
+
+    borderRight: '1px solid gray5',
+  };
+
+  const inputStyle = {
+    width: '100%',
+    minHeight: '60px',
+
+    padding: '14px 18px',
+
+    backgroundColor: 'transparent',
+    borderRadius: iconLeft ? '0 10px 10px 0' : '10px',
+
+    fontSize: '16px',
+
+    _placeholder: {
+      color: 'gray35',
+    },
+  };
+
+  return (
+    <Box {...boxStyle}>
+      {iconLeft && (
+        <Box {...iconLeftStyle}>
+          <Text size='small'>{iconLeft}</Text>
+        </Box>
+      )}
+      <Input ref={ref} tabIndex={disabled ? -1 : 1} {...inputStyle} {...props} />
+    </Box>
+  );
 };
 
-export default Input;
+export default Component;

src/components/Shared/Link/index.jsx

@@ -1,63 +1,97 @@
 import NextLink from 'next/link';
-import { Text } from '@chakra-ui/react';
+import { Link } from '@chakra-ui/react';
 
-const Link = (props) => {
-  const { children, isBlock, color = 'primary', size = 'md' } = props;
+const Component = (props) => {
+  const { children, brand = 'primary', size = 'large', type = 'filled' } = props;
+
+  const isLarge = size === 'large';
+  const isSolid = type === 'filled';
+
+  const dimensions = {
+    height: '30px',
+    largeHeight: '60px',
+    minWidth: '30px',
+    largeMinWidth: '200px',
+  };
+
+  const style = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: isLarge ? dimensions.largeHeight : dimensions.height,
+    minWidth: isLarge ? dimensions.largeMinWidth : dimensions.minWidth,
+    width: { base: '100%', md: 'initial' },
+
+    padding: '18px 12px',
+
+    borderRadius: '8px',
+
+    color: isSolid ? 'background' : brand,
+    fontSize: isLarge ? '16px' : '14px',
+    fontWeight: 700,
+    textAlign: 'center',
+
+    _hover: {
+      textDecoration: 'none',
+    },
+  };
 
   const variants = {
-    primary: {
-      height: size === 'md' ? '60px' : '40px',
-      padding: size === 'md' ? '22px' : '16px',
-      backgroundColor: '#B3E0B8',
-      border: '2px solid #B3E0B8',
-      color: '#141318',
-      fontSize: size === 'md' ? '16px' : '14px',
+    filled: {
+      backgroundColor: brand,
+
       _hover: {
-        backgroundColor: '#8FD196',
-        textDecoration: 'none',
+        opacity: 0.85,
+        backgroundColor: brand,
+      },
+      _active: {
+        opacity: 0.65,
+        backgroundColor: brand,
+      },
+    },
+    bezeled: {
+      backgroundColor: `${brand}15`,
+
+      _hover: {
+        opacity: 0.85,
+        backgroundColor: `${brand}15`,
+      },
+      _active: {
+        opacity: 0.65,
+        backgroundColor: `${brand}15`,
       },
     },
-    default: {
-      height: size === 'md' ? '60px' : '30px',
-      padding: size === 'md' ? '22px' : '8px',
-      backgroundColor: '#111111',
-      border: '2px solid #2C2C2C',
-      color: '#fff',
-      fontSize: size === 'md' ? '16px' : '14px',
+    bezeledGray: {
+      backgroundColor: 'gray5',
+
       _hover: {
-        backgroundColor: '#2C2C2C',
-        textDecoration: 'none',
+        opacity: 0.85,
+        backgroundColor: 'gray5',
+      },
+      _active: {
+        opacity: 0.65,
+        backgroundColor: 'gray5',
       },
     },
-    terciary: {
-      height: size === 'md' ? '60px' : '30px',
-      padding: size === 'md' ? '18px' : '8px',
-      backgroundColor: '#DBA2A3',
-      border: '1px solid #DBA2A3',
-      color: '#141318',
-      fontSize: size === 'md' ? '16px' : '14px',
+    borderless: {
+      backgroundColor: 'transparent',
+
       _hover: {
-        backgroundColor: '#CD7E80',
-        textDecoration: 'none',
+        opacity: 0.85,
+        backgroundColor: 'transparent',
+      },
+      _active: {
+        opacity: 0.65,
+        backgroundColor: 'transparent',
       },
     },
   };
 
   return (
-    <NextLink {...props} passHref>
-      <Text
-        display='flex'
-        justifyContent='center'
-        alignItems='center'
-        borderRadius='0'
-        fontWeight={600}
-        width='100%'
-        {...variants[color]}
-      >
-        {children}
-      </Text>
-    </NextLink>
+    <Link as={NextLink} {...props} {...style} {...variants[type]} passHref>
+      {children}
+    </Link>
   );
 };
 
-export default Link;
+export default Component;

src/components/Shared/Text/index.jsx

@@ -1,33 +1,27 @@
-import { Text as TextBox } from '@chakra-ui/react';
+import { Text } from '@chakra-ui/react';
 
-const Text = (props) => {
-  const { children, size = 'md' } = props;
+const Component = (props) => {
+  const { children, size = 'medium', opacity = 100, isBold = false, align = 'left' } = props;
 
-  const variants = {
-    xl: {
-      fontSize: '36px',
-      lineHeight: '46px',
-    },
-    lg: {
-      fontSize: '24px',
-      lineHeight: '34px',
-    },
-    md: {
-      fontSize: '16px',
-      lineHeight: '22px',
-    },
-    sm: {
-      opacity: 0.65,
-      fontSize: '12px',
-      lineHeight: '18px',
-    },
+  const isSmall = size === 'small';
+
+  const style = {
+    opacity,
+
+    margin: 0,
+
+    color: 'text',
+    fontSize: `${isSmall ? 14 : 16}px`,
+    lineHeight: `${isSmall ? 20 : 22}px`,
+    fontWeight: isBold ? 700 : 400,
+    textAlign: align,
   };
 
   return (
-    <TextBox m='0px' color='#fff' {...props} {...variants[size]}>
+    <Text {...style} {...props}>
       {children}
-    </TextBox>
+    </Text>
   );
 };
 
-export default Text;
+export default Component;