Merge pull request #672 from Financial-Times/CI-1342-alphaville-myft-…

…button-doesnt-adopt-the-new-alphaville-brand-colour-when-toggled add alphaville theme for x-follow-button
Financial-Times · Sep 28, 2022 · dc14016 · dc14016
2 parents 3c73cae + 6eb4926
commit dc14016
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/components/x-follow-button/readme.md b/components/x-follow-button/readme.md
@@ -19,7 +19,7 @@ Feature                     | Type    | Required | Default value  | Description
 `conceptNameAsButtonText`   | Boolean | no       | `false`        | If true will use the concept name as the button text, otherwise will default to "Add to MyFT" or "Remove from MyFT" (depending on isFollowed prop).
 `isFollowed`                | Boolean | no       | `false`        | Whether the concept is followed or not.
 `csrfToken`                 | String  | no       | none           | CSRF token (will be included in a hidden form field).
-`variant`                   | String  | no       | `standard`     | One of `standard`, `inverse`, `opinion` or `monochrome`. Other values will be ignored.
+`variant`                   | String  | no       | `standard`     | One of `standard`, `inverse`, `opinion` , `alphaville` or `monochrome`. Other values will be ignored.
 `followPlusDigestEmail`     | Boolean | no       | `false`        | Whether following the topic should also subscribe to the digest.
 
 ## Client side behaviour

diff --git a/components/x-follow-button/src/FollowButton.jsx b/components/x-follow-button/src/FollowButton.jsx
@@ -12,7 +12,7 @@ export const FollowButton = (props) => {
 		onSubmit,
 		variant
 	} = props
-	const VARIANTS = ['standard', 'inverse', 'opinion', 'monochrome']
+	const VARIANTS = ['standard', 'inverse', 'opinion', 'alphaville', 'monochrome']
 
 	const getFormAction = () => {
 		if (followPlusDigestEmail) {

diff --git a/components/x-follow-button/src/styles/mixins/lozenge/_themes.scss b/components/x-follow-button/src/styles/mixins/lozenge/_themes.scss
@@ -32,7 +32,15 @@ $myft-lozenge-themes: (
 		pressed-highlight: rgba(oColorsByName('white'), 0.2),
 		disabled: rgba(oColorsByName('white'), 0.5),
 		focus-outline: oColorsByName('white')
-	)
+	),
+	alphaville: (
+		background: oColorsByName('white'),
+		text: oColorsByName('matisse'),
+		highlight: rgba(white, 0.8),
+		pressed-highlight: rgba(white, 0.2),
+		disabled: rgba(oColorsByName('white'), 0.5),
+		focus-outline: oColorsByName('white')
+	),
 );
 
 @function getThemeColor($key) {

diff --git a/components/x-follow-button/storybook/index.jsx b/components/x-follow-button/storybook/index.jsx
@@ -27,5 +27,7 @@ _FollowButton.args = {
 	variant: 'standard'
 }
 _FollowButton.argTypes = {
-	variant: { control: { type: 'select', options: ['standard', 'inverse', 'opinion', 'monochrome'] } }
+	variant: {
+		control: { type: 'select', options: ['standard', 'inverse', 'opinion', 'alphaville', 'monochrome'] }
+	}
 }