Add brand colour to organisations

Colours can now be picked for organisations independently of anything else. This is similar to how organisations pick logos. https://www.pivotaltracker.com/story/show/38409467
alphagov · Aug 15, 2013 · d5cf054 · d5cf054
1 parent 9ea91cf
commit d5cf054
Show file tree

Hide file tree

Showing 20 changed files with 368 additions and 97 deletions.
diff --git a/app/assets/stylesheets/frontend/helpers/_organisations.scss b/app/assets/stylesheets/frontend/helpers/_organisations.scss
@@ -134,6 +134,7 @@
     direction: ltr;
   }
 }
+@include organisation-brand-colour(".organisation-logo", border-color);
 
 .organisation-logo-stacked-no-identity {
 }
@@ -1313,4 +1314,3 @@
   }
 }
 
-@include department-colours('.organisation-logo', border-color);
diff --git a/app/assets/stylesheets/frontend/styleguide/_colours.scss b/app/assets/stylesheets/frontend/styleguide/_colours.scss
@@ -47,87 +47,84 @@ $office-of-the-leader-of-the-house-of-lords-websafe: #c2395d;
 $scotland-office-websafe: #405c8a;
 $the-office-of-the-leader-of-the-house-of-commons-websafe: #005f8f;
 $uk-export-finance-websafe: $link-colour;
+$uk-trade-investment-websafe: $link-colour;
 $wales-office-websafe: #7a242a;
 
-
-
-
-
+// Organisation brand colours
+// 
+// Organisation brand colours are specified manually because there is no 
+// fixed rule as to what colours organisations have. Colours are defined 
+// by OrganisationBrandColour and its associated CSS class here.
+//
+// NOTE: The mixin will create a new block inside the block it is included in. 
+// The downside of this approach is it requires at least 3 elements to be 
+// able to do anything – the parent element, the element with the colour 
+// class on and the element we're actually styling. This might be simpler 
+// if we did &.foo-brand-colour #{$selector} { ... }, but that will 
+// require refactoring.
+// 
 // Usage:
 //
 //   html:
-//
-//     <a href="..." class="cabinet-office">Cabinet Office</a>
+//    <div class="organisations-show">
+//      <div class="cabinet-office-brand-colour">
+//        <a href="...">Cabinet Office</a>
+//      </div>
+//    </div>
 //
 //   css:
-//     a {
-//       border-width: 2px;
-//       border-style: solid;
-//       @include department-colours(border-color);
+//     .organisations-show {
+//       a {
+//         border-width: 2px;
+//         border-style: solid;
+//       }
+//       @include organisation-brand-colour("a", border-color);
 //     }
 
