@financial-times/dotcom-ui-header 11.0.1 → 11.0.3

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

@@ -42,6 +42,5 @@ const EditionsSwitcher = (editions) => {
         _b.map(({ name, id, url }) => (react_1.default.createElement("a", { key: id, className: "o-header__drawer-menu-link", href: `${url}?edition=${id}` }, name)))));
 };
 exports.EditionsSwitcher = EditionsSwitcher;
-const SubscribeButton = (action) => (react_1.default.createElement("div", { className: "o-header__drawer-actions" },
-    react_1.default.createElement("a", { className: "o-header__drawer-button", role: "button", href: action.url, "data-trackable": "subscribe-button" }, action.name)));
+const SubscribeButton = (action) => (react_1.default.createElement("a", { className: "o-header__drawer-button", role: "button", href: action.url, "data-trackable": "subscribe-button" }, action.name));
 exports.SubscribeButton = SubscribeButton;

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

@@ -14,12 +14,15 @@ const Drawer = (props) => {
     const subscribeAction = props.data.subscribeAction;
     const [primary, secondary, tertiary] = props.data.drawer.items;
     const user = props.userIsLoggedIn ? props.data.user : props.data.anon;
+    const showSubscribeButton = !props.userIsSubscribed && subscribeAction;
+    const showDrawerActions = props.showAskButton || showSubscribeButton;
     return (react_1.default.createElement("div", { className: "o-header__drawer", id: "o-header-drawer", role: "modal", "aria-label": "Drawer menu", "aria-modal": "true", "data-o-header-drawer": true, "data-o-header-drawer--no-js": true, "data-trackable": "drawer", "data-trackable-terminate": true },
         react_1.default.createElement("div", { className: "o-header__drawer-inner" },
             react_1.default.createElement(DrawerTools, Object.assign({}, editions)),
             react_1.default.createElement(Search, null),
-            props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { variant: "drawer", dataTrackable: "ask-ft-button-drawer", id: "ask-ft-button-drawer" })),
-            !props.userIsSubscribed && subscribeAction && react_1.default.createElement(additionalPartials_1.SubscribeButton, Object.assign({}, subscribeAction)),
+            showDrawerActions && (react_1.default.createElement("div", { className: "o-header__drawer-actions" },
+                props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { variant: "drawer", dataTrackable: "ask-ft-button-drawer", id: "ask-ft-button-drawer" })),
+                showSubscribeButton && subscribeAction && react_1.default.createElement(additionalPartials_1.SubscribeButton, Object.assign({}, subscribeAction)))),
             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,
                 secondary ? react_1.default.createElement(SectionSecondary, Object.assign({}, secondary)) : null,

package/dist/tsconfig.tsbuildinfo

@@ -212,12 +212,12 @@
         "affectsGlobalScope": false
       },
       "../src/components/drawer/additionalPartials.tsx": {
-        "version": "5ea50ec853d68d1f8b7f6067b19d773f71c16409231bf648a1caa0adbb897095",
+        "version": "5b1649b0dc6ece11b51fb0fc04404e71521b66bf30dade6b63e0345b5b015432",
         "signature": "4d2af22c877fa282f11402da8da4ccabca6e1c6515b03579caa84e44a3a56067",
         "affectsGlobalScope": false
       },
       "../src/components/drawer/topLevelPartials.tsx": {
-        "version": "2eb7036c49b2297a7afb7aca1dc20c6f8d5cd5ebbc4e17d811622320012efe4a",
+        "version": "c0f060328d36190f0107473ce85c0fd0463a2c04963f08606ae9bb78b0e17b3c",
         "signature": "9d1b0a09950f10403acbd59a85db578c3d6d0eec6d4fd6b26deacd7fc69b5bb4",
         "affectsGlobalScope": false
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "11.0.1",
+  "version": "11.0.3",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -22,8 +22,8 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^11.0.1",
-    "n-topic-search": "^8.0.2"
+    "@financial-times/dotcom-types-navigation": "^11.0.3",
+    "n-topic-search": "^8.0.3"
   },
   "devDependencies": {
     "@financial-times/logo-images": "^1.10.1",

package/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap

@@ -117,18 +117,18 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
         </label>
       </form>
     </div>
-    <a
-      className="o-header__ask-ft-button o-header__ask-ft-button--drawer"
-      data-trackable="ask-ft-button-drawer"
-      href="https://ask.ft.com"
-      id="ask-ft-button-drawer"
-      title="ASK FT"
-    >
-      Ask FT
-    </a>
     <div
       className="o-header__drawer-actions"
     >
+      <a
+        className="o-header__ask-ft-button o-header__ask-ft-button--drawer"
+        data-trackable="ask-ft-button-drawer"
+        href="https://ask.ft.com"
+        id="ask-ft-button-drawer"
+        title="ASK FT"
+      >
+        Ask FT
+      </a>
       <a
         className="o-header__drawer-button"
         data-trackable="subscribe-button"

package/src/components/drawer/additionalPartials.tsx

@@ -16,20 +16,23 @@ export const DrawerParentItem = ({ item, idSuffix }: TDrawerParentItemProps) =>
           className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--parent`}
           href={item.url ?? undefined}
           {...ariaSelected(item)}
-          data-trackable={item.label}>
+          data-trackable={item.label}
+        >
           {item.label}
         </a>
         <button
           className={`o-header__drawer-menu-toggle o-header__drawer-menu-toggle--${selected}`}
           aria-controls={`o-header-drawer-child-${idSuffix}`}
-          data-trackable={`sub-level-toggle | ${item.label}`}>
+          data-trackable={`sub-level-toggle | ${item.label}`}
+        >
           {`Show more ${item.label}`}
         </button>
       </div>
       <ul
         className="o-header__drawer-menu-list o-header__drawer-menu-list--child"
         id={`o-header-drawer-child-${idSuffix}`}
-        data-trackable="sub-level">
+        data-trackable="sub-level"
+      >
         {(item.submenu?.items as TNavMenuItem[]).map((item) => {
           const selected = item.selected ? 'selected' : 'unselected'
           return (
@@ -38,7 +41,8 @@ export const DrawerParentItem = ({ item, idSuffix }: TDrawerParentItemProps) =>
                 className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--child`}
                 href={item.url ?? undefined}
                 data-trackable={item.label}
