From cef0d8f12aaac643464d9524b7f90039b86ebae9 Mon Sep 17 00:00:00 2001
From: dan-searle <dan.m.searle@gmail.com>
Date: Tue, 27 Nov 2018 15:43:39 +0000
Subject: [PATCH] Use classnames package to apply component classes. Ensure
 specified variant is supported.

---
 components/x-follow-button/package.json                     | 3 ++-
 components/x-follow-button/src/FollowButton.jsx             | 6 +++++-
 .../x-follow-button/src/styles/components/FollowButton.scss | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/x-follow-button/package.json b/components/x-follow-button/package.json
index 598d21404..25eff4b7d 100644
--- a/components/x-follow-button/package.json
+++ b/components/x-follow-button/package.json
@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@financial-times/x-interaction": "file:../x-interaction",
-    "@financial-times/x-engine": "file:../../packages/x-engine"
+    "@financial-times/x-engine": "file:../../packages/x-engine",
+    "classnames": "^2.2.6"
   }
 }
diff --git a/components/x-follow-button/src/FollowButton.jsx b/components/x-follow-button/src/FollowButton.jsx
index beacd946b..01cc3f819 100644
--- a/components/x-follow-button/src/FollowButton.jsx
+++ b/components/x-follow-button/src/FollowButton.jsx
@@ -1,4 +1,5 @@
 import { h } from '@financial-times/x-engine';
+import classNames from 'classnames';
 import styles from './styles/main.scss';
 
 export const FollowButton = (props) => {
@@ -11,6 +12,7 @@ export const FollowButton = (props) => {
 		followPlusDigestEmail,
 		variant
 	} = props;
+	const VARIANTS = ['standard', 'inverse', 'opinion', 'monochrome'];
 
 	const getFormAction = () => {
 		if (followPlusDigestEmail) {
@@ -61,7 +63,9 @@ export const FollowButton = (props) => {
 				title={isFollowed ? followedConceptNameText : unfollowedConceptNameText}
 				aria-label={isFollowed ? followedConceptNameText : unfollowedConceptNameText}
 				aria-pressed={isFollowed ? 'true' : 'false'}
-				className={`${styles['button']} ${styles[`button--${variant}`]}`}
+				className={classNames(styles['button'], {
+					[styles[`button--${variant}`]]: VARIANTS.includes(variant)
+				})}
 				data-concept-id={conceptId}
 				data-trackable-context-messaging={
 					followPlusDigestEmail ? 'add-to-myft-plus-digest-button' : null
diff --git a/components/x-follow-button/src/styles/components/FollowButton.scss b/components/x-follow-button/src/styles/components/FollowButton.scss
index 011f4d216..80062e285 100644
--- a/components/x-follow-button/src/styles/components/FollowButton.scss
+++ b/components/x-follow-button/src/styles/components/FollowButton.scss
@@ -2,7 +2,7 @@
 
 @import '../mixins/lozenge/main';
 
-/* Mixins: are going to be reused accross various components */
+/* Mixins: are going to be reused across various components */
 
 .button {
 	@include myftLozenge($with-toggle-icon: true);