Patterns

Journey planner

Homepage

What does it do?

Helps users to plan a journey straight from the homepage and directs users to the full journey planner service

When to use it?

On the homepage

How it works?

The widget is collapsed by default. The widget expands to show the full journey information when the user selects the 'Add details' button. The additional travel details can be hidden when a user clicks on the 'Hide details' button
The 'From' and 'To' fields use the autocomplete feature for train stations and postcodes. Users can also use their current location to automatically choose their departure or arrival location
The ‘From’ and ’To’ fields can be switched at any time through the Switch link button
Users can choose a specific transport mode as well as change their departure or arrival time
The ‘Plan my journey’ Call to action button will send users to the full journey planner service with information on their selected journey

Default

Plan your journey

HTML markup

<div style="max-width: 448px">
  <div class="wmnds-journey-planner ">
    <div class="wmnds-p-md">
      <h2>Plan your journey</h2>
      <form class="wmnds-journey-planner__form" name="jphome" action="//journeyplanner.tfwm.org.uk/Home/HandleWidgetQuery" method="GET">
        <div class="wmnds-journey-planner__from">
          <label class="wmnds-fe-label wmnds-h5 wmnds-m-t-xsm" for="mainjp-from--collapsed">From</label>
          <div class="wmnds-autocomplete wmnds-grid">
            <!-- Search icon -->
            <svg class="wmnds-autocomplete__icon">
              <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
            </svg>
            <!-- normal sized loader -->
            <div class="wmnds-loader" role="alert" aria-live="assertive">
              <p class="wmnds-loader__content">Content is loading...</p>
            </div>
            <!-- Autocomplete input box -->
            <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Origin" aria-label="Enter station or postcode" type="text" id="mainjp-from--collapsed" required="true" autocomplete="off">
          </div>
        </div>
        <div class="wmnds-journey-planner__to">
          <div class="wmnds-journey-planner__switch">
            <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
              Switch
            </button>
            <svg class="wmnds-journey-planner__switch-icon">
              <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
            </svg>
          </div>
          <label class="wmnds-fe-label wmnds-h5" for="mainjp-to--collapsed">To</label>
          <div class="wmnds-autocomplete wmnds-grid">
            <!-- Search icon -->
            <svg class="wmnds-autocomplete__icon">
              <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
            </svg>
            <!-- normal sized loader -->
            <div class="wmnds-loader" role="alert" aria-live="assertive">
              <p class="wmnds-loader__content">Content is loading...</p>
            </div>
            <!-- Autocomplete input box -->
            <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Destination" aria-label="Enter station or postcode" type="text" id="mainjp-to--collapsed" required="true" autocomplete="off">
          </div>
        </div>
        <div class="wmnds-journey-planner__how">
          <h5>Which modes of transport will you use?</h5>
          <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">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                </svg>
                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">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                </svg>
                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">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                </svg>
                Tram
              </div>
            </label>
          </div>
        </div>
        <div class="wmnds-journey-planner__when">
          <h5>Leaving</h5>
          <input type="hidden" name="journeyTimeType" value="leave" />
          <div class="wmnds-grid wmnds-grid--spacing-2-lg">
            <div class="wmnds-col-2-3">
              <div class="wmnds-fe-group  ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="mainjp-day--collapsed">Day</label>
                  <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="mainjp-day--collapsed" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
            </div>
            <div class="wmnds-col-1-3">
              <div class="wmnds-fe-group  ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="mainjp-time--collapsed">Time</label>
                  <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="mainjp-time--collapsed" name="SelectedJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="wmnds-journey-planner__submit wmnds-m-t-lg">
          <div class="wmnds-grid wmnds-grid--spacing-sm-2-lg">
            <div class="wmnds-col-1 wmnds-col-sm-1-2">
              <button class="wmnds-btn wmnds-btn--block wmnds-btn--align-left wmnds-m-b-md wmnds-btn--dark-bg" type="button">
                Add details
                <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                  <use xlink:href="#wmnds-general-expand" href="#wmnds-general-expand"></use>
                </svg>
              </button>
            </div>
            <div class="wmnds-col-1 wmnds-col-sm-1-2">
              <button class="wmnds-btn wmnds-btn--block wmnds-btn--align-left" type="submit">
                Plan my journey
                <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                  <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Nunjucks markup

{% from "wmnds/components/journey-planner/_journey-planner.njk" import wmndsJourneyPlanner %}

{{
   wmndsJourneyPlanner({
      formTitle: null,
      isOpen: true
   })
}}

Nunjucks properties

Name	Type	Description
formTitle	string	If empty, form title will be 'Plan your journey' as default.
isOpen	boolean	If true, journey planner will be expanded. Defaults to `false`.

Expanded

When a user selects the ‘Add details' button, the full journey details are shown

Plan your journey

HTML markup

<div style="max-width: 448px">
  <div class="wmnds-journey-planner  wmnds-is--open">
    <div class="wmnds-p-md">
      <h2>Plan your journey</h2>
      <form class="wmnds-journey-planner__form" name="jphome" action="//journeyplanner.tfwm.org.uk/Home/HandleWidgetQuery" method="GET">
        <div class="wmnds-journey-planner__from">
          <label class="wmnds-fe-label wmnds-h5 wmnds-m-t-xsm" for="mainjp-from--opened">From</label>
          <div class="wmnds-autocomplete wmnds-grid">
            <!-- Search icon -->
            <svg class="wmnds-autocomplete__icon">
              <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
            </svg>
            <!-- normal sized loader -->
            <div class="wmnds-loader" role="alert" aria-live="assertive">
              <p class="wmnds-loader__content">Content is loading...</p>
            </div>
            <!-- Autocomplete input box -->
            <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Origin" aria-label="Enter station or postcode" type="text" id="mainjp-from--opened" required="true" autocomplete="off">
          </div>
        </div>
        <div class="wmnds-journey-planner__to">
          <div class="wmnds-journey-planner__switch">
            <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
              Switch
            </button>
            <svg class="wmnds-journey-planner__switch-icon">
              <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
            </svg>
          </div>
          <label class="wmnds-fe-label wmnds-h5" for="mainjp-to--opened">To</label>
          <div class="wmnds-autocomplete wmnds-grid">
            <!-- Search icon -->
            <svg class="wmnds-autocomplete__icon">
              <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
            </svg>
            <!-- normal sized loader -->
            <div class="wmnds-loader" role="alert" aria-live="assertive">
              <p class="wmnds-loader__content">Content is loading...</p>
            </div>
            <!-- Autocomplete input box -->
            <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Destination" aria-label="Enter station or postcode" type="text" id="mainjp-to--opened" required="true" autocomplete="off">
          </div>
        </div>
        <div class="wmnds-journey-planner__how">
          <h5>Which modes of transport will you use?</h5>
          <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">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                </svg>
                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">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                </svg>
                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">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                </svg>
                Tram
              </div>
            </label>
          </div>
        </div>
        <div class="wmnds-journey-planner__when">
          <h5>Leaving</h5>
          <input type="hidden" name="journeyTimeType" value="leave" />
          <div class="wmnds-grid wmnds-grid--spacing-2-lg">
            <div class="wmnds-col-2-3">
              <div class="wmnds-fe-group  ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="mainjp-day--opened">Day</label>
                  <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="mainjp-day--opened" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
            </div>
            <div class="wmnds-col-1-3">
              <div class="wmnds-fe-group  ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="mainjp-time--opened">Time</label>
                  <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="mainjp-time--opened" name="SelectedJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="wmnds-journey-planner__submit ">
          <div class="wmnds-grid wmnds-grid--spacing-sm-2-lg">
            <div class="wmnds-col-1 wmnds-col-sm-1-2">
              <button class="wmnds-btn wmnds-btn--block wmnds-btn--align-left wmnds-m-b-md wmnds-btn--dark-bg" type="button">
                Hide details
                <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                  <use xlink:href="#wmnds-general-minimise" href="#wmnds-general-minimise"></use>
                </svg>
              </button>
            </div>
            <div class="wmnds-col-1 wmnds-col-sm-1-2">
              <button class="wmnds-btn wmnds-btn--block wmnds-btn--align-left" type="submit">
                Plan my journey
                <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                  <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Nunjucks markup

