Merge pull request #13 from Gosrock/chanjin

feat(frontbutton): add GoFrontButton check story book

README.md

@@ -91,9 +91,9 @@ step 4.
 
 if you want to upgrade the version than add commit message with in `["fix" , "feat" , "perf"]`
 
-include `fix` -> upgrade version 0.0.1
-include `feat` -> upgrade version 0.1.0
-include `perf` -> upgrade version 1.0.0
+- include `fix` -> upgrade version 0.0.1
+- include `feat` -> upgrade version 0.1.0
+- include `perf` -> upgrade version 1.0.0
 
 see the below meaning of the commit msg.
 

src/index.js

@@ -1,8 +1,10 @@
 import 'reset.css';
 
+// when you export your 작업 , jsx 확장자를 꼭 붙여야합니다. 안그럼 rollup단계에서 못알아 먹어요!
 import { Button } from './stories/Button/Button.jsx';
 import { GoBackButton } from './stories/GoBackButton/GoBackButton.jsx';
 import { Header } from './stories/Header/Header.jsx';
 import { Page } from './stories/PageTest/Page.jsx';
+import { GoFrontButton } from './stories/GoFrontButton/GoFrontButton.jsx';
 
-export { Button, Header, Page, GoBackButton };
+export { Button, Header, Page, GoBackButton, GoFrontButton };

src/stories/GoBackButton/GoBackButton.stories.jsx

@@ -6,7 +6,14 @@ export default {
   title: 'Example/GoBackButton',
   component: GoBackButton,
 
-  argTypes: {}
+  argTypes: {},
+  decorators: [
+    Story => (
+      <div style={{ backgroundColor: 'black' }}>
+        <Story />
+      </div>
+    )
+  ]
 };
 
 const Template = args => <GoBackButton {...args} />;

src/stories/GoFrontButton/GoFrontButton.css

@@ -0,0 +1,48 @@
+.GoFrontButton {
+  background-color: transparent; /* Green */
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  /* justify-content: center; */
+  align-items: center;
+
+  display: flex;
+  /* position: relative; */
+  /* position: relative; */
+}
+
+.GoFrontButton--medium {
+  font-size: 18px;
+  line-height: 20px;
+  /* vertical-align: middle; */
+  /* padding: 11px 20px; */
+}
+
+.GoFrontButton--font-white {
+  color: white;
+}
+
+.GoFrontButton--font-gray {
+  color: #b6b7b8;
+}
+
+/* .GoFrontButton-center {
+  position: absolute;
+  top: 50%;
+} */
+
+.GoFrontButton--circle {
+  justify-content: center;
+  align-items: center;
+
+  display: flex;
+  height: 32px;
+  width: 32px;
+  background: black;
+  border-radius: 16px;
+  -moz-border-radius: 16px;
+  -webkit-border-radius: 16px;
+  /* margin-left: 25%;
+  margin-top: 25%; */
+}

src/stories/GoFrontButton/GoFrontButton.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './GoFrontButton.css';
+import { ReactComponent as GoFrontArrow } from './GoFrontArrow.svg';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const GoFrontButton = ({
+  label,
+  fontColor,
+  arrowColor,
+  arrowCircleBackground,
+  ...props
+}) => {
+  // const mode = primary
+  //   ? 'storybook-button--primary'
+  //   : 'storybook-button--secondary';
+  return (
+    <>
+      <button
+        className={[
+          'GoFrontButton',
+          `GoFrontButton--medium`,
+          `GoFrontButton--font-${fontColor}`
+        ].join(' ')}
+        {...props}
+      >
+        <span>{label}</span>
+        <div
+          style={{ marginLeft: '11px' }}
+          className={arrowCircleBackground ? 'GoFrontButton--circle' : ''}
+        >
+          <GoFrontArrow fill={arrowColor === 'gray' ? '#b6b7b8' : arrowColor} />
+        </div>
+      </button>
+    </>
+  );
+};
+
+GoFrontButton.propTypes = {
+  /**
+   * Button contents
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Optional click handler
+   */
+  onClick: PropTypes.func,
+  /**
+   * 폰트의 컬러를 변경할수 있습니다. 기본은 white 입니다,
+   */
+  fontColor: PropTypes.oneOf(['white', 'gray']),
+  /**
+   * 화살표의 색을 변경할수 있습니다. 기본은 white 입니다,
+   */
+  arrowColor: PropTypes.oneOf(['white', 'yellow', 'gray']),
+  /**
+   * 화살표 배경에 원을 지정할 수 있습니다. 기본은 true 입니다,
+   */
+  arrowCircleBackground: PropTypes.bool
+};
+
+GoFrontButton.defaultProps = {
+  onClick: undefined,
+  label: 'label을 입력해 주세요.',
+  arrowColor: 'white',
+  arrowCircleBackground: true,
+  fontColor: 'white'
+};

src/stories/GoFrontButton/GoFrontButton.stories.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { GoFrontButton } from './GoFrontButton';
+
+export default {
+  title: 'Example/GoFrontButton',
+  component: GoFrontButton,
+
+  argTypes: {}
+};
+
+const Template = args => <GoFrontButton {...args} />;
+
+export const Default = Template.bind({});
+
+export const 카카오페이송금 = Template.bind({});
+카카오페이송금.args = {
+  label: '또는, 카카오페이로 송금하기',
+  fontColor: 'gray',
+  arrowColor: 'yellow',
+  arrowCircleBackground: false
+};
+
+export const 입금완료 = Template.bind({});
+입금완료.args = {
+  label: '입금 완료',
+  fontColor: 'white',
+  arrowColor: 'white',
+  arrowCircleBackground: false
+};
+
+export const 휴대폰인증하러가기 = Template.bind({});
+휴대폰인증하러가기.args = {
+  label: '휴대폰 인증하러 가기',
+  fontColor: 'white',
+  arrowColor: 'white'
+};
+// GoFrontButton.propTypes = {
+//   /**
+//    * Button contents
+//    */
+//   label: PropTypes.string.isRequired,
+//   /**
+//    * Optional click handler
+//    */
+//   onClick: PropTypes.func,
+//   /**
+//    * 폰트의 컬러를 변경할수 있습니다. 기본은 white 입니다,
+//    */
+//   fontColor: PropTypes.oneOf(['white', 'gray']),
+//   /**
+//    * 화살표의 색을 변경할수 있습니다. 기본은 white 입니다,
+//    */
+//   arrowColor: PropTypes.oneOf(['white', 'yellow']),
+//   /**
+//    * 화살표 배경에 원을 지정할 수 있습니다. 기본은 true 입니다,
+//    */
+//   arrowCircleBackground: PropTypes.bool
+// };