From 2b1258459d5987650a43e64a2b4291560d1959ac Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 3 May 2018 14:46:42 +0000 Subject: [PATCH 1/2] Add brand styles to component gem - include all class outputs as a helper --- CHANGELOG.md | 4 ++ .../_all_components.scss | 2 + .../helpers/_organisation-colours.scss | 20 ++++++++ docs/component_branding.md | 47 +++++++++++++++++++ lib/govuk_publishing_components.rb | 1 + .../presenters/brand_helper.rb | 17 +++++++ 6 files changed, 91 insertions(+) create mode 100644 app/assets/stylesheets/govuk_publishing_components/components/helpers/_organisation-colours.scss create mode 100644 docs/component_branding.md create mode 100644 lib/govuk_publishing_components/presenters/brand_helper.rb diff --git a/CHANGELOG.md b/CHANGELOG.md index dc28a37507..619ff75c7d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# Unreleased + +* Add department colours to components (PR #296) + # 7.1.0 * Add subscription links component (PR #290) diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss index 0cf58ccc82..2faaa1a573 100644 --- a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +++ b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss @@ -7,6 +7,8 @@ @import "typography"; @import "colours"; +@import "components/helpers/organisation-colours"; + @import "components/back-link"; @import "components/button"; @import "components/document-list"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_organisation-colours.scss b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_organisation-colours.scss new file mode 100644 index 0000000000..4c43d6ffaa --- /dev/null +++ b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_organisation-colours.scss @@ -0,0 +1,20 @@ +@import "colours/organisation"; + +// this uses the colours from govuk_frontend_toolkit +// https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/colours/_organisation.scss + +@mixin organisation-brand-colour() { + @each $organisation in $all-organisation-brand-colours { + .brand--#{nth($organisation, 1)} { + .brand__color { + color: nth($organisation, 3); + } + + .brand__border-color { + border-color: nth($organisation, 2); + } + } + } +} + +@include organisation-brand-colour; diff --git a/docs/component_branding.md b/docs/component_branding.md new file mode 100644 index 0000000000..94ba7bc6c1 --- /dev/null +++ b/docs/component_branding.md @@ -0,0 +1,47 @@ +# Component branding + +## Overview + +Organisation pages in whitehall ([example](https://www.gov.uk/government/organisations/attorney-generals-office)) have department-specific branding on them. This includes specific colours for links and borders. These pages are being migrated out of whitehall and will use components for their frontend, which means some components need a sensible way of displaying these colours. + +This work follows [this RFC](https://github.com/alphagov/govuk_publishing_components/pull/287) to discuss the approach taken. + +## Adding to a component + +To add colours to a component, modify the component to follow the example below. + +``` +<% + brand ||= false + brand_helper = GovukPublishingComponents::Presenters::BrandHelper.new(brand) +%> + +
+
"> + Example element that requires a coloured border +
+ + "> + Example element that requires coloured text + +
+``` + +Note that the helper must be called for each element that needs a border or link colour applying. This allows for flexibility if one is required but not the other. + +For borders, the applied class only adds a `border-color` attribute. You will need to add the rest of the border style attributes to the component itself, for example: + +``` +.gem-c-component__title { + border-style: solid; + border-width: 5px; +} +``` + +The component can then be passed a string matching the required brand, for example: + +``` +<%= render "govuk_publishing_components/components/example-component", { + brand: 'attorney-generals-office' +} %> +``` diff --git a/lib/govuk_publishing_components.rb b/lib/govuk_publishing_components.rb index ceb12b732e..ac0185bc1b 100644 --- a/lib/govuk_publishing_components.rb +++ b/lib/govuk_publishing_components.rb @@ -1,5 +1,6 @@ require "govuk_publishing_components/config" require "govuk_publishing_components/engine" +require "govuk_publishing_components/presenters/brand_helper" require "govuk_publishing_components/presenters/contextual_navigation" require "govuk_publishing_components/presenters/related_navigation_helper" require "govuk_publishing_components/presenters/step_by_step_nav_helper" diff --git a/lib/govuk_publishing_components/presenters/brand_helper.rb b/lib/govuk_publishing_components/presenters/brand_helper.rb new file mode 100644 index 0000000000..479e335883 --- /dev/null +++ b/lib/govuk_publishing_components/presenters/brand_helper.rb @@ -0,0 +1,17 @@ +module GovukPublishingComponents + module Presenters + class BrandHelper + def initialize(brand) + @brand = brand if brand + end + + def get_brand + "brand--#{@brand}" if @brand + end + + def get_brand_element(attribute) + "brand__#{attribute}" if @brand + end + end + end +end From db727b8a139468a389478643f322c5759c0aa04a Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 3 May 2018 14:48:38 +0000 Subject: [PATCH 2/2] Add colours to document list component --- .../components/_document_list.html.erb | 8 ++++++-- .../components/docs/document_list.yml | 17 +++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/app/views/govuk_publishing_components/components/_document_list.html.erb b/app/views/govuk_publishing_components/components/_document_list.html.erb index 07e72f1d6b..5cf3d79017 100644 --- a/app/views/govuk_publishing_components/components/_document_list.html.erb +++ b/app/views/govuk_publishing_components/components/_document_list.html.erb @@ -2,9 +2,12 @@ items ||= [] margin_top_class = " gem-c-document-list--top-margin" if local_assigns[:margin_top] margin_bottom_class = " gem-c-document-list--bottom-margin" if local_assigns[:margin_bottom] + + brand ||= false + brand_helper = GovukPublishingComponents::Presenters::BrandHelper.new(brand) %> <% if items.any? %> -
    +
      <% items.each do |item| %>

    1. @@ -12,7 +15,8 @@ link_to( item[:link][:text], item[:link][:path], - data: item[:link][:data_attributes] + data: item[:link][:data_attributes], + class: brand_helper.get_brand_element("color") ) %>

      diff --git a/app/views/govuk_publishing_components/components/docs/document_list.yml b/app/views/govuk_publishing_components/components/docs/document_list.yml index f83f4fc8b1..3812a98621 100644 --- a/app/views/govuk_publishing_components/components/docs/document_list.yml +++ b/app/views/govuk_publishing_components/components/docs/document_list.yml @@ -76,3 +76,20 @@ examples: text: 'Become an apprentice' path: '/become-an-apprentice' description: 'Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship.' + with_branding: + description: Where this component could be used on an organisation page (such as the [Attorney General's Office](https://www.gov.uk/government/organisations/attorney-generals-office)) branding can be applied for link colours and border colours. See the [branding documentation](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_branding.md) for more details. + data: + brand: 'attorney-generals-office' + items: + - link: + text: 'School behaviour and attendance: parental responsibility measures' + path: '/government/publications/parental-responsibility-measures-for-behaviour-and-attendance' + metadata: + public_updated_at: 2017-01-05 14:50:33 + document_type: 'Statutory guidance' + - link: + text: 'School exclusion' + path: '/government/publications/school-exclusion' + metadata: + public_updated_at: 2017-07-19 15:01:48 + document_type: 'Statutory guidance'