Add Drupal CMS components

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:
+      - "<div class=\"card\">Card content</div>"

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'
+  ]
+%}
+<div class="{{ classes|join(' ') }}">
+  {% block cards %}
+  {% endblock %}
+</div>

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

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'
+  ]
+%}
+<article{{ attributes.addClass(classes) }}>
+  <div class="{{ inner_classes|join(' ') }}">
+    {% if image %}
+      <div class="d-flex flex-md-fill">
+        <img loading="lazy" src="{{ image.src }}" alt="{{ image.alt }}" class="w-100 h-auto object-fit-cover ratio ratio-16x9">
+      </div>
+    {% endif %}
+    <div class="{{ content_classes|join(' ') }}">
+      <header class="d-flex flex-column gap-2 mb-3">
+        {% if pretitle %}
+          <div class="text-muted text-uppercase fw-semibold" style="font-size: 0.75rem; letter-spacing: 0.15rem;">
+            {{ pretitle }}
+          </div>
+        {% endif %}
+        <h3 class="h4 mb-0 text-dark">
+          {% if link_url %}
+            <a href="{{ link_url }}" class="text-decoration-none text-dark stretched-link">{{ title }}</a>
+          {% else %}
+            {{ title }}
+          {% endif %}
+        </h3>
+        {% if subtitle %}
+          <div class="text-muted small" style="letter-spacing: 0.0625rem;">
+            {{ subtitle}}
+          </div>
+        {% endif %}
+      </header>
+      <div class="d-flex flex-column gap-3">
+        {% if summary %}
+          <div class="card-text">
+            {{ summary }}
+          </div>
+        {% endif %}
+      </div>
+    </div>
+    {% if link_url %}
+      <div class="position-absolute bottom-0 end-0 p-3 text-primary">
+        <svg width="16" height="16" fill="currentColor" class="bi bi-arrow-right">
+          <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
+        </svg>
+      </div>
+    {% endif %}
+  </div>
+</article>

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

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'
+  ]
+%}
+
+<article{{ attributes.addClass(classes) }}>
+  <div class="{{accent_bar_classes|join(' ')}}" style="width: 116px; height: 0.25rem; z-index: 1;"></div>
+  <div class="{{ inner_classes|join(' ') }}">
+    {% if image %}
+      <div class="position-relative flex-md-fill d-flex">
+        <img src="{{ image.src }}" alt="{{ image.alt }}" class="w-100 h-auto object-fit-cover" style="aspect-ratio: 4/3;">
+      </div>
+    {% endif %}
+    <div class="d-flex flex-column flex-md-fill justify-content-between">
+      <div class="d-flex flex-column gap-2 flex-grow-1 justify-content-center p-4 p-md-5 {{ not image ? 'py-5' }}">
+        <h3 class="display-6 fw-bold lh-base mb-0">
+          {{ title }}
+        </h3>
+        <div class="font-serif">
+          {{ summary }}
+        </div>
+      </div>
+      {% if link_url %}
+        <div class="d-flex {{ image and image_position and image_position == 'right' ? 'justify-content-start' : 'justify-content-end' }}">
+          <a class="btn btn-primary fw-bold small px-3 py-2 text-decoration-none" href="{{ link_url }}">{{ link_text|default('Learn more'|t) }}</a>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+</article>

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

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 }}</{{ element }}>

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