feat: add Buy a ticket pattern (#778)

* add buy a ticket pattern page * add buy a ticket macro * add buy a ticket styles * add secondary colour class * add text and section styles * add correct classes and njk props * remove excess tags and classes * remove question class * fix active btn styles * add more semantic markup Co-authored-by: Catia Costa <34938764+catiarodriguescosta@users.noreply.github.com>
wmcadigital · May 14, 2021 · 175a7db · 175a7db
1 parent 0c8f5ea
commit 175a7db
Show file tree

Hide file tree

Showing 7 changed files with 196 additions and 1 deletion.
diff --git a/src/wmnds/components/form-elements/dropdown/_dropdown.njk b/src/wmnds/components/form-elements/dropdown/_dropdown.njk
@@ -11,6 +11,7 @@
 {% set classes = " " + params.classes if params.classes %}
 {% set describedBy = params.describedBy if params.describedBy %}
 {% set groupClasses =  params.groupClasses if params.groupClasses %}
+{% set secondaryColorClass =  "wmnds-fe-dropdown__select--secondary" if params.secondaryColor %}
 {# Error Message Params #}
 {% set groupErrorClass = " wmnds-fe-group--error" if params.error %}
 {% set errorContentText = params.errorMessage.contentText if params.errorMessage.contentText else "Please select an option" %}
@@ -39,7 +40,7 @@
         for: id
       })
     }}
-    <select class="wmnds-fe-dropdown__select" id="{{id}}" name="{{name}}" {%if describedBy%}aria-describedBy="{{describedBy}}"{%endif%}>
+    <select class="wmnds-fe-dropdown__select {{secondaryColorClass}}" id="{{id}}" name="{{name}}" {%if describedBy%}aria-describedBy="{{describedBy}}"{%endif%}>
       {% if items %}
         {% for option in items %}
           {% set selected = "selected=\"true\"" | safe if option.selected %}

diff --git a/src/wmnds/components/form-elements/dropdown/_dropdown.scss b/src/wmnds/components/form-elements/dropdown/_dropdown.scss
@@ -13,5 +13,9 @@
     background-size: contain;
     @include type-setting(0);
     color: get-color(text);
+
+    &--secondary {
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NiIgaGVpZ2h0PSI0NiIgdmlld0JveD0iMCAwIDQ2IDQ2Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgPHBhdGggZmlsbD0iIzlENUJBRiIgc3Ryb2tlPSIjOUQ1QkFGIiBkPSJNLjUuNWg0NXY0NUguNXoiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTQuOTU3IDE4LjkzNGgxNi45ODhjMS4xNzUgMCAxLjc2MyAxLjQxOS45MyAyLjI1bC04LjQ5IDguNDk2YTEuMzIzIDEuMzIzIDAgMCAxLTEuODY4IDBsLTguNDktOC40OTVjLS44MzItLjgzMi0uMjQ1LTIuMjUxLjkzLTIuMjUxeiIvPgogICAgPC9nPgo8L3N2Zz4K);
+    }
   }
 }
diff --git a/src/wmnds/patterns/_patterns.scss b/src/wmnds/patterns/_patterns.scss
@@ -2,6 +2,7 @@
 
 @import "autocomplete/autocomplete"; // Autocomplete
 @import "banner/banner"; // Header styles
+@import "buy-a-ticket/buy-a-ticket"; // Buy a ticket styles
 @import "cookies/cookies"; // Cookies styles
 @import "contact-details/contact-details"; // contact-details styles
 @import "feedback-loop/feedback-loop"; // Feedback loop

