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

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

@@ -2,10 +2,8 @@
 // Options element styles.
 
 :where(option) {
-  display: inline;
-  font-family: var(--font-book);
-  font-size: var(--font-size-0);
-  font-weight: var(--font-weight-400);
+  font-family: var(--font-systemmedium) !important;
+  font-size: var(--font-size-00);
   letter-spacing: inherit;
   margin-left: var(--size-05);
   padding-left: var(--size-105);

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

@@ -2,14 +2,22 @@
 // Textarea element styles.
 
 :where(textarea) {
-  background-color: var(--gray-2);
+  border: var(--size-xs) solid   var(--gray-3);
+  box-shadow: inset 0 var(--size-xs) 3px var(--gray-3);
+  box-sizing: border-box;
   color: inherit;
   cursor: pointer;
-  font-size: inherit;
+  font-family: var(--font-systemmedium);
+  font-size: var(--font-size-0);
   letter-spacing: inherit;
   overflow: auto;
   padding-block: var(--size-1);
   padding-inline: var(--size-2);
   resize: block;
   touch-action: manipulation;
+  &:focus {
+    border: var(--size-xs) solid  var(--gray-5) !important;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(104, 104, 104, 0.7);
+    outline: var(--gray-5);
+  }
 }

src/patterns/04-components/_index.scss

@@ -11,6 +11,7 @@
 @forward 'card/card--node/card--node';
 @forward 'card/card--teaser/card--teaser';
 @forward 'color-bar/color-bar';
+@forward 'contact/contact';
 @forward 'contact-info/contact-info';
 @forward 'content-grid-list/content-grid-list';
 @forward 'copy-text/copy-text';
@@ -64,5 +65,6 @@
 @forward 'view/view-filter/view-filter';
 @forward 'view/view-header/view-header';
 @forward 'view/view-interact/view-interact';
+@forward "view/view-lists/view-lists";
 @forward 'view/views-view/views-view';
 @forward 'view/views-view-unformatted/views-view-unformatted';

src/patterns/04-components/contact/_contact.scss

+// @file
+// Styles for contacts..
+
+@use '../../01-core' as *;
+
+$details-background-color: var(--gray-2) !default;
+.uw-contact{
+  .uw-details{
+    background-color: inherit;
+    border: 0;
+    border-radius: inherit;
+    box-shadow: inherit;
+    margin: 0;
+    transition: inherit;
+    width: 100%;
+    &:hover {
+      box-shadow: inherit;
+      .details__summary{
+        background-color: $details-background-color;
+      }
+    }
+    &:focus-within {
+      .details__summary{
+        background-color: $details-background-color;
+      }
+      box-shadow: inherit;
+    }
+    &:first-child{
+      margin-top: 0;
+    }
+    .details__summary{
+      background-color: var(--uw-white);
+      border-bottom: var(--size-xs) solid  var(--gray-3);
+      padding-right: var(--size-7);
+      text-transform: inherit;
+      white-space: normal;
+    }
+    .details__content{
+      background: var(--gray-1);
+    }
+    &[open] > .details__summary {
+      background-color: $details-background-color;
+      color: var(--uw-black);
+    }
+  }
+  &__h2{
+    margin-bottom: var(--size-05);
+    text-transform: inherit;
+
+    a{
+      font-weight: 400;
+    }
+  }
+  &__position{
+    font-family: var(--font-primary);
+    font-size: var(--font-size-2);
+    font-weight: 400;
+    text-decoration: none;
+    text-transform: inherit;
+    width: 100%;
+  }
+  &__content{
+    display: grid;
+    font-size: var(--font-size-0);
+    grid-template-columns: 100%;
+    margin: 0 0  var(--size-3) 0;
+  }
+  .uw-contact__info{
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    width: 100%;
+  }
+  &__with_image{
+    .uw-contact__image{
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+      @media(min-width: $screen-md) {
+        grid-column: 1 / 2;
+        grid-row: 1 / 2;
+      }
+      width: 100%;
+    }
+    .uw-contact__content{
+      display: grid;
+      font-size: var(--font-size-0);
+      gap: var(--size-2);
+      grid-template-columns: 100%;
+      @media(min-width: $screen-md)  {
+        grid-template-columns: var(--size-20) 1fr;
+      }
+    }
+    .uw-contact__info{
+      grid-column: 1 / 2;
+      grid-row: 2 / 3;
+      @media(min-width: $screen-md) {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
+      }
+    }
+  }
+}
+// CSS for NODE VIEW
+.node {
+  // &--type-uw-ct-profile
+  &--type-uw-ct-contact{
+    @include uw-contained-width();
+  }
+}

src/patterns/04-components/contact/contact.twig

+<div class="uw-contact {%  if contact.image %} uw-contact__with_image {% endif %}">
+  {%  embed "@components/details/details.twig" with {
+    is_open: is_open
+  } %}
+
+    {% block details_summary %}
+      {% if contact.header.title %}
+        <h2 class="uw-contact__h2">
+          <a href="{{ contact.url }}">
+            {{ contact.header.title }}
+          </a>
+        </h2>
+      {% endif %}
+      {% if contact.header.position %}
+        <span class="uw-contact__position">
+          {{ contact.header.position }}
+        </span>
+      {% endif %}
+    {% endblock %}
+    {% block details_content %}
+      <div class="uw-contact__content">
+        {%  if contact.image %}
+          {% include "@components/responsive-image/responsive-image.twig" with {
+            sources: contact.image.sources,
+            img_element: contact.image.img_element,
+            alt: contact.image.alt
+          }%}
+        {% endif %}
+        <div class="uw-contact__info">
+          {% if contact.footer.contact_info.email or contact.footer.contact_info.phone %}
+            <div class="uw-contact__phone-email">
+
+              {% if contact.footer.contact_info.email %}
+                <div class="uw-contact__email">
+                  <a href="mailto:{{ contact.footer.contact_info.email }}">{{ contact.footer.contact_info.email }}</a>
+                </div>
+              {% endif %}
+
+              {% if contact.footer.contact_info.phone %}
+                <div class="uw-contact__phone">
+                  {{ contact.footer.contact_info.phone }}
+                </div>
+              {% endif %}
+            </div>
+          {% endif %}
+
+          {% if contact.footer.contact_info.location %}
+            <div class="uw-contact__location">
+              <span class="uw-label">Location:</span>
+                {{ contact.footer.contact_info.location }}
+            </div>
+          {% endif %}
+
+          {% if contact.footer.links.profile %}
+            <div class="uw-contact__profile">
+              <span class="uw-label">Link to profile:</span>
+              <a href="{{ contact.footer.links.profile.0.uri }}">
+                {% if contact.footer.links.profile.0.title %}
+                  {{ contact.footer.links.profile.0.title }}
+                {% else %}
+                  {{ contact.header.title }}
+                {% endif %}
+              </a>
+            </div>
+          {% endif %}
+
+          {% if contact.footer.links.webpage %}
+            <div class="uw-contact__website">
+              <span class="uw-label">Link to personal webpage:</span>
+              <a href="{{ contact.footer.links.webpage.0.uri }}">
+                {% if contact.footer.links.webpage.0.title %}
+                  {{ contact.footer.links.webpage.0.title }}
+                {% else %}
+                  {{ contact.header.title }}
+                {% endif %}
+              </a>
+            </div>
+          {% endif %}
+        </div>
+      </div>
+    {% endblock %}
+  {% endembed %}
+</div>

src/patterns/04-components/contact/contact.yml

+contact:
+  title: 'Contact Name'
+  position: 'Position'
+  image: 'http://fpoimg.com/140x105?text=Thumbnail 4:3'
+  email: 'someone@uwaterloo.ca'
+  phone: '519-888-4567 ex. 3333'
+  location: 'EC2 4444'
+  link_profile:
+    uri: 'https://google.ca'
+    title: 'Link to my profile'
+  additional_info: 'This is some <b>additional info</b>'
+  groups:
+    -
+      title: 'Group 1'
+    -
+      title: 'Group 2'
+  contact_for: 'Contact for something'
+  personal_website:
+    uri: 'https://uwaterloo.ca'
+    title: 'My persional website'

src/patterns/04-components/content-grid-list/_content-grid-list.scss

@@ -23,6 +23,9 @@
         width: 100% !important;
       }
     }
