University of Leeds Design System v1.0.15

Multilink Results Item: With Multiple Messages Actions

Guidance

The @uol-multilink-results-item provides a summary of a person’s details and contains a link to their full profile page. This guidance is for the implementation of one results item, to display multiple items use the @uol-multilink-results-items component.

When to use

Use when a page will only ever display one results item. As an example, an author’s profile on a blog post. If multiple items are intended to be displayed, such as in a group of staff members, then use the @uol-multilink-results-items.

When not to use

Do not use in instances where there will be multiple items to display, use @uol-multilink-results-items for instances where the number of items to be displayed in a group exceeds one.

Developer guidance

Heading Level

heading_level is optional, if it is set it should be set using the correct hierarchy, considering the page’s existing heading structure, otherwise it will default to <h3>. The heading level should be reflect any changes in the overall page heading outline.

example:

'context': {
  'heading_level': 'h3',
  ...

Item

Example:

'context': {
  ...
  'item': {
     ...
  }
}

The following sections detail required and optional parameters which can be added to an item object. A full example including all parameters is provided below.

Name

Required parameter ‘person_name’: Person’s name.

Image

Optional parameter ‘img’: The image should be .jpg format with dimensions 344px x 344px. The image content data should be the relative path to the image location.

URL

Optional parameter ‘url’: Relative or absolute link to the person’s profile page.

Position

Optional parameter ‘position’: The staff member’s position within the organisation.

Lead Paragraph

Optional parameter ‘lead_para’: Optional sentence before specialisms and categories.

Specialisms

Optional parameter ‘specialisms’: An array of objects with each specialism set by the label value. Displayed as comma separated list following a ‘Area of expertise’ or ‘Areas of expertise’ if more than one item.

eg. ‘specialisms’: [ {‘label’: ‘Deafness in childhood and young people (0-25 yrs)’}, {‘label’: ‘Language development’} ]

Categories

Optional parameter ‘additional’: An array of objects to show other title / value pairs. This could display information such as module code or location.

eg. ‘additional’: [ { ‘term’: ‘Category label’, ‘data’: [{‘label’: ‘Category information’}] }, ],

The above example shows this as ‘Category label: Category information’. Further objects added to this array display further title / value pairs.

Email

Optional parameter ‘email’: Person’s email address (will act as an active link to default email) .

Phone

Optional parameter ‘phone’: This should take one of two formats ‘+44(0)113 343 5000’ or ‘0113 343 5000’. Using either of these formats will result in the device being an active link placing a call on an applicable device.

Closing Paragraph

Optional parameter ‘close_para’: Optional sentence before specialisms and categories.

Actions and Messages

Each item can have one or multiple optional “Actions” and or “Messages”.

Actions

Actions are intended to be used to provide interactivity to a results item e.g., “Connect”, “Save”, “Edit” etc.

Each action is rendered as a button and supports all @uol-button configuration options.

NB: Although it is technically possible to render an “icon-only” button, you must not do so in this context.

Messages

Messages are intended to provide post interaction confirmation (e.g. “You messaged this user on [DATE]” ) or status information (e.g. “User last active X days ago”).

Messages are rendered using @uol-status-message

Full example

A full example of an item to display is as follows (this example omits the heading_level) and it will be automatically set as h3:

'context': {
  'item': {
    'person_name': 'Tony Bailey',
    'img': '/placeholders/ph-profile-staff-01.jpg',
    'url': '#',
    'position': 'Associate Professor in Inclusive Education (SEND) with expertise in Deaf Education',
    'lead_para': 'Lead sentence. Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
    'specialisms': [
      {
        'label': 'Deafness in childhood and young people (0-25 yrs)'
      },
      {
        'label': 'Language development'
      }
    ],
    'additional':  [
      {
        'term': 'Category label', 
        'data': [
          {'label': 'Category information'}
        ]
      }
    ],
    'email': 'bailey92@techholic.in',
    'phone': '+44(0)113 343 5000',
    'close_para': 'Closing sentence. Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
    'messages': [
      {
        'text': '<strong>Email sent</strong> 22 November 2022',
        'type': 'success'
      },
      {
        'text': 'Response received',
        'type': 'info'
      }
    ],
    'actions': [
      {
        'id': 'button-unique-id-1',
        'style': 'primary',
        'type': 'button',
        'name': 'contact',
        'content': 'Contact',
      }
    ]
  }

<li class="uol-multilink-results">
  <div class="uol-multilink-results__image-titles">
    {% if item.img %}
      <img class="uol-multilink-results__image" src="{{ item.img }}" alt="Profile picture of {{ item.person_name }}">
    {% endif %}

    {# TODO: remove dependency on id in this file and JS #}
    <div class="uol-multilink-results__alongside-image {% if item.img %}uol-multilink-results__has-image{% endif %}">
      <div class="uol-multilink-results--titles">
        <{{ heading_level if heading_level else 'h3' }} class="uol-multilink-results__name">
          {% if item.url%}
            <a href="{{ item.url }}">{{ item.person_name }}</a>
          {% else %}
            {{ item.person_name }}
          {% endif %}
        </{{ heading_level if heading_level else 'h3' }}>

      </div>
    </div>
  </div>

  {# TODO: remove dependency on id in this file and JS #}
  <div class="uol-multilink-results__below-image">
    {% if item.position %}
      <strong class="uol-multilink-results__position">{{ item.position }}</strong>
    {% endif %}

    <div class="uol-multilink-results--further">
      {% if item.lead_para %}
        <p class="uol-multilink-results__paragraph">{{ item.lead_para }}</p>
      {% endif %}

      {% if item.specialisms.length %}
        {% set expertiseLabel = 'Areas of expertise' if item.specialisms.length > 1 else 'Area of expertise' %}
        {% render '@uol-info-list', {
          'info_list': [
            {
              'term': expertiseLabel,
              'data': item.specialisms
            }
          ]
        } %}
      {% endif %}

      {% render '@uol-info-list', { 'info_list': item.additional } %}

      {% if item.email or item.phone %}
        {% render '@uol-info-list', {
          'info_list_style': 'inline',
          'info_list': [
            {
              'term': 'Email',
              'data': [
                {
                  'type': 'email',
                  'label': item.email
                }
              ]
            },
            {
              'term': 'Phone',
              'data': [
                {
                  'type': 'phone',
                  'label': item.phone
                }
              ]
            }
          ]
        } %}
      {% endif %}

      {% if item.close_para %}
        <p class="uol-multilink-results__paragraph">{{ item.close_para }}</p>
      {% endif %}

    </div>
  </div>
  {% if item.messages or item.actions %}
    <div class="uol-multilink-results__footer">

      {% if item.messages %}
        <div class="uol-multilink-results__footer__messages">
          {% for message in item.messages %}
            {% render '@uol-status-message', message  %}
          {% endfor %}
        </div>
      {% endif %}

      {% if item.actions %}
        <div class="uol-multilink-results__footer__actions">
          {% for action in item.actions %}
            {% render '@uol-button', action %}
          {% endfor %}
        </div>
      {% endif %}

    </div>

  {% endif %}

</li>

{#

  <{{ heading_level if heading_level else 'h3' }} class="uol-multilink-results__name">
    {% if item.url%}
      <a href="{{ item.url }}">{{ item.person_name }}</a>
    {% else %}
      {{ item.person_name }}
    {% endif %}
  </{{ heading_level if heading_level else 'h3' }}>
  {% if item.img %}
    <img class="uol-multilink-results__img" src="{{ item.img }}" alt="Profile picture of {{ item.person_name }}">
  {% endif %}
  <strong class="uol-multilink-results__position">{{ item.position }}</strong>

  {% if item.specialisms.length %}
    {% set expertiseLabel = 'Areas of expertise' if item.specialisms.length > 1 else 'Area of expertise' %}
    {% render '@uol-info-list', {
      'info_list': [
        {
          'term': expertiseLabel,
          'data': item.specialisms
        }
      ]
    } %}
  {% endif %}

  {% if item.email or item.phone %}
    {% render '@uol-info-list', {
      'info_list_style': 'inline',
      'info_list': [
        {
          'term': 'Email',
          'data': [
            {
              'type': 'email',
              'label': item.email
            }
          ]
        },
        {
          'term': 'Phone',
          'data': [
            {
              'type': 'phone',
              'label': item.phone
            }
          ]
        }
      ]
    } %}
  {% endif %}

  {% render '@uol-info-list', { 'info_list': item.additional } %}

  {% if item.messages or item.actions %}
    <div class="uol-multilink-results__footer">

      {% if item.messages %}
        <div class="uol-multilink-results__footer__messages">
          {% for message in item.messages %}
            {% render '@uol-status-message', message  %}
          {% endfor %}
        </div>
      {% endif %}

      {% if item.actions %}
        <div class="uol-multilink-results__footer__actions">
          {% for action in item.actions %}
            {% render '@uol-button', action %}
          {% endfor %}
        </div>
      {% endif %}

    </div>

  {% endif %}
</{{ 'li' if multiple else 'div' }}> #}
 
<li class="uol-multilink-results">
    <div class="uol-multilink-results__image-titles">

        <img class="uol-multilink-results__image" src="/placeholders/ph-profile-staff-01.jpg" alt="Profile picture of Tony Bailey">

        <div class="uol-multilink-results__alongside-image uol-multilink-results__has-image">
            <div class="uol-multilink-results--titles">
                <h3 class="uol-multilink-results__name">

                    <a href="#">Tony Bailey</a>

                </h3>

            </div>
        </div>
    </div>

    <div class="uol-multilink-results__below-image">

        <strong class="uol-multilink-results__position">Associate Professor in Inclusive Education (SEND) with expertise in Deaf Education</strong>

        <div class="uol-multilink-results--further">

            <div class="uol-info-list-container">
                <dl class="uol-info-list ">

                    <div class="uol-info-list__group">
                        <dt class="uol-info-list__term ">Areas of expertise</dt>

                        <dd class="uol-info-list__data ">

                            Deafness in childhood and young people (0-25 yrs)

                        </dd>

                        <dd class="uol-info-list__data ">

                            Language development

                        </dd>

                        <dd class="uol-info-list__data ">

                            Special educational needs and disability

                        </dd>

                        <dd class="uol-info-list__data ">

                            Inclusive education

                        </dd>

                        <dd class="uol-info-list__data ">

                            Classroom practice

                        </dd>

                        <dd class="uol-info-list__data ">

                            Teacher development and CPD

                        </dd>

                    </div>

                </dl>
            </div>

            <div class="uol-info-list-container">
                <dl class="uol-info-list uol-info-list--inline">

                    <div class="uol-info-list__group">
                        <dt class="uol-info-list__term ">Email</dt>

                        <dd class="uol-info-list__data uol-info-list__data--email">

                            <a href="mailto:t.bailey@leeds.ac.uk">t.bailey@leeds.ac.uk</a>

                        </dd>

                    </div>

                    <div class="uol-info-list__group">
                        <dt class="uol-info-list__term ">Phone</dt>

                        <dd class="uol-info-list__data uol-info-list__data--phone">

                            <a href="tel:+44(0)113 343 5000">+44(0)113 343 5000</a>

                        </dd>

                    </div>

                </dl>
            </div>

        </div>
    </div>

    <div class="uol-multilink-results__footer">

        <div class="uol-multilink-results__footer__messages">

            <div class="uol-status-message  uol-status-message--success ">
                <span class="uol-icon  uol-icon--status-success ">
                    <span class="hide-accessible">Success:</span>
                    <strong>Email sent</strong> 22 November 2022
                </span>
            </div>

            <div class="uol-status-message  uol-status-message--info ">
                <span class="uol-icon  uol-icon--status-info ">
                    <span class="hide-accessible">Info:</span>
                    Response received
                </span>
            </div>

            <div class="uol-status-message  uol-status-message--error ">
                <span class="uol-icon  uol-icon--status-error ">
                    <span class="hide-accessible">Error:</span>
                    Something went wrong
                </span>
            </div>

            <div class="uol-status-message  uol-status-message--warning ">
                <span class="uol-icon  uol-icon--status-warning ">
                    <span class="hide-accessible">Warning:</span>
                    This is a warning
                </span>
            </div>

            <div class="uol-status-message  uol-status-message--warning ">
                <span class="uol-icon  uol-icon--status-warning ">
                    <span class="hide-accessible">Warning:</span>
                    This is a warning message with a very long text that will wrap on smaller screens
                </span>
            </div>

        </div>

        <div class="uol-multilink-results__footer__actions">

            <button id="button-unique-id-1" name="contact" class="uol-button uol-button--primary
    " type="button">Contact</button>

            <button id="button-unique-id-2" name="save" class="uol-button uol-button--secondary
    " type="button">Save</button>

            <button id="button-unique-id-3" name="report" class="uol-button uol-button--
    " type="button" disabled>Report</button>

        </div>

    </div>

</li>
  • Content: 
    .uol-multilink-results {
  list-style: none;
  margin-bottom: $spacing-4;
  padding: $spacing-5 $spacing-4;
  border: 1px solid $color-border--light;
  border-radius: 6px;
  background-color: $color-grey--faded;
  font-variant-numeric: lining-nums;
  color: $color-font;
  overflow: auto;

  @include media(">=uol-media-m") {
    padding: $spacing-5 $spacing-4;
  }

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

  .uol-info-list {
    @extend %text-size-paragraph--small;  
    margin: $spacing-2 0 0 0;
  }

}
    .uol-multilink-results__alongside-image {
      max-width: 784px;
    }

    .uol-multilink-results__has-image  {
      margin-top: $spacing-4;
      margin-left: $spacing-4;
      

      @include media(">=uol-media-m") {
        margin-top: 0;
        margin-left: $spacing-4;
      }
      
      @include media(">=uol-media-l") {
        margin-left: $spacing-5;
      }

      @include media(">=uol-media-xl") {
        margin-left: $spacing-6;
      }
    }
  
    .uol-multilink-results__image-titles {
      display: flex;
    }

    .uol-multilink-results__image {
      border-radius: 50%;
      width: 116px;
      height: 116px;
      margin-bottom: $spacing-2;
    
      @include media(">=uol-media-m") {
        width: 156px;
        height: 156px;
      }
    
      @include media(">=uol-media-l") {
        width: 161px;
        height: 161px;
      }
    
      @include media(">=uol-media-xl") {
        width: 179px;
        height: 179px;
      }

      @include media(">=uol-media-xxl") {
        width: 215px;
        height: 215px;
      }
    }

    .uol-multilink-results__name {
      font-size: 1.375rem;
  
      @include media(">=uol-media-m") {
        font-size: 1.75rem;
      }
      font-family: $font-family-serif;
      margin: 0;
  
      a {
        text-decoration: underline;
  
        &:hover {
          text-decoration-color: $color-brand;
        } 
        &:focus-within {
          outline: 3px dotted transparent;
          text-decoration-color: $color-brand--bright;
          background-color: #ffeded;
        }
      }
    }

    .uol-multilink-results__position {
      @extend %text-size-heading-6;

      display: block;
      font-family: $font-family-serif;
      color: $color-brand;
      margin-top: $spacing-2;
    }

    .uol-multilink-results--further {
      margin-bottom: $spacing-2;
    }

    .uol-multilink-results__paragraph {
      @extend %text-size-paragraph--small;
      
      margin: $spacing-2 0 0;
    }

    .uol-status-message:last-child {
      margin-bottom: -#{$spacing-2};
    }

    .uol-info-list--inline {
      .uol-info-list__group:not(:last-child) {
        margin-right: $spacing-3;
        margin-bottom: $spacing-2;
      }

      // to allow for correct gaps for when switches to and from in a row to in a column
      @include media(">=uol-media-m") {
        margin-bottom: -#{$spacing-2} !important;
      }
    }
    
  .uol-multilink-results__footer{
    padding: $spacing-5 0 0;
  
      &:before {  
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: $color-border--light;
      }
  }

    .uol-multilink-results__footer__messages {
      @extend %text-size-paragraph--small;
    
      display: block;
      padding-top: $spacing-5;
    
      .js & svg {
        height: 1.5em;
        width: 1.5em;
        min-width: 1.5em;
        margin-top: 0;
        margin-left: 0;
      }
    
    }
  
    .uol-multilink-results__footer__actions {
      /*
      Convoluted spacing rules,
      sort in PBI 73990
      */
      margin-bottom: -#{$spacing-5};
      padding-top: 24px;

      @include media("<uol-media-m") {
        padding-top: 28px;
      }
    
      .uol-button {
        margin: 0 $spacing-4 $spacing-5 0;
      }
    }
  • URL: /components/raw/uol-multilink-results-item/_multilink-results-item.scss
  • Filesystem Path: src/library/02-components/multilink-results-item/_multilink-results-item.scss
  • Size: 3.8 KB
  • Content: 
    /*
TODO: 
Remove dependency on hardcoded ids
Generate unique ids
*/

export const multilinkResultsItem = () => {

  const multilinkResultsItemGroup = document.querySelectorAll('.uol-multilink-results');

  let count = 0;
  
  
  multilinkResultsItemGroup.forEach( (multilinkResultsItem) => {

    // set unique ids

    // container alongside image
    let alongsideElement = multilinkResultsItem.getElementsByClassName("uol-multilink-results__alongside-image")[0];
    let alongsideElementId = "alongsideImage-" + count;
    alongsideElement.setAttribute("id", alongsideElementId);

    // container below image
    let belowElement = multilinkResultsItem.getElementsByClassName("uol-multilink-results__below-image")[0];
    let belowElementId = "belowImage-" + count;
    belowElement.setAttribute("id", belowElementId);

    // content which switches
    let furtherElement = multilinkResultsItem.getElementsByClassName("uol-multilink-results--further")[0];
    let furtherElementId = "further-" + count;
    furtherElement.setAttribute("id", furtherElementId);

    // area person works in (red subtitle)
    let areaElement = multilinkResultsItem.getElementsByClassName("uol-multilink-results__position")[0];
    let areaElementId = "area-" + count;
    areaElement.setAttribute("id", areaElementId);

    const width =  window.innerWidth;
    let position = "below";
    let areaPosition = "below";

    const windowResize = () => {
      checkResolutionMoveTarget();
    }

    window.addEventListener('resize', windowResize);

    const moveToAlongsideImage = () => {
      position = "alongside";
      
      let fragment = document.createDocumentFragment();
      fragment.appendChild(document.getElementById(furtherElementId));
      document.getElementById(alongsideElementId).appendChild(fragment);
    }

    const moveToBelowImage = () => {
      position = "below";
      let fragment = document.createDocumentFragment();
      fragment.appendChild(document.getElementById(furtherElementId));
      document.getElementById(belowElementId).appendChild(fragment);
    }

    // job title
    const moveAreaToAlongsideImage = () => {
      areaPosition = "alongside";
      
      let fragment = document.createDocumentFragment();
      fragment.appendChild(document.getElementById(areaElementId));
      document.getElementById(alongsideElementId).appendChild(fragment);
    }

    const moveAreaToBelowImage = () => {
      areaPosition = "below";
      let fragment = document.createDocumentFragment();
      fragment.appendChild(document.getElementById(areaElementId));
      document.getElementById(belowElementId).prepend(fragment);
    }
    
    if (width < 768 && areaPosition == "alongside") {
      moveAreaToBelowImage();
    } 

    if (width >= 768 && areaPosition == "below") {
      moveAreaToAlongsideImage();
    } 

    if (width < 768 && position == "alongside") {
        moveToBelowImage();
    } 

    if (width >= 768 && position == "below") {
        moveToAlongsideImage();
    } 

    const checkResolutionMoveTarget = () => {

      const width = window.innerWidth;
      
      if (width < 600 && areaPosition == "alongside") {
        moveAreaToBelowImage();
      } 
      
      if (width >= 600 && areaPosition == "below") {
        moveAreaToAlongsideImage();
      }

      if (width < 768 && position == "alongside") {
        moveToBelowImage();
      } 
      
      if (width >= 768 && position == "below") {
        moveToAlongsideImage();
      } 

      
    }
    checkResolutionMoveTarget();

    count ++;
  })
  
}
  • URL: /components/raw/uol-multilink-results-item/multilink-results-item.module.js
  • Filesystem Path: src/library/02-components/multilink-results-item/multilink-results-item.module.js
  • Size: 3.6 KB 
{
  "heading_level": "h3",
  "item": {
    "url": "#",
    "person_name": "Tony Bailey",
    "position": "Associate Professor in Inclusive Education (SEND) with expertise in Deaf Education",
    "specialisms": [
      {
        "label": "Deafness in childhood and young people (0-25 yrs)"
      },
      {
        "label": "Language development"
      },
      {
        "label": "Special educational needs and disability"
      },
      {
        "label": "Inclusive education"
      },
      {
        "label": "Classroom practice"
      },
      {
        "label": "Teacher development and CPD"
      }
    ],
    "img": "/placeholders/ph-profile-staff-01.jpg",
    "email": "t.bailey@leeds.ac.uk",
    "phone": "+44(0)113 343 5000",
    "messages": [
      {
        "text": "<strong>Email sent</strong> 22 November 2022",
        "type": "success"
      },
      {
        "text": "Response received",
        "type": "info"
      },
      {
        "text": "Something went wrong",
        "type": "error"
      },
      {
        "text": "This is a warning",
        "type": "warning"
      },
      {
        "text": "This is a warning message with a very long text that will wrap on smaller screens",
        "type": "warning"
      }
    ],
    "actions": [
      {
        "id": "button-unique-id-1",
        "style": "primary",
        "type": "button",
        "name": "contact",
        "content": "Contact"
      },
      {
        "id": "button-unique-id-2",
        "style": "secondary",
        "type": "button",
        "name": "save",
        "content": "Save"
      },
      {
        "id": "button-unique-id-3",
        "type": "button",
        "name": "report",
        "content": "Report",
        "disabled": true
      }
    ]
  }
}