diff --git a/src/wmnds/patterns/buy-a-ticket/_buy-a-ticket.njk b/src/wmnds/patterns/buy-a-ticket/_buy-a-ticket.njk
@@ -0,0 +1,124 @@
+{% macro wmndsBuyATicket() %}
+{# Imports #}
+{% from "wmnds/components/button/_button.njk" import wmndsButton %}
+{% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
+{% from "wmnds/components/form-elements/dropdown/_dropdown.njk" import wmndsDropdown %}
+
+<form class="wmnds-buy-a-ticket">
+    <h2 class="wmnds-buy-a-ticket__title">Buy a ticket</h2>
+    {# Mode select #}
+    <div class="wmnds-m-b-md wmnds-p-b-xsm">
+        <fieldset class="wmnds-buy-a-ticket__mode-checkboxes">
+            <legend class="wmnds-buy-a-ticket__label">Which modes of transport will you use?</legend>
+            <div class="wmnds-grid wmnds-grid--spacing-3-sm wmnds-grid--spacing-sm-3-md">
+                <label class="wmnds-col-1-3">
+                    <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useBus">
+                    <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
+                        {{
+                            wmndsIcon({
+                                icon: 'modes-isolated-bus',
+                                class: 'wmnds-btn__icon '
+                            })
+                        }}
+                        Bus
+                    </div>
+                </label>
+                <label class="wmnds-col-1-3">
+                    <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTrain">
+                    <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
+                        {{
+                            wmndsIcon({
+                                icon: 'modes-isolated-rail',
+                                class: 'wmnds-btn__icon '
+                            })
+                        }}
+                        Train
+                    </div>
+                </label>
+                <label class="wmnds-col-1-3">
+                    <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTram">
+                    <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
+                        {{
+                            wmndsIcon({
+                                icon: 'modes-isolated-metro',
+                                class: 'wmnds-btn__icon '
+                            })
+                        }}
+                        Tram
+                    </div>
+                </label>
+            </div>
+        </fieldset>
+    </div>
+    {# Traveller dropdown #}
+    {{
+        wmndsDropdown({
+            id: 'buyATicketPassengerType',
+            name: 'PassengerType',
+            groupClasses: 'wmnds-m-b-md wmnds-p-b-xsm',
+            label: "Who will be travelling?",
+            labelClasses: 'wmnds-buy-a-ticket__label',
+            secondaryColor: true,
+            items: [
+                {
+                    contentText: 'Select traveller',
+                    selected: true,
+                    disabled: true
+                },
+                {
+                    contentText: 'Option 1',
+                    value: 'option1'
+                },
+                {
+                    contentText: 'Option 2',
+                    value: 'option2'
+                },
+                {
+                    contentText: 'Option 3',
+                    value: 'option3'
+                }
+            ]
+        })
+    }}
+    {# Duration dropdown #}
+    {{
+        wmndsDropdown({
+            id: "buyATicketDuration",
+            name: "Duration",
+            groupClasses: 'wmnds-m-b-md wmnds-p-b-xsm',
+            label: "How long will the ticket last for?",
+            labelClasses: 'wmnds-buy-a-ticket__label',
+            secondaryColor: true,
+            items: [
+                {
+                    contentText: 'Select ticket length',
+                    selected: true,
+                    disabled: true
+                },
+                {
+                    contentText: 'Option 1',
+                    value: 'option1'
+                },
+                {
+                    contentText: 'Option 2',
+                    value: 'option2'
+                },
+                {
+                    contentText: 'Option 3',
+                    value: 'option3'
+                }
+            ]
+        })
+    }}
+    {# Submit button #}
+    {{
+        wmndsButton({
+            iconRight: "general-chevron-right",
+            contentText: "Find tickets",
+            role: "submit"
+        })
+    }}
+</form>
+
+
+{% endmacro %}
diff --git a/src/wmnds/patterns/buy-a-ticket/_buy-a-ticket.scss b/src/wmnds/patterns/buy-a-ticket/_buy-a-ticket.scss
@@ -0,0 +1,31 @@
+.wmnds-buy-a-ticket {
+  padding: $size-md;
+  background: get-color(primary);
+
+  &__title,
+  &__label {
+    color: $white;
+  }
+
+  &__label {
+    display: block;
+    margin-bottom: $size-sm;
+    font-weight: 600;
+  }
+
+  &__mode-checkboxes {
+    padding: 0;
+    border: 0;
+  }
+
+  &__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);
+    }
+  }
+}
diff --git a/src/www/data.njk.json b/src/www/data.njk.json
@@ -212,6 +212,9 @@
         {
           "name": "Banner"
         },
+        {
+          "name": "Buy a ticket"
+        },
         {
           "name": "Cookies"
         },

diff --git a/src/www/pages/patterns/buy-a-ticket/index.njk.md b/src/www/pages/patterns/buy-a-ticket/index.njk.md
@@ -0,0 +1,31 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Buy a ticket" %}
+{% set section="Patterns" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmnds/patterns/buy-a-ticket/_buy-a-ticket.njk" import wmndsBuyATicket %}
+
+{% block content %}
+
+{% markdown %}
+
+## What does it do?
+
+- Helps users to enter the ticket purchase journey straight from the homepage
+
+## When to use it?
+
+- On the homepage
+
+## How it works?
+
+- This pattern directs users to the ticket finder service, where they can continue with purchasing a relevant ticket based on the ticket options they have selected
+
+{% endmarkdown %}
+
+{{
+    compExample([
+        wmndsBuyATicket()
+    ])
+}}
+
+{% endblock %}