-                {...ariaSelected(item)}>
+                {...ariaSelected(item)}
+              >
                 {item.label}
               </a>
             </li>
@@ -56,7 +60,8 @@ export const DrawerSingleItem = (item: TNavMenuItem) => {
       className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected}`}
       href={item.url ?? undefined}
       data-trackable={item.label}
-      {...ariaSelected(item)}>
+      {...ariaSelected(item)}
+    >
       {item.label}
     </a>
   )
@@ -69,34 +74,30 @@ export const DrawerSpecialItem = (item: TNavMenuItem) => {
       className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--secondary`}
       href={item.url ?? undefined}
       data-trackable={item.label}
-      {...ariaSelected(item)}>
+      {...ariaSelected(item)}
+    >
       {item.label}
     </a>
   )
 }
 
 export const EditionsSwitcher = (editions: TNavEditions) => (
-  <nav
-    className="o-header__drawer-menu o-header__drawer-edition-switcher"
-    aria-label="Edition switcher">
+  <nav className="o-header__drawer-menu o-header__drawer-edition-switcher" aria-label="Edition switcher">
     <span className="o-header__drawer-menu-item">Edition:</span>
     <span className="o-header__drawer-menu-item o-header__drawer-current-edition">
       {editions.current?.name}
     </span>
     <div className="o-header__drawer-divider"></div>
-    {editions.others?.map(({name, id, url}) => (
+    {editions.others?.map(({ name, id, url }) => (
       <a key={id} className="o-header__drawer-menu-link" href={`${url}?edition=${id}`}>
         {name}
       </a>
     ))}
   </nav>
-);
-
+)
 
 export const SubscribeButton = (action: TNavAction) => (
-  <div className="o-header__drawer-actions">
-    <a className="o-header__drawer-button" role="button" href={action.url} data-trackable="subscribe-button">
-      {action.name}
-    </a>
-  </div>
+  <a className="o-header__drawer-button" role="button" href={action.url} data-trackable="subscribe-button">
+    {action.name}
+  </a>
 )

package/src/components/drawer/topLevelPartials.tsx

@@ -17,6 +17,8 @@ const Drawer = (props: THeaderProps) => {
   const subscribeAction = props.data.subscribeAction
   const [primary, secondary, tertiary] = props.data.drawer.items
   const user = props.userIsLoggedIn ? props.data.user : props.data.anon
+  const showSubscribeButton = !props.userIsSubscribed && subscribeAction
+  const showDrawerActions = props.showAskButton || showSubscribeButton
 
   return (
     <div
@@ -33,10 +35,14 @@ const Drawer = (props: THeaderProps) => {
       <div className="o-header__drawer-inner">
         <DrawerTools {...editions} />
         <Search />
-        {props.showAskButton && (
-          <AskFtButton variant="drawer" dataTrackable="ask-ft-button-drawer" id="ask-ft-button-drawer" />
+        {showDrawerActions && (
+          <div className="o-header__drawer-actions">
+            {props.showAskButton && (
+              <AskFtButton variant="drawer" dataTrackable="ask-ft-button-drawer" id="ask-ft-button-drawer" />
+            )}
+            {showSubscribeButton && subscribeAction && <SubscribeButton {...subscribeAction} />}
+          </div>
         )}
-        {!props.userIsSubscribed && subscribeAction && <SubscribeButton {...subscribeAction} />}
         <nav className="o-header__drawer-menu o-header__drawer-menu--primary">
           {primary ? <SectionPrimary {...primary} /> : null}
           {secondary ? <SectionSecondary {...secondary} /> : null}