<commit_before>import React from 'react'
import styled from 'styled-components'
import { GREY_4, TEXT_COLOUR, BORDER_COLOUR, FOCUS_COLOUR } from 'govuk-colours'

import multiInstance from '../../utils/multiinstance'
import focusable from '../../utils/focusable'
import { TAB_NAV__SELECT, TAB_NAV__FOCUS } from '../../actions'
import reducer from './reducer'

const LEFT_ARROW_KEY = 37
const RIGHT_ARROW_KEY = 39

const FocusableButton = focusable('button')

const buttonStyle = {
  color: TEXT_COLOUR,
  fontSize: 19,
  fontFamily: 'Arial, sans-serif',
}

const focusStyle = {
  '&:focus': {
    outline: `3px solid ${FOCUS_COLOUR}`,
  },
}

const StyledButton = styled(FocusableButton)({
  ...buttonStyle,
  padding: '10px 20px',
  margin: '5px 0 5px',
  background: GREY_4,
  border: 'none',
  cursor: 'pointer',
  ...focusStyle,
})

const StyledSelectedButton = styled(FocusableButton)({
  ...buttonStyle,
  border: `1px solid ${BORDER_COLOUR}`,
  borderBottom: 'none',
  // The negative margin is here so that it overcasts tabpane's top border
  marginBottom: -1,
  // The 19px include compensation for the 1px negative margin above
  padding: '14px 19px 16px',
  background: 'white',
  ...focusStyle,
})

const StyledTablist = styled.div({
  borderBottom: `1px solid ${BORDER_COLOUR}`,
  '& > *:not(:last-child)': {
    marginRight: 5,
  },
})

const StyledTabpanel = styled.div({
  ...focusStyle,
  marginTop: 10,<commit_msg>Made TabNav accessible by removing govuk-react<commit_after>import React from 'react'
import styled from 'styled-components'
import { GREY_4, TEXT_COLOUR, BORDER_COLOUR, FOCUS_COLOUR } from 'govuk-colours'

import multiInstance from '../../utils/multiinstance'
import focusable from '../../utils/focusable'
import { TAB_NAV__SELECT, TAB_NAV__FOCUS } from '../../actions'
import reducer from './reducer'

const LEFT_ARROW_KEY = 37
const RIGHT_ARROW_KEY = 39

const FocusableButton = focusable('button')

const buttonStyle = {
  color: TEXT_COLOUR,
  fontSize: 19,
  fontFamily: 'Arial, sans-serif',
}

const focusStyle = {
  '&:focus': {
    outline: `3px solid ${FOCUS_COLOUR}`,
  },
}

const StyledButton = styled(FocusableButton)({
  ...buttonStyle,
  padding: '10px 20px',
  margin: '5px 0 5px',
  background: GREY_4,
  border: 'none',
  cursor: 'pointer',
  ...focusStyle,
})

const StyledSelectedButton = styled(FocusableButton)({
  ...buttonStyle,
  border: `1px solid ${BORDER_COLOUR}`,
  borderBottom: 'none',
  // The negative margin is here so that it overcasts tabpane's top border
  marginBottom: -1,
  // The 19px include compensation for the 1px negative margin above
  padding: '14px 19px 16px',
  background: 'white',
  ...focusStyle,
})

const StyledTablist = styled.div({
  borderBottom: `1px solid ${BORDER_COLOUR}`,
  '& > *:not(:last-child)': {
    marginRight: 5,
  },
}

const StyledButton = styled(FocusableButton)({
  ...buttonStyle,
  padding: '10px 20px',
  background: GREY_4,
  border: 'none',
  cursor: 'pointer',
  ...focusStyle,
})

const StyledTabpanel = styled.div({
  ...focusStyle,
  marginTop: 10,
{'fraction_non_alphanumeric': 0.1406199021207178, 'fraction_numerical': 0.021859706362153345, 'mean_word_length': 4.161616161616162, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '960753', 'n_tokens_mistral': 1138, 'n_tokens_neox': 1057, 'n_words': 282}