Merge branch '1.0.x' into prod/1.0.x

src/patterns/01-core/elements/_option.scss

@@ -2,11 +2,9 @@
 // Options element styles.
 
 :where(option) {
-  font-family: var(--font-systemmedium) !important;
+  font-family: var(--font-systemmedium);
   font-size: var(--font-size-00);
   letter-spacing: inherit;
-  margin-left: var(--size-05);
-  padding-left: var(--size-105);
 }
 
 :where(optgroup) {

src/patterns/01-core/elements/_select.scss

@@ -4,12 +4,15 @@
 @use '../../01-core' as *;
 
 :where(select) {
-  @include svg-background(select-arrows);
+  &:not([multiple]){
+    @include svg-background(select-arrows);
+    background-color: var(--gray-1);
+    background-position: right 10px center; // LTR
+    background-repeat: no-repeat;
+    background-size: 20px;
+    padding-right: var(--size-4); // LTR
+  }
   appearance: none;
-  background-color: var(--gray-1);
-  background-position: right 10px center; // LTR
-  background-repeat: no-repeat;
-  background-size: 20px;
   border: var(--size-xs) solid  var(--gray-3);
   border-radius: var(--radius-1);
   color: inherit;
@@ -18,8 +21,8 @@
   font-size: inherit;
   letter-spacing: inherit;
   padding-block: .75ch;
+  padding-right: var(--size-105); // LTR
   padding-inline: 1.25ch 0;
-  padding-right: var(--size-4); // LTR
   touch-action: manipulation;
   width: 100%;
   &:-moz-focusring {

src/patterns/01-core/elements/_textarea.scss

@@ -12,7 +12,7 @@
   letter-spacing: inherit;
   overflow: auto;
   padding-block: var(--size-1);
-  padding-inline: var(--size-2);
+  padding-inline: var(--size-105);
   resize: block;
   touch-action: manipulation;
   &:focus {

src/patterns/03-layouts/_index.scss

@@ -8,6 +8,7 @@
 @forward 'layout/layout-base';
 @forward 'media/media';
 @forward 'node/node';
+@forward 'ofis/ofis';
 @forward 'region/region';
 @forward 'sidebar/sidebar';
 @forward 'site-container/site-container';

src/patterns/03-layouts/ofis/_ofis.scss

+.ofis-jobtitle {
+  font-size: 1.4rem;
+}
+.ofis-header {
+  display: flex;
+  gap: 1rem;
+  padding-top: 1rem;
+
+  .ofis-picture {
+    max-width: 144px;
+    width: auto;
+  }
+}

src/patterns/03-layouts/ofis/ofis.md

+---
+el: .l-ofis
+title: OFIS Layout
+---
+
+__Variables:__
+* ofis_data: [array] OFIS API response array

src/patterns/03-layouts/ofis/ofis.twig

+<section class="layout layout-ofis">
+  <div property="schema:jobTitle" class="ofis-jobtitle">{{ ofis_data.title }}</div>
+  <div class="ofis-header">
+    {% if ofis_data.picture %}
+      <div class="ofis-picture">
+        <img alt="{{ ofis_data.name }}" src="{{ ofis_data.picture }}">
+      </div>
+    {% endif %}
+    <div>
+      <h2>Contact information</h2>
+      {% if ofis_data.personal.email %}
+        <div>Email: <a href="mailto:{{ ofis_data.personal.email }}">{{ ofis_data.personal.email }}</a></div>
+      {% endif %}
+      {% if ofis_data.personal.phones %}
+        <div>Phone: {{ ofis_data.personal.phones }}</div>
+      {% endif %}
+      {% if ofis_data.personal.offices %}
+        <div>Location: {{ ofis_data.personal.offices }}</div>
+      {% endif %}
+      {% if ofis_data.personal.fax %}
+        <div>Fax: {{ ofis_data.personal.fax }}</div>
+      {% endif %}
+    </div>
+  </div>
+  {% if ofis_data.personal.webpages_formatted %}
+    <h2>Website</h2>
+    {% for ws in ofis_data.personal.webpages_formatted %}
+      {{ ws | raw }}<br/>
+    {% endfor %}
+  {% endif %}
+  {% if ofis_data.biography %}
+    <h2>Biography summary</h2>
+    <p>{{ ofis_data.biography | raw }}</p>
+  {% endif %}
+  {% if ofis_data.personal.expertise_keywords %}
+    <h2>Research interests</h2>
+    <ul>
+      {% for keyword in ofis_data.personal.expertise_keywords %}
+        <li>{{ keyword }}</li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+  {% if ofis_data.education %}
+    <h2>Education</h2>
+    <ul>
+      {% for degree in ofis_data.education %}
+        <li>
+          {% if degree.degree_yr %}
+            {{ degree.degree_yr }},
+          {% endif %}
+          {% if degree.degree_name %}
+            {{ degree.degree_name }},
+          {% endif %}
+          {% if degree.name_of_discipline %}
+            {{ degree.name_of_discipline }},
+          {% endif %}
+          {% if degree.institution %}
+            {{ degree.institution }}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+  {% if ofis_data.courses %}
+    <h2>Courses<a href="#disclaimer" id="courses" aria-label="note">*</a></h2>
+    <ul>
+      {% for course in ofis_data.courses %}
+        <li>{{ course.subject }} {{ course.num }} - {{ course.title | raw }}</li>
+      {% endfor %}
+    </ul>
+    <p id="disclaimer"><small><a href="#courses" aria-label="back">*</a> Only courses taught in the past 5 years are displayed.</small></p>
+  {% endif %}
+  {% if ofis_data.contribution %}
+    <h2>Selected/recent publications</h2>
+    <ul>
+      {% for pub in ofis_data.contribution %}
+        <li>{{ pub.value }}<br/>{{ pub.url | raw }}</li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+  {% if ofis_data.news %}
+    <h2>In the news</h2>
+    <ul>
+      {% for entry in ofis_data.news %}
+        {% if entry.article_title %}
+          <li><a href="{{ entry.url }}">{{ entry.article_title }}</a></li>
+        {% else %}
+          <li><a href="{{ entry.url }}">{{ entry.url }}</a></li>
+        {% endif %}
+      {% endfor %}
+    </ul>
+  {% endif %}
+  {% if ofis_data.personal.accepting_grad_students is defined %}
+    <h2>Graduate studies</h2>
+    <ul>
+      {% if ofis_data.personal.accepting_grad_students %}
+        <li>Currently considering applications from graduate students. A completed online application is
+          required
+          for admission; <a
+            href="https://uwaterloo.ca/graduate-studies-postdoctoral-affairs/future-students/applying-graduate-school/before-you-apply">
+            start the application process now.</a>
+        </li>
+      {% else %}
+        <li>Not currently accepting applications for graduate students</li>
+      {% endif %}
+      {% if ofis_data.personal.adds_status %}
+        <li>Has <a href="https://uwaterloo.ca/engineering/approved-doctoral-dissertation-supervisor-status">Approved
+            Doctoral Dissertation Supervisor</a> (ADDS) status
+        </li>
+      {% endif %}
+    </ul>
+  {% endif %}
+</section>

src/patterns/03-layouts/ofis/ofis.yml

+---
+ofis_data:
+#  Next 5 fields are dynamic, modified by the controller.
+  title: 'Jane Doe'
+  faculty_title: 'Dean, Faculty of Engineering / Professor, Mechanical and Mechatronics Engineering'
+  name: 'Jane Doe'
+  picture: '../../../source/images/ofis/ofis_person.png'
+  biography: 'Jane Doe, PhD, PEng is currently Dean of the Faculty of Engineering at the University of Waterloo and is the ninth dean since the Faculty was founded in 1957. She was previously Dean of the College of Engineering and Physical Sciences at the University of Guelph (2017 to 2020).</p><p>Prior to her time in Guelph, Wells was a professor of mechanical and mechatronics engineering at Waterloo for 10 years. She received awards for graduate supervision from both the Faculty and the University in 2017.</p><p>An accomplished materials engineer, Wells also served as the Associate Dean of Outreach for Waterloo Engineering between 2008 and 2017, and chaired its Women in Engineering committee for many years. She chaired the Ontario Network of Women in Engineering from 2013 to 2018.</p><p>Wells began her academic career as a professor in materials engineering at the University of British Columbia from 1996 to 2007, and has worked in the steel industry in Canada and internationally.</p><p>The co-author of two books including one on Canadian women innovators and the second on Canadian women in materials, her research focuses on the relationship between processing, structure and properties for advanced metallic alloys used in the transportation sector.</p><p>Wells is not currently accepting applications to supervise new graduate students.'
+  personal:
+    last_name: 'Jane'
+    first_name: 'Doe'
+    middle_name: ''
+    preferred_name: ''
+    home_dept: 'Mechanical & Mechatronics Engineering'
+    group_type: 'FAC'
+    rank: 'Adjunct Professor'
+    title: 'Dean of Engineering||Dean, Engineering'
+    userid: 'engdean'
+    accepting_grad_students: false
+    adds_status: false
+    offices: 'E7 1234, E5 2345'
+    phones: '519-888-1234 x12345, 519-888-1234 x23456'
+    fax: '519-888-4321'
+    research_interests: 'Main research interests are in text information retrieval (IR), concerned with the organization and access to unstructured textual information. My first stream of research deals with developing new methods of retrieving documents based on statistical and linguistic text processing techniques.'
+    brief_research_interests: 'Information retrieval; natural language processing; information extraction; artificial intelligence; machine learning'
+    bio: 'Jane Doe, PhD, PEng is currently Dean of the Faculty of Engineering at the University of Waterloo and is the ninth dean since the Faculty was founded in 1957. She was previously Dean of the College of Engineering and Physical Sciences at the University of Guelph (2017 to 2020).\r\n\r\nPrior to her time in Guelph, Wells was a professor of mechanical and mechatronics engineering at Waterloo for 10 years. She received awards for graduate supervision from both the Faculty and the University in 2017.\r\n\r\nAn accomplished materials engineer, Wells also served as the Associate Dean of Outreach for Waterloo Engineering between 2008 and 2017, and chaired its Women in Engineering committee for many years. She chaired the Ontario Network of Women in Engineering from 2013 to 2018.\r\n\r\nWells began her academic career as a professor in materials engineering at the University of British Columbia from 1996 to 2007, and has worked in the steel industry in Canada and internationally.\r\n\r\nThe co-author of two books including one on Canadian women innovators and the second on Canadian women in materials, her research focuses on the relationship between processing, structure and properties for advanced metallic alloys used in the transportation sector.\r\n\r\nWells is not currently accepting applications to supervise new graduate students.'
+    picture: 'janedoe.png'
+    profile_job_title: 'Dean, Faculty of Engineering / Professor, Mechanical and Mechatronics Engineering'
+    institution: 'McGill University'
+    degree_name: "Bachelor's"
+    expertise_keywords:
+      - "Process modelling"
+      - "Hot deformation of metallic materials"
+      - "Casting of light metals"
+      - "Boiling water heat transfer"
+      - "Microstructure/Processing Models"
+      - "Automotive"
+      - "Digital Factories"
+      - "Lightweight Materials"
+      - "Structural Crashworthiness"
+      - "Additive Manufacturing"
+    webpages:
+      - '[Jane Doe] (https://uwaterloo.ca)'
+    profile_phones: ''
+    webpages_formatted:
+      - '<a href="https://uwaterloo.ca">Jane Doe</a>'
+    email: 'engdean@uwaterloo.ca'
+  research_interests:
+    - sresearch_interest: 'Information retrieval; natural language processing; information extraction; artificial intelligence; machine learning'
+  courses:
+    - subject: 'ME'
+      num: 340
+      title: 'Manufacturing Processes<ul><li>Taught in 2016, 2017</li></ul>'
+    - subject: 'ME'
+      num: '738'
+      title: 'Special Topics in Materials<ul><li>Taught in 2017</li></ul>'
+  news:
+    - article_title: 'Honouring the December 6 victims'
+      url: 'https://uwaterloo.ca/news/engineering/honouring-december-6-victims'
+    - article_title: 'December 6 attacker could not hold women back'
+      url: 'https://uwaterloo.ca/news/engineering/december-6-attacker-could-not-hold-women-back'
+    - article_title: 'New dean named for Waterloo Engineering'
+      url: 'https://uwaterloo.ca/stories/eng-news-new-dean-named-waterloo-engineering'
+    - article_title: "Engineers are 'hidden heroes' in COVID-19 battle"
+      url: 'https://uwaterloo.ca/stories/engineering/engineers-are-hidden-heroes-covid-19-battle'
+  contribution:
+    - type: 'Refereed Journal Paper'
+      value: 'Wei, Guo-bing and Peng, Xiao-dong and Hu, Fa-ping and Hadadzadeh, Amir and Yan, YANG and Xie, Wei-dong and Wells, Mary A, Deformation behavior and constitutive model for dual-phase Mg--Li alloy at elevated temperatures, Transactions of Nonferrous Metals Society of China, 26(2), 2016, 508 - 518'
+    - type: 'Refereed Journal Paper'
+      value: 'Wei, Guobing and Mahmoodkhani, Yahya and Peng, Xiaodong and Hadadzadeh, Amir and Xu, Tiancai and Liu, Junwei and Xie, Weidong and Wells, Mary A, Microstructure evolution and simulation study of a duplex Mg--Li alloy during Double Change Channel Angular Pressing, Materials & Design, 90, 2016, 266 - 275'
+    - type: 'Refereed Journal Paper'
+      value: 'Mahmoodkhani, Yahya and Wells, Mary A, Co-extrusion process to produce Al--Mg eutectic clad magnesium products at elevated temperatures, Journal of Materials Processing Technology, 232, 2016, 175 - 183'
+    - type: 'Refereed Journal Paper'
+      value: 'Hadadzadeh, Amir and Wells, Mary A and Javaid, Amjad, Warm and Hot Deformation Behavior of As-Cast ZEK100 Magnesium Alloy, Experimental Mechanics, 56(2), 2016, 259 - 271'
+    - type: 'Refereed Journal Paper'
+      value: 'Di Ciano, Massimo and Weckman, DC and Wells, MA, Development of an Analog System to Simulate Interface Formation During Fusion™ Casting, Metallurgical and Materials Transactions B, 47(2), 2016, 905 - 919'
+  education:
+    - institution: 'University of British Columbia'
+      country: 'Canada'
+      degree_yr: '1996'
+      degree_mon_nbr: '6'
+      name_of_discipline: 'Metals and Materials Engineering'
+      degree_name: 'Doctorate'
+    - institution: 'McGill University'
+      country: 'Canada'
+      degree_yr: '1987'
+      degree_mon_nbr: '6'
+      name_of_discipline: 'Metallurgical Engineering'
+      degree_name: "Bachelor's"

src/patterns/04-components/exp_col_block/_exp_col_block.scss

@@ -20,6 +20,7 @@
               background: var(--gray-2);
               color: var(--gray-6);
             }
+
             &:hover,
             &:focus {
               outline: none;
@@ -35,10 +36,12 @@
               }
             }
           }
+
           .uw-details{
             .details__summary {
               @include svg-background(mobile-arrow-down);
               background-color: var(--gray-2);
+
               h2,
               h3,
               h4,
@@ -46,6 +49,7 @@
               h6 {
                 color: var(--gray-6);
               }
+
               &:hover,
               &:focus {
                 @include svg-background(mobile-arrow-down-w);
@@ -59,6 +63,7 @@
                 }
               }
             }
+
             &[open] {
               > .details__summary {
                 @include svg-background(mobile-arrow-up);
@@ -70,6 +75,7 @@
                 h6 {
                   color: var(--gray-6);
                 }
+
                 &:focus {
                   @include svg-background(mobile-arrow-up-w);
                   background-color: var(--gray-6);
@@ -101,9 +107,9 @@
     }
     // Else run the loop on the faculties.
     @else {
-      .uw-exp-col{
-        &:not(.contact){
-          .uw-exp-col__button{
+      .uw-exp-col {
+        &:not(.contact) {
+          .uw-exp-col__button {
             &[data-type="expand-all"] {
               background: var(--#{$colour}-primary);
               border-right: var(--size-xs) solid var(--uw-white);
@@ -118,20 +124,24 @@
             &:hover,
             &:focus {
               outline: none;
+
               &[data-type="expand-all"] {
                 background-color: var(--uw-white);
                 color: var(--#{$colour}-primary);
               }
+
               &[data-type="collapse-all"] {
                 background-color: var(--uw-white);
                 color: var(--#{$colour}-primary);
               }
             }
           }
-          .uw-details{
+
+          .uw-details {
             .details__summary {
               background-color: var(--#{$colour}-primary);
               background-image: inherit;
+
               h2,
               h3,
               h4,
@@ -147,9 +157,11 @@
               &:hover,
               &:focus {
                 background-color: var(--uw-white);
-                &::after{
+
+                &::after {
                   @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
                 }
+
                 h2,
                 h3,
                 h4,
@@ -160,12 +172,15 @@
               }
             }
           }
+
           .uw-details[open] {
             .details__summary {
               background-image: inherit;
             }
+
             > .details__summary {
               background-color: var(--#{$colour}-primary);
+
               h2,
               h3,
               h4,
@@ -183,9 +198,11 @@
               .details__summary {
                 background-color: var(--uw-white);
                 background-image: inherit;
+
                 &::after {
                   @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
                 }
+
                 h2,
                 h3,
                 h4,
@@ -200,9 +217,11 @@
               .details__summary {
                 background-color: var(--uw-white);
                 background-image: inherit;
+
                 &::after {
                   @include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up);
                 }
+
                 h2,
                 h3,
                 h4,
@@ -212,12 +231,15 @@
                 }
               }
             }
+
             &:hover {
               .details__summary {
                 background-color: var(--uw-white);
+
                 &::after {
                   @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up);
                 }
+
                 h2,
                 h3,
                 h4,
@@ -233,28 +255,43 @@
     }
   }
 }
+
+.uw-exp-col__operations {
+  list-style-type: none;
+  margin: 0;
+  padding: var(--size-2) 0 0;
+
+  li {
+    display: inline-block;
+    margin: 0;
+    padding: 0 0 0 var(--size-2);
+  }
+}
+
+.uw-exp-col__group-info {
+  .form-type-entity-autocomplete {
+    display: inline-block;
+    width: 90%;
+  }
+}
+
 .uw-exp-col {
-  &:not(.contact){
+  &:not(.contact) {
     -webkit-font-smoothing: antialiased;
-    .uw-exp-col__operations {
-      list-style-type: none;
-      margin: 0;
-      padding: var(--size-2) 0 0;
-      li {
-        display: inline-block;
-      }
-    }
+
     .uw-exp-col__group-info,
     .uw-exp-col__heading-selector,
     .uw-exp-col__heading-text {
       display: inline-block;
     }
+
     .uw-exp-col__heading-selector {
       .form-select {
         display: inline-block;
         width: 82%;
       }
     }
+
     .uw-exp-col__group-info,
     .uw-exp-col__heading-text {
       .ui-dialog & {
@@ -275,6 +312,7 @@
       display: grid;
       grid-template-columns: 50% 50%;
       margin-bottom: var(--size-2);
+
       .no-js & {
         display: none;
       }
@@ -290,6 +328,7 @@
       font-weight: 400;
       margin: 0;
       max-width: inherit;
+
       .uw-exp-col--controls {
         text-align: center;
       }
@@ -300,6 +339,7 @@
       font-family: inherit !important;
       margin-bottom: var(--size-2);
       margin-top: inherit;
+
       .details__summary {
         background-image: inherit;
         border: var(--size-xs) solid var(--gray-2);
@@ -307,6 +347,7 @@
         position: relative;
         text-shadow: inherit;
         transition: background-color 0.2s ease-in-out;
+
         &::after {
           content: '';
           display: block;
@@ -316,6 +357,7 @@
           top: calc(50% - 0.5rem);
           width: var(--size-2);
         }
+
         h2,
         h3,
         h4,
@@ -333,16 +375,20 @@
         }
       }
     }
+
     .details__content {
       background-color: var(--gray-1);
       padding: var(--size-2);
+
       .layout {
         padding: 0;
       }
+
       .block {
         margin-bottom: var(--size-2);
       }
     }
+
     .uw-exp-col__group-info {
       .form-type-entity-autocomplete {
         display: inline-block;
@@ -350,13 +396,15 @@
       }
     }
   }
-  &.contact{
-    .uw-exp-col__controls{
+
+  &.contact {
+    .uw-exp-col__controls {
       border: var(--size-xs) solid var(--gray-2);
       display: grid;
       grid-template-columns: 50% 50%;
       margin-bottom: var(--size-2);
       gap: var(--size-05);
+
       .no-js & {
         display: none;
       }
@@ -376,12 +424,14 @@
     display: none;
   }
 }
+
 /* stylelint-enable selector-max-id, declaration-no-important */
-.layout-builder{
+.layout-builder {
   &__section [data-expand-collapse-group],
   &__section [data-expand-collapse-header] {
     margin-top: var(--size-5) !important;
     position: relative;
+
     &:first-of-type {
       &::before {
         background: #195c8f;