From 76ae1a7bdb62a7a0ae9af6f344c6cda3078c2d72 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 Feb 2017 08:07:29 +0000 Subject: [PATCH 1/9] Split information-block and call-to-action --- .../govuk-component/_govspeak.scss | 3 +- .../govspeak/_call-to-action.scss | 32 +++++++++++++++++++ ...out-block.scss => _information-block.scss} | 12 +++---- app/views/govuk_component/docs/govspeak.yml | 14 +++++--- 4 files changed, 49 insertions(+), 12 deletions(-) create mode 100644 app/assets/stylesheets/govuk-component/govspeak/_call-to-action.scss rename app/assets/stylesheets/govuk-component/govspeak/{_call-out-block.scss => _information-block.scss} (79%) diff --git a/app/assets/stylesheets/govuk-component/_govspeak.scss b/app/assets/stylesheets/govuk-component/_govspeak.scss index 83176edb7..5b4681d29 100644 --- a/app/assets/stylesheets/govuk-component/_govspeak.scss +++ b/app/assets/stylesheets/govuk-component/_govspeak.scss @@ -1,11 +1,12 @@ @import "govspeak/attachment"; -@import "govspeak/call-out-block"; +@import "govspeak/call-to-action"; @import "govspeak/charts"; @import "govspeak/contact"; @import "govspeak/example"; @import "govspeak/footnotes"; @import "govspeak/fraction"; @import "govspeak/images"; +@import "govspeak/information-block"; @import "govspeak/legislative-list"; @import "govspeak/media-player"; @import "govspeak/stat-headline"; diff --git a/app/assets/stylesheets/govuk-component/govspeak/_call-to-action.scss b/app/assets/stylesheets/govuk-component/govspeak/_call-to-action.scss new file mode 100644 index 000000000..2a9ee2920 --- /dev/null +++ b/app/assets/stylesheets/govuk-component/govspeak/_call-to-action.scss @@ -0,0 +1,32 @@ +// Govspeak call to action +// http://govuk-component-guide.herokuapp.com/components/govspeak/fixtures/call_to_action +// +// Support: +// +// - alphagov/whitehall: ✔︎ +// - alphagov/govspeak: ✔︎ + +.govuk-govspeak { + .call-to-action { + margin-top: $gutter; + margin-bottom: $gutter; + background-color: $panel-colour; + padding: $gutter-half; + + &:first-child { + margin-top: 0; + } + + p:last-child, + ul:last-child, + ol:last-child { + margin-bottom: 0; + } + + ol { + @include media(desktop) { + list-style-position: outside; + } + } + } +} diff --git a/app/assets/stylesheets/govuk-component/govspeak/_call-out-block.scss b/app/assets/stylesheets/govuk-component/govspeak/_information-block.scss similarity index 79% rename from app/assets/stylesheets/govuk-component/govspeak/_call-out-block.scss rename to app/assets/stylesheets/govuk-component/govspeak/_information-block.scss index 5d2d4418b..33403b1ba 100644 --- a/app/assets/stylesheets/govuk-component/govspeak/_call-out-block.scss +++ b/app/assets/stylesheets/govuk-component/govspeak/_information-block.scss @@ -1,18 +1,16 @@ -// Govspeak call out blocks -// http://govuk-component-guide.herokuapp.com/components/govspeak/fixtures/call_out_blocks +// Govspeak information block +// http://govuk-component-guide.herokuapp.com/components/govspeak/fixtures/information_block // // Support: // -// `call-to-action` exists within alphagov/govspeak, but no signs of anything -// that generates HTML using the `information-block` class in alphagov or -// kramdown. +// No signs of anything that generates HTML using the `information-block` class +// in alphagov or kramdown. // // - alphagov/whitehall: ⁉ // - alphagov/govspeak: ⁉ .govuk-govspeak { - .information-block, - .call-to-action { + .information-block { margin-top: $gutter; margin-bottom: $gutter; background-color: $panel-colour; diff --git a/app/views/govuk_component/docs/govspeak.yml b/app/views/govuk_component/docs/govspeak.yml index 4b804f3ee..f5dc565fc 100644 --- a/app/views/govuk_component/docs/govspeak.yml +++ b/app/views/govuk_component/docs/govspeak.yml @@ -121,15 +121,12 @@ fixtures:

My quote

about things

- call_out_blocks: + information_block: content: |

My important information

Information

-
-

Call to action

-
tables: content: | @@ -511,7 +508,16 @@ fixtures: content: |

+ Example This is an indented example block.
It may span multiple lines, contain links.

+

+ It may even span multiple paragraphs. +

