Merge pull request #701 from govau/feature/form-comp

Add form component

Author: sukhrajghuman

README.md

@@ -299,6 +299,20 @@ All components have to work on the below browsers:
 ----------
 </details>
 
+<details>
+	<summary>@gov.au/form</summary>
+	<br><code>npm install @gov.au/form</code><br>
+	<br>See the <a href="https://auds.service.gov.au/packages/form/tests/site/">visual test file for form</a>
+	<br>See the <a href="https://github.com/govau/design-system-components/blob/master/packages/form/README.md">readme file for form</a><br><br>
+	Dependencies:
+	<br>
+
+```shell
+└─ core
+```
+----------
+</details>
+
 <details>
 	<summary>@gov.au/grid-12</summary>
 	<br><code>npm install @gov.au/grid-12</code><br>

auds.json

@@ -0,0 +1,34 @@
+@gov.au/form 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)**
+
+
+# };

package-lock.json

@@ -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.

packages/form/CHANGELOG.md

@@ -0,0 +1,154 @@
+@gov.au/form
+============
+
+> The form component contains layout, labelling and inline validations for form fields
+
+
+## Contents
+
+* [Install](#install)
+* [Dependency graph](#dependency-graph)
+* [Tests](#tests)
+* [Release History](#release-history)
+* [License](#license)
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## Install
+
+
+```shell
+yarn add @gov.au/form
+```
+
+```shell
+npm install @gov.au/form
+```
+
+
+**[⬆ back to top](#contents)**
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## Dependency graph
+
+```shell
+form
+└─ core
+```
+
+
+**[⬆ back to top](#contents)**
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## Tests
+
+The visual test: https://auds.service.gov.au/packages/form/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)**
+
+# };
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## Usage
+
+
+* [React](#react)
+
+
+**[⬆ back to top](#contents)**
+
+
+----------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+### React
+
+Usage:
+
+```jsx
+import { AUlabel, AUhintText, AUerrorText, AUformGroup, AUfieldset, AUlegend } from '@gov.au/form';
+
+<AUlabel text="Email" />
+
+<AUhintText text="We will only use this email to respond to your query." />
+
+<AUerrorText text="Enter an email address in the correct format, like name@example.com" />
+
+<AUformGroup>
+    // labels, hint text, and form controls here
+</AUformGroup>
+
+<AUfieldset>
+    <AUlegend>
+    // labels/hint text here
+    </AUlegend>
+
+    // form controls here
+    
+</AUfieldset>
+```
+
+All props:
+
+```jsx
+<AUlabel 
+    text="Email"                 {/* The text of the label */}
+    dark={ true }                {/* The dark variation of the component */}
+    inline={ true }              {/* Label inline*/}
+/>
+
+<AUhintText
+    text="We will only use this email to respond to your query." {/* The hint text */}
+    dark = { true }                                              {/* The dark variation of the component */}
+    alt={ false }                                                {/* The alt variation of the component */}
+/>
+
+<AUerrorText
+    text="Enter an email in the valid format."  {/* The error text */}
+    dark={ true }                               {/* The dark variation of the component */}
+    inline={ true }                             {/* Display the error text inline*/}
+/>
+
+<AUformGroup
+    status="invalid"            {/* Adds invalid state to form group */}
+    dark = { true }             {/* The dark variation of the component */}
+/>
+
+<AUfieldset 
+    dark = { true }             {/* The dark variation of the component */}
+/>
+```