Heading Component

Following the Atomic Design methodology we are going to build a simple component or pattern. The Heading pattern is an atom which prints a string of text as the title for a page, paragraph, or other component.

As we saw in the Component Architecture page, most components will need the following files:

File type	Purpose
.twig	Component's HTML and Twig logic
.scss	Component's styles
.json or .yml	Component's stock content

Some components may also include:

File type	Purpose
.js	Component's interactive behavior
.md	Component's annotations or specs details

Exercise: Building the component

Component's stock content

Let's start by first identifying the content for the component. Since this is a title field, we only need a string of text. We'll dive into more complex components in future exercises.

NOTE: All components will be created inside src/patterns/components.

On a typical Drupal project the full path may look something like this: <project-root>/web/themes/custom/<your-theme-name>/src/patterns/components/

1. Inside components create a new folder called heading

2. Inside the heading folder create a new file called heading.json

3. Inside heading.json add the following code:

{
  "title": "Welcome to Mediacurrent training!"
}

We just created key/value pair for the heading with a key of title and value of Welcome to the best training workshop!.

Component's Markup

Now let's write some HTML to be able to see the Heading component in the browser.

1. Inside the heading folder create a new file called heading.twig

2. Inside heading.twig add the following code:

<h1 class="heading">{{ title }}</h1>

We created a h1 heading in which we pass the value of title from the json file.

Component's styles

We don't need to write any CSS for this component, but let's at least create a Sass file for when we need to write styles.

1. Inside the heading folder create a new file called heading.scss

2. Inside heading.scss add this code:

// Import site utilities
@import '../../global/utils/init';

.heading {
  color: $color-gray;

  &.center {
    text-align: center;
  }

  &.section-header {
    margin-bottom: 20px;

    @media screen and (min-width: $bp-lg) {
      margin-bottom: 40px;
    }
  }

  // Styles for extra large headings.
  &.heading--large {
    color: $color-gray;
    font-size: 3rem;
    text-align: center;

    @media screen and (min-width: $bp-sm) {
      font-size: 4rem;
    }

    @media screen and (min-width: $bp-md) {
      font-size: 6rem;
    }
  }
}

// Removes underline when headings are links.
.heading a {
  text-decoration: none;
}

• First we import the theme's utilities so we have access to any Sass variables, mixins, breakpoints, etc. We will do this with every new stylesheet we create.

• The remaining code are styles for the heading which include styles for when we need to style headings differently. More on this later.

Compiling the code

Now that the Heading component is done, let's compile the code so we can see it in Pattern Lab.

While in your theme's root directory, run the following commands in your command line and press Return

npm run build

npm run watch

The build command above compiles all scss, twig and js. files, and should build the new Heading component in Pattern Lab. The watch command watches for changes to your code and automatically compiles them. This is great so you don't have to keep compiling your code every time.

At the bottom of the watch command you will notice a list of URLs. In your browser of choice open the following url: http://localhost:3000. This will open Pattern Lab where you can find the Heading pattern under components.