feat: find timetable pattern (#771)

* Adding find a timetable pattern page and pattern files themselves.

* Update find a table widget.

* Add params to label inside autocomplete.

* Rename page and widget. Update widget page structure.

* import scss into patterns scss.

* Fix eslint error.

* Update page title

Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com>

* Update src/wmnds/patterns/find-a-timetable-widget/_find-a-timetable-widget.njk

Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com>

* remove vscode custom settings

* Update buttons order and remove design link.

* Update tram link.

* Update tram link.

* Update to wmnetwork domain.

* Update checkbox.

* Adding js file.

* Form submission is now working properly. JS is updated and html are updated.

* Change tram link.

* Update tram link.

Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com>

src/wmnds/patterns/_patterns.scss

@@ -15,3 +15,4 @@
 @import "search/search"; // Search pattern styles
 @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

src/wmnds/patterns/find-a-timetable-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://www.wmnetwork.co.uk/plan-your-journey/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-a-timetable-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-a-timetable-widget/_find-a-timetable-widget.njk

@@ -0,0 +1,108 @@
+{% macro wmndsFindATimetableWidget(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 %}
+
+{# Set params #}
+{% set formTitle = params.formTitle if params.formTitle else "Find a timetable" %}
+{% set contentText = params.contentText if params.contentText else "Select your transport mode" %}
+{% 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-a-timetable-widget {{isOpen}}">
+
+        {% call wmndsContentCard() %}
+            <div class="wmnds-p-md">
+
+                <h2>{{formTitle}}</h2>
+                <div class="wmnds-find-a-timetable__content">
+                    {{_content}}
+                </div>
+
+                <form class="wmnds-find-a-timetable-widget__form">
+
+                    <div class="wmnds-find-a-timetable-widget__travel-modes wmnds-grid wmnds-grid--spacing-3-sm wmnds-m-t-sm">
+
+                        <label class="wmnds-col-1-3">
+                            <input type="checkbox" class="wmnds-find-a-timetable-widget__mode-checkbox wmnds-screenreaders-only" name="mode" value="Bus" {{ isChecked }}>
+                            <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
+                                {{
+                                    wmndsIcon({
+                                        icon: 'modes-isolated-bus',
+                                        class: 'wmnds-btn__icon '
+                                    })
+                                }}
+                                Bus
+                            </div>
+                        </label>
+
+                        <div class="wmnds-col-1-3">
+
+                            {{
+                                wmndsLinkAsButton({
+                                    type: "mode",
+                                    contentText: "Train",
+                                    link: "https://www.wmnetwork.co.uk/plan-your-journey/timetables/#/?mode=Train",
+                                    linkTarget: "_blank",
+                                    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: "https://www.wmnetwork.co.uk/plan-your-journey/timetables/#/?mode=Tram&serviceNo=MM1&limit=6#%2F",
+                                    linkTarget: "_blank",
+                                    classes:"wmnds-col-1 wmnds-m-b-sm",
+                                    iconLeft: "modes-isolated-metro"
+                                })
+                            }}
+
+                        </div>
+                    </div>
+
+                    {% if params.isOpen %}
+                    <div class="wmnds-find-a-timetable-widget__services">
+                        {{
+                            wmndsTextInput({
+                                id: "busServices",
+                                name: "serviceNo",
+                                label: {
+                                    contentText: 'Bus Services',
+                                    classes: 'wmnds-screenreaders-only'
+                                },
+                                placeholder: 'Enter a service number',
+                                required: true,
+                                formGroup: {
+                                    classes: 'wmnds-m-b-md'
+                                }
+                            })
+                        }}
+                        <input type="submit" hidden="true"/>
+                    </div>
+                    {% endif %}
+
+                </form>
+            </div>
+        {% endcall %}
+
+    </div>
+</div>
+
+
+{% endmacro %}

src/wmnds/patterns/find-a-timetable-widget/_properties.njk.json

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

src/wmnds/patterns/find-a-timetable-widget/find-a-timetable-widget.scss

@@ -0,0 +1,23 @@
+.wmnds-find-a-timetable-widget {
+  &__services {
+    display: none;
+  }
+
+  &.wmnds-is--open {
+    .wmnds-find-a-timetable-widget__services {
+      display: block;
+    }
+  }
+
+  &__mode-checkbox {
+    &:focus + .wmnds-btn--mode {
+      background-color: $white;
+      box-shadow: 0 0 0 2px $white, 0 0 0 4px get-color(secondary);
+    }
+
+    &:checked + .wmnds-btn--mode {
+      background-color: get-color(secondary, 50);
+    }
+  }
+
+}

src/www/data.njk.json

@@ -227,6 +227,9 @@
         {
           "name": "Feedback loop"
         },
+        {
+          "name": "Find a timetable"
+        },
         {
           "name": "Footer"
         },

src/www/pages/patterns/find-a-timetable/index.njk.md

@@ -0,0 +1,65 @@
+{% extends "www/_layouts/layout-left-pane.njk" %} 
+{% set pageTitle = "Find a timetable" %}
+
+{% set section="Patterns" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmnds/patterns/find-a-timetable-widget/_find-a-timetable-widget.njk" import wmndsFindATimetableWidget %}
+
+{% block content %}
+
+{% markdown %}
+
+## What does it do?
+* Helps users to find a timetable for their chosen service
+
+
+## When to use it?
+* On the homepage
+
+
+## How it works?
+* This will direct users to the timetables page
+* Users can only select one travel mode
+* Users will need to enter a service number if they select bus. If train or tram are selected, then users can go straight to the timetables page through the [Call to action button](https://designsystem.wmnetwork.co.uk/components/buttons/).
+
+
+### Default
+
+{% endmarkdown %}
+
+{{
+  compExample([
+      wmndsFindATimetableWidget()
+    ], {
+      componentPath: "wmnds/patterns/find-a-timetable-widget/",
+      njk: true,
+      njkProps: wmndsFindATimetableWidgetProps,
+      js: true,
+      iframe: false
+    }
+  )
+}} 
+
+{% markdown %}
+
+### Expanded (bus)
+
+
+{% endmarkdown %}
+
+{{
+  compExample([
+      wmndsFindATimetableWidget({
+        isOpen: true
+      })
+    ], {
+      componentPath: "wmnds/patterns/find-a-timetable-widget/",
+      njk: true,
+      njkProps: wmndsFindATimetableWidgetProps,
+      js: true,
+      iframe: false
+    }
+  )
+}}
+
+{% endblock %}