-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4538 from alphagov/global-bar-add
Add global bar component from static
- Loading branch information
Showing
17 changed files
with
454 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
app/assets/javascripts/govuk_publishing_components/components/global-banner.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| //= require govuk_publishing_components/lib/cookie-functions | ||
| window.GOVUK = window.GOVUK || {} | ||
| window.GOVUK.Modules = window.GOVUK.Modules || {}; | ||
|
|
||
| (function (Modules) { | ||
| function GlobalBanner ($module) { | ||
| this.$module = $module | ||
| this.GLOBAL_BANNER_SEEN_COOKIE = 'global_banner_seen' | ||
| this.alwaysOn = this.$module.getAttribute('data-global-banner-permanent') === 'true' | ||
| this.bannerVersion = parseInt(this.$module.getAttribute('data-banner-version')) | ||
| } | ||
|
|
||
| GlobalBanner.prototype.init = function () { | ||
| // if no cookie consent just show the banner | ||
| // if there is cookie consent... | ||
| // if there's no global banner cookie or the banner should always be shown, set the cookie and show the banner | ||
| // if there is a global banner cookie, check to see if the version number matches | ||
| // if it doesn't, set the global banner cookie and count to zero, show the banner | ||
| // if it does, check the count, if less than 3 increment, show the banner | ||
| var cookieCategory = window.GOVUK.getCookieCategory(this.GLOBAL_BANNER_SEEN_COOKIE) | ||
| var cookieConsent = window.GOVUK.getConsentCookie() | ||
|
|
||
| if (cookieConsent && cookieConsent[cookieCategory]) { | ||
| var currentCookie = window.GOVUK.getCookie(this.GLOBAL_BANNER_SEEN_COOKIE) | ||
|
|
||
| if (currentCookie === null) { | ||
| this.setBannerCookie(0) | ||
| this.makeBannerVisible() | ||
| } else { | ||
| var currentCookieContents = JSON.parse(currentCookie) | ||
| var currentCookieVersion = currentCookieContents.version | ||
|
|
||
| if (currentCookieVersion !== this.bannerVersion) { | ||
| this.setBannerCookie(0) | ||
| this.makeBannerVisible() | ||
| } else { | ||
| var count = currentCookieContents.count | ||
| if (this.alwaysOn) { | ||
| this.makeBannerVisible() | ||
| } else if (count < 3) { | ||
| this.setBannerCookie(count + 1) | ||
| this.makeBannerVisible() | ||
| } | ||
| } | ||
| } | ||
| } else { | ||
| this.makeBannerVisible() | ||
| } | ||
| } | ||
|
|
||
| GlobalBanner.prototype.setBannerCookie = function (count) { | ||
| var value = JSON.stringify({ count: count, version: this.bannerVersion }) | ||
| window.GOVUK.setCookie(this.GLOBAL_BANNER_SEEN_COOKIE, value, { days: 84 }) | ||
| } | ||
|
|
||
| GlobalBanner.prototype.makeBannerVisible = function () { | ||
| this.$module.classList.add('gem-c-global-banner--visible') | ||
| this.$module.setAttribute('data-ga4-global-banner', '') | ||
| } | ||
|
|
||
| Modules.GlobalBanner = GlobalBanner | ||
| })(window.GOVUK.Modules) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
app/assets/stylesheets/govuk_publishing_components/components/_global-banner.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| @import "govuk_publishing_components/individual_component_support"; | ||
|
|
||
| .gem-c-global-banner { | ||
| background-color: #d9e7f2; | ||
| border-top: govuk-spacing(2) solid govuk-colour("blue"); | ||
| display: none; | ||
| @include govuk-font(19); | ||
|
|
||
| .govuk-link, | ||
| .govuk-link:link { | ||
| color: govuk-colour("black"); | ||
| } | ||
| } | ||
|
|
||
| .gem-c-global-banner--visible { | ||
| display: block; | ||
| } | ||
|
|
||
| .gem-c-global-banner__message { | ||
| margin-bottom: 0; | ||
| margin-top: 0; | ||
| padding: govuk-spacing(4) 0; | ||
| } | ||
|
|
||
| .gem-c-global-banner__title { | ||
| font-weight: 700; | ||
| margin-right: govuk-spacing(2); | ||
| margin-bottom: govuk-spacing(1); | ||
|
|
||
| &:only-child { | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| .gem-c-global-banner__title, | ||
| .gem-c-global-banner__text { | ||
| color: govuk-colour("black"); | ||
| } |
43 changes: 43 additions & 0 deletions
43
app/views/govuk_publishing_components/components/_global_banner.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| <% | ||
| add_gem_component_stylesheet("global-banner") | ||
|
|
||
| title ||= nil | ||
| title_href ||= nil | ||
| text ||= nil | ||
| banner_version ||= nil | ||
| always_visible ||= false # if true banner is always visible & does not disappear automatically after 3 pageviews | ||
|
|
||
| component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) | ||
| component_helper.add_class("gem-c-global-banner govuk-!-display-none-print") | ||
| component_helper.set_id("global-banner") | ||
| component_helper.add_data_attribute({ module: "global-banner", nosnippet: "" }) | ||
| component_helper.add_data_attribute({ banner_version: banner_version }) if banner_version | ||
| component_helper.add_data_attribute({ global_banner_permanent: true }) if always_visible | ||
|
|
||
| title_classes = %w(gem-c-global-banner__title) | ||
| title_classes << "js-call-to-action" if title_href | ||
| title_classes << "govuk-link govuk-link--no-visited-state" if title_href | ||
|
|
||
| ga4_data = { | ||
| event_name: "navigation", | ||
| type: "global bar", | ||
| section: title, | ||
| }.to_json | ||
| %> | ||
| <% if title && banner_version %> | ||
| <%= tag.div(**component_helper.all_attributes) do %> | ||
| <p class="gem-c-global-banner__message govuk-width-container"> | ||
| <% if title_href %> | ||
| <a class="<%= title_classes.join(' ') %>" href="<%= title_href %>" data-module="ga4-link-tracker" data-ga4-link="<%= ga4_data %>"><%= title %></a> | ||
| <% else %> | ||
| <span class="<%= title_classes.join(' ') %>"><%= title %></span> | ||
| <% end %> | ||
|
|
||
| <% if text %> | ||
| <span class="gem-c-global-banner__text"> | ||
| <%= text %> | ||
| </span> | ||
| <% end %> | ||
| </p> | ||
| <% end %> | ||
| <% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
app/views/govuk_publishing_components/components/docs/global_banner.yml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| name: Global banner | ||
| description: A site-wide banner used to convey important information | ||
| body: | | ||
| If a user has consented to cookies the banner will disappear after three page views, unless the `always_visible` option is used. If no cookie consent is given the banner is always shown. | ||
| The [dev docs](https://docs.publishing.service.gov.uk/manual/global-banner.html) contains further information about this component and when it should be used. | ||
| shared_accessibility_criteria: | ||
| - link | ||
| examples: | ||
| default: | ||
| data: | ||
| title: Bring photo ID to vote | ||
| banner_version: 1 | ||
| with_a_link: | ||
| data: | ||
| title: Bring photo ID to vote | ||
| title_href: "https://www.gov.uk" | ||
| banner_version: 1 | ||
| with_a_link_and_text: | ||
| data: | ||
| title: Bring photo ID to vote | ||
| title_href: "https://www.gov.uk" | ||
| text: Check what photo ID you'll need to vote in person in the General Election on 4 July. | ||
| banner_version: 1 | ||
| always_visible: | ||
| description: With this option set the banner appears regardless of how many times it has been seen before. | ||
| data: | ||
| title: Bring photo ID to vote | ||
| banner_version: 1 | ||
| always_visible: true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| require "rails_helper" | ||
|
|
||
| describe "Global banner", type: :view do | ||
| def component_name | ||
| "global_banner" | ||
| end | ||
|
|
||
| it "renders nothing without any options" do | ||
| assert_empty render_component({}) | ||
| end | ||
|
|
||
| it "renders with minimum required options" do | ||
| render_component(title: "Look here you", banner_version: 1) | ||
| assert_select ".gem-c-global-banner", text: "Look here you" | ||
| end | ||
|
|
||
| it "renders with a link on the title" do | ||
| render_component(title: "Look here you", banner_version: 1, title_href: "https://www.gov.uk") | ||
| assert_select ".gem-c-global-banner a.gem-c-global-banner__title[href='https://www.gov.uk']", text: "Look here you" | ||
| end | ||
|
|
||
| it "includes GA4 attributes when there is a link" do | ||
| render_component(title: "Look here you", banner_version: 1, title_href: "https://www.gov.uk") | ||
| assert_select 'a.gem-c-global-banner__title[data-module="ga4-link-tracker"]' | ||
| assert_select 'a.gem-c-global-banner__title[data-ga4-link=\'{"event_name":"navigation","type":"global bar","section":"Look here you"}\']' | ||
| end | ||
|
|
||
| it "renders with a title and text" do | ||
| render_component(title: "Look here you", banner_version: 1, text: "This is important") | ||
| assert_select ".gem-c-global-banner .gem-c-global-banner__title", text: "Look here you" | ||
| assert_select ".gem-c-global-banner .gem-c-global-banner__text", text: "This is important" | ||
| end | ||
|
|
||
| it "includes the always visible option" do | ||
| render_component(title: "Look here you", banner_version: 1, always_visible: true) | ||
| assert_select ".gem-c-global-banner[data-global-banner-permanent]" | ||
| end | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.