feat: add stops and stations patterns (#887)

* chore(release): 2.1.0 [skip ci]

# [2.1.0](v2.0.1...v2.1.0) (2021-08-26)

### Features

* add autocomplete selected state ([#875](#875)) ([0e892ff](0e892ff))
* Add timetable patterns ([#877](#877)) ([cbee3f8](cbee3f8))
* added facilities icons ([#878](#878)) ([de557c0](de557c0))
* Adding shareable travel updates widget's documentation. ([#873](#873)) ([7110a99](7110a99))

* Add page & copy

* add find stops and stations widget

* add nearest stop sidebar widget

* add sidebar widgets

* prevent anchor link scroll

Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com>
Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>

src/wmnds/patterns/_patterns.scss

@@ -18,4 +18,6 @@
 @import "journey-planner/journey-planner"; // Journey planner styles
 @import "journey-planner-widget/journey-planner-widget"; // Journey planner widget styles
 @import "find-a-timetable-widget/find-a-timetable-widget"; // Find a timetable widget pattern styles
+@import "find-stop-station-widget/find-stop-station-sidebar/find-stop-station-sidebar"; // Find a stop or station sidebar pattern styles
+@import "nearest-stop-station/nearest-stop-station"; // Nearest stops and stations pattern styles
 @import "timetable/timetable"; // Timetable pattern styles

src/wmnds/patterns/find-stop-station-widget/_example.js

@@ -0,0 +1,24 @@
+const findATimetableJS = () => {
+  const findATimetableComponents = document.querySelectorAll('.wmnds-find-a-timetable-widget');
+  const toggleOpenClass = e => {
+    e.target.closest('.wmnds-find-a-timetable-widget').classList.toggle('wmnds-is--open');
+  };
+
+  const onSubmitForm = e => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const queryString = new URLSearchParams(data).toString();
+    window.location.href = `https://legacy.wmnetwork.co.uk/timetables/#/?${queryString}`;
+  };
+
+  findATimetableComponents.forEach(findATimetableComponent => {
+    findATimetableComponent
+      .querySelector('div.wmnds-btn.wmnds-btn--mode')
+      .addEventListener('click', toggleOpenClass);
+    findATimetableComponent
+      .querySelector('.wmnds-find-a-timetable-widget__form')
+      .addEventListener('submit', onSubmitForm);
+  });
+};
+
+export default findATimetableJS;

src/wmnds/patterns/find-stop-station-widget/_example.njk

@@ -0,0 +1,9 @@
+{% raw %}
+{% from "wmnds/patterns/find-timetable-widget/_find-timetable-widget.njk" import wmndsFindTimetableWidget %}
+
+{{
+   wmndsFindTimetableWidget({
+      isOpen: true
+    })
+}}
+{% endraw %}

src/wmnds/patterns/find-stop-station-widget/_find-stop-station-widget.njk

@@ -0,0 +1,113 @@
+{% macro wmndsFindStopStationWidget(params) %}
+
+{# Imports of components #}
+{% from "wmnds/components/content-card/_content-card.njk" import wmndsContentCard %}
+{% from "wmnds/components/form-elements/text-input/_text-input.njk" import wmndsTextInput %}
+{% from "wmnds/components/button/_button.njk" import wmndsButton %}
+{% from "wmnds/components/link/as-button/_as-button.njk" import wmndsLinkAsButton %}
+{% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
+{% from "wmnds/patterns/autocomplete/_autocomplete.njk" import wmndsAutocomplete %}
+
+{# Set params #}
+{% set id = params.id if params.id else "stationStop" %}
+{% set formTitle = params.formTitle if params.formTitle else "Find a station or stop" %}
+{% set mode = params.mode if params.mode %}
+{% set contentText = params.contentText if params.contentText else "See live departures, disruptions, timetables and nearest stops or stations." %}
+{% set contentHTML = params.contentHTML if params.contentHTML else null %}
+{% set _content = contentHTML | safe if contentHTML else contentText %} {# change content based on what user has input #}
+{% set isOpen = " wmnds-is--open" if params.isOpen %}
+{% set placeholder = "" if params.placeholder else "Enter a service number" %}
+{% set isChecked = "checked" if params.isOpen else "" %}
+
+
+<div style="max-width: 448px">
+
+    <div class="wmnds-find-stop-station-widget {{isOpen}}">
+
+        {% call wmndsContentCard() %}
+            <div class="wmnds-p-md">
+
+                <h2>{{formTitle}}</h2>
+                <div class="wmnds-find-stop-station__content">
+                    {{_content}}
+                </div>
+
+                <form class="wmnds-find-stop-station-widget__form">
+                    <p class="wmnds-m-b-md">
+                        Select your transport mode
+                    </p>
+                    <div class="wmnds-find-stop-station-widget__travel-modes wmnds-grid wmnds-grid--spacing-3-sm wmnds-m-t-sm">
+
+                        <div class="wmnds-col-1-3">
+
+                            {{
+                                wmndsButton({
+                                    type: "mode",
+                                    contentText: "Bus",
+                                    isActive: true if mode === 'bus',
+                                    classes:"wmnds-col-1 wmnds-m-b-sm",
+                                    iconLeft: "modes-isolated-bus"
+                                })
+                            }}
+
+                        </div>
+                        <div class="wmnds-col-1-3">
+
+                            {{
+                                wmndsButton({
+                                    type: "mode",
+                                    contentText: "Train",
+                                    isActive: true if mode === 'train',
+                                    classes:"wmnds-col-1 wmnds-m-b-sm",
+                                    iconLeft: "modes-isolated-rail"
+                                })
+                            }}
+
+                        </div>
+                        <div class="wmnds-col-1-3">
+
+                            {{
+                                wmndsLinkAsButton({
+                                    type: "mode",
+                                    contentText: "Tram",
+                                    link: "#/",
+                                    classes:"wmnds-col-1 wmnds-m-b-sm",
+                                    iconLeft: "modes-isolated-metro"
+                                })
+                            }}
+
+                        </div>
+                    </div>
+
+                    {% if params.isOpen %}
+                    <div class="wmnds-find-stop-station-widget__services">
+                        {{
+                            wmndsAutocomplete({
+                                id: 'autocomplete'+id,
+                                selected: false,
+                                label: {
+                                    contentText: 'Enter a postcode, road name or place of interest'
+                                },
+                                placeholder: 'Search'
+                            })
+                        }}
+                        {{
+                            wmndsButton({
+                                classes: "wmnds-col-1 wmnds-col-sm-1-2 wmnds-m-t-md wmnds-btn--align-left",
+                                role: "submit",
+                                contentText: "Search",
+                                iconRight: "general-chevron-right"
+                            })
+                        }}
+                    </div>
+                    {% endif %}
+
+                </form>
+            </div>
+        {% endcall %}
+
+    </div>
+</div>
+
+
+{% endmacro %}

src/wmnds/patterns/find-stop-station-widget/_properties.njk.json

@@ -0,0 +1,9 @@
+{
+  "wmndsFindStopStationProps": [
+    {
+      "name": "isOpen",
+      "type": "boolean",
+      "description": "If true, widget will be expanded upon initial load. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+    }
+  ]
+}

src/wmnds/patterns/find-stop-station-widget/find-stop-station-sidebar/_example.njk

@@ -0,0 +1,11 @@
+{% raw %}
+{% from "wmnds/patterns/find-stop-station-widget/find-stop-station-sidebar/_find-stop-station-sidebar.njk" import wmndsFindStopStationSidebar %}
+
+{{
+   wmndsFindStopStationSidebar({
+      id: "sidebarBus",
+      formTitle: "Find a bus stop",
+      mode: "bus"
+   })
+}}
+{% endraw %}

src/wmnds/patterns/find-stop-station-widget/find-stop-station-sidebar/_find-stop-station-sidebar.njk

@@ -0,0 +1,45 @@
+{% macro wmndsFindStopStationSidebar(params) %}
+
+{# Imports of components #}
+{% from "wmnds/components/content-card/_content-card.njk" import wmndsContentCard %}
+{% from "wmnds/components/button/_button.njk" import wmndsButton %}
+{% from "wmnds/patterns/autocomplete/_autocomplete.njk" import wmndsAutocomplete %}
+
+{# Set params #}
+{% set id = params.id if params.id else "stopStation" %}
+{% set formTitle = params.formTitle if params.formTitle else "Find a stop or station" %}
+{% set _classes = "wmnds-find-stop-station-sidebar--" + params.mode if params.mode %}
+
+<div style="max-width: 448px">
+
+    <div class="wmnds-find-stop-station-sidebar {{_classes}}">
+
+        {% call wmndsContentCard() %}
+            <div class="wmnds-p-md">
+                <h2>{{formTitle}}</h2>
+                <div class="wmnds-m-b-md">
+                    {{
+                        wmndsAutocomplete({
+                            id: "autocomplete" + id,
+                            label: {
+                                contentText: "Enter a postcode, road name or place of interest"
+                            },
+                            placeholder: "Search"
+                        })
+                    }}
+                </div>
+                {{
+                    wmndsButton({
+                        contentText: "Search",
+                        iconRight: "general-chevron-right",
+                        classes: "wmnds-col-1 wmnds-btn--align-left"
+                    })
+                }}
+            </div>
+        {% endcall %}
+
+    </div>
+</div>
+
+
+{% endmacro %}

src/wmnds/patterns/find-stop-station-widget/find-stop-station-sidebar/_properties.njk.json

@@ -0,0 +1,19 @@
+{
+  "wmndsFindStopStationSidebarProps": [
+    {
+      "name": "id",
+      "type": "string",
+      "description": "<strong>Required.</strong> id for the card components"
+    },
+    {
+      "name": "formTitle",
+      "type": "string",
+      "description": "Content card title text"
+    },
+    {
+      "name": "mode",
+      "type": "string",
+      "description": "Sets the color code for the content card border. Accepted values are 'bus', 'rail' and 'metro'. If not set the default stop or station widget will display."
+    }
+  ]
+}

src/wmnds/patterns/find-stop-station-widget/find-stop-station-sidebar/find-stop-station-sidebar.scss

@@ -0,0 +1,19 @@
+&.wmnds-find-stop-station-sidebar {
+  &--bus {
+    .wmnds-content-card {
+      border-bottom-color: get-color(bus);
+    }
+  }
+
+  &--rail {
+    .wmnds-content-card {
+      border-bottom-color: get-color(railway);
+    }
+  }
+
+  &--metro {
+    .wmnds-content-card {
+      border-bottom-color: get-color(metro);
+    }
+  }
+}

src/wmnds/patterns/nearest-stop-station/_example.njk

@@ -0,0 +1,25 @@
+{% raw %}
+{% from "wmnds/patterns/nearest-stop-station/_nearest-stop-station.njk" import wmndsNearestStopStation %}
+
+{{
+   wmndsNearestStopStation({
+      stops: [
+         {
+         mode: "rail",
+         name: "Stourbridge Town",
+         distance: "1 minute walk"
+         },
+         {
+         mode: "bus",
+         name: "Stourbridge, Town Centre",
+         distance: "1 minute walk"
+         },
+         {
+         mode: "metro",
+         name: "Stourbridge, Foster St East (adjacent)",
+         distance: "1 minute walk"
+         }
+      ]
+   })
+}}
+{% endraw %}

src/wmnds/patterns/nearest-stop-station/_nearest-stop-station.njk

@@ -0,0 +1,59 @@
+{% macro wmndsNearestStopStation(params) %}
+
+{# Imports of components #}
+{% from "wmnds/components/content-card/_content-card.njk" import wmndsContentCard %}
+{% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
+
+{# Set params #}
+{% set formTitle = params.formTitle if params.formTitle else "Nearest stops or stations" %}
+{% set mode = params.mode if params.mode %}
+{% set stops = params.stops if params.stops else [
+    {
+        mode: "rail",
+        name: "Stourbridge Town",
+        distance: "1 minute walk"
+    },
+    {
+        mode: "bus",
+        name: "Stourbridge, Town Centre",
+        distance: "1 minute walk"
+    },
+    {
+        mode: "metro",
+        name: "Stourbridge, Foster St East (adjacent)",
+        distance: "1 minute walk"
+    }
+] %}
+
+
+<div style="max-width: 448px">
+
+    <div class="wmnds-nearest-stop-station">
+
+        {% call wmndsContentCard() %}
+            <div class="wmnds-p-md">
+                <h2>{{formTitle}}</h2>
+                {% for stop in stops %}
+                <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-nearest-stop-station__stop">
+                    <div class="wmnds-col-auto">
+                        {{
+                            wmndsIcon({
+                                icon: "modes-isolated-" + stop.mode,
+                                class: "wmnds-nearest-stop-station__icon wmnds-nearest-stop-station__icon--" + stop.mode
+                            })
+                        }}
+                    </div>
+                    <div class="wmnds-col-auto">
+                        <div><a href="#/">{{stop.name}}</a></div>
+                        <span>{{stop.distance}}</span>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        {% endcall %}
+
+    </div>
+</div>
+
+
+{% endmacro %}

src/wmnds/patterns/nearest-stop-station/_properties.njk.json

@@ -0,0 +1,26 @@
+{
+  "wmndsNearestStopStationProps": [
+    {
+      "name": "stops",
+      "type": "array",
+      "description": "Array of three objects containing nearest stop information",
+      "arrayOptions": [
+        {
+          "name": "mode",
+          "type": "string",
+          "description": "Accepted modes are 'bus', 'rail', 'metro'"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "description": "Name of the stop or station"
+        },
+        {
+          "name": "distance",
+          "type": "string",
+          "description": "The distance of the stop or station from the current stop"
+        }
+      ]
+    }
+  ]
+}