diff --git a/src/wmnds/components/button/_button.scss b/src/wmnds/components/button/_button.scss index f8ece60f5..6737eccd2 100644 --- a/src/wmnds/components/button/_button.scss +++ b/src/wmnds/components/button/_button.scss @@ -265,6 +265,11 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s; width: 100%; } + // block modifier for full width buttons + &--align-left { + text-align: left; + } + // Show button like a normal link modifier &--link { display: inline; diff --git a/src/wmnds/patterns/_patterns.scss b/src/wmnds/patterns/_patterns.scss index 86dbecbaa..818af135c 100644 --- a/src/wmnds/patterns/_patterns.scss +++ b/src/wmnds/patterns/_patterns.scss @@ -12,4 +12,5 @@ @import "travel-updates/travel-updates"; // Travel updates styles @import "travel-mode-page-banner/travel-mode-page-banner"; // page-banner @import "search/search"; // Search pattern styles -@import "journey-planner-widget/journey-planner-widget"; // Search pattern styles +@import "journey-planner-widget/journey-planner-widget"; // Journey planner widget styles +@import "journey-planner/journey-planner"; // Journey planner styles diff --git a/src/wmnds/patterns/journey-planner-widget/_journey-planner-widget.njk b/src/wmnds/patterns/journey-planner-widget/_journey-planner-widget.njk index d11dd16d4..23ac8cf9c 100644 --- a/src/wmnds/patterns/journey-planner-widget/_journey-planner-widget.njk +++ b/src/wmnds/patterns/journey-planner-widget/_journey-planner-widget.njk @@ -29,7 +29,7 @@

{{formTitle}}

