govuk_publishing_components 43.4.0 → 43.4.1

data/node_modules/accessible-autocomplete/src/status.js

@@ -0,0 +1,125 @@
+import { createElement, Component } from 'preact' /** @jsx createElement */
+
+const debounce = function (func, wait, immediate) {
+  let timeout
+  return function () {
+    const context = this
+    const args = arguments
+    const later = function () {
+      timeout = null
+      if (!immediate) func.apply(context, args)
+    }
+    const callNow = immediate && !timeout
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+    if (callNow) func.apply(context, args)
+  }
+}
+const statusDebounceMillis = 1400
+
+export default class Status extends Component {
+  static defaultProps = {
+    tQueryTooShort: (minQueryLength) => `Type in ${minQueryLength} or more characters for results`,
+    tNoResults: () => 'No search results',
+    tSelectedOption: (selectedOption, length, index) => `${selectedOption} ${index + 1} of ${length} is highlighted`,
+    tResults: (length, contentSelectedOption) => {
+      const words = {
+        result: (length === 1) ? 'result' : 'results',
+        is: (length === 1) ? 'is' : 'are'
+      }
+
+      return `${length} ${words.result} ${words.is} available. ${contentSelectedOption}`
+    }
+  }
+
+  state = {
+    bump: false,
+    debounced: false
+  }
+
+  /* eslint-disable react/no-deprecated -- https://github.com/alphagov/accessible-autocomplete/issues/418 */
+  componentWillMount () {
+    const that = this
+    this.debounceStatusUpdate = debounce(function () {
+      if (!that.state.debounced) {
+        const shouldSilence = !that.props.isInFocus || that.props.validChoiceMade
+        that.setState(({ bump }) => ({ bump: !bump, debounced: true, silenced: shouldSilence }))
+      }
+    }, statusDebounceMillis)
+  }
+
+  /* eslint-disable react/no-deprecated -- https://github.com/alphagov/accessible-autocomplete/issues/418 */
+  componentWillReceiveProps ({ queryLength }) {
+    this.setState({ debounced: false })
+  }
+
+  render () {
+    const {
+      id,
+      length,
+      queryLength,
+      minQueryLength,
+      selectedOption,
+      selectedOptionIndex,
+      tQueryTooShort,
+      tNoResults,
+      tSelectedOption,
+      tResults,
+      className
+    } = this.props
+    const { bump, debounced, silenced } = this.state
+
+    const queryTooShort = queryLength < minQueryLength
+    const noResults = length === 0
+
+    const contentSelectedOption = selectedOption
+      ? tSelectedOption(selectedOption, length, selectedOptionIndex)
+      : ''
+
+    let content = null
+    if (queryTooShort) {
+      content = tQueryTooShort(minQueryLength)
+    } else if (noResults) {
+      content = tNoResults()
+    } else {
+      content = tResults(length, contentSelectedOption)
+    }
+
+    this.debounceStatusUpdate()
+
+    return (
+      <div
+        className={className}
+        style={{
+          border: '0',
+          clip: 'rect(0 0 0 0)',
+          height: '1px',
+          marginBottom: '-1px',
+          marginRight: '-1px',
+          overflow: 'hidden',
+          padding: '0',
+          position: 'absolute',
+          whiteSpace: 'nowrap',
+          width: '1px'
+        }}
+      >
+        <div
+          id={id + '__status--A'}
+          role='status'
+          aria-atomic='true'
+          aria-live='polite'
+        >
+          {(!silenced && debounced && bump) ? content : ''}
+        </div>
+        <div
+          id={id + '__status--B'}
+          role='status'
+          aria-atomic='true'
+          aria-live='polite'
+        >
+          {(!silenced && debounced && !bump) ? content : ''}
+        </div>
+      </div>
+    )
+  }
+}

data/node_modules/accessible-autocomplete/src/wrapper.js

