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

Create Organisation logo component #754

Merged
merged 10 commits into from
Mar 4, 2016
Merged

Conversation

fofr
Copy link
Contributor

@fofr fofr commented Mar 2, 2016

Create a component for "medium sized" "stacked" logos, ie those used on HTML publications.

  • Port styles from static’s existing organisation styles, but tweak to match Whitehall exactly
  • Use the newer GDS-Logo stack for organisation logos
  • Use the new frontend toolkit list of colours to set border colour
  • Allow logos with and without links
  • If a crest is needed it needs to be passed in explicitly
  • The organisation name should be pre-formatted
  • Special case executive office branding (eg Prime Minister's office)

To help with building this I created a quick page in Whitehall to render all the medium stacked logos for every organisation:
https://github.com/alphagov/whitehall/compare/org-logos

Tests will fail until alphagov/govuk_frontend_toolkit#262 has been merged and this can be version bumped.

Example usage:

<%= render partial: 'govuk_component/organisation_logo', locals: {
  organisation: {
    name: "Attorney <br>General’s <br>Office",
    url: "/government/organisations/attorney-generals-office",
    brand: "attorney-generals-office",
    crest: "single-identity"
  }
} %>

organisation logo preview - gov uk component guide 20160302

logo-preview-mobile

`bundle exec rails generate govuk_component organisation-logo`
fofr added 9 commits March 4, 2016 11:50
* Port from `_organisations.scss`
* Separate logo wrapper from container
* Apply brand class to component wrapper so all child elements can be
styled accordingly
* Use the new frontend toolkit list of colours to set border colour
* Allow logos with and without links
* If a crest is needed it needs to be passed in explicitly
* The organisation name should be pre-formatted
* Use the images provided by frontend toolkit
* Make use of the retina versions
* Port the crest mixin from _organisations.scss and add the retina
versions, using the image dimensions to set background size correctly
* Use `<span>` to push the text down so its baseline lines up with the
coloured border
No logo has a coloured/branded border without a crest.
These logos have a crest but no border. In Whitehall they get given a
cabinet-office branding, which sets a colour that’s ignored. Instead of
using an ignored colour, use the `brand` to indicate what should happen.
No current organisation is using it.
* Use 35px rather than 38px, as per Whitehall
* Only apply this padding on tablet and above, on mobile the 25px
padding works for all crests, this also matches Whitehall
* Coerce logos to have matching heights. The crest images are all
slightly different sizes. Allow the width to vary, but alter the
background size so that they are either 25px or 35px, as per Whitehall.
This eliminates the need for the more complex crest mixin that needs
background sizes.

* Tweak the mobile padding to match Whitehall - crests are 20px tall,
expanding to 25px on tablets, tall crests start at 25px and expand to
35px.
@boffbowsh boffbowsh force-pushed the organisation-logo-component branch from 66973d2 to 500d2fa Compare March 4, 2016 11:51
@boffbowsh boffbowsh changed the title [DO NOT MERGE] Create Organisation logo component Create Organisation logo component Mar 4, 2016
boffbowsh added a commit that referenced this pull request Mar 4, 2016
@boffbowsh boffbowsh merged commit 4f6c67b into master Mar 4, 2016
@boffbowsh boffbowsh deleted the organisation-logo-component branch March 4, 2016 12:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants