INTR-389 Create profile info component (#801)

Co-authored-by: David Okeke <[email protected]>
uktrade · Nov 12, 2024 · 2cecde1 · 2cecde1
1 parent a843a60
commit 2cecde1
Show file tree

Hide file tree

Showing 11 changed files with 119 additions and 3 deletions.
diff --git a/src/dw_design_system/dwds/components/profile_info.html b/src/dw_design_system/dwds/components/profile_info.html
@@ -0,0 +1,31 @@
+{% load wagtailimages_tags static humanize %}
+
+<div class="dwds-profile-info content-main content-stack center">
+    {% if show_profile_image %}
+        <div>{% include "dwds/elements/profile_image.html" with profile_image=profile_image %}</div>
+    {% endif %}
+    <div class="content-stack">
+        <h3>
+            <a class="no-underline" href="{{ url }}">{{ name }}</a>
+        </h3>
+        {% if title %}<p>{{ title|truncatewords:20 }}</p>{% endif %}
+    </div>
+    {% if location %}
+        <div class="location with-icon">
+            {% include "dwds/icons/marker.html" %}
+            {{ location }}
+        </div>
+    {% endif %}
+    {% if show_icons %}
+        <div class="content-footer">
+            {% spaceless %}
+                {% if email_address %}
+                    <a class="with-icon" href="mailto:{{ email_address }}">{% include "dwds/icons/email.html" %}</a>
+                {% endif %}
+                {% if phone_number %}
+                    <a class="with-icon" href="tel:{{ phone_number }}">{% include "dwds/icons/phone.html" %}</a>
+                {% endif %}
+            {% endspaceless %}
+        </div>
+    {% endif %}
+</div>
diff --git a/src/dw_design_system/dwds/components/profile_info.scss b/src/dw_design_system/dwds/components/profile_info.scss
@@ -0,0 +1,27 @@
+.dwds-profile-info {
+    text-align: center;
+
+    h3,
+    p {
+        margin: 0;
+    }
+
+    .location.with-icon {
+        margin: 0 auto;
+        align-items: center;
+
+        .icon {
+            font-size: var(--s3);
+            margin-inline-end: var(--s-5);
+        }
+    }
+
+    .content-footer .with-icon {
+        padding: var(--s-5);
+
+        .icon {
+            font-size: var(--s4);
+            margin-inline-end: unset;
+        }
+    }
+}
diff --git a/src/dw_design_system/dwds/elements/icon.html b/src/dw_design_system/dwds/elements/icon.html
@@ -1,5 +1,5 @@
 {% load static %}
 <svg {% if id %}id="{{ id }}"{% endif %}
-     class="icon{% if is_filled %} is-filled{% endif %}">
+     class="dwds-icon{% if is_filled %} is-filled{% endif %}">
     {# djlint:off #}<use href="{% static 'icons.svg' %}#{% if use_id %}{{ use_id }}{% else %}{{ id }}{% endif %}" />{# djlint:on #}
 </svg>
diff --git a/src/dw_design_system/dwds/elements/icon.scss b/src/dw_design_system/dwds/elements/icon.scss
@@ -1,4 +1,4 @@
-.icon {
+.dwds-icon {
     // TODO: Need to resolve our approach to icons in general.
     width: var(--icon-width) !important;
     height: var(--icon-height) !important;
@@ -20,4 +20,4 @@
 
         fill-opacity: 1;
     }
-}
+}
diff --git a/src/dw_design_system/dwds/elements/profile_image.html b/src/dw_design_system/dwds/elements/profile_image.html
@@ -0,0 +1,13 @@
+{% load profile %}
+{% load wagtailimages_tags static %}
+{% load webpack_static from webpack_loader %}
+
+{% if profile_image %}
+    {% image profile_image fill-278x278 class="dwds-profile-image" %}
+{% else %}
+    <img class="dwds-profile-image"
+         src="{% webpack_static 'no-photo-large.png' %}"
+         alt="No profile image silhouette "
+         width="278"
+         height="278">
+{% endif %}
diff --git a/src/dw_design_system/dwds/elements/profile_image.scss b/src/dw_design_system/dwds/elements/profile_image.scss
@@ -0,0 +1,6 @@
+.dwds-profile-image {
+    border-radius: 50%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+    inline-size: 80%;
+}
diff --git a/src/dw_design_system/dwds/icons/email.html b/src/dw_design_system/dwds/icons/email.html
@@ -0,0 +1,7 @@
+<svg class="icon"
+     xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 40 40"
+     fill="none">
+    <path d="M39.5 20C39.5 30.7005 30.8255 39.375 20.125 39.375C9.42445 39.375 0.75 30.7005 0.75 20C0.75 9.29945 9.42445 0.625 20.125 0.625C30.8255 0.625 39.5 9.29945 39.5 20Z" fill="#222222" />
+    <path d="M30.6926 17.1672C30.8602 17.034 31.1094 17.1586 31.1094 17.3691V26.1562C31.1094 27.2949 30.1855 28.2188 29.0469 28.2188H11.1719C10.0332 28.2188 9.10938 27.2949 9.10938 26.1562V17.3734C9.10938 17.1586 9.3543 17.0383 9.52617 17.1715C10.4887 17.9191 11.7648 18.8688 16.1477 22.0527C17.0543 22.7145 18.584 24.1066 20.1094 24.098C21.6434 24.1109 23.2031 22.6887 24.0754 22.0527C28.4582 18.8688 29.7301 17.9148 30.6926 17.1672ZM20.1094 22.7188C21.1062 22.7359 22.5414 21.4641 23.2633 20.9398C28.9652 16.802 29.3992 16.441 30.7141 15.4098C30.9633 15.2164 31.1094 14.9156 31.1094 14.5977V13.7812C31.1094 12.6426 30.1855 11.7188 29.0469 11.7188H11.1719C10.0332 11.7187 9.10938 12.6426 9.10938 13.7812V14.5977C9.10938 14.9156 9.25547 15.2121 9.50469 15.4098C10.8195 16.4367 11.2535 16.802 16.9555 20.9398C17.6773 21.4641 19.1125 22.7359 20.1094 22.7188Z" fill="white" />
+</svg>
diff --git a/src/dw_design_system/dwds/icons/marker.html b/src/dw_design_system/dwds/icons/marker.html
@@ -0,0 +1,8 @@
+<svg class="icon"
+     xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 20 20"
+     fill="none">
+    <path d="M19.5 9.92188C19.5 15.2721 15.1628 19.6094 9.8125 19.6094C4.46223 19.6094 0.125 15.2721 0.125 9.92188C0.125 4.5716 4.46223 0.234375 9.8125 0.234375C15.1628 0.234375 19.5 4.5716 19.5 9.92188Z" fill="#222222" />
+    <path d="M9.37405 15.357C6.15319 10.6956 5.55469 10.2178 5.55469 8.50545C5.55469 6.1604 7.46104 4.25781 9.81073 4.25781C12.1604 4.25781 14.0668 6.1604 14.0668 8.50545C14.0668 10.2178 13.4683 10.6956 10.2474 15.357C10.0368 15.6623 9.58463 15.6623 9.37183 15.357H9.37405ZM9.81073 10.2753C10.7905 10.2753 11.5841 9.48328 11.5841 8.50545C11.5841 7.5276 10.7905 6.7356 9.81073 6.7356C8.83096 6.7356 8.03738 7.5276 8.03738 8.50545C8.03738 9.48328 8.83096 10.2753 9.81073 10.2753Z" fill="white" />
+    <path d="M11.6063 8.50545C11.6063 9.49512 10.8024 10.2974 9.81073 10.2974C8.8191 10.2974 8.01521 9.49512 8.01521 8.50545C8.01521 7.51577 8.8191 6.71347 9.81073 6.71347C10.8024 6.71347 11.6063 7.51577 11.6063 8.50545Z" fill="#0B0C0C" />
+</svg>
diff --git a/src/dw_design_system/dwds/icons/phone.html b/src/dw_design_system/dwds/icons/phone.html
@@ -0,0 +1,7 @@
+<svg class="icon"
+     xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 40 40"
+     fill="none">
+    <path d="M38.875 19.8438C38.875 30.5443 30.2005 39.2188 19.5 39.2188C8.79945 39.2188 0.125 30.5443 0.125 19.8438C0.125 9.1432 8.79945 0.46875 19.5 0.46875C30.2005 0.46875 38.875 9.1432 38.875 19.8438Z" fill="#222222" />
+    <path d="M13.9278 25.2543C16.4565 27.792 19.4052 29.6269 22.2169 30.4212C23.2302 30.7133 24.1978 30.8594 25.0834 30.8594C26.7631 30.8594 28.1781 30.3391 29.1912 29.3258L30.2776 28.2395C30.7888 27.7283 31.0079 27.0071 30.8618 26.2951C30.7066 25.5922 30.2228 25.008 29.5473 24.7524L26.2153 23.4379C25.6036 23.2005 24.9372 23.2553 24.3712 23.5748L22.5546 24.6154C22.1985 24.8254 21.7786 24.8254 21.4226 24.6337C18.8756 23.2096 15.9087 20.252 14.5302 17.7509C14.3476 17.4132 14.3567 16.9841 14.5576 16.6372L15.6074 14.8115C15.9269 14.2455 15.9817 13.5791 15.7443 12.9675L14.4389 9.63567C14.1741 8.96015 13.5899 8.47632 12.887 8.33027C12.1841 8.17508 11.4537 8.39417 10.9425 8.90538L9.85616 9.9917C8.31339 11.5344 7.92083 14.0173 8.76069 16.9659C9.55492 19.7775 11.3898 22.7261 13.9278 25.2547V25.2543Z" fill="white" />
+</svg>
diff --git a/src/dw_design_system/dwds/stylesheet.scss b/src/dw_design_system/dwds/stylesheet.scss
@@ -24,13 +24,15 @@
 @forward "components/one_up";
 @forward "components/pagination";
 @forward "components/promo";
+@forward "components/profile_info";
 
 // Elements
 @forward "elements/button";
 @forward "elements/content_header";
 @forward "elements/content_image";
 @forward "elements/content_item";
 @forward "elements/content_main";
+@forward "elements/profile_image";
 @forward "elements/icon";
 @forward "elements/inset";
 @forward "elements/navigational_link";

diff --git a/src/dw_design_system/utils.py b/src/dw_design_system/utils.py
@@ -153,6 +153,21 @@ def get_dwds_templates(template_type, request: HttpRequest):
                 "template": "dwds/components/pagination.html",
                 "context": {"pages": pages, "request": request},
             },
+            {
+                "name": "Profile Info",
+                "template": "dwds/components/profile_info.html",
+                "context": {
+                    "show_profile_image": True,
+                    "name": "John Doe",
+                    "title": "Permanent Secretary",
+                    "url": "https://www.gov.uk",
+                    "profile_image": thumbnail_file,
+                    "location": "London",
+                    "show_icons": True,
+                    "email_address": "[email protected]",
+                    "phone_number": "0123456789",
+                },
+            },
         ],
         "layouts": [],
     }