-@mixin department-colours($selector, $property) {
-  .attorney-generals-office #{$selector} { #{$property}: $attorney-generals-office; }
-  .building-regulations-advisory-committee #{$selector} { #{$property}: $department-for-communities-and-local-government; }
-  .cabinet-office #{$selector} { #{$property}: $cabinet-office; }
-  .department-for-business-innovation-skills #{$selector} { #{$property}: $department-for-business-innovation-skills; }
-  .department-for-communities-and-local-government #{$selector} { #{$property}: $department-for-communities-and-local-government; }
-  .department-for-culture-media-sport #{$selector} { #{$property}: $department-for-culture-media-sport; }
-  .department-for-education #{$selector} { #{$property}: $department-for-education; }
-  .department-for-environment-food-rural-affairs #{$selector} { #{$property}: $department-for-environment-food-rural-affairs; }
-  .department-for-international-development #{$selector} { #{$property}: $department-for-international-development; }
-  .department-for-transport #{$selector} { #{$property}: $department-for-transport; }
-  .department-for-work-pensions #{$selector} { #{$property}: $department-for-work-pensions; }
-  .department-of-energy-climate-change #{$selector} { #{$property}: $department-of-energy-climate-change; }
-  .department-of-health #{$selector} { #{$property}: $department-of-health; }
-  .driving-standards-agency #{$selector} { #{$property}: $department-for-transport; }
-  .foreign-commonwealth-office #{$selector} { #{$property}: $foreign-commonwealth-office; }
-  .government-equalities-office #{$selector} { #{$property}: $department-for-culture-media-sport; }
-  .hm-government #{$selector} { #{$property}: $hm-government; }
-  .hm-revenue-customs #{$selector} { #{$property}: $hm-revenue-customs; }
-  .hm-treasury #{$selector} { #{$property}: $hm-treasury; }
-  .home-office #{$selector} { #{$property}: $home-office; }
-  .ministry-of-defence #{$selector} { #{$property}: $ministry-of-defence; }
-  .ministry-of-justice #{$selector} { #{$property}: $ministry-of-justice; }
-  .northern-ireland-office #{$selector} { #{$property}: $northern-ireland-office; }
-  .office-of-the-advocate-general-for-scotland #{$selector} { #{$property}: $office-of-the-advocate-general-for-scotland; }
-  .office-of-the-leader-of-the-house-of-lords #{$selector} { #{$property}: $office-of-the-leader-of-the-house-of-lords; }
-  .planning-inspectorate #{$selector} { #{$property}: $department-for-communities-and-local-government; }
-  .scotland-office #{$selector} { #{$property}: $scotland-office; }
-  .the-office-of-the-leader-of-the-house-of-commons #{$selector} { #{$property}: $the-office-of-the-leader-of-the-house-of-commons; }
-  .uk-export-finance #{$selector} { #{$property}: $uk-export-finance; }
-  .wales-office #{$selector} { #{$property}: $wales-office; }
-}
 
