@financial-times/dotcom-ui-header 9.3.4 → 9.4.0

package/README.md

@@ -76,6 +76,7 @@ All header components with the exception of `<LogoOnly />` 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 |
 
 

package/dist/node/components/ask-ft/askFtButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface AskFtButtonProps {
+    className: string;
+    dataTrackable: string;
+}
+export declare const AskFtButton: ({ className, dataTrackable }: AskFtButtonProps) => React.JSX.Element;

package/dist/node/components/ask-ft/askFtButton.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AskFtButton = void 0;
+const react_1 = __importDefault(require("react"));
+const AskFtButton = ({ className, dataTrackable }) => (react_1.default.createElement("a", { className: `ft-header__ask-ft-button ${className}`, "data-trackable": dataTrackable, href: "https://ask.ft.com", title: "ASK FT" },
+    react_1.default.createElement("span", { className: "ft-header__ask-ft-button-label" }, "Ask FT")));
+exports.AskFtButton = AskFtButton;

package/dist/node/components/drawer/topLevelPartials.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IncludeDrawer = void 0;
 const react_1 = __importDefault(require("react"));
 const additionalPartials_1 = require("./additionalPartials");
+const askFtButton_1 = require("../ask-ft/askFtButton");
 const IncludeDrawer = (props) => react_1.default.createElement(Drawer, Object.assign({}, props));
 exports.IncludeDrawer = IncludeDrawer;
 const Drawer = (props) => {
@@ -17,7 +18,7 @@ const Drawer = (props) => {
         react_1.default.createElement("div", { className: "o-header__drawer-inner" },
             react_1.default.createElement(DrawerTools, Object.assign({}, editions)),
             !props.userIsSubscribed && subscribeAction && react_1.default.createElement(additionalPartials_1.SubscribeButton, Object.assign({}, subscribeAction)),
-            react_1.default.createElement(Search, null),
+            react_1.default.createElement(Search, Object.assign({}, props)),
             react_1.default.createElement("nav", { className: "o-header__drawer-menu", "aria-label": "Edition switcher" }, editions && react_1.default.createElement(additionalPartials_1.EditionsSwitcher, Object.assign({}, editions))),
             react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--primary" },
                 primary ? react_1.default.createElement(SectionPrimary, Object.assign({}, primary)) : null,
@@ -31,14 +32,15 @@ const DrawerTools = (props) => (react_1.default.createElement("div", { className
     react_1.default.createElement("a", { className: "o-header__drawer-tools-logo", href: "/", "data-trackable": "logo" },
         react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Financial Times")),
     props.current && react_1.default.createElement("p", { className: "o-header__drawer-current-edition" }, `${props.current.name} Edition`)));
-const Search = () => (react_1.default.createElement("div", { className: "o-header__drawer-search" },
+const Search = (props) => (react_1.default.createElement("div", { className: "o-header__drawer-search" },
     react_1.default.createElement("form", { className: "o-header__drawer-search-form", action: "/search", role: "search", "aria-label": "Site search", "data-n-topic-search": true, "data-n-topic-search-categories": "concepts,equities", "data-n-topic-search-view-all": true },
         react_1.default.createElement("label", { className: "o-header__visually-hidden", htmlFor: "o-header-drawer-search-term" },
             "Search the ",
             react_1.default.createElement("abbr", { title: "Financial Times" }, "FT")),
         react_1.default.createElement("input", { className: "o-header__drawer-search-term", id: "o-header-drawer-search-term", name: "q", type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, placeholder: "Search the FT", "data-trackable": "search-term", "data-n-topic-search-input": true }),
         react_1.default.createElement("button", { className: "o-header__drawer-search-submit", type: "submit", "data-trackable": "search-submit" },
-            react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Search")))));
+            react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Search")),
+        props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__drawer-ask-ft-button", dataTrackable: "ask-ft-button-drawer" })))));
 const SectionPrimary = (props) => {
     var _a;
     const sectionId = props.label.toLowerCase().replace(' ', '-');

package/dist/node/components/sticky/partials.d.ts

@@ -4,7 +4,7 @@ declare const StickyHeaderWrapper: (props: THeaderProps & {
     children: React.ReactNode;
 }) => React.JSX.Element;
 declare const TopWrapperSticky: (props: any) => React.JSX.Element;
-declare const TopColumnLeftSticky: () => React.JSX.Element;
+declare const TopColumnLeftSticky: (props: Pick<THeaderProps, 'showAskButton'>) => React.JSX.Element;
 declare const TopColumnCenterSticky: (props: THeaderProps) => React.JSX.Element;
 declare const TopColumnRightSticky: (props: THeaderProps) => React.JSX.Element;
 export { StickyHeaderWrapper, TopWrapperSticky, TopColumnLeftSticky, TopColumnCenterSticky, TopColumnRightSticky };

package/dist/node/components/sticky/partials.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopColumnRightSticky = exports.TopColumnCenterSticky = exports.TopColumnLeftSticky = exports.TopWrapperSticky = exports.StickyHeaderWrapper = void 0;
 const react_1 = __importDefault(require("react"));
 const partials_1 = require("../top/partials");
+const askFtButton_1 = require("../ask-ft/askFtButton");
 const StickyHeaderWrapper = (props) => (react_1.default.createElement("header", { className: `o-header o-header--simple o-header--sticky o--if-js`, "data-o-component": "o-header", "data-o-header--sticky": true, "aria-hidden": "true" }, props.children));
 exports.StickyHeaderWrapper = StickyHeaderWrapper;
 const DrawerIconSticky = () => (react_1.default.createElement("a", { href: "#", className: "o-header__top-icon-link o-header__top-icon-link--menu", "aria-controls": "o-header-drawer", "data-trackable": "drawer-toggle", tabIndex: -1 },
@@ -37,10 +38,11 @@ const TopWrapperSticky = (props) => (react_1.default.createElement("div", { clas
     react_1.default.createElement("div", { className: "o-header__container" },
         react_1.default.createElement("div", { className: "o-header__top-wrapper" }, props.children))));
 exports.TopWrapperSticky = TopWrapperSticky;
-const TopColumnLeftSticky = () => {
+const TopColumnLeftSticky = (props) => {
     return (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--left" },
         react_1.default.createElement(DrawerIconSticky, null),
-        react_1.default.createElement(SearchIconSticky, null)));
+        react_1.default.createElement(SearchIconSticky, null),
+        props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__top-ask-ft-button", dataTrackable: "ask-ft-button-sticky" }))));
 };
 exports.TopColumnLeftSticky = TopColumnLeftSticky;
 const TopColumnCenterSticky = (props) => {

package/dist/node/components/top/partials.d.ts

@@ -3,7 +3,7 @@ import { THeaderProps } from '../../interfaces';
 import { TNavMenuItem } from '@financial-times/dotcom-types-navigation';
 declare const HeaderWrapper: (props: any) => React.JSX.Element;
 declare const TopWrapper: (props: any) => React.JSX.Element;
-declare const TopColumnLeft: () => React.JSX.Element;
+declare const TopColumnLeft: (props: Pick<THeaderProps, 'showAskButton'>) => React.JSX.Element;
 declare const TopColumnCenter: () => React.JSX.Element;
 declare const TopColumnCenterNoLink: () => React.JSX.Element;
 declare const SignInLink: ({ item, variant, className }: {

package/dist/node/components/top/partials.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SignInLink = exports.SubscribeButton = exports.TopColumnRightAnon = exports.TopColumnRight = exports.TopColumnCenterNoLink = exports.TopColumnCenter = exports.TopColumnLeft = exports.TopWrapper = exports.HeaderWrapper = void 0;
 const react_1 = __importDefault(require("react"));
 const BrandFtMasthead_1 = __importDefault(require("../svg-components/BrandFtMasthead"));
+const askFtButton_1 = require("../ask-ft/askFtButton");
 const HeaderWrapper = (props) => (react_1.default.createElement("header", { id: "site-navigation", className: `o-header o-header--${props.variant || 'simple'}`, "data-o-component": "o-header", "data-o-header--no-js": true, tabIndex: -1 }, props.children));
 exports.HeaderWrapper = HeaderWrapper;
 const DrawerIcon = () => (react_1.default.createElement("a", { href: "#o-header-drawer", className: "o-header__top-icon-link o-header__top-icon-link--menu", "aria-controls": "o-header-drawer", title: "Open side navigation menu", "data-trackable": "drawer-toggle" },
@@ -37,9 +38,10 @@ const TopWrapper = (props) => (react_1.default.createElement("div", { className:
     react_1.default.createElement("div", { className: "o-header__container" },
         react_1.default.createElement("div", { className: "o-header__top-wrapper" }, props.children))));
 exports.TopWrapper = TopWrapper;
-const TopColumnLeft = () => (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--left" },
+const TopColumnLeft = (props) => (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--left" },
     react_1.default.createElement(DrawerIcon, null),
-    react_1.default.createElement(SearchIcon, null)));
+    react_1.default.createElement(SearchIcon, null),
+    props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__top-ask-ft-button", dataTrackable: "ask-ft-button-header" }))));
 exports.TopColumnLeft = TopColumnLeft;
 const TopColumnCenter = () => (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--center" },
     react_1.default.createElement("a", { className: "o-header__top-logo", style: { backgroundImage: 'none' }, "data-trackable": "logo", href: "/", title: "Go to Financial Times homepage" },

package/dist/node/index.d.ts

@@ -12,6 +12,7 @@ declare namespace MainHeader {
         showUserNavigation?: boolean | undefined;
         showStickyHeader?: boolean | undefined;
         showMegaNav?: boolean | undefined;
+        showAskButton?: boolean | undefined;
         experimentalAccountEntryTest?: boolean | undefined;
     };
 }

package/dist/node/index.js

@@ -17,7 +17,8 @@ const defaultProps = {
     userIsAnonymous: true,
     userIsLoggedIn: false,
     showStickyHeader: true,
-    showMegaNav: true
+    showMegaNav: true,
+    showAskButton: false
 };
 function MainHeader(props) {
     const includeUserActionsNav = props.showUserNavigation && !props.userIsLoggedIn;
@@ -25,7 +26,7 @@ function MainHeader(props) {
     return (react_1.default.createElement(partials_1.HeaderWrapper, Object.assign({}, props),
         includeUserActionsNav ? react_1.default.createElement(partials_2.UserActionsNav, Object.assign({}, props)) : null,
         react_1.default.createElement(partials_1.TopWrapper, null,
-            react_1.default.createElement(partials_1.TopColumnLeft, null),
+            react_1.default.createElement(partials_1.TopColumnLeft, Object.assign({}, props)),
             props.showLogoLink ? react_1.default.createElement(partials_1.TopColumnCenter, null) : react_1.default.createElement(partials_1.TopColumnCenterNoLink, null),
             react_1.default.createElement(partials_1.TopColumnRight, Object.assign({}, props))),
         react_1.default.createElement(partials_5.Search, { instance: "primary" }),
@@ -40,7 +41,7 @@ MainHeader.defaultProps = { ...defaultProps, showLogoLink: true };
 function StickyHeader(props) {
     return props.showStickyHeader ? (react_1.default.createElement(partials_3.StickyHeaderWrapper, Object.assign({}, props),
         react_1.default.createElement(partials_3.TopWrapperSticky, null,
-            react_1.default.createElement(partials_3.TopColumnLeftSticky, null),
+            react_1.default.createElement(partials_3.TopColumnLeftSticky, Object.assign({}, props)),
             react_1.default.createElement(partials_3.TopColumnCenterSticky, Object.assign({}, props)),
             react_1.default.createElement(partials_3.TopColumnRightSticky, Object.assign({}, props))),
         react_1.default.createElement(partials_5.Search, { instance: "sticky" }))) : null;

package/dist/tsconfig.tsbuildinfo

@@ -172,8 +172,8 @@
         "affectsGlobalScope": false
       },
       "../src/interfaces.d.ts": {
-        "version": "c76ad9342fa432157cdfb6b7bb9f7b5be28c41e445a03c48a4b51789f0253def",
-        "signature": "c76ad9342fa432157cdfb6b7bb9f7b5be28c41e445a03c48a4b51789f0253def",
+        "version": "70f3e895f97f22b3db1daf03c0ceb1805eb8ee437a00a715afb4c2b7580cb722",
+        "signature": "70f3e895f97f22b3db1daf03c0ceb1805eb8ee437a00a715afb4c2b7580cb722",
         "affectsGlobalScope": false
       },
       "../src/components/svg-components/BrandFtMasthead.tsx": {
@@ -181,9 +181,14 @@
         "signature": "9d8d05b4e7f09ae6f6e59780e0717c60f7ec779c4173e07bfb9a82654fd87bbc",
         "affectsGlobalScope": false
       },
+      "../src/components/ask-ft/askFtButton.tsx": {
+        "version": "8c8444f554f26ea6fbcea191e5532a37264d95cd3faea27930dfefbe34242b00",
+        "signature": "5ddb1285819df48e1e0f886a1721f76d4ac406a582ccea39dfa824942139fcc6",
+        "affectsGlobalScope": false
+      },
       "../src/components/top/partials.tsx": {
-        "version": "48aed39291b9dea7e0ad0fefc77be347113dd8e8f7da4413759358aa229bf526",
-        "signature": "78ae2b5202a854b8786a4b7797efaf5fdf7a16b22aca84a7125819ea87c66b33",
+        "version": "732b60d9df8503d55336544446f02ef622fe85ce096733dcab25f593324195e4",
+        "signature": "d0d54633228c5569ef99ff2a2dce45f2e9e0e946ed5ef4b4833221516529e8d9",
         "affectsGlobalScope": false
       },
       "../src/utils.ts": {
@@ -197,8 +202,8 @@
         "affectsGlobalScope": false
       },
       "../src/components/sticky/partials.tsx": {
-        "version": "48ac973f374d580296150e16e99c89dfc3717b11dd52080ec6cc309a740829c7",
-        "signature": "3ae5cdea1f27c034b37eb086833fbd2d884957f4583cbca55dced760b9d08342",
+        "version": "825880195fd7a94976e8b9b21f148216751251b44dc353117160e6b96893e45d",
+        "signature": "8fbeb8e68c5be0e2f41a60731bb91f6c54327ecca0d18857c3feeaa06e1cd389",
         "affectsGlobalScope": false
       },
       "../src/components/sub-navigation/partials.tsx": {
@@ -212,7 +217,7 @@
         "affectsGlobalScope": false
       },
       "../src/components/drawer/topLevelPartials.tsx": {
-        "version": "5c5f962d064831ebc87f657fdafa296f2257839f0232c5decedc3c98f34ee01f",
+        "version": "9063a811aade637b6a310b720b71da54f05fedbc12da6f90e934a183941ee44c",
         "signature": "9d1b0a09950f10403acbd59a85db578c3d6d0eec6d4fd6b26deacd7fc69b5bb4",
         "affectsGlobalScope": false
       },
@@ -222,8 +227,8 @@
         "affectsGlobalScope": false
       },
       "../src/index.tsx": {
-        "version": "f076cad62acf3ca2bca2348a445aeef886e7c0db4ae610eafba754942df1fbec",
-        "signature": "2e662fa1dc23c31831c88aad3a02c5d1a4bda33d8f7a929735a57f715b525a0f",
+        "version": "1590223c256c5d68b425be24b35676fdefdb9460dac8c04b7e6fbe4c9ce82477",
+        "signature": "c48821858a0ef93b2790d21732b882cb1817ffa6fa4dce5f09099846929bab4a",
         "affectsGlobalScope": false
       },
       "../../../node_modules/@types/aria-query/index.d.ts": {
@@ -1882,6 +1887,9 @@
       "../../../node_modules/pretty-format/build/index.d.ts": [
         "../../../node_modules/pretty-format/build/types.d.ts"
       ],
+      "../src/components/ask-ft/askFtButton.tsx": [
+        "../../../node_modules/@types/react/index.d.ts"
+      ],
       "../src/components/drawer/additionalPartials.tsx": [
         "../../../node_modules/@types/react/index.d.ts",
         "../../dotcom-types-navigation/index.d.ts",
@@ -1890,6 +1898,7 @@
       "../src/components/drawer/topLevelPartials.tsx": [
         "../../../node_modules/@types/react/index.d.ts",
         "../../dotcom-types-navigation/index.d.ts",
+        "../src/components/ask-ft/askFtButton.tsx",
         "../src/components/drawer/additionalPartials.tsx",
         "../src/interfaces.d.ts"
       ],
@@ -1904,6 +1913,7 @@
       ],
       "../src/components/sticky/partials.tsx": [
         "../../../node_modules/@types/react/index.d.ts",
+        "../src/components/ask-ft/askFtButton.tsx",
         "../src/components/top/partials.tsx",
         "../src/interfaces.d.ts"
       ],
@@ -1919,6 +1929,7 @@
       "../src/components/top/partials.tsx": [
         "../../../node_modules/@types/react/index.d.ts",
         "../../dotcom-types-navigation/index.d.ts",
+        "../src/components/ask-ft/askFtButton.tsx",
         "../src/components/svg-components/BrandFtMasthead.tsx",
         "../src/interfaces.d.ts"
       ],
@@ -2687,6 +2698,9 @@
       "../../../node_modules/pretty-format/build/index.d.ts": [
         "../../../node_modules/pretty-format/build/types.d.ts"
       ],
+      "../src/components/ask-ft/askFtButton.tsx": [
+        "../../../node_modules/@types/react/index.d.ts"
+      ],
       "../src/components/drawer/additionalPartials.tsx": [
         "../../../node_modules/@types/react/index.d.ts",
         "../../dotcom-types-navigation/index.d.ts"
@@ -2939,6 +2953,7 @@
       "../../../node_modules/typescript/lib/lib.es5.d.ts",
       "../../../node_modules/typescript/lib/lib.esnext.intl.d.ts",
       "../../dotcom-types-navigation/index.d.ts",
+      "../src/components/ask-ft/askFtButton.tsx",
       "../src/components/drawer/additionalPartials.tsx",
       "../src/components/drawer/topLevelPartials.tsx",
       "../src/components/navigation/partials.tsx",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "9.3.4",
+  "version": "9.4.0",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -22,7 +22,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^9.3.4",
+    "@financial-times/dotcom-types-navigation": "^9.4.0",
     "n-topic-search": "^4.0.0"
   },
   "devDependencies": {

package/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: {

package/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(<Subject {...propsLoggedIn} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  it('renders ASK FT button', () => {
+    const tree = renderer.create(<Subject {...propsAskFt} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })

package/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(<Subject {...propsRightAligned} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  it('renders ASK FT button', () => {
+    const tree = renderer.create(<Subject {...propsAskFt} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })

package/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(<Subject {...propsLoggedIn} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  it('renders ASK FT button', () => {
+    const tree = renderer.create(<Subject {...propsAskFt} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })