Merge branch 'style/components' into 'develop'

merge request from Style/components



See merge request !2

@@ -11,7 +11,9 @@
     "prettier/prettier": [2, {
       "endOfLine": "auto"
     }],
-    "arrow-body-style": 1
+    "arrow-body-style": 1,
+    "react/jsx-fragments": 0,
+    "react/prop-types": 0
   },
   "settings": {
     "react": {

 import React from 'react';
+import styled from 'styled-components';
+import { buttonColorMap } from '../../lib/styles/palette';
 
-const Button = () => {
-  return <div>Button</div>;
+const ButtonBlock = styled.button`
+  width: 20%;
+  background-color: ${props => buttonColorMap[props.color].background};
+  &:hover {
+    background-color: ${props => buttonColorMap[props.color].hoverBackground};
+  }
+  color: ${props => buttonColorMap[props.color].color};
+  float: ${props => props.float || ''};
+`;
+
+const Button = ({ children, color, float }) => {
+  return (
+    <ButtonBlock color={color} float={float}>
+      {children}
+    </ButtonBlock>
+  );
 };
 
 export default Button;

+import React from 'react';
+import styled from 'styled-components';
+import { dropdownListColorMap } from '../../lib/styles/palette';
+
+const DropDownListBlock = styled.div`
+  float: ${props => props.float || ''};
+  width: ${props => props.size || '40%'};
+`;
+
+const DropDownList = styled.ul`
+  padding: 0;
+  margin: 0;
+  background-color: ${props => dropdownListColorMap[props.color].background};
+  border: 2px solid ${props => dropdownListColorMap[props.color].borderColor};
+  box-sizing: border-box;
+  color: ${props => dropdownListColorMap[props.color].color};
+  font-size: 1.3rem;
+  font-weight: 500;
+  &:first-child {
+    padding-top: 0.5em;
+  }
+`;
+
+const ListItem = styled.li`
+  list-style: none;
+  padding-left: 1em;
+  padding-bottom: 0.3em;
+  border-bottom: 2px solid #e5e5e5;
+`;
+
+const DropDown = ({ children, color, float, size }) => {
+  return (
+    <DropDownListBlock color={color} float={float} size={size}>
+      <DropDownList color={color}>
+        <ListItem>{children}</ListItem>
+      </DropDownList>
+    </DropDownListBlock>
+  );
+};
+
+export default DropDown;

+import React from 'react';
+import styled from 'styled-components';
+import { dropdownHeaderColorMap } from '../../lib/styles/palette';
+
+const DropDownBlock = styled.div`
+  margin: 0 auto;
+  float: ${props => props.float || ''};
+`;
+
+const DropDownHeader = styled.button`
+  margin-bottom: 0.8em;
+  padding: 0.4em;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
+  font-weight: 500;
+  font-size: ${props => props.size};
+  border: 2px solid ${props => dropdownHeaderColorMap[props.color].borderColor};
+  color: ${props => dropdownHeaderColorMap[props.color].color};
+  background-color: ${props => dropdownHeaderColorMap[props.color].background};
+  &:hover {
+    background-color: ${props =>
+      dropdownHeaderColorMap[props.color].hoverBackground};
+  }
+`;
+
+const DropDown = ({ children, float, color, size }) => {
+  return (
+    <DropDownBlock float={float} color={color} size={size}>
+      <DropDownHeader color={color} size={size}>
+        {children}
+      </DropDownHeader>
+    </DropDownBlock>
+  );
+};
+
+export default DropDown;

+import React from 'react';
+import styled from 'styled-components';
+import { inputColorMap } from '../../lib/styles/palette';
+
+const InputBlock = styled.div`
+  input {
+    padding: 20px;
+    padding-right: 200px;
+    color: ${props => inputColorMap[props.color].color};
+    box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
+    border: 3px solid ${props => inputColorMap[props.color].borderColor};
+
+    font-size: ${props => props.size};
+
+    &::placeholder {
+      color: ${props => inputColorMap[props.color].placeholder};
+      text-transform: uppercase;
+    }
+  }
+  float: ${props => props.float || ''};
+`;
+
+const Input = ({ children, color, size, float }) => {
+  return (
+    <InputBlock color={color} size={size} float={float}>
+      <input placeholder={children} color={color} />
+    </InputBlock>
+  );
+};
+
+export default Input;

+import React from 'react';
+import styled from 'styled-components';
+import { searchBoxColorMap } from '../../lib/styles/palette';
+
+const ButtonBlock = styled.button`
+  width: ${props => props.size};
+  height: ${props => props.size};
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+
+  background-color: ${props => searchBoxColorMap[props.color].background};
+  &:hover {
+    background-color: ${props =>
+      searchBoxColorMap[props.color].hoverBackground};
+  }
+  color: ${props => searchBoxColorMap[props.color].color};
+  float: ${props => props.float || ''};
+`;
+
+const SearchBox = ({ color, float, size }) => {
+  return <ButtonBlock color={color} float={float} size={size} />;
+};
+
+export default SearchBox;

+const palette = {
+  /* blue */
+  blue0: '#e7f5ff',
+  blue1: '#d0ebff',
+  blue2: '#a5d8ff',
+  blue3: '#74c0fc',
+  blue4: '#4dabf7',
+  blue5: '#339af0',
+  blue6: '#228be6',
+  blue7: '#1c7ed6',
+  blue8: '#1971c2',
+  blue9: '#1864ab',
+  /* cyan */
+  cyan0: '#e3fafc',
+  cyan1: '#c5f6fa',
+  cyan2: '#99e9f2',
+  cyan3: '#66d9e8',
+  cyan4: '#3bc9db',
+  cyan5: '#22b8cf',
+  cyan6: '#15aabf',
+  cyan7: '#1098ad',
+  cyan8: '#0c8599',
+  cyan9: '#0b7285',
+  /* gray */
+  gray0: '#f8f9fa',
+  gray1: '#f1f3f5',
+  gray2: '#e9ecef',
+  gray3: '#dee2e6',
+  gray4: '#ced4da',
+  gray5: '#adb5bd',
+  gray6: '#868e96',
+  gray7: '#495057',
+  gray8: '#343a40',
+  gray9: '#212529',
+};
+
+export const buttonColorMap = {
+  blue: {
+    background: palette.blue6,
+    color: 'white',
+    hoverBackground: palette.blue5,
+  },
+};
+
+export const inputColorMap = {
+  blue: {
+    borderColor: palette.blue6,
+    color: 'black',
+    placeholder: palette.gray5,
+  },
+};
+
+export const dropdownListColorMap = {
+  blue: {
+    background: 'white',
+    color: palette.blue8,
+    borderColor: palette.blue8,
+  },
+};
+
+export const dropdownHeaderColorMap = {
+  blue: {
+    background: palette.blue6,
+    color: 'white',
+    hoverBackground: palette.blue5,
+    borderColor: palette.blue8,
+  },
+};
+
+export const searchBoxColorMap = {
+  blue: {
+    background: palette.blue6,
+    color: 'white',
+    hoverBackground: palette.blue5,
+  },
+};
+
+export default palette;

 import React from 'react';
+import styled from 'styled-components';
+
+const Main = styled.div`
+  width: 100%;
+`;
 
 const Home = () => {
-  return <div>Home</div>;
+  return (
+    <>
+      <Main>Home</Main>
+    </>
+  );
 };
 
 export default Home;