-@mixin websafe-department-colours($selector, $property) {
-  .attorney-generals-office #{$selector} { #{$property}: $attorney-generals-office-websafe; }
-  .building-regulations-advisory-committee #{$selector} { #{$property}: $department-for-communities-and-local-government-websafe; }
-  .cabinet-office #{$selector} { #{$property}: $cabinet-office-websafe; }
-  .department-for-business-innovation-skills #{$selector} { #{$property}: $department-for-business-innovation-skills-websafe; }
-  .department-for-communities-and-local-government #{$selector} { #{$property}: $department-for-communities-and-local-government-websafe; }
-  .department-for-culture-media-sport #{$selector} { #{$property}: $department-for-culture-media-sport-websafe; }
-  .department-for-education #{$selector} { #{$property}: $department-for-education-websafe; }
-  .department-for-environment-food-rural-affairs #{$selector} { #{$property}: $department-for-environment-food-rural-affairs-websafe; }
-  .department-for-international-development #{$selector} { #{$property}: $department-for-international-development-websafe; }
-  .department-for-transport #{$selector} { #{$property}: $department-for-transport-websafe; }
-  .department-for-work-pensions #{$selector} { #{$property}: $department-for-work-pensions-websafe; }
-  .department-of-energy-climate-change #{$selector} { #{$property}: $department-of-energy-climate-change-websafe; }
-  .department-of-health #{$selector} { #{$property}: $department-of-health-websafe; }
-  .driving-standards-agency #{$selector} { #{$property}: $department-for-transport-websafe; }
-  .foreign-commonwealth-office #{$selector} { #{$property}: $foreign-commonwealth-office-websafe; }
-  .government-equalities-office #{$selector} { #{$property}: $department-for-culture-media-sport-websafe; }
-  .hm-government #{$selector} { #{$property}: $hm-government-websafe; }
-  .hm-revenue-customs #{$selector} { #{$property}: $hm-revenue-customs-websafe; }
-  .hm-treasury #{$selector} { #{$property}: $hm-treasury-websafe; }
-  .home-office #{$selector} { #{$property}: $home-office-websafe; }
-  .ministry-of-defence #{$selector} { #{$property}: $ministry-of-defence-websafe; }
-  .ministry-of-justice #{$selector} { #{$property}: $ministry-of-justice-websafe; }
-  .northern-ireland-office #{$selector} { #{$property}: $northern-ireland-office-websafe; }
-  .office-of-the-advocate-general-for-scotland #{$selector} { #{$property}: $office-of-the-advocate-general-for-scotland-websafe; }
-  .office-of-the-leader-of-the-house-of-lords #{$selector} { #{$property}: $office-of-the-leader-of-the-house-of-lords-websafe; }
-  .planning-inspectorate #{$selector} { #{$property}: $department-for-communities-and-local-government-websafe; }
-  .scotland-office #{$selector} { #{$property}: $scotland-office-websafe; }
-  .the-office-of-the-leader-of-the-house-of-commons #{$selector} { #{$property}: $the-office-of-the-leader-of-the-house-of-commons-websafe; }
-  .uk-export-finance #{$selector} { #{$property}: $uk-export-finance-websafe; }
-  .wales-office #{$selector} { #{$property}: $wales-office-websafe; }
+// All organisation colours as list of (class_name, colour, websafe colour)
+$all-organisation-brand-colours: 
+  'attorney-generals-office' $attorney-generals-office $attorney-generals-office-websafe,
+  'cabinet-office' $cabinet-office $cabinet-office-websafe,
+  'department-for-business-innovation-skills' $department-for-business-innovation-skills $department-for-business-innovation-skills-websafe,
+  'department-for-communities-and-local-government' $department-for-communities-and-local-government $department-for-communities-and-local-government-websafe,
+  'department-for-culture-media-sport' $department-for-culture-media-sport $department-for-culture-media-sport-websafe,
+  'department-for-education' $department-for-education $department-for-education-websafe,
+  'department-for-environment-food-rural-affairs' $department-for-environment-food-rural-affairs $department-for-environment-food-rural-affairs-websafe,
+  'department-for-international-development' $department-for-international-development $department-for-international-development-websafe,
+  'department-for-transport' $department-for-transport $department-for-transport-websafe,
+  'department-for-work-pensions' $department-for-work-pensions $department-for-work-pensions-websafe,
+  'department-of-energy-climate-change' $department-of-energy-climate-change $department-of-energy-climate-change-websafe,
+  'department-of-health' $department-of-health $department-of-health-websafe,
+  'foreign-commonwealth-office' $foreign-commonwealth-office $foreign-commonwealth-office-websafe,
+  'hm-government' $hm-government $hm-government-websafe,
+  'hm-revenue-customs' $hm-revenue-customs $hm-revenue-customs-websafe,
+  'hm-treasury' $hm-treasury $hm-treasury-websafe,
+  'home-office' $home-office $home-office-websafe,
+  'ministry-of-defence' $ministry-of-defence $ministry-of-defence-websafe,
+  'ministry-of-justice' $ministry-of-justice $ministry-of-justice-websafe,
+  'northern-ireland-office' $northern-ireland-office $northern-ireland-office-websafe,
+  'office-of-the-advocate-general-for-scotland' $office-of-the-advocate-general-for-scotland $office-of-the-advocate-general-for-scotland-websafe,
+  'office-of-the-leader-of-the-house-of-lords' $office-of-the-leader-of-the-house-of-lords $office-of-the-leader-of-the-house-of-lords-websafe,
+  'scotland-office' $scotland-office $scotland-office-websafe,
+  'the-office-of-the-leader-of-the-house-of-commons' $the-office-of-the-leader-of-the-house-of-commons $the-office-of-the-leader-of-the-house-of-commons-websafe,
+  'uk-export-finance' $uk-export-finance $uk-export-finance-websafe,
+  // TODO: blocked by govuk_frontend_toolkit#53
+  //'uk-trade-investment' $uk-trade-investment $uk-trade-investment-websafe,
+  'wales-office' $wales-office $wales-office-websafe;
+
+
+@mixin organisation-brand-colour($selector, $property, $websafe: false) {
+  @each $organisation in $all-organisation-brand-colours {
+    .#{nth($organisation, 1)}-brand-colour #{$selector} {
+      @if $websafe {
+        #{$property}: nth($organisation, 3);
+      }
+      @else {
+        #{$property}: nth($organisation, 2);
+      }
+    }
+  }
 }
