Add department colours to components

[andysellick]

This PR follows the discussion over this RFC to add department colour branding to components.

The main point of discussion in the RFC centred around using colour specific classes instead of department ones, to avoid duplication and make the classnames more meaningful. I have decided not to implement this for the following reasons:

• coming up with classnames based on colours is hard i.e. colour--light-red, colour--lighter-red doesn't scale well if new colours are needed later, and neither does colour--red-1, colour--red-2 etc.
• changing the backend so all the organisations could have this different approach to branding would have involved a lot of work that we don't have time for this mission

I've written the code to be as flexible as possible (classes are all output from a helper method) so if a new approach is needed in future it shouldn't be too difficult to adapt. This change therefore broadly follows the originally proposed idea, with some specific changes:

• the mixin generates a single parent class containing child classes for font colour (using the websafe colour) and border colour (using the secondary colour)
• branding classes have been improved to be more BEM-like

In total this adds around 4KB to the CSS in the gem.

This PR includes two commits; one to add the colours and one to show how the model works on a component (note that the link to documentation in it won't work yet).

Trello card: https://trello.com/c/r4PLGbH5/58-create-a-branding-model-for-components

[vanitabarrett]

Not sure we need the ()?

[vanitabarrett]

I like this approach, I think it makes sense to use the logic in govuk_frontend_toolkit. Perhaps in the future we can revisit this and see how we can make it more specific to colour rather than department, but this seems a good solution for now to prevent blocking your work.

Happy to re-review and 👍 once you've added some documentation for the document list component using the department colours

[tijmenb]

Sorry for the late comments, I missed this PR.

[tijmenb]

We mostly avoid prefixing getters with get_ (I'm not sure why Rubocop hasn't picked that up, I'll investigate).

To me get_brand also implies that it'll return the brand passed in. Perhaps brand_class would reveal the intention more?

[andysellick]

Great suggestions, thanks. See this PR -> #300

[tijmenb]

I think it's worth it creating separate method for this and color to avoid typos.

Perhaps something like:

- <%= brand_helper.get_brand_element("border-color") %>">
+ <%= brand_helper.border_color_class %>

- <%= brand_helper.get_brand_element("color") %>">
+ <%= brand_helper.color_class %>