Use classnames package to apply component classes. Ensure specified v…

…ariant is supported.

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

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

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