From 811028373ccf011632422af2dfdd30e32219a09e Mon Sep 17 00:00:00 2001 From: Houston Blyden Date: Fri, 14 May 2021 09:36:27 +0100 Subject: [PATCH] feat: add Swift Content Card (#779) * convert to md * added swift card content card * update bullet points Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com> --- .../content-cards/swift-card.png | Bin 0 -> 12232 bytes .../content-card/_content-card.scss | 10 + .../content-cards/swift-card/_swift-card.njk | 31 ++ .../pages/patterns/content-cards/index.njk | 207 ------------ .../pages/patterns/content-cards/index.njk.md | 294 ++++++++++++++++++ 5 files changed, 335 insertions(+), 207 deletions(-) create mode 100644 src/wmnds/assets/img/component-images/content-cards/swift-card.png create mode 100644 src/wmnds/patterns/content-cards/swift-card/_swift-card.njk delete mode 100644 src/www/pages/patterns/content-cards/index.njk create mode 100644 src/www/pages/patterns/content-cards/index.njk.md diff --git a/src/wmnds/assets/img/component-images/content-cards/swift-card.png b/src/wmnds/assets/img/component-images/content-cards/swift-card.png new file mode 100644 index 0000000000000000000000000000000000000000..1baa5fa488d7868ddd19ffa8fcaa617a7c1c334d GIT binary patch literal 12232 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 literal 0 HcmV?d00001 diff --git a/src/wmnds/components/content-card/_content-card.scss b/src/wmnds/components/content-card/_content-card.scss index 4af145869..94b94f155 100644 --- a/src/wmnds/components/content-card/_content-card.scss +++ b/src/wmnds/components/content-card/_content-card.scss @@ -46,6 +46,16 @@ } } + &__content { + @media (max-width: $breakpoint-sm - 1) { + margin-top: $size-md; + } + + & > *:last-child { + margin-bottom: 0; + } + } + &__image { width: 100%; object-fit: cover; diff --git a/src/wmnds/patterns/content-cards/swift-card/_swift-card.njk b/src/wmnds/patterns/content-cards/swift-card/_swift-card.njk new file mode 100644 index 000000000..b3114e1e3 --- /dev/null +++ b/src/wmnds/patterns/content-cards/swift-card/_swift-card.njk @@ -0,0 +1,31 @@ +{% macro wmndsContentCardSwiftCard(params) %} +{# imports #} +{% from "wmnds/components/content-card/_content-card.njk" import wmndsContentCard %} +{# Set #} +{% set title = params.title if params.title else "How to get Swift pay as you go" %} +{% set content = params.content %} +{% set img = params.img if params.img else "/img/component-images/content-cards/swift-card.png"%} +{# Set up nav links #} + +{% call wmndsContentCard() %} + +{% endcall %} + +{% endmacro %} diff --git a/src/www/pages/patterns/content-cards/index.njk b/src/www/pages/patterns/content-cards/index.njk deleted file mode 100644 index dce3479f7..000000000 --- a/src/www/pages/patterns/content-cards/index.njk +++ /dev/null @@ -1,207 +0,0 @@ -{% extends "www/_layouts/layout-left-pane.njk" %} -{% set pageTitle="Content cards" %} -{% set section="Patterns" %} -{# Imports #} -{% from "www/_partials/component-example/component-example.njk" import compExample %} - -{% block content %} -{# About #} -

About

-

These are common applications of the content card component.

- - -

-{# Map card #} -

Map card

-{# What #} -

What is it?

-
    -
  • A card with an interactive map component.
    • -
- -{# When to #} -

When to use it?

-
    -
  • When there is a user need for an interactive map to display information.
    • -
  • When there is an alternative way to view the information on the interactive map.
    • -
-{# When not to #} -

When not to use it?

-
    -
  • When it is the sole way of presenting the information, you must provide an alternative.
    • -
  • When the map is a screenshot or image. This is called a static map. Do not use static maps on Transport for West Midlands products.
    • -
  • When there is no user need for a map, use text description instead.
    • -
- -{# Map example #} -{% from "wmnds/patterns/content-cards/map/_map.njk" import wmndsContentCardMap %} - -{{ - compExample([ - wmndsContentCardMap() - ]) -}} -

-{# Button card #} -

Button card

-{# What #} -

What is it?

-
    -
  • A card with several buttons in.
    • -
-{# When to #} -

When to use it?

-
    -
  • To direct users to different content relevant to their needs.
    • -
  • At the end of the main page content. We found that users preferred to split lots of content into smaller, specific pages and that this was the best way to continue the journey after reading the main overview content.
    • -
-{# When not to #} -

When not to use it?

-
    -
  • To attract the user's attention if there is no benefit to them reading the content.
    • -
  • To list links within a section or related content. Use the in-line navigation card instead.
    • -
- -{# Set up buttons #} -{% from "wmnds/patterns/content-cards/buttons/_buttons.njk" import wmndsContentCardButtons %} - -{{ - compExample([ - wmndsContentCardButtons() - ]) -}} - -

-{# Image card #} -

Image card

-{# What #} -

What is it?

-
    -
  • A card with an image in.
    • -
-{# When to #} -

When to use it?

-
    -
  • To display an image within a tile.
    • -
  • When the image complements the text.
    • -
-{# When to to #} -

When not to use it?

-
    -
  • When the image has text in. This distracts the user and usually fails accessibility criteria.
    • -
  • When the image is a cartoon or illustration. These are called vector images. Vector images display as poor quality for many users.
    • -
- -{# Set up image #} -{% from "wmnds/patterns/content-cards/image/_image.njk" import wmndsContentCardImage %} - -{{ - compExample([ - wmndsContentCardImage() - ]) -}} - -

-{# In-line navigation card #} -

In-line navigation card

-{# What #} -

What is it?

-
    -
  • A card with in-text links for navigation of sections and displaying related content.
    • -
-{# When to #} -

When to use it?

-
    -
  • To help the user navigate a collection of pages. This is called a section.
    • -
  • To show related content which meets user needs.
    • -
  • To help the user navigate a long page using in-text anchors.
    • -
  • Only use this pattern in a sidebar.
    • -
-{# When not to #} -

When not to use it?

-
    -
  • When the page links you are listing to form part of a journey or process. The journey should be linear.
    • -
  • When you are trying to attract the user's attention. This is called a call-to-action.
    • -
-{# How to #} -

How to use it

-
    -
  • The group of links must have a title to help users understand what the links are for. For example, 'Related content', 'On this page' or the section name.
    • -
  • If the card is used to navigate a long page of content, it should be displayed on the left-hand side.
    • -
  • If the card is used to navigate a set of pages, like a section or related content, it should be displayed on the right-hand side.
    • -
  • The current page or section being viewed must be inset.
    • -
- -{# Set up inline navigation #} -{% from "wmnds/patterns/content-cards/inline-navigation/_inline-navigation.njk" import wmndsContentCardInlineNavigation %} - -{{ - compExample([ - wmndsContentCardInlineNavigation() - ]) -}} - -{# With current page #} -

In-line navigation with current page

- -{{ - compExample([ - wmndsContentCardInlineNavigation({ - withCurrentPage: true - }) - ]) -}} - -

-{# Email sign up card #} -

Email sign up card

-{# What #} -

What does it do?

-
    -
  • Allows the user to sign up for updates when information changes on a page.
    • -
  • Sends personalised updates to users based on their location.
    • -
-{# When to #} -

When to use it?

-
    -
  • Use these content tiles on pages where users can sign-up for newsletter updates.
    • -
  • For a standard newsletter sign up, use the content tile where the text fields expand.
    • -
  • If you want to capture additional user data, then use the content block which links to an external form, e.g. Campaign Monitor.
    • -
-

When adding a sign up form from Campaign Monitor, you are provided with HTML markup, but make sure not to change any of the generated attributes except for classes.

-

They have been changed in the following examples to avoid accessibility errors.

- - -{# Set up email sign up #} -{% from "wmnds/patterns/content-cards/email-sign-up/_email-sign-up.njk" import wmndsContentCardEmailSignUp %} - -{# Collapsed #} -

Collapsed

-

This is the default state for the email sign up card.

- -{{ - compExample([ - wmndsContentCardEmailSignUp({ exampleSuffix: "example-1"}) - ]) -}} - -{# Expanded #} -

Expanded

-

The collapsed card will expand when the 'continue' button is pressed/tapped.

- -{{ - compExample([ - wmndsContentCardEmailSignUp({ expanded: true, exampleSuffix: "example-2" }) - ]) -}} - -{# External link #} -

External link

-

Use this content card when you want to send users to an external Campaign Monitor form if you want to capture more user data such as demographics, travel habits etc.

- -{{ - compExample([ - wmndsContentCardEmailSignUp({ externalLink: true, exampleSuffix: "example-3" }) - ]) -}} -{% endblock %} diff --git a/src/www/pages/patterns/content-cards/index.njk.md b/src/www/pages/patterns/content-cards/index.njk.md new file mode 100644 index 000000000..c81d8a92e --- /dev/null +++ b/src/www/pages/patterns/content-cards/index.njk.md @@ -0,0 +1,294 @@ +{% extends "www/_layouts/layout-left-pane.njk" %} +{% set pageTitle="Content cards" %} +{% set section="Patterns" %} +{# Imports #} +{% from "www/_partials/component-example/component-example.njk" import compExample %} + +{% block content %} +{% markdown %} +{# About #} + +## About + +These are common applications of the content card component. + +{# Map card #} + +## Map card + +{# What #} + +

What is it?

+ +- A card with an interactive map component. + +{# When to #} + +

When to use it?

+ +- When there is a user need for an interactive map to display information. +- When there is an alternative way to view the information on the interactive map. + +{# When not to #} + +

When not to use it?

+ +- When it is the sole way of presenting the information, you must provide an alternative. +- When the map is a screenshot or image. This is called a static map. Do not use static maps on Transport for West Midlands products. +- When there is no user need for a map, use text description instead. + +{% endmarkdown %} + +{# Map example #} +{% from "wmnds/patterns/content-cards/map/_map.njk" import wmndsContentCardMap %} + +{{ + compExample([ + wmndsContentCardMap() + ]) +}} + +{% markdown %} + +{# Button card #} + +## Button card + +{# What #} + +

What is it?

+ +- A card with several buttons in. + +{# When to #} + +

When to use it?

+ +- To direct users to different content relevant to their needs. +- At the end of the main page content. We found that users preferred to split lots of content into smaller, specific pages and that this was the best way to continue the journey after reading the main overview content. + +{# When not to #} + +

When not to use it?

+ +- To attract the user's attention if there is no benefit to them reading the content. +- To list links within a section or related content. Use the in-line navigation card instead. + +{% endmarkdown %} + +{# Set up buttons #} +{% from "wmnds/patterns/content-cards/buttons/_buttons.njk" import wmndsContentCardButtons %} + +{{ + compExample([ + wmndsContentCardButtons() + ]) +}} + +{% markdown %} + +{# Image card #} + +## Image card + +{# What #} + +

What is it?

+ +- A card with an image in. + +{# When to #} + +

When to use it?

+ +- To display an image within a tile. +- When the image complements the text. + +{# When to to #} + +

When not to use it?

+ +- When the image has text in. This distracts the user and usually fails accessibility criteria. +- When the image is a cartoon or illustration. These are called vector images. Vector images display as poor quality for many users. + +{% endmarkdown %} + +{# Set up image #} +{% from "wmnds/patterns/content-cards/image/_image.njk" import wmndsContentCardImage %} + +{{ + compExample([ + wmndsContentCardImage() + ]) +}} + +{% markdown %} +{# In-line navigation card #} + +## In-line navigation card + +{# What #} + +

What is it?

+ +- A card with in-text links for navigation of sections and displaying related content. + +{# When to #} + +

When to use it?

+ +- To help the user navigate a collection of pages. This is called a section. +- To show related content which meets user needs. +- To help the user navigate a long page using in-text anchors. +- Only use this pattern in a sidebar. + +{# When not to #} + +

When not to use it?

+ +- When the page links you are listing to form part of a journey or process. The journey should be linear. +- When you are trying to attract the user's attention. This is called a call-to-action. + +{# How to #} + +

How to use it

+ +- The group of links must have a title to help users understand what the links are for. For example, 'Related content', 'On this page' or the section name. +- If the card is used to navigate a long page of content, it should be displayed on the left-hand side. +- If the card is used to navigate a set of pages, like a section or related content, it should be displayed on the right-hand side. +- The current page or section being viewed must be inset. + +{% endmarkdown %} + +{# Set up inline navigation #} +{% from "wmnds/patterns/content-cards/inline-navigation/_inline-navigation.njk" import wmndsContentCardInlineNavigation %} + +{{ + compExample([ + wmndsContentCardInlineNavigation() + ]) +}} + +{% markdown %} +{# With current page #} + +### In-line navigation with current page + +{% endmarkdown %} + +{{ + compExample([ + wmndsContentCardInlineNavigation({ + withCurrentPage: true + }) + ]) +}} + +{% markdown %} + +{# Email sign up card #} + +## Email sign up card + +{# What #} + +

What does it do?

+ +- Allows the user to sign up for updates when information changes on a page. +- Sends personalised updates to users based on their location. + +{# When to #} + +

When to use it?

+ +- Use these content tiles on pages where users can sign-up for newsletter updates. +- For a standard newsletter sign up, use the content tile where the text fields expand. +- If you want to capture additional user data, then use the content block which links to an external form, e.g. Campaign Monitor. + +When adding a sign up form from Campaign Monitor, you are provided with HTML markup, but make sure not to change any of the generated attributes except for classes. +They have been changed in the following examples to avoid accessibility errors. + +{% endmarkdown %} + +{# Set up email sign up #} +{% from "wmnds/patterns/content-cards/email-sign-up/_email-sign-up.njk" import wmndsContentCardEmailSignUp %} + +{% markdown %} +{# Collapsed #} + +### Collapsed + +This is the default state for the email sign up card. + +{% endmarkdown %} + +{{ + compExample([ + wmndsContentCardEmailSignUp({ exampleSuffix: "example-1"}) + ]) +}} + +{% markdown %} +{# Expanded #} + +### Expanded + +The collapsed card will expand when the 'continue' button is pressed/tapped. + +{% endmarkdown %} + +{{ + compExample([ + wmndsContentCardEmailSignUp({ expanded: true, exampleSuffix: "example-2" }) + ]) +}} + +{% markdown %} +{# External link #} + +### External link + +Use this content card when you want to send users to an external Campaign Monitor form if you want to capture more user data such as demographics, travel habits etc. + +{% endmarkdown %} + +{{ + compExample([ + wmndsContentCardEmailSignUp({ externalLink: true, exampleSuffix: "example-3" }) + ]) +}} + +{% from "wmnds/patterns/content-cards/swift-card/_swift-card.njk" import wmndsContentCardSwiftCard %} +{% markdown %} +{# Swift card #} + +## Swift card + +

What does it do?

+ +- Shows the image of Swift card and explains how to purchase it + +

When to use it?

+ +- Only on Swift product landing pages such as Swift Go and PAYG + +

When not to use it?

+ +- On informational content pages. If you need to use a content card use a standard content card pattern. + +

How it works

+ +- User can add Swift card image +- User can edit title +- User can add description with bullet points and links +- This card is not clickable + +{% endmarkdown %} + +{{ + compExample([ + wmndsContentCardSwiftCard() + ]) +}} + +{% endblock %}