Skip to content

Commit

Permalink
Merge pull request #143 from digitalnsw/form-group-spacing
Browse files Browse the repository at this point in the history 
set formgroup spacing to medium
  • Loading branch information
@cdbenj
cdbenj authored May 3, 2021
2 parents 4553742 + ab9c295 commit d022aeb
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 39 deletions.
6 changes: 5 additions & 1 deletion src/components/forms/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
}
}

* + .nsw-form {
@include nsw-spacing(margin-top, xxl);
}

.nsw-form-label {
@include font-stack(heading);
@include font-size('sm');
Expand Down Expand Up @@ -280,7 +284,7 @@
}

* + .nsw-form-group {
@include nsw-spacing(margin-top, xxl);
@include nsw-spacing(margin-top, md);
border: 0;
}

Expand Down
34 changes: 17 additions & 17 deletions src/components/forms/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,33 +11,32 @@ title: Forms
<div class="nsw-col nsw-col-lg-8 nsw-offset-lg-2">
<h1>Forms</h1>
<h2>Default Fields</h2>
<br>
<div class="nsw-forms">
<div class="nsw-form">
<div class="nsw-form-group">
{{>_text-input
id="txt1"
label="Single-line text input:"
}}

</div>
<div class="nsw-form-group">
{{>_textarea
id="txta1"
label="Multi-line text input:"
}}

</div>
<div class="nsw-form-group">
{{>_select
id="select1"
label="Select dropdown:"
}}

</div>
<div class="nsw-form-checkbox">
{{>_checkbox
id="check1"
name="single-checkbox"
label="Single checkbox:"
}}
</div>
</div>

<div class="nsw-form-group">
<fieldset class="nsw-form-fieldset">
<legend>
Expand Down Expand Up @@ -80,21 +79,22 @@ title: Forms
</div>

<h2>Fields with Helper text</h2>
<br>
<div class="nsw-forms">
<div class="nsw-form">
<div class="nsw-form-group">
{{>_text-input
id="txt2help"
label="Single-line text input field:"
helper-text="This is helper text"
}}

</div>
<div class="nsw-form-group">
{{>_textarea
id="txta1help"
label="Multi-line text input:"
helper-text="This is helper text"
}}

</div>
<div class="nsw-form-group">
{{>_select
id="select1help"
label="Select dropdown:"
Expand Down Expand Up @@ -144,27 +144,28 @@ title: Forms
</div>

<h2>Fields with Errors</h2>
<br>
<div class="nsw-forms">
<div class="nsw-form">
<div class="nsw-form-group">
{{>_text-input
id="txt3error"
label="Single-line text input field:"
error-text="There was an error with the input above"
}}

</div>
<div class="nsw-form-group">
{{>_textarea
id="txta1error"
label="Multi-line text input:"
error-text="There was an error with the input above"
}}

</div>
<div class="nsw-form-group">
{{>_select
id="select1error"
label="Select dropdown:"
error-text="There was an error with the input above"
}}

</div>
<div class="nsw-form-checkbox">
{{>_checkbox
id="check1error"
Expand All @@ -173,7 +174,6 @@ title: Forms
error-text="There was an error with the input above"
}}
</div>
</div>
<div class="nsw-form-group">
<fieldset class="nsw-form-fieldset" aria-invalid="true">
<legend>
Expand Down
24 changes: 14 additions & 10 deletions src/templates/sidebar-empty/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,13 @@ model:
</div>

<div class="nsw-container nsw-p-top-sm nsw-p-bottom-lg">
<div class="nsw-page-layout">
<div class="nsw-page-layout">
<main id="content" class="nsw-page-layout__main">
<h1>Contact us</h1>
<p>We welcome your feedback, questions, comments and <a href="#">complaints</a>. We keep customers at the heart of what we do, and use your feedback to improve what we do and how we do it.</p>
<p>Including all the information requested will allow us to respond to your query more quickly and accurately.</p>
<p>Answer all questions unless they are marked as (optional).</p>
<form class="nsw-form">
<h1>Contact us</h1>
<p>We welcome your feedback, questions, comments and <a href="#">complaints</a>. We keep customers at the heart of what we do, and use your feedback to improve what we do and how we do it.</p>
<p>Including all the information requested will allow us to respond to your query more quickly and accurately.</p>
<p>Answer all questions unless they are marked as (optional).</p>

<div class="nsw-form-group">
{{>_select
id="contact-type"
Expand All @@ -35,37 +34,42 @@ model:
option-2="Compliments"
option-3="Other enquiry"
}}

</div>
<div class="nsw-form-group">
{{>_textarea
id="contact-feedback"
label="Give us your feedback:"
helper-text="The more information you provide, the better we'll be able to action your feedback"
}}
</div>

<h2>Personal details</h2>

<div class="nsw-form-group">
{{>_text-input
id="contact-first-name"
label="First name"
}}
</div>
<div class="nsw-form-group">
{{>_text-input
id="contact-last-name"
label="Last name"
}}
</div>
<div class="nsw-form-group">
{{>_text-input
id="contact-email"
type="email"
label="Email address"
}}
</div>
<div class="nsw-form-group">
{{>_text-input
id="contact-phone"
type="tel"
label="Phone number (optional)"
}}
{{>_button-input type="submit" style="primary" text="Submit"}}
</div>
{{>_button-input type="submit" style="primary" text="Submit"}}
</form>
</main>
<div class="nsw-page-layout__sidebar">
Expand Down
26 changes: 15 additions & 11 deletions src/templates/sidebar-right/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ model:
</div>

<div class="nsw-container nsw-p-top-sm nsw-p-bottom-lg">
<div class="nsw-page-layout">
<div class="nsw-page-layout">
<main id="content" class="nsw-page-layout__main">
<div class="nsw-block">
<h1>Scaling a design system</h1>
Expand Down Expand Up @@ -59,16 +59,20 @@ model:
<form class="nsw-form" action="#">
<h4 class="nsw-section-title">Want to stay in touch?</h4>
<p>Find out about work happening across NSW Government in the digital space. </p>
{{>_text-input
id="subscribe-full-name"
label="Full name"
required=true
}}
{{>_text-input
id="subscribe-email"
label="Email"
required=true
}}
<div class="nsw-form-group">
{{>_text-input
id="subscribe-full-name"
label="Full name"
required=true
}}
</div>
<div class="nsw-form-group">
{{>_text-input
id="subscribe-email"
label="Email"
required=true
}}
</div>
<div class="nsw-form-checkbox">
{{>_checkbox
id="subscribe-tc"
Expand Down

0 comments on commit d022aeb

Please sign in to comment.