diff --git a/config/sync/core.entity_form_display.paragraph.card_overlays.default.yml b/config/sync/core.entity_form_display.paragraph.card_overlays.default.yml new file mode 100644 index 000000000..e313b2c4c --- /dev/null +++ b/config/sync/core.entity_form_display.paragraph.card_overlays.default.yml @@ -0,0 +1,68 @@ +uuid: f9804e23-ff36-43bd-ae74-bea7507bcc5f +langcode: en +status: true +dependencies: + config: + - field.field.paragraph.card_overlays.field_body + - field.field.paragraph.card_overlays.field_components + - field.field.paragraph.card_overlays.field_heading + - field.field.paragraph.card_overlays.field_link + - paragraphs.paragraphs_type.card_overlays + module: + - linkit + - paragraphs + - text +id: paragraph.card_overlays.default +targetEntityType: paragraph +bundle: card_overlays +mode: default +content: + field_body: + type: text_textarea + weight: 1 + region: content + settings: + rows: 5 + placeholder: '' + third_party_settings: { } + field_components: + type: paragraphs + weight: 3 + region: content + settings: + title: Paragraph + title_plural: Paragraphs + edit_mode: closed + closed_mode: summary + autocollapse: none + closed_mode_threshold: 0 + add_mode: button + form_display_mode: expanded + default_paragraph_type: _none + features: + add_above: '0' + collapse_edit_all: collapse_edit_all + convert: '0' + duplicate: '0' + third_party_settings: { } + field_heading: + type: string_textfield + weight: 0 + region: content + settings: + size: 60 + placeholder: '' + third_party_settings: { } + field_link: + type: linkit + weight: 2 + region: content + settings: + placeholder_url: '' + placeholder_title: '' + linkit_profile: ilr_content + linkit_auto_link_text: false + third_party_settings: { } +hidden: + created: true + status: true diff --git a/config/sync/core.entity_form_display.paragraph.card_overlays_item.default.yml b/config/sync/core.entity_form_display.paragraph.card_overlays_item.default.yml new file mode 100644 index 000000000..874b97ac6 --- /dev/null +++ b/config/sync/core.entity_form_display.paragraph.card_overlays_item.default.yml @@ -0,0 +1,46 @@ +uuid: 623e1a1c-c632-495e-a5fc-9d908969b992 +langcode: en +status: true +dependencies: + config: + - field.field.paragraph.card_overlays_item.field_body + - field.field.paragraph.card_overlays_item.field_heading + - field.field.paragraph.card_overlays_item.field_link + - paragraphs.paragraphs_type.card_overlays_item + module: + - linkit + - text +id: paragraph.card_overlays_item.default +targetEntityType: paragraph +bundle: card_overlays_item +mode: default +content: + field_body: + type: text_textarea + weight: 2 + region: content + settings: + rows: 5 + placeholder: '' + third_party_settings: { } + field_heading: + type: string_textfield + weight: 0 + region: content + settings: + size: 60 + placeholder: '' + third_party_settings: { } + field_link: + type: linkit + weight: 2 + region: content + settings: + placeholder_url: '' + placeholder_title: '' + linkit_profile: ilr_content + linkit_auto_link_text: false + third_party_settings: { } +hidden: + created: true + status: true diff --git a/config/sync/core.entity_view_display.paragraph.card_overlays.default.yml b/config/sync/core.entity_view_display.paragraph.card_overlays.default.yml new file mode 100644 index 000000000..3f3316f05 --- /dev/null +++ b/config/sync/core.entity_view_display.paragraph.card_overlays.default.yml @@ -0,0 +1,57 @@ +uuid: 671921a2-d797-4f77-a9e6-4364a2abf623 +langcode: en +status: true +dependencies: + config: + - field.field.paragraph.card_overlays.field_body + - field.field.paragraph.card_overlays.field_components + - field.field.paragraph.card_overlays.field_heading + - field.field.paragraph.card_overlays.field_link + - paragraphs.paragraphs_type.card_overlays + module: + - entity_reference_revisions + - link + - text +id: paragraph.card_overlays.default +targetEntityType: paragraph +bundle: card_overlays +mode: default +content: + field_body: + type: text_default + label: hidden + settings: { } + third_party_settings: { } + weight: 1 + region: content + field_components: + type: entity_reference_revisions_entity_view + label: hidden + settings: + view_mode: expanded + link: '' + third_party_settings: { } + weight: 3 + region: content + field_heading: + type: string + label: hidden + settings: + link_to_entity: false + third_party_settings: { } + weight: 0 + region: content + field_link: + type: link + label: hidden + settings: + trim_length: 80 + url_only: false + url_plain: false + rel: '' + target: '' + third_party_settings: { } + weight: 2 + region: content +hidden: + search_api_excerpt: true diff --git a/config/sync/core.entity_view_display.paragraph.card_overlays_item.default.yml b/config/sync/core.entity_view_display.paragraph.card_overlays_item.default.yml new file mode 100644 index 000000000..219358a23 --- /dev/null +++ b/config/sync/core.entity_view_display.paragraph.card_overlays_item.default.yml @@ -0,0 +1,46 @@ +uuid: b4edce68-241f-4956-86fd-cd4542e99c22 +langcode: en +status: true +dependencies: + config: + - field.field.paragraph.card_overlays_item.field_body + - field.field.paragraph.card_overlays_item.field_heading + - field.field.paragraph.card_overlays_item.field_link + - paragraphs.paragraphs_type.card_overlays_item + module: + - link + - text +id: paragraph.card_overlays_item.default +targetEntityType: paragraph +bundle: card_overlays_item +mode: default +content: + field_body: + type: text_default + label: hidden + settings: { } + third_party_settings: { } + weight: 2 + region: content + field_heading: + type: string + label: hidden + settings: + link_to_entity: false + third_party_settings: { } + weight: 0 + region: content + field_link: + type: link + label: hidden + settings: + trim_length: 80 + url_only: false + url_plain: false + rel: '' + target: '' + third_party_settings: { } + weight: 2 + region: content +hidden: + search_api_excerpt: true diff --git a/config/sync/field.field.paragraph.card_overlays.field_body.yml b/config/sync/field.field.paragraph.card_overlays.field_body.yml new file mode 100644 index 000000000..8c156d0f8 --- /dev/null +++ b/config/sync/field.field.paragraph.card_overlays.field_body.yml @@ -0,0 +1,24 @@ +uuid: cb09f0e7-3c0e-45bb-a2dc-638fe2272cf8 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_body + - filter.format.basic_formatting + - paragraphs.paragraphs_type.card_overlays + module: + - text +id: paragraph.card_overlays.field_body +field_name: field_body +entity_type: paragraph +bundle: card_overlays +label: Description +description: 'General information about this item, which can include the name of the activity (e.g. Lunch) the names of presenters, etc.' +required: true +translatable: false +default_value: { } +default_value_callback: '' +settings: + allowed_formats: + - basic_formatting +field_type: text_long diff --git a/config/sync/field.field.paragraph.card_overlays.field_components.yml b/config/sync/field.field.paragraph.card_overlays.field_components.yml new file mode 100644 index 000000000..aef0ada1a --- /dev/null +++ b/config/sync/field.field.paragraph.card_overlays.field_components.yml @@ -0,0 +1,172 @@ +uuid: a7fbd2fe-64f3-4ed4-bed4-4055eb95a675 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_components + - paragraphs.paragraphs_type.card_overlays + - paragraphs.paragraphs_type.card_overlays_item + module: + - entity_reference_revisions +id: paragraph.card_overlays.field_components +field_name: field_components +entity_type: paragraph +bundle: card_overlays +label: Items +description: '' +required: false +translatable: false +default_value: { } +default_value_callback: '' +settings: + handler: 'default:paragraph' + handler_settings: + target_bundles: + card_overlays_item: card_overlays_item + negate: 0 + target_bundles_drag_drop: + accordion: + weight: 39 + enabled: false + agenda: + weight: 28 + enabled: false + agenda_item: + weight: 27 + enabled: false + anchor_button_to_form: + weight: 51 + enabled: false + call_to_action: + weight: 52 + enabled: false + card_overlays: + weight: 53 + enabled: false + card_overlays_item: + weight: 49 + enabled: true + carousel: + weight: 29 + enabled: false + collection_listing: + weight: 30 + enabled: false + collection_listing_publication: + weight: 31 + enabled: false + curated_course_listing: + weight: 32 + enabled: false + curated_post_listing: + weight: 33 + enabled: false + deck: + weight: 34 + enabled: false + event_listing: + weight: 35 + enabled: false + form: + weight: 36 + enabled: false + gallery: + weight: 50 + enabled: false + honors_and_awards: + weight: 51 + enabled: false + image: + weight: 37 + enabled: false + instagram_listing: + weight: 38 + enabled: false + link_listing: + weight: 66 + enabled: false + media_deck: + weight: 39 + enabled: false + milestone: + weight: 55 + enabled: false + milestone_section: + weight: 56 + enabled: false + organization_listing: + weight: 57 + enabled: false + people_listing: + weight: 40 + enabled: false + people_listing_dynamic: + weight: 59 + enabled: false + person: + weight: 41 + enabled: false + picture_in_picture: + weight: 42 + enabled: false + professional_activities: + weight: 62 + enabled: false + project_listing: + weight: 63 + enabled: false + promo: + weight: 43 + enabled: false + publications: + weight: 65 + enabled: false + rich_text: + weight: 44 + enabled: false + section: + weight: 45 + enabled: false + section_navigation: + weight: 46 + enabled: false + simple_collection_listing: + weight: 47 + enabled: false + slide: + weight: 83 + enabled: false + slide_deck: + weight: 84 + enabled: false + stat: + weight: 70 + enabled: false + stats: + weight: 71 + enabled: false + tab_item: + weight: 89 + enabled: false + table_of_contents: + weight: 48 + enabled: false + tabs: + weight: 88 + enabled: false + testimonial: + weight: 49 + enabled: false + testimonial_deck: + weight: 50 + enabled: false + text_with_media: + weight: 92 + enabled: false + topic_list: + weight: 51 + enabled: false + video: + weight: 52 + enabled: false +field_type: entity_reference_revisions diff --git a/config/sync/field.field.paragraph.card_overlays.field_heading.yml b/config/sync/field.field.paragraph.card_overlays.field_heading.yml new file mode 100644 index 000000000..fbb9b9019 --- /dev/null +++ b/config/sync/field.field.paragraph.card_overlays.field_heading.yml @@ -0,0 +1,19 @@ +uuid: a5096b91-6ef5-47cf-9311-70db06325fef +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_heading + - paragraphs.paragraphs_type.card_overlays +id: paragraph.card_overlays.field_heading +field_name: field_heading +entity_type: paragraph +bundle: card_overlays +label: Heading +description: '' +required: true +translatable: false +default_value: { } +default_value_callback: '' +settings: { } +field_type: string diff --git a/config/sync/field.field.paragraph.card_overlays.field_link.yml b/config/sync/field.field.paragraph.card_overlays.field_link.yml new file mode 100644 index 000000000..6bf6dc33f --- /dev/null +++ b/config/sync/field.field.paragraph.card_overlays.field_link.yml @@ -0,0 +1,23 @@ +uuid: e1e57408-d915-4476-b454-deb3eb4403c5 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_link + - paragraphs.paragraphs_type.card_overlays + module: + - link +id: paragraph.card_overlays.field_link +field_name: field_link +entity_type: paragraph +bundle: card_overlays +label: Link +description: 'The call to action button link. Link text is required and will be shown as a button.' +required: true +translatable: false +default_value: { } +default_value_callback: '' +settings: + title: 2 + link_type: 17 +field_type: link diff --git a/config/sync/field.field.paragraph.card_overlays_item.field_body.yml b/config/sync/field.field.paragraph.card_overlays_item.field_body.yml new file mode 100644 index 000000000..f46c81235 --- /dev/null +++ b/config/sync/field.field.paragraph.card_overlays_item.field_body.yml @@ -0,0 +1,24 @@ +uuid: b3ea59e6-905d-4726-9fc7-43284b3b8e28 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_body + - filter.format.basic_formatting + - paragraphs.paragraphs_type.card_overlays_item + module: + - text +id: paragraph.card_overlays_item.field_body +field_name: field_body +entity_type: paragraph +bundle: card_overlays_item +label: Description +description: 'General information about this item, which can include the name of the activity (e.g. Lunch) the names of presenters, etc.' +required: true +translatable: false +default_value: { } +default_value_callback: '' +settings: + allowed_formats: + - basic_formatting +field_type: text_long diff --git a/config/sync/field.field.paragraph.card_overlays_item.field_heading.yml b/config/sync/field.field.paragraph.card_overlays_item.field_heading.yml new file mode 100644 index 000000000..5fcdde330 --- /dev/null +++ b/config/sync/field.field.paragraph.card_overlays_item.field_heading.yml @@ -0,0 +1,19 @@ +uuid: b328ffb7-5ab9-4c9a-af6f-7be97ba1d817 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_heading + - paragraphs.paragraphs_type.card_overlays_item +id: paragraph.card_overlays_item.field_heading +field_name: field_heading +entity_type: paragraph +bundle: card_overlays_item +label: Heading +description: '' +required: true +translatable: false +default_value: { } +default_value_callback: '' +settings: { } +field_type: string diff --git a/config/sync/field.field.paragraph.card_overlays_item.field_link.yml b/config/sync/field.field.paragraph.card_overlays_item.field_link.yml new file mode 100644 index 000000000..aa0d8cc17 --- /dev/null +++ b/config/sync/field.field.paragraph.card_overlays_item.field_link.yml @@ -0,0 +1,23 @@ +uuid: 4196d4cb-6f4e-4c3c-a20a-8b36968e6aff +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_link + - paragraphs.paragraphs_type.card_overlays_item + module: + - link +id: paragraph.card_overlays_item.field_link +field_name: field_link +entity_type: paragraph +bundle: card_overlays_item +label: Link +description: 'The call to action button link. Link text is required and will be shown as a button.' +required: true +translatable: false +default_value: { } +default_value_callback: '' +settings: + title: 2 + link_type: 17 +field_type: link diff --git a/config/sync/field.field.paragraph.section.field_components.yml b/config/sync/field.field.paragraph.section.field_components.yml index 5ffa5435e..ce54c60a9 100644 --- a/config/sync/field.field.paragraph.section.field_components.yml +++ b/config/sync/field.field.paragraph.section.field_components.yml @@ -7,7 +7,7 @@ dependencies: - paragraphs.paragraphs_type.accordion - paragraphs.paragraphs_type.agenda - paragraphs.paragraphs_type.call_to_action - - paragraphs.paragraphs_type.tabs + - paragraphs.paragraphs_type.card_overlays - paragraphs.paragraphs_type.carousel - paragraphs.paragraphs_type.collection_listing - paragraphs.paragraphs_type.collection_listing_publication @@ -35,6 +35,7 @@ dependencies: - paragraphs.paragraphs_type.slide_deck - paragraphs.paragraphs_type.stats - paragraphs.paragraphs_type.table_of_contents + - paragraphs.paragraphs_type.tabs - paragraphs.paragraphs_type.testimonial - paragraphs.paragraphs_type.testimonial_deck - paragraphs.paragraphs_type.text_with_media @@ -88,9 +89,10 @@ settings: agenda: agenda stats: stats publications: publications + tabs: tabs accordion: accordion + card_overlays: card_overlays slide_deck: slide_deck - tabs: tabs negate: 0 target_bundles_drag_drop: accordion: @@ -108,6 +110,9 @@ settings: call_to_action: weight: -60 enabled: true + card_overlays: + weight: 53 + enabled: true carousel: weight: -44 enabled: true diff --git a/config/sync/paragraphs.paragraphs_type.card_overlays.yml b/config/sync/paragraphs.paragraphs_type.card_overlays.yml new file mode 100644 index 000000000..e5b61c420 --- /dev/null +++ b/config/sync/paragraphs.paragraphs_type.card_overlays.yml @@ -0,0 +1,23 @@ +uuid: 59e5b88b-89bf-4722-98ec-e80b5262ac3a +langcode: en +status: true +dependencies: + module: + - ilr +id: card_overlays +label: 'Card Overlays' +icon_uuid: null +icon_default: null +description: '' +behavior_plugins: + ilr_color: + enabled: true + color_schemes: + light: light + vibrant: vibrant + none: 0 + dark: 0 + color_scheme_default: light + allow_framed_media: 0 + ilr_icon: + enabled: true diff --git a/config/sync/paragraphs.paragraphs_type.card_overlays_item.yml b/config/sync/paragraphs.paragraphs_type.card_overlays_item.yml new file mode 100644 index 000000000..7a505a96a --- /dev/null +++ b/config/sync/paragraphs.paragraphs_type.card_overlays_item.yml @@ -0,0 +1,10 @@ +uuid: 3c90365c-9af4-4d2c-83da-5abd6a8efd6d +langcode: en +status: true +dependencies: { } +id: card_overlays_item +label: 'Card Overlays Item' +icon_uuid: null +icon_default: null +description: '' +behavior_plugins: { } diff --git a/web/themes/custom/union_marketing/scss/components/_card-overlays.scss b/web/themes/custom/union_marketing/scss/components/_card-overlays.scss new file mode 100644 index 000000000..e59e2724f --- /dev/null +++ b/web/themes/custom/union_marketing/scss/components/_card-overlays.scss @@ -0,0 +1,111 @@ +.cu-component--card-overlays { + .cu-section { + &__heading { + width: 100%; + max-width: 896px; + margin-inline: auto; + text-align: center; + + h2.cu-heading { + --cu-font-family: 'futura-pt'; + font-size: 50px; + font-style: normal; + font-weight: 900; + line-height: 56px; + text-transform: uppercase; + } + + .cu-body { + padding-inline: 30px; + + a:not([class]) { + font-weight: 400; + } + } + + &:after { + content: ''; + display: var(--cu-composite-heading-accent-display, block); + width: 100px; + height: 8px; + background: var(--cu-colorscheme-accent); + margin: 0; + } + } + + &__content { + @media (min-width: 1200px) { + margin-bottom: -130px; + } + + .field--field-components { + display: flex; + gap: 32px; + + @media (max-width: 1200px) { + flex-wrap: wrap; + justify-content: center; + } + } + } + } + + .cu-icon { + &__label { + margin-top: 24px; + text-align: center; + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 20px; + letter-spacing: 1.2px; + text-transform: uppercase; + } + } + + .cu-card { + display: flex; + padding: 80px 56px 76px 56px; + flex-direction: column; + align-items: center; + flex: 1 0 0; + + @media (max-width: 1200px) { + flex: 1 0 calc(50% - 32px); + max-width: calc(50% - 32px); + } + + @media (max-width: 992px) { + flex: 1 0 100%; + max-width: 100%; + } + + .cu-heading { + color: $white; + } + + p { + color: $white; + } + + .cu-composite-heading::after { + order: 2; + } + + &__content { + align-items: center; + + .cu-composite-heading { + gap: 5px; + } + + .cu-composite-heading, p { + margin-bottom: 10px; + } + + .cu-button { + margin-bottom: 0; + } + } + } +} \ No newline at end of file diff --git a/web/themes/custom/union_marketing/scss/style.scss b/web/themes/custom/union_marketing/scss/style.scss index 9feea11dd..a2adc6414 100644 --- a/web/themes/custom/union_marketing/scss/style.scss +++ b/web/themes/custom/union_marketing/scss/style.scss @@ -8,6 +8,7 @@ @import "components/agenda"; @import "components/alternate-branding"; @import "components/breadcrumbs"; +@import "components/card-overlays"; @import "components/certificates"; @import "components/deck"; @import "components/dismissible"; diff --git a/web/themes/custom/union_marketing/templates/field/field--paragraph--field-body--card-overlays.html.twig b/web/themes/custom/union_marketing/templates/field/field--paragraph--field-body--card-overlays.html.twig new file mode 100644 index 000000000..7aa5952f2 --- /dev/null +++ b/web/themes/custom/union_marketing/templates/field/field--paragraph--field-body--card-overlays.html.twig @@ -0,0 +1,5 @@ +
+ {% for item in items %} + {{ item.content }} + {% endfor %} +
\ No newline at end of file diff --git a/web/themes/custom/union_marketing/templates/paragraph/paragraph--card-overlays-item.html.twig b/web/themes/custom/union_marketing/templates/paragraph/paragraph--card-overlays-item.html.twig new file mode 100644 index 000000000..ec924f1fd --- /dev/null +++ b/web/themes/custom/union_marketing/templates/paragraph/paragraph--card-overlays-item.html.twig @@ -0,0 +1,16 @@ +{% include '@union/_card.twig' with { + heading: paragraph.field_heading.isEmpty() ? '' : content.field_heading.0, + heading_element: 'h3', + card_content: content|without('field_heading', 'field_link'), + icon_data: cu_icon ? cu_icon : NULL, + button_data: not paragraph.field_link.isEmpty() ? { + text: content.field_link[0]['#title'], + attributes: button_attributes, + url: content.field_link[0]['#url'] + } : NULL, + attributes: attributes.addClass([ + 'cu-component', + 'cu-component--' ~ paragraph.bundle|clean_class, + 'cu-colorscheme--dark' + ]) +} only %} \ No newline at end of file diff --git a/web/themes/custom/union_marketing/templates/paragraph/paragraph--card-overlays.html.twig b/web/themes/custom/union_marketing/templates/paragraph/paragraph--card-overlays.html.twig new file mode 100644 index 000000000..08bc78b28 --- /dev/null +++ b/web/themes/custom/union_marketing/templates/paragraph/paragraph--card-overlays.html.twig @@ -0,0 +1,59 @@ +{# +/** + * @file + * Theme override for displaying 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. + * - render_section: Flag for whether to pass the paragaph through a section template. + * + * @see template_preprocess_paragraph() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'cu-component', + 'cu-component--' ~ paragraph.bundle|clean_class, + 'paragraph', + 'paragraph--type--' ~ paragraph.bundle|clean_class, + view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, + not paragraph.isPublished() ? 'paragraph--unpublished' +] +%} +{% include '@union/_section.twig' with { + attributes: attributes.addClass(classes), + icon_data: paragraph.cu_icon ? paragraph.cu_icon : NULL, + heading: paragraph.field_heading.value, + blurb: content.field_body, + link: content.field_link, + content: content.field_components +} only %} \ No newline at end of file