Merge pull request #694 from Financial-Times/CON-2059-apply-new-origami-focus-styling

Apply new origami focus styling to x-follow-button

Author: fenglish

components/x-follow-button/package.json

@@ -15,17 +15,23 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@financial-times/n-myft-ui": "^30.0.0",
+    "@financial-times/o-buttons": "^7.7.4",
     "@financial-times/o-colors": "^6.4.2",
     "@financial-times/o-icons": "^7.2.1",
+    "@financial-times/o-normalise": "^3.3.0",
     "@financial-times/o-typography": "^7.2.2",
     "@financial-times/x-rollup": "file:../../packages/x-rollup",
     "@financial-times/x-test-utils": "file:../../packages/x-test-utils",
     "check-engine": "^1.10.1",
     "sass": "^1.49.0"
   },
   "peerDependencies": {
+    "@financial-times/n-myft-ui": "^30.0.0",
+    "@financial-times/o-buttons": "^7.7.4",
     "@financial-times/o-colors": "^6.4.2",
     "@financial-times/o-icons": "^7.2.1",
+    "@financial-times/o-normalise": "^3.3.0",
     "@financial-times/o-typography": "^7.2.2",
     "@financial-times/x-engine": "file:../../packages/x-engine"
   },

components/x-follow-button/src/FollowButton.jsx

@@ -10,9 +10,10 @@ export const FollowButton = (props) => {
 		csrfToken,
 		followPlusDigestEmail,
 		onSubmit,
-		variant
+		variant = 'standard'
 	} = props
-	const VARIANTS = ['standard', 'inverse', 'opinion', 'alphaville', 'monochrome']
+	// 'standard' style is applied by `.x-follow-button` class (default)
+	const VARIANTS = ['inverse', 'opinion', 'alphaville', 'monochrome']
 
 	const getFormAction = () => {
 		if (followPlusDigestEmail) {

components/x-follow-button/src/styles/components/FollowButton.scss

@@ -1,11 +1,7 @@
-@import '../mixins/lozenge/main';
-
-.x-follow-button {
-	@include myftLozenge($with-toggle-icon: true);
-}
+@import '@financial-times/n-myft-ui/mixins/lozenge/main.scss';
 
 @each $theme in map-keys($myft-lozenge-themes) {
-	.x-follow-button--#{$theme} {
-		@include myftLozengeTheme($theme, $with-toggle-icon: true);
+	.x-follow-button#{getThemeModifier($theme)} {
+		@include myftLozengeToggleButton($theme);
 	}
 }

components/x-follow-button/src/styles/main.scss

@@ -4,7 +4,6 @@ $system-code: 'github:Financial-Times/x-dash' !default;
 @import '@financial-times/o-icons/main';
 @import '@financial-times/o-colors/main';
 @import '@financial-times/o-typography/main';
-
-@import './mixins/lozenge/main.scss';
+@import '@financial-times/o-buttons/main';
 
 @import './components/FollowButton.scss';

components/x-follow-button/src/styles/mixins/lozenge/_themes.scss

@@ -15,19 +15,32 @@ export default {
 export const _FollowButton = (args) => (
 	<div className="story-container">
 		<BuildService dependencies={dependencies} />
-		<FollowButton {...args} />
+		<div style={{ padding: '8px' }}>
+			<p> Standard </p>
+			<FollowButton {...args} variant={'standard'} />
+		</div>
+		<div style={{ background: '#990F3D', padding: '8px' }}>
+			<p style={{ color: 'white' }}> Inverse </p>
+			<FollowButton {...args} variant={'inverse'} />
+		</div>
+		<div style={{ background: '#CCE6FF', padding: '8px' }}>
+			<p> Opinion </p>
+			<FollowButton {...args} variant={'opinion'} />
+		</div>
+		<div style={{ background: '#355778', padding: '8px' }}>
+			<p style={{ color: 'white' }}> Alphaville </p>
+			<FollowButton {...args} variant={'alphaville'} />
+		</div>
+		<div style={{ background: 'black', padding: '8px' }}>
+			<p style={{ color: 'white' }}> Monochrome </p>
+			<FollowButton {...args} variant={'monochrome'} />
+		</div>
 	</div>
 )
 
 _FollowButton.args = {
 	conceptNameAsButtonText: false,
 	isFollowed: false,
 	conceptName: 'UK politics & policy',
-	followPlusDigestEmail: true,
-	variant: 'standard'
-}
-_FollowButton.argTypes = {
-	variant: {
-		control: { type: 'select', options: ['standard', 'inverse', 'opinion', 'alphaville', 'monochrome'] }
-	}
+	followPlusDigestEmail: true
 }