adds template + CSS for contact compontent

css/base/variables.css

@@ -464,6 +464,12 @@ body {
   --alert-banner-inner-padding-vertical: var(--spacing);
   --alert-banner-inner-padding-horizontal: 0;
 
+  /* Contact */
+  --contact-border: var(--border);
+  --contact-accent-color: var(--color-accent);
+  --contact-spacing: var(--spacing);
+  --contact-accent-color-contrast: var(--color-white);
+
   /* Leaflet Mapping */
   --leaflet-map-outline-stroke-colour: #38f;
 

css/components/contact.css

@@ -0,0 +1,53 @@
+.lgd-contact__headings,
+.lgd-contact__content {
+  border: var(--contact-border);
+  border-color: var(--contact-accent-color);
+  padding: var(--contact-spacing);
+}
+
+.lgd-contact__headings {
+  border-block-end: 0;
+  background-color: var(--contact-accent-color);
+  color: var(--contact-accent-color-contrast);
+}
+
+.lgd-contact__headings h2 {
+  margin-block-end: 0;
+  color: var(--contact-accent-color-contrast);
+}
+
+.lgd-contact__content {
+  display: grid;
+  gap: var(--contact-spacing);
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+.lgd-contact__group {
+  padding-block-end: var(--contact-spacing);
+  border-block-end: var(--contact-border);
+  border-color: var(--contact-accent-color);
+}
+
+.lgd-contact__group
+  .field--name-localgov-contact-other-social
+  > .field__item
+  + .field__item,
+.lgd-contact__group .office-hours__item + .office-hours__item {
+  margin-block-start: var(--contact-spacing);
+}
+
+.lgd-contact__group .field--name-localgov-contact-address p:last-child {
+  margin-block-end: 0;
+}
+
+.lgd-contact__group .field__label {
+  float: none;
+}
+
+.lgd-contact__group .office-hours__item-label {
+  display: block;
+}
+
+.lgd-contact__location {
+  margin-block-start: var(--contact-spacing);
+}

localgov_base.libraries.yml

@@ -193,6 +193,11 @@ link:
     theme:
       css/components/link.css: {}
 
+contact:
+  css:
+    theme:
+      css/components/contact.css: {}
+
 key-contacts:
   css:
     theme:

templates/paragraphs/paragraph--localgov-contact.html.twig

@@ -0,0 +1,170 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a paragraph.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
+ *   - paragraph.id(): The paragraph ID.
+ *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
+ *   - paragraph.getOwnerId(): The user ID of the paragraph author.
+ *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
+ *   and methods for the paragraph object.
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - paragraphs: The current template type (also known as a "theming hook").
+ *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ *     "Image" it would result in "paragraphs--type--image". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ *     preview would result in: "paragraphs--view-mode--preview", and
+ *     default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'lgd-contact',
+    'paragraph',
+    'paragraph--type--' ~ paragraph.bundle|clean_class,
+    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+    not paragraph.isPublished() ? 'paragraph--unpublished'
+  ]
+%}
+
+{% if not localgov_base_remove_css %}
+	{{ attach_library('localgov_base/contact') }}
+{% endif %}
+
+
+{% set email_website_fields = [
+  'localgov_contact_url',
+  'localgov_contact_email',
+  'localgov_contact_other_url',
+] %}
+
+{% set phone_fields = [
+  'localgov_contact_minicom',
+  'localgov_contact_mobile',
+  'localgov_contact_out_of_hours',
+  'localgov_contact_phone',
+] %}
+
+{% set social_media_field = [
+  'localgov_contact_facebook',
+  'localgov_contact_instagram',
+  'localgov_contact_other_social',
+  'localgov_contact_twitter',
+] %}
+
+{% set has_email_website_fields = false %}
+{% set has_phone_fields = false %}
+{% set has_social_media_fields = false %}
+
+
+{% for item in email_website_fields %}
+	{% if content[item].0 is not empty %}
+		{% set has_email_website_fields = true %}
+	{% endif %}
+{% endfor %}
+
+{% for item in phone_fields %}
+	{% if content[item].0 is not empty %}
+		{% set has_phone_fields = true %}
+	{% endif %}
+{% endfor %}
+
+{% for item in social_media_field %}
+	{% if content[item].0 is not empty %}
+		{% set has_social_media_fields = true %}
+	{% endif %}
+{% endfor %}
+
+<div{{attributes.addClass(classes)}}>
+
+	{% if paragraph.localgov_contact_heading.value or paragraph.localgov_contact_subheading.value %}
+		<div class="lgd-contact__headings">
+			{% if paragraph.localgov_contact_heading.value %}
+				<h2>{{ content.localgov_contact_heading }}</h2>
+			{% endif %}
+			{% if paragraph.localgov_contact_subheading.value %}
+				{{ content.localgov_contact_subheading }}
+			{% endif %}
+		</div>
+	{% endif %}
+
+	<div class="lgd-contact__content">
+		{% if has_email_website_fields %}
+			<div class="lgd-contact__group">
+				<h3>{{ 'Email & Website'|t }}</h3>
+				{% for item in email_website_fields %}
+					{% if content[item].0 is not empty %}
+						{{ content[item] }}
+					{% endif %}
+				{% endfor %}
+			</div>
+		{% endif %}
+
+		{% if has_phone_fields %}
+			<div class="lgd-contact__group">
+				<h3>{{ 'Phone'|t }}</h3>
+				{% for item in phone_fields %}
+					{% if content[item].0 is not empty %}
+						{{ content[item] }}
+					{% endif %}
+				{% endfor %}
+			</div>
+		{% endif %}
+
+		{% if has_social_media_fields %}
+			<div class="lgd-contact__group">
+				<h3>{{ 'Social Media'|t }}</h3>
+				{% for item in social_media_field %}
+					{% if content[item].0 is not empty %}
+						{{ content[item] }}
+					{% endif %}
+				{% endfor %}
+			</div>
+		{% endif %}
+
+		{% if paragraph.localgov_contact_address.value %}
+			<div class="lgd-contact__group">
+				<h3>{{ 'Address'|t }}</h3>
+				{{ content.localgov_contact_address}}
+			</div>
+		{% endif %}
+
+		{% if paragraph.localgov_contact_office_hours.value %}
+			<div class="lgd-contact__group">
+				<h3>{{ 'Office Hours'|t }}</h3>
+				{{ content.localgov_contact_office_hours}}
+			</div>
+		{% endif %}
+  </div>
+
+  {% if paragraph.localgov_contact_location.value %}
+    <div class="lgd-contact__location">
+      <h3>{{ 'Location'|t }}</h3>
+      {{ content.localgov_contact_location}}
+    </div>
+  {% endif %}
+
+	{{ content|without('localgov_contact_heading', 'localgov_contact_subheading', 'localgov_contact_url', 'localgov_contact_email', 'localgov_contact_other_url', 'localgov_contact_minicom', 'localgov_contact_mobile', 'localgov_contact_out_of_hours', 'localgov_contact_phone', 'localgov_contact_facebook', 'localgov_contact_instagram', 'localgov_contact_other_social', 'localgov_contact_twitter', 'localgov_contact_address', 'localgov_contact_office_hours', 'localgov_contact_location') }}
+
+</div>