{% from "wmnds/components/journey-planner/_journey-planner.njk" import wmndsJourneyPlanner %}

{{
   wmndsJourneyPlanner({
      formTitle: null,
      isOpen: true
   })
}}

Nunjucks properties

Name	Type	Description
formTitle	string	If empty, form title will be 'Plan your journey' as default.
isOpen	boolean	If true, journey planner will be expanded. Defaults to `false`.

What does it do?

For users to quickly access journey information from any page of the West Midlands Network website
This widget directs users to the full journey planner service from the right sidebar of a page

When to use it?

When the content on a page is related to West Midlands Network travel modes or travel information

How it works?

The widget is collapsed by default, showing only the ‘From’ field. The widget expands to show the full journey information when the user selects the ‘From’ field
A complete list of the train stations in the West Midlands Network will automatically appear when the user selects the ’From’ or ‘To’ field. Users can also use their current location to automatically choose their departure or arrival location
The ‘From’ and ’To’ fields can be switched at any time through the Switch button
Users can choose a specific transport mode as well as change their departure or arrival time
The ‘Mobility and advanced search’ link will direct users to the journey planner service where they can enter advanced filters
The ‘Plan my journey’ Call to action button will send users to the full journey planner service with information on their selected journey

Collapsed

This is the default widget view

Plan your journey

HTML markup

<div style="max-width: 288px">
  <div class="wmnds-journey-planner-widget ">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Plan your journey</h2>
        <form class="wmnds-journey-planner-widget__form" action="//journeyplanner.networkwestmidlands.com/Home/HandleWidgetQuery" method="GET" name="jphome">
          <div class="wmnds-journey-planner-widget__from wmnds-m-b-md">
            <label class="wmnds-fe-label" for="from--collapsed--leave-collapsed--mode-collapsed">From</label>
            <div class="wmnds-autocomplete wmnds-grid">
              <!-- Search icon -->
              <svg class="wmnds-autocomplete__icon">
                <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
              </svg>
              <!-- normal sized loader -->
              <div class="wmnds-loader" role="alert" aria-live="assertive">
                <p class="wmnds-loader__content">Content is loading...</p>
              </div>
              <!-- Autocomplete input box -->
              <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Origin" aria-label="Enter station or postcode" type="text" id="from--collapsed--leave-collapsed--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__to wmnds-m-b-md">
            <div class="wmnds-journey-planner-widget__switch">
              <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                Switch
              </button>
              <svg class="wmnds-journey-planner-widget__switch-icon">
                <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
              </svg>
            </div>
            <label class="wmnds-fe-label" for="to--collapsed--leave-collapsed--mode-collapsed">To</label>
            <div class="wmnds-autocomplete wmnds-grid">
              <!-- Search icon -->
              <svg class="wmnds-autocomplete__icon">
                <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
              </svg>
              <!-- normal sized loader -->
              <div class="wmnds-loader" role="alert" aria-live="assertive">
                <p class="wmnds-loader__content">Content is loading...</p>
              </div>
              <!-- Autocomplete input box -->
              <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Destination" aria-label="Enter station or postcode" type="text" id="to--collapsed--leave-collapsed--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__when ">
            <div class="wmnds-journey-planner-widget__when--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Leave</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>Now</p>
            </div>
            <div class="wmnds-journey-planner-widget__when--expanded">
              <div class="wmnds-journey-planner-widget__when-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Arrival time
                </button>
              </div>
              <h4>Leave</h4>
              <input type="hidden" name="journeyTimeType" value="Leaving" aria-label="leave" />
              <div class="wmnds-fe-group wmnds-m-b-sm ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="day--collapsed--leave-collapsed--mode-collapsed">Day</label>
                  <select class="wmnds-fe-dropdown__select " id="day--collapsed--leave-collapsed--mode-collapsed" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
              <div class="wmnds-fe-group wmnds-m-b-md ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="time--collapsed--leave-collapsed--mode-collapsed">Time</label>
                  <select class="wmnds-fe-dropdown__select " id="time--collapsed--leave-collapsed--mode-collapsed" name="SelectedJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__how ">
            <div class="wmnds-journey-planner-widget__how--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>All transport modes</p>
            </div>
            <div class="wmnds-journey-planner-widget__how--expanded">
              <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
              <div class="wmnds-journey-planner-widget__how-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Select all
                </button>
              </div>
              <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-m-t-sm">
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useBus" checked aria-label="bus" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--bus">
                      <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                    </svg>
                    Bus
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTram" checked aria-label="Tram" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--metro">
                      <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                    </svg>
                    Tram
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTrain" checked aria-label="Train" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--train">
                      <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                    </svg>
                    Train
                  </button>
                </div>
                <p class="wmnds-col-1 wmnds-m-b-sm">Or</p>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="walk" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--walk">
                      <use xlink:href="#wmnds-modes-isolated-walk" href="#wmnds-modes-isolated-walk"></use>
                    </svg>
                    Walk
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="cycle" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--cycle">
                      <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
                    </svg>
                    Cycle
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__advanced-search">
            <a href="http://journeyplanner.networkwestmidlands.com/" title="Go to mobility and advanced search" target="_self" class="wmnds-link wmnds-m-t--lg">
              Mobility and advanced search
            </a>
          </div>
          <div class="wmnds-journey-planner-widget__submit">
            <button class="wmnds-btn wmnds-m-t-md" type="submit">
              Plan my journey
              <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
              </svg>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Nunjucks markup

{% from "wmnds/components/journey-planner-widget/_journey-planner-widget.njk" import wmndsJourneyPlannerWidget %}

{{
   wmndsJourneyPlannerWidget({
      formTitle: null,
      isOpen: true,
      isHowOpen: false,
      isWhenOpen: false
   })
}}

Nunjucks properties

Name	Type	Description
formTitle	string	Component's title. If empty, form title will be 'Plan your journey' as default.
isOpen	boolean	If true, journey planner widget will be expanded. Defaults to `false`.
isWhenOpen	boolean	If true, journey planner widget area to define when you want to travel will be expanded. Defaults to `false`.
isHowOpen	boolean	If true, journey planner widget area to define how (the mode of travel) do you want to travel will be expanded. Defaults to `false`.

Recommended javascript (browser compatible)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _axios = _interopRequireDefault(require("axios"));

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {
    "default": obj
  };
}
/* eslint-disable no-unused-vars */
/* eslint-disable global-require */
/* eslint-disable no-param-reassign */

