From 3d7bc21173cd2a2b8904ed432012f35d76727cdd Mon Sep 17 00:00:00 2001
From: Willem Liu <willem_liu@hotmail.com>
Date: Fri, 15 Feb 2019 14:36:59 +0100
Subject: [PATCH] Added buttonStyle

---
 demo/demo.tsx                            |  8 +++----
 dist/FollowButton.d.ts                   |  4 +++-
 dist/buttons.js                          |  2 +-
 package-lock.json                        | 30 +++++++-----------------
 package.json                             |  2 +-
 src/FollowButton.tsx                     |  9 ++++---
 test/Buttons.test.tsx                    |  8 +++----
 test/__snapshots__/Buttons.test.tsx.snap |  8 +++----
 8 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/demo/demo.tsx b/demo/demo.tsx
index a5eea30..6360d41 100644
--- a/demo/demo.tsx
+++ b/demo/demo.tsx
@@ -29,9 +29,9 @@ ReactDOM.render(<>
         <div><ButtonEditorial onClick={handleClick} className="m">.fd-button.m</ButtonEditorial></div>
         <div><ButtonEditorial onClick={handleClick} className="l">.fd-button.l</ButtonEditorial></div>
 
-        <div><FollowButton onClick={handleClick} tag="tag1">.fd-follow-button</FollowButton></div>
-        <div><FollowButton onClick={handleClick} selected={true} tag="tag2">.fd-follow-button</FollowButton></div>
-        <div><FollowButton className="persoonlijk" onClick={handleClick} tag="tag3">.fd-follow-button.persoonlijk</FollowButton></div>
-        <div><FollowButton className="persoonlijk" onClick={handleClick} selected={true} tag="tag3">.fd-follow-button.persoonlijk</FollowButton></div>
+        <div><FollowButton buttonStyle="default" onClick={handleClick} tag="tag1">.fd-follow-button</FollowButton></div>
+        <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>
     </>,
     document.getElementById('root'));
diff --git a/dist/FollowButton.d.ts b/dist/FollowButton.d.ts
index 7fbed81..93cbcb2 100644
--- a/dist/FollowButton.d.ts
+++ b/dist/FollowButton.d.ts
@@ -1,9 +1,11 @@
 import React, { PureComponent } from "react";
