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

package/src/header.scss

@@ -62,4 +62,46 @@
 		$size: 32
 	);
   vertical-align: middle;
-}
+}
+
+.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;
+}

package/src/index.tsx

@@ -33,7 +33,8 @@ const defaultProps: Partial<THeaderOptions> = {
   userIsAnonymous: true,
   userIsLoggedIn: false,
   showStickyHeader: true,
-  showMegaNav: true
+  showMegaNav: true,
+  showAskButton: false
 }
 
 function MainHeader(props: THeaderProps) {
@@ -44,7 +45,7 @@ function MainHeader(props: THeaderProps) {
     <HeaderWrapper {...props}>
       {includeUserActionsNav ? <UserActionsNav {...props} /> : null}
       <TopWrapper>
-        <TopColumnLeft />
+        <TopColumnLeft {...props} />
         {props.showLogoLink ? <TopColumnCenter /> : <TopColumnCenterNoLink />}
         <TopColumnRight {...props} />
       </TopWrapper>
@@ -65,7 +66,7 @@ function StickyHeader(props: THeaderProps) {
   return props.showStickyHeader ? (
     <StickyHeaderWrapper {...props}>
       <TopWrapperSticky>
-        <TopColumnLeftSticky />
+        <TopColumnLeftSticky {...props} />
         <TopColumnCenterSticky {...props} />
         <TopColumnRightSticky {...props} />
       </TopWrapperSticky>

package/src/interfaces.d.ts

@@ -10,12 +10,7 @@ export type THeaderOptions = {
   showStickyHeader?: boolean
   showMegaNav?: boolean
   showLogoLink?: boolean
-  /*
-   * experimentalAccountEntryTest is an experimental feature switch
-   * This is being run as an AB test and should be removed afterwards
-   * This option shouldn't be used by anyone without consulting the CP Retention team first
-   */
-  experimentalAccountEntryTest?: boolean
+  showAskButton?: boolean
 }
 
 export type THeaderProps = THeaderOptions & {