<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { GREY_4 } from 'govuk-colours'
import { SPACING } from '@govuk-react/constants'
import Main from '@govuk-react/main'
import Breadcrumbs from '@govuk-react/breadcrumbs'

import LocalHeaderHeading from './LocalHeaderHeading'
import FlashMessages from './FlashMessages'

// Using <div> as there is already a <header> on the page
// role="region" gives the element significance as a landmark
const StyledHeader = styled('div')`
  padding-bottom: ${SPACING.SCALE_5};
  background-color: ${GREY_4};
  padding-top: ${SPACING.SCALE_3};
`

const StyledMain = styled(Main)`
  padding-top: 0;
`

const BreadcrumbsWrapper = styled(Breadcrumbs)`
  margin-bottom: ${SPACING.SCALE_5};
  margin-top: 0;
`
const LocalHeader = ({ breadcrumbs, flashMessages, heading, children }) => (
  <StyledHeader aria-label="local header" data-test="localHeader" role="region">
    <StyledMain>
      <BreadcrumbsWrapper>
        {breadcrumbs?.map((breadcrumb) =>
          breadcrumb.link ? (
            <Breadcrumbs.Link key={breadcrumb.link} href={breadcrumb.link}>
              {breadcrumb.text}
            </Breadcrumbs.Link>
          ) : (
            breadcrumb.text
          )
        )}
      </BreadcrumbsWrapper>
      {flashMessages && <FlashMessages flashMessages={flashMessages} />}
      {heading && <LocalHeaderHeading>{heading}</LocalHeaderHeading>}
      {children}
    </StyledMain>
  </StyledHeader>
)

LocalHeader.propTypes = {
  breadcrumbs: PropTypes.arrayOf(
    PropTypes.shape({
      link: PropTypes.string,
      text: PropTypes.string.isRequired,
    })
  ),
  flashMessages: PropTypes.shape({
    type: PropTypes.oneOfType([
      PropTypes.arrayOf(
        PropTypes.shape({
          body: PropTypes.string.isRequired,
          heading: PropTypes.string.isRequired,
          id: PropTypes.string,
        })
      ),
      PropTypes.arrayOf(PropTypes.string).isRequired,
    ]),
  }),
  heading: PropTypes.string,
  children: PropTypes.node,
}

LocalHeader.defaultProps = {
  breadcrumbs: null,
  flashMessages: null,
  heading: null,
  children: null,
}

export default LocalHeader
<commit_msg>Add the superheading prop to LocalHeader<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { GREY_4 } from 'govuk-colours'
import { SPACING } from '@govuk-react/constants'
import Main from '@govuk-react/main'
import Breadcrumbs from '@govuk-react/breadcrumbs'

import LocalHeaderHeading from './LocalHeaderHeading'
import FlashMessages from './FlashMessages'

// Using <div> as there is already a <header> on the page
// role="region" gives the element significance as a landmark
const StyledHeader = styled('div')`
  padding-bottom: ${SPACING.SCALE_5};
  background-color: ${GREY_4};
  padding-top: ${SPACING.SCALE_3};
`

const StyledMain = styled(Main)`
  padding-top: 0;
`

const BreadcrumbsWrapper = styled(Breadcrumbs)`
  margin-bottom: ${SPACING.SCALE_5};
  margin-top: 0;
`
const LocalHeader = ({
  breadcrumbs,
  flashMessages,
  heading,
  superheading,
  children,
}) => (
  <StyledHeader
    aria-label="local header"
    data-auto-id="localHeader"
    role="region"
  >
    <StyledMain>
      <BreadcrumbsWrapper>
        {breadcrumbs?.map((breadcrumb) =>
          breadcrumb.link ? (
            <Breadcrumbs.Link key={breadcrumb.link} href={breadcrumb.link}>
              {breadcrumb.text}
            </Breadcrumbs.Link>
          ) : (
            breadcrumb.text
          )
        )}
      </BreadcrumbsWrapper>
      {flashMessages && <FlashMessages flashMessages={flashMessages} />}
      <div style={{ fontSize: 20, lineHeight: '32px' }}>{superheading}</div>
      {heading && <LocalHeaderHeading>{heading}</LocalHeaderHeading>}
      {children}
    </StyledMain>
  </StyledHeader>
)

LocalHeader.propTypes = {
  breadcrumbs: PropTypes.arrayOf(
    PropTypes.shape({
      link: PropTypes.string,
      text: PropTypes.string.isRequired,
    })
  ),
  flashMessages: PropTypes.shape({
    type: PropTypes.oneOfType([
      PropTypes.arrayOf(
        PropTypes.shape({
          body: PropTypes.string.isRequired,
          heading: PropTypes.string.isRequired,
          id: PropTypes.string,
        })
      ),
      PropTypes.arrayOf(PropTypes.string).isRequired,
    ]),
  }),
  heading: PropTypes.string,
  superheading: PropTypes.node,
  children: PropTypes.node,
}

LocalHeader.defaultProps = {
  breadcrumbs: null,
  flashMessages: null,
  heading: null,
  children: null,
}

export default LocalHeader

{'fraction_non_alphanumeric': 0.12502699201036493, 'fraction_numerical': 0.003886849492550205, 'mean_word_length': 3.273062730627306, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 35, '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': '7242942', 'n_tokens_mistral': 1468, 'n_tokens_neox': 1487, 'n_words': 301}