University of Leeds Design System v1.0.16

Task Banner

Task banner overview

The task banner is a bespoke component built initially for the UoL homepage. Currently this is constrained to the below sections with limited flexibility, although future enhancements are likely to make this component more generic.

Task banner elements

The task banner has:

  • One key task (left hand section on desktop)
  • Course search form including two radio buttons (undergraduate and masters)
  • Two content blocks for each of undergraduate and masters, these are swapped out for each other depending on the radio button selection

Configuration requirements

The form component used on the existing UoL home page and course page is utilised. This is configurable via config parameters, but in order to make this component work the configuration must be as follows:

  • Undergraduate radio button to be selected by default
  • Undergraduate block 1 to have the id ‘undergraduate1’
  • Undergraduate block 2 to have the id ‘undergraduate2’
  • Masters block 1 to have the id ‘masters1’
  • Masters block 3 to have the id ‘masters2’

Embedded components

The @uol-form is used to create the search form.

The @uol-content-block is used for the key task and the above mentioned content undergraduate and masters blocks.

Config example

The form configuration is expected to remain static. The config for the content blocks needs to be configurable.

'context': {
    "form": {
      "heading_level": "h2",
      "button_inline": true,
      "action": "/",
      "title": "Find your course",
      "button": {
        "content": "Search",
        "type": "submit",
        "style": "primary"
      },
      
      "form_group": {
        "inline_fields": true,
        "fields": [
          {
            "type": "radio",
            "heading_level": "h3",
            "legend": "Course type",
            "group_label_id": "radio-group-id",
            "options": [{
                "id": "radio-undergraduate",
                "name": "course-type",
                "value": "undergraduate",
                "label": "Undergraduate",
                "checked": true
              },
              {
                "id": "radio-masters",
                "name": "course-type",
                "value": "masters",
                "label": "Masters"
              }
            ]
          }
        ],
      },
      "additional_info_after": "<p><a href=\"#\">Course A-Z</a><a href=\"#\">Browse by subject</a></p>",
      "fields": [
        {
          "type": "search",
          "id": "inputId2",
          "name": "searchCourses",
          "label": "Search courses",
          "aria-invalid": "false",
          "autocomplete": "off",
          "has_icon": true
        }
      ]
    },
    "key_task": {
      'id': "block1",
      'heading': {
        'level': '2',
        'title': 'Shape the world you want'
      },
      'copy': 'Starting with your experiences and the University of Leeds and going far beyond, to the industry, career and society you’re equipped to thrive in',
      'button': {
        'style': 'default',
        'type': 'submit',
        'content': 'Hear from our students'
      },
    },
    "undergraduate_block_1": {
      'id': "undergraduate1",
      'heading': {
        'level': '3',
        'title': 'Open days and campus visits'
      },
      'copy': 'Get a feel for our campus and university life at Leeds',
      'arrowLink': {
        'url': '#',
        'title': 'Upcoming open days'
      },
    },
    "undergraduate_block_2": {
      'id': "undergraduate2",
      'heading': {
        'level': '3',
        'title': 'Help with your application'
      },
      'copy': 'All you need to know in our step-by-step guide to applying',
      'arrowLink': {
        'url': '#',
        'title': 'Application information'
      },
    },
    "masters_block_1": {
      'id': "masters1",
      'heading': {
        'level': '3',
        'title': 'Postgraduate discovery days'
      },
      'copy': 'Ask our experts anything about masters study.',
      'arrowLink': {
        'url': '#',
        'title': 'Upcoming fairs'
      },
    },
    "masters_block_2": {
      'id': "masters2",
      'heading': {
        'level': '3',
        'title': 'Funding and scholarships'
      },
      'copy': 'Learn about the different ways we can help you fund your studies',
      'arrowLink': {
        'url': '#',
        'title': 'Funding options'
      },
    }
  }
