From d92ed5b6d23caa5df8d56cbabd53b98d12f9f52c Mon Sep 17 00:00:00 2001
From: Kai Spencer <Kai@Kais-MacBook-Pro.local>
Date: Thu, 12 Aug 2021 22:21:34 +0100
Subject: [PATCH 01/11] Initial files copied from Portal repo

---
 src/components/file-upload/FileUpload.scss | 38 ++++++++++++++++
 src/components/file-upload/FileUpload.tsx  | 42 +++++++++++++++++
 src/components/file-upload/README.md       | 52 ++++++++++++++++++++++
 src/components/file-upload/index.ts        |  3 ++
 stories/FileUpload.stories.tsx             |  9 ++++
 5 files changed, 144 insertions(+)
 create mode 100644 src/components/file-upload/FileUpload.scss
 create mode 100644 src/components/file-upload/FileUpload.tsx
 create mode 100644 src/components/file-upload/README.md
 create mode 100644 src/components/file-upload/index.ts
 create mode 100644 stories/FileUpload.stories.tsx

diff --git a/src/components/file-upload/FileUpload.scss b/src/components/file-upload/FileUpload.scss
new file mode 100644
index 0000000..1a88c1d
--- /dev/null
+++ b/src/components/file-upload/FileUpload.scss
@@ -0,0 +1,38 @@
+$nhsuk-input-border-colour: #0b0c0c;
+$component-padding: nhsuk-spacing(1);
+
+.nhsuk-file-upload {
+  @include nhsuk-font($size: 19);
+  margin-left: -$component-padding;
+  padding: $component-padding;
+
+  // The default file upload button in Safari does not
+  // support setting a custom font-size. Set `-webkit-appearance`
+  // to `button` to drop out of the native appearance so the
+  // font-size is set to 19px
+  // https://bugs.webkit.org/show_bug.cgi?id=224746
+  &::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    color: inherit;
+    font: inherit;
+  }
+
+  &:focus {
+    outline: $nhsuk-focus-width solid $nhsuk-focus-color;
+    // Use `box-shadow` to add border instead of changing `border-width`
+    // (which changes element size) and since `outline` is already used for the
+    // yellow focus state.
+    box-shadow: inset 0 0 0 4px $nhsuk-input-border-colour;
+  }
+
+  // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196
+  // so that component receives focus in Firefox.
+  // This can't be set together with `:focus` as all versions of IE fail
+  // to recognise `focus-within` and don't set any styles from the block
+  // when it's a selector.
+  &:focus-within {
+    outline: $nhsuk-focus-width solid $nhsuk-focus-color;
+
+    box-shadow: inset 0 0 0 4px $nhsuk-input-border-colour;
+  }
+}
diff --git a/src/components/file-upload/FileUpload.tsx b/src/components/file-upload/FileUpload.tsx
new file mode 100644
index 0000000..8466b4e
--- /dev/null
+++ b/src/components/file-upload/FileUpload.tsx
@@ -0,0 +1,42 @@
+import { Hint } from 'nhsuk-react-components';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactChild;
+  error?: string;
+  hint?: string;
+}
+
+function FileUpload({ error, hint, children, ...rest }: Props) {
+  return (
+    <>
+      <div className={`nhsuk-form-group ${error ? 'nhsuk-form-group--error' : ''}`} {...rest}>
+        <label htmlFor="file-select-input-id" className="nhsuk-label">
+          {children}
+        </label>
+        {error && (
+          <span
+            id="file-select-error-id"
+            data-test-id="file-select-error"
+            className="nhsuk-error-message"
+          >
+            <span className="nhsuk-visually-hidden">Error: </span>
+            {error}
+          </span>
+        )}
+        {hint && <Hint data-test-id="file-hint">{hint}</Hint>}
+        <input
+          aria-describedby="file-select-label"
+          id="file-select-input-id"
+          data-test-id="file-select-input"
+          className="nhsuk-file-upload"
+          name="file-select-input"
+          type="file"
+          title="file select input"
+        />
+      </div>
+    </>
+  );
+}
+
+export default FileUpload;
diff --git a/src/components/file-upload/README.md b/src/components/file-upload/README.md
new file mode 100644
index 0000000..c97348d
--- /dev/null
+++ b/src/components/file-upload/README.md
@@ -0,0 +1,52 @@
+# FileSelect
+
+### Import
+
+```js
+import FileSelect from "components/FileSelect/FileSelect";
+```
+
+### Usage
+
+Simple
+
+```jsx
+import FileSelect from "components/FileSelect/FileSelect";
+
+<FileSelect>Upload a document</FileSelect>;
+```
+
+Input with hint text
+
+```jsx
+import FileSelect from "components/FileSelect/FileSelect";
+
+<FileSelect
+  accept=".jpg, .png"
+  hint={["This can be in either JPG or PNG format."]}
+>
+  Upload a photo
+</FileSelect>;
+```
+
+Input with hint & error text
+
+```jsx
+import FileSelect from "components/FileSelect/FileSelect";
+
+<FileSelect
+  accept=".jpg, .png"
+  hint="This can be in either JPG or PNG format."
+  error="The selected file must be a .jpg or a .png."
+>
+  Upload a photo
+</FileSelect>;
+```
+
+### Properties
+
+| Prop       | Required | Default     | Type   | Description         |
+| :--------- | :------- | :---------- | :----- | :------------------ |
+| `children` | true     | ``````      | node   |
+| `hint`     |          | `undefined` | string | Optional hint text  |
+| `error`    |          | `undefined` | string | Optional error text |
diff --git a/src/components/file-upload/index.ts b/src/components/file-upload/index.ts
new file mode 100644
index 0000000..1ad83ea
--- /dev/null
+++ b/src/components/file-upload/index.ts
@@ -0,0 +1,3 @@
+import FileUpload from './FileUpload';
+
+export default FileUpload;
diff --git a/stories/FileUpload.stories.tsx b/stories/FileUpload.stories.tsx
new file mode 100644
index 0000000..6d964f3
--- /dev/null
+++ b/stories/FileUpload.stories.tsx
@@ -0,0 +1,9 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { FileUpload } from '../src';
+const stories = storiesOf('File Upload', module);
+
+stories
+  .add('Standard', () => <FileUpload>Upload a file</FileUpload>)
+  .add('With Error', () => <FileUpload error="Invalid file type">Upload a file</FileUpload>);

