Create input

Author: morrigan

.storybook/config.js

@@ -4,5 +4,5 @@ import { ButtonPrimary, ButtonSecondary } from './Button';
 import '../../style/index.scss'
 
 storiesOf('Button', module).add('Primary', () => {
-    return <ButtonPrimary >login</ButtonPrimary>;
+    return <ButtonPrimary>login</ButtonPrimary>;
 });

src/components/Button/Button.stories.tsx

@@ -6,6 +6,7 @@
   border: none;
   color: $text-dark;
   font-weight: bold;
+  outline: none;
 }
 
 .btn-primary {

src/components/Button/buttons.scss

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Input } from './Input';
+import '../../style/index.scss'
+
+storiesOf('Input', module).add('Input', () => {
+    return <Input placeholder="placeholder" />;
+});

src/components/Input/Input.stories.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Input = (props: React.HTMLProps<HTMLInputElement>) => (
+    <input
+        {...props}
+    />
+);

src/components/Input/Input.tsx

@@ -0,0 +1,16 @@
+input {
+  width: 348px;
+  height: 48px;
+  line-height: 48px;
+  font-size: 18px;
+  background: #313849;
+  border-radius: 4px;
+  color: $accented;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+input::placeholder {
+  color: $hint;
+  font-size: 18px;
+}

src/components/Input/input.scss

@@ -1,4 +1,6 @@
+@import './reset.scss';
 @import './variables.scss';
 @import './common.scss';
 
 @import '../components/Button/buttons.scss';
+@import '../components/Input/input.scss';