<section class="uol-task-banner" aria-label="task banner">
  <div class="uol-task-banner__outer">
    <div class="uol-task-banner__inner">
      <div class= "uol-task-banner__key-task">
        {% render '@uol-content-block', key_task %}
      </div>
      <div class="uol-task-banner__course-section">
        <div class="uol-task-banner__course-search">
          {% render '@uol-form', { form: form } %}
        </div>
        <div class="uol-task-banner__course-cards">
          {% render '@uol-content-block', undergraduate_block_1 %}
          {% render '@uol-content-block', undergraduate_block_2 %}
          {% render '@uol-content-block', masters_block_1 %}
          {% render '@uol-content-block', masters_block_2 %}
        </div>
      </div>
    </div>
  </div>
</section>
 
<section class="uol-task-banner" aria-label="task banner">
    <div class="uol-task-banner__outer">
        <div class="uol-task-banner__inner">
            <div class="uol-task-banner__key-task">
                <div id="block1" class="uol-content-block">

                    <h2 class="uol-content-block__heading">Shape the world you want</h2>

                    <p class="uol-content-block__copy">Starting with your experiences and the University of Leeds and going far beyond, to the industry, career and society you’re equipped to thrive in</p>

                    <button class="uol-button uol-button--default
    " type="submit">Hear from our students</button>

                </div>
            </div>
            <div class="uol-task-banner__course-section">
                <div class="uol-task-banner__course-search">

                    <div class="uol-form__container   ">

                        <div class="uol-form__inner-wrapper">

                            <h2 class="uol-form__title">Find your course</h2>

                            <form class="uol-form" action="/" role=search>

                                <div class="uol-form__input-group  uol-form__input-group--inline">

                                    <div class="uol-form__input-container 
">

                                        <div role="radiogroup" aria-labelledby="radio-group-id" class="uol-form__custom-fieldset">

                                            <span id="radio-group-id" class="uol-form__custom__legend">Course type</span>

                                            <div class="uol-form__inputs-wrapper ">

                                                <div class="uol-form__input--radio-wrapper">
                                                    <input class="uol-form__input--radio" type="radio" id="radio-undergraduate" name="course-type" value="undergraduate" checked>
                                                    <label class="uol-form__input--radio__label" for="radio-undergraduate">Undergraduate</label>
                                                    <span class="uol-form__input--custom-radio" hidden>
                                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                                            <circle cx="12" cy="12" r="12" />
                                                        </svg>
                                                    </span>
                                                </div>

                                                <div class="uol-form__input--radio-wrapper">
                                                    <input class="uol-form__input--radio" type="radio" id="radio-masters" name="course-type" value="masters">
                                                    <label class="uol-form__input--radio__label" for="radio-masters">Masters</label>
                                                    <span class="uol-form__input--custom-radio" hidden>
                                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                                            <circle cx="12" cy="12" r="12" />
                                                        </svg>
                                                    </span>
                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="uol-form--button-inline">

                                    <div class="uol-form__inputs-wrapper">

                                        <div class="uol-form__input-container 