var journeyPlannerWidgetJS = function journeyPlannerWidgetJS() {
  // Constants
  var activeClass = 'wmnds-is--active';
  var loadingClass = 'wmnds-is--loading';
  var openClass = 'wmnds-is--open';
  var axiosCancelToken;
  var axiosSource;
  var selectAllMode = true;
  var leaveMode = true;
  var currentWidget;
  var checkAvailableSlotsTimeout;
  var slot;
  var expandWhenArea = function expandWhenArea(e) {
    e.target.parentNode.parentNode.parentNode.classList.add(openClass);
  };
  var expandWidget = function expandWidget(e) {
    e.target.closest('.wmnds-journey-planner-widget').classList.add(openClass);
  };
  var expandHowArea = function expandHowArea(e) {
    var howArea = e.target.parentNode.parentNode.parentNode;
    howArea.classList.add(openClass);
    // guarantees that there are not selected options when the area is expanded
    howArea.querySelectorAll("input[type='checkbox']:checked").forEach(function(modeInput) {
      modeInput.checked = false;
    });
  };

  // Returns a function, that, as long as it continues to be invoked, will not
  // be triggered. The function will be called after it stops being called for
  // N milliseconds. If `immediate` is passed, trigger the function on the
  // leading edge, instead of the trailing.
  var debounce = function debounce(func, wait, immediate) {
    var timeout;
    // eslint-disable-next-line func-names
    return function() {
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
      // eslint-disable-next-line func-names
      var later = function later() {
        timeout = null;
        if (!immediate) func.apply(void 0, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(void 0, args);
    };
  };
  var updateSelectedLocation = function updateSelectedLocation(e) {
    var input = e.target.parentElement.parentElement.querySelector('input');
    input.value = e.target.title;
    // Remove suggestions
    e.target.parentNode.remove();
  };
  var updateSelectedLocationToCurrentLocation = function updateSelectedLocationToCurrentLocation(e) {
    var showPosition = function showPosition(position) {
      var input = e.target.parentElement.parentElement.querySelector('input');
      input.value = "".concat(position.coords.latitude, ",").concat(position.coords.longitude);
      // Remove suggestions
      e.target.parentNode.remove();
    };
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      // eslint-disable-next-line no-console
      console.error('Geolocation is not supported by this browser.');
    }
  };
  var startLoading = function startLoading(target) {
    return target.parentNode.classList.add(loadingClass);
  };
  var stopLoading = function stopLoading(target) {
    return target.parentNode.classList.remove(loadingClass);
  };
  var cleanSuggestions = function cleanSuggestions(target) {
    var suggestionsList = target.parentNode.parentNode.querySelector('.wmnds-autocomplete-suggestions');
    if (suggestionsList) {
      suggestionsList.remove();
    }
  };
  var addAutocompleteSuggestions = function addAutocompleteSuggestions(element, results) {
    // Remove suggestions if they exist
    cleanSuggestions(element);

    // Create a new list element
    var suggestionsList = document.createElement('ul');
    suggestionsList.classList.add('wmnds-autocomplete-suggestions');

    // Add first option that is not part of the API results
    var currentLocationSuggestion = document.createElement('li');
    currentLocationSuggestion.classList.add('wmnds-autocomplete-suggestions__li', 'bg-default');
    currentLocationSuggestion.innerHTML = 'Use current location';
    currentLocationSuggestion.title = 'Use current location';
    currentLocationSuggestion.tabIndex = 0;
    currentLocationSuggestion.ariaPressed = false;
    currentLocationSuggestion.addEventListener('click', updateSelectedLocationToCurrentLocation);
    currentLocationSuggestion.addEventListener('onKeyUp', updateSelectedLocationToCurrentLocation);
    suggestionsList.appendChild(currentLocationSuggestion);
    results.forEach(function(result) {
      var suggestion = document.createElement('li');
      suggestion.classList.add('wmnds-autocomplete-suggestions__li');
      suggestion.innerHTML = result.address;
      suggestion.title = result.address;
      suggestion.tabIndex = 0;
      suggestion.ariaPressed = false;
      suggestion.addEventListener('click', updateSelectedLocation);
      suggestion.addEventListener('onKeyUp', updateSelectedLocation);

      // Append the sugestion that we just created and edited to the list
      suggestionsList.appendChild(suggestion);
    });
    // Stop the loading spinner
    stopLoading(element);
    // Display the results
    element.parentNode.parentNode.append(suggestionsList);
  };
  var getRequestFromAPI = function getRequestFromAPI(url, APIKey, element) {
    _axios["default"].get(url, {
      headers: {
        'Ocp-Apim-Subscription-Key': APIKey
      },
      cancelToken: axiosSource.token
    }).then(function handleSuccess(response) {
      addAutocompleteSuggestions(element, response.data.candidates);
    })["catch"](function handleError(error) {
      stopLoading(element);
      // eslint-disable-next-line no-console
      console.log(error);
    }).then(function handleAnyState() {
      // always executed
    });
  };
  var shouldKeyEventTriggerAutocomplete = function shouldKeyEventTriggerAutocomplete(keyboardEvent) {
    var key = keyboardEvent.key;
    if (!key || key.length > 1) return false;
    var regex = new RegExp('[a-zA-Z0-9]', 'g'); // check if alphanumeric
    return regex.test(key);
  };
  var refreshCancelToken = function refreshCancelToken() {
    if (axiosSource) axiosSource.cancel();
    axiosCancelToken = _axios["default"].CancelToken;
    axiosSource = axiosCancelToken.source();
  };
  var autocomplete = function autocomplete(e) {
    // activates the loading spin
    startLoading(e.target);

    // treat input value as it was part of an url eg:	b1+2aa
    var query = e.target.value;
    if (!query.trim() && !shouldKeyEventTriggerAutocomplete(e)) {
      cleanSuggestions(e.target);
      stopLoading(e.target);
      return;
    }
    refreshCancelToken();
    var key = encodeURI(query);
    var APIKey = 'e0c1216f818a41be8d528ac1d4f7ebfd';
    var url = "https://wmca-api-portal-staging.azure-api.net/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?singleLine=".concat(key, "&f=pjson");

    // hit the API to get the results
    getRequestFromAPI(url, APIKey, e.target);
  };
  var debounceAutocomplete = debounce(autocomplete, 600);
  var toggleMode = function toggleMode(e) {
    // in case user clicks over the icon, finds the nearest button element
    var button = e.target.tagName !== 'BUTTON' ? e.target.closest('.wmnds-btn--mode') : e.target;
    var input = button.previousElementSibling;

    // if there is any alternative mode selected at this point, remove it
    var altCheckedInput = button.parentNode.parentNode.querySelector("input[type='radio']:checked");
    if (altCheckedInput) {
      altCheckedInput.checked = false;
      altCheckedInput.nextElementSibling.classList.remove(activeClass);
    }

    // toggle the button
    input.checked = !input.checked;
    button.classList.toggle(activeClass);
  };
  var updateAlternativeOptions = function updateAlternativeOptions(altInputs) {
    var oneAltModeSelected = false;
    altInputs.forEach(function(altInput) {
      if (altInput.checked) {
        altInput.nextElementSibling.classList.add(activeClass);
        oneAltModeSelected = true;
      } else {
        altInput.nextElementSibling.classList.remove(activeClass);
      }
    });
    if (oneAltModeSelected) {
      // Choosing an alternative travel mode will reset the main travel modes choices
      altInputs[0].parentNode.parentNode.querySelectorAll('input[type="checkbox"]:checked').forEach(function(modeInput) {
        var modeBtn = modeInput.nextElementSibling;
        modeBtn.classList.remove(activeClass);
        modeInput.checked = false;
      });
    }
  };
  var updateRadioInput = function updateRadioInput(e) {
    // in case user clicks over the icon, finds the nearest button element
    var button = e.target.tagName !== 'BUTTON' ? e.target.closest('.wmnds-btn--mode') : e.target;
    var input = button.previousElementSibling;

    // check the clicked option
    input.checked = true;

    // update the alternate modes
    var altInputs = input.parentNode.parentNode.querySelectorAll("input[type='radio']");
    updateAlternativeOptions(altInputs);
  };
  var checkAndUpdateFormat = function checkAndUpdateFormat(val) {
    if (val < 10) {
      return "0".concat(val);
    }
    return val;
  };
  var findFirstAvailableSlot = function findFirstAvailableSlot() {
    // Find the first slot available
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    if (parseInt(m, 10) >= 45) {
      h += 1;
      m = 0;
    } else {
      m = Math.ceil(m / 15) * 15 % 60;
    }
    var timeslot = "".concat(h, ":").concat(checkAndUpdateFormat(m));
    return timeslot;
  };
  var disableAllOptionsBeforeNow = function disableAllOptionsBeforeNow(firstAvailableSlot) {
    var timeSlots = currentWidget.querySelectorAll(".wmnds-fe-dropdown__select[name='SelectedJourneyTime'] option");
    // Disable all the slots that preceeds the first available slot and mark as select the next available slot
    var isAvailable = false;
    timeSlots.forEach(function(timeSlot) {
      if (isAvailable) {
        return;
      }
      if (timeSlot.value === firstAvailableSlot) {
        timeSlot.selected = 'selected';
        isAvailable = true;
        return;
      }
      timeSlot.disabled = 'disabled';
    });

    // If the selected option is now disabled (in the past), it'll change it to the next slot
    var timeDropdown = currentWidget.querySelector(".wmnds-fe-dropdown__select[name='SelectedJourneyTime']");
    var selectedOption = timeDropdown.options[timeDropdown.selectedIndex];
    if (selectedOption && selectedOption.disabled) {
      timeDropdown.selectedIndex += 1;
      if (timeDropdown.selectedIndex >= timeDropdown.options.length) {
        timeDropdown.selectedIndex = 0;
      }
    }
  };
  var checkIfFirstSlotChanged = function checkIfFirstSlotChanged() {
    // Run every minute and check is the first available slot is still the same one.
    // If so, do nothing. If not, disabled the options that are in the past.
    var newSlot = findFirstAvailableSlot();
    if (newSlot !== slot) {
      disableAllOptionsBeforeNow(newSlot);
      slot = newSlot;
    }
  };
  var updateTimeOptions = function updateTimeOptions() {
    var parentEl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : currentWidget;
    var day = parentEl.querySelector(".wmnds-fe-dropdown__select[name='day']").value;
    if (day === 'today') {
      slot = findFirstAvailableSlot();
      disableAllOptionsBeforeNow(slot);
      // Run every minute and check is the first available slot is still the same one.
      // If so, do nothing. If not, disabled the options that are in the past.
      checkAvailableSlotsTimeout = setInterval(checkIfFirstSlotChanged, 60000);
    } else {
      // if day == tomorrow then we want to have all slots enabled
      clearInterval(checkAvailableSlotsTimeout);
      var slots = parentEl.querySelectorAll(".wmnds-fe-dropdown__select[name='SelectedJourneyTime'] option");
      slots.forEach(function(singleSlot) {
        singleSlot.setAttribute('disabled', false);
      });
    }
  };
  var handleDayChange = function handleDayChange(e) {
    updateTimeOptions(e.target.parentNode);
  };
  var toggleBetweenLeaveAndArrive = function toggleBetweenLeaveAndArrive(e) {
    var title = e.target.parentElement.nextElementSibling;
    if (title.tagName !== 'H4') return;
    var input = title.nextElementSibling;
    if (leaveMode) {
      e.target.innerHTML = 'Leave time';
      title.innerHTML = 'Arrive';
      title.id = 'arrive';
      input.value = 'Arriving';
    } else {
      e.target.innerHTML = 'Arrival time';
      title.innerHTML = 'Leave';
      title.id = 'leave';
      input.value = 'Leaving';
    }
    leaveMode = !leaveMode;
  };
  var selectAllorSelectNone = function selectAllorSelectNone(e) {
    e.target.parentNode.parentNode.querySelectorAll('input[type="checkbox"]').forEach(function(modeInput) {
      var modeBtn = modeInput.nextElementSibling;
      if (selectAllMode && !modeInput.classList.contains(activeClass)) {
        modeBtn.classList.add(activeClass);
        modeInput.checked = !modeInput.checked;
      } else if (!selectAllMode && modeInput.classList.contains(activeClass)) {
        modeBtn.classList.remove(activeClass);
        modeInput.checked = !modeInput.checked;
      }
    });
    e.target.innerHTML = selectAllMode ? 'Select None' : 'Select all';
    selectAllMode = !selectAllMode;
  };
  var switchFromAndTo = function switchFromAndTo(e) {
    var inputs = e.target.parentNode.parentNode.parentNode.querySelectorAll("input[name='Origin'], input[name='Destination']");
    var a = inputs[0].value;
    var b = inputs[1].value;
    var _ref = [b, a];
    inputs[0].value = _ref[0];
    inputs[1].value = _ref[1];
  };
  var init = function init() {
    // Add event listener to the autocomplete fields
    var autocompleteElements = currentWidget.querySelectorAll("input[name='Origin'], input[name='Destination']");
    autocompleteElements.forEach(function(autocompleteElement) {
      if (autocompleteElement.name === 'Origin') {
        autocompleteElement.addEventListener('click', expandWidget);
      }
      autocompleteElement.addEventListener('keyup', debounceAutocomplete);
    });

    // Add event listener to switch from and to values
    var switchBtn = currentWidget.querySelector('.wmnds-journey-planner-widget__switch');
    switchBtn.addEventListener('click', switchFromAndTo);

    // Add event listener to the buttons that expand the "when" and "how" area
    var whenController = currentWidget.querySelector('.wmnds-journey-planner-widget__when--collapsed button');
    var howController = currentWidget.querySelector('.wmnds-journey-planner-widget__how--collapsed button');
    whenController.addEventListener('click', expandWhenArea);
    howController.addEventListener('click', expandHowArea);

    // Update time options based on the day selected and current datetime
    updateTimeOptions();

    // Add event listener to travel day
    var day = currentWidget.querySelector('.wmnds-journey-planner-widget__when .wmnds-fe-dropdown__select[name="day"]');
    day.addEventListener('change', handleDayChange);

    // Add even listener to controllers inside "when" area - change arrive / leave
    var whenControllerButton = currentWidget.querySelector('.wmnds-journey-planner-widget__when-controller button');
    whenControllerButton.addEventListener('click', toggleBetweenLeaveAndArrive);

    // Add even listener to controllers inside "how" area - select all
    var howControllerButton = currentWidget.querySelector('.wmnds-journey-planner-widget__how-controller button');
    howControllerButton.addEventListener('click', selectAllorSelectNone);

    // Add event listeners to the main travel mode buttons: bus, train and tram
    var mainTravelModeInputs = currentWidget.querySelectorAll('.wmnds-journey-planner-widget__how input[type="checkbox"]');
    mainTravelModeInputs.forEach(function(travelModeInput) {
      return (
        // travelModeInput.addEventListener('change', updateMainModeOptions);
        travelModeInput.nextElementSibling.addEventListener('click', toggleMode)
      );
    });

    // Add event listeners to the alternative travel mode buttons: walk and cycle
    var altTravelModeInputs = currentWidget.querySelectorAll('.wmnds-journey-planner-widget__how input[type="radio"]');
    altTravelModeInputs.forEach(function(altTravelModeInput) {
      altTravelModeInput.nextElementSibling.addEventListener('click', updateRadioInput);
    });
  };
  var widgets = document.querySelectorAll('.wmnds-journey-planner-widget');
  widgets.forEach(function(widget) {
    currentWidget = widget;
    init();
  });
};
var _default = journeyPlannerWidgetJS;
exports["default"] = _default;

Recommended javascript (ES6)

/* eslint-disable no-unused-vars */
/* eslint-disable global-require */
/* eslint-disable no-param-reassign */
import axios from 'axios';

const journeyPlannerWidgetJS = () => {
  // Constants
  const activeClass = 'wmnds-is--active';
  const loadingClass = 'wmnds-is--loading';
  const openClass = 'wmnds-is--open';

  let axiosCancelToken;
  let axiosSource;

  let selectAllMode = true;
  let leaveMode = true;

  let currentWidget;
  let checkAvailableSlotsTimeout;
  let slot;

  const expandWhenArea = e => {
    e.target.parentNode.parentNode.parentNode.classList.add(openClass);
  };
  const expandWidget = e => {
    e.target.closest('.wmnds-journey-planner-widget').classList.add(openClass);
  };

  const expandHowArea = e => {
    const howArea = e.target.parentNode.parentNode.parentNode;
    howArea.classList.add(openClass);
    // guarantees that there are not selected options when the area is expanded
    howArea.querySelectorAll("input[type='checkbox']:checked").forEach(modeInput => {
      modeInput.checked = false;
    });
  };

  // Returns a function, that, as long as it continues to be invoked, will not
  // be triggered. The function will be called after it stops being called for
  // N milliseconds. If `immediate` is passed, trigger the function on the
  // leading edge, instead of the trailing.
  const debounce = (func, wait, immediate) => {
    let timeout;
    // eslint-disable-next-line func-names
    return function(...args) {
      // eslint-disable-next-line func-names
      const later = function() {
        timeout = null;
        if (!immediate) func(...args);
      };
      const callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func(...args);
    };
  };

  const updateSelectedLocation = e => {
    const input = e.target.parentElement.parentElement.querySelector('input');
    input.value = e.target.title;
    // Remove suggestions
    e.target.parentNode.remove();
  };

  const updateSelectedLocationToCurrentLocation = e => {
    const showPosition = position => {
      const input = e.target.parentElement.parentElement.querySelector('input');
      input.value = `${position.coords.latitude},${position.coords.longitude}`;
      // Remove suggestions
      e.target.parentNode.remove();
    };
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      // eslint-disable-next-line no-console
      console.error('Geolocation is not supported by this browser.');
    }
  };

  const startLoading = target => target.parentNode.classList.add(loadingClass);
  const stopLoading = target => target.parentNode.classList.remove(loadingClass);

  const cleanSuggestions = target => {
    const suggestionsList = target.parentNode.parentNode.querySelector(
      '.wmnds-autocomplete-suggestions'
    );
    if (suggestionsList) {
      suggestionsList.remove();
    }
  };

  const addAutocompleteSuggestions = (element, results) => {
    // Remove suggestions if they exist
    cleanSuggestions(element);

    // Create a new list element
    const suggestionsList = document.createElement('ul');
    suggestionsList.classList.add('wmnds-autocomplete-suggestions');

    // Add first option that is not part of the API results
    const currentLocationSuggestion = document.createElement('li');
    currentLocationSuggestion.classList.add('wmnds-autocomplete-suggestions__li', 'bg-default');
    currentLocationSuggestion.innerHTML = 'Use current location';
    currentLocationSuggestion.title = 'Use current location';
    currentLocationSuggestion.tabIndex = 0;
    currentLocationSuggestion.ariaPressed = false;
    currentLocationSuggestion.addEventListener('click', updateSelectedLocationToCurrentLocation);
    currentLocationSuggestion.addEventListener('onKeyUp', updateSelectedLocationToCurrentLocation);
    suggestionsList.appendChild(currentLocationSuggestion);

    results.forEach(result => {
      const suggestion = document.createElement('li');
      suggestion.classList.add('wmnds-autocomplete-suggestions__li');
      suggestion.innerHTML = result.address;
      suggestion.title = result.address;
      suggestion.tabIndex = 0;
      suggestion.ariaPressed = false;
      suggestion.addEventListener('click', updateSelectedLocation);
      suggestion.addEventListener('onKeyUp', updateSelectedLocation);

      // Append the sugestion that we just created and edited to the list
      suggestionsList.appendChild(suggestion);
    });
    // Stop the loading spinner
    stopLoading(element);
    // Display the results
    element.parentNode.parentNode.append(suggestionsList);
  };

  const getRequestFromAPI = (url, APIKey, element) => {
    axios
      .get(url, {
        headers: {
          'Ocp-Apim-Subscription-Key': APIKey
        },
        cancelToken: axiosSource.token
      })
      .then(function handleSuccess(response) {
        addAutocompleteSuggestions(element, response.data.candidates);
      })
      .catch(function handleError(error) {
        stopLoading(element);
        // eslint-disable-next-line no-console
        console.log(error);
      })
      .then(function handleAnyState() {
        // always executed
      });
  };

  const shouldKeyEventTriggerAutocomplete = keyboardEvent => {
    const {
      key
    } = keyboardEvent;
    if (!key || key.length > 1) return false;
    const regex = new RegExp('[a-zA-Z0-9]', 'g'); // check if alphanumeric
    return regex.test(key);
  };

  const refreshCancelToken = () => {
    if (axiosSource) axiosSource.cancel();
    axiosCancelToken = axios.CancelToken;
    axiosSource = axiosCancelToken.source();
  };

  const autocomplete = e => {
    // activates the loading spin
    startLoading(e.target);

    // treat input value as it was part of an url eg:	b1+2aa
    const query = e.target.value;
    if (!query.trim() && !shouldKeyEventTriggerAutocomplete(e)) {
      cleanSuggestions(e.target);
      stopLoading(e.target);
      return;
    }

    refreshCancelToken();
    const key = encodeURI(query);
    const APIKey = 'e0c1216f818a41be8d528ac1d4f7ebfd';
    const url = `https://wmca-api-portal-staging.azure-api.net/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?singleLine=${key}&f=pjson`;

    // hit the API to get the results
    getRequestFromAPI(url, APIKey, e.target);
  };

  const debounceAutocomplete = debounce(autocomplete, 600);

  const toggleMode = e => {
    // in case user clicks over the icon, finds the nearest button element
    const button = e.target.tagName !== 'BUTTON' ? e.target.closest('.wmnds-btn--mode') : e.target;
    const input = button.previousElementSibling;

    // if there is any alternative mode selected at this point, remove it
    const altCheckedInput = button.parentNode.parentNode.querySelector(
      "input[type='radio']:checked"
    );
    if (altCheckedInput) {
      altCheckedInput.checked = false;
      altCheckedInput.nextElementSibling.classList.remove(activeClass);
    }

    // toggle the button
    input.checked = !input.checked;
    button.classList.toggle(activeClass);
  };

  const updateAlternativeOptions = altInputs => {
    let oneAltModeSelected = false;
    altInputs.forEach(altInput => {
      if (altInput.checked) {
        altInput.nextElementSibling.classList.add(activeClass);
        oneAltModeSelected = true;
      } else {
        altInput.nextElementSibling.classList.remove(activeClass);
      }
    });

    if (oneAltModeSelected) {
      // Choosing an alternative travel mode will reset the main travel modes choices
      altInputs[0].parentNode.parentNode
        .querySelectorAll('input[type="checkbox"]:checked')
        .forEach(modeInput => {
          const modeBtn = modeInput.nextElementSibling;
          modeBtn.classList.remove(activeClass);
          modeInput.checked = false;
        });
    }
  };

  const updateRadioInput = e => {
    // in case user clicks over the icon, finds the nearest button element
    const button = e.target.tagName !== 'BUTTON' ? e.target.closest('.wmnds-btn--mode') : e.target;
    const input = button.previousElementSibling;

    // check the clicked option
    input.checked = true;

    // update the alternate modes
    const altInputs = input.parentNode.parentNode.querySelectorAll("input[type='radio']");
    updateAlternativeOptions(altInputs);
  };

  const checkAndUpdateFormat = val => {
    if (val < 10) {
      return `0${val}`;
    }
    return val;
  };

  const findFirstAvailableSlot = () => {
    // Find the first slot available
    const today = new Date();
    let h = today.getHours();
    let m = today.getMinutes();
    if (parseInt(m, 10) >= 45) {
      h += 1;
      m = 0;
    } else {
      m = (Math.ceil(m / 15) * 15) % 60;
    }
    const timeslot = `${h}:${checkAndUpdateFormat(m)}`;
    return timeslot;
  };

  const disableAllOptionsBeforeNow = firstAvailableSlot => {
    const timeSlots = currentWidget.querySelectorAll(
      ".wmnds-fe-dropdown__select[name='SelectedJourneyTime'] option"
    );
    // Disable all the slots that preceeds the first available slot and mark as select the next available slot
    let isAvailable = false;
    timeSlots.forEach(timeSlot => {
      if (isAvailable) {
        return;
      }
      if (timeSlot.value === firstAvailableSlot) {
        timeSlot.selected = 'selected';
        isAvailable = true;
        return;
      }
      timeSlot.disabled = 'disabled';
    });

    // If the selected option is now disabled (in the past), it'll change it to the next slot
    const timeDropdown = currentWidget.querySelector(
      ".wmnds-fe-dropdown__select[name='SelectedJourneyTime']"
    );
    const selectedOption = timeDropdown.options[timeDropdown.selectedIndex];
    if (selectedOption && selectedOption.disabled) {
      timeDropdown.selectedIndex += 1;
      if (timeDropdown.selectedIndex >= timeDropdown.options.length) {
        timeDropdown.selectedIndex = 0;
      }
    }
  };

  const checkIfFirstSlotChanged = () => {
    // Run every minute and check is the first available slot is still the same one.
    // If so, do nothing. If not, disabled the options that are in the past.
    const newSlot = findFirstAvailableSlot();
    if (newSlot !== slot) {
      disableAllOptionsBeforeNow(newSlot);
      slot = newSlot;
    }
  };

  const updateTimeOptions = (parentEl = currentWidget) => {
    const day = parentEl.querySelector(".wmnds-fe-dropdown__select[name='day']").value;
    if (day === 'today') {
      slot = findFirstAvailableSlot();
      disableAllOptionsBeforeNow(slot);
      // Run every minute and check is the first available slot is still the same one.
      // If so, do nothing. If not, disabled the options that are in the past.
      checkAvailableSlotsTimeout = setInterval(checkIfFirstSlotChanged, 60000);
    } else {
      // if day == tomorrow then we want to have all slots enabled
      clearInterval(checkAvailableSlotsTimeout);
      const slots = parentEl.querySelectorAll(
        ".wmnds-fe-dropdown__select[name='SelectedJourneyTime'] option"
      );
      slots.forEach(singleSlot => {
        singleSlot.setAttribute('disabled', false);
      });
    }
  };

  const handleDayChange = e => {
    updateTimeOptions(e.target.parentNode);
  };

  const toggleBetweenLeaveAndArrive = e => {
    const title = e.target.parentElement.nextElementSibling;
    if (title.tagName !== 'H4') return;
    const input = title.nextElementSibling;
    if (leaveMode) {
      e.target.innerHTML = 'Leave time';
      title.innerHTML = 'Arrive';
      title.id = 'arrive';
      input.value = 'Arriving';
    } else {
      e.target.innerHTML = 'Arrival time';
      title.innerHTML = 'Leave';
      title.id = 'leave';
      input.value = 'Leaving';
    }
    leaveMode = !leaveMode;
  };

  const selectAllorSelectNone = e => {
    e.target.parentNode.parentNode.querySelectorAll('input[type="checkbox"]').forEach(modeInput => {
      const modeBtn = modeInput.nextElementSibling;
      if (selectAllMode && !modeInput.classList.contains(activeClass)) {
        modeBtn.classList.add(activeClass);
        modeInput.checked = !modeInput.checked;
      } else if (!selectAllMode && modeInput.classList.contains(activeClass)) {
        modeBtn.classList.remove(activeClass);
        modeInput.checked = !modeInput.checked;
      }
    });
    e.target.innerHTML = selectAllMode ? 'Select None' : 'Select all';
    selectAllMode = !selectAllMode;
  };

  const switchFromAndTo = e => {
    const inputs = e.target.parentNode.parentNode.parentNode.querySelectorAll(
      "input[name='Origin'], input[name='Destination']"
    );
    const a = inputs[0].value;
    const b = inputs[1].value;
    [inputs[0].value, inputs[1].value] = [b, a];
  };

  const init = () => {
    // Add event listener to the autocomplete fields
    const autocompleteElements = currentWidget.querySelectorAll(
      "input[name='Origin'], input[name='Destination']"
    );
    autocompleteElements.forEach(autocompleteElement => {
      if (autocompleteElement.name === 'Origin') {
        autocompleteElement.addEventListener('click', expandWidget);
      }
      autocompleteElement.addEventListener('keyup', debounceAutocomplete);
    });

    // Add event listener to switch from and to values
    const switchBtn = currentWidget.querySelector('.wmnds-journey-planner-widget__switch');
    switchBtn.addEventListener('click', switchFromAndTo);

    // Add event listener to the buttons that expand the "when" and "how" area
    const whenController = currentWidget.querySelector(
      '.wmnds-journey-planner-widget__when--collapsed button'
    );
    const howController = currentWidget.querySelector(
      '.wmnds-journey-planner-widget__how--collapsed button'
    );
    whenController.addEventListener('click', expandWhenArea);
    howController.addEventListener('click', expandHowArea);

    // Update time options based on the day selected and current datetime
    updateTimeOptions();

    // Add event listener to travel day
    const day = currentWidget.querySelector(
      '.wmnds-journey-planner-widget__when .wmnds-fe-dropdown__select[name="day"]'
    );
    day.addEventListener('change', handleDayChange);

    // Add even listener to controllers inside "when" area - change arrive / leave
    const whenControllerButton = currentWidget.querySelector(
      '.wmnds-journey-planner-widget__when-controller button'
    );
    whenControllerButton.addEventListener('click', toggleBetweenLeaveAndArrive);

    // Add even listener to controllers inside "how" area - select all
    const howControllerButton = currentWidget.querySelector(
      '.wmnds-journey-planner-widget__how-controller button'
    );
    howControllerButton.addEventListener('click', selectAllorSelectNone);

    // Add event listeners to the main travel mode buttons: bus, train and tram
    const mainTravelModeInputs = currentWidget.querySelectorAll(
      '.wmnds-journey-planner-widget__how input[type="checkbox"]'
    );
    mainTravelModeInputs.forEach(travelModeInput =>
      // travelModeInput.addEventListener('change', updateMainModeOptions);
      travelModeInput.nextElementSibling.addEventListener('click', toggleMode)
    );

    // Add event listeners to the alternative travel mode buttons: walk and cycle
    const altTravelModeInputs = currentWidget.querySelectorAll(
      '.wmnds-journey-planner-widget__how input[type="radio"]'
    );
    altTravelModeInputs.forEach(altTravelModeInput => {
      altTravelModeInput.nextElementSibling.addEventListener('click', updateRadioInput);
    });
  };

  const widgets = document.querySelectorAll('.wmnds-journey-planner-widget');
  widgets.forEach(widget => {
    currentWidget = widget;
    init();
  });
};

