From 8e61f4d90dd45b7d7a08d7edd340fca7d4a90c76 Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Thu, 19 Dec 2024 12:28:37 +0000 Subject: [PATCH 1/7] adds template + CSS for contact compontent --- css/components/contact.css | 55 ++++++ localgov_base.libraries.yml | 5 + .../paragraph--localgov-contact.html.twig | 169 ++++++++++++++++++ 3 files changed, 229 insertions(+) create mode 100644 css/components/contact.css create mode 100644 templates/paragraphs/paragraph--localgov-contact.html.twig diff --git a/css/components/contact.css b/css/components/contact.css new file mode 100644 index 00000000..94abc54b --- /dev/null +++ b/css/components/contact.css @@ -0,0 +1,55 @@ +.lgd-contact__headings, +.lgd-contact__content { + border: var(--border); + border-color: var(--color-accent); + padding: var(--spacing); +} + +.lgd-contact__headings { + border-block-end: 0; + background-color: var(--color-accent); + color: var(--color-white); +} + +.lgd-contact__headings h2 { + margin-block-end: 0; + color: var(--color-white); +} + +.lgd-contact__content { + display: grid; + gap: var(--spacing); + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); +} + +.lgd-contact__group { + padding-block-end: var(--spacing); + border-block-end: var(--border); + border-color: var(--color-accent); +} + +.lgd-contact__group > h3 { + margin-block-end: 0; +} + +.lgd-contact__group > * + *, +.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(--spacing); +} + +.lgd-contact__group .field__label { + float: none; +} + +.lgd-contact__group + .lgd-contact__group { + margin-block-start: var(--spacing); +} + +.lgd-contact__group .office-hours__item-label { + display: block; +} + +.lgd-contact__location { + margin-block-start: var(--spacing); +} diff --git a/localgov_base.libraries.yml b/localgov_base.libraries.yml index 3cbdf379..8edbe080 100644 --- a/localgov_base.libraries.yml +++ b/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: diff --git a/templates/paragraphs/paragraph--localgov-contact.html.twig b/templates/paragraphs/paragraph--localgov-contact.html.twig new file mode 100644 index 00000000..31f60a8a --- /dev/null +++ b/templates/paragraphs/paragraph--localgov-contact.html.twig @@ -0,0 +1,169 @@ +{# +/** + * @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 %} + + + + {% if paragraph.localgov_contact_heading.value or paragraph.localgov_contact_subheading.value %} +
+ {% if paragraph.localgov_contact_heading.value %} +

{{ content.localgov_contact_heading }}

+ {% endif %} + {% if paragraph.localgov_contact_subheading.value %} + {{ content.localgov_contact_subheading }} + {% endif %} +
+ {% endif %} + +
+
+

{{ 'Email & Website'|t }}

+ {% for item in email_website_fields %} + {% if content[item].0 is not empty %} + {{ content[item] }} + {% endif %} + {% endfor %} +
+ {% if has_email_website_fields %}{% endif %} + + {% if has_phone_fields %} +
+

{{ 'Phone'|t }}

+ {% for item in phone_fields %} + {% if content[item].0 is not empty %} + {{ content[item] }} + {% endif %} + {% endfor %} +
+ {% endif %} + + {% if has_social_media_fields %} +
+

{{ 'Social Media'|t }}

+ {% for item in social_media_field %} + {% if content[item].0 is not empty %} + {{ content[item] }} + {% endif %} + {% endfor %} +
+ {% endif %} + + {% if paragraph.localgov_contact_address.value %} +
+

{{ 'Address'|t }}

+ {{ content.localgov_contact_address}} +
+ {% endif %} + + {% if paragraph.localgov_contact_office_hours.value %} +
+

{{ 'Office Hours'|t }}

+ {{ content.localgov_contact_office_hours}} +
+ {% endif %} +
+ + {% if paragraph.localgov_contact_location.value %} +
+

{{ 'Location'|t }}

+ {{ content.localgov_contact_location}} +
+ {% 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') }} + + From 481523dccf45a20b1497d78c8c0fbe06c61daf83 Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Thu, 19 Dec 2024 12:51:27 +0000 Subject: [PATCH 2/7] sets up variables for contact component CSS --- css/base/variables.css | 6 ++++++ css/components/contact.css | 26 +++++++++++++------------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/css/base/variables.css b/css/base/variables.css index f3138fc2..41d52347 100644 --- a/css/base/variables.css +++ b/css/base/variables.css @@ -472,6 +472,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; diff --git a/css/components/contact.css b/css/components/contact.css index 94abc54b..6c52241f 100644 --- a/css/components/contact.css +++ b/css/components/contact.css @@ -1,31 +1,31 @@ .lgd-contact__headings, .lgd-contact__content { - border: var(--border); - border-color: var(--color-accent); - padding: var(--spacing); + border: var(--contact-border); + border-color: var(--contact-accent-color); + padding: var(--contact-spacing); } .lgd-contact__headings { border-block-end: 0; - background-color: var(--color-accent); - color: var(--color-white); + background-color: var(--contact-accent-color); + color: var(--contact-accent-color-contrast); } .lgd-contact__headings h2 { margin-block-end: 0; - color: var(--color-white); + color: var(--contact-accent-color-contrast); } .lgd-contact__content { display: grid; - gap: var(--spacing); + gap: var(--contact-spacing); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .lgd-contact__group { - padding-block-end: var(--spacing); - border-block-end: var(--border); - border-color: var(--color-accent); + padding-block-end: var(--contact-spacing); + border-block-end: var(--contact-border); + border-color: var(--contact-accent-color); } .lgd-contact__group > h3 { @@ -35,7 +35,7 @@ .lgd-contact__group > * + *, .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(--spacing); + margin-block-start: var(--contact-spacing); } .lgd-contact__group .field__label { @@ -43,7 +43,7 @@ } .lgd-contact__group + .lgd-contact__group { - margin-block-start: var(--spacing); + margin-block-start: var(--contact-spacing); } .lgd-contact__group .office-hours__item-label { @@ -51,5 +51,5 @@ } .lgd-contact__location { - margin-block-start: var(--spacing); + margin-block-start: var(--contact-spacing); } From 2e030035efdc73fde125225e53f91b8f37218f75 Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Thu, 19 Dec 2024 12:58:48 +0000 Subject: [PATCH 3/7] fixes CSS coding standards --- css/components/contact.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/css/components/contact.css b/css/components/contact.css index 6c52241f..1dd7811e 100644 --- a/css/components/contact.css +++ b/css/components/contact.css @@ -33,7 +33,10 @@ } .lgd-contact__group > * + *, -.lgd-contact__group .field--name-localgov-contact-other-social > .field__item + .field__item, +.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); } From fe642d21d638a755cadca589ef03b6fb290c7164 Mon Sep 17 00:00:00 2001 From: Lee Mills Date: Tue, 4 Feb 2025 13:35:25 +0000 Subject: [PATCH 4/7] empty commit to trigger workflow From ceb893ee0e2d4021ad993dde944ffcf6ee71a2a2 Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Tue, 25 Feb 2025 10:21:39 +0000 Subject: [PATCH 5/7] removes margin top from sibling contact groups --- css/components/contact.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/components/contact.css b/css/components/contact.css index 1dd7811e..e98518c5 100644 --- a/css/components/contact.css +++ b/css/components/contact.css @@ -32,7 +32,6 @@ margin-block-end: 0; } -.lgd-contact__group > * + *, .lgd-contact__group .field--name-localgov-contact-other-social > .field__item From a9d129a0e80ed8d4078a9617a09725a12896dd65 Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Mon, 7 Apr 2025 09:56:33 +0100 Subject: [PATCH 6/7] Add better spacing for items --- css/components/contact.css | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/css/components/contact.css b/css/components/contact.css index e98518c5..88407905 100644 --- a/css/components/contact.css +++ b/css/components/contact.css @@ -28,10 +28,6 @@ border-color: var(--contact-accent-color); } -.lgd-contact__group > h3 { - margin-block-end: 0; -} - .lgd-contact__group .field--name-localgov-contact-other-social > .field__item @@ -40,12 +36,12 @@ margin-block-start: var(--contact-spacing); } -.lgd-contact__group .field__label { - float: none; +.lgd-contact__group .field--name-localgov-contact-address p:last-child { + margin-block-end: 0; } -.lgd-contact__group + .lgd-contact__group { - margin-block-start: var(--contact-spacing); +.lgd-contact__group .field__label { + float: none; } .lgd-contact__group .office-hours__item-label { From d5ed6188b092028f7c3f56448cdc7f801fe5b05c Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Fri, 11 Apr 2025 11:18:25 +0100 Subject: [PATCH 7/7] Add if statement to correct place --- .../paragraph--localgov-contact.html.twig | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/templates/paragraphs/paragraph--localgov-contact.html.twig b/templates/paragraphs/paragraph--localgov-contact.html.twig index 31f60a8a..7a78ab22 100644 --- a/templates/paragraphs/paragraph--localgov-contact.html.twig +++ b/templates/paragraphs/paragraph--localgov-contact.html.twig @@ -110,15 +110,16 @@ {% endif %}
-
-

{{ 'Email & Website'|t }}

- {% for item in email_website_fields %} - {% if content[item].0 is not empty %} - {{ content[item] }} - {% endif %} - {% endfor %} -
- {% if has_email_website_fields %}{% endif %} + {% if has_email_website_fields %} +
+

{{ 'Email & Website'|t }}

+ {% for item in email_website_fields %} + {% if content[item].0 is not empty %} + {{ content[item] }} + {% endif %} + {% endfor %} +
+ {% endif %} {% if has_phone_fields %}