@financial-times/dotcom-ui-header 9.0.0-beta.9 → 9.0.2

package/src/__test__/enzyme/drawer.spec.tsx

@@ -1,114 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import 'jest-enzyme'
-import React from 'react'
-import { mount } from 'enzyme'
-
-import navigationData from '../../__stories__/story-data/index'
-import { Drawer as Subject } from '../../'
-
-const fixture = {
-  data: { ...navigationData.data, currentPath: '/world' }
-}
-
-const loggedInUserFixture = {
-  ...fixture,
-  userIsAnonymous: false,
-  userIsLoggedIn: true
-}
-
-const anonymousUserFixture = {
-  ...fixture,
-  userIsAnonymous: true,
-  userIsLoggedIn: false
-}
-
-describe('dotcom-ui-header/src/components/drawer', () => {
-  describe('editions', () => {
-    let result
-
-    beforeAll(() => {
-      result = mount(<Subject {...fixture} />)
-    })
-
-    it('renders the current edition text', () => {
-      expect(result.find('.o-header__drawer-current-edition')).toHaveText('UK Edition')
-    })
-
-    it('renders the alternative edition link', () => {
-      expect(result.find('[data-trackable="edition-switcher"] a')).toHaveText(
-        'Switch to International Edition'
-      )
-    })
-  })
-
-  describe('navigation links', () => {
-    let result
-
-    beforeAll(() => {
-      result = mount(<Subject {...fixture} />)
-    })
-
-    it('renders the primary link section title', () => {
-      expect(result.find('.o-header__drawer-menu-item--heading').at(0)).toHaveText('Top sections')
-    })
-
-    it('renders the secondary link section title', () => {
-      expect(result.find('.o-header__drawer-menu-item--heading').at(1)).toHaveText('FT recommends')
-    })
-
-    it('renders the tertiary link section divider', () => {
-      expect(result.find('.o-header__drawer-menu-list--divide > li:first-child')).toHaveText('myFT')
-    })
-
-    it('renders primary link subsections', () => {
-      const section = result
-        .find('.o-header__drawer-menu-item')
-        .findWhere((node) => node.key() === '/companies')
-        .at(0)
-
-      expect(section.find('.o-header__drawer-menu-link--parent')).toHaveText('Companies')
-      expect(section.find('.o-header__drawer-menu-toggle')).toHaveText('Show more Companies')
-      expect(section.find('.o-header__drawer-menu-link--child').length).toBe(10)
-    })
-
-    it('highlights the current page', () => {
-      expect(result.find('[aria-current="page"]')).toHaveText('World')
-    })
-  })
-
-  describe('user menu', () => {
-    describe('for a logged in user', () => {
-      let result
-
-      beforeAll(() => {
-        result = mount(<Subject {...loggedInUserFixture} />)
-      })
-
-      it('renders sign out link', () => {
-        expect(result.find('a[data-trackable="Sign Out"]')).toExist()
-      })
-
-      it('renders settings and account link', () => {
-        expect(result.find('a[data-trackable="Settings & Account"]')).toExist()
-      })
-    })
-
-    describe('for an anonymous user', () => {
-      let result
-
-      beforeAll(() => {
-        result = mount(<Subject {...anonymousUserFixture} />)
-      })
-
-      it('renders sign in link', () => {
-        expect(result.find('a[data-trackable="Sign In"]')).toExist()
-      })
-
-      it('renders subscribe link', () => {
-        expect(result.find('a[data-trackable="Subscribe"]')).toExist()
-      })
-    })
-  })
-})

package/src/enhanced-search/customList.js