From f088d229da0e901dba79c5d2c4628ff4cc2cb8de Mon Sep 17 00:00:00 2001
From: Kai Spencer <kaispencer98@gmail.com>
Date: Thu, 12 Aug 2021 23:26:24 +0100
Subject: [PATCH 02/11] Add stories

---
 .storybook/_storybook.scss     |  4 ++++
 stories/FileUpload.stories.tsx | 18 ++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/.storybook/_storybook.scss b/.storybook/_storybook.scss
index 8be4b68..13521bf 100644
--- a/.storybook/_storybook.scss
+++ b/.storybook/_storybook.scss
@@ -39,3 +39,7 @@
 .ribbonlink-demo {
   padding: 20px;
 }
+
+.fileupload-demo {
+  padding: 20px;
+}
diff --git a/stories/FileUpload.stories.tsx b/stories/FileUpload.stories.tsx
index 6d964f3..f6604ad 100644
--- a/stories/FileUpload.stories.tsx
+++ b/stories/FileUpload.stories.tsx
@@ -2,8 +2,22 @@
 import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react';
 import { FileUpload } from '../src';
+
 const stories = storiesOf('File Upload', module);
 
 stories
-  .add('Standard', () => <FileUpload>Upload a file</FileUpload>)
-  .add('With Error', () => <FileUpload error="Invalid file type">Upload a file</FileUpload>);
+  .add('Standard', () => (
+    <div className="fileupload-demo">
+      <FileUpload>Upload a file</FileUpload>
+    </div>
+  ))
+  .add('With Error', () => (
+    <div className="fileupload-demo">
+      <FileUpload error="Invalid file type">Upload a file</FileUpload>
+    </div>
+  ))
+  .add('With Hint', () => (
+    <div className="fileupload-demo">
+      <FileUpload hint="Maximum file size 2GB">Upload a File</FileUpload>
+    </div>
+  ));

