From 8ba264800a98c97041f30cbaa1b77fd0a7884393 Mon Sep 17 00:00:00 2001 From: Ventzy Date: Mon, 15 Apr 2024 11:14:11 +0300 Subject: [PATCH 1/6] Add ASK FT button --- packages/dotcom-ui-header/README.md | 1 + .../src/__stories__/story.tsx | 15 ++++--- .../src/components/ask-ft/askFtButton.tsx | 17 ++++++++ .../components/drawer/topLevelPartials.tsx | 8 +++- .../src/components/top/partials.tsx | 6 ++- packages/dotcom-ui-header/src/header.scss | 39 ++++++++++++++++++- packages/dotcom-ui-header/src/index.tsx | 5 ++- packages/dotcom-ui-header/src/interfaces.d.ts | 1 + 8 files changed, 81 insertions(+), 11 deletions(-) create mode 100644 packages/dotcom-ui-header/src/components/ask-ft/askFtButton.tsx 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..54c983034 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) => ( diff --git a/packages/dotcom-ui-header/src/components/ask-ft/askFtButton.tsx b/packages/dotcom-ui-header/src/components/ask-ft/askFtButton.tsx new file mode 100644 index 000000000..7cfe0e90b --- /dev/null +++ b/packages/dotcom-ui-header/src/components/ask-ft/askFtButton.tsx @@ -0,0 +1,17 @@ +import React from 'react' + +export interface AskFtButtonProps { + className: string + dataTrackable: string +} + +export const AskFtButton = ({ className, dataTrackable }: AskFtButtonProps) => ( + + Ask FT + +) diff --git a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx b/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx index a6a8ec2f4..549f1922c 100644 --- a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx +++ b/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx @@ -8,6 +8,7 @@ import { } from './additionalPartials' import { THeaderProps } from '../../interfaces' import { TNavMenuItem, TNavMenu, TNavEditions } from '@financial-times/dotcom-types-navigation' +import { AskFtButton } from '../ask-ft/askFtButton' const IncludeDrawer = (props) => @@ -32,7 +33,7 @@ const Drawer = (props: THeaderProps) => {
{!props.userIsSubscribed && subscribeAction && } - + @@ -65,7 +66,7 @@ const DrawerTools = (props: TNavEditions) => (
) -const Search = () => ( +const Search = (props: Pick) => (
( + {props.showAskButton && ( + + )}
) 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..fe77cb862 100644 --- a/packages/dotcom-ui-header/src/header.scss +++ b/packages/dotcom-ui-header/src/header.scss @@ -62,4 +62,41 @@ $size: 32 ); vertical-align: middle; -} \ No newline at end of file +} + +.o-header__drawer-search-term { + min-width: 120px; +} + +.ask-ft-button { + @include oTypographySans(-1, $weight: 'semibold'); + color: oColorsByName('ft-grey'); + background-color: oColorsMix('black', 'paper', 5); + border-radius: 4px; + padding-right: 8px; + line-height: 32px; + 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: middle; + } +} + +.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..c86e0abc1 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 ? : } 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 From d4116f0db75230468cafa8ecc354ff40d4d62138 Mon Sep 17 00:00:00 2001 From: Ventzy Date: Fri, 19 Apr 2024 16:39:42 +0300 Subject: [PATCH 2/6] Add ask button in header sticky bar --- packages/dotcom-ui-header/src/__stories__/story.tsx | 3 ++- .../src/components/sticky/partials.tsx | 12 ++++++------ packages/dotcom-ui-header/src/index.tsx | 2 +- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/dotcom-ui-header/src/__stories__/story.tsx b/packages/dotcom-ui-header/src/__stories__/story.tsx index 54c983034..982ebdf86 100644 --- a/packages/dotcom-ui-header/src/__stories__/story.tsx +++ b/packages/dotcom-ui-header/src/__stories__/story.tsx @@ -153,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/components/sticky/partials.tsx b/packages/dotcom-ui-header/src/components/sticky/partials.tsx index e8e1920e8..44fc44274 100644 --- a/packages/dotcom-ui-header/src/components/sticky/partials.tsx +++ b/packages/dotcom-ui-header/src/components/sticky/partials.tsx @@ -4,6 +4,7 @@ import React from 'react' import { SubscribeButton, SignInLink } from '../top/partials' import { THeaderProps } from '../../interfaces' +import { AskFtButton } from '../ask-ft/askFtButton' const StickyHeaderWrapper = (props: THeaderProps & { children: React.ReactNode }) => (
( ) -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/index.tsx b/packages/dotcom-ui-header/src/index.tsx index c86e0abc1..f3281ceaf 100644 --- a/packages/dotcom-ui-header/src/index.tsx +++ b/packages/dotcom-ui-header/src/index.tsx @@ -66,7 +66,7 @@ function StickyHeader(props: THeaderProps) { return props.showStickyHeader ? ( - + From 4cb39e46ea94fcf4cc0b57322b85fa5a9b5a97a8 Mon Sep 17 00:00:00 2001 From: Ventzy Date: Mon, 22 Apr 2024 13:05:37 +0300 Subject: [PATCH 3/6] Add snapshot tests --- .../src/__test__/components/Drawer.spec.tsx | 6 + .../__test__/components/MainHeader.spec.tsx | 6 + .../__test__/components/StickyHeader.spec.tsx | 6 + .../__snapshots__/Drawer.spec.tsx.snap | 1372 ++++++++++++ .../__snapshots__/MainHeader.spec.tsx.snap | 1856 +++++++++++++++++ .../__snapshots__/StickyHeader.spec.tsx.snap | 313 +++ 6 files changed, 3559 insertions(+) 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..dba01f8c3 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 with 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..77b768cfd 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 with 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..83b07d80e 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,1377 @@ // 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`] = `
`; + +exports[`dotcom-ui-header/src/components/MainHeader renders with ASK FT button 1`] = ` + +`; diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap index 8c38426b4..8694b4585 100644 --- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap +++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap @@ -587,3 +587,316 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
`; + +exports[`dotcom-ui-header/src/components/StickyHeader renders with ASK FT button 1`] = ` + +`; From 209c06b6b30f31e360e931556739009add3e2fcf Mon Sep 17 00:00:00 2001 From: Ventzy Date: Mon, 22 Apr 2024 13:21:37 +0300 Subject: [PATCH 4/6] Update ASK FT button class name --- .../__test__/components/MainHeader.spec.tsx | 2 +- .../__test__/components/StickyHeader.spec.tsx | 2 +- .../__snapshots__/Drawer.spec.tsx.snap | 2 +- .../__snapshots__/MainHeader.spec.tsx.snap | 128 +++++++++--------- .../__snapshots__/StickyHeader.spec.tsx.snap | 70 +++++----- .../src/components/ask-ft/askFtButton.tsx | 2 +- packages/dotcom-ui-header/src/header.scss | 2 +- 7 files changed, 104 insertions(+), 104 deletions(-) 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 dba01f8c3..45989d419 100644 --- a/packages/dotcom-ui-header/src/__test__/components/MainHeader.spec.tsx +++ b/packages/dotcom-ui-header/src/__test__/components/MainHeader.spec.tsx @@ -25,7 +25,7 @@ describe('dotcom-ui-header/src/components/MainHeader', () => { expect(tree).toMatchSnapshot() }) - it('renders with ASK FT button', () => { + 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 77b768cfd..1c4d20c5d 100644 --- a/packages/dotcom-ui-header/src/__test__/components/StickyHeader.spec.tsx +++ b/packages/dotcom-ui-header/src/__test__/components/StickyHeader.spec.tsx @@ -18,7 +18,7 @@ describe('dotcom-ui-header/src/components/StickyHeader', () => { expect(tree).toMatchSnapshot() }) - it('renders with ASK FT button', () => { + 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 83b07d80e..ea67b1ef4 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 @@ -108,7 +108,7 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = ` + + Ask FT +
+
  • + + World + +
  • - Settings & Account + UK
    • @@ -1786,10 +1805,10 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn > - Personal Details + UK Business & Economy
  • - Licence + UK Politics & Policy
    • - - @@ -1843,7 +1856,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn `; -exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user 1`] = ` +exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subnav 1`] = `
    -
  • - - World - -
  • - UK + Settings & Account
    • @@ -3640,10 +3642,10 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user > - UK Business & Economy + Personal Details
  • - UK Politics & Policy + Licence
    • + + @@ -3691,7 +3699,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
    `; -exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user 1`] = ` +exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user 1`] = `
    Subscribe - - Sign In - `; -exports[`dotcom-ui-header/src/components/MainHeader renders with ASK FT button 1`] = ` +exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user 1`] = `
    - - Ask FT -
    `; -exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous user 1`] = ` +exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in user 1`] = `
    @@ -588,7 +618,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us `; -exports[`dotcom-ui-header/src/components/StickyHeader renders with ASK FT button 1`] = ` +exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous user 1`] = `