diff --git a/components/x-follow-button/package.json b/components/x-follow-button/package.json index 49fef8b7f..9cc0c9055 100644 --- a/components/x-follow-button/package.json +++ b/components/x-follow-button/package.json @@ -15,8 +15,11 @@ "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", @@ -24,8 +27,11 @@ "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" }, diff --git a/components/x-follow-button/src/FollowButton.jsx b/components/x-follow-button/src/FollowButton.jsx index dbfae5002..08e7cfca9 100644 --- a/components/x-follow-button/src/FollowButton.jsx +++ b/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) { diff --git a/components/x-follow-button/src/styles/components/FollowButton.scss b/components/x-follow-button/src/styles/components/FollowButton.scss index 0c766c643..819ed0e27 100644 --- a/components/x-follow-button/src/styles/components/FollowButton.scss +++ b/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); } } diff --git a/components/x-follow-button/src/styles/main.scss b/components/x-follow-button/src/styles/main.scss index 85079a596..0700e9263 100644 --- a/components/x-follow-button/src/styles/main.scss +++ b/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'; diff --git a/components/x-follow-button/src/styles/mixins/lozenge/_themes.scss b/components/x-follow-button/src/styles/mixins/lozenge/_themes.scss deleted file mode 100644 index b3598d930..000000000 --- a/components/x-follow-button/src/styles/mixins/lozenge/_themes.scss +++ /dev/null @@ -1,54 +0,0 @@ -$theme-map: null; - -$myft-lozenge-themes: ( - standard: ( - background: oColorsByName('claret'), - text: oColorsByName('white'), - highlight: oColorsByName('claret-50'), - pressed-highlight: rgba(oColorsByName('black'), 0.05), - disabled: rgba(oColorsByName('black'), 0.5), - focus-outline: oColorsByUsecase('focus', 'outline', $fallback: null) - ), - inverse: ( - background: oColorsByName('white'), - text: oColorsByName('claret'), - highlight: rgba(white, 0.8), - pressed-highlight: rgba(white, 0.2), - disabled: rgba(oColorsByName('white'), 0.5), - focus-outline: oColorsByName('white') - ), - opinion: ( - background: oColorsByName('oxford-40'), - text: oColorsByName('white'), - highlight: oColorsByName('oxford-30'), - pressed-highlight: rgba(oColorsByName('oxford-40'), 0.2), - disabled: rgba(oColorsByName('black'), 0.5), - focus-outline: oColorsByUsecase('focus', 'outline', $fallback: null) - ), - monochrome: ( - background: oColorsByName('white'), - text: oColorsByName('black'), - highlight: oColorsByName('white-80'), - 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) { - @return map-get($theme-map, $key); -} - -@mixin withTheme($theme) { - $theme-map: map-get($myft-lozenge-themes, $theme) !global; - - @content; -} diff --git a/components/x-follow-button/src/styles/mixins/lozenge/_toggle-icon.scss b/components/x-follow-button/src/styles/mixins/lozenge/_toggle-icon.scss deleted file mode 100644 index 302298c94..000000000 --- a/components/x-follow-button/src/styles/mixins/lozenge/_toggle-icon.scss +++ /dev/null @@ -1,43 +0,0 @@ -@mixin getIcon($name, $color) { - @include oIconsContent($icon-name: $name, $size: 10, $color: $color, $iconset-version: 1); - content: ''; -} - -@mixin plusIcon($color) { - @include getIcon('plus', $color); - background-size: 25px; - margin: 0 6px -1px 0; -} - -@mixin tickIcon($color) { - @include getIcon('tick', $color); - background-size: 21px; -} - -@mixin myftToggleIcon($theme: standard) { - @include withTheme($theme) { - &::before { - @include plusIcon(getThemeColor(background)); - } - - &[aria-pressed="true"] { - &::before { - @include tickIcon(getThemeColor(text)); - } - } - - &[disabled], - &[disabled]:hover { - background: transparent; - - &::before { - @include plusIcon(getThemeColor(disabled)); - opacity: 0.5; - } - - &[aria-pressed="true"]::before { - @include tickIcon(getThemeColor(disabled)); - } - } - } -} diff --git a/components/x-follow-button/src/styles/mixins/lozenge/main.scss b/components/x-follow-button/src/styles/mixins/lozenge/main.scss deleted file mode 100644 index 600bb0f51..000000000 --- a/components/x-follow-button/src/styles/mixins/lozenge/main.scss +++ /dev/null @@ -1,109 +0,0 @@ -@import './themes'; -@import './toggle-icon'; - -@mixin focusOutlineColor($focus-color) { - // Apply :focus styles as a fallback - // These styles will be applied to all browsers that don't use the polyfill, this includes browsers which support the feature natively. - body:not(.js-focus-visible) &, - html:not(.js-focus-visible) & { - // Standardise focus styles. - &:focus { - outline: 2px solid $focus-color; - } - } - - // When the focus-visible polyfill is applied `.js-focus-visible` is added to the html dom node - // (the body node in v4 of the 3rd party polyfill) - - // stylelint-disable-next-line selector-no-qualifying-type - body.js-focus-visible &, // stylelint-disable-next-line selector-no-qualifying-type - html.js-focus-visible & { - // Standardise focus styles. - // stylelint-disable-next-line selector-no-qualifying-type - &.focus-visible { - outline: 2px solid $focus-color; - } - // Disable browser default focus style. - // stylelint-disable-next-line selector-no-qualifying-type - &:focus:not(.focus-visible) { - outline: 0; - } - } - - // These styles will be ignored by browsers which do not recognise the :focus-visible selector (as per the third bullet point in https://www.w3.org/TR/selectors-3/#Conformance) - // If a browser supports :focus-visible we unset the :focus styles that were applied above - // (within the html:not(.js-focus-visible) block). - &:focus-visible, - body:not(.js-focus-visible) &:focus, - html:not(.js-focus-visible) &:focus { - outline: unset; - } - - // Styles given :focus-visible support. Extra selectors needed to match - // previous `:focus` selector specificity. - body:not(.js-focus-visible) &:focus-visible, - html:not(.js-focus-visible) &:focus-visible, - &:focus-visible { - outline: 2px solid $focus-color; - } -} - -@mixin myftLozengeTheme($theme: standard, $with-toggle-icon: false) { - @if $with-toggle-icon != false { - @include myftToggleIcon($theme); - } - - @include withTheme($theme) { - background-color: transparent; - border: 1px solid getThemeColor(background); - color: getThemeColor(background); - - @include focusOutlineColor(getThemeColor(focus-outline)); - - &:hover, - &:focus { - background-color: getThemeColor(pressed-highlight); - border-color: getThemeColor(background); - color: getThemeColor(background); - } - - &[aria-pressed='true'] { - background-color: getThemeColor(background); - border: 1px solid getThemeColor(background); - color: getThemeColor(text); - - &:hover, - &:focus { - background-color: getThemeColor(highlight); - border-color: getThemeColor(highlight); - color: getThemeColor(text); - } - } - - &[disabled]:hover, - &[disabled] { - background: transparent; - border: 1px solid getThemeColor(disabled); - color: getThemeColor(disabled); - } - } -} - -@mixin myftLozenge($theme: standard, $with-toggle-icon: false) { - @include myftLozengeTheme($theme, $with-toggle-icon); - @include oTypographySans($scale: -1, $weight: 'semibold'); - - border-radius: 100px; // Number that will be larger than any possible height, so that works for all possible button sizes - box-sizing: content-box; - display: block; - font-size: 14px; - margin: 6px 4px 6px 2px; - max-width: 200px; - outline-offset: 2px; - overflow: hidden; - padding: 5px 12px; - text-align: left; - text-overflow: ellipsis; - transition: border-color, background-color 0.5s ease; - white-space: nowrap; -} diff --git a/components/x-follow-button/storybook/index.jsx b/components/x-follow-button/storybook/index.jsx index 66e1d7375..cd52c7044 100644 --- a/components/x-follow-button/storybook/index.jsx +++ b/components/x-follow-button/storybook/index.jsx @@ -15,7 +15,26 @@ export default { export const _FollowButton = (args) => (
- +
+

Standard

+ +
+
+

Inverse

+ +
+
+

Opinion

+ +
+
+

Alphaville

+ +
+
+

Monochrome

+ +
) @@ -23,11 +42,5 @@ _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 }