export default journeyPlannerWidgetJS;

Expanded

When a user selects the ‘From’ field, the full journey details are expanded

Plan your journey

HTML markup

<div style="max-width: 288px">
  <div class="wmnds-journey-planner-widget  wmnds-is--open">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Plan your journey</h2>
        <form class="wmnds-journey-planner-widget__form" action="//journeyplanner.networkwestmidlands.com/Home/HandleWidgetQuery" method="GET" name="jphome">
          <div class="wmnds-journey-planner-widget__from wmnds-m-b-md">
            <label class="wmnds-fe-label" for="from--opened--leave-collapsed--mode-collapsed">From</label>
            <div class="wmnds-autocomplete wmnds-grid">
              <!-- Search icon -->
              <svg class="wmnds-autocomplete__icon">
                <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
              </svg>
              <!-- normal sized loader -->
              <div class="wmnds-loader" role="alert" aria-live="assertive">
                <p class="wmnds-loader__content">Content is loading...</p>
              </div>
              <!-- Autocomplete input box -->
              <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Origin" aria-label="Enter station or postcode" type="text" id="from--opened--leave-collapsed--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__to wmnds-m-b-md">
            <div class="wmnds-journey-planner-widget__switch">
              <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                Switch
              </button>
              <svg class="wmnds-journey-planner-widget__switch-icon">
                <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
              </svg>
            </div>
            <label class="wmnds-fe-label" for="to--opened--leave-collapsed--mode-collapsed">To</label>
            <div class="wmnds-autocomplete wmnds-grid">
              <!-- Search icon -->
              <svg class="wmnds-autocomplete__icon">
                <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
              </svg>
              <!-- normal sized loader -->
              <div class="wmnds-loader" role="alert" aria-live="assertive">
                <p class="wmnds-loader__content">Content is loading...</p>
              </div>
              <!-- Autocomplete input box -->
              <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Destination" aria-label="Enter station or postcode" type="text" id="to--opened--leave-collapsed--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__when ">
            <div class="wmnds-journey-planner-widget__when--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Leave</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>Now</p>
            </div>
            <div class="wmnds-journey-planner-widget__when--expanded">
              <div class="wmnds-journey-planner-widget__when-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Arrival time
                </button>
              </div>
              <h4>Leave</h4>
              <input type="hidden" name="journeyTimeType" value="Leaving" aria-label="leave" />
              <div class="wmnds-fe-group wmnds-m-b-sm ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="day--opened--leave-collapsed--mode-collapsed">Day</label>
                  <select class="wmnds-fe-dropdown__select " id="day--opened--leave-collapsed--mode-collapsed" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
              <div class="wmnds-fe-group wmnds-m-b-md ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="time--opened--leave-collapsed--mode-collapsed">Time</label>
                  <select class="wmnds-fe-dropdown__select " id="time--opened--leave-collapsed--mode-collapsed" name="SelectedJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__how ">
            <div class="wmnds-journey-planner-widget__how--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>All transport modes</p>
            </div>
            <div class="wmnds-journey-planner-widget__how--expanded">
              <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
              <div class="wmnds-journey-planner-widget__how-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Select all
                </button>
              </div>
              <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-m-t-sm">
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useBus" checked aria-label="bus" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--bus">
                      <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                    </svg>
                    Bus
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTram" checked aria-label="Tram" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--metro">
                      <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                    </svg>
                    Tram
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTrain" checked aria-label="Train" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--train">
                      <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                    </svg>
                    Train
                  </button>
                </div>
                <p class="wmnds-col-1 wmnds-m-b-sm">Or</p>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="walk" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--walk">
                      <use xlink:href="#wmnds-modes-isolated-walk" href="#wmnds-modes-isolated-walk"></use>
                    </svg>
                    Walk
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="cycle" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--cycle">
                      <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
                    </svg>
                    Cycle
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__advanced-search">
            <a href="http://journeyplanner.networkwestmidlands.com/" title="Go to mobility and advanced search" target="_self" class="wmnds-link wmnds-m-t--lg">
              Mobility and advanced search
            </a>
          </div>
          <div class="wmnds-journey-planner-widget__submit">
            <button class="wmnds-btn wmnds-m-t-md" type="submit">
              Plan my journey
              <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
              </svg>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Nunjucks markup