+export declare type ButtonTypes = 'default' | 'persoonlijk';
 export interface Props {
+    buttonStyle: ButtonTypes;
     className?: string;
     followButtonText?: string;
     followLink?: string;
-    unfollowButtonText?: string;
+    unFollowButtonText?: string;
     unFollowLink?: string;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     selected?: boolean;
diff --git a/dist/buttons.js b/dist/buttons.js
index 5173f4a..0922b08 100644
--- a/dist/buttons.js
+++ b/dist/buttons.js
@@ -1 +1 @@
-module.exports=function(n){var t={};function e(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return n[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}return e.m=n,e.c=t,e.d=function(n,t,o){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var r in n)e.d(o,r,function(t){return n[t]}.bind(null,r));return o},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=2)}([function(n,t){n.exports=require("react")},function(n,t){n.exports=require("styled-components")},function(n,t,e){n.exports=e(3)},function(n,t,e){"use strict";var o=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var t={};if(null!=n)for(var e in n)Object.hasOwnProperty.call(n,e)&&(t[e]=n[e]);return t.default=n,t};Object.defineProperty(t,"__esModule",{value:!0});var r=o(e(4));t.ButtonCallToAction=r.default,t.ButtonCallToActionStyles=r.ButtonCallToActionStyles;var i=o(e(5));t.ButtonEditorial=i.default,t.ButtonEditorialStyles=i.ButtonEditorialStyles;var a=o(e(6));t.FollowButton=a.default,t.FollowButtonStyle=a.FollowButtonStyle},function(n,t,e){"use strict";var o,r=this&&this.__extends||(o=function(n,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,t){n.__proto__=t}||function(n,t){for(var e in t)t.hasOwnProperty(e)&&(n[e]=t[e])})(n,t)},function(n,t){function e(){this.constructor=n}o(n,t),n.prototype=null===t?Object.create(t):(e.prototype=t.prototype,new e)}),i=this&&this.__makeTemplateObject||function(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n},a=this&&this.__assign||function(){return(a=Object.assign||function(n){for(var t,e=1,o=arguments.length;e<o;e++)for(var r in t=arguments[e])Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}).apply(this,arguments)},l=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var t={};if(null!=n)for(var e in n)Object.hasOwnProperty.call(n,e)&&(t[e]=n[e]);return t.default=n,t};Object.defineProperty(t,"__esModule",{value:!0});var s=l(e(0)),c=e(1),u=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return r(t,n),t.prototype.render=function(){return s.default.createElement(s.default.Fragment,null,s.default.createElement(p,null),s.default.createElement("button",a({},this.props,{className:"fd-button-cta"+(this.props.className?" "+this.props.className:"")}),this.props.children))},t}(s.PureComponent);t.default=u;var f,p=c.createGlobalStyle(f||(f=i(["\n.fd-button-cta {\n    min-height: 2rem;\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    font-size: 1rem;\n    line-height: 1;\n    color: #FFFFFF;\n    text-decoration: none;\n    cursor: pointer;\n    padding: 0 1rem;\n    border: none;\n    text-align: center;\n    background-color: #ff8529;\n    :hover {\n        background-color: #DF680E;\n    }\n    box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset;\n    border: none;\n    border-radius: 2px;\n    transition: all .1s;\n    font-family: 'ProximaNovaBold', sans-serif;\n    font-weight: normal;\n    &.m {\n        min-height: 2.5rem;\n    }\n    &.l {\n        font-size: 1.25rem;\n        padding: 0 1.5rem;\n        min-height: 3.5rem;\n    }\n    &:active {\n        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) inset;\n    }\n}\n"],["\n.fd-button-cta {\n    min-height: 2rem;\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    font-size: 1rem;\n    line-height: 1;\n    color: #FFFFFF;\n    text-decoration: none;\n    cursor: pointer;\n    padding: 0 1rem;\n    border: none;\n    text-align: center;\n    background-color: #ff8529;\n    :hover {\n        background-color: #DF680E;\n    }\n    box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset;\n    border: none;\n    border-radius: 2px;\n    transition: all .1s;\n    font-family: 'ProximaNovaBold', sans-serif;\n    font-weight: normal;\n    &.m {\n        min-height: 2.5rem;\n    }\n    &.l {\n        font-size: 1.25rem;\n        padding: 0 1.5rem;\n        min-height: 3.5rem;\n    }\n    &:active {\n        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) inset;\n    }\n}\n"])));t.ButtonCallToActionStyles=p},function(n,t,e){"use strict";var o,r=this&&this.__extends||(o=function(n,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,t){n.__proto__=t}||function(n,t){for(var e in t)t.hasOwnProperty(e)&&(n[e]=t[e])})(n,t)},function(n,t){function e(){this.constructor=n}o(n,t),n.prototype=null===t?Object.create(t):(e.prototype=t.prototype,new e)}),i=this&&this.__makeTemplateObject||function(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n},a=this&&this.__assign||function(){return(a=Object.assign||function(n){for(var t,e=1,o=arguments.length;e<o;e++)for(var r in t=arguments[e])Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}).apply(this,arguments)},l=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var t={};if(null!=n)for(var e in n)Object.hasOwnProperty.call(n,e)&&(t[e]=n[e]);return t.default=n,t};Object.defineProperty(t,"__esModule",{value:!0});var s=l(e(0)),c=e(1),u=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return r(t,n),t.prototype.render=function(){return s.default.createElement(s.default.Fragment,null,s.default.createElement(p,null),s.default.createElement("button",a({},this.props,{className:"fd-button"+(this.props.className?" "+this.props.className:"")}),this.props.children))},t}(s.PureComponent);t.default=u;var f,p=c.createGlobalStyle(f||(f=i(["\n.fd-button {\n    min-height: 2rem;\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    font-size: 1rem;\n    line-height: 1;\n    color: #FFFFFF;\n    text-decoration: none;\n    cursor: pointer;\n    padding: 0 1rem;\n    border: none;\n    text-align: center;\n    background-color: #677381;\n    :hover {\n        background-color: #2e3843;\n    }\n    box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset;\n    border: none;\n    border-radius: 2px;\n    transition: all .1s;\n    font-family: 'ProximaNovaBold', sans-serif;\n    font-weight: normal;\n    &.m {\n        min-height: 2.5rem;\n    }\n    &.l {\n        font-size: 1.25rem;\n        padding: 0 1.5rem;\n        min-height: 3.5rem;\n    }\n    &:active {\n        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) inset;\n    }\n}\n"],["\n.fd-button {\n    min-height: 2rem;\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    font-size: 1rem;\n    line-height: 1;\n    color: #FFFFFF;\n    text-decoration: none;\n    cursor: pointer;\n    padding: 0 1rem;\n    border: none;\n    text-align: center;\n    background-color: #677381;\n    :hover {\n        background-color: #2e3843;\n    }\n    box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset;\n    border: none;\n    border-radius: 2px;\n    transition: all .1s;\n    font-family: 'ProximaNovaBold', sans-serif;\n    font-weight: normal;\n    &.m {\n        min-height: 2.5rem;\n    }\n    &.l {\n        font-size: 1.25rem;\n        padding: 0 1.5rem;\n        min-height: 3.5rem;\n    }\n    &:active {\n        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) inset;\n    }\n}\n"])));t.ButtonEditorialStyles=p},function(n,t,e){"use strict";var o,r=this&&this.__extends||(o=function(n,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,t){n.__proto__=t}||function(n,t){for(var e in t)t.hasOwnProperty(e)&&(n[e]=t[e])})(n,t)},function(n,t){function e(){this.constructor=n}o(n,t),n.prototype=null===t?Object.create(t):(e.prototype=t.prototype,new e)}),i=this&&this.__makeTemplateObject||function(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n},a=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var t={};if(null!=n)for(var e in n)Object.hasOwnProperty.call(n,e)&&(t[e]=n[e]);return t.default=n,t};Object.defineProperty(t,"__esModule",{value:!0});var l=a(e(0)),s=e(1),c=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return r(t,n),t.prototype.render=function(){return l.default.createElement(l.default.Fragment,null,l.default.createElement(f,null),l.default.createElement("button",{className:"fd-follow-button"+(this.props.className?" "+this.props.className:""),onClick:this.props.onClick,"data-tag":this.props.tag,"data-selected":this.props.selected,"data-addurl":this.props.followLink?this.props.followLink:"/add-interest","data-deleteurl":this.props.unFollowLink?this.props.unFollowLink:"/delete-interest"},l.default.createElement("span",{className:"cross"})," ",l.default.createElement("span",{className:"button-text default-text"},this.props.followButtonText?this.props.followButtonText:"Volg"),l.default.createElement("span",{className:"button-text active-text"},this.props.unfollowButtonText?this.props.unfollowButtonText:"Ontvolg")))},t}(l.PureComponent);t.default=c;var u,f=s.createGlobalStyle(u||(u=i(["\n.fd-follow-button {\n    outline: none;\n    border-radius: 2px;\n    white-space: nowrap;\n    padding: 5px 10px;\n    border: 1px solid #49a4a2;\n    color: #49a4a2;\n    background-color: transparent;\n    cursor: pointer;\n    transition: all .2s;\n    font-family: 'ProximaNovaRegular', sans-serif;\n    &:hover {\n        background-color: #49a4a2;\n        color: #ffeadb;\n    }\n    .cross {\n        &:before {\n            content: '+';\n            display: block;\n            width: 10px;\n            height: 10px;\n            line-height: 10px;\n        }\n        display: inline-block;\n        transform: rotate(0deg);\n        transition: transform .5s;\n        transform-origin: center center;\n        font-size: 20px;\n        position: relative;\n        top: 2px;\n    }\n\n    .button-text {\n        margin-left: 5px;\n    }\n\n    .active-text {\n        display: none;\n    }\n\n    &[data-selected=\"true\"] {\n        background-color: #49a4a2;\n        color: #ffeadb;\n        .cross {\n            transform: rotate(45deg);\n        }\n\n        .default-text {\n            display: none;\n        }\n        .default-icon,\n        .active-text {\n            display: inline;\n        }\n    }\n\n    &.persoonlijk {\n        .cross,\n        .button-text {\n            color: #000000;\n        }\n\n        &:hover {\n            .cross,\n            .button-text {\n                color: #ffffff;\n            }\n        }\n\n        &[data-selected=\"true\"] {\n            .button-text, .cross {\n                color: #ffffff;\n            }\n        }\n    }\n\n}\n"],["\n.fd-follow-button {\n    outline: none;\n    border-radius: 2px;\n    white-space: nowrap;\n    padding: 5px 10px;\n    border: 1px solid #49a4a2;\n    color: #49a4a2;\n    background-color: transparent;\n    cursor: pointer;\n    transition: all .2s;\n    font-family: 'ProximaNovaRegular', sans-serif;\n    &:hover {\n        background-color: #49a4a2;\n        color: #ffeadb;\n    }\n    .cross {\n        &:before {\n            content: '+';\n            display: block;\n            width: 10px;\n            height: 10px;\n            line-height: 10px;\n        }\n        display: inline-block;\n        transform: rotate(0deg);\n        transition: transform .5s;\n        transform-origin: center center;\n        font-size: 20px;\n        position: relative;\n        top: 2px;\n    }\n\n    .button-text {\n        margin-left: 5px;\n    }\n\n    .active-text {\n        display: none;\n    }\n\n    &[data-selected=\"true\"] {\n        background-color: #49a4a2;\n        color: #ffeadb;\n        .cross {\n            transform: rotate(45deg);\n        }\n\n        .default-text {\n            display: none;\n        }\n        .default-icon,\n        .active-text {\n            display: inline;\n        }\n    }\n\n    &.persoonlijk {\n        .cross,\n        .button-text {\n            color: #000000;\n        }\n\n        &:hover {\n            .cross,\n            .button-text {\n                color: #ffffff;\n            }\n        }\n\n        &[data-selected=\"true\"] {\n            .button-text, .cross {\n                color: #ffffff;\n            }\n        }\n    }\n\n}\n"])));t.FollowButtonStyle=f}]);
\ No newline at end of file
+module.exports=function(n){var t={};function e(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return n[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}return e.m=n,e.c=t,e.d=function(n,t,o){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var r in n)e.d(o,r,function(t){return n[t]}.bind(null,r));return o},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=2)}([function(n,t){n.exports=require("react")},function(n,t){n.exports=require("styled-components")},function(n,t,e){n.exports=e(3)},function(n,t,e){"use strict";var o=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var t={};if(null!=n)for(var e in n)Object.hasOwnProperty.call(n,e)&&(t[e]=n[e]);return t.default=n,t};Object.defineProperty(t,"__esModule",{value:!0});var r=o(e(4));t.ButtonCallToAction=r.default,t.ButtonCallToActionStyles=r.ButtonCallToActionStyles;var i=o(e(5));t.ButtonEditorial=i.default,t.ButtonEditorialStyles=i.ButtonEditorialStyles;var a=o(e(6));t.FollowButton=a.default,t.FollowButtonStyle=a.FollowButtonStyle},function(n,t,e){"use strict";var o,r=this&&this.__extends||(o=function(n,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,t){n.__proto__=t}||function(n,t){for(var e in t)t.hasOwnProperty(e)&&(n[e]=t[e])})(n,t)},function(n,t){function e(){this.constructor=n}o(n,t),n.prototype=null===t?Object.create(t):(e.prototype=t.prototype,new e)}),i=this&&this.__makeTemplateObject||function(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n},a=this&&this.__assign||function(){return(a=Object.assign||function(n){for(var t,e=1,o=arguments.length;e<o;e++)for(var r in t=arguments[e])Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}).apply(this,arguments)},l=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var t={};if(null!=n)for(var e in n)Object.hasOwnProperty.call(n,e)&&(t[e]=n[e]);return t.default=n,t};Object.defineProperty(t,"__esModule",{value:!0});var s=l(e(0)),c=e(1),u=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return r(t,n),t.prototype.render=function(){return s.default.createElement(s.default.Fragment,null,s.default.createElement(p,null),s.default.createElement("button",a({},this.props,{className:"fd-button-cta"+(this.props.className?" "+this.props.className:"")}),this.props.children))},t}(s.PureComponent);t.default=u;var f,p=c.createGlobalStyle(f||(f=i(["\n.fd-button-cta {\n    min-height: 2rem;\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    font-size: 1rem;\n    line-height: 1;\n    color: #FFFFFF;\n    text-decoration: none;\n    cursor: pointer;\n    padding: 0 1rem;\n    border: none;\n    text-align: center;\n    background-color: #ff8529;\n    :hover {\n        background-color: #DF680E;\n    }\n    box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset;\n    border: none;\n    border-radius: 2px;\n    transition: all .1s;\n    font-family: 'ProximaNovaBold', sans-serif;\n    font-weight: normal;\n    &.m {\n        min-height: 2.5rem;\n    }\n    &.l {\n        font-size: 1.25rem;\n        padding: 0 1.5rem;\n        min-height: 3.5rem;\n    }\n    &:active {\n        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) inset;\n    }\n}\n"],["\n.fd-button-cta {\n    min-height: 2rem;\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    font-size: 1rem;\n    line-height: 1;\n    color: #FFFFFF;\n    text-decoration: none;\n    cursor: pointer;\n    padding: 0 1rem;\n    border: none;\n    text-align: center;\n    background-color: #ff8529;\n    :hover {\n        background-color: #DF680E;\n    }\n    box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset;\n    border: none;\n    border-radius: 2px;\n    transition: all .1s;\n    font-family: 'ProximaNovaBold', sans-serif;\n    font-weight: normal;\n    &.m {\n        min-height: 2.5rem;\n    }\n    &.l {\n        font-size: 1.25rem;\n        padding: 0 1.5rem;\n        min-height: 3.5rem;\n    }\n    &:active {\n        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) inset;\n    }\n}\n"])));t.ButtonCallToActionStyles=p},function(n,t,e){"use strict";var o,r=this&&this.__extends||(o=function(n,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,t){n.__proto__=t}||function(n,t){for(var e in t)t.hasOwnProperty(e)&&(n[e]=t[e])})(n,t)},function(n,t){function e(){this.constructor=n}o(n,t),n.prototype=null===t?Object.create(t):(e.prototype=t.prototype,new e)}),i=this&&this.__makeTemplateObject||function(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n},a=this&&this.__assign||function(){return(a=Object.assign||function(n){for(var t,e=1,o=arguments.length;e<o;e++)for(var r in t=arguments[e])Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}).apply(this,arguments)},l=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var t={};if(null!=n)for(var e in n)Object.hasOwnProperty.call(n,e)&&(t[e]=n[e]);return t.default=n,t};Object.defineProperty(t,"__esModule",{value:!0});var s=l(e(0)),c=e(1),u=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return r(t,n),t.prototype.render=function(){return s.default.createElement(s.default.Fragment,null,s.default.createElement(p,null),s.default.createElement("button",a({},this.props,{className:"fd-button"+(this.props.className?" "+this.props.className:"")}),this.props.children))},t}(s.PureComponent);t.default=u;var f,p=c.createGlobalStyle(f||(f=i(["\n.fd-button {\n    min-height: 2rem;\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    font-size: 1rem;\n    line-height: 1;\n    color: #FFFFFF;\n    text-decoration: none;\n    cursor: pointer;\n    padding: 0 1rem;\n    border: none;\n    text-align: center;\n    background-color: #677381;\n    :hover {\n        background-color: #2e3843;\n    }\n    box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset;\n    border: none;\n    border-radius: 2px;\n    transition: all .1s;\n    font-family: 'ProximaNovaBold', sans-serif;\n    font-weight: normal;\n    &.m {\n        min-height: 2.5rem;\n    }\n    &.l {\n        font-size: 1.25rem;\n        padding: 0 1.5rem;\n        min-height: 3.5rem;\n    }\n    &:active {\n        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) inset;\n    }\n}\n"],["\n.fd-button {\n    min-height: 2rem;\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    font-size: 1rem;\n    line-height: 1;\n    color: #FFFFFF;\n    text-decoration: none;\n    cursor: pointer;\n    padding: 0 1rem;\n    border: none;\n    text-align: center;\n    background-color: #677381;\n    :hover {\n        background-color: #2e3843;\n    }\n    box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset;\n    border: none;\n    border-radius: 2px;\n    transition: all .1s;\n    font-family: 'ProximaNovaBold', sans-serif;\n    font-weight: normal;\n    &.m {\n        min-height: 2.5rem;\n    }\n    &.l {\n        font-size: 1.25rem;\n        padding: 0 1.5rem;\n        min-height: 3.5rem;\n    }\n    &:active {\n        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) inset;\n    }\n}\n"])));t.ButtonEditorialStyles=p},function(n,t,e){"use strict";var o,r=this&&this.__extends||(o=function(n,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,t){n.__proto__=t}||function(n,t){for(var e in t)t.hasOwnProperty(e)&&(n[e]=t[e])})(n,t)},function(n,t){function e(){this.constructor=n}o(n,t),n.prototype=null===t?Object.create(t):(e.prototype=t.prototype,new e)}),i=this&&this.__makeTemplateObject||function(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n},a=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var t={};if(null!=n)for(var e in n)Object.hasOwnProperty.call(n,e)&&(t[e]=n[e]);return t.default=n,t};Object.defineProperty(t,"__esModule",{value:!0});var l=a(e(0)),s=e(1),c=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return r(t,n),t.prototype.render=function(){return l.default.createElement(l.default.Fragment,null,l.default.createElement(f,null),l.default.createElement("button",{className:"fd-follow-button"+(this.props.className?" "+this.props.className:"")+(this.props.buttonStyle?" "+this.props.buttonStyle:""),onClick:this.props.onClick,"data-tag":this.props.tag,"data-selected":this.props.selected,"data-addurl":this.props.followLink?this.props.followLink:"/add-interest","data-deleteurl":this.props.unFollowLink?this.props.unFollowLink:"/delete-interest"},l.default.createElement("span",{className:"cross"})," ",l.default.createElement("span",{className:"button-text default-text"},this.props.followButtonText?this.props.followButtonText:"Volg"),l.default.createElement("span",{className:"button-text active-text"},this.props.unFollowButtonText?this.props.unFollowButtonText:"Ontvolg")))},t}(l.PureComponent);t.default=c;var u,f=s.createGlobalStyle(u||(u=i(["\n.fd-follow-button {\n    outline: none;\n    border-radius: 2px;\n    white-space: nowrap;\n    padding: 5px 10px;\n    border: 1px solid #49a4a2;\n    color: #49a4a2;\n    background-color: transparent;\n    cursor: pointer;\n    transition: all .2s;\n    font-family: 'ProximaNovaRegular', sans-serif;\n    &:hover {\n        background-color: #49a4a2;\n        color: #ffeadb;\n    }\n    .cross {\n        &:before {\n            content: '+';\n            display: block;\n            width: 10px;\n            height: 10px;\n            line-height: 10px;\n        }\n        display: inline-block;\n        transform: rotate(0deg);\n        transition: transform .5s;\n        transform-origin: center center;\n        font-size: 20px;\n        position: relative;\n        top: 2px;\n    }\n\n    .button-text {\n        margin-left: 5px;\n    }\n\n    .active-text {\n        display: none;\n    }\n\n    &[data-selected=\"true\"] {\n        background-color: #49a4a2;\n        color: #ffeadb;\n        .cross {\n            transform: rotate(45deg);\n        }\n\n        .default-text {\n            display: none;\n        }\n        .default-icon,\n        .active-text {\n            display: inline;\n        }\n    }\n\n    &.persoonlijk {\n        .cross,\n        .button-text {\n            color: #000000;\n        }\n\n        &:hover {\n            .cross,\n            .button-text {\n                color: #ffffff;\n            }\n        }\n\n        &[data-selected=\"true\"] {\n            .button-text, .cross {\n                color: #ffffff;\n            }\n        }\n    }\n\n}\n"],["\n.fd-follow-button {\n    outline: none;\n    border-radius: 2px;\n    white-space: nowrap;\n    padding: 5px 10px;\n    border: 1px solid #49a4a2;\n    color: #49a4a2;\n    background-color: transparent;\n    cursor: pointer;\n    transition: all .2s;\n    font-family: 'ProximaNovaRegular', sans-serif;\n    &:hover {\n        background-color: #49a4a2;\n        color: #ffeadb;\n    }\n    .cross {\n        &:before {\n            content: '+';\n            display: block;\n            width: 10px;\n            height: 10px;\n            line-height: 10px;\n        }\n        display: inline-block;\n        transform: rotate(0deg);\n        transition: transform .5s;\n        transform-origin: center center;\n        font-size: 20px;\n        position: relative;\n        top: 2px;\n    }\n\n    .button-text {\n        margin-left: 5px;\n    }\n\n    .active-text {\n        display: none;\n    }\n\n    &[data-selected=\"true\"] {\n        background-color: #49a4a2;\n        color: #ffeadb;\n        .cross {\n            transform: rotate(45deg);\n        }\n\n        .default-text {\n            display: none;\n        }\n        .default-icon,\n        .active-text {\n            display: inline;\n        }\n    }\n\n    &.persoonlijk {\n        .cross,\n        .button-text {\n            color: #000000;\n        }\n\n        &:hover {\n            .cross,\n            .button-text {\n                color: #ffffff;\n            }\n        }\n\n        &[data-selected=\"true\"] {\n            .button-text, .cross {\n                color: #ffffff;\n            }\n        }\n    }\n\n}\n"])));t.FollowButtonStyle=f}]);
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index bfa6959..7ce0b19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@fdmg/fd-buttons",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2817,14 +2817,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2839,20 +2837,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2969,8 +2964,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2982,7 +2976,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2997,7 +2990,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3005,14 +2997,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3031,7 +3021,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3112,8 +3101,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3125,7 +3113,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3247,7 +3234,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/package.json b/package.json
index 53b654b..c9dc17e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fdmg/fd-buttons",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "FD-themed buttons",
   "types": "dist/Buttons.d.ts",
   "main": "dist/buttons.js",
