diff --git a/components/card-grid/card-grid.component.yml b/components/card-grid/card-grid.component.yml new file mode 100644 index 00000000..ba486c3a --- /dev/null +++ b/components/card-grid/card-grid.component.yml @@ -0,0 +1,18 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json +name: Card grid +status: experimental +props: + type: object + properties: + title: + type: string + title: Title + description: The title of the card grid + examples: + - Card grid title +slots: + cards: + title: Cards + description: The cards for the card grid + examples: + - "
Card content
" diff --git a/components/card-grid/card-grid.twig b/components/card-grid/card-grid.twig new file mode 100644 index 00000000..5115bad8 --- /dev/null +++ b/components/card-grid/card-grid.twig @@ -0,0 +1,13 @@ +{% + set classes = [ + 'row', + 'row-cols-1', + 'row-cols-md-2', + 'row-cols-lg-3', + 'g-4' + ] +%} +
+ {% block cards %} + {% endblock %} +
diff --git a/components/card/card.component.yml b/components/card/card.component.yml new file mode 100644 index 00000000..1104a4ca --- /dev/null +++ b/components/card/card.component.yml @@ -0,0 +1,50 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json +name: Card +status: experimental +props: + type: object + required: + - title + properties: + image: + $ref: json-schema-definitions://experience_builder.module/image + type: object + title: Image + description: The background image + examples: + - src: images/example-image.jpg + alt: 'Dexter the dog laying on a hammock and smiling' + width: 800 + height: 600 + pretitle: + type: string + title: Pretitle + description: The text above the title + examples: + - Pretitle text + title: + type: string + title: Title + description: The title text + examples: + - Title text + subtitle: + type: string + title: Subtitle + description: The text below the title + examples: + - Subtitle text + summary: + $ref: json-schema-definitions://experience_builder.module/textarea + type: string + title: Summary + description: The summary text + examples: + - "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales maximus augue at tincidunt. Duis in dui maximus libero aliquet scelerisque eu id mi." + link_url: + type: string + format: uri-reference + title: URL + description: The entire card will be clickable if populated + examples: + - https://example.com diff --git a/components/card/card.twig b/components/card/card.twig new file mode 100644 index 00000000..e55e42ae --- /dev/null +++ b/components/card/card.twig @@ -0,0 +1,75 @@ +{% + set classes = [ + 'card', + 'h-100', + 'bg-light', + 'border-0', + 'my-5', + 'overflow-hidden', + 'position-relative', + not image ? 'p-0' + ] +%} +{% + set inner_classes = [ + 'd-flex', + 'flex-column', + 'h-100', + 'position-relative', + image ? 'flex-md-row' + ] +%} +{% + set content_classes = [ + 'd-flex', + 'flex-column', + 'justify-content-center', + 'p-3', + image ? 'ps-md-4 border-start border-6 border-transparent' : 'p-4 p-sm-5', + image ? 'flex-md-fill' + ] +%} + +
+ {% if image %} +
+ {{ image.alt }} +
+ {% endif %} +
+
+ {% if pretitle %} +
+ {{ pretitle }} +
+ {% endif %} +

+ {% if link_url %} + {{ title }} + {% else %} + {{ title }} + {% endif %} +

