Merge branch 'feature/ISTWCMS-5944-m26lebla-fix-contacts' into '1.0.x'

ISTWCMS-5944: migrate gesso contacts patterns and update the variables

See merge request !54

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';

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/links/_links.scss

@@ -66,7 +66,6 @@
           var(--uw-white)
         );
       }
-      .views-exposed-form a,
       .uw-site-name__link,
       .layout-builder__link,
       .tabs a,
@@ -99,11 +98,17 @@
           var(--uw-black)
         );
       }
+      .uw-contact__h2 a{
+        @include link-reverse(
+          var(--uw-black),
+          var(--gray-5)
+        );
+      }
       .pager__item a{
-        &:hover,
-        &:focus{
-          color: var(--uw-black) !important;
-        }
+        @include link(
+          var(--uw-black),
+          var(--uw-white)
+        );
       }
       .uw-site-footer__content .highlight{
         color: var(--uw-white);
@@ -124,9 +129,9 @@
             var(--gray-5)
           );
         }
-        &.pager__link {
-          color: var(--uw-black);
-        }
+        //&.pager__link {
+        //  color: var(--uw-black);
+        //}
         &.uw-site-name__link {
           @include link-reverse(
             var(--uw-black),
@@ -140,12 +145,31 @@
           );
         }
       }
+      .pager__item a{
+        @include link(
+          var(--uw-black),
+          var(--uw-white)
+        );
+      }
       .card__title a{
         @include link-reverse(
           var(--#{$colour}-primary),
           var(--#{$colour}-primary)
         );
       }
+      .uw-details{
+        &:hover{
+          .uw-contact__h2 a{
+            color: var(--uw-black);
+          }
+        }
+      }
+      .uw-contact__h2 a{
+        @include link-reverse(
+          var(--#{$colour}-primary),
+          var(--uw-black)
+        );
+      }
       .menu--uw-footer li a{
         @include link-reverse(
           var(--uw-white),
@@ -185,7 +209,6 @@
         );
       }
       // Blackout the link
-      .views-exposed-form a,
       .uw-site-name__link,
       .layout-builder__link,
       .tabs a,

src/patterns/04-components/tabs/tabs.js

@@ -9,16 +9,12 @@
     attach: function () {
       $(document).ready(function () {
 
-        $('.uw-contact-expand-all').click(function () {
-          $('.uw-contact details').each(function () {
-            $(this).attr('open', '');
-          });
+        $('.uw-exp-col-expand-all').click(function () {
+          $('.uw-contact details').attr('open', '');
         });
 
-        $('.uw-contact-collapse-all').click(function () {
-          $('.uw-contact details').each(function () {
-            $(this).removeAttr('open');
-          });
+        $('.uw-exp-col-collapse-all').click(function () {
+          $('.uw-contact details').removeAttr('open');
         });
 
         /**