Single Directory Components

About Single Directory Components (SDC)

SiteFarm has several reusable components that a subtheme can use to make theming custom content easier. These components reside in both the sitefarm_core module and sitefarm_one theme.

Before moving on, you should be aware of the official documentation for SDC.

https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components

SDC Basics

Each component lives in its own directory with at least a *.component.yml file with config and a *.twig file containing the html.

Single Directory Component folder structure

The *.component.yml file has the schema for the props and slots allowed in the component. This informs you about what kind of content you can pass into a component.

The *.twig takes the data you pass into it and renders it in the specific markup.

Props are strictly typed content like a string or boolean. Slots allow any content such as other components or html.

Using an SDC in a theme.

In a twig file, you can use the include() function to insert a component.

{{ include(
  'sitefarm_one:focal-link', {
    title: 'My Focal Link',
    url: 'https://www.example.com',
    icon_class: 'fa-solid fa-house',
  },
  with_context = false
) }}

This will render a focal link:

SDC Focal Link example
  1. The first parameter is the name of the component: theme_name:component-name
  2. The second parameter is an object of key/value pairs. The keys are the names of the props/slots defined in the *.component.yml file. The values are the data you want to pass into the component.
  3. The final parameter with_context = false ensures that other variables and data from the current twig file don't get passed into the component.

Using Components in Components

You can pass components into the slots of another component by using twig set tags.

For example, if you want to use two tab-panel components in the tab-panel-group, you can do so by putting each tab-panel inside a variable and then passing that variable into the tab-panel-group slot.

FYI: these components reside in the sitefarm_core module.

{% set tabs %}
  {{ include(
    'sitefarm_core:tab-panel', {
      name: 'panel-1',
      title: 'Panel 1',
      content: 'Panel 1 content goes here.',
    },
    with_context = false
  ) }}
  {{ include(
    'sitefarm_core:tab-panel', {
      name: 'panel-2',
      title: 'Panel 2',
      content: 'Panel 2 content goes here.',
    },
    with_context = false
  ) }}
{% endset %}

{{ include(
  'sitefarm_core:tab-panel-group', {
    tab_panels: tabs,
  },
  with_context = false
) }}

The result will look like this:

Tab Panel Group example