+ {% if subtitle %} +
+ {{ subtitle}} +
+ {% endif %} +
+
+ {% if summary %} +
+ {{ summary }} +
+ {% endif %} +
+
+ {% if link_url %} +
+ + + +
+ {% endif %} +
+ diff --git a/components/card/images/arrow.svg b/components/card/images/arrow.svg new file mode 100644 index 00000000..b72fcb23 --- /dev/null +++ b/components/card/images/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/card/images/example-image.jpg b/components/card/images/example-image.jpg new file mode 100644 index 00000000..579e611c Binary files /dev/null and b/components/card/images/example-image.jpg differ diff --git a/components/feature/feature.component.yml b/components/feature/feature.component.yml new file mode 100644 index 00000000..75911123 --- /dev/null +++ b/components/feature/feature.component.yml @@ -0,0 +1,55 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json + +name: Feature + +status: experimental + +props: + type: object + required: + - title + properties: + title: + type: string + title: Title + description: The title text + examples: + - Cool featured content + summary: + $ref: json-schema-definitions://experience_builder.module/textarea + type: string + title: Summary + description: The optional summary text + examples: + - A short and engaging summary to highlight the featured content and get + your audience interested in learning more about it. + link_text: + type: string + title: Link text + description: "The optional link text, default: Learn more" + default: Learn more + examples: + - Learn more + link_url: + type: string + format: uri + title: Link URL + description: The link URL for the link text + examples: + - https://example.com + image: + $ref: json-schema-definitions://experience_builder.module/image + type: object + title: Image + description: "Image for the card. Recommended size: 4:3 aspect ratio" + examples: [] + image_position: + type: string + title: Image position + description: "The position for the image, default: left" + default: left + enum: + - left + - right + examples: + - left diff --git a/components/feature/feature.twig b/components/feature/feature.twig new file mode 100644 index 00000000..8a8079b2 --- /dev/null +++ b/components/feature/feature.twig @@ -0,0 +1,50 @@ +{% + set classes = [ + 'bg-light', + 'border-0', + 'position-relative', + 'overflow-hidden' + ] +%} +{% + set inner_classes = [ + 'd-flex', + 'flex-column', + 'flex-md-row', + image and image_position and image_position == 'right' ? 'flex-md-row-reverse' + ] +%} +{% + set accent_bar_classes = [ + 'position-absolute', + 'top-0', + 'bg-primary', + image and image_position and image_position == 'right' ? 'end-0' : 'start-0' + ] +%} + + +
+
+ {% if image %} +
+ {{ image.alt }} +
+ {% endif %} +
+
+

+ {{ title }} +

+
+ {{ summary }} +
+
+ {% if link_url %} +
+ {{ link_text|default('Learn more'|t) }} +
+ {% endif %} +
+
+ diff --git a/components/heading/heading.component.yml b/components/heading/heading.component.yml new file mode 100644 index 00000000..c3c34517 --- /dev/null +++ b/components/heading/heading.component.yml @@ -0,0 +1,27 @@ +'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json' +name: Heading +status: experimental +description: A heading element +props: + type: object + required: + - text + - element + properties: + text: + type: string + title: Text + description: The heading text. + examples: ['A heading element'] + element: + type: string + title: Element + description: The HTML element to use. + examples: [h1, h2, h3, h4, h5, h6] + enum: + - h1 + - h2 + - h3 + - h4 + - h5 + - h6 diff --git a/components/heading/heading.twig b/components/heading/heading.twig new file mode 100644 index 00000000..b642952e --- /dev/null +++ b/components/heading/heading.twig @@ -0,0 +1,22 @@ +{% + set classes = [ + 'mb-4', + element == 'h1' ? 'display-3 fw-bold lh-sm', + element == 'h2' ? 'display-5 fw-bold lh-sm', + element == 'h3' ? 'h2 fw-bold lh-base', + element == 'h4' ? 'h3 fw-bold lh-base', + element == 'h5' ? 'h5 fw-bold lh-base text-uppercase', + element == 'h6' ? 'h6 fw-semibold lh-sm text-uppercase small', + ] +%} +{% + set style_attrs = { + 'h1': 'letter-spacing: -0.02em;', + 'h2': 'letter-spacing: -0.02em;', + 'h3': 'letter-spacing: -0.01em;', + 'h4': 'letter-spacing: 0.09em;', + 'h5': 'letter-spacing: 0.12em;', + 'h6': 'letter-spacing: 0.2em;', + } +%} +<{{ element }}{{ attributes.addClass(classes) }}{% if style_attrs[element] is defined %} style="{{ style_attrs[element] }}"{% endif %}>{{ text }} diff --git a/components/heading/thumbnail.png b/components/heading/thumbnail.png new file mode 100644 index 00000000..86d96b76 Binary files /dev/null and b/components/heading/thumbnail.png differ diff --git a/components/hero/hero.component.yml b/components/hero/hero.component.yml new file mode 100644 index 00000000..ad67a0e3 --- /dev/null +++ b/components/hero/hero.component.yml @@ -0,0 +1,55 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json +name: Hero +status: experimental +props: + type: object + required: + - title + - link_url_1 + properties: + title: + type: string + title: Title + description: The title text + examples: + - Hero title text + summary: + $ref: json-schema-definitions://experience_builder.module/textarea + type: string + title: Summary + description: The optional summary text + examples: + - Hero summary is an optional field and can span multiple lines + image: + $ref: json-schema-definitions://experience_builder.module/image + type: object + title: Image + description: "Image for the hero. Recommended size: 2:1 aspect ratio" + examples: + - src: images/example-hero.jpg + alt: 'Grand Canyon with snow' + width: 2000 + height: 1500 + link_text_1: + type: string + title: Primary link text + default: Learn more + examples: + - Primary link + link_url_1: + type: string + format: uri + title: Primary link URL + examples: + - https://example.com + link_text_2: + type: string + title: Secondary link text + examples: + - Secondary link + link_url_2: + type: string + format: uri + title: Secondary link URL + examples: + - https://example.com diff --git a/components/hero/hero.twig b/components/hero/hero.twig new file mode 100644 index 00000000..f44d0f55 --- /dev/null +++ b/components/hero/hero.twig @@ -0,0 +1,77 @@ +{% + set hero_classes = [ + 'position-relative', + 'overflow-hidden' + ] +%} +{% + set container_classes = [ + 'container', + 'd-flex', + 'flex-column', + 'position-relative', + 'min-vh-50' + ] +%} +{% + set image_classes = [ + 'w-100', + 'h-auto', + 'object-fit-cover', + 'd-block', + 'd-lg-none' + ] +%} +{% + set image_bg_classes = [ + 'd-none', + 'd-lg-block', + 'position-absolute', + 'top-0', + 'start-0', + 'w-100', + 'h-100', + 'object-fit-cover' + ] +%} +{% + set data_wrapper_classes = [ + 'row', + 'mt-auto', + 'pt-4', + 'pt-lg-5' + ] +%} +{% + set data_classes = [ + 'col-12', + 'col-lg-9', + 'bg-white', + 'py-4', + 'py-lg-5', + 'ms-lg-n3' + ] +%} + + + {{ image.alt }} +
+ {{ image.alt }} +
+
+
+

