Merge pull request #75 from NHSDigital/feature/renderHintAsDiv

NHS.UK 4 - Render Hint as div element, not span

Author: Tomdango

CHANGELOG.md

@@ -45,3 +45,7 @@ The `WarningCallout.Label` now has the hidden text `Important: ` before the labe
   Something Much Less Important
 </WarningCallout.Label>
 ```
+
+## Hint component renders as div
+
+The `Hint` component now renders as a `div` element rather than a `span`.

src/components/hint/Hint.tsx

@@ -1,10 +1,10 @@
 import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
 
-export type HintProps = HTMLProps<HTMLSpanElement>;
+export type HintProps = HTMLProps<HTMLDivElement>;
 
 const Hint: React.FC<HintProps> = ({ className, ...rest }) => (
-  <span className={classNames('nhsuk-hint', className)} {...rest} />
+  <div className={classNames('nhsuk-hint', className)} {...rest} />
 );
 
 export default Hint;

src/components/hint/__tests__/__snapshots__/Hint.test.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Hint matches snapshot: Hint 1`] = `
-<span
+<div
   className="nhsuk-hint"
 >
   Text
-</span>
+</div>
 `;