diff --git a/src/FollowButton.tsx b/src/FollowButton.tsx
index 61869e2..76c102f 100644
--- a/src/FollowButton.tsx
+++ b/src/FollowButton.tsx
@@ -1,11 +1,14 @@
 import React, { PureComponent } from "react";
 import { createGlobalStyle } from "styled-components";
 
+export type ButtonTypes = 'default' | 'persoonlijk';
+
 export interface Props {
+    buttonStyle: ButtonTypes;
     className?: string;
     followButtonText?: string;
     followLink?: string;
-    unfollowButtonText?: string;
+    unFollowButtonText?: string;
     unFollowLink?: string;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     selected?: boolean;
@@ -17,8 +20,8 @@ export default class FollowButton extends PureComponent<Props, any> {
         return (
             <>
                 <GlobalStyle/>
-                <button className={`fd-follow-button${this.props.className ? ` ${this.props.className}` : ''}`} onClick={this.props.onClick} data-tag={this.props.tag} data-selected={this.props.selected} data-addurl={this.props.followLink ? this.props.followLink : '/add-interest'} data-deleteurl={this.props.unFollowLink ? this.props.unFollowLink : '/delete-interest'}>
-                    <span className="cross"/> <span className="button-text default-text">{this.props.followButtonText ? this.props.followButtonText : 'Volg'}</span><span className="button-text active-text">{this.props.unfollowButtonText ? this.props.unfollowButtonText : 'Ontvolg'}</span>
+                <button className={`fd-follow-button${this.props.className ? ` ${this.props.className}` : ''}${this.props.buttonStyle ? ` ${this.props.buttonStyle}` : ''}`} onClick={this.props.onClick} data-tag={this.props.tag} data-selected={this.props.selected} data-addurl={this.props.followLink ? this.props.followLink : '/add-interest'} data-deleteurl={this.props.unFollowLink ? this.props.unFollowLink : '/delete-interest'}>
+                    <span className="cross"/> <span className="button-text default-text">{this.props.followButtonText ? this.props.followButtonText : 'Volg'}</span><span className="button-text active-text">{this.props.unFollowButtonText ? this.props.unFollowButtonText : 'Ontvolg'}</span>
                 </button>
             </>
         );
diff --git a/test/Buttons.test.tsx b/test/Buttons.test.tsx
index 4ba8a31..7d0020f 100644
--- a/test/Buttons.test.tsx
+++ b/test/Buttons.test.tsx
@@ -22,13 +22,13 @@ describe('Button', () => {
     });
 
     test('renders follow buttons correctly', () => {
-        let button = TestRenderer.create(<FollowButton onClick={() => {}} tag="tag1"/>);
+        let button = TestRenderer.create(<FollowButton buttonStyle="default" onClick={() => {}} tag="tag1"/>);
         expect(button.toJSON()).toMatchSnapshot();
-        button = TestRenderer.create(<FollowButton onClick={() => {}} tag="tag2" selected={true} followLink="https://fd.nl" unFollowLink="https://bnr.nl"/>);
+        button = TestRenderer.create(<FollowButton buttonStyle="default" onClick={() => {}} tag="tag2" selected={true} followLink="https://fd.nl" unFollowLink="https://bnr.nl"/>);
         expect(button.toJSON()).toMatchSnapshot();
-        button = TestRenderer.create(<FollowButton onClick={() => {}} tag="tag3" followButtonText="Follow tha leada leada"/>);
+        button = TestRenderer.create(<FollowButton buttonStyle="default" onClick={() => {}} tag="tag3" followButtonText="Follow tha leada leada"/>);
         expect(button.toJSON()).toMatchSnapshot();
-        button = TestRenderer.create(<FollowButton onClick={() => {}} tag="tag4" selected={true} unfollowButtonText="You can go your own way!"/>);
+        button = TestRenderer.create(<FollowButton buttonStyle="default" onClick={() => {}} tag="tag4" selected={true} unFollowButtonText="You can go your own way!"/>);
         expect(button.toJSON()).toMatchSnapshot();
     });
 });
