feat: add facilities pattern (#886)

* 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 facilities content & styling Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com> Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
wmcadigital · Oct 18, 2021 · c2f5de2 · c2f5de2
1 parent 0448115
commit c2f5de2
Show file tree

Hide file tree

Showing 9 changed files with 304 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+# [2.1.0](https://github.com/wmcadigital/wmn-design-system/compare/v2.0.1...v2.1.0) (2021-08-26)
+
+
+### Features
+
+* add autocomplete selected state ([#875](https://github.com/wmcadigital/wmn-design-system/issues/875)) ([0e892ff](https://github.com/wmcadigital/wmn-design-system/commit/0e892ffca27d8c06c99cd286d68051dc8c85cc44))
+* Add timetable patterns ([#877](https://github.com/wmcadigital/wmn-design-system/issues/877)) ([cbee3f8](https://github.com/wmcadigital/wmn-design-system/commit/cbee3f814a65b2fccec44bbef994cc0730c0bd15))
+* added facilities icons ([#878](https://github.com/wmcadigital/wmn-design-system/issues/878)) ([de557c0](https://github.com/wmcadigital/wmn-design-system/commit/de557c0abcdf8ff595774cb34073c1220eba6745))
+* Adding shareable travel updates widget's documentation. ([#873](https://github.com/wmcadigital/wmn-design-system/issues/873)) ([7110a99](https://github.com/wmcadigital/wmn-design-system/commit/7110a99f4b224eb5b1c2164da25b91ac372f1c2e))
+
 ## [2.0.1](https://github.com/wmcadigital/wmn-design-system/compare/v2.0.0...v2.0.1) (2021-08-04)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wmn-design-system",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A library of typography, visual styles and user interface components which are documented for Transport for West Midlands.",
   "homepage": "https://designsystem.wmnetwork.co.uk",
   "author": "WMCA",

diff --git a/src/wmnds/patterns/_patterns.scss b/src/wmnds/patterns/_patterns.scss
@@ -7,6 +7,7 @@
 @import "cookies/cookies"; // Cookies styles
 @import "contact-details/contact-details"; // contact-details styles
 @import "feedback-loop/feedback-loop"; // Feedback loop
+@import "facilities/facilities"; // Facilities styles
 @import "footer/footer"; // Footer styles
 @import "header/header"; // Header styles
 @import "header-v2/header-v2"; // Header styles

diff --git a/src/wmnds/patterns/facilities/_example.njk b/src/wmnds/patterns/facilities/_example.njk
@@ -0,0 +1,9 @@
+{% raw %}
+{% from "wmnds/patterns/facilities/_facilities.njk" import wmndsFacilities %}
+
+{{
+   wmndsFacilities({
+      parkingExample: false
+    })
+}}
+{% endraw %}
diff --git a/src/wmnds/patterns/facilities/_facilities.njk b/src/wmnds/patterns/facilities/_facilities.njk
@@ -0,0 +1,167 @@
+{% macro wmndsFacilities(params) %}
+
+{# Imports of components #}
+{% from "wmnds/components/inset-text/_inset-text.njk" import wmndsInsetText %}
+{% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
+
+{# Set params #}
+{% set parkingExample = true if params.parkingExample %}
+
+{% if parkingExample %}
+<div class="wmnds-facilities wmnds-bg-white wmnds-p-lg">
+    <h3 class="wmnds-facilities__title">Park and ride</h3>
+    <p class="wmnds-p-t-xsm">Owned by <a href="#">West Midlands Combined Authority</a></p>
+    <ul class="wmnds-facilities__list">
+        <li class="wmnds-facilities__list-item">
+            {{
+                wmndsIcon({
+                    icon: 'facilities-taxi-rank',
+                    class: 'wmnds-facilities__icon'
+                })
+            }}
+            Spaces: 310
+        </li>
+        <li class="wmnds-facilities__list-item">
+            {{
+                wmndsIcon({
+                    icon: 'facilities-blue-badge-parking',
+                    class: 'wmnds-facilities__icon'
+                })
+            }}
+            Blue badge spaces: 14
+        </li>
+        <li class="wmnds-facilities__list-item">
+            {{
+                wmndsIcon({
+                    icon: 'facilities-shared-occupancy-parking',
+                    class: 'wmnds-facilities__icon'
+                })
+            }}
+            Shared occupancy spaces: 10
+        </li>
+        <li class="wmnds-facilities__list-item">
+            {{
+                wmndsIcon({
+                    icon: 'facilities-electric-charging',
+                    class: 'wmnds-facilities__icon'
+                })
+            }}
+            Electric charging spaces: 4
+        </li>
+    </ul>
+    {{ 
+        wmndsInsetText({
+            contentText: "Inset text",
+            contentHTML: "Parking is available on a first come, first served basis",
+            classes: "wmnds-m-b-lg"
+        }) 
+    }}
+    <p>West Midlands Combined Authority operates a considerate parking policy to ensure all sites are accessible and used in the most appropriate way.</p>
+    <p class="wmnds-m-b-none">Find information on how <a href="#">Park and Ride</a> works.</p>
+</div>
+{% else %}
+<div class="wmnds-facilities wmnds-grid wmnds-grid--spacing-md-2-md wmnds-bg-white wmnds-p-lg">
+    <div class="wmnds-facilities__section wmnds-col-1-1 wmnds-col-md-1-2">
+        <h3 class="wmnds-facilities__title">Station facilities</h3>
+        <ul class="wmnds-facilities__list">
+            <li class="wmnds-facilities__list-item">
+                {{
+                    wmndsIcon({
+                        icon: 'facilities-seating',
+                        class: 'wmnds-facilities__icon'
+                    })
+                }}
+                Seated area
+            </li>
+            <li class="wmnds-facilities__list-item">
+                {{
+                    wmndsIcon({
+                        icon: 'facilities-toilets',
+                        class: 'wmnds-facilities__icon'
+                    })
+                }}
+                Toilets
+            </li>
+            <li class="wmnds-facilities__list-item">
+                {{
+                    wmndsIcon({
+                        icon: 'facilities-baby-changing',
+                        class: 'wmnds-facilities__icon'
+                    })
+                }}
+                Baby changing
+            </li>
+            <li class="wmnds-facilities__list-item">
+                {{
+                    wmndsIcon({
+                        icon: 'facilities-wifi',
+                        class: 'wmnds-facilities__icon'
+                    })
+                }}
+                Wifi
+            </li>
+            <li class="wmnds-facilities__list-item">
+                {{
+                    wmndsIcon({
+                        icon: 'modes-isolated-cycle',
+                        class: 'wmnds-facilities__icon'
+                    })
+                }}
+                Cycle storage
+            </li>
+            <li class="wmnds-facilities__list-item">
+                {{
+                    wmndsIcon({
+                        icon: 'modes-isolated-cycle',
+                        class: 'wmnds-facilities__icon'
+                    })
+                }}
+                Cycle stands: 28
+            </li>
+        </ul>
+    </div>
+    <div class="wmnds-facilities__section wmnds-col-1-1 wmnds-col-md-1-2">
+        <h3 class="wmnds-facilities__title">Accessibility</h3>
+        <ul class="wmnds-facilities__list">
+            <li class="wmnds-facilities__list-item">
+                {{
+                    wmndsIcon({
+                        icon: 'facilities-step-free-access',
+                        class: 'wmnds-facilities__icon'
+                    })
+                }}
+                Step-free access
+            </li>
+            <li class="wmnds-facilities__list-item">
+                {{
+                    wmndsIcon({
+                        icon: 'facilities-ramp',
+                        class: 'wmnds-facilities__icon'
+                    })
+                }}
+                Ramp for train access
+            </li>
+            <li class="wmnds-facilities__list-item">
+                {{
+                    wmndsIcon({
+                        icon: 'facilities-induction-loop',
+                        class: 'wmnds-facilities__icon'
+                    })
+                }}
+                Induction loop
+            </li>
+            <li class="wmnds-facilities__list-item">
+                {{
+                    wmndsIcon({
+                        icon: 'facilities-key-scheme',
+                        class: 'wmnds-facilities__icon'
+                    })
+                }}
+                National key toilets available
+            </li>
+        </ul>
+    </div>
+</div>
+{% endif %}
+
+{% endmacro %}
diff --git a/src/wmnds/patterns/facilities/facilities.scss b/src/wmnds/patterns/facilities/facilities.scss
@@ -0,0 +1,45 @@
+.wmnds-facilities {
+  &__title {
+    margin: 0 0 $size-md;
+  }
+
+  &__list {
+    margin: 0;
+    padding: 0;
+
+    &:not(:last-child) {
+      margin-bottom: $size-lg;
+    }
+  }
+
+  &__section {
+    @media (max-width: $breakpoint-md - 1) {
+      &:not(:last-child) {
+        margin-bottom: $size-lg;
+      }
+    }
+  }
+
+  &__list-item {
+    display: flex;
+    padding: $size-xsm 0;
+    align-items: center;
+    flex-wrap: nowrap;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: $size-md;
+    }
+  }
+
+  &__icon {
+    width: $size-lg;
+    height: $size-lg;
+    margin-right: $size-md;
+    fill: get-color(primary);
+    flex: 0 0 $size-lg;
+  }
+}
diff --git a/src/www/data.njk.json b/src/www/data.njk.json
@@ -227,6 +227,9 @@
         {
           "name": "Content cards"
         },
+        {
+          "name": "Facilities"
+        },
         {
           "name": "Feedback loop"
         },

diff --git a/src/www/pages/patterns/facilities/index.njk.md b/src/www/pages/patterns/facilities/index.njk.md
@@ -0,0 +1,67 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Facilities" %}
+
+{% set section="Patterns" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmnds/patterns/facilities/_facilities.njk" import wmndsFacilities %}
+
+{% block content %}
+
+{% markdown %}
+
+## Station facilities
+
+### What does it do?
+
+- Shows users what facilities are available at a train station
+- Shows users what accessible facilities are available at a train station
+
+### When to use it?
+
+- On a train station page
+
+### How it works?
+
+- If a facility is not available at a station, then it won't be shown in the list
+
+{% endmarkdown %}
+
+{{
+  compExample([
+      wmndsFacilities()
+    ], {
+      componentPath: "wmnds/patterns/facilities/",
+      njk: true,
+      iframe: true
+    }
+  )
+}}
+
+{% markdown %}
+
+## Station parking
+
+<h3>What does it do?</h3>
+
+- Shows users if car parking is available at a train station
+- Tells users who operates the car park
+
+<h3>When to use it?</h3>
+
+- On a train station page
+
+{% endmarkdown %}
+
+{{
+  compExample([
+      wmndsFacilities({
+        parkingExample: true
+      })
+    ], {
+      componentPath: "wmnds/patterns/facilities/",
+      njk: true
+    }
+  )
+}}
+
+{% endblock %}