An example component

Poll

For this example will dive deeper into the poll component.

Webhaven depends on the drupal/poll module to add poll functionalities to every Webhaven website.

You can see a poll in action here: poll example.

We let Drupal know that it should load our Webhaven component. How do we do this? You'll notice poll.html.twig under /templates/system has the following code:

# Include the Webhaven poll component
{% include 'webhaven:poll' %}

Components structure

/poll
|
|- poll.twig
|- poll.component.yml
|- poll.scss

Poll.twig

{%
  set classes = [
  'poll-component',
  'viewmode-' ~ elements['#view_mode']|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
  {% if content %}
    {{- content -}}
  {% endif %}
</div>

The poll.twig file renders the DOM structure for every poll, you'll notice we add classes to it to make it easier to layout.

Poll.component.yml

name: Poll
description: "Styling of the poll component"
props:
  type: object
  properties: {}

We define our poll component, you'll notice the poll component doesn't have any props defined. 

A component can have props and/or slots. If you want to learn more on props & slots I advice you to read this documentation page.

Poll.scss

@import "../../src/scss/init";

.poll-component {
  .poll {
    margin: 0 auto;
    background-color: var(--color-card-bg);
    padding: var(--spacing-8);
    border-radius: var(--border-radius);

    h3.poll-question {
      font-size: var(--font-2xl);
    }
  }
}

You'll notice there is an import, this makes sure every component that needs it gets access to all our css vars that are used. If you want to learn more on css vars I advice you to read this documentation page.

We then give some basic mark-up to the poll container and the poll title.

That's it! All other files will be automatically generated when you run npm run watch or npm run production. In this particular this this means the poll.css and poll.css.map files are automatically generated for the component.