{{ title }}

+ {% if summary %} +

{{ summary }}

+ {% endif %} +
+ {{ link_text_1|default('Learn more'|t) }} + {%- if link_text_2 and link_url_2 -%} + {{ link_text_2 }} + {% endif %} +
+
+
+
+
+ diff --git a/components/hero/images/example-hero.jpg b/components/hero/images/example-hero.jpg new file mode 100644 index 00000000..86bc3513 Binary files /dev/null and b/components/hero/images/example-hero.jpg differ diff --git a/components/testimonial/images/arrow.svg b/components/testimonial/images/arrow.svg new file mode 100644 index 00000000..55f9dfa1 --- /dev/null +++ b/components/testimonial/images/arrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/components/testimonial/images/example-gizmo.jpg b/components/testimonial/images/example-gizmo.jpg new file mode 100644 index 00000000..a401026b Binary files /dev/null and b/components/testimonial/images/example-gizmo.jpg differ diff --git a/components/testimonial/testimonial.component.yml b/components/testimonial/testimonial.component.yml new file mode 100644 index 00000000..80e61754 --- /dev/null +++ b/components/testimonial/testimonial.component.yml @@ -0,0 +1,51 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json +name: Testimonial +status: experimental +props: + type: object + required: + - content + - name + properties: + image: + $ref: json-schema-definitions://experience_builder.module/image + type: object + title: Image + examples: + - src: images/example-gizmo.jpg + alt: 'Gizmo (an ugly dog) smiling for the camera' + width: 400 + height: 400 + content: + $ref: json-schema-definitions://experience_builder.module/textarea + type: string + title: Content + description: The testimonial content + examples: + - "I don't always require pets. But when I do, I insist they be bestowed upon my belly." + name: + type: string + title: Name + description: The name associated with the testimonial + examples: + - Gizmo Main + role: + type: string + title: Role + description: Role / Extra info + examples: + - "The most interesting dog in the world" + link_text: + type: string + title: Link text + description: "The optional link text, default: Learn more" + default: Learn more + examples: + - Learn more + link_url: + type: string + format: uri-reference + title: Link URL + description: The link URL for the link text + examples: + - https://example.com diff --git a/components/testimonial/testimonial.twig b/components/testimonial/testimonial.twig new file mode 100644 index 00000000..22f86d44 --- /dev/null +++ b/components/testimonial/testimonial.twig @@ -0,0 +1,71 @@ +{% + set classes = [ + 'my-5', + 'position-relative' + ] +%} +{% + set top_classes = [ + 'd-flex', + 'flex-column-reverse', + 'flex-md-row-reverse', + 'align-items-center', + 'gap-4', + 'mt-4' + ] +%} +{% + set content_classes = [ + 'flex-grow-1', + 'position-relative', + 'ps-5', + 'border-start', + 'border-4', + 'border-light', + 'font-serif', + 'fs-4', + 'lh-base', + 'my-0', + 'my-md-4' + ] +%} + + +
+ {% if image.src %} +
+ {{ image.alt }} +
+ {% endif %} +
+ " + {{ content }} +
+
+ + {% if name or role %} + + {%- if name -%} + {{ name }} + {%- endif -%} + {%- if role -%} + + | + {{ role }} + + {%- endif -%} + + {% endif %} + + {% if link_url %} +
+ + {{ link_text|default('Learn more'|t) }} + + + + +
+ {% endif %} + diff --git a/dxpr_theme.info.yml b/dxpr_theme.info.yml index 272b0e0a..f2e585e7 100644 --- a/dxpr_theme.info.yml +++ b/dxpr_theme.info.yml @@ -43,6 +43,8 @@ libraries-override: libraries-extend: gin/gin_toolbar: - dxpr_theme/gin_toolbar + views/views.module: + - dxpr_theme/views config: install: diff --git a/dxpr_theme.libraries.yml b/dxpr_theme.libraries.yml index 81e33c00..d886d77e 100644 --- a/dxpr_theme.libraries.yml +++ b/dxpr_theme.libraries.yml @@ -187,3 +187,13 @@ custom_animations: css: theme: css/animations-dxpr.css: {} + +# SDC Component Libraries +views: + dependencies: + - core/components.dxpr_theme--card + - core/components.dxpr_theme--card-grid + - core/components.dxpr_theme--heading + - core/components.dxpr_theme--feature + - core/components.dxpr_theme--hero + - core/components.dxpr_theme--testimonial diff --git a/templates/node--card.html.twig b/templates/node--card.html.twig new file mode 100644 index 00000000..c513a7c2 --- /dev/null +++ b/templates/node--card.html.twig @@ -0,0 +1,90 @@ +{# +/** + * @file + * Implementation to display a node card. + * + * Uses Bootstrap 5.3 utility classes for the card component. + */ +#} + +{{ attach_library('core/components.dxpr_theme--card')}} + +{% + set classes = [ + 'node', + 'node--type-' ~ node.bundle|clean_class, + node.isPromoted() ? 'node--promoted', + node.isSticky() ? 'node--sticky', + not node.isPublished() ? 'node--unpublished', + view_mode ? 'node--view-mode-' ~ view_mode|clean_class, +] +%} + +{% set has_image = content.field_featured_image|render|striptags('img')|trim %} +{% + set card_classes = [ + 'card', + 'h-100', + 'bg-light', + 'border-0', + 'my-5', + 'overflow-hidden', + 'position-relative', + not has_image ? 'p-0' + ] +%} +{% + set inner_classes = [ + 'd-flex', + 'flex-column', + 'h-100', + 'position-relative', + has_image ? 'flex-md-row' + ] +%} +{% + set content_classes = [ + 'd-flex', + 'flex-column', + 'justify-content-center', + 'p-3', + has_image ? 'ps-md-4 border-start border-6 border-transparent' : 'p-4 p-sm-5', + has_image ? 'flex-md-fill' + ] +%} + + +
+ {{ title_suffix }} + {% if has_image %} +
+ {{ content.field_featured_image }} +
+ {% endif %} +
+
+

+ {{ label }} +

+ {% if display_submitted %} +
+ + {{ date }} + + {{ metadata }} +
+ {% endif %} +
+
+
+ {{ content|without('field_featured_image', 'links') }} +
+
+
+
+ + + +
+
+ \ No newline at end of file