+
+ call_to_action: + content: | +
+

Call to action

From 6c6fe63cc527fed6da35a5faa48cdb23e6204848 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 Feb 2017 08:20:41 +0000 Subject: [PATCH 2/9] Apply rationalised design to call to action MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The template consolidation team have been working on Govspeak and have produced a rationalised design for the various Govspeak callouts. This modifies the ‘call to action’ callout to use 2em padding. It also removes a redundant declaration - ordered lists already have a list-style-position of outside as set in the govspeak typography file. --- .../govuk-component/govspeak/_call-to-action.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/app/assets/stylesheets/govuk-component/govspeak/_call-to-action.scss b/app/assets/stylesheets/govuk-component/govspeak/_call-to-action.scss index 2a9ee2920..5a39dca99 100644 --- a/app/assets/stylesheets/govuk-component/govspeak/_call-to-action.scss +++ b/app/assets/stylesheets/govuk-component/govspeak/_call-to-action.scss @@ -11,7 +11,7 @@ margin-top: $gutter; margin-bottom: $gutter; background-color: $panel-colour; - padding: $gutter-half; + padding: 2em; &:first-child { margin-top: 0; @@ -22,11 +22,5 @@ ol:last-child { margin-bottom: 0; } - - ol { - @include media(desktop) { - list-style-position: outside; - } - } } } From 77b0bacf813484495d63180be9ccbfc1288dcbdc Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 Feb 2017 08:23:33 +0000 Subject: [PATCH 3/9] =?UTF-8?q?Apply=20rationalised=20design=20to=20?= =?UTF-8?q?=E2=80=98example=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The template consolidation team have been working on Govspeak and have produced a rationalised design for the various Govspeak callouts. This modifies the border width and padding, and removes the bottom margin from the last paragraph or list. --- .../govuk-component/govspeak/_example.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/govuk-component/govspeak/_example.scss b/app/assets/stylesheets/govuk-component/govspeak/_example.scss index ce56032f7..fb5f02c24 100644 --- a/app/assets/stylesheets/govuk-component/govspeak/_example.scss +++ b/app/assets/stylesheets/govuk-component/govspeak/_example.scss @@ -7,9 +7,16 @@ .govuk-govspeak { .example { - border-left: 10px solid $panel-colour; - padding-left: 1.5em; + border-left: 1em solid $panel-colour; + padding: 1em 0 1em 1em; margin: 2.5em 0; + + // Remove margin from the last element + p:last-child, + ul:last-child, + ol:last-child { + margin-bottom: 0; + } strong { display: block; From 165a145e0648d7ee895fd25233404f360be4180a Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 Feb 2017 08:33:05 +0000 Subject: [PATCH 4/9] Add information callout --- .../govuk-component/_govspeak.scss | 1 + .../govspeak/_information-callout.scss | 22 +++++++++++++++++++ app/views/govuk_component/docs/govspeak.yml | 8 +++++++ 3 files changed, 31 insertions(+) create mode 100644 app/assets/stylesheets/govuk-component/govspeak/_information-callout.scss diff --git a/app/assets/stylesheets/govuk-component/_govspeak.scss b/app/assets/stylesheets/govuk-component/_govspeak.scss index 5b4681d29..e79005050 100644 --- a/app/assets/stylesheets/govuk-component/_govspeak.scss +++ b/app/assets/stylesheets/govuk-component/_govspeak.scss @@ -7,6 +7,7 @@ @import "govspeak/fraction"; @import "govspeak/images"; @import "govspeak/information-block"; +@import "govspeak/information-callout"; @import "govspeak/legislative-list"; @import "govspeak/media-player"; @import "govspeak/stat-headline"; diff --git a/app/assets/stylesheets/govuk-component/govspeak/_information-callout.scss b/app/assets/stylesheets/govuk-component/govspeak/_information-callout.scss new file mode 100644 index 000000000..94ddd1b20 --- /dev/null +++ b/app/assets/stylesheets/govuk-component/govspeak/_information-callout.scss @@ -0,0 +1,22 @@ +// Govspeak information callout +// http://govuk-component-guide.herokuapp.com/components/govspeak/fixtures/information_callout +// +// Support: +// +// - alphagov/whitehall: ✔︎ +// - alphagov/govspeak: ✔︎ + +.govuk-govspeak { + .info-notice { + border-left: 1em solid $panel-colour; + padding: 1em 0 1em 1em; + margin: 2.5em 0; + + // Remove margin from the last element + p:last-child, + ul:last-child, + ol:last-child { + margin-bottom: 0; + } + } +} diff --git a/app/views/govuk_component/docs/govspeak.yml b/app/views/govuk_component/docs/govspeak.yml index f5dc565fc..6f6a8f251 100644 --- a/app/views/govuk_component/docs/govspeak.yml +++ b/app/views/govuk_component/docs/govspeak.yml @@ -521,3 +521,11 @@ fixtures:

Call to action

+ information_callout: + content: | +
+

+ If you drilled a tunnel straight through the Earth and jumped in, it would take + you exactly 42 minutes and 12 seconds to get to the other side. +

+
From 69bf6da0c75db277504d0568dda0878fbf6e643e Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 Feb 2017 08:54:14 +0000 Subject: [PATCH 5/9] Add Govspeak warning callout --- .../govuk-component/_govspeak.scss | 1 + .../govspeak/_warning-callout.scss | 37 +++++++++++++++++++ app/views/govuk_component/docs/govspeak.yml | 7 ++++ 3 files changed, 45 insertions(+) create mode 100644 app/assets/stylesheets/govuk-component/govspeak/_warning-callout.scss diff --git a/app/assets/stylesheets/govuk-component/_govspeak.scss b/app/assets/stylesheets/govuk-component/_govspeak.scss index e79005050..486fef147 100644 --- a/app/assets/stylesheets/govuk-component/_govspeak.scss +++ b/app/assets/stylesheets/govuk-component/_govspeak.scss @@ -13,6 +13,7 @@ @import "govspeak/stat-headline"; @import "govspeak/tables"; @import "govspeak/typography"; +@import "govspeak/warning-callout"; .govuk-govspeak { &.direction-rtl { diff --git a/app/assets/stylesheets/govuk-component/govspeak/_warning-callout.scss b/app/assets/stylesheets/govuk-component/govspeak/_warning-callout.scss new file mode 100644 index 000000000..d56413ff5 --- /dev/null +++ b/app/assets/stylesheets/govuk-component/govspeak/_warning-callout.scss @@ -0,0 +1,37 @@ +// Govspeak warning callout +// http://govuk-component-guide.herokuapp.com/components/govspeak/fixtures/warning_callout +// +// Support: +// +// - alphagov/whitehall: ✔︎ +// - alphagov/govspeak: ✔︎ + +.govuk-govspeak { + .help-notice { + $icon-size: 34px; + $line-height-mobile: 20px; + $line-height-tablet: 25px; + + // Add '!' icon + background-image: image-url("icon-important.png"); + @include device-pixel-ratio() { + background-image: image-url("icon-important-2x.png"); + } + background-size: $icon-size $icon-size; + background-repeat: no-repeat; + + min-height: $icon-size; + padding-left: $icon-size; + + // Center the icon around the baseline + padding-top: ($icon-size - $line-height-mobile) / 2; + @include media(tablet) { + padding-top: ($icon-size - $line-height-tablet) / 2; + } + + p { + @include bold-19; + margin-left: 1em; + } + } +} diff --git a/app/views/govuk_component/docs/govspeak.yml b/app/views/govuk_component/docs/govspeak.yml index 6f6a8f251..93787c319 100644 --- a/app/views/govuk_component/docs/govspeak.yml +++ b/app/views/govuk_component/docs/govspeak.yml @@ -529,3 +529,10 @@ fixtures: you exactly 42 minutes and 12 seconds to get to the other side.

+ warning_callout: + content: | +
+

+ The water in the mouth of a blue whale weighs more than its body. +

+
From 943d1e1437b8625c3295dd0c1a4ef27d873471d1 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 10 Feb 2017 09:04:04 +0000 Subject: [PATCH 6/9] =?UTF-8?q?Remove=20=E2=80=98information=20block?= =?UTF-8?q?=E2=80=99=20feature?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The information-block class was originally added when call-to-action was added to whitehall, and a specialist guide was refactored so that `call-to-action` and `information-block` shared some common CSS[1]. The last reference to the information-block within templates in whitehall was removed when 'detailed guides' were moved to government-frontend[2]. `information-block` itself does not appear to have ever been used in HTML generated by the Govspeak engines in whitehall nor in the standalone gem. Searching the commit history for whitehall returns only mentions of “information-block” within templates, CSS and tests, and searching the history for alphagov/govspeak returns nothing. At time of commiting, according to GitHub’s search, there are only 11 files mentioning information-block across the entire alphagov organisation. Ten of these are CSS files, the other is the govspeak.yml file in this repo.[3] Lastly, we grepped the mirrors for mentions of information-block and found only three results: ``` ./guidance/animal-welfare-in-severe-weather.html: