feat: add live departures patterns (#885)

* add page & copy * style bus departures * add favourites button to buttons * Add live departures service styling * my live departures styling * style my live departures edit mode * style table train live departures * add documentation and params for bus departures * add docs and params for live deps service * add documentation + params for live deps widget * Documentation + params for live deps train * added remove button labels * Update src/wmnds/patterns/live-departures/live-departures-widget/_properties.njk.json Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com> * change filtered results Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com>
wmcadigital · Oct 18, 2021 · 0d87697 · 0d87697
1 parent 222be90
commit 0d87697
Show file tree

Hide file tree

Showing 20 changed files with 1,470 additions and 4 deletions.
diff --git a/src/wmnds/assets/sass/styles/_utilities.scss b/src/wmnds/assets/sass/styles/_utilities.scss
@@ -157,13 +157,13 @@ html body [class*="wmnds-"] {
   // Show/hide on desktop devices only
   &.wmnds-hide-mobile {
     @media screen and (max-width: $breakpoint-md) {
-      display: none;
+      display: none !important;
     }
   }
 
   &.wmnds-hide-desktop {
     @media screen and (min-width: $breakpoint-md) {
-      display: none;
+      display: none !important;
     }
   }
 

diff --git a/src/wmnds/components/button/_button.scss b/src/wmnds/components/button/_button.scss
@@ -270,6 +270,28 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
     }
   }
 