">

                                            <label class="uol-form__input-label" for="inputId2">
                                                <span class="uol-form__input-label__text">Search courses</span>

                                            </label>

                                            <div class="uol-form__input-wrapper
               uol-form__input-wrapper--search
               uol-form__input-wrapper--with-icon " data-field-invalid=false>

                                                <!--  -->

                                                <input class="uol-form__input  uol-form__input--search" type="search" id="inputId2" name="searchCourses" value="" autocomplete="off">

                                                <!--  -->
                                            </div>

                                        </div>

                                    </div>

                                    <div class="uol-form__button-wrapper">
                                        <button class="uol-button uol-button--default
    " type="submit">Search</button>

                                    </div>

                                </div>

                            </form>

                            <div class="uol-rich-text">
                                <div class="uol-form__additional-content uol-form__additional-content--after">
                                    <p><a href="#">Course A-Z</a><a href="#">Browse by subject</a></p>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
                <div class="uol-task-banner__course-cards">
                    <div id="undergraduate1" class="uol-content-block">

                        <h3 class="uol-content-block__heading">Open days and campus visits</h3>

                        <p class="uol-content-block__copy">Get a feel for our campus and university life at Leeds</p>

                        <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Upcoming open days</a></p>

                    </div>
                    <div id="undergraduate2" class="uol-content-block">

                        <h3 class="uol-content-block__heading">Help with your application</h3>

                        <p class="uol-content-block__copy">All you need to know in our step-by-step guide to applying</p>

                        <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Application information</a></p>

                    </div>
                    <div id="masters1" class="uol-content-block">

                        <h3 class="uol-content-block__heading">Postgraduate discovery days</h3>

                        <p class="uol-content-block__copy">Ask our experts anything about masters study.</p>

                        <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Upcoming fairs</a></p>

                    </div>
                    <div id="masters2" class="uol-content-block">

                        <h3 class="uol-content-block__heading">Funding and scholarships</h3>

                        <p class="uol-content-block__copy">Learn about the different ways we can help you fund your studies</p>

                        <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Funding options</a></p>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
  • Content: 
    $keyTaskBlockColour: $color-brand-teal;
$courseCardColour: $color-brand-cream;
$courseSearchColour: #fff;