{% from "wmnds/components/journey-planner-widget/_journey-planner-widget.njk" import wmndsJourneyPlannerWidget %}

{{
   wmndsJourneyPlannerWidget({
      formTitle: null,
      isOpen: true,
      isHowOpen: false,
      isWhenOpen: false
   })
}}

Nunjucks properties

Name	Type	Description
formTitle	string	Component's title. If empty, form title will be 'Plan your journey' as default.
isOpen	boolean	If true, journey planner widget will be expanded. Defaults to `false`.
isWhenOpen	boolean	If true, journey planner widget area to define when you want to travel will be expanded. Defaults to `false`.
isHowOpen	boolean	If true, journey planner widget area to define how (the mode of travel) do you want to travel will be expanded. Defaults to `false`.

Change departure or arrival time

Users can manually change the departure or arrival time of their journey

Plan your journey

HTML markup

<div style="max-width: 288px">
  <div class="wmnds-journey-planner-widget  wmnds-is--open">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Plan your journey</h2>
        <form class="wmnds-journey-planner-widget__form" action="//journeyplanner.networkwestmidlands.com/Home/HandleWidgetQuery" method="GET" name="jphome">
          <div class="wmnds-journey-planner-widget__from wmnds-m-b-md">
            <label class="wmnds-fe-label" for="from--opened--leave-opened--mode-collapsed">From</label>
            <div class="wmnds-autocomplete wmnds-grid">
              <!-- Search icon -->
              <svg class="wmnds-autocomplete__icon">
                <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
              </svg>
              <!-- normal sized loader -->
              <div class="wmnds-loader" role="alert" aria-live="assertive">
                <p class="wmnds-loader__content">Content is loading...</p>
              </div>
              <!-- Autocomplete input box -->
              <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Origin" aria-label="Enter station or postcode" type="text" id="from--opened--leave-opened--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__to wmnds-m-b-md">
            <div class="wmnds-journey-planner-widget__switch">
              <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                Switch
              </button>
              <svg class="wmnds-journey-planner-widget__switch-icon">
                <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
              </svg>
            </div>
            <label class="wmnds-fe-label" for="to--opened--leave-opened--mode-collapsed">To</label>
            <div class="wmnds-autocomplete wmnds-grid">
              <!-- Search icon -->
              <svg class="wmnds-autocomplete__icon">
                <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
              </svg>
              <!-- normal sized loader -->
              <div class="wmnds-loader" role="alert" aria-live="assertive">
                <p class="wmnds-loader__content">Content is loading...</p>
              </div>
              <!-- Autocomplete input box -->
              <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Destination" aria-label="Enter station or postcode" type="text" id="to--opened--leave-opened--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__when  wmnds-is--open">
            <div class="wmnds-journey-planner-widget__when--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Leave</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>Now</p>
            </div>
            <div class="wmnds-journey-planner-widget__when--expanded">
              <div class="wmnds-journey-planner-widget__when-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Arrival time
                </button>
              </div>
              <h4>Leave</h4>
              <input type="hidden" name="journeyTimeType" value="Leaving" aria-label="leave" />
              <div class="wmnds-fe-group wmnds-m-b-sm ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="day--opened--leave-opened--mode-collapsed">Day</label>
                  <select class="wmnds-fe-dropdown__select " id="day--opened--leave-opened--mode-collapsed" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
              <div class="wmnds-fe-group wmnds-m-b-md ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="time--opened--leave-opened--mode-collapsed">Time</label>
                  <select class="wmnds-fe-dropdown__select " id="time--opened--leave-opened--mode-collapsed" name="SelectedJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__how ">
            <div class="wmnds-journey-planner-widget__how--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>All transport modes</p>
            </div>
            <div class="wmnds-journey-planner-widget__how--expanded">
              <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
              <div class="wmnds-journey-planner-widget__how-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Select all
                </button>
              </div>
              <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-m-t-sm">
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useBus" checked aria-label="bus" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--bus">
                      <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                    </svg>
                    Bus
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTram" checked aria-label="Tram" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--metro">
                      <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                    </svg>
                    Tram
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTrain" checked aria-label="Train" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--train">
                      <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                    </svg>
                    Train
                  </button>
                </div>
                <p class="wmnds-col-1 wmnds-m-b-sm">Or</p>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="walk" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--walk">
                      <use xlink:href="#wmnds-modes-isolated-walk" href="#wmnds-modes-isolated-walk"></use>
                    </svg>
                    Walk
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="cycle" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--cycle">
                      <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
                    </svg>
                    Cycle
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__advanced-search">
            <a href="http://journeyplanner.networkwestmidlands.com/" title="Go to mobility and advanced search" target="_self" class="wmnds-link wmnds-m-t--lg">
              Mobility and advanced search
            </a>
          </div>
          <div class="wmnds-journey-planner-widget__submit">
            <button class="wmnds-btn wmnds-m-t-md" type="submit">
              Plan my journey
              <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
              </svg>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Nunjucks markup

