From 762399f6808542356005e22e7d76098a3eddbb6f Mon Sep 17 00:00:00 2001
From: "Adam A. Zerella" <adamzerella@users.noreply.github.com>
Date: Fri, 5 Apr 2019 10:50:08 +1100
Subject: [PATCH 1/4] Added baseline file-upload functionality

---
 packages/file-upload/CHANGELOG.md             |  34 ++++++
 packages/file-upload/LICENSE                  |  21 ++++
 packages/file-upload/README.md                |  83 ++++++++++++++
 packages/file-upload/package.json             | 106 ++++++++++++++++++
 packages/file-upload/src/js/react.js          |  45 ++++++++
 .../file-upload/src/sass/_dependencies.scss   |   6 +
 packages/file-upload/src/sass/_globals.scss   |  25 +++++
 packages/file-upload/src/sass/_module.scss    |  23 ++++
 packages/file-upload/src/sass/_print.scss     |  11 ++
 packages/file-upload/tests/index.html         |  53 +++++++++
 packages/file-upload/tests/react/.babelrc     |   3 +
 packages/file-upload/tests/react/index.html   |  41 +++++++
 packages/file-upload/tests/react/index.js     |  13 +++
 .../file-upload/tests/react/webpack.config.js |  19 ++++
 packages/file-upload/tests/site/index.html    |  54 +++++++++
 packages/file-upload/tests/site/test.scss     |   8 ++
 16 files changed, 545 insertions(+)
 create mode 100644 packages/file-upload/CHANGELOG.md
 create mode 100644 packages/file-upload/LICENSE
 create mode 100644 packages/file-upload/README.md
 create mode 100644 packages/file-upload/package.json
 create mode 100644 packages/file-upload/src/js/react.js
 create mode 100644 packages/file-upload/src/sass/_dependencies.scss
 create mode 100644 packages/file-upload/src/sass/_globals.scss
 create mode 100644 packages/file-upload/src/sass/_module.scss
 create mode 100644 packages/file-upload/src/sass/_print.scss
 create mode 100644 packages/file-upload/tests/index.html
 create mode 100644 packages/file-upload/tests/react/.babelrc
 create mode 100644 packages/file-upload/tests/react/index.html
 create mode 100644 packages/file-upload/tests/react/index.js
 create mode 100644 packages/file-upload/tests/react/webpack.config.js
 create mode 100644 packages/file-upload/tests/site/index.html
 create mode 100644 packages/file-upload/tests/site/test.scss