+    .contact &{
+      display: block;
+    }
   }
   &__style_controls {
     @include uw-flex-term-item();

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

@@ -8,60 +8,36 @@
     // If the UW branding group
     @if $faculty == org-default {
       .uw-exp-col{
-        &__button{
-          &[data-type="expand-all"] {
-            background: var(--gray-2);
-            border-right: var(--size-xs) solid var(--gray-4);
-            color: var(--gray-6);
-          }
-
-          &[data-type="collapse-all"] {
-            background: var(--gray-2);
-            color: var(--gray-6);
-          }
-          &:hover,
-          &:focus {
-            outline: none;
-
+        &:not(.contact){
+          .uw-exp-col__button{
             &[data-type="expand-all"] {
-              background: var(--gray-6);
-              color: var(--gray-2);
+              background: var(--gray-2);
+              border-right: var(--size-xs) solid var(--gray-4);
+              color: var(--gray-6);
             }
 
             &[data-type="collapse-all"] {
-              background: var(--gray-6);
-              color: var(--gray-2);
-            }
-          }
-        }
-        .uw-details{
-          .details__summary {
-            @include svg-background(mobile-arrow-down);
-            background-color: var(--gray-2);
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
+              background: var(--gray-2);
               color: var(--gray-6);
             }
             &:hover,
             &:focus {
-              @include svg-background(mobile-arrow-down-w);
-              background-color: var(--gray-6);
-              h2,
-              h3,
-              h4,
-              h5,
-              h6 {
-                color: var(--uw-white);
+              outline: none;
+
+              &[data-type="expand-all"] {
+                background: var(--gray-6);
+                color: var(--gray-2);
+              }
+
+              &[data-type="collapse-all"] {
+                background: var(--gray-6);
+                color: var(--gray-2);
               }
             }
           }
-
-          &[open] {
-            > .details__summary {
-              @include svg-background(mobile-arrow-up);
+          .uw-details{
+            .details__summary {
+              @include svg-background(mobile-arrow-down);
               background-color: var(--gray-2);
               h2,
               h3,
@@ -70,8 +46,9 @@
               h6 {
                 color: var(--gray-6);
               }
+              &:hover,
               &:focus {
-                @include svg-background(mobile-arrow-up-w);
+                @include svg-background(mobile-arrow-down-w);
                 background-color: var(--gray-6);
                 h2,
                 h3,
@@ -81,16 +58,40 @@
                   color: var(--uw-white);
                 }
               }
-
-              &:hover {
-                @include svg-background(mobile-arrow-up-w);
-                background-color: var(--gray-6);
+            }
+            &[open] {
+              > .details__summary {
+                @include svg-background(mobile-arrow-up);
+                background-color: var(--gray-2);
                 h2,
                 h3,
                 h4,
                 h5,
-                h6{
-                  color: var(--uw-white);
+                h6 {
+                  color: var(--gray-6);
+                }
+                &:focus {
+                  @include svg-background(mobile-arrow-up-w);
+                  background-color: var(--gray-6);
+                  h2,
+                  h3,
+                  h4,
+                  h5,
+                  h6 {
+                    color: var(--uw-white);
+                  }
+                }
+
+                &:hover {
+                  @include svg-background(mobile-arrow-up-w);
+                  background-color: var(--gray-6);
+                  h2,
+                  h3,
+                  h4,
+                  h5,
+                  h6{
+                    color: var(--uw-white);
+                  }
                 }
               }
             }
@@ -101,128 +102,129 @@
     // Else run the loop on the faculties.
     @else {
       .uw-exp-col{
-        &__button{
-          &[data-type="expand-all"] {
-            background: var(--#{$colour}-primary);
-            border-right: var(--size-xs) solid var(--uw-white);
-            color: var(--uw-white);
-          }
-
-          &[data-type="collapse-all"] {
-            background: var(--#{$colour}-primary);
-            color: var(--uw-white);
-          }
-
-          &:hover,
-          &:focus {
-            outline: none;
+        &:not(.contact){
+          .uw-exp-col__button{
             &[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{
-          .details__summary {
-            background-color: var(--#{$colour}-primary);
-            background-image: inherit;
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
+              background: var(--#{$colour}-primary);
+              border-right: var(--size-xs) solid var(--uw-white);
               color: var(--uw-white);
             }
 
-            &::after {
-              @include svg-background-color(var(--uw-white), mobile-arrow-down);
+            &[data-type="collapse-all"] {
+              background: var(--#{$colour}-primary);
+              color: var(--uw-white);
             }
 
             &:hover,
             &:focus {
-              background-color: var(--uw-white);
-              &::after{
-                @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
+              outline: none;
+              &[data-type="expand-all"] {
+                background-color: var(--uw-white);
+                color: var(--#{$colour}-primary);
               }
-              h2,
-              h3,
-              h4,
-              h5,
-              h6 {
+              &[data-type="collapse-all"] {
+                background-color: var(--uw-white);
                 color: var(--#{$colour}-primary);
               }
             }
           }
-        }
-
-        .uw-details[open] {
-          .details__summary {
-            background-image: inherit;
-          }
-          > .details__summary {
-            background-color: var(--#{$colour}-primary);
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-              color: var(--uw-white);
-            }
-
-            &::after {
-              @include svg-background-color(var(--uw-white), mobile-arrow-up);
-            }
-          }
-
-          &:focus {
+          .uw-details{
             .details__summary {
-              background-color: var(--uw-white);
+              background-color: var(--#{$colour}-primary);
               background-image: inherit;
-              &::after {
-                @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
-              }
               h2,
               h3,
               h4,
               h5,
               h6 {
-                color: var(--#{$colour}-primary);
+                color: var(--uw-white);
               }
-            }
-          }
 
-          &:focus-within {
-            .details__summary {
-              background-color: var(--uw-white);
-              background-image: inherit;
               &::after {
-                @include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up);
+                @include svg-background-color(var(--uw-white), mobile-arrow-down);
               }
-              h2,
-              h3,
-              h4,
-              h5,
-              h6 {
-                color: var(--#{$colour}-primary);
+
+              &:hover,
+              &:focus {
+                background-color: var(--uw-white);
+                &::after{
+                  @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
+                }
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                  color: var(--#{$colour}-primary);
+                }
               }
             }
           }
-          &:hover {
+          .uw-details[open] {
             .details__summary {
-              background-color: var(--uw-white);
-              &::after {
-                @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up);
-              }
+              background-image: inherit;
+            }
+            > .details__summary {
+              background-color: var(--#{$colour}-primary);
               h2,
               h3,
               h4,
               h5,
               h6 {
-                color: var(--#{$colour}-primary);
+                color: var(--uw-white);
+              }
+
+              &::after {
+                @include svg-background-color(var(--uw-white), mobile-arrow-up);
+              }
+            }
+
+            &:focus {
+              .details__summary {
+                background-color: var(--uw-white);
+                background-image: inherit;
+                &::after {
+                  @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
+                }
+                h2,
+                h3,
+                h4,
+                h5,