Added buttonStyle

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'));

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;

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",

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>
             </>
         );

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();
     });
 });

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}