\ No newline at end of file
diff --git a/test/__snapshots__/Buttons.test.tsx.snap b/test/__snapshots__/Buttons.test.tsx.snap
index 5ef465c..b23d6be 100644
--- a/test/__snapshots__/Buttons.test.tsx.snap
+++ b/test/__snapshots__/Buttons.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`Button renders editorial buttons correctly 3`] = `
 
 exports[`Button renders follow buttons correctly 1`] = `
 <button
-  className="fd-follow-button"
+  className="fd-follow-button default"
   data-addurl="/add-interest"
   data-deleteurl="/delete-interest"
   data-tag="tag1"
@@ -63,7 +63,7 @@ exports[`Button renders follow buttons correctly 1`] = `
 
 exports[`Button renders follow buttons correctly 2`] = `
 <button
-  className="fd-follow-button"
+  className="fd-follow-button default"
   data-addurl="https://fd.nl"
   data-deleteurl="https://bnr.nl"
   data-selected={true}
@@ -89,7 +89,7 @@ exports[`Button renders follow buttons correctly 2`] = `
 
 exports[`Button renders follow buttons correctly 3`] = `
 <button
-  className="fd-follow-button"
+  className="fd-follow-button default"
   data-addurl="/add-interest"
   data-deleteurl="/delete-interest"
   data-tag="tag3"
@@ -114,7 +114,7 @@ exports[`Button renders follow buttons correctly 3`] = `
 
 exports[`Button renders follow buttons correctly 4`] = `
 <button
-  className="fd-follow-button"
+  className="fd-follow-button default"
   data-addurl="/add-interest"
   data-deleteurl="/delete-interest"
   data-selected={true}