-
{% endif %}
{% for item in items %}
{{ _story }}
'
slots:
title: "Dapibus ac facilisis"
subtitle: "Cras justo odio"
props:
heading_level: 5
```
--------------------------------
### YAML Story Definition for a Component
Source: https://project.pages.drupalcode.org/ui_patterns/2-authors/1-stories-and-library
Defines a story for a component, specifying its name, targeting component, slots, and properties. This is useful for documenting specific states or variations of a component.
```yaml
name: In latin
component: "bootstrap:card"
slots:
title: "Dapibus ac facilisis"
subtitle: "Cras justo odio"
props:
heading_level: 5
```
--------------------------------
### Schema Compatibility Checking (PHP)
Source: https://project.pages.drupalcode.org/ui_patterns/3-devs/3-internals
This snippet outlines the file structure for schema compatibility checking in UI Patterns 2. It includes classes for canonicalization, checking compatibility, resolving references, and handling scalar types. These components are crucial for ensuring that UI Patterns works with various SDC components by inferring prop types.
```php
src/SchemaManager/
├── Canonicalizer.php
├── CompatibilityChecker.php
├── ReferencesResolver.php
├── ScalarCompatibilityTrait.php
└── StreamWrapper.php
```
--------------------------------
### YAML Slot Definition with Drupal Render API Prefix
Source: https://project.pages.drupalcode.org/ui_patterns/2-authors/1-stories-and-library
Illustrates using the Drupal render API prefix ('#') for defining slot content, such as an HTML image tag. This is an alternative to the 'type', 'tag', and 'attributes' keys.
```yaml
slots:
picture:
"#type": html_tag
"#tag": img
"#attributes":
src: http://example.org/path/to/media.png
```
--------------------------------
### YAML Nested Component Story Definition
Source: https://project.pages.drupalcode.org/ui_patterns/2-authors/1-stories-and-library
Demonstrates how to define nested components within the slots of a story. This allows for complex component structures and interactions to be documented.
```yaml
slots:
bottom:
type: component
component: "my_project:transcription"
slots:
text: "When they got to the road he stopped the boy with his hand."
actions:
type: component
component: "material:button"
slots:
label: Bookmark
```
--------------------------------
### Twig: Generate Dynamic IDs for Components
Source: https://project.pages.drupalcode.org/ui_patterns/2-authors/2-best-practices
Provides methods for generating unique IDs for HTML elements within components to ensure they are repeatable and nestable. It shows how to use the Twig `random()` function or inject an ID via a prop, contrasting with the invalid practice of hardcoding IDs.
```twig
Lorem ipsum
```
```twig
{{ attributes.setAttribute("id", id) }}
```
--------------------------------
### Split Variant Modifier Classes in Twig (Twig)
Source: https://project.pages.drupalcode.org/ui_patterns/2-authors/2-best-practices
This Twig snippet illustrates how to split a variant string and apply multiple modifier classes to an element, useful when a variant requires several distinct CSS classes.
```twig
{% set variants = variant|split('__')|map(v => v|replace({(v): 'progress-bar-' ~ v})) %}
{% set attributes = attributes.addClass(variants) %}
{% set slides = slides and slides is not sequence ? [slides] : slides %}
{% for slide in slides %}
{{ title}}
```
--------------------------------
### Set Default Variant with Conditional Class in Twig (Twig)
Source: https://project.pages.drupalcode.org/ui_patterns/2-authors/2-best-practices
This Twig code ensures a component renders correctly with a default appearance when no variant is specified or when the 'default' variant is selected. It conditionally applies a modifier class.
```twig
{% set attributes = variant and (variant != 'default') ? attributes.addClass('btn-group--' ~ variant) : variant %}
{{ slide }}
{% endfor %}
{{ value }}
```
--------------------------------
### SDC Component Status Enum Definition
Source: https://project.pages.drupalcode.org/ui_patterns/faq
This YAML snippet shows the definition of the 'status' enum for SDC components. This property is used to indicate the development status of a component (experimental, stable, deprecated, obsolete) and is displayed in the component library.
```yaml
status:
type: string
title: Development Status
description:
Use this property to identify if the component can be safely used in
production.
enum:
- experimental
- stable
- deprecated
- obsolete
```
--------------------------------
### Using Drupal Attributes for Component Wrappers
Source: https://project.pages.drupalcode.org/ui_patterns/2-authors/2-best-practices
Shows how to correctly use the Drupal `attributes` object within a Twig template to add classes and attributes to the component's wrapper element. This is essential for integration with various Drupal modules.
```twig