initial details summary twig for contact

css/styles.css

@@ -3807,6 +3807,12 @@ button {
   .uw-footer-address .uw-footer-phone a:hover {
     text-decoration: underline; }
 
+details {
+  background: #b9f1c5; }
+
+details[open] {
+  background: #eeaab0; }
+
 .uw-content--grid-list__layout {
   display: flex;
   -webkit-flex-flow: row wrap;

source/_patterns/04-components/contact/contact.twig

-<div class="uw-contact">
-  <details class="uw-contact__details">
-    <summary class="uw-contact__summary">
-      <h2 class="uw-contact__h2">
-        {% if contact.link_profile %}
-          <a href="{{ contact.link_profile }}" class="uw-contact__link-profile">
-        {% endif %}
-        {{ contact.title }}
-        {% if contact.link_profile %}
-          </a>
-        {% endif %}
-      </h2>
+{%  embed "@components/details/details.twig" %}
+
+  {% block details_summary %}
+      {% if contact.title %}
+         <h2 class="uw-contact__h2">
+          {{ contact.title }}
+        </h2>
+      {% endif %}
       {% if contact.position %}
         <div class="uw-contact__position">
           {{ contact.position }}
         </div>
       {% endif %}
-    </summary>
+  {% endblock %}
+
+  {% block details_content %}
     <div class="uw-contact__info">
+      {%  if contact.image %}
+        <div class="uw-contact__image">
+          <img src="{{ contact.image }} alt="{{ contact.title }}" />
+        </div>
+      {%  endif %}
       {% if contact.email or contact.phone %}
         <div class="uw-contact__phone-email">
           {% if contact.email %}
@@ -31,6 +34,27 @@
           {% endif %}
         </div>
       {% endif %}
+      {% if contact.additional_info %}
+        <div class="uw-contact__additional-info">
+          {{ contact.additional_info }}
+        </div>
+      {% endif %}
+      {% if contact.contact_for %}
+        <div class="uw-contact__contact-for">
+          {{ contact.contact_for }}
+        </div>
+      {% endif %}
+      {% if contact.groups %}
+        <div class="uw-contact__groups">
+          {% for group in contact.groups %}
+            {% if loop.index0 > 0 %}
+              , {{ group.title }}
+            {% else %}
+              {{ group.title }}
+            {% endif %}
+          {% endfor %}
+        </div>
+      {% endif %}
       {% if contact.location %}
         <div class="uw-contact__location">
           <strong>Location:</strong><br />
@@ -40,9 +64,27 @@
       {% if contact.link_profile %}
         <div class="uw-contact__profile">
           <strong>Link to profile:</strong><br />
-          <a href="{{ contact.link_profile }}">{{ contact.title }}</a>
+          <a href="{{ contact.link_profile.uri }}">
+            {% if contact.link_profile.title %}
+              {{ contact.link_profile.title }}
+            {% else %}
+              {{ contact.title }}
+            {% endif %}
+          </a>
+        </div>
+      {% endif %}
+      {% if contact.personal_website %}
+        <div class="uw-contact__personal-website">
+          <strong>Link to personal website:</strong><br />
+          <a href="{{ contact.personal_website.uri }}">
+            {% if contact.personal_website.title %}
+              {{ contact.personal_website.title }}
+            {% else %}
+              {{ contact.title }}
+            {% endif %}
+          </a>
         </div>
       {% endif %}
     </div>
-  </details>
-</div>
+  {% endblock %}
+{%  endembed %}
\ No newline at end of file

source/_patterns/04-components/contact/contact.yml

@@ -5,4 +5,16 @@ contact:
   email: 'someone@uwaterloo.ca'
   phone: '519-888-4567 ex. 3333'
   location: 'EC2 4444'
-  link_profile: 'https://google.ca'
+  link_profile:
\ No newline at end of file
+    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'

source/_patterns/04-components/details/details.twig

-<details class="details js-details js-form-wrapper" data-drupal-selector="edit-details" id="edit-details"{% if is_open %} open{% endif %}>
-  <summary class="details__summary" role="button" aria-controls="edit-details" aria-expanded="true" aria-pressed="true">{{ details_summary }}</summary>
+<details class="details" {% if is_open %} open{% endif %}>
+  <summary class="details__summary">
+    {% block details_summary %}
+      Summary
+    {% endblock %}
+  </summary>
   <div class="details__content">
-    <div class="details__description">{{ details_description }}</div>
-    {{ details_content }}
+    {% block details_content %}
+      Content
+    {% endblock %}
   </div>
 </details>