@@ -1,168 +0,0 @@
-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)
-    this.renderSuggestionGroup = this.renderSuggestionGroup.bind(this)
-    this.enhancedSearchUrl = enhancedSearchUrl
-    this.createHtml()
-    this.render()
-  }
-
-  renderSuggestionChip = (term) => {
-    return `<a
-        tabindex="0"
-        data-trackable="link"
-        data-suggestion-id="${term}"
-        href="${this.enhancedSearchUrl}${term}"
-        class="n-topic-search__target enhanced-search__chip">
-          <span class="enhanced-search__chip-text">${term}</span>
-        </a>`
-  }
-
-  renderDefaultSuggestionsChips() {
-    return `
-        <div class="enhanced-search__default-results">
-            ${['Will Trump win the next election?', 'Investing in AI', 'Ukraine counteroffensive']
-              .map(this.renderSuggestionChip)
-              .join('')}
-        </div>`
-  }
-
-  renderSuggestionLink(suggestion, group) {
-    return `<li class="n-topic-search__item">
-			<a class="n-topic-search__target enhanced-search__target ${group.linkClassName}"
-				href="${suggestion.url}"
-				tabindex="0"
-				data-trackable="link"
-				data-suggestion-id="${suggestion.id}"
-				data-suggestion-type="${suggestion.type}"
-			>${suggestion.html}</a>
-		</li>`
-  }
-
-  renderSuggestionGroup(group) {
-    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>
-      </div>`
-    }
-    return ''
-  }
-
-  renderError() {
-    return `
-    <div
-      class="o-message o-message--alert o-message--error enhanced-search__margin-top"
-      data-o-component="o-message">
-      <div class="o-message__container">
-        <div class="o-message__content">
-          <p class="o-message__content-main">Something went wrong!</p>
-        </div>
-      </div>
-    </div>
-  `
-  }
-
-  createHtml() {
-    const term = this.state?.searchTerm
-    const loading = this.state?.loading
-    const error = this.state?.error !== undefined
-    const hasConcepts = this.state?.suggestions?.concepts && this.state.suggestions.concepts.length
-    const hasEquities = this.state?.suggestions?.equities && this.state.suggestions.equities.length
-    const hasSuggestions = hasConcepts || hasEquities
-    const suggestions = []
-    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) => ({
-          html: this.highlight(suggestion.prefLabel),
-          url: suggestion.url,
-          id: suggestion.id,
-          type: 'enhanced-search-tag'
-        }))
-      })
-    }
-
-    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>',
-        suggestions: this.state.suggestions.equities?.slice(0, DISPLAY_ITEMS).map((suggestion) => ({
-          html: `<span class="enhanced-search__target__equity-name">${this.highlight(
-            suggestion.name
-          )}</span><abbr>${this.highlight(suggestion.symbol)}</abbr>`,
-          url: suggestion.url,
-          id: suggestion.symbol,
-          type: 'enhanced-search-equity'
-        }))
-      })
-    }
-
-    this.newHtml = `
-        <div aria-live="assertive">
-        ${
-          hasSuggestions
-            ? `
-        <div
-          class="o-normalise-visually-hidden n-topic-search__suggestions_explanation"
-        >
-          Search results have been displayed. To jump to the list of suggestions press
-          the down arrow key.
-        </div>
-        `
-            : ''
-        }
-        <div
-          class="n-topic-search n-topic-search__suggestions enhanced-search enhanced-search__suggestions"
-          data-trackable="typeahead"
-        >
-          <div class="enhanced-search__wrapper">
-            <h3 class="enhanced-search__title">${
-              term ? 'Get top results for...' : 'Search tip: Try using questions or phrases like...'
-            }</h3>
-            ${term ? this.renderSuggestionChip(term) : this.renderDefaultSuggestionsChips()}
-            <div class="o-normalise-visually-hidden">Suggestions include</div>
-            ${error ? this.renderError() : ''}
-            ${
-              loading && !error
-                ? `<div class="o-loading o-loading--dark o-loading--small enhanced-search__margin-top"></div>`
-                : ''
-            }
-            ${
-              hasSuggestions && term && !loading && !error
-                ? `<div class="enhanced-search__suggestions-items">${suggestions
-                    .map(this.renderSuggestionGroup)
-                    .join('')}</div>
-            `
-                : ''
-            }
-          </div>
-        </div>
-      </div>`
-  }
-
-  handleSelection(el, ev) {
-    ev.stopPropagation()
-    // we don't prevent default as the link's url is a link to the relevant stream page
-    return
-  }
-}
-
-export default CustomSuggestionList

package/src/enhanced-search/enhancedSearch.js

@@ -1,59 +0,0 @@
-import TopicSearch from 'n-topic-search'
-import CustomSuggestionList from './customList'
-
-class EnhancedSearch extends TopicSearch {
-  constructor(containerEl, options) {
-    super(containerEl, {
-      ...options,
-      listComponent: (...args) => new CustomSuggestionList(...args.concat(options?.enhancedSearchUrl)),
-      errorCallback: (error) => {
-        this.suggestionsView.setState({
-          error,
-          searchTerm: this.searchEl.value,
-          suggestions: {}
-        })
-      }
-    })
-
-    this.updateEnhancedSearchAttributes(options)
-  }
-
-  updateEnhancedSearchAttributes(options) {
-    const inputs = [
-      document.querySelector('#o-header-search-term-primary'),
-      document.querySelector('#o-header-search-term-sticky'),
-      document.querySelector('#o-header-drawer-search-term')
-    ]
-
-    inputs.forEach((input, index) => {
-      input.setAttribute('placeholder', 'Search for stories, topics or securities')
-      input.parentElement.setAttribute('action', options?.enhancedSearchUrl ?? '/search')
-
-      if (index === 0) input.parentElement.setAttribute('data-attribute-enhanced-search', 'true')
-    })
-
-    this.hide()
-  }
-
-  onFocus(ev) {
-    super.onFocus(ev)
-    this.show()
-    this.suggestionTargets = Array.from(
-      this.suggestionListContainer.querySelectorAll('.n-topic-search__target')
-    )
-  }
-
-  onType(ev) {
-    // This is to update the suggestion chip on keyup
-    this.suggestionsView.setState({
-      searchTerm: this.searchEl.value,
-      loading: this.searchEl.value && this.searchEl.value.length >= this.minLength,
-      suggestions: {}
-    })
-    super.onType(ev)
-    // this is show the flyout for less than minimum length
-    this.show()
-  }
-}
-
-export default EnhancedSearch

package/src/enhanced-search/styles.scss

@@ -1,146 +0,0 @@
-@use '@financial-times/o-colors/main' as colors;
-@use '@financial-times/o-spacing/main' as spacing;
-@use '@financial-times/o-typography/main' as typography;
-
-@mixin enhancedSearch {
-  // Hide search-bar on small screens
-  .o-header__search[aria-hidden='false'] {
-    display: none;
-    @include oGridRespondTo('L') {
-      display: block;
-    }
-  }
-
-  .enhanced-search {
-    &__suggestions {
-      @include oGridRespondTo('L') {
-        max-width: 540px;
-        left: calc(-1 * spacing.oSpacingByName('s3'));
-      }
-    }
-
-    &__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');
-    }
-
-    &__wrapper {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      padding: spacing.oSpacingByName('s6');
-    }
-
-    &__title {
-      color: colors.oColorsByName('black');
-      @include typography.oTypographySans($scale: 0, $style: 'normal', $weight: 'semibold');
-      margin: 0 0 spacing.oSpacingByName('s3') 0;
-    }
-
-    &__suggestions-items {
-      display: flex;
-      gap: spacing.oSpacingByName('m16');
-      padding-top: spacing.oSpacingByName('s6');
-      flex-direction: column;
-
-      @include oGridRespondTo('L') {
-        flex-direction: row;
-      }
-    }
-
-    &__target {
-      padding: 0;
-      padding-block: spacing.oSpacingByName('s2');
-    }
-
-    &__target::before,
-    &__chip::before {
-      border-bottom: unset !important;
-    }
-
-    &__target:hover,
-    &__target:focus {
-      background-color: transparent;
-      color: oColorsByName('teal');
-    }
-
-    &__target:hover:before,
-    &__target:focus:before {
-      opacity: 0;
-    }
-
-    &__target--news {
-      min-width: spacing.oSpacingByIncrement(25);
-      color: colors.oColorsByName('claret-70');
-    }
-
-    &__target--news:hover,
-    &__target--news:focus {
-      color: colors.oColorsByName('claret-30');
-    }
-
-    &__target--equities {
-      color: colors.oColorsByName('black');
-    }
-
-    a.enhanced-search__target--equities{
-      display: flex;
-      align-items: flex-start;
-      gap: spacing.oSpacingByName('s3');
-    }
-
-    &__target--equities:hover,
-    &__target--equities:focus {
-      color: colors.oColorsByName('slate');
-    }
-
-    &__chip {
-      border-radius: spacing.oSpacingByName('s1');
-      background: colors.oColorsMix('ft-grey', 'white', 10);
-      padding: spacing.oSpacingByName('s2') spacing.oSpacingByName('s3');
-      width: fit-content;
-      cursor: pointer;
-      text-decoration: none;
-      display: block;
-    }
-
-    &__chip:hover,
-    &__chip:focus {
-      background: colors.oColorsMix('ft-grey', 'white', 20);
-    }
-
-    &__chip:focus-visible {
-      box-shadow: 0 0 0 spacing.oSpacingByIncrement(0.5) colors.oColorsByName('white'),
-        0 0 0 spacing.oSpacingByName('s1') colors.oColorsByName('black-70');
-      color: colors.oColorsByName('white');
-      border-color: transparent;
-      border-radius: 0;
-      outline: none;
-    }
-
-    &__chip-text {
-      margin: 0;
-      color: colors.oColorsByName('black');
-      @include typography.oTypographySans($scale: -1, $style: 'normal', $weight: 'regular');
-      outline: none;
-    }
-
-    &__default-results {
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      gap: spacing.oSpacingByName('s2');
-      flex-direction: column;
-
-      @include oGridRespondTo('L') {
-        flex-direction: row;
-        align-items: center;
-      }
-    }
-  }
-}