// heights for when JS disabled, JS calculates height based on content
.uol-task-banner {
  
  @include media(">=uol-media-l") {
    height: 685px;
  }

  @include media(">=uol-media-xl") {
    height: 647px;
  }
  
  &__outer {
    width: 100%;
    background: $keyTaskBlockColour;
    display: flex;
  }

  &__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    max-width: 1660px;
    margin: 0 auto;
    padding: 0;
    

    @include media(">=uol-media-l") {
      flex-direction: row;
      height: 551px;
    }

    @include media(">=uol-media-xl") {
      flex-direction: row;
      height: 532px;
    }
  }

  &__key-task {
    color: $color-font--dark;
    position: relative;
    width: calc(100% - #{$spacing-6});
    padding: $spacing-6 $spacing-4;

    @include media(">=uol-media-l") {
      width: calc((100% - #{$spacing-5}) / 12 * 4 - #{$spacing-7});
      padding: 0 $spacing-6;
      display: flex;
      align-items: center;
    }

    @include media(">=uol-media-xl") {
      width: calc((100% - #{$spacing-6}) / 12 * 4 - #{$spacing-8});
    }

    .uol-content-block__heading {
      @extend .uol-typography-heading-2;
    }

    * {
      max-width: 470px;

      @include media(">=uol-media-m") {
        max-width: 610px;
      }
    }

    .uol-content-block button {
      margin-bottom: 0;
    }
  }

  &__course-section {
    position: relative;
    top: 0;
    margin: 0 calc(#{$spacing-4} * -2) calc(#{$spacing-4} * -2);
    width: 100%;

    @include media(">=uol-media-l") {
      position: absolute;
      top: 0;
      margin: 0;
      left: calc((100% - #{$spacing-5}) / 12 * 4 + #{$spacing-5});
      width: calc((100% - #{$spacing-5}) / 12 * 8 - #{$spacing-5});
      padding-top: $spacing-6;
  
      .uol-content-block {
        padding: $spacing-6 $spacing-6 $spacing-4 $spacing-6;
        width: calc(50% - #{$spacing-8});
      }
    }

    @include media(">=uol-media-xl") {
      left: calc((100% - #{$spacing-6}) / 12 * 4 + #{$spacing-6});
      width: calc((100% - #{$spacing-6}) / 12 * 8 - #{$spacing-6});
    }

    .uol-content-block__heading {
      @extend .uol-typography-heading-4;
    }
    
    .uol-form__container {
      border: none;
      margin-bottom: 0;
    }

    .uol-form__inner-wrapper {
      padding: $spacing-6 $spacing-4;
      background: $courseSearchColour;

      @include media(">=uol-media-l") {
        padding: $spacing-6;
      }
    }

    .uol-form__input-container {
      margin-bottom: 0;
    }

    .uol-form__title {
      @extend .uol-typography-heading-3;
    }

    .uol-form__additional-content a {
      margin-right: $spacing-4;
      font-weight: 600;
    }

    .uol-arrow-link {
      font-weight: 600;

      svg {
        fill: $color-black--dark;
      }
    }

    .uol-form__custom-fieldset {
      margin-bottom: 0;
      
      .uol-form__input--radio-wrapper {
        margin-right: $spacing-4;
      }
      .uol-form__inputs-wrapper {
        display: flex;
        flex-direction: column;

        @include media(">=uol-media-xs") {
          flex-direction: row;
        }
      }

      .uol-form__input--radio:checked~.uol-form__input--custom-radio svg {
        fill: $color-black--dark;
      }

      .uol-form__input--radio:checked~.uol-form__input--custom-radio {
        border-color: $color-black--dark;
        box-shadow: inset 0 0 0 1px $color-black--dark;
      }

      .uol-form__input--custom-radio {
        border: 2px solid $color-black--dark;
      }
    }
  }
        
  &__course-cards {
    @extend .uol-typography-heading-4;

    background: $courseCardColour;
    display: flex;
    flex-direction: column;

    @include media(">=uol-media-m") {
      flex-direction: row;
  
      .uol-content-block {
        width: calc(50% - #{$spacing-6});
      }
    } 
          
    .uol-content-block {
      // bottom padding 16px not 32px as last item has margin of 16px
      padding: $spacing-6 $spacing-4 $spacing-4 $spacing-4;

      @include media(">=uol-media-l") {
        padding: $spacing-6 $spacing-6 $spacing-4 $spacing-6;
      }
    }
  }
}
  • URL: /components/raw/uol-task-banner/_task-banner.scss
  • Filesystem Path: src/library/02-components/task-banner/_task-banner.scss
  • Size: 4.3 KB
  • Content: 
    export const uolTaskBanner = () => {
  const taskBanner = document.querySelectorAll('.uol-task-banner');

  taskBanner.forEach( ( taskBanner) => {
    /*
    making radios change which course cards show
    need to find a way to refactor and not use ids
    to do in second stage of development
    */
    let undergraduate1 = document.getElementById("undergraduate1");
    let undergraduate2 = document.getElementById("undergraduate2");
    let masters1 = document.getElementById("masters1");
    let masters2 = document.getElementById("masters2");

    undergraduate1.style.display = "block";
    undergraduate2.style.display = "block";
    masters1.style.display = "none";
    masters2.style.display = "none";

    const radios = document.getElementsByClassName("uol-form__input--radio");

    const undergraduateRadio = radios[0];
    undergraduateRadio.addEventListener("click", function() {
      undergraduate1.style.display = "block";
      undergraduate2.style.display = "block";
      masters1.style.display = "none";
      masters2.style.display = "none";
    });

    const postgraduateRadio = radios[1];
    postgraduateRadio.addEventListener("click", function() {
      undergraduate1.style.display = "none";
      undergraduate2.style.display = "none";
      masters1.style.display = "block";
      masters2.style.display = "block";
    });

    /* positioning
    to ensure coloured bar centralised with regards to ug/pg cards
    this involves getting the rendered size of right hand side content to determine bar size
    only applies above 1024px when two column layout applies
    */
    const courseCardsElement = document.getElementsByClassName("uol-task-banner__course-cards")[0];
    const taskBannerOuter = document.getElementsByClassName("uol-task-banner__outer")[0];
    const keyTaskBlock = document.getElementsByClassName("uol-task-banner__key-task")[0];
    const courseSection = document.getElementsByClassName("uol-task-banner__course-section")[0];
    
    window.onresize = resizedWindow;

    resizedWindow();

    function resizedWindow() {
      
      if (window.innerWidth >= 1024) {
        // console.log(window.innerWidth);
        
        let keyTaskBlockHeightMin =  keyTaskBlock.offsetHeight;

        // take off half the height of the cards size to ensure centre position
        let backgroundBarHeightValue = courseSection.offsetHeight - (courseCardsElement.offsetHeight / 2); 
        
        // when lots of left hand side content, want the content area to grow and override the above
        if (keyTaskBlockHeightMin > backgroundBarHeightValue) {
          backgroundBarHeightValue = keyTaskBlockHeightMin;
        }
  
        backgroundBarHeightValue = (keyTaskBlockHeightMin > backgroundBarHeightValue) ?
          keyTaskBlockHeightMin :
          backgroundBarHeightValue;
  
        let backgroundBarHeight = backgroundBarHeightValue + "px";
        taskBannerOuter.style.height = backgroundBarHeight;
        taskBanner.style.height = courseSection.offsetHeight +  "px";
      } else {
        let keyTaskHeight = keyTaskBlock.offsetHeight;
        let courseSectionHeight = courseSection.offsetHeight;
        let totalHeight = keyTaskHeight + courseSectionHeight;
        let totalHeightPx = totalHeight +  "px";
        console.log("small " + window.innerWidth);
        taskBanner.style.height = totalHeightPx;
      }
    }
  }); 
}
  • URL: /components/raw/uol-task-banner/task-banner.module.js
  • Filesystem Path: src/library/02-components/task-banner/task-banner.module.js
  • Size: 3.4 KB 
{
  "form": {
    "heading_level": "h2",
    "button_inline": true,
    "action": "/",
    "title": "Find your course",
    "button": {
      "content": "Search",
      "type": "submit",
      "style": "default"
    },
    "form_group": {
      "inline_fields": true,
      "fields": [
        {
          "type": "radio",
          "heading_level": "h3",
          "legend": "Course type",
          "group_label_id": "radio-group-id",
          "options": [
            {
              "id": "radio-undergraduate",
              "name": "course-type",
              "value": "undergraduate",
              "label": "Undergraduate",
              "checked": true
            },
            {
              "id": "radio-masters",
              "name": "course-type",
              "value": "masters",
              "label": "Masters"
            }
          ]
        }
      ]
    },
    "additional_info_after": "<p><a href=\"#\">Course A-Z</a><a href=\"#\">Browse by subject</a></p>",
    "fields": [
      {
        "type": "search",
        "id": "inputId2",
        "name": "searchCourses",
        "label": "Search courses",
        "aria-invalid": "false",
        "autocomplete": "off",
        "has_icon": true
      }
    ]
  },
  "key_task": {
    "id": "block1",
    "heading": {
      "level": "2",
      "title": "Shape the world you want"
    },
    "copy": "Starting with your experiences and the University of Leeds and going far beyond, to the industry, career and society you’re equipped to thrive in",
    "button": {
      "style": "default",
      "type": "submit",
      "content": "Hear from our students"
    }
  },
  "undergraduate_block_1": {
    "id": "undergraduate1",
    "heading": {
      "level": "3",
      "title": "Open days and campus visits"
    },
    "copy": "Get a feel for our campus and university life at Leeds",
    "arrowLink": {
      "url": "#",
      "title": "Upcoming open days"
    }
  },
  "undergraduate_block_2": {
    "id": "undergraduate2",
    "heading": {
      "level": "3",
      "title": "Help with your application"
    },
    "copy": "All you need to know in our step-by-step guide to applying",
    "arrowLink": {
      "url": "#",
      "title": "Application information"
    }
  },
  "masters_block_1": {
    "id": "masters1",
    "heading": {
      "level": "3",
      "title": "Postgraduate discovery days"
    },
    "copy": "Ask our experts anything about masters study.",
    "arrowLink": {
      "url": "#",
      "title": "Upcoming fairs"
    }
  },
  "masters_block_2": {
    "id": "masters2",
    "heading": {
      "level": "3",
      "title": "Funding and scholarships"
    },
    "copy": "Learn about the different ways we can help you fund your studies",
    "arrowLink": {
      "url": "#",
      "title": "Funding options"
    }
  }
}