@@ -0,0 +1,60 @@
+import { createElement, render } from 'preact' /** @jsx createElement */
+import Autocomplete from './autocomplete'
+
+function accessibleAutocomplete (options) {
+  if (!options.element) { throw new Error('element is not defined') }
+  if (!options.id) { throw new Error('id is not defined') }
+  if (!options.source) { throw new Error('source is not defined') }
+  if (Array.isArray(options.source)) {
+    options.source = createSimpleEngine(options.source)
+  }
+  render(<Autocomplete {...options} />, options.element)
+}
+
+const createSimpleEngine = (values) => (query, syncResults) => {
+  const matches = values.filter(r => r.toLowerCase().indexOf(query.toLowerCase()) !== -1)
+  syncResults(matches)
+}
+
+accessibleAutocomplete.enhanceSelectElement = (configurationOptions) => {
+  if (!configurationOptions.selectElement) { throw new Error('selectElement is not defined') }
+
+  // Set defaults.
+  if (!configurationOptions.source) {
+    const availableOptions = [].filter.call(configurationOptions.selectElement.options, option => (option.value || configurationOptions.preserveNullOptions))
+    configurationOptions.source = availableOptions.map(option => option.textContent || option.innerText)
+  }
+  configurationOptions.onConfirm = configurationOptions.onConfirm || (query => {
+    const requestedOption = [].filter.call(configurationOptions.selectElement.options, option => (option.textContent || option.innerText) === query)[0]
+    if (requestedOption) { requestedOption.selected = true }
+  })
+
+  if (configurationOptions.selectElement.value || configurationOptions.defaultValue === undefined) {
+    const option = configurationOptions.selectElement.options[configurationOptions.selectElement.options.selectedIndex]
+    configurationOptions.defaultValue = option.textContent || option.innerText
+  }
+
+  if (configurationOptions.name === undefined) configurationOptions.name = ''
+  if (configurationOptions.id === undefined) {
+    if (configurationOptions.selectElement.id === undefined) {
+      configurationOptions.id = ''
+    } else {
+      configurationOptions.id = configurationOptions.selectElement.id
+    }
+  }
+  if (configurationOptions.autoselect === undefined) configurationOptions.autoselect = true
+
+  const element = document.createElement('div')
+
+  configurationOptions.selectElement.parentNode.insertBefore(element, configurationOptions.selectElement)
+
+  accessibleAutocomplete({
+    ...configurationOptions,
+    element
+  })
+
+  configurationOptions.selectElement.style.display = 'none'
+  configurationOptions.selectElement.id = configurationOptions.selectElement.id + '-select'
+}
+
+export default accessibleAutocomplete

data/node_modules/accessible-autocomplete/test/functional/dropdown-arrow-down.js

@@ -0,0 +1,46 @@
+/* global before, beforeEach, after, describe, it */
+
+import { expect } from 'chai'
+import { createElement, render } from 'preact' /** @jsx createElement */
+import DropdownArrowDown from '../../src/dropdown-arrow-down'
+
+describe('DropdownArrowDown', () => {
+  describe('rendering', () => {
+    let scratch
+
+    before(() => {
+      scratch = document.createElement('div');
+      (document.body || document.documentElement).appendChild(scratch)
+    })
+
+    beforeEach(() => {
+      scratch.innerHTML = ''
+    })
+
+    after(() => {
+      scratch.parentNode.removeChild(scratch)
+      scratch = null
+    })
+
+    describe('basic usage', () => {
+      it('renders an svg', () => {
+        render(<DropdownArrowDown />, scratch)
+
+        expect(scratch.innerHTML).to.contain('svg')
+      })
+
+      it('renders with a given custom class', () => {
+        render(<DropdownArrowDown className='foo' />, scratch)
+
+        expect(scratch.innerHTML).to.contain('class="foo"')
+      })
+
+      // IE issue so the dropdown svg is not focusable (tabindex won't work for this)
+      it('renders an svg where focusable attribute is false', () => {
+        render(<DropdownArrowDown />, scratch)
+
+        expect(scratch.innerHTML).to.contain('focusable="false"')
+      })
+    })
+  })
+})