Merge pull request #1060 from Financial-Times/fix-ask-ft-drawer-padding

fix (dotcom-ui-header): fix Ask FT button padding in the drawer
Financial-Times · Sep 10, 2024 · d16cf5b · d16cf5b
2 parents 64c0693 + ec3ecb6
commit d16cf5b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 29 deletions.
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
@@ -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"

diff --git a/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx b/packages/dotcom-ui-header/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>
 )
diff --git a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx b/packages/dotcom-ui-header/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}