-
+
{{ diff --git a/src/wmnds/patterns/journey-planner/_example.js b/src/wmnds/patterns/journey-planner/_example.js new file mode 100644 index 000000000..2efdb5c90 --- /dev/null +++ b/src/wmnds/patterns/journey-planner/_example.js @@ -0,0 +1,3 @@ +const journeyPlannerJS = () => {}; + +export default journeyPlannerJS; diff --git a/src/wmnds/patterns/journey-planner/_example.njk b/src/wmnds/patterns/journey-planner/_example.njk new file mode 100644 index 000000000..5429e60ef --- /dev/null +++ b/src/wmnds/patterns/journey-planner/_example.njk @@ -0,0 +1,11 @@ +{% raw %} +{% from "wmnds/components/journey-planner/_journey-planner.njk" import wmndsJourneyPlanner %} + +{{ + wmndsJourneyPlanner({ + isOpen: true, + isHowOpen: false, + isWhenOpen: false + }) +}} +{% endraw %} diff --git a/src/wmnds/patterns/journey-planner/_journey-planner.njk b/src/wmnds/patterns/journey-planner/_journey-planner.njk new file mode 100644 index 000000000..682244791 --- /dev/null +++ b/src/wmnds/patterns/journey-planner/_journey-planner.njk @@ -0,0 +1,228 @@ +{% macro wmndsJourneyPlanner(params) %} + +{# Imports of components #} +{% from "wmnds/patterns/autocomplete/_autocomplete.njk" import wmndsAutocomplete %} +{% from "wmnds/components/button/_button.njk" import wmndsButton %} +{% from "wmnds/components/link/link/_link.njk" import wmndsLink %} +{% from "wmnds/components/icon/_icon.njk" import wmndsIcon %} +{% from "wmnds/components/form-elements/dropdown/_dropdown.njk" import wmndsDropdown %} +{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %} + + +{# Set params #} +{% set formTitle = params.formTitle if params.formTitle else "Plan your journey" %} +{% set isOpen = " wmnds-is--open" if params.isOpen %} +{% set suffix = "--opened" if params.isOpen else "--collapsed" %} +{% set detailsBtnText = "Hide details" if params.isOpen else "Add details" %} +{% set detailsBtnIcon = "general-minimise" if params.isOpen else "general-expand" %} +{% set marginTopClass = "" if params.isOpen else "wmnds-m-t-lg" %} + + + + +
+ +
+ +
+ +

{{formTitle}}

+ + + +
+ {{ + wmndsAutocomplete({ + id: ("mainjp-from" + suffix ), + name: "origin", + label: { + contentText: 'From', + classes: "h5" + }, + placeholder: 'Enter station or postcode', + loading: false, + showSuggestions: false, + textSuggestions: true, + isRequired: true + }) + }} +
+ +
+
+ {{ + wmndsButton({ + type: "link", + contentText: "Switch", + classes: "wmnds-m-t--lg" + }) + }} + + {{ + wmndsIcon({ + icon: 'general-swap', + class: 'wmnds-journey-planner__switch-icon' + }) | safe + }} +
+ + {{ + wmndsAutocomplete({ + id: ("mainjp-to" + suffix), + name: "destination", + label: { + contentText: 'To', + classes: "h5" + }, + placeholder: 'Enter station or postcode', + loading: false, + showSuggestions: false, + textSuggestions: true, + isRequired: true + }) + }} + +
+ + +
+
Which modes of transport will you use?
+
+
+ + {{ + wmndsButton({ + iconLeft: "modes-isolated-bus", + contentText: "Bus", + type: "mode", + classes:"wmnds-col-1" + }) + }} +
+
+ + {{ + wmndsButton({ + iconLeft: "modes-isolated-metro", + contentText: "Tram", + type: "mode", + classes:"wmnds-col-1" + }) + }} +
+
+ + {{ + wmndsButton({ + iconLeft: "modes-isolated-rail", + contentText: "Train", + type: "mode", + classes:"wmnds-col-1" + }) + }} +
+ + +
+
+ +
+ +
Leaving
+ + +
+
+ {{ + wmndsDropdown({ + id: ("mainjp-day" + suffix ), + secondaryColor: true, + name: "day", + items: [ + { + value: "today", + contentText: "Today", + selected: true, + disabled: false + }, + { + value: "tomorrow", + contentText: "Tomorrow", + selected: false, + disabled: false + } + ], + describedBy: null, + label: "Day", + labelClasses: "wmnds-screenreaders-only", + classes: null, + error: false, + errorMessage: { + id: null, + contentText: "Please select an option", + contentHTML: null, + classes: null + } + }) + }} +
+
+ {{ + wmndsDropdown({ + id: ("mainjp-time" + suffix), + name: "SelectJourneyTime", + secondaryColor: true, + type: "time", + describedBy: null, + label: "Time", + labelClasses: "wmnds-screenreaders-only", + classes: null, + error: false, + errorMessage: { + id: null, + contentText: "Please select an option", + contentHTML: null, + classes: null + } + }) + }} +
+
+ +
+ +
+
+
+ {{ + wmndsButton({ + contentText: detailsBtnText, + classes: "wmnds-btn--block wmnds-btn--align-left", + role: "button", + isDarkBg: true, + iconRight: detailsBtnIcon + }) + }} +
+
+ {{ + wmndsButton({ + contentText: "Plan my journey", + classes: "wmnds-btn--block wmnds-btn--align-left", + role: "submit", + iconRight: "general-chevron-right" + }) + }} +
+
+
+ + +
+ + +
+
+ + +{% endmacro %} \ No newline at end of file diff --git a/src/wmnds/patterns/journey-planner/_journey-planner.scss b/src/wmnds/patterns/journey-planner/_journey-planner.scss new file mode 100644 index 000000000..2cfc30b73 --- /dev/null +++ b/src/wmnds/patterns/journey-planner/_journey-planner.scss @@ -0,0 +1,54 @@ +.wmnds-journey-planner { + color: $white; + background-color: get-color(primary); + + h2, + .wmnds-btn--link { + color: $white; + } + + &__form { + & > div:not(.wmnds-journey-planner__from):not(.wmnds-journey-planner__to):not(.wmnds-journey-planner__submit) { + display: none; + } + } + + &.wmnds-is--open { + & .wmnds-journey-planner__form > div { + display: block !important; + } + } + + &__to { + position: relative; + } + + &__switch { + display: flex; + position: absolute; + top: 0; + right: 0; + align-items: center; + justify-content: flex-end; + } + + &__switch-icon { + width: 17px; + height: 23px; + margin-left: 8px; + fill: $white; + } + + .wmnds-btn--mode:active, + .wmnds-btn--mode:focus, + .wmnds-btn--mode:target { + background-color: get-color(secondary, 50); + } + + // Leave and arrive for when, modes for how + &__when, + &__how { + position: relative; + + } +} diff --git a/src/wmnds/patterns/journey-planner/_properties.njk.json b/src/wmnds/patterns/journey-planner/_properties.njk.json new file mode 100644 index 000000000..eebf7e53d --- /dev/null +++ b/src/wmnds/patterns/journey-planner/_properties.njk.json @@ -0,0 +1,19 @@ +{ + "wmndsJourneyPlannerProps": [ + { + "name": "isOpen", + "type": "boolean", + "description": "If true, journey planner will be expanded. Defaults to false." + }, + { + "name": "isWhenOpen", + "type": "boolean", + "description": "If true, journey planner area to define when you want to travel will be expanded. Defaults to false." + }, + { + "name": "isHowOpen", + "type": "boolean", + "description": "If true, journey planner area to define how (the mode of travel) do you want to travel will be expanded. Defaults to false." + } + ] +} diff --git a/src/www/pages/patterns/journey-planner/index.njk.md b/src/www/pages/patterns/journey-planner/index.njk.md index 0bec7a9cc..3b953dd70 100644 --- a/src/www/pages/patterns/journey-planner/index.njk.md +++ b/src/www/pages/patterns/journey-planner/index.njk.md @@ -4,29 +4,95 @@ {% set section="Patterns" %} {% from "www/_partials/component-example/component-example.njk" import compExample %} {% from "wmnds/patterns/journey-planner-widget/_journey-planner-widget.njk" import wmndsJourneyPlannerWidget %} +{% from "wmnds/patterns/journey-planner/_journey-planner.njk" import wmndsJourneyPlanner %} + {% block content %} {% markdown %} - # Widget + ## Homepage +{% endmarkdown %} + +

What does it do?

+{% markdown %} + * Helps users to plan a journey straight from the homepage and directs users to the full journey planner service +{% endmarkdown %} + +

When to use it?

+{% markdown %} + * On the homepage +{% endmarkdown %} + +

How it works?

+{% markdown %} + * The widget is collapsed by default. The widget expands to show the full journey information when the user selects the 'Add details' button. The additional travel details can be hidden when a user clicks on the 'Hide details' button + * The 'From' and 'To' fields use the autocomplete feature for train stations and postcodes. Users can also use their current location to automatically choose their departure or arrival location + * The ‘From’ and ’To’ fields can be switched at any time through the Switch [link button](https://designsystem.wmnetwork.co.uk/components/buttons/) + * Users can choose a specific transport mode as well as change their departure or arrival time + * The ‘Plan my journey’ [Call to action button](https://designsystem.wmnetwork.co.uk/components/buttons/) will send users to the full journey planner service with information on their selected journey + +{% endmarkdown %} + +

Default

+ + + {{ + compExample([ + wmndsJourneyPlanner() + ], { + componentPath: "wmnds/patterns/journey-planner/", + njk: true, + njkProps: wmndsJourneyPlannerProps, + js: false, + iframe: false + } + ) + }} + +{% markdown %} +

Expanded

+ When a user selects the ‘Add details' button, the full journey details are shown + +{% endmarkdown %} + +{{ + compExample([ + wmndsJourneyPlanner({ + isOpen: true + }) + ], { + componentPath: "wmnds/patterns/journey-planner/", + njk: true, + njkProps: wmndsJourneyPlannerProps, + js: false, + iframe: false + } + ) +}} + +{% markdown %} - ## What does it do? + ## Widget + + ### What does it do? * For users to quickly access journey information from any page of the West Midlands Network website * This widget directs users to the full journey planner service from the right sidebar of a page -## How it works? + ### When to use it? + * When the content on a page is related to West Midlands Network travel modes or travel information -- The widget is collapsed by default, showing only the ‘From’ field. The widget expands to show the full journey information when the user selects the ‘From’ field -- A complete list of the train stations in the Transport for West Midlands will automatically appear when the user selects the ’From’ or ‘To’ field. Users can also use their current location to automatically choose their departure or arrival location -- The ‘From’ and ’To’ fields can be switched at any time through the Switch button -- Users can choose a specific transport mode as well as change their departure or arrival time -- The ‘Mobility and advanced search’ link will direct users to the journey planner service where they can enter advanced filters -- The ‘Plan my journey’ [Call to action button](https://designsystem.wmnetwork.co.uk/components/buttons/) will send users to the full journey planner service with information on their selected journey + ### How it works? + * The widget is collapsed by default, showing only the ‘From’ field. The widget expands to show the full journey information when the user selects the ‘From’ field + * A complete list of the train stations in the West Midlands Network will automatically appear when the user selects the ’From’ or ‘To’ field. Users can also use their current location to automatically choose their departure or arrival location + * The ‘From’ and ’To’ fields can be switched at any time through the Switch button + * Users can choose a specific transport mode as well as change their departure or arrival time + * The ‘Mobility and advanced search’ link will direct users to the journey planner service where they can enter advanced filters + * The ‘Plan my journey’ [Call to action button](https://designsystem.wmnetwork.co.uk/components/buttons/) will send users to the full journey planner service with information on their selected journey -### Collapsed + #### Collapsed + This is the default widget view -This is the default widget view {% endmarkdown %} @@ -41,14 +107,15 @@ This is the default widget view iframe: false } ) + }} {% markdown %} -### Expanded - +#### Expanded When a user selects the ‘From’ field, the full journey details are expanded + {% endmarkdown %} {{ @@ -68,12 +135,12 @@ When a user selects the ‘From’ field, the full journey details are expanded {% markdown %} -### Change departure or arrival time - +#### Change departure or arrival time Users can manually change the departure or arrival time of their journey {% endmarkdown %} + {{ compExample([ wmndsJourneyPlannerWidget({ @@ -90,12 +157,13 @@ Users can manually change the departure or arrival time of their journey ) }} -{% markdown %} -### Transport mode +{% markdown %} +#### Transport mode Specific transport mode(s) can be chosen by the user to filter their journey + {% endmarkdown %} {{ @@ -114,11 +182,4 @@ Specific transport mode(s) can be chosen by the user to filter their journey ) }} -{% markdown %} - -## Anything else - -[Zeplin link](https://zpl.io/V1EwnoZ) -{% endmarkdown %} - {% endblock %}