Remove implementation notes duplicated in args or examples

Author: colinrotherham

src/components/navigation/action-link/README.md

@@ -2,7 +2,7 @@
 
 This component can be found in the `nhsuk-frontend` repository [here](https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/action-link).
 
-## Implementation Notes
+## Implementation notes
 
 The ActionLink component does not use the `nhsuk-frontend` "openInNewWindow" property, instead it allows the user to add the `target="_blank"` property (if desired).
 

stories/Content Presentation/Details.stories.tsx

@@ -4,43 +4,13 @@ import { Details } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/contents-list" target="_blank">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `Details` component has three subcomponents:
  *
  * - `Details.Summary`
  * - `Details.Text`
  * - `Details.ExpanderGroup`
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { Details } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <Details>
- *             <Details.Summary>Where can I find my NHS number?</Details.Summary>
- *             <Details.Text>
- *                 <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
- *                 <p>
- *                 You can find your NHS number on any document sent to you by the NHS. This may include:
- *                 </p>
- *                 <ul>
- *                     <li>prescriptions</li>
- *                     <li>test results</li>
- *                     <li>hospital referral letters</li>
- *                     <li>appointment letters</li>
- *                     <li>your NHS medical card</li>
- *                 </ul>
- *                 <p>Ask your GP practice for help if you can't find your NHS number.</p>
- *             </Details.Text>
- *         </Details>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof Details> = {
   title: 'Content Presentation/Details',

stories/Content Presentation/DoAndDontList.stories.tsx

@@ -4,38 +4,15 @@ import { DoAndDontList } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/do-dont-list" target="_blank" rel="noopener noreferrer">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `DoAndDontList` component has one subcomponent: `DoAndDontList.Item`.
  *
  * As long as a `listType` is supplied to the `DoAndDontList` component, all subcomponents will render as desired. If you require a `DoAndDontList.Item` to be different, a `listItemType` prop can be supplied to force the type.
  *
- *
  * The `DoAndDontList.Item` component can also accept a `prefixText` prop, which can be used to override the default prefix text.
  *
  * See the <b><a href="#custom-prefix-text" >custom prefix text</a></b> story for an example.
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { DoAndDontList } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <DoAndDontList listType="do">
- *             <DoAndDontList.Item>
- *                 cover blisters that are likely to burst with a soft plaster or dressing
- *             </DoAndDontList.Item>
- *             <DoAndDontList.Item>wash your hands before touching a burst blister</DoAndDontList.Item>
- *             <DoAndDontList.Item>
- *                 allow the fluid in a burst blister to drain before covering it with a plaster or dressing
- *             </DoAndDontList.Item>
- *         </DoAndDontList>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof DoAndDontList> = {
   title: 'Content Presentation/DoAndDontList',

stories/Content Presentation/NotificationBanner.stories.tsx

@@ -5,32 +5,13 @@ import { NotificationBannerLink } from '#components/content-presentation/notific
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/notification-banner" target="_blank">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `NotificationBanner` component has three subcomponents:
  *
  * - `NotificationBanner.Title`
  * - `NotificationBanner.Heading`
  * - `NotificationBanner.Link`
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { NotificationBanner } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <NotificationBanner>
- *             <NotificationBanner.Heading>Patient record updated</Details.Summary>
- *             <p>
- *                 Contact <NotificationBanner.Link href="#">example@department.nhs.uk</NotificationBanner.Link> if you think there&#39;s a problem.
- *             </p>
- *         </NotificationBanner>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof NotificationBanner> = {
   title: 'Content Presentation/Notification Banner',

stories/Form Elements/Button.stories.tsx

@@ -4,37 +4,37 @@ import { Button } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/components/button" target="_blank" rel="noopener noreferrer">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `Button` component from `nhsuk-react-components` will either render a standard `<button>` or `<a>` element depending on whether an `href` prop is supplied.
  *
  * If you want to use a specific component instead of the wrapper, you can supply the `as="a"` or `as="button"` props.
  *
  * ## Usage
  *
- * ### Standard
+ * ### As a button
  *
  * ```jsx
  * import { Button } from "nhsuk-react-components";
  *
  * const Element = () => {
- *     return (
- *         <Button>Button</Button>
- *     );
+ *   return (
+ *     <Button>Button</Button>
+ *   );
  * }
  * ```
  *
- * ### As a Link
+ * ### As a link
  *
  * ```jsx
  * import { Button } from "nhsuk-react-components";
  *
  * const ButtonEl = () => (
- *     <Button as="a">Anchor</Button>
+ *   <Button as="a">Anchor</Button>
  * );
  *
  * const ButtonEl2 = () => (
- *     <Button href="/link">Anchor</Button>
+ *   <Button href="/link">Anchor</Button>
  * );
  * ```
  */

stories/Form Elements/Checkboxes.stories.tsx

@@ -5,29 +5,11 @@ import { Checkboxes, TextInput } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/checkboxes" target="_blank" rel="noopener noreferrer">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * For details on the new form design pattern, check the documentation for the `Form` component.
  *
  * The `Checkbox` component provides a `CheckboxesContext` context, which the `Checkboxes.Item` components use. When each box initially renders, it will attempt to assign itself an `id` by calling the `getBoxId` method in the context. This will assign each box a sequential ID using either the `idPrefix` or `name` supplied to the Checkbox. If neither are provided, the element will generate it's own unique identifier.
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { Checkboxes } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <Checkboxes name="nationality" id="nationality">
- *             <Checkboxes.Item value="british">British</Checkboxes.Item>
- *             <Checkboxes.Item value="irish">Irish</Checkboxes.Item>
- *             <Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
- *         </Checkboxes>
- *     );
- * }
- * ```
  */
 
 const meta: Meta<typeof Checkboxes> = {

stories/Form Elements/ErrorMessage.stories.tsx

@@ -3,24 +3,6 @@ import { ErrorMessage } from '#components';
 
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/error-message" target="_blank" rel="noopener noreferrer">here</a>.
- *
- * ## Implementation Notes
- *
- * The `ErrorMessage` component has a default `visuallyHiddenText` of "Error: ". This can be overriden using `visuallyHiddenText`.
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { ErrorMessage } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <ErrorMessage>Enter your full name</ErrorMessage>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof ErrorMessage> = {
   title: 'Form Elements/ErrorMessage',

stories/Form Elements/ErrorSummary.stories.tsx

@@ -4,35 +4,13 @@ import { ErrorSummary } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/error-summary" target="_blank" rel="noopener noreferrer">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `ErrorSummary` component has three subcomponents:
  *
  * - `ErrorSummary.Title`
  * - `ErrorSummary.List`
  * - `ErrorSummary.ListItem`
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { ErrorSummary } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <ErrorSummary>
- *             <ErrorSummary.Title>There is a problem</ErrorSummary.Title>
- *             <p>Describe the errors and how to correct them</p>
- *             <ErrorSummary.List>
- *                 <ErrorSummary.ListItem href="#example-error-1">
- *                     Date of birth must be in the past
- *                 </ErrorSummary.ListItem>
- *             </ErrorSummary.List>
- *         </ErrorSummary>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof ErrorSummary> = {
   title: 'Form Elements/ErrorSummary',

stories/Form Elements/Fieldset.stories.tsx

@@ -3,28 +3,6 @@ import { Fieldset, TextInput } from '#components';
 
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/fieldset" target="_blank" rel="noopener noreferrer">here</a>.
- *
- * ## Implementation Notes
- *
- * The `Fieldset` component has one subcomponent: `Fieldset.Legend`.
- *
- * The `Fieldset.Legend` component has one default prop: `headingLevel: 'h1'`. This can be overridden and any valid heading level can be used (i.e. `h1`, `h2`).
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { Fieldset } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <Fieldset>
- *             <Fieldset.Legend isPageHeading size="l">What is your address?</Fieldset.Legend>
- *         </Fieldset>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof Fieldset> = {
   title: 'Form Elements/Fieldset',

stories/Navigation/Breadcrumb.stories.tsx

@@ -3,33 +3,6 @@ import { Breadcrumb, Container } from '#components';
 
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/components/breadcrumb" target="_blank">here</a>.
- *
- *
- * ## Implementation Notes
- *
- * The `Breadcrumb` component contains two subcomponents: `Breadcrumb.Item` and `Breadcrumb.Back`. These are both anchor elements.
- *
- * The base `Breadcrumb` component has the default prop `aria-label` set to `"Breadcrumb"`. This is only a default prop and can be overridden.
- *
- * ## Usage
- *
- * ```jsx
- * import { Breadcrumb } from "nhsuk-react-components";
- *
- * const Link = () => {
- *     return (
- *         <Container>
- *           <Breadcrumb>
- *             <Breadcrumb.Item href="/level-one">Level one</Breadcrumb.Item>
- *             <Breadcrumb.Item href="/level-one/level-two">Level two</Breadcrumb.Item>
- *             <Breadcrumb.Item href="/level-one/level-two/level-three">Level three</Breadcrumb.Item>
- *             <Breadcrumb.Back href="/level-one/level-two/level-three">Level three</Breadcrumb.Back>
- *           </Breadcrumb>
- *         </Container>
- *
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof Breadcrumb> = {
   title: 'Navigation/Breadcrumb',