diff --git a/css/base/variables.css b/css/base/variables.css index 98469f54..c327d570 100644 --- a/css/base/variables.css +++ b/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; diff --git a/css/components/contact.css b/css/components/contact.css new file mode 100644 index 00000000..88407905 --- /dev/null +++ b/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); +} 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..7a78ab22 --- /dev/null +++ b/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 %} + + + + {% 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 %} + +
+ {% 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 %} +
+

{{ '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') }} + +