+
+
diff --git a/app/assets/stylesheets/frontend/views/_organisations.scss b/app/assets/stylesheets/frontend/views/_organisations.scss
@@ -778,10 +778,10 @@
     border-bottom-width: 5px;
     border-bottom-style: solid;
   }
-  @include department-colours("h1", border-color);
-  @include department-colours("h2", border-color);
-  @include websafe-department-colours(".social-media-link .connect", background-color);
-  @include websafe-department-colours("a", color);
+  @include organisation-brand-colour("h1", border-color);
+  @include organisation-brand-colour("h2", border-color);
+  @include organisation-brand-colour(".social-media-link .connect", background-color, $websafe: true);
+  @include organisation-brand-colour("a", color, $websafe: true);
 }
 .organisations-external {
   @include media(desktop){
@@ -1153,9 +1153,9 @@
 // Used on:
 // organisations#about, corporate_information_page#show
 .organisation-page {
-  @include websafe-department-colours('nav a', color);
-  @include websafe-department-colours('.block-2 a', color);
-  @include websafe-department-colours('.body .attachment .accessibility-warning h3 .toggler', color);
+  @include organisation-brand-colour('nav a', color, $websafe: true);
+  @include organisation-brand-colour('.block-2 a', color, $websafe: true);
+  @include organisation-brand-colour('.body .attachment .accessibility-warning h3 .toggler', color, $websafe: true);
 
   @include media(desktop){
     .block-1 {
@@ -1269,7 +1269,7 @@
       }
     }
   }
-  @include department-colours('.corporate-info h1', border-color);
+  @include organisation-brand-colour('.corporate-info h1', border-color);
 }
 
 

diff --git a/app/helpers/organisation_helper.rb b/app/helpers/organisation_helper.rb
@@ -59,13 +59,21 @@ def starts_with_vowel?(word_or_phrase)
   end
 
   def organisation_wrapper(organisation, options = {}, &block)
-    classes = [organisation.slug]
+    classes = [organisation.slug, organisation_brand_colour_class(organisation)]
     classes << organisation.organisation_type.name.parameterize if organisation.respond_to?(:organisation_type)
     content_tag_for :div, organisation, class: classes.join(" ") do
       block.call
     end
   end
 
+  def organisation_brand_colour_class(organisation)
+    if organisation.organisation_brand_colour
+      "#{organisation.organisation_brand_colour.class_name}-brand-colour"
+    else
+      ""
+    end
+  end
+
   def organisation_site_thumbnail_path(organisation)
     begin
       image_path("organisation_screenshots/#{organisation.slug}.png")

diff --git a/app/models/organisation.rb b/app/models/organisation.rb
@@ -241,6 +241,14 @@ def organisation_logo_type=(organisation_logo_type)
     self.organisation_logo_type_id = organisation_logo_type && organisation_logo_type.id
   end
 
+  def organisation_brand_colour
+    OrganisationBrandColour.find_by_id(organisation_brand_colour_id)
+  end
+
+  def organisation_brand_colour=(organisation_brand_colour)
+    self.organisation_brand_colour_id = organisation_brand_colour && organisation_brand_colour.id
+  end
+
   def self.alphabetical(locale = I18n.locale)
     with_translations(locale).order('organisation_translations.name ASC')
   end

diff --git a/app/models/organisation_brand_colour.rb b/app/models/organisation_brand_colour.rb
@@ -0,0 +1,145 @@
+class OrganisationBrandColour
+  include ActiveRecordLikeInterface
+
+  attr_accessor :id, :title, :class_name
+
+  def self.find(class_name)
+    all.detect { |type| type.class_name == class_name } or raise ActiveRecord::RecordNotFound
+  end
+
+  AttorneyGeneralsOffice = create(
+    id: 1,
+    title: "Attorney General's Office",
+    class_name: "attorney-generals-office"
+  )
+  CabinetOffice = create(
+    id: 2,
+    title: "Cabinet Office",
+    class_name: "cabinet-office"
+  )
+  DepartmentForBusinessInnovationSkills = create(
+    id: 3,
+    title: "Department for Business, Innovation & Skills",
+    class_name: "department-for-business-innovation-skills"
+  )
+  DepartmentForCommunitiesAndLocalGovernment = create(
+    id: 4,
+    title: "Department for Communities and Local Government",
+    class_name: "department-for-communities-and-local-government"
+  )
+  DepartmentForCultureMediaSport = create(
+    id: 5,
+    title: "Department for Culture, Media & Sport",
+    class_name: "department-for-culture-media-sport"
+  )
+  DepartmentForEducation = create(
+    id: 6,
+    title: "Department for Education",
+    class_name: "department-for-education"
+  )
+  DepartmentForEnvironmentFoodRuralAffairs = create(
+    id: 7,
+    title: "Department for Environment, Food & Rural Affairs",
+    class_name: "department-for-environment-food-rural-affairs"
+  )
+  DepartmentForInternationalDevelopment = create(
+    id: 8,
+    title: "Department for International Development",
+    class_name: "department-for-international-development"
+  )
+  DepartmentForTransport = create(
+    id: 9,
+    title: "Department for Transport",
+    class_name: "department-for-transport"
+  )
+  DepartmentForWorkPensions = create(
+    id: 10,
+    title: "Department for Work & Pensions",
+    class_name: "department-for-work-pensions"
+  )
+  DepartmentOfEnergyClimateChange = create(
+    id: 11,
+    title: "Department of Energy & Climate Change",
+    class_name: "department-of-energy-climate-change"
+  )
+  DepartmentOfHealth = create(
+    id: 12,
+    title: "Department of Health",
+    class_name: "department-of-health"
+  )
+  ForeignCommonwealthOffice = create(
+    id: 13,
+    title: "Foreign & Commonwealth Office",
+    class_name: "foreign-commonwealth-office"
+  )
+  HMGovernment = create(
+    id: 14,
+    title: "HM Government",
+    class_name: "hm-government"
+  )
+  HMRevenueCustoms = create(
+    id: 15,
+    title: "HM Revenue & Customs",
+    class_name: "hm-revenue-customs"
+  )
+  HMTreasury = create(
+    id: 16,
+    title: "HM Treasury",
+    class_name: "hm-treasury"
+  )
+  HomeOffice = create(
+    id: 17,
+    title: "Home Office",
+    class_name: "home-office"
+  )
+  MinistryOfDefence = create(
+    id: 18,
+    title: "Ministry of Defence",
+    class_name: "ministry-of-defence"
+  )
+  MinistryOfJustice = create(
+    id: 19,
+    title: "Ministry of Justice",
+    class_name: "ministry-of-justice"
+  )
+  NorthernIrelandOffice = create(
+    id: 20,
+    title: "Northern Ireland Office",
+    class_name: "northern-ireland-office"
+  )
+  OfficeOfTheAdvocateGeneralForScotland = create(
+    id: 21,
+    title: "Office of the Advocate General for Scotland",
+    class_name: "office-of-the-advocate-general-for-scotland"
+  )
+  OfficeOfTheLeaderOfTheHouseOfLords = create(
+    id: 22,
+    title: "Office of the Leader of the House of Lords",
+    class_name: "office-of-the-leader-of-the-house-of-lords"
+  )
+  ScotlandOffice = create(
+    id: 23,
+    title: "Scotland Office",
+    class_name: "scotland-office"
+  )
+  TheOfficeOfTheLeaderOfTheHouseOfCommons = create(
+    id: 24,
+    title: "Office of the Leader of the House of Commons",
+    class_name: "the-office-of-the-leader-of-the-house-of-commons"
+  )
+  UKExportFinance = create(
+    id: 25,
+    title: "UK Export Finance",
+    class_name: "uk-export-finance"
+  )
+  UKTradeInvestment = create(
+    id: 26,
+    title: "UK Trade & Investment",
+    class_name: "uk-trade-investment"
+  )
+  WalesOffice = create(
+    id: 27,
+    title: "Wales Office",
+    class_name: "wales-office"
+  )
+end