fix: add Topics and equities

Financial-Times · Sep 21, 2023 · c4d83f5 · c4d83f5
1 parent d4b1ce3
commit c4d83f5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/packages/dotcom-ui-header/package.json b/packages/dotcom-ui-header/package.json
@@ -35,7 +35,7 @@
     "react": "^16.8.6"
   },
   "peerDependencies": {
-    "@financial-times/o-header": "^11.0.4",
+    "@financial-times/o-header": "^11.1.0",
     "@financial-times/logo-images": "^1.10.1",
     "react": "16.x || 17.x"
   },

diff --git a/packages/dotcom-ui-header/src/enhanced-search/customList.js b/packages/dotcom-ui-header/src/enhanced-search/customList.js
@@ -2,6 +2,11 @@ import BaseRenderer from 'n-topic-search/src/renderers/base-renderer'
 
 const DISPLAY_ITEMS = 5
 
+const headingMapping = {
+  concepts: 'Related topics',
+  equities: 'Securities'
+}
+
 class CustomSuggestionList extends BaseRenderer {
   constructor(container, options, enhancedSearchUrl) {
     super(container, options)
@@ -47,6 +52,7 @@ class CustomSuggestionList extends BaseRenderer {
     if (group.suggestions?.length || group.emptyHtml) {
       return `
       <div class="enhanced-search__group ${group.linkClassName}" data-trackable="${group.trackable}">
+         <h3 class="enhanced-search__title">${group.heading}</h3>
         <ul class="n-topic-search__item-list">
           ${group.suggestions.map((suggestion) => this.renderSuggestionLink(suggestion, group)).join('')}
         </ul>
@@ -80,6 +86,7 @@ class CustomSuggestionList extends BaseRenderer {
     this.items = []
     if (this.options.categories.includes('concepts')) {
       suggestions.push({
+        heading: headingMapping['concepts'],
         linkClassName: 'enhanced-search__target--news',
         trackable: 'enhanced-search-news',
         suggestions: this.state.suggestions.concepts?.slice(0, DISPLAY_ITEMS).map((suggestion) => ({
@@ -93,6 +100,7 @@ class CustomSuggestionList extends BaseRenderer {
 
     if (this.options.categories.includes('equities')) {
       suggestions.push({
+        heading: headingMapping['equities'],
         trackable: 'enhanced-search-equities',
         linkClassName: 'enhanced-search__target--equities',
         emptyHtml: '<div className="enhanced-search__no-results-message">No equities found</div>',

diff --git a/packages/dotcom-ui-header/src/enhanced-search/styles.scss b/packages/dotcom-ui-header/src/enhanced-search/styles.scss
@@ -19,6 +19,12 @@
       }
     }
 
+    &__title {
+      color: colors.oColorsByName('black');
+      @include typography.oTypographySans($scale: 0, $style: 'normal', $weight: 'semibold');
+      margin: 0 0 spacing.oSpacingByName('s3') 0;
+    }
+
     &__margin-top {
       margin-top: spacing.oSpacingByName('s4');
     }
@@ -39,7 +45,7 @@
     &__suggestions-items {
       display: flex;
       gap: spacing.oSpacingByName('m16');
-      padding-top: spacing.oSpacingByName('s4');
+      padding-top: spacing.oSpacingByName('s6');
       flex-direction: column;
 
       @include oGridRespondTo('L') {
@@ -69,6 +75,7 @@
     }
 
     &__target--news {
+      min-width: spacing.oSpacingByIncrement(25);
       color: colors.oColorsByName('claret-70');
     }
 
@@ -78,10 +85,13 @@
     }
 
     &__target--equities {
+      color: colors.oColorsByName('black');
+    }
+
+    a.enhanced-search__target--equities{
       display: flex;
       align-items: flex-start;
       gap: spacing.oSpacingByName('s3');
-      color: colors.oColorsByName('black');
     }
 
     &__target--equities:hover,

diff --git a/packages/dotcom-ui-header/src/index.tsx b/packages/dotcom-ui-header/src/index.tsx
@@ -46,7 +46,7 @@ function MainHeader(props: THeaderProps) {
       <TopWrapper>
         <TopColumnLeft />
         {props.showLogoLink ? (
-          <TopColumnCenter url={props.data.editions.current.url} />
+          <TopColumnCenter url={props.data.editions?.current?.url} />
         ) : (
           <TopColumnCenterNoLink />
         )}
@@ -118,7 +118,7 @@ function NoOutboundLinksHeader(props: THeaderProps) {
       {includeUserActionsNav ? <UserActionsNav {...props} /> : null}
       <TopWrapper>
         {props.showLogoLink ? (
-          <TopColumnCenter url={props.data.editions.current.url} />
+          <TopColumnCenter url={props.data.editions?.current?.url} />
         ) : (
           <TopColumnCenterNoLink />
         )}