diff --git a/packages/dotcom-ui-header/README.md b/packages/dotcom-ui-header/README.md index 2cdf38ecb..937f1cf3c 100644 --- a/packages/dotcom-ui-header/README.md +++ b/packages/dotcom-ui-header/README.md @@ -76,6 +76,7 @@ All header components with the exception of `` require the following | showSubNavigation | boolean | true | true | Show the sub-navigation component which may include the crumbtrail | | showStickyHeader | boolean | true | true | Enable rendering of the sticky header component | | showMegaNav | boolean | true | true | Enable rendering of the drop-down "mega-nav" | +| showAskButton | boolean | true | false | Enable rendering of the ASK button | | data | object | false | | Navigation data for rendering the header links fetched from the navigation API | diff --git a/packages/dotcom-ui-header/src/__stories__/story.tsx b/packages/dotcom-ui-header/src/__stories__/story.tsx index 9f3f8108a..982ebdf86 100644 --- a/packages/dotcom-ui-header/src/__stories__/story.tsx +++ b/packages/dotcom-ui-header/src/__stories__/story.tsx @@ -52,7 +52,8 @@ DefaultHeaderWithDrawer.args = { showUserNavigation: true, userIsLoggedIn: false, userIsSubscribed: false, - showLogoLink: false + showLogoLink: false, + showAskButton: false } export const DefaultHeaderWithDrawerEntryTestAnon = (args) => ( @@ -72,7 +73,8 @@ DefaultHeaderWithDrawerEntryTestAnon.args = { userIsLoggedIn: false, userIsSubscribed: false, showLogoLink: false, - experimentalAccountEntryTest: true + experimentalAccountEntryTest: true, + showAskButton: false } export const DefaultHeaderWithDrawerEntryTest = (args) => ( @@ -92,7 +94,8 @@ DefaultHeaderWithDrawerEntryTest.args = { userIsLoggedIn: true, userIsSubscribed: false, showLogoLink: false, - experimentalAccountEntryTest: true + experimentalAccountEntryTest: true, + showAskButton: false } export const DefaultHeaderWithRightAlignedSubnav = (args) => ( @@ -110,7 +113,8 @@ DefaultHeaderWithRightAlignedSubnav.args = { showMegaNav: true, showUserNavigation: true, userIsLoggedIn: true, - showLogoLink: false + showLogoLink: false, + showAskButton: false } export const LargeHeaderWithDrawer = (args) => ( @@ -131,7 +135,8 @@ LargeHeaderWithDrawer.args = { showMegaNav: true, showUserNavigation: true, userIsLoggedIn: false, - variant: 'large-logo' + variant: 'large-logo', + showAskButton: false } export const _StickyHeader = (args) => ( @@ -148,7 +153,8 @@ _StickyHeader.args = { showUserNavigation: true, userIsLoggedIn: false, userIsSubscribed: false, - showStickyHeader: false + showStickyHeader: false, + showAskButton: false } _StickyHeader.argTypes = { currentPath: { diff --git a/packages/dotcom-ui-header/src/__test__/components/Drawer.spec.tsx b/packages/dotcom-ui-header/src/__test__/components/Drawer.spec.tsx index 7d7db8b53..ec6208708 100644 --- a/packages/dotcom-ui-header/src/__test__/components/Drawer.spec.tsx +++ b/packages/dotcom-ui-header/src/__test__/components/Drawer.spec.tsx @@ -5,6 +5,7 @@ import { Drawer as Subject } from '../../index' const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false } const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true } +const propsAskFt = { ...fixture, showAskButton: true } describe('dotcom-ui-header/src/components/Drawer', () => { it('renders as an anonymous user', () => { @@ -16,4 +17,9 @@ describe('dotcom-ui-header/src/components/Drawer', () => { const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() }) + + it('renders ASK FT button', () => { + const tree = renderer.create().toJSON() + expect(tree).toMatchSnapshot() + }) }) diff --git a/packages/dotcom-ui-header/src/__test__/components/MainHeader.spec.tsx b/packages/dotcom-ui-header/src/__test__/components/MainHeader.spec.tsx index 3d274d1f5..45989d419 100644 --- a/packages/dotcom-ui-header/src/__test__/components/MainHeader.spec.tsx +++ b/packages/dotcom-ui-header/src/__test__/components/MainHeader.spec.tsx @@ -7,6 +7,7 @@ import { MainHeader as Subject } from '../../index' const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false } const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true } const propsRightAligned = { ...profileFixture } +const propsAskFt = { ...fixture, showAskButton: true } describe('dotcom-ui-header/src/components/MainHeader', () => { it('renders as an anonymous user', () => { @@ -23,4 +24,9 @@ describe('dotcom-ui-header/src/components/MainHeader', () => { const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() }) + + it('renders ASK FT button', () => { + const tree = renderer.create().toJSON() + expect(tree).toMatchSnapshot() + }) }) diff --git a/packages/dotcom-ui-header/src/__test__/components/StickyHeader.spec.tsx b/packages/dotcom-ui-header/src/__test__/components/StickyHeader.spec.tsx index 7c4677ee2..1c4d20c5d 100644 --- a/packages/dotcom-ui-header/src/__test__/components/StickyHeader.spec.tsx +++ b/packages/dotcom-ui-header/src/__test__/components/StickyHeader.spec.tsx @@ -5,6 +5,7 @@ import { StickyHeader as Subject } from '../../index' const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false } const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true } +const propsAskFt = { ...fixture, showAskButton: true } describe('dotcom-ui-header/src/components/StickyHeader', () => { it('renders as an anonymous user', () => { @@ -16,4 +17,9 @@ describe('dotcom-ui-header/src/components/StickyHeader', () => { const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() }) + + it('renders ASK FT button', () => { + const tree = renderer.create().toJSON() + expect(tree).toMatchSnapshot() + }) }) diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap index 56241215f..cc900f964 100644 --- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap +++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap @@ -1,5 +1,1381 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = ` +
+
+
+ + + + Financial Times + + +

+ UK Edition +

+
+ +
+
+ + + + + + Ask FT + + +
+
+ + + +
+
+`; + exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`] = ` ) -const TopColumnLeftSticky = () => { +const TopColumnLeftSticky = (props: Pick) => { return (
+ {props.showAskButton && ( + + )}
) } @@ -129,11 +133,7 @@ const NavListRightLoggedInSticky = (props: THeaderProps) => { return ( {!props.userIsSubscribed && subscribeAction && ( - + )} diff --git a/packages/dotcom-ui-header/src/components/top/partials.tsx b/packages/dotcom-ui-header/src/components/top/partials.tsx index bbc8a4d1a..69470e320 100644 --- a/packages/dotcom-ui-header/src/components/top/partials.tsx +++ b/packages/dotcom-ui-header/src/components/top/partials.tsx @@ -2,6 +2,7 @@ import React from 'react' import { THeaderProps } from '../../interfaces' import BrandFtMastheadSvg from '../svg-components/BrandFtMasthead' import { TNavMenuItem } from '@financial-times/dotcom-types-navigation' +import { AskFtButton } from '../ask-ft/askFtButton' const HeaderWrapper = (props) => (
( ) -const TopColumnLeft = () => ( +const TopColumnLeft = (props: Pick) => (
+ {props.showAskButton && ( + + )}
) diff --git a/packages/dotcom-ui-header/src/header.scss b/packages/dotcom-ui-header/src/header.scss index ad20a4047..21a278c2f 100644 --- a/packages/dotcom-ui-header/src/header.scss +++ b/packages/dotcom-ui-header/src/header.scss @@ -62,4 +62,46 @@ $size: 32 ); vertical-align: middle; -} \ No newline at end of file +} + +.o-header__drawer-search-term { + width: 100%; +} + +.ft-header__ask-ft-button { + @include oTypographySans(-1, $weight: 'semibold'); + color: oColorsByName('ft-grey'); + background-color: oColorsMix('black', 'paper', 5); + border-radius: 4px; + padding-right: 8px; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + + &::before { + content: ''; + display: block; + @include oIconsContent( + $icon-name: 'sparkles', + $color: oColorsByName('black'), + $size: 32 + ); + vertical-align: top; + } + + .ft-header__ask-ft-button-label { + display: inline-block; + padding: 8px 0; + line-height: 15px; + } +} + +.ft-header__top-ask-ft-button { + @include oGridRespondTo($until: 'L') { + display: none; + } +} + +.ft-header__drawer-ask-ft-button { + margin-left: 16px; +} diff --git a/packages/dotcom-ui-header/src/index.tsx b/packages/dotcom-ui-header/src/index.tsx index 1b67d0f85..f3281ceaf 100644 --- a/packages/dotcom-ui-header/src/index.tsx +++ b/packages/dotcom-ui-header/src/index.tsx @@ -33,7 +33,8 @@ const defaultProps: Partial = { userIsAnonymous: true, userIsLoggedIn: false, showStickyHeader: true, - showMegaNav: true + showMegaNav: true, + showAskButton: false } function MainHeader(props: THeaderProps) { @@ -44,7 +45,7 @@ function MainHeader(props: THeaderProps) { {includeUserActionsNav ? : null} - + {props.showLogoLink ? : } @@ -65,7 +66,7 @@ function StickyHeader(props: THeaderProps) { return props.showStickyHeader ? ( - + diff --git a/packages/dotcom-ui-header/src/interfaces.d.ts b/packages/dotcom-ui-header/src/interfaces.d.ts index 08d745707..40a1ac7ea 100644 --- a/packages/dotcom-ui-header/src/interfaces.d.ts +++ b/packages/dotcom-ui-header/src/interfaces.d.ts @@ -10,6 +10,7 @@ export type THeaderOptions = { showStickyHeader?: boolean showMegaNav?: boolean showLogoLink?: boolean + showAskButton?: boolean /* * experimentalAccountEntryTest is an experimental feature switch * This is being run as an AB test and should be removed afterwards