Single Directory Components (SDC)

This page will show an example of different Single Directory Components (SDC) which is Drupals implementation of the concept of "Components" often found in common JavaScript frameworks.

In this first example, Jeannie developed the Accordion SDC and provided it to me to implement.

These are the steps that took place:

1. Jeannie developed the SDC for the Accordions and pushed it up to the code repository
2. I pulled the code down and now had /components/accordion and /components/accordion-item in the theme
   1. These directories contain the HTML, CSS and JS required to display an Accordion element, but are currently disconnected from everything
3. I read the README files in each SDC:
   1. For Accordion I'm going to need an array of accordion items and a boolean toggle for toggling the Expand and Collapse buttons
   2. For acordion items I'm going to need a Title string and Content field
4. In Drupal I create an Accordion Item paragraph with a Title and Content field, and an Accordion Container paragraph with a Boolean field for the toggle, and a Paragraph reference field for the Accordion Items
5. I add an Accordion to a page with some test data to ensure it's working.
   This shows me a very basic layout.
   I inspect the code to find the suggested Twig file names I'll need:
   1. field--paragraph--field-accordions.html.twig
   2. paragraph--accordion.html.twig
   3. paragraph--accordion-item.html.twig
6. I create the Twig files with the example code from the README files, changing the field field names to match the fields I created
7. Clear cache and refreshed the page and it was done

This took less than 10 minutes to go from nothing, to this:

Image

And then to this:

Image