+  &--favourite {
+    padding: 0;
+    border-radius: 0;
+    color: get-color(text);
+    background: none;
+    font-weight: normal;
+    cursor: pointer;
+
+    .wmnds-btn__icon {
+      margin-right: $size-xsm;
+      fill: get-color(information);
+    }
+
+    &:active,
+    &:target,
+    &:hover,
+    &:focus,
+    &.wmnds-is--active {
+      background: none;
+    }
+  }
+
   // block modifier for full width buttons
   &--block {
     display: block;

diff --git a/src/wmnds/components/button/_example.njk b/src/wmnds/components/button/_example.njk
@@ -3,7 +3,7 @@
 
 {{
    wmndsButton({
-      type: "secondary"
+      type: "secondary",
       contentText: "Button text",
       contentHTML: null,
       isActive: false,

diff --git a/src/wmnds/components/button/_properties.njk.json b/src/wmnds/components/button/_properties.njk.json
@@ -3,7 +3,7 @@
     {
       "name": "type",
       "type": "string",
-      "description": "Type of the button. As default it is <code class='wmnds-website-inline-code'>null</code>. Available types: <code class='wmnds-website-inline-code'>link</code>, <code class='wmnds-website-inline-code'>primary</code>, <code class='wmnds-website-inline-code'>secondary</code>, <code class='wmnds-website-inline-code'>destructive</code>, <code class='wmnds-website-inline-code'>start</code>, <code class='wmnds-website-inline-code'>mode</code> "
+      "description": "Type of the button. As default it is <code class='wmnds-website-inline-code'>null</code>. Available types: <code class='wmnds-website-inline-code'>link</code>, <code class='wmnds-website-inline-code'>primary</code>, <code class='wmnds-website-inline-code'>secondary</code>, <code class='wmnds-website-inline-code'>destructive</code>, <code class='wmnds-website-inline-code'>start</code>, <code class='wmnds-website-inline-code'>mode</code>, <code class='wmnds-website-inline-code'>favourite</code> "
     },
     {
       "name": "contentText",

diff --git a/src/wmnds/patterns/_patterns.scss b/src/wmnds/patterns/_patterns.scss
@@ -11,6 +11,7 @@
 @import "footer/footer"; // Footer styles
 @import "header/header"; // Header styles
 @import "header-v2/header-v2"; // Header styles
+@import "live-departures/live-departures"; // Live departures styles
 @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

diff --git a/src/wmnds/patterns/live-departures/live-departures-bus/_example.njk b/src/wmnds/patterns/live-departures/live-departures-bus/_example.njk
@@ -0,0 +1,40 @@
+{% raw %}
+{% from "wmnds/patterns/live-departures/live-departures-bus/_live-departures-bus.njk" import wmndsLiveDeparturesBus %}
+
+{{
+   wmndsLiveDeparturesBus({
+      services: [
+         {
+         name: "16",
+         destination: "Wolverhampton",
+         operator: "National Express West Midlands",
+         times: [3, 7, 28]
+         },
+         {
+         name: "17",
+         destination: "Dudley",
+         operator: "National Express West Midlands",
+         times: [4, 14, 24]
+         },
+         {
+         name: "17A",
+         destination: "Wall Heath",
+         operator: "Diamond",
+         times: [8, 19, 27]
+         },
+         {
+         name: "57",
+         destination: "Wall Heath",
+         operator: "National Express West Midlands",
+         times: [6, 16, 26]
+         },
+         {
+         name: "125",
+         destination: "Bridgnorth",
+         operator: "Diamond",
+         times: [9, 14, 24]
+         }
+      ]
+   })
+}}
+{% endraw %}
diff --git a/src/wmnds/patterns/live-departures/live-departures-bus/_live-departures-bus.njk b/src/wmnds/patterns/live-departures/live-departures-bus/_live-departures-bus.njk
@@ -0,0 +1,50 @@
+{% macro wmndsLiveDeparturesBus(params) %}
+
+{% set services = params.services if params.services else [
+    {
+        name: "16",
+        destination: "Wolverhampton",
+        operator: "National Express West Midlands",
+        times: [3, 7, 28]
+    },
+    {
+        name: "16",
+        destination: "Wolverhampton",
+        operator: "National Express West Midlands",
+        times: [3, 7, 28]
+    },
+    {
+        name: "16",
+        destination: "Wolverhampton",
+        operator: "National Express West Midlands",
+        times: [3, 7, 28]
+    }
+] %}
+
+<div style="max-width: 640px;">
+    <div class="wmnds-live-departures wmnds-live-departures--bus">
+        {% for service in services %}
+        <div class="wmnds-live-departures__service wmnds-grid wmnds-grid--spacing-sm-2-md wmnds-grid--justify-between">
+            <div class="wmnds-col-1 wmnds-col-sm-1-2">
+                <div class="wmnds-live-departures__service-details">
+                    <div class="wmnds-live-departures__service-name">{{ service.name }}</div>
+                    <div class="wmnds-live-departures__service-description">
+                        <strong>{{ service.destination }}</strong>
+                        <span class="wmnds-live-departures__service-operator">{{ service.operator }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="wmnds-col-1 wmnds-col-sm-1-2">
+                <div class="wmnds-live-departures__times">
+                    {% for time in service.times %}
+                    <div class="wmnds-live-departures__time">{{ time }} mins</div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+
+{% endmacro %}
diff --git a/src/wmnds/patterns/live-departures/live-departures-bus/_properties.njk.json b/src/wmnds/patterns/live-departures/live-departures-bus/_properties.njk.json
@@ -0,0 +1,31 @@
+{
+  "wmndsLiveDeparturesBusProps": [
+    {
+      "name": "service",
+      "type": "array",
+      "description": "Array of objects containing the bus service information",
+      "arrayOptions": [
+        {
+          "name": "name",
+          "type": "string",
+          "description": "The name of the bus service e.g. 16"
+        },
+        {
+          "name": "destination",
+          "type": "string",
+          "description": "The bus service destination name"
+        },
+        {
+          "name": "operator",
+          "type": "string",
+          "description": "The bus service operator name"
+        },
+        {
+          "name": "times",
+          "type": "array",
+          "description": "Array of departure times to show"
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/wmnds/patterns/live-departures/live-departures-service/_example.njk b/src/wmnds/patterns/live-departures/live-departures-service/_example.njk
@@ -0,0 +1,12 @@
+{% raw %}
+{% from "wmnds/patterns/live-departures/live-departures-service/_live-departures-service.njk" import wmndsLiveDeparturesService %}
+{{
+   wmndsLiveDeparturesService({
+      name: "MM1",
+      operator: null,
+      destination: "Birmingham - Wolverhampton",
+      lastUpdated: "9:30am",
+      times: [4, 14, 24, 34, 44]
+   })
+}}
+{% endraw %}
diff --git a/src/wmnds/patterns/live-departures/live-departures-service/_live-departures-service.njk b/src/wmnds/patterns/live-departures/live-departures-service/_live-departures-service.njk
@@ -0,0 +1,50 @@
+{% macro wmndsLiveDeparturesService(params) %}
+
+{% set name = params.name if params.name else "16" %}
+{% set destination = params.destination if params.destination else "Stourbridge - Wolverhampton via Kingswinford" %}
+{% set operator = params.operator if params.operator else null %}
+{% set times = params.times if params.times else [4, 14, 24, 34, 44] %}
+{% set lastUpdated = params.lastUpdated if params.lastUpdated else "9:30am" %}
+{% set isTram = true if name | lower == "mm1" else false %}
+
+{# import components #}
+{% from "wmnds/components/button/_button.njk" import wmndsButton %}
+
+<div style="max-width: 640px;">
+    <div class="wmnds-live-departures wmnds-live-departures--service">
+        <div class="wmnds-live-departures__service-details wmnds-m-b-md">
+            <div class="wmnds-live-departures__service-name">{{ name }}</div>
+            <div class="wmnds-live-departures__service-description">
+                <div class="wmnds-h3 wmnds-m-none">{{ destination }}</div>
+            </div>
+        </div>
+        {% if operator %}
+        <p><a href="#">{{ operator }}</a> runs this service</p>
+        {% endif %}
+        {{
+            wmndsButton({
+                type: "favourite",
+                contentText: "Add to homepage",
+                iconLeft: "general-star-empty"
+            })
+        }}
+        <hr>
+        <div class="wmnds-grid wmnds-grid--justify-between wmnds-grid--spacing-md-2-md">
+            <div class="wmnds-col-1 wmnds-col-md-auto">
+                <div class="wmnds-h3 wmnds-m-t-none wmnds-m-b-md">Real time departures</div>
+                <p class="wmnds-m-b-md">See when the next {% if isTram %}tram{% else %}{{ name + ' bus' }}{% endif %} leaves this stop</p>
+            </div>
+            <div class="wmnds-col-1 wmnds-col-md-auto">
+                <p class="wmnds-live-departures__last-updated">Last updated {{ lastUpdated }}</p>
+            </div>
+        </div>
+        <div class="wmnds-live-departures__times">
+            {% for time in times %}
+            <div class="wmnds-live-departures__time">{{ time }} mins</div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+
+
+{% endmacro %}
diff --git a/src/wmnds/patterns/live-departures/live-departures-service/_properties.njk.json b/src/wmnds/patterns/live-departures/live-departures-service/_properties.njk.json
@@ -0,0 +1,29 @@
+{
+  "wmndsLiveDeparturesServiceProps": [
+    {
+      "name": "name",
+      "type": "string",
+      "description": "The name of the service e.g. 16"
+    },
+    {
+      "name": "destination",
+      "type": "string",
+      "description": "The bus service destination name"
+    },
+    {
+      "name": "lastUpdated",
+      "type": "string",
+      "description": "The time of last departure update e.g. 9:30am"
+    },
+    {
+      "name": "operator",
+      "type": "string",
+      "description": "The service operator name"
+    },
+    {
+      "name": "times",
+      "type": "array",
+      "description": "Array of departure times to show"
+    }
+  ]
+}
diff --git a/src/wmnds/patterns/live-departures/live-departures-train/_example.njk b/src/wmnds/patterns/live-departures/live-departures-train/_example.njk
@@ -0,0 +1,75 @@
+{% raw %}
+{% from "wmnds/patterns/live-departures/live-departures-train/_live-departures-train.njk" import wmndsLiveDeparturesTrain %}
+{{
+   wmndsLiveDeparturesTrain({
+      showFiltered: false,
+      lastUpdated: "09:30am",
+      departures: [
+         {
+            train: "Kidderminster",
+            operator: "West Midlands Railway",
+            status: null,
+            time: "08:21",
+            platform: 2
+         },
+         {
+            train: "London Marylebone",
+            operator: "Chiltern Railways",
+            platform: 1,
+            time: "08:25"
+         },
+         {
+            train: "Stratford-upon-Avon",
+            operator: "West Midlands Railway",
+            platform: 1,
+            time: "08:31"
+         },
+         {
+            train: "Worcester Forgate Street",
+            operator: "West Midlands Railway",
+            status: "Cancelled"
+         },
+         {
+            train: "Dorridge",
+            operator: "West Midlands Railway",
+            platform: 1,
+            time: "08:40"
+         }
+      ],
+      arrivals: [
+         {
+            train: "Kidderminster",
+            operator: "West Midlands Railway",
+            status: null,
+            time: "08:21",
+            platform: 2
+         },
+         {
+            train: "London Marylebone",
+            operator: "Chiltern Railways",
+            platform: 1,
+            time: "08:25"
+         },
+         {
+            train: "Stratford-upon-Avon",
+            operator: "West Midlands Railway",
+            platform: 1,
+            time: "08:31"
+         },
+         {
+            train: "Worcester Forgate Street",
+            operator: "West Midlands Railway",
+            platform: 2,
+            time: "08:36",
+            status: "6 mins late"
+         },
+         {
+            train: "Dorridge",
+            operator: "West Midlands Railway",
+            platform: 1,
+            time: "08:40"
+         }
+      ]
+   })
+}}
+{% endraw %}