Skip to content

How to create a new component

Stephen Mustgrave edited this page Aug 12, 2024 · 3 revisions

Please note that UI Patterns 2.x is in current active development

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

  1. In your theme create a components directory
  2. Create a directory for the component name, going to use UI Suite USWDS logo. See logo.component.yml
  3. The name of the directory must match the component name, example logo.component.yml
  4. In the component.yml file you can add what props and slots are needed for your component.
name: Logo
description: 'Site logo.'
group: Layout
slots:
  content:
    title: 'Content of logo'
    description: 'Content to display in the logo, example slogan and/or site name.'
props:
  type: object
  properties:
    link_attributes:
      title: 'Label attributes'
      description: 'The attributes used on the link around the logo and text.'
      $ref: 'ui-patterns://attributes'
    site_logo:
      title: Logo
      description: 'Expect absolute or relative URL.'
      $ref: 'ui-patterns://string'

Note: The $ref is specific to UI Patterns not SDC. At this time not any documentation for the list of $refs but would look UI Suite USWDS for examples.

  1. The twig template must also match component name, example logo.twig