Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add govuk-section-break to core #483

Merged
merged 6 commits into from
Feb 13, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ New features:
- The responsive spacing and typography mixins will now throw an error if you
try to use them with anything other than a spacing or font map respectively.
(PR [#447](https://github.com/alphagov/govuk-frontend/pull/447))
- Add thematic break to typography and prose scope. This class is added to an
`<hr>`, adds margin (xl, l and m). There is also an option to make the `<hr>`
border visible or invisible. (PR [#483](https://github.com/alphagov/govuk-frontend/pull/483))

Fixes:

Expand Down
10 changes: 10 additions & 0 deletions app/views/examples/prose-scope/index.njk
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,16 @@
<li>This is the third and final item in the ordered list.</li>
</ol>

<hr>

<h2>An H2 after a thematic break</h2>

<p>
A paragraph. This includes even more text to give a good representation
of a more average length paragraph. That way you can see more than one
line wrapping.
</p>

</div>

</div>
Expand Down
82 changes: 82 additions & 0 deletions app/views/examples/typography/index.njk
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,88 @@

</section>

<section class="govuk-!-mt-r8">
<h2 class="govuk-heading-l govuk-!-pb-r2" style="border-bottom: 4px solid;">Section breaks - Not-visible</h2>

<h2 class="govuk-heading-l">Topic A1</h2>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<h2 class="govuk-heading-l">Topic A2</h2>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<hr class="govuk-section-break govuk-section-break--xl">

<h2 class="govuk-heading-l">Topic B (govuk-section-break--xl above)</h2>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<hr class="govuk-section-break govuk-section-break--l">

<h2 class="govuk-heading-l">Topic C (govuk-section-break--l above)</h2>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<hr class="govuk-section-break govuk-section-break--m">

<h2 class="govuk-heading-l">Topic D (govuk-section-break--m above)</h2>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

</section>

<section class="govuk-!-mt-r8">
<h2 class="govuk-heading-l govuk-!-pb-r2" style="border-bottom: 4px solid;">Section breaks - Visible</h2>

<h2 class="govuk-heading-l">Topic A1</h2>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<h2 class="govuk-heading-l">Topic A2</h2>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<hr class="govuk-section-break govuk-section-break__visible govuk-section-break--xl">

<h2 class="govuk-heading-l">Topic B (govuk-section-break--xl above)</h2>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<hr class="govuk-section-break govuk-section-break__visible govuk-section-break--l">

<h2 class="govuk-heading-l">Topic C (govuk-section-break--l above)</h2>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<hr class="govuk-section-break govuk-section-break__visible govuk-section-break--m">

<h2 class="govuk-heading-l">Topic D (govuk-section-break--m above)</h2>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

<p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

</section>


</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/globals/scss/_common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
@import "core/lists";
@import "core/typography";
@import "core/prose-scope";
@import "core/section-break";

// Objects
@import "objects/grid";
Expand Down
5 changes: 5 additions & 0 deletions src/globals/scss/core/_prose-scope.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,5 +48,10 @@
a {
@extend .govuk-link;
}

hr {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this use govuk-section-break__visible ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we also add an example to the prose page to show this in use?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated

@extend .govuk-section-break__visible;
@extend .govuk-section-break--xl;
}
}
}
27 changes: 27 additions & 0 deletions src/globals/scss/core/_section-break.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
@include exports("section-break") {

.govuk-section-break {
margin: 0;
border: 0;
}

.govuk-section-break--xl {
@include govuk-responsive-margin($govuk-spacing-responsive-8, "top");
@include govuk-responsive-margin($govuk-spacing-responsive-8, "bottom");
}

.govuk-section-break--l {
@include govuk-responsive-margin($govuk-spacing-responsive-6, "top");
@include govuk-responsive-margin($govuk-spacing-responsive-6, "bottom");
}

.govuk-section-break--m {
@include govuk-responsive-margin($govuk-spacing-responsive-4, "top");
@include govuk-responsive-margin($govuk-spacing-responsive-4, "bottom");
}

.govuk-section-break__visible {
border: 1px solid $govuk-border-colour;
}

}