diff --git a/components/form-group/assets/FormGroup.scss b/components/form-group/assets/FormGroup.scss index d9bad54f0..6f5eebba9 100644 --- a/components/form-group/assets/FormGroup.scss +++ b/components/form-group/assets/FormGroup.scss @@ -1,2 +1,11 @@ @import "@not-govuk/sass-base"; @import "govuk-frontend/dist/govuk/objects/_form-group"; + +.govuk-form-group { + &--standalone { + &.govuk-form-group--error { + padding-left: 0; + border-left-width: 0; + } + } +} diff --git a/components/form-group/src/FormGroup.tsx b/components/form-group/src/FormGroup.tsx index fa757bcd2..39d03b413 100644 --- a/components/form-group/src/FormGroup.tsx +++ b/components/form-group/src/FormGroup.tsx @@ -1,7 +1,7 @@ import { FC, Fragment, HTMLAttributes, ReactNode, createElement as h } from 'react'; import { StandardProps, classBuilder } from '@not-govuk/component-helpers'; import { ErrorMessage } from '@not-govuk/error-message'; -import { FieldSet, FieldSetProps } from '@not-govuk/fieldset'; +import { FieldSet } from '@not-govuk/fieldset'; import { Hint } from '@not-govuk/hint'; import { Label } from '@not-govuk/label'; @@ -16,6 +16,7 @@ export type FormGroupProps = StandardProps & Omit hintId?: string id: string label: ReactNode + standalone?: boolean }; export const FormGroup: FC = ({ @@ -30,10 +31,12 @@ export const FormGroup: FC = ({ hintId: _hintId, id, label, + standalone = false, ...attrs }) => { const classModifiers = [ error ? 'error' : undefined, + standalone ? 'standalone' : undefined, ...(Array.isArray(_classModifiers) ? _classModifiers : [_classModifiers]) ]; const classes = classBuilder('govuk-form-group', classBlock, classModifiers, className); @@ -49,8 +52,8 @@ export const FormGroup: FC = ({ const children = ( - { !hint ? null : {hint} } - { !error ? null : {error}} + { !hint ? null : } + { !error ? null : } {_children} ); @@ -59,7 +62,7 @@ export const FormGroup: FC = ({
{ fieldId ? ( - + {children} ) : (