Added add button

demo/demo.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {ButtonCallToAction, ButtonEditorial, FollowButton} from "../src/Buttons";
+import {AddButton, ButtonCallToAction, ButtonEditorial, FollowButton} from "../src/Buttons";
 import { createGlobalStyle } from 'styled-components';
 
 function handleClick() {
@@ -33,5 +33,9 @@ ReactDOM.render(<>
         <div><FollowButton buttonStyle="default" onClick={handleClick} selected={true} tag="tag2">.fd-follow-button</FollowButton></div>
         <div><FollowButton buttonStyle="persoonlijk" onClick={handleClick} tag="tag3">.fd-follow-button.persoonlijk</FollowButton></div>
         <div><FollowButton buttonStyle="persoonlijk" onClick={handleClick} selected={true} tag="tag3">.fd-follow-button.persoonlijk</FollowButton></div>
+
+        <div><AddButton buttonStyle="default" onClick={handleClick}>.fd-add-button</AddButton></div>
+        <div><AddButton buttonStyle="persoonlijk" onClick={handleClick}>.fd-add-button.persoonlijk</AddButton></div>
+
     </>,
     document.getElementById('root'));

dist/AddButton.d.ts

@@ -0,0 +1,12 @@
+import React, { PureComponent } from "react";
+export declare type ButtonTypes = 'default' | 'persoonlijk';
+export interface Props {
+    buttonStyle: ButtonTypes;
+    className?: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export default class AddButton extends PureComponent<any, any> {
+    render(): JSX.Element;
+}
+declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export { GlobalStyle as AddButtonStyle };

dist/Buttons.d.ts

@@ -1,6 +1,5 @@
+import AddButton, { AddButtonStyle } from './AddButton';
 import ButtonCallToAction, { ButtonCallToActionStyles } from './ButtonCta';
 import ButtonEditorial, { ButtonEditorialStyles } from './ButtonEditorial';
 import FollowButton, { FollowButtonStyle } from './FollowButton';
-export { ButtonCallToAction, ButtonCallToActionStyles };
-export { ButtonEditorial, ButtonEditorialStyles };
-export { FollowButton, FollowButtonStyle };
+export { AddButton, AddButtonStyle, ButtonCallToAction, ButtonCallToActionStyles, ButtonEditorial, ButtonEditorialStyles, FollowButton, FollowButtonStyle };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fdmg/fd-buttons",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "FD-themed buttons",
   "types": "dist/Buttons.d.ts",
   "main": "dist/buttons.js",
@@ -38,9 +38,9 @@
   "author": "Willem Liu",
   "license": "ISC",
   "devDependencies": {
-    "@types/jest": "^24.0.5",
+    "@types/jest": "^24.0.6",
     "@types/react": "^16.8.3",
-    "@types/react-dom": "^16.8.1",
+    "@types/react-dom": "^16.8.2",
     "@types/react-test-renderer": "^16.8.1",
     "@types/styled-components": "^4.1.10",
     "@types/webpack-env": "^1.13.7",
@@ -57,7 +57,7 @@
     "tslint": "^5.12.1",
     "tslint-react": "^3.6.0",
     "typescript": "^3.3.3",
-    "webpack": "^4.29.3",
+    "webpack": "^4.29.5",
     "webpack-cli": "^3.2.3"
   },
   "dependencies": {

src/AddButton.tsx

@@ -0,0 +1,41 @@
+import React, { PureComponent } from "react";
+import { createGlobalStyle } from "styled-components";
+
+export type ButtonTypes = 'default' | 'persoonlijk';
+
+export interface Props {
+    buttonStyle: ButtonTypes;
+    className?: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export default class AddButton extends PureComponent<any, any> {
+    render() {
+        return (
+            <>
+                <GlobalStyle/>
+                <button className={`fd-add-button${this.props.className ? ` ${this.props.className}` : ''}${this.props.buttonStyle ? ` ${this.props.buttonStyle}` : ''}`} onClick={this.props.onClick}>{this.props.children}</button>
+            </>
+        );
+    }
+}
+
+const GlobalStyle = createGlobalStyle`
+.fd-add-button {
+    outline: none;
+    border-radius: 2px;
+    white-space: nowrap;
+    padding: 5px 10px;
+    border: 1px solid #c60;
+    color: #ffeadb;
+    background-color: #c60;
+    cursor: pointer;
+    transition: all .2s;
+    font-family: 'ProximaNovaRegular', sans-serif;
+
+    &.persoonlijk {
+        color: #ffffff;
+    }
+}
+`;
+export {GlobalStyle as AddButtonStyle};

src/Buttons.tsx

@@ -1,7 +1,11 @@
+import AddButton, {AddButtonStyle} from './AddButton';
 import ButtonCallToAction, {ButtonCallToActionStyles} from './ButtonCta';
 import ButtonEditorial, { ButtonEditorialStyles } from './ButtonEditorial';
 import FollowButton, { FollowButtonStyle } from './FollowButton';
 
-export {ButtonCallToAction, ButtonCallToActionStyles};
-export {ButtonEditorial, ButtonEditorialStyles};
-export {FollowButton, FollowButtonStyle};
+export {
+    AddButton, AddButtonStyle,
+    ButtonCallToAction, ButtonCallToActionStyles,
+    ButtonEditorial, ButtonEditorialStyles,
+    FollowButton, FollowButtonStyle
+};

src/FollowButton.tsx

@@ -104,8 +104,6 @@ const GlobalStyle = createGlobalStyle`
             }
         }
     }
-
 }
 `;
-
 export {GlobalStyle as FollowButtonStyle};