What Component Schema does

Component Schema addresses a number of common needs when developing theme-level components.

Once your schema is defined, Component Schema does much of the "heavy lifting", allowing you to write very simple Twig templates. Component Schema includes:

• A Twig extension that processes variables passed into a template, providing default values and handling cases like adding one or more classes to a wrapper element based on values in boolean or string fields. For example, passing a value of $is_rounded = TRUE might result in an is-rounded class being added. Because this logic is implemented in the Twig extension, no additional processing is needed in the Twig template for the component.
• Integration with the UI Patterns and UI Patterns Settings modules so your components are available for configuration through the Drupal admin UI.
• Integration with the Style Guide module so that your components are displayed in a style guide along with extensive documentation on the variables passed into the component template, generated programmatically based on the component schema.

Variables shared across multiple components

Often a particular variable will be shared across multiple components. For example, a color variable might be used in both a button component and a card.

Using Component Schema you can define a set of common variables that are available for use in any component provided by a given module or theme.

Default values

Often a variable will have a default value. While this requirement can be handled through use of the Twig default filter, a schema-based approach saves the need.

Support for Twig strict_variables

When Twig is set to enforce strict_variables, any expected variable that is not set will cause an exception. Component Schema eases support for strict_variables by defaulting all variables (with NULL being the most common default). For a related issue on Drupal core see #2445705: Core themes should not throw exceptions when strict_variables is TRUE.

Helper methods

When writing a component there are various needs you might hit in multiple components, such as rendering attributes or error messages. Component Schema provides a set of Twig macros to address these requirements.

Embedded components

Often one component will embed one or more other components. For example, a button may embed an icon. Component Schema faciliates embedded components via a component_type variable property.

Styleguide integration

A common requirement is a visual styleguide. Component Schema integrates with the Style Guide Drupal module such that once a data structure has been declared for a given component examples show up in the style guide.

Self-documenting code

Styleguide integration includes a detailed, human-readable representation of the component's variables, including support for links to external documentation.