Building Components

This workshop is hands-on and we have put together a series of exercises which will help you ease into the component based development process. We start with exercises for creating simple components and from there we'll dive into more advanced tasks in which we will integrate the components with Drupal.

Components we will build in this chapter

Component	Description
Eyebrow	Renders a string of text. Typically used to label or tag content.
Heading	Used as section's or page's titles. It uses an optional url and provides mechanism for changing heading level (h1 - h6).
Button	Used as Call To Action (CTA) throughout the website. It offers an optional URL or it can be rendered as a <button> element.
Movie Card	A movie card is a teaser view of a full movie node. It contains an image, title, teaser, rating and links to the the full movie node. They are used to display a collection of movies organized by genre.
Featured Movie	The featured movie is a large version of a movie card which is displayed on the homepage. Think of this component as a hero.
Movie Card Collection	A movie collection is a group of movies organized by various categories (i.e. Horror, Action, Comedy, etc.).
Movie List	A multi-row listing of movies organized by movie genre.

Additional pre-built components

In the interest of time, we have provided a hand-full of pre-built components which will be used in this training. These components include:

Component	Description
Favorites	Allows us to add movies to our play list.
MPAA Rating	Provides the MPAA rating info (i.e. PG-13).
Average Rating	Provides a 5 star rating mechanism.

In this chapter we will also learn about Drupal Libraries, which is how we add CSS and Javascript to a Drupal 8 theme, as well as Component Variations. Component variations allow us to use an existing component and create a new version of it with little or big changes in its look/feel or behavior.