From 02d641131b7988c476cc28465976191497bb9855 Mon Sep 17 00:00:00 2001
From: Kai Spencer <kaispencer98@gmail.com>
Date: Thu, 12 Aug 2021 23:28:42 +0100
Subject: [PATCH 03/11] Add File Upload style import

---
 src/components.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components.scss b/src/components.scss
index 8639730..2717132 100644
--- a/src/components.scss
+++ b/src/components.scss
@@ -10,3 +10,6 @@
 @import './components/tooltip/Tooltip';
 @import './components/ribbon-link/RibbonLink';
 @import './components/timeline/Timeline';
+
+// FileUpload
+@import './components/file-upload/FileUpload';

From 9b67655bb669a9a664e3c2506c4269abe87797c9 Mon Sep 17 00:00:00 2001
From: Kai Spencer <kaispencer98@gmail.com>
Date: Thu, 12 Aug 2021 23:29:05 +0100
Subject: [PATCH 04/11] Add File Upload export

---
 src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.ts b/src/index.ts
index 8567e3e..c1b2123 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 export { default as AccordionMenu } from './components/accordion-menu';
+export { default as FileUpload } from './components/file-upload';
 export { default as MaskedInput } from './components/masked-input';
 export { default as RibbonLink } from './components/ribbon-link';
 export { default as SubNavigation } from './components/sub-navigation';

From cc8fdc74d5a1aed84c6e7f292e5de3e05c423c31 Mon Sep 17 00:00:00 2001
From: Kai Spencer <kaispencer98@gmail.com>
Date: Thu, 12 Aug 2021 23:29:22 +0100
Subject: [PATCH 05/11] File Upload Tests

---
 src/__tests__/index.test.ts                   |  1 +
 .../file-upload/__tests__/FileUpload.test.tsx | 16 ++++++
 .../__snapshots__/FileUpload.test.tsx.snap    | 51 +++++++++++++++++++
 3 files changed, 68 insertions(+)
 create mode 100644 src/components/file-upload/__tests__/FileUpload.test.tsx
 create mode 100644 src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap

diff --git a/src/__tests__/index.test.ts b/src/__tests__/index.test.ts
index cbadf6f..3558185 100644
--- a/src/__tests__/index.test.ts
+++ b/src/__tests__/index.test.ts
@@ -4,6 +4,7 @@ describe('Index', () => {
   it('contains all expected elements', () => {
     expect(Object.keys(index)).toEqual([
       'AccordionMenu',
+      'FileUpload',
       'MaskedInput',
       'RibbonLink',
       'SubNavigation',
diff --git a/src/components/file-upload/__tests__/FileUpload.test.tsx b/src/components/file-upload/__tests__/FileUpload.test.tsx
new file mode 100644
index 0000000..0e384c1
--- /dev/null
+++ b/src/components/file-upload/__tests__/FileUpload.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import FileUpload from '../FileUpload';
+
+describe('FileUpload', () => {
+  it('Matches snapshot', () => {
+    const component = shallow(<FileUpload>Upload</FileUpload>);
+    expect(component).toMatchSnapshot();
+    component.unmount();
+  });
+  it('With Error', () => {
+    const component = shallow(<FileUpload error="something wrong">Upload</FileUpload>);
+    expect(component).toMatchSnapshot();
+    component.unmount();
+  });
+});
diff --git a/src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap
new file mode 100644
index 0000000..7d151b3
--- /dev/null
+++ b/src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileUpload Matches snapshot 1`] = `
+<div
+  className="nhsuk-form-group "
+>
+  <label
+    className="nhsuk-label"
+    htmlFor="file-upload-label"
+  >
+    Upload
+  </label>
+  <input
+    aria-describedby="file-upload-label"
+    className="nhsuk-file-upload"
+    id="file-upload"
+    type="file"
+  />
+</div>
+`;
+
+exports[`FileUpload With Error 1`] = `
+<div
+  className="nhsuk-form-group nhsuk-form-group--error"
+>
+  <label
+    className="nhsuk-label"
+    htmlFor="file-upload-label"
+  >
+    Upload
+  </label>
+  <span
+    className="nhsuk-error-message"
+    data-test-id="file-select-error"
+    id="file-select-error-id"
+  >
+    <span
+      className="nhsuk-visually-hidden"
+    >
+      Error: 
+    </span>
+    something wrong
+  </span>
+  <input
+    aria-describedby="file-upload-label"
+    className="nhsuk-file-upload"
+    id="file-upload"
+    type="file"
+  />
+</div>
+`;

From 645e49f227edbf7e20a028f77d4689fee94cabfa Mon Sep 17 00:00:00 2001
From: Kai Spencer <kaispencer98@gmail.com>
Date: Thu, 12 Aug 2021 23:29:57 +0100
Subject: [PATCH 06/11] File Upload component

---
 src/components/file-upload/FileUpload.tsx | 64 +++++++++++------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/components/file-upload/FileUpload.tsx b/src/components/file-upload/FileUpload.tsx
index 8466b4e..564bac6 100644
--- a/src/components/file-upload/FileUpload.tsx
+++ b/src/components/file-upload/FileUpload.tsx
@@ -1,42 +1,42 @@
 import { Hint } from 'nhsuk-react-components';
-import React from 'react';
+import React, { HTMLProps } from 'react';
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactChild;
+interface FileUploadProps extends HTMLProps<HTMLDivElement> {
   error?: string;
   hint?: string;
+  children: React.ReactNode;
 }
 
-function FileUpload({ error, hint, children, ...rest }: Props) {
+const FileUpload: React.FC<FileUploadProps> = ({
+  error,
+  hint,
+  children,
+  ...rest
+}: FileUploadProps) => {
   return (
-    <>
-      <div className={`nhsuk-form-group ${error ? 'nhsuk-form-group--error' : ''}`} {...rest}>
-        <label htmlFor="file-select-input-id" className="nhsuk-label">
-          {children}
-        </label>
-        {error && (
-          <span
-            id="file-select-error-id"
-            data-test-id="file-select-error"
-            className="nhsuk-error-message"
-          >
-            <span className="nhsuk-visually-hidden">Error: </span>
-            {error}
-          </span>
-        )}
-        {hint && <Hint data-test-id="file-hint">{hint}</Hint>}
-        <input
-          aria-describedby="file-select-label"
-          id="file-select-input-id"
-          data-test-id="file-select-input"
-          className="nhsuk-file-upload"
-          name="file-select-input"
-          type="file"
-          title="file select input"
-        />
-      </div>
-    </>
+    <div className={`nhsuk-form-group ${error ? 'nhsuk-form-group--error' : ''}`} {...rest}>
+      <label htmlFor="file-upload-label" className="nhsuk-label">
+        {children}
+      </label>
+      {error && (
+        <span
+          id="file-select-error-id"
+          data-test-id="file-select-error"
+          className="nhsuk-error-message"
+        >
+          <span className="nhsuk-visually-hidden">Error: </span>
+          {error}
+        </span>
+      )}
+      {hint && <Hint data-test-id="file-hint">{hint}</Hint>}
+      <input
+        aria-describedby="file-upload-label"
+        id="file-upload"
+        className="nhsuk-file-upload"
+        type="file"
+      />
+    </div>
   );
-}
+};
 
 export default FileUpload;

From 60b0aa9d42521d61216ac7caf301bf7e89a69721 Mon Sep 17 00:00:00 2001
From: Kai Spencer <kaispencer98@gmail.com>
Date: Thu, 12 Aug 2021 23:33:56 +0100
Subject: [PATCH 07/11] Remove Portal specific readme

---
 src/components/file-upload/README.md | 52 ----------------------------
 1 file changed, 52 deletions(-)
 delete mode 100644 src/components/file-upload/README.md

diff --git a/src/components/file-upload/README.md b/src/components/file-upload/README.md
deleted file mode 100644
index c97348d..0000000
--- a/src/components/file-upload/README.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# FileSelect
-
-### Import
-
-```js
-import FileSelect from "components/FileSelect/FileSelect";
-```
-
-### Usage
-
-Simple
-
-```jsx
-import FileSelect from "components/FileSelect/FileSelect";
-
-<FileSelect>Upload a document</FileSelect>;
-```
-
-Input with hint text
-
-```jsx
-import FileSelect from "components/FileSelect/FileSelect";
-
-<FileSelect
-  accept=".jpg, .png"
-  hint={["This can be in either JPG or PNG format."]}
->
-  Upload a photo
-</FileSelect>;
-```
-
-Input with hint & error text
-
-```jsx
-import FileSelect from "components/FileSelect/FileSelect";
-
-<FileSelect
-  accept=".jpg, .png"
-  hint="This can be in either JPG or PNG format."
-  error="The selected file must be a .jpg or a .png."
->
-  Upload a photo
-</FileSelect>;
-```
-
-### Properties
-
-| Prop       | Required | Default     | Type   | Description         |
-| :--------- | :------- | :---------- | :----- | :------------------ |
-| `children` | true     | ``````      | node   |
-| `hint`     |          | `undefined` | string | Optional hint text  |
-| `error`    |          | `undefined` | string | Optional error text |

From 20cf41c94a82be41993da184479932ed0292b9f5 Mon Sep 17 00:00:00 2001
From: Kai Spencer <kaispencer98@gmail.com>
Date: Thu, 12 Aug 2021 23:37:50 +0100
Subject: [PATCH 08/11] File Upload hint test

---
 .../file-upload/__tests__/FileUpload.test.tsx |  5 ++++
 .../__snapshots__/FileUpload.test.tsx.snap    | 24 +++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/components/file-upload/__tests__/FileUpload.test.tsx b/src/components/file-upload/__tests__/FileUpload.test.tsx
index 0e384c1..a01b359 100644
--- a/src/components/file-upload/__tests__/FileUpload.test.tsx
+++ b/src/components/file-upload/__tests__/FileUpload.test.tsx
@@ -13,4 +13,9 @@ describe('FileUpload', () => {
     expect(component).toMatchSnapshot();
     component.unmount();
   });
+  it('With Hint', () => {
+    const component = shallow(<FileUpload hint="Format: JPG">Upload</FileUpload>);
+    expect(component).toMatchSnapshot();
+    component.unmount();
+  });
 });
diff --git a/src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap
index 7d151b3..eae1348 100644
--- a/src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap
+++ b/src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap
@@ -49,3 +49,27 @@ exports[`FileUpload With Error 1`] = `
   />
 </div>
 `;
+
+exports[`FileUpload With Hint 1`] = `
+<div
+  className="nhsuk-form-group "
+>
+  <label
+    className="nhsuk-label"
+    htmlFor="file-upload-label"
+  >
+    Upload
+  </label>
+  <Hint
+    data-test-id="file-hint"
+  >
+    Format: JPG
+  </Hint>
+  <input
+    aria-describedby="file-upload-label"
+    className="nhsuk-file-upload"
+    id="file-upload"
+    type="file"
+  />
+</div>
+`;

From 67386150a56ddc33945172c24fd6a06c1b39a0a2 Mon Sep 17 00:00:00 2001
From: Kai Spencer <kaispencer98@gmail.com>
Date: Thu, 12 Aug 2021 23:40:56 +0100
Subject: [PATCH 09/11] Tidy imports

---
 stories/FileUpload.stories.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/stories/FileUpload.stories.tsx b/stories/FileUpload.stories.tsx
index f6604ad..2351d05 100644
--- a/stories/FileUpload.stories.tsx
+++ b/stories/FileUpload.stories.tsx
@@ -1,5 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import React, { useState } from 'react';
+import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { FileUpload } from '../src';
 

From de28c3d6dce2f4848a1cf9afd211b4c3c8775cfc Mon Sep 17 00:00:00 2001
From: Kai <kaispencer98@gmail.com>
Date: Wed, 8 Sep 2021 11:50:15 +0100
Subject: [PATCH 10/11] File Upload review comments, simplification using
 existing components.

---
 src/components/file-upload/FileUpload.tsx | 35 +++++------------------
 1 file changed, 7 insertions(+), 28 deletions(-)

diff --git a/src/components/file-upload/FileUpload.tsx b/src/components/file-upload/FileUpload.tsx
index 564bac6..7770366 100644
--- a/src/components/file-upload/FileUpload.tsx
+++ b/src/components/file-upload/FileUpload.tsx
@@ -1,40 +1,19 @@
-import { Hint } from 'nhsuk-react-components';
+import classNames from 'classnames';
+import { ErrorMessage, Hint, Label } from 'nhsuk-react-components';
 import React, { HTMLProps } from 'react';
 
 interface FileUploadProps extends HTMLProps<HTMLDivElement> {
   error?: string;
   hint?: string;
-  children: React.ReactNode;
 }
 
-const FileUpload: React.FC<FileUploadProps> = ({
-  error,
-  hint,
-  children,
-  ...rest
-}: FileUploadProps) => {
+const FileUpload: React.FC<FileUploadProps> = ({ error, hint, children, id, ...rest }) => {
   return (
-    <div className={`nhsuk-form-group ${error ? 'nhsuk-form-group--error' : ''}`} {...rest}>
-      <label htmlFor="file-upload-label" className="nhsuk-label">
-        {children}
-      </label>
-      {error && (
-        <span
-          id="file-select-error-id"
-          data-test-id="file-select-error"
-          className="nhsuk-error-message"
-        >
-          <span className="nhsuk-visually-hidden">Error: </span>
-          {error}
-        </span>
-      )}
+    <div className={classNames('nhsuk-form-group', { 'nhsuk-form-group--error': error })} {...rest}>
+      <Label htmlFor={id}>{children}</Label>
+      {error && <ErrorMessage>{error}</ErrorMessage>}
       {hint && <Hint data-test-id="file-hint">{hint}</Hint>}
-      <input
-        aria-describedby="file-upload-label"
-        id="file-upload"
-        className="nhsuk-file-upload"
-        type="file"
-      />
+      <input aria-describedby={id} id="file-upload" className="nhsuk-file-upload" type="file" />
     </div>
   );
 };

From c0f17cf3c73e6b7b4ca9a36e5d7429136529cc70 Mon Sep 17 00:00:00 2001
From: Kai <kaispencer98@gmail.com>
Date: Mon, 27 Sep 2021 22:23:51 +0100
Subject: [PATCH 11/11] Review comments: adding more tests for conditionals

---
 src/components/file-upload/FileUpload.tsx     |   2 +-
 .../file-upload/__tests__/FileUpload.test.tsx |  13 +-
 .../__snapshots__/FileUpload.test.tsx.snap    | 116 ++++++++++--------
 3 files changed, 76 insertions(+), 55 deletions(-)

diff --git a/src/components/file-upload/FileUpload.tsx b/src/components/file-upload/FileUpload.tsx
index 7770366..2c77460 100644
--- a/src/components/file-upload/FileUpload.tsx
+++ b/src/components/file-upload/FileUpload.tsx
@@ -12,7 +12,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ error, hint, children, id, ...r
     <div className={classNames('nhsuk-form-group', { 'nhsuk-form-group--error': error })} {...rest}>
       <Label htmlFor={id}>{children}</Label>
       {error && <ErrorMessage>{error}</ErrorMessage>}
-      {hint && <Hint data-test-id="file-hint">{hint}</Hint>}
+      {hint && <Hint>{hint}</Hint>}
       <input aria-describedby={id} id="file-upload" className="nhsuk-file-upload" type="file" />
     </div>
   );
diff --git a/src/components/file-upload/__tests__/FileUpload.test.tsx b/src/components/file-upload/__tests__/FileUpload.test.tsx
index a01b359..264a3c4 100644
--- a/src/components/file-upload/__tests__/FileUpload.test.tsx
+++ b/src/components/file-upload/__tests__/FileUpload.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import FileUpload from '../FileUpload';
 
 describe('FileUpload', () => {
@@ -9,13 +9,20 @@ describe('FileUpload', () => {
     component.unmount();
   });
   it('With Error', () => {
-    const component = shallow(<FileUpload error="something wrong">Upload</FileUpload>);
+    const component = mount(<FileUpload error="something wrong">Upload</FileUpload>);
     expect(component).toMatchSnapshot();
+
+    const renderedComponent = component.render();
+    expect(renderedComponent.find('span').prop('class')).toBe('nhsuk-error-message');
+
     component.unmount();
   });
   it('With Hint', () => {
-    const component = shallow(<FileUpload hint="Format: JPG">Upload</FileUpload>);
+    const component = mount(<FileUpload hint="Format: JPG">Upload</FileUpload>);
     expect(component).toMatchSnapshot();
+
+    const renderedComponent = component.render();
+    expect(renderedComponent.find('span').prop('class')).toBe('nhsuk-hint');
     component.unmount();
   });
 });
diff --git a/src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap
index eae1348..f381fbe 100644
--- a/src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap
+++ b/src/components/file-upload/__tests__/__snapshots__/FileUpload.test.tsx.snap
@@ -2,16 +2,12 @@
 
 exports[`FileUpload Matches snapshot 1`] = `
 <div
-  className="nhsuk-form-group "
+  className="nhsuk-form-group"
 >
-  <label
-    className="nhsuk-label"
-    htmlFor="file-upload-label"
-  >
+  <Label>
     Upload
-  </label>
+  </Label>
   <input
-    aria-describedby="file-upload-label"
     className="nhsuk-file-upload"
     id="file-upload"
     type="file"
@@ -20,56 +16,74 @@ exports[`FileUpload Matches snapshot 1`] = `
 `;
 
 exports[`FileUpload With Error 1`] = `
-<div
-  className="nhsuk-form-group nhsuk-form-group--error"
+<FileUpload
+  error="something wrong"
 >
-  <label
-    className="nhsuk-label"
-    htmlFor="file-upload-label"
+  <div
+    className="nhsuk-form-group nhsuk-form-group--error"
   >
-    Upload
-  </label>
-  <span
-    className="nhsuk-error-message"
-    data-test-id="file-select-error"
-    id="file-select-error-id"
-  >
-    <span
-      className="nhsuk-visually-hidden"
+    <Label>
+      <BaseLabel>
+        <label
+          className="nhsuk-label"
+        >
+          Upload
+        </label>
+      </BaseLabel>
+    </Label>
+    <ErrorMessage
+      role="alert"
+      visuallyHiddenText="Error: "
     >
-      Error: 
-    </span>
-    something wrong
-  </span>
-  <input
-    aria-describedby="file-upload-label"
-    className="nhsuk-file-upload"
-    id="file-upload"
-    type="file"
-  />
-</div>
+      <span
+        className="nhsuk-error-message"
+        role="alert"
+      >
+        <span
+          className="nhsuk-u-visually-hidden"
+        >
+          Error: 
+        </span>
+        something wrong
+      </span>
+    </ErrorMessage>
+    <input
+      className="nhsuk-file-upload"
+      id="file-upload"
+      type="file"
+    />
+  </div>
+</FileUpload>
 `;
 
 exports[`FileUpload With Hint 1`] = `
-<div
-  className="nhsuk-form-group "
+<FileUpload
+  hint="Format: JPG"
 >
-  <label
-    className="nhsuk-label"
-    htmlFor="file-upload-label"
-  >
-    Upload
-  </label>
-  <Hint
-    data-test-id="file-hint"
+  <div
+    className="nhsuk-form-group"
   >
-    Format: JPG
-  </Hint>
-  <input
-    aria-describedby="file-upload-label"
-    className="nhsuk-file-upload"
-    id="file-upload"
-    type="file"
-  />
-</div>
+    <Label>
+      <BaseLabel>
+        <label
+          className="nhsuk-label"
+        >
+          Upload
+        </label>
+      </BaseLabel>
+    </Label>
+    <Hint>
+      <span
+        className="nhsuk-hint"
+      >
+        Format: JPG
+      </span>
+    </Hint>
+    <input
+      className="nhsuk-file-upload"
+      id="file-upload"
+      type="file"
+    />
+  </div>
+</FileUpload>
 `;