Drupal Paragraph Single Directory Components Pattern

Drupal-Paragraph-Single-Directory-Components-Pattern.md

Drupal Paragraph to Single Directory Components Pattern

Alias: "Paragraphs-SDC"

Drupal Paragraph Component

sequenceDiagram
  Entity->>Paragraph: Field<br/>`field_sdc_components`
  Paragraph->>Theme: Theme override
  Theme->>Theme: `paragraph-MY-COMPONENT.twig.html`
  Theme->>SDC: Include Single Directory Component
  SDC->>SDC: `sdc-my-component`

Loading

Paragraph

paragraph-MY-COMPONENT.twig.html

{{
  include('my_components:sdc-my-component', {
    text: content.field_sdc_title,
    subtitle: content.field_sdc_sub_title,
    media: content.field_sdc_media,
    position: paragraph.fields.field_sdc_image_position.value,
    cta: {
      title: paragraph.fields.field_sdc_link.0.title | default('Find out more'),
      link: render_var(paragraph.fields.field_sdc_link.0.url) | default('/'),
    }
  },
  with_context = false)
}}

Note: For field value without the formatter use: paragraph.fields.MY_FIELD.value. This is useful for select option values or similar.

Single Directory Component

Module Structure

Components to be place inside a module or theme within a components directory.

.my_components
│
├── assets
│   └── css
│       └── component.css
├── components
│   └── sdc-my-component
│       ├── sdc-my-component.component.yml
│       ├── sdc-my-component.css
│       ├── sdc-my-component.js
│       ├── sdc-my-component.twig
│       └── README.md
├── my_components.info.yml
├── my_components.module
├── my_components.services.yml
├── src
└── templates

Component Structure

sdc-my-component
  ├── sdc-my-component.component.yml
  ├── sdc-my-component.css
  ├── sdc-my-component.js
  ├── sdc-my-component.twig

Note: CSS and JS files are optional and loaded only if present.

Files

---

File: sdc-my-component.component.yml

'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json'
name: My Component
status: stable
props:
  type: object
  properties:
    text:
      title: Text
      type: string
    subtitle:
      title: Sub Title
      type: string
    media:
      title: Media
      type: object
    position:
      title: Position
      type: string
    cta:
      title: CTA
      type: object
      properties:
        title:
          title: Text
          type: string
        link:
          title: Path
          type: string

---

File: sdc-my-component.twig

<sdc-my-component class="composition-vertical">
  <div class="headline">
    {{ text }}
    {% if subtitle | length %}
      <h3>{{ subtitle }}</h3>
    {% endif %}
  </div>
  <div class="{{ position }}">
    {{ media }}
  </div>
  <!-- Twig -->
  {{
    include('my_components:sdc-button-cta', {
      title: cta.title,
      link: cta.link,
    },
    with_context = false)
  }}
 </sdc-my-component>

---

File: sdc-my-component.js (optional)

(function(Drupal) {

  Drupal.behaviors.sdcMyComponent = {
    attach(context) {
      console.log('@todo My Component.');
    },
  };

})(Drupal);

---

File: sdc-my-component.css (optional)

@import url("../../assets/css/component.css");

.headline {
    color: green;
    margin: 1em 0;
}