Add header component #408

alex-ju · 2018-07-11T11:56:09Z

This implements the header component from GOV.UK Frontend exemplifying with environment, product name and navigation items.

Notes

Contains a CSS fix that should be removed after updating to the next govuk-frontend release.
JavaScript needed for the navigation on mobile devices not added yet, will be part of the admin layout. (l.e. added in Add javascript support for admin layout components #415)

View in component guide

Trello card

NickColley

👋

NickColley · 2018-07-11T13:06:09Z

app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss

@@ -0,0 +1,34 @@
+// This component relies on styles from GOV.UK Frontend
+
+.govuk-header--production .govuk-header__container {


Should this use the 'gem-' namespace?

Good point raised here @NickColley. I would argue that we should keep the prefix of the component when extending it with modifiers in order to identify the source of the component. It can be indeed more difficult to figure out where the modifier class comes from though.

Since the root component still uses the upstream namespace, your modifier could show that it belongs in this gem, while still having the indication that most of the code is upstream?

Otherwise people may find it confusing that these modifiers are not in GOV.UK Frontend.

It also can mean that if GOV.UK Frontend introduces a modifier that you do not conflict (not so likely in this case, but as a general rule it could be sensible)

Sounds reasonable, will update.

tijmenb · 2018-07-11T14:23:42Z

app/views/govuk_publishing_components/component_guide/show.html.erb

-    This component uses the Design System, so only works inside the <%= link_to "admin layout", "/component-guide/layout_for_admin" %>
-  </p>
-</div>
+<%= render "govuk_publishing_components/components/notice", {


Done in #411

Rebased after #411 was merged.

tijmenb · 2018-07-11T14:24:32Z

app/views/govuk_publishing_components/components/_layout_header.html.erb

+  container_classes ||= ''
+  homepage_url ||= '/'
+  assets_path ||= '/assets/images'
+  product_name ||= nil


What's the difference between product_name and service_name?

Product name is the one displayed next to GOV.UK on the lest side (e.g. https://www.payments.service.gov.uk/), the product name is mainly used for services and is displayed on the two-thirds container (e.g. https://www.registertovote.service.gov.uk/register-to-vote/country-of-residence)

Ah ok thanks! Maybe we should start just with supporting product name? I think we'll go with that for the admin apps.

tijmenb · 2018-07-11T14:26:20Z

app/views/govuk_publishing_components/components/_layout_header.html.erb

+            <path fill="currentColor" fill-rule="evenodd"
+              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
+            ></path>
+            <image src="<%= assets_path %>/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image"></image>


We should be using the Rails helper here, which will link to the correct fingerprinted asset (see the docs for more info).

You can do this:

<%= image_tag "govuk-logotype-crown.png", class: "govuk-header__logotype-crown-fallback-image" %>

Sounds great. Will update!

tijmenb · 2018-07-11T14:38:34Z

app/views/govuk_publishing_components/components/_layout_header.html.erb

+  <div class="govuk-header__container <%= container_classes.present? || 'govuk-width-container' %>">
+
+    <div class="govuk-header__logo">
+      <a href="<%= homepage_url %>" class="govuk-header__link govuk-header__link--homepage">


To limit the number of params, we can use root_path instead of homepage_url, it's a (configurable) Rails default that points to the homepage of the application.

Tried but I get undefined local variable or method root_path. Might need to add it to the specs_helper.

tijmenb · 2018-07-11T16:22:33Z

app/views/govuk_publishing_components/components/docs/layout_for_admin.yml

@@ -14,6 +14,7 @@ body: |

  Typically you'll use this together with:

+  - the [layout header component](/component-guide/layout_header)


Can you use this component in the admin example layout (/admin) too?

Yes, we can. Wasn't sure if I should add this as part of this PR. I can raise a new PR to use both the header and the footer.

alex-ju · 2018-07-12T10:01:15Z

@tijmenb updated:

stripped the header component from optional parameters and make sure there are tests are covering all parameters
added the header and the footer to the admin layout

tijmenb

💯 💯

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 11, 2018 11:56 Inactive

alex-ju force-pushed the add-header-component branch from a1fac06 to b592dcb Compare July 11, 2018 11:58

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 11, 2018 11:58 Inactive

alex-ju force-pushed the add-header-component branch from b592dcb to 8b7c346 Compare July 11, 2018 12:06

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 11, 2018 12:06 Inactive

alex-ju force-pushed the add-header-component branch from 8b7c346 to e89829e Compare July 11, 2018 12:11

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 11, 2018 12:11 Inactive

NickColley reviewed Jul 11, 2018

View reviewed changes

alex-ju force-pushed the add-header-component branch from e89829e to e91cfb9 Compare July 11, 2018 13:46

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 11, 2018 13:46 Inactive

tijmenb reviewed Jul 11, 2018

View reviewed changes

alex-ju force-pushed the add-header-component branch from e91cfb9 to 7c44a45 Compare July 11, 2018 14:28

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 11, 2018 14:28 Inactive

alex-ju force-pushed the add-header-component branch from 7c44a45 to 6a6d2d9 Compare July 11, 2018 14:28

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 11, 2018 14:29 Inactive

alex-ju force-pushed the add-header-component branch from 6a6d2d9 to 8b74126 Compare July 11, 2018 14:30

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 11, 2018 14:30 Inactive

alex-ju force-pushed the add-header-component branch from 8b74126 to 39efd95 Compare July 11, 2018 14:37

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 11, 2018 14:37 Inactive

alex-ju force-pushed the add-header-component branch from 39efd95 to 5978a73 Compare July 11, 2018 14:45

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 11, 2018 14:45 Inactive

tijmenb reviewed Jul 11, 2018

View reviewed changes

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 12, 2018 09:52 Inactive

alex-ju added 3 commits July 12, 2018 10:52

Add header component

f3ef266

Strip components of non-mandatory options

54be9ba

Add header and footer to the admin layout

5bc1044

alex-ju force-pushed the add-header-component branch from c221f34 to 5bc1044 Compare July 12, 2018 09:53

benthorner temporarily deployed to govuk-publishing-compon-pr-408 July 12, 2018 09:53 Inactive

Update component name

e1d38e2

benthorner deployed to govuk-publishing-compon-pr-408 July 12, 2018 09:59 View deployment

tijmenb approved these changes Jul 12, 2018

View reviewed changes

alex-ju merged commit 512dd43 into master Jul 12, 2018

alex-ju deleted the add-header-component branch July 12, 2018 10:42

alex-ju mentioned this pull request Jul 12, 2018

Release version 9.5.0 #420

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add header component #408

Add header component #408

alex-ju commented Jul 11, 2018 •

edited

Loading

NickColley left a comment

NickColley Jul 11, 2018

alex-ju Jul 11, 2018

NickColley Jul 11, 2018

NickColley Jul 11, 2018

alex-ju Jul 11, 2018

tijmenb Jul 11, 2018

alex-ju Jul 11, 2018

tijmenb Jul 11, 2018

alex-ju Jul 11, 2018

tijmenb Jul 11, 2018

tijmenb Jul 11, 2018

alex-ju Jul 11, 2018

tijmenb Jul 11, 2018

alex-ju Jul 11, 2018 •

edited

Loading

tijmenb Jul 11, 2018

alex-ju Jul 11, 2018

alex-ju commented Jul 12, 2018

tijmenb left a comment

		@@ -0,0 +1,34 @@
		// This component relies on styles from GOV.UK Frontend

		.govuk-header--production .govuk-header__container {

		@@ -14,6 +14,7 @@ body: \|

		Typically you'll use this together with:

		- the [layout header component](/component-guide/layout_header)

Add header component #408

Add header component #408

Conversation

alex-ju commented Jul 11, 2018 • edited Loading

Notes

NickColley left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alex-ju Jul 11, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alex-ju commented Jul 12, 2018

tijmenb left a comment

Choose a reason for hiding this comment

alex-ju commented Jul 11, 2018 •

edited

Loading

alex-ju Jul 11, 2018 •

edited

Loading