{% from "wmnds/components/journey-planner-widget/_journey-planner-widget.njk" import wmndsJourneyPlannerWidget %}

{{
   wmndsJourneyPlannerWidget({
      formTitle: null,
      isOpen: true,
      isHowOpen: false,
      isWhenOpen: false
   })
}}

Nunjucks properties

Name	Type	Description
formTitle	string	Component's title. If empty, form title will be 'Plan your journey' as default.
isOpen	boolean	If true, journey planner widget will be expanded. Defaults to `false`.
isWhenOpen	boolean	If true, journey planner widget area to define when you want to travel will be expanded. Defaults to `false`.
isHowOpen	boolean	If true, journey planner widget area to define how (the mode of travel) do you want to travel will be expanded. Defaults to `false`.

Transport mode

Specific transport mode(s) can be chosen by the user to filter their journey

Plan your journey

HTML markup

<div style="max-width: 288px">
  <div class="wmnds-journey-planner-widget  wmnds-is--open">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Plan your journey</h2>
        <form class="wmnds-journey-planner-widget__form" action="//journeyplanner.networkwestmidlands.com/Home/HandleWidgetQuery" method="GET" name="jphome">
          <div class="wmnds-journey-planner-widget__from wmnds-m-b-md">
            <label class="wmnds-fe-label" for="from--opened--leave-collapsed--mode-opened">From</label>
            <div class="wmnds-autocomplete wmnds-grid">
              <!-- Search icon -->
              <svg class="wmnds-autocomplete__icon">
                <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
              </svg>
              <!-- normal sized loader -->
              <div class="wmnds-loader" role="alert" aria-live="assertive">
                <p class="wmnds-loader__content">Content is loading...</p>
              </div>
              <!-- Autocomplete input box -->
              <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Origin" aria-label="Enter station or postcode" type="text" id="from--opened--leave-collapsed--mode-opened" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__to wmnds-m-b-md">
            <div class="wmnds-journey-planner-widget__switch">
              <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                Switch
              </button>
              <svg class="wmnds-journey-planner-widget__switch-icon">
                <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
              </svg>
            </div>
            <label class="wmnds-fe-label" for="to--opened--leave-collapsed--mode-opened">To</label>
            <div class="wmnds-autocomplete wmnds-grid">
              <!-- Search icon -->
              <svg class="wmnds-autocomplete__icon">
                <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
              </svg>
              <!-- normal sized loader -->
              <div class="wmnds-loader" role="alert" aria-live="assertive">
                <p class="wmnds-loader__content">Content is loading...</p>
              </div>
              <!-- Autocomplete input box -->
              <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Enter station or postcode" name="Destination" aria-label="Enter station or postcode" type="text" id="to--opened--leave-collapsed--mode-opened" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__when ">
            <div class="wmnds-journey-planner-widget__when--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Leave</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>Now</p>
            </div>
            <div class="wmnds-journey-planner-widget__when--expanded">
              <div class="wmnds-journey-planner-widget__when-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Arrival time
                </button>
              </div>
              <h4>Leave</h4>
              <input type="hidden" name="journeyTimeType" value="Leaving" aria-label="leave" />
              <div class="wmnds-fe-group wmnds-m-b-sm ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="day--opened--leave-collapsed--mode-opened">Day</label>
                  <select class="wmnds-fe-dropdown__select " id="day--opened--leave-collapsed--mode-opened" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
              <div class="wmnds-fe-group wmnds-m-b-md ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="time--opened--leave-collapsed--mode-opened">Time</label>
                  <select class="wmnds-fe-dropdown__select " id="time--opened--leave-collapsed--mode-opened" name="SelectedJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__how  wmnds-is--open">
            <div class="wmnds-journey-planner-widget__how--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>All transport modes</p>
            </div>
            <div class="wmnds-journey-planner-widget__how--expanded">
              <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
              <div class="wmnds-journey-planner-widget__how-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Select all
                </button>
              </div>
              <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-m-t-sm">
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useBus" checked aria-label="bus" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--bus">
                      <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                    </svg>
                    Bus
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTram" checked aria-label="Tram" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--metro">
                      <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                    </svg>
                    Tram
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTrain" checked aria-label="Train" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--train">
                      <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                    </svg>
                    Train
                  </button>
                </div>
                <p class="wmnds-col-1 wmnds-m-b-sm">Or</p>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="walk" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--walk">
                      <use xlink:href="#wmnds-modes-isolated-walk" href="#wmnds-modes-isolated-walk"></use>
                    </svg>
                    Walk
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="cycle" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                    <svg class="wmnds-btn__icon wmnds-btn__icon--left  wmnds-btn__coloured-icon--cycle">
                      <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
                    </svg>
                    Cycle
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__advanced-search">
            <a href="http://journeyplanner.networkwestmidlands.com/" title="Go to mobility and advanced search" target="_self" class="wmnds-link wmnds-m-t--lg">
              Mobility and advanced search
            </a>
          </div>
          <div class="wmnds-journey-planner-widget__submit">
            <button class="wmnds-btn wmnds-m-t-md" type="submit">
              Plan my journey
              <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
              </svg>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Nunjucks markup