diff --git a/packages/file-upload/CHANGELOG.md b/packages/file-upload/CHANGELOG.md
new file mode 100644
index 000000000..e9319b330
--- /dev/null
+++ b/packages/file-upload/CHANGELOG.md
@@ -0,0 +1,34 @@
+@gov.au/file-upload CHANGELOG
+======================
+
+> Part of the [gov.au components](https://github.com/govau/design-system-components/) ecosystem.
+
+
+## Contents
+
+* [Versions](#install)
+* [Release History](#release-history)
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## Versions
+
+* [v0.1.0 - 💥 Initial version](#v010)
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## Release History
+
+### v0.1.0
+
+- 💥 Initial version
+
+
+**[⬆ back to top](#contents)**
+
+
+# };
diff --git a/packages/file-upload/LICENSE b/packages/file-upload/LICENSE
new file mode 100644
index 000000000..c7dff0c0c
--- /dev/null
+++ b/packages/file-upload/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Commonwealth of Australia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/file-upload/README.md b/packages/file-upload/README.md
new file mode 100644
index 000000000..87f407a0b
--- /dev/null
+++ b/packages/file-upload/README.md
@@ -0,0 +1,83 @@
+@gov.au/file-upload
+============
+
+> Select and upload a file
+
+
+## Contents
+
+* [Install](#install)
+* [Dependency graph](#dependency-graph)
+* [Tests](#tests)
+* [Release History](#release-history)
+* [License](#license)
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## Install
+
+
+```shell
+yarn add @gov.au/file-upload
+```
+
+```shell
+npm install @gov.au/file-upload --save-dev
+```
+
+
+**[⬆ back to top](#contents)**
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## Dependency graph
+
+```shell
+file-upload
+├─ core
+└─ form
+   └─ core
+```
+
+
+**[⬆ back to top](#contents)**
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## Tests
+
+The visual test: https://auds.service.gov.au/packages/file-upload/tests/site/
+
+
+**[⬆ back to top](#contents)**
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## Release History
+
+* v0.1.0 - 💥 Initial version
+
+
+**[⬆ back to top](#contents)**
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## License
+
+Copyright (c) Commonwealth of Australia.
+Licensed under [MIT](https://raw.githubusercontent.com/govau/design-system-components/packages/core/master/LICENSE).
+
+
+**[⬆ back to top](#contents)**
+
+# };
diff --git a/packages/file-upload/package.json b/packages/file-upload/package.json
new file mode 100644
index 000000000..bc49f1732
--- /dev/null
+++ b/packages/file-upload/package.json
@@ -0,0 +1,106 @@
+{
+	"name": "@gov.au/file-upload",
+	"version": "0.1.0",
+	"description": "Select and upload a file",
+	"keywords": [
+		"auds",
+		"pancake",
+		"pancake-module",
+		"sass",
+		"scss",
+		"css",
+		"gov.au",
+		"Commonwealth of Australia",
+		"design guide",
+		"design system"
+	],
+	"scripts": {
+		"postinstall": "pancake",
+		"test:a11y": "node ../../scripts/a11y.js",
+		"test:helper": "node ../../scripts/helper.js test",
+		"test": "npm-run-all --parallel test:*",
+		"prepublish": "npm run test:helper && npm run build:pre",
+		"build:pre": "node ../../scripts/helper.js precompile publish",
+		"build:js": "node ../../scripts/helper.js compile",
+		"build:react": "cd tests/react/ && webpack",
+		"build": "npm run build:pre && npm run build:js && npm run build:react",
+		"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
+		"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
+		"watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+		"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
+		"watch": "npm run build && npm-run-all --parallel serve watch:*"
+	},
+	"pancake": {
+		"pancake-module": {
+			"version": "1.0.0",
+			"plugins": [
+				"@gov.au/pancake-sass",
+				"@gov.au/pancake-react",
+				"@gov.au/pancake-json"
+			],
+			"sass": {
+				"path": "lib/sass/_module.scss",
+				"sass-versioning": true
+			},
+			"react": {
+				"path": "lib/js/react.js"
+			}
+		}
+	},
+	"main": "lib/js/react.es5.js",
+	"dependencies": {
+		"@gov.au/pancake": "~1",
+		"@gov.au/pancake-sass": "~2",
+		"@gov.au/pancake-react": "~1",
+		"@gov.au/pancake-json": "~1",
+
+		"@gov.au/core": "^3.0.0",
+		"@gov.au/form": "^0.1.0"
+	},
+	"peerDependencies": {
+		"@gov.au/core": "^3.0.0",
+		"@gov.au/form": "^0.1.0"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.3.4",
+		"babel-loader": "^8.0.5",
+		"@babel/preset-react": "^7.0.0",
+		"@babel/preset-env": "^7.3.4",
+		"browser-sync": "^2.26.3",
+		"npm-run-all": "^4.1.5",
+		"onchange": "^5.2.0",
+		"react": "^16.8.4",
+		"react-dom": "^16.8.4",
+		"webpack": "^4.29.6",
+		"webpack-cli": "^3.2.3"
+	},
+	"files": [
+		"lib/*"
+	],
+	"engines": {
+		"node": ">=0.12.0",
+		"npm": "^3.0.0"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/govau/design-system-components.git"
+	},
+	"homepage": "https://designsystem.gov.au/components/file-upload",
+	"bugs": {
+		"url": "https://github.com/govau/design-system-components/issues",
+		"email": "designsystem@digital.gov.au"
+	},
+	"author": {
+		"name": "Commonwealth of Australia, DTA",
+		"email": "designsystem@digital.gov.au",
+		"url": "https://www.dta.gov.au/"
+	},
+	"contributors": [
+		{
+			"name": "Adam Zerella",
+			"email": "hello@adamzerella.com",
+			"url": "https://adamzerella.com"
+		}
+	],
+	"license": "MIT"
+}
\ No newline at end of file
diff --git a/packages/file-upload/src/js/react.js b/packages/file-upload/src/js/react.js
new file mode 100644
index 000000000..acd17615a
--- /dev/null
+++ b/packages/file-upload/src/js/react.js
@@ -0,0 +1,45 @@
+/*! [replace-name] v[replace-version] */
+/***************************************************************************************************************************************************************
+ *
+ * file-upload function
+ *
+ * Select and upload a file
+ *
+ **************************************************************************************************************************************************************/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+/**
+ * The file upload component
+ * 
+ * @param  {string}  id               - The label ID, required
+ * @param  {string}  name             - The input name to match the ID, required
+ * @param  {string}  text             - Text of the label, required
+ * @param  {object}  attributeOptions - Any other attribute options
+ */
+const AUfileUpload = ( { id, name, text, ...attributeOptions } ) => (
+	<div className="au-file-upload au-form-group">
+		<label className="au-label" htmlFor={ id } { ...attributeOptions }>{ text }</label>
+		<input className="au-file-input" type="file" id={ name }></input>
+	</div>
+);
+
+
+AUfileUpload.propTypes = {
+	/**
+	 * 
+	 */
+	id: PropTypes.string,
+	/**
+	 * 
+	 */
+	name: PropTypes.string,
+};
+
+
+AUfileUpload.defaultProps = {};
+
+
+export default AUfileUpload;
diff --git a/packages/file-upload/src/sass/_dependencies.scss b/packages/file-upload/src/sass/_dependencies.scss
new file mode 100644
index 000000000..103176d56
--- /dev/null
+++ b/packages/file-upload/src/sass/_dependencies.scss
@@ -0,0 +1,6 @@
+//dependencies
+@import '../../../core/src/sass/_module.scss';
+@import '../../../form/src/sass/_module.scss';
+
+//this module
+@import '_module.scss';
diff --git a/packages/file-upload/src/sass/_globals.scss b/packages/file-upload/src/sass/_globals.scss
new file mode 100644
index 000000000..d70f9634b
--- /dev/null
+++ b/packages/file-upload/src/sass/_globals.scss
@@ -0,0 +1,25 @@
+/*! [replace-name] v[replace-version] */
+
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// file-upload module globals
+// Select and upload a file
+//
+// Content:
+// - Sass versioning
+// - Global variables: none so far
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// SASS VERSIONING
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+$name: "[replace-name]";
+$version: "[replace-version]";
+$dependencies: (
+	[replace-dependencies]
+);
+
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// GLOBAL VARIABLES
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+// Boy it sure is quiet here.
diff --git a/packages/file-upload/src/sass/_module.scss b/packages/file-upload/src/sass/_module.scss
new file mode 100644
index 000000000..d58ee4a09
--- /dev/null
+++ b/packages/file-upload/src/sass/_module.scss
@@ -0,0 +1,23 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// file-upload module
+// Select and upload a file
+//
+// Content:
+// - sass-versioning
+// - globals
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+@import '_globals.scss';
+@import '_print.scss';
+
+.au-file-upload{
+
+    .au-label {
+        margin-bottom: 0.25rem;
+    }
+
+    .au-file-input {
+        display: block;
+    }
+}
\ No newline at end of file
diff --git a/packages/file-upload/src/sass/_print.scss b/packages/file-upload/src/sass/_print.scss
new file mode 100644
index 000000000..1debce1fc
--- /dev/null
+++ b/packages/file-upload/src/sass/_print.scss
@@ -0,0 +1,11 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// file-upload module
+// Select and upload a file
+//
+// Content:
+// - print styles
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+@media print {
+}
diff --git a/packages/file-upload/tests/index.html b/packages/file-upload/tests/index.html
new file mode 100644
index 000000000..4adc7465b
--- /dev/null
+++ b/packages/file-upload/tests/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!--[if lt IE 8]>
+	<html class="no-js lt-ie8 lt-ie9" lang="en">
+<![endif]-->
+<!--[if IE 8]>
+	<html class="no-js lt-ie9 ie8" lang="en">
+<![endif]-->
+<!--[if IE 9 ]>
+	<html class="no-js ie9" lang="en">
+<![endif]-->
+<!--[if !(IE)]><!-->
+	<html class="no-js" lang="en">
+<!--<![endif]-->
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width">
+
+	<title>Test: File upload</title>
+
+	<script type="text/javascript">
+		var $html=document.documentElement;if($html.classList)$html.classList.remove("no-js"),$html.classList.add("js");else{var className="no-js";$html.className=$html.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," "),$html.className+=" js"}
+	</script>
+
+	<link rel="stylesheet" href="site/style.css">
+
+	<!--[if lt IE 9]>
+		<script>
+			/* https://github.com/aFarkas/html5shiv HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */
+			!function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.3",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b),"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:this,document);
+		</script>
+		<script>
+			/* https://github.com/scottjehl/Respond Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT */
+			!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
+		</script>
+	<![endif]-->
+</head>
+<body>
+	<noscript>
+		<p role="alert">This website needs JavaScript to work properly.</p>
+	</noscript>
+
+	<a class="test-link" href="../../../">&larr; back to all modules</a>
+
+	<h1 id="url">Test: File upload</h1>
+
+	<ul>
+		<li><a href="site/">Site test</a></li>
+		<li><a href="react/">React test</a></li>
+	</ul>
+
+</body>
+</html>
diff --git a/packages/file-upload/tests/react/.babelrc b/packages/file-upload/tests/react/.babelrc
new file mode 100644
index 000000000..c3a044b15
--- /dev/null
+++ b/packages/file-upload/tests/react/.babelrc
@@ -0,0 +1,3 @@
+{
+	"presets": ["@babel/preset-react", "@babel/preset-env"]
+}
\ No newline at end of file
diff --git a/packages/file-upload/tests/react/index.html b/packages/file-upload/tests/react/index.html
new file mode 100644
index 000000000..5f068d87a
--- /dev/null
+++ b/packages/file-upload/tests/react/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--[if lt IE 8]>
+	<html class="no-js lt-ie8 lt-ie9" lang="en">
+<![endif]-->
+<!--[if IE 8]>
+	<html class="no-js lt-ie9 ie8" lang="en">
+<![endif]-->
+<!--[if IE 9 ]>
+	<html class="no-js ie9" lang="en">
+<![endif]-->
+<!--[if !(IE)]><!-->
+	<html class="no-js" lang="en">
+<!--<![endif]-->
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width">
+
+	<title>Test: File upload</title>
+
+	<script type="text/javascript">
+		var $html=document.documentElement;if($html.classList)$html.classList.remove("no-js"),$html.classList.add("js");else{var className="no-js";$html.className=$html.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," "),$html.className+=" js"}
+	</script>
+
+	<link rel="stylesheet" href="./../site/style.css">
+
+</head>
+<body>
+	<noscript>
+		<p role="alert">This website needs JavaScript to work properly.</p>
+	</noscript>
+
+	<a class="test-link" href="../">&larr; back to the module index</a>
+
+	<h1>Test: File upload</h1>
+
+	<div id='root'></div>
+
+	<script src="bundle.js"></script>
+</body>
+</html>
diff --git a/packages/file-upload/tests/react/index.js b/packages/file-upload/tests/react/index.js
new file mode 100644
index 000000000..d8a577829
--- /dev/null
+++ b/packages/file-upload/tests/react/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import AUfileUpload from './file-upload';
+
+
+ReactDOM.render(
+	<div>
+		<AUfileUpload id="upload" name="upload" text="Upload a file"></AUfileUpload>
+	</div>,
+
+	document.getElementById('root'),
+);
diff --git a/packages/file-upload/tests/react/webpack.config.js b/packages/file-upload/tests/react/webpack.config.js
new file mode 100644
index 000000000..404e6d8e4
--- /dev/null
+++ b/packages/file-upload/tests/react/webpack.config.js
@@ -0,0 +1,19 @@
+const path = require( 'path' );
+
+module.exports = {
+	entry: './index.js',
+	mode: 'development',
+	output: {
+		filename: './bundle.js',
+		path: path.resolve( __dirname )
+	},
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				exclude: /node_modules/,
+				use: 'babel-loader',
+			},
+		],
+	},
+};
diff --git a/packages/file-upload/tests/site/index.html b/packages/file-upload/tests/site/index.html
new file mode 100644
index 000000000..39b1ce4d9
--- /dev/null
+++ b/packages/file-upload/tests/site/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--[if lt IE 8]>
+	<html class="no-js lt-ie8 lt-ie9" lang="en">
+<![endif]-->
+<!--[if IE 8]>
+	<html class="no-js lt-ie9 ie8" lang="en">
+<![endif]-->
+<!--[if IE 9 ]>
+	<html class="no-js ie9" lang="en">
+<![endif]-->
+<!--[if !(IE)]><!-->
+	<html class="no-js" lang="en">
+<!--<![endif]-->
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width">
+
+	<title>Test: File upload</title>
+
+	<script type="text/javascript">
+		var $html=document.documentElement;if($html.classList)$html.classList.remove("no-js"),$html.classList.add("js");else{var className="no-js";$html.className=$html.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," "),$html.className+=" js"}
+	</script>
+
+	<link rel="stylesheet" href="style.css">
+
+	<!--[if lt IE 9]>
+		<script>
+			/* https://github.com/aFarkas/html5shiv HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */
+			!function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.3",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b),"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:this,document);
+		</script>
+		<script>
+			/* https://github.com/scottjehl/Respond Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT */
+			!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
+		</script>
+	<![endif]-->
+</head>
+<body>
+	<noscript>
+		<p role="alert">This website needs JavaScript to work properly.</p>
+	</noscript>
+
+	<a class="test-link" href="../">&larr; back to the module index</a>
+
+	<h1>Test: File upload</h1>
+
+	<div class="au-file-upload au-form-group">
+		<label class="au-label" for="file-upload">Upload a file</label>
+		<input class="au-file-input" type="file" id="file-upload"></input>
+	</div>
+
+	<script type="text/javascript" src="script.js"></script>
+</body>
+</html>
diff --git a/packages/file-upload/tests/site/test.scss b/packages/file-upload/tests/site/test.scss
new file mode 100644
index 000000000..139d589bd
--- /dev/null
+++ b/packages/file-upload/tests/site/test.scss
@@ -0,0 +1,8 @@
+//dependencies
+@import '../../src/sass/_dependencies.scss';
+
+//testing includes
+@import '../../../form/src/sass/_module.scss';
+
+//styling all test files
+@import '../../../../.templates/test-assets/_style.scss';

From 37ac7023ea45e46416e1d767290de5c11f9a223d Mon Sep 17 00:00:00 2001
From: "Adam A. Zerella" <adamzerella@users.noreply.github.com>
Date: Fri, 5 Apr 2019 11:50:23 +1100
Subject: [PATCH 2/4] Added file-upload to README.md

---
 README.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/README.md b/README.md
index cdcaee5a9..6614edca2 100644
--- a/README.md
+++ b/README.md
@@ -285,6 +285,22 @@ All components have to work on the below browsers:
 ----------
 </details>
 
+<details>
+	<summary>@gov.au/file-upload</summary>
+	<br><code>npm install @gov.au/file-upload</code><br>
+	<br>See the <a href="https://auds.service.gov.au/packages/file-upload/tests/site/">visual test file for file-upload</a>
+	<br>See the <a href="https://github.com/govau/design-system-components/blob/master/packages/file-upload/README.md">readme file for file-upload</a><br><br>
+	Dependencies:
+	<br>
+
+```shell
+├─ core
+└─ form
+   └─ core
+```
+----------
+</details>
+
 <details>
 	<summary>@gov.au/footer</summary>
 	<br><code>npm install @gov.au/footer</code><br>

From ad005d47b6a6875a657c14e17350428bee167e59 Mon Sep 17 00:00:00 2001
From: "Adam A. Zerella" <adamzerella@users.noreply.github.com>
Date: Mon, 8 Apr 2019 09:48:31 +1000
Subject: [PATCH 3/4] Added prop type jsdocs and required

---
 packages/file-upload/src/js/react.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/file-upload/src/js/react.js b/packages/file-upload/src/js/react.js
index acd17615a..c6bdcadee 100644
--- a/packages/file-upload/src/js/react.js
+++ b/packages/file-upload/src/js/react.js
@@ -29,13 +29,17 @@ const AUfileUpload = ( { id, name, text, ...attributeOptions } ) => (
 
 AUfileUpload.propTypes = {
 	/**
-	 * 
+	 * The file input ID
 	 */
-	id: PropTypes.string,
+	id: PropTypes.string.isRequired,
 	/**
-	 * 
+	 * The label name to match the ID
 	 */
-	name: PropTypes.string,
+	name: PropTypes.string.isRequired,
+	/**
+	 * The label text description
+	 */
+	text: PropTypes.string.isRequired,
 };
 
 

From 2766da02ea328bf5e84d7fa37fdb71003439967d Mon Sep 17 00:00:00 2001
From: sukhrajghuman <sukhrajghuman@live.com>
Date: Wed, 10 Apr 2019 09:32:06 +1000
Subject: [PATCH 4/4] update react and sass

---
 auds.json                                  |  2 +-
 packages/file-upload/src/js/react.js       | 13 ++++---------
 packages/file-upload/src/sass/_module.scss | 13 +++----------
 3 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/auds.json b/auds.json
index 3cd9d10a6..cdf945e19 100644
--- a/auds.json
+++ b/auds.json
@@ -1 +1 @@
-{"@gov.au/core":{"name":"@gov.au/core","version":"3.4.0","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/accordion":{"name":"@gov.au/accordion","version":"7.0.7","peerDependencies":{"@gov.au/animate":"^1.0.0","@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/animate":{"name":"@gov.au/animate","version":"1.0.12","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-js","@gov.au/pancake-json"],"js":{"path":"lib/js/module.js"},"sass":{"path":false,"sass-versioning":true}}},"@gov.au/body":{"name":"@gov.au/body","version":"2.1.1","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/breadcrumbs":{"name":"@gov.au/breadcrumbs","version":"3.0.4","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/buttons":{"name":"@gov.au/buttons","version":"3.0.6","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/callout":{"name":"@gov.au/callout","version":"3.0.1","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/control-input":{"name":"@gov.au/control-input","version":"3.0.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/cta-link":{"name":"@gov.au/cta-link","version":"2.1.9","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/direction-links":{"name":"@gov.au/direction-links","version":"2.1.9","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/footer":{"name":"@gov.au/footer","version":"3.0.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/grid-12":{"name":"@gov.au/grid-12","version":"2.0.9","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/header":{"name":"@gov.au/header","version":"4.1.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/headings":{"name":"@gov.au/headings","version":"2.0.10","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/inpage-nav":{"name":"@gov.au/inpage-nav","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/keyword-list":{"name":"@gov.au/keyword-list","version":"3.0.4","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/link-list":{"name":"@gov.au/link-list","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/main-nav":{"name":"@gov.au/main-nav","version":"1.0.6","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/page-alerts":{"name":"@gov.au/page-alerts","version":"2.1.2","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/progress-indicator":{"name":"@gov.au/progress-indicator","version":"3.1.6","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/responsive-media":{"name":"@gov.au/responsive-media","version":"2.0.13","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/select":{"name":"@gov.au/select","version":"2.0.10","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/side-nav":{"name":"@gov.au/side-nav","version":"5.0.7","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/accordion":"^7.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/skip-link":{"name":"@gov.au/skip-link","version":"2.0.15","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/tags":{"name":"@gov.au/tags","version":"3.1.6","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/text-inputs":{"name":"@gov.au/text-inputs","version":"2.1.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}}}
+{"@gov.au/core":{"name":"@gov.au/core","version":"3.4.0","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/accordion":{"name":"@gov.au/accordion","version":"7.0.7","peerDependencies":{"@gov.au/animate":"^1.0.0","@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/animate":{"name":"@gov.au/animate","version":"1.0.12","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-js","@gov.au/pancake-json"],"js":{"path":"lib/js/module.js"},"sass":{"path":false,"sass-versioning":true}}},"@gov.au/body":{"name":"@gov.au/body","version":"2.1.1","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/breadcrumbs":{"name":"@gov.au/breadcrumbs","version":"3.0.4","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/buttons":{"name":"@gov.au/buttons","version":"3.0.6","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/callout":{"name":"@gov.au/callout","version":"3.0.1","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/control-input":{"name":"@gov.au/control-input","version":"3.0.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/cta-link":{"name":"@gov.au/cta-link","version":"2.1.9","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/direction-links":{"name":"@gov.au/direction-links","version":"2.1.9","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/file-upload":{"name":"@gov.au/file-upload","version":"0.1.0","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/form":"^0.1.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/footer":{"name":"@gov.au/footer","version":"3.0.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/form":{"name":"@gov.au/form","version":"0.1.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/grid-12":{"name":"@gov.au/grid-12","version":"2.0.9","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/header":{"name":"@gov.au/header","version":"4.1.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/headings":{"name":"@gov.au/headings","version":"2.0.10","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/inpage-nav":{"name":"@gov.au/inpage-nav","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/keyword-list":{"name":"@gov.au/keyword-list","version":"3.0.4","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/link-list":{"name":"@gov.au/link-list","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/main-nav":{"name":"@gov.au/main-nav","version":"1.0.6","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/page-alerts":{"name":"@gov.au/page-alerts","version":"2.1.2","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/progress-indicator":{"name":"@gov.au/progress-indicator","version":"3.1.6","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/responsive-media":{"name":"@gov.au/responsive-media","version":"2.0.13","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/select":{"name":"@gov.au/select","version":"2.0.10","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/side-nav":{"name":"@gov.au/side-nav","version":"5.0.7","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/accordion":"^7.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/skip-link":{"name":"@gov.au/skip-link","version":"2.0.15","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/tags":{"name":"@gov.au/tags","version":"3.1.6","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/text-inputs":{"name":"@gov.au/text-inputs","version":"2.1.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}}}
\ No newline at end of file
diff --git a/packages/file-upload/src/js/react.js b/packages/file-upload/src/js/react.js
index c6bdcadee..a70ece30e 100644
--- a/packages/file-upload/src/js/react.js
+++ b/packages/file-upload/src/js/react.js
@@ -13,16 +13,15 @@ import PropTypes from 'prop-types';
 
 /**
  * The file upload component
- * 
+ *
  * @param  {string}  id               - The label ID, required
- * @param  {string}  name             - The input name to match the ID, required
  * @param  {string}  text             - Text of the label, required
  * @param  {object}  attributeOptions - Any other attribute options
  */
-const AUfileUpload = ( { id, name, text, ...attributeOptions } ) => (
-	<div className="au-file-upload au-form-group">
+const AUfileUpload = ( { id, text, ...attributeOptions } ) => (
+	<div className="au-form-group">
 		<label className="au-label" htmlFor={ id } { ...attributeOptions }>{ text }</label>
-		<input className="au-file-input" type="file" id={ name }></input>
+		<input className="au-file-input" type="file" id={ id }></input>
 	</div>
 );
 
@@ -32,10 +31,6 @@ AUfileUpload.propTypes = {
 	 * The file input ID
 	 */
 	id: PropTypes.string.isRequired,
-	/**
-	 * The label name to match the ID
-	 */
-	name: PropTypes.string.isRequired,
 	/**
 	 * The label text description
 	 */
diff --git a/packages/file-upload/src/sass/_module.scss b/packages/file-upload/src/sass/_module.scss
index d58ee4a09..22ab039b5 100644
--- a/packages/file-upload/src/sass/_module.scss
+++ b/packages/file-upload/src/sass/_module.scss
@@ -11,13 +11,6 @@
 @import '_globals.scss';
 @import '_print.scss';
 
-.au-file-upload{
-
-    .au-label {
-        margin-bottom: 0.25rem;
-    }
-
-    .au-file-input {
-        display: block;
-    }
-}
\ No newline at end of file
+.au-file-input {
+	@include AU-fontgrid( sm, 'nospace' );
+}