An example component

What's inside a component and how to use it

For this example, let's take the Bootstrap Accordion component, check the code, and learn one line at a time.

You can find the Accordion component in the Radix theme here, we will share some snippets below as we move along:

The first thing to do before working with a component that you are not familiar with is to check its README file, it's always within the same directory, and it usually comes with a Usage section, something similar to this:

{% include 'radix:accordion' with {
  title: 'Yolo!',
  title_tag: 'h2',
  items: [
    {
      title: 'Item 1',
      title_tag: 'h3',
      content: 'Content 1',
    },
    {
      title: 'Item 2',
      title_tag: 'h3',
      content: 'Content 2',
    },
    {
      title: 'Item 3',
      title_tag: 'h3',
      content: 'Content 3',
    },
  ],
  flush: true,
} %}

Looking at the code above and considering the Bootstrap documentation for the Accordion block, we've used an array of items to pass what would be in the "Accordion Set" here, so each accordion item is an object itself

Another helpful place to learn what are the options that we can pass along with the include in this example is to look into the twig file itself and check the comment block on top:

/**
 * @file
 * Accordion component.
 *
 * Bootstrap Documentation
 * https://getbootstrap.com/docs/5.3/components/accordion/
 *
 * Full List Utility Classes
 * https://github.com/twbs/bootstrap/blob/v5.3.0/dist/css/bootstrap.css#L214
 *
 * Available properties:
 * - title (string) (default: '')
 * - title_tag (string) (default: 'h2')
  * - title_link: (link object) (default: {})
  * - title_attributes: (drupal attrs)
  * - id (int) (default: random(1000))
  * - flush (boolean) (default: false)
  * - items (array) (default: []): format: [
  *     {
  *       title: (string),
  *       title_tag: (string),
  *       content: (block),
  *       stay_open (boolean) (default: false)
  *     },
  *   ]
  * - open_item_id (int) (default: 0)
  *
  * usage example: @see README.md
  *
 */

All components usually come with "Available properties" or "Available config" or similar, those are the dynamic properties we can change without needing to adjust the component itself.

So in the Accordion component above, we can override or pass:

• title

• title_tag

• title_link

• id

• flush

• items

• open_item_id

While looking at the Accordion component code, it is worth noting that for the title, we are using the radix:heading component:

{% if title is not empty %}
  {% include 'radix:heading' with {
      html_tag: 'h2',
      content: title,
      title_link: title_link,
      attributes: title_attributes,
      heading_utility_classes: ['block__title']
    }
  %}
{% endif %}

The same concept applies here, so simply to define a h2 tag with a title and link, we can re-use the radix:heading component.

Note the heading_utility_classes in the above code, we have [COMPONENT-NAME]_utility_classes used quite extensively in almost all components, the use case is just simply if you need more custom classes, you could pass it without needing to manually edit the actual Radix component.

To further understand the ins and outs of a component, study each component separately.