{% from "wmnds/components/journey-planner-widget/_journey-planner-widget.njk" import wmndsJourneyPlannerWidget %}

{{
   wmndsJourneyPlannerWidget({
      formTitle: null,
      isOpen: true,
      isHowOpen: false,
      isWhenOpen: false
   })
}}

Nunjucks properties

Name	Type	Description
formTitle	string	Component's title. If empty, form title will be 'Plan your journey' as default.
isOpen	boolean	If true, journey planner widget will be expanded. Defaults to `false`.
isWhenOpen	boolean	If true, journey planner widget area to define when you want to travel will be expanded. Defaults to `false`.
isHowOpen	boolean	If true, journey planner widget area to define how (the mode of travel) do you want to travel will be expanded. Defaults to `false`.

Stop and station pages

What does it do?

Autofills the users travel origin or destination in the journey planner service.
The location is based on the location of the bus stop, train station and tram stop page they are on

When to use it?

On bus stop pages
On train station pages
On tram stop pages

How it works?

The location is based on the location of the bus stop, train station and tram stop page they are on
Selecting ‘From here’ will take users to the journey planner with the ‘From:’ field automatically populated
Selecting ‘To here’ will take users to the journey planner with the ‘To:’ field automatically populated

Plan your journey

From here

To here

HTML markup

<div style="max-width: 288px">
  <div class="wmnds-content-card wmnds-m-b-lg">
    <div class="wmnds-p-md">
      <h2>Plan your journey</h2>
      <div class="wmnds-grid wmnds-grid--spacing-2-md">
        <div class="wmnds-col-1-2">
          <a class="wmnds-btn wmnds-btn--secondary wmnds-col-1 wmnds-text-align-center" href="#/" referrerpolicy="origin" target="_blank" rel="noreferrer">From here</a>
        </div>
        <div class="wmnds-col-1-2">
          <a class="wmnds-btn wmnds-btn--secondary wmnds-col-1 wmnds-text-align-center" href="#/" referrerpolicy="origin" target="_blank" rel="noreferrer">To here</a>
        </div>
      </div>
    </div>
  </div>
</div>

Nunjucks markup

{% from "wmnds/components/journey-planner-widget/_journey-planner-widget.njk" import wmndsJourneyPlannerWidget %}

{{
   wmndsJourneyPlannerWidget({
      formTitle: null,
      isOpen: true,
      isHowOpen: false,
      isWhenOpen: false
   })
}}

Nunjucks properties

Name	Type	Description
formTitle	string	Component's title. If empty, form title will be 'Plan your journey' as default.
isOpen	boolean	If true, journey planner widget will be expanded. Defaults to `false`.
isWhenOpen	boolean	If true, journey planner widget area to define when you want to travel will be expanded. Defaults to `false`.
isHowOpen	boolean	If true, journey planner widget area to define how (the mode of travel) do you want to travel will be expanded. Defaults to `false`.