-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add purple branded banner pattern (#785)
* add branded banner files * add description text * style banner * add pattern params * replace home page with new banner * update props & example * update description Co-authored-by: Catia Costa <34938764+catiarodriguescosta@users.noreply.github.com>
- Loading branch information
1 parent
cd44140
commit 5ce3a3b
Showing
8 changed files
with
240 additions
and
41 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| {% macro wmndsBrandedBanner(params) %} | ||
| {# Imports #} | ||
| {% from "wmnds/components/breadcrumb/_breadcrumb.njk" import wmndsBreadcrumb %} | ||
| {% from "wmnds/components/icon/_icon.njk" import wmndsIcon %} | ||
| {% from "wmnds/components/link/as-button/_as-button.njk" import wmndsLinkAsButton %} | ||
|
|
||
| {# Set vars #} | ||
| {% set titleHTML = params.title if params.title else "" %} | ||
| {% set breadcrumbItems = params.breadcrumbItems %} | ||
| {% set contentCol1 = params.contentCol1 %} | ||
| {% set contentCol2 = params.contentCol2 %} | ||
| {% set ctaButton = params.ctaButton %} | ||
|
|
||
| <div class="wmnds-branded-banner"> | ||
| <div class="wmnds-container"> | ||
| <div class="wmnds-grid wmnds-grid--spacing-lg-2-xl wmnds-m-t-sm wmnds-m-b-sm"> | ||
| <div class="wmnds-col-1 wmnds-col-md-2-3"> | ||
| {% if breadcrumbItems %} | ||
| {{ | ||
| wmndsBreadcrumb({ | ||
| items: breadcrumbItems | ||
| }) | ||
| }} | ||
| {% endif %} | ||
| {% if titleHTML %} | ||
| <h1 class="wmnds-branded-banner__title"> | ||
| {{ titleHTML | safe }} | ||
| </h1> | ||
| {% endif %} | ||
| {% if contentCol1 %} | ||
| {{ contentCol1 | safe }} | ||
| {% else %} | ||
| {% if titleHtml !== null %} | ||
| <h1 class="wmnds-branded-banner__title"> | ||
| {{ | ||
| wmndsIcon({ | ||
| icon: 'swift-full-logo', | ||
| class: 'wmnds-swift-logo-inline' | ||
| }) | ||
| }} and tickets | ||
| </h1> | ||
| {% endif %} | ||
| <p class="h3">We sell lots of tickets for bus, train and tram travel in the West Midlands</p> | ||
| <p>You can also combine different modes of travel to suit your needs. <br>Tickets can last from 1 day to a year.</p> | ||
| {% endif %} | ||
| </div> | ||
| {% if contentCol2 %} | ||
| <div class="wmnds-col-1 wmnds-col-md-1-3"> | ||
| <div class="wmnds-col-1"> | ||
| {{ contentCol2 | safe }} | ||
| </div> | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| {% if ctaButton %} | ||
| <div class="wmnds-col-1"> | ||
| {{ | ||
| wmndsLinkAsButton({ | ||
| contentText: ctaButton.contentText if ctaButton.contentText else "Button text", | ||
| link: ctaButton.link if ctaButton.link else "#", | ||
| linkTitle: ctaButton.linkTitle if ctaButton.linkTitle else ctaButton.contentText, | ||
| linkTarget: ctaButton.linkTarget if ctaButton.linkTarget else "_self", | ||
| iconRight: 'general-chevron-right', | ||
| classes: 'wmnds-btn--dark-bg' | ||
| }) | ||
| }} | ||
| </div> | ||
| {% else %} | ||
| <div class="wmnds-col-1"> | ||
| {{ | ||
| wmndsLinkAsButton({ | ||
| contentText: 'Find a ticket', | ||
| iconRight: 'general-chevron-right', | ||
| iconRight: 'general-chevron-right', | ||
| classes: 'wmnds-btn--dark-bg' | ||
| }) | ||
| }} | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| </div> | ||
| {% endmacro %} |
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,34 @@ | ||
| .wmnds-branded-banner { | ||
| padding: $size-lg 0; | ||
| color: $white; | ||
| background-color: get-color(primary); | ||
|
|
||
| .wmnds-breadcrumb { | ||
| padding: 0; | ||
|
|
||
| &__link, | ||
| &__list-item::before { | ||
| color: $white; | ||
| } | ||
| } | ||
|
|
||
| &__title { | ||
| color: currentColor; | ||
|
|
||
| svg { | ||
| width: 1em; | ||
| height: 1em; | ||
| fill: currentColor; | ||
| vertical-align: text-top; | ||
| } | ||
| } | ||
|
|
||
| // helper class for aligning swift logo icon | ||
| .wmnds-swift-logo-inline { | ||
| width: 3.6em; | ||
| height: 1.3em; | ||
| margin-top: -0.175em; | ||
| fill: currentColor; | ||
| vertical-align: middle; | ||
| } | ||
| } |
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,15 @@ | ||
| {% raw %} | ||
| {% from "wmnds/patterns/branded-banner/_branded-banner.njk" import wmndsBrandedBanner %} | ||
| {{ | ||
| wmndsBrandedBanner({ | ||
| title: "<svg class=\"wmnds-swift-logo-inline\"><use xlink:href=\"#wmnds-swift-full-logo\" href=\"#wmnds-swift-full-logo\"></use></svg> and tickets", | ||
| contentCol1: "<p class=\"h3\">We sell lots of tickets for bus, train and tram travel in the West Midlands</p><p>You can also combine different modes of travel to suit your needs. <br>Tickets can last from 1 day to a year.</p>", | ||
| ctaButton: { | ||
| contentText: 'Find a ticket', | ||
| link: '#', | ||
| linkTitle: 'Find a ticket' | ||
| } | ||
| }) | ||
| }} | ||
| {% endraw %} |
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,51 @@ | ||
| { | ||
| "wmndsBrandedBannerProps": [ | ||
| { | ||
| "name": "title", | ||
| "type": "string", | ||
| "description": "<strong>Required.</strong> HTML content to use as the title in the banner." | ||
| }, | ||
| { | ||
| "name": "contentCol1", | ||
| "type": "string", | ||
| "description": "<strong>Required.</strong> HTML content to use in the first column of the banner." | ||
| }, | ||
| { | ||
| "name": "contentCol2", | ||
| "type": "string", | ||
| "description": "HTML content to use in the second column of the banner. If left blank, this column will not display." | ||
| }, | ||
| { | ||
| "name": "breadcrumbItems", | ||
| "type": "array", | ||
| "description": "Array of breadcrumb items to show in the banner. See the <code class='wmnds-website-inline-code'>items</code> property under <a href='/components/breadcrumb/'>Breadcrumb</a>." | ||
| }, | ||
| { | ||
| "name": "ctaButton", | ||
| "type": "object", | ||
| "description": "Call to action link (displayed as a button) to use in the banner. If not supplied, no button will be displayed.", | ||
| "arrayOptions": [ | ||
| { | ||
| "name": "contentText", | ||
| "type": "string", | ||
| "description": "<strong>Required.</strong> Text to use within the button." | ||
| }, | ||
| { | ||
| "name": "link", | ||
| "type": "string", | ||
| "description": "<strong>Required.</strong> Link for the button." | ||
| }, | ||
| { | ||
| "name": "linkTitle", | ||
| "type": "string", | ||
| "description": "Text to use as the link title." | ||
| }, | ||
| { | ||
| "name": "linkTarget", | ||
| "type": "string", | ||
| "description": "Target attribute for the link. Defaults to \"_self\"" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } |
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