<commit_before>import React from 'react'
import { Checkbox } from '..'
import MultiChoice from '@govuk-react/multi-choice'
import { GREY_2, YELLOW } from 'govuk-colours'
import styled from 'styled-components'

import FieldWrapper from '../Form/elements/FieldWrapper'

const StyledFieldWrapper = styled(FieldWrapper)`
  label {
    font-weight: normal;
  }
  label:not(:first-child) {
    padding-left: 20px;
  }
  input {
    left: -10px;
    top: -2px;
    + span {
      padding: 10px 15px 5px;
      &::before {
        top: 8px;
        width: 24px;
        height: 24px;
      }
      &::after {
        top: 14px;
        left: 5px;
        width: 10px;
        height: 4.5px;
        border-width: 0 0 3px 3px;
      }
    }
    &:hover {
      + span {
        &::before {
          outline: 10px solid ${GREY_2};
        }
      }
    }
    &:focus {
      + span {
        &::before {
          box-shadow: 0 0 0 4px ${YELLOW};
        }
      }
    }
  }
`

/**
 * Check box group field - shows a number of options as checkboxes
 *
 * @param {string} label - label to display
 * @param {string} name - field name for the group
 * @param {string} hint - hint to display
 * @param {Array} options - the available options as objects with label and value
 * @param {Array} selectedOptions - the options that have been selected
 * @param {Func} onChange - callback function that includes the selected options
 */
const CheckboxGroupField = ({
  label,
  name,
  hint,
  options,
  selectedOptions = [],
  onChange = () => null,
  ...props
}) => (
  <StyledFieldWrapper
    label={label}
    name={name}
    hint={hint}
    data-cy={`checkbox-group-field-${name}`}
    {...props}
  >
    <MultiChoice>
      {options.map((option) => {
        const {
          value: optionValue,
          label: optionLabel,
          ...optionProps
        } = option
        const checked = selectedOptions<commit_msg>Import checkbox directly in CheckboxGroupField<commit_after>import React from 'react'
import MultiChoice from '@govuk-react/multi-choice'
import { GREY_2, YELLOW } from 'govuk-colours'
import styled from 'styled-components'

import Checkbox from '../Checkbox'
import FieldWrapper from '../Form/elements/FieldWrapper'

const StyledFieldWrapper = styled(FieldWrapper)`
  label {
    font-weight: normal;
  }
  label:not(:first-child) {
    padding-left: 20px;
  }
  input {
    left: -10px;
    top: -2px;
    + span {
      padding: 10px 15px 5px;
      &::before {
        top: 8px;
        width: 24px;
        height: 24px;
      }
      &::after {
        top: 14px;
        left: 5px;
        width: 10px;
        height: 4.5px;
        border-width: 0 0 3px 3px;
      }
    }
    &:hover {
      + span {
        &::before {
          outline: 10px solid ${GREY_2};
        }
      }
    }
    &:focus {
      + span {
        &::before {
          box-shadow: 0 0 0 4px ${YELLOW};
        }
      }
    }
  }
`

/**
 * Check box group field - shows a number of options as checkboxes
 *
 * @param {string} label - label to display
 * @param {string} name - field name for the group
 * @param {string} hint - hint to display
 * @param {Array} options - the available options as objects with label and value
 * @param {Array} selectedOptions - the options that have been selected
 * @param {Func} onChange - callback function that passes on the selected options
 */
const CheckboxGroupField = ({
  label,
  name,
  hint,
  options,
  selectedOptions = [],
  onChange = () => null,
  ...props
}) => (
  <StyledFieldWrapper
    label={label}
    name={name}
    hint={hint}
    data-cy={`checkbox-group-field-${name}`}
    {...props}
  >
    <MultiChoice>
      {options.map((option) => {
        const {
          value: optionValue,
          label: optionLabel,
          ...optionProps
        } = option
        const checked = selectedOptions
{'fraction_non_alphanumeric': 0.12457912457912458, 'fraction_numerical': 0.01761201761201761, 'mean_word_length': 2.122069523039612, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 13, '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': '6196403', 'n_tokens_mistral': 1277, 'n_tokens_neox': 1213, 'n_words': 345}