Building components

2. Creating the Heading component

Now that we have some basic idea of the various pieces for building a component, let's build another component which will follow the same principles as Eyebrow, but it includes logic and conditions.

Let's build a Heading component which typically will be used for page or sections titles.

Inside nitflex_dev_theme/src/components/ create a new directory called heading
Inside the heading directory create a new file called heading.json.
Inside heading.json copy the following code:
```
{
 "title": "Back to being BAD"
}
```
We just created a JSON object for the heading with a key of title and value of Back to being BAD.

Inside the heading directory create a new file called heading.twig.
Inside heading.twig copy the following code:
```
<h1 class="heading">{{ title }}</h1>
```
We created a H1 heading in which we pass the value of title from JSON.
Inside the heading directory create a new file called heading.scss.

Inside heading.scss copy this code:

// Heading
//
// This is the heading component.
//
// Markup: heading.twig
//
// Style guide: Components.Heading

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

.heading {
 @include font-stack-base;
 font-weight: $font-weight-bold;
 line-height: 1.3;
}

Just like we did with the Eyebrow component, the comments in the SCSS file allows KSS Node to create this component in the styleguide.

Improving the heading component

The heading component looks good and it will work great as long as we always want to use a H1. However, the component is pretty static and it does not offer too much value. What if we wanted to use a h2 or h3, etc.? Then the heading component would problable not work because we have no way of changing the heading level from h1 to any other level.

Let's rework the heading component so we make it more dynamic and we have the ability to choose a different heading level when is time to use it.

Rewriting the JSON object

Update the JSON code to look like this:

{
  "heading": {
    "title": "Back to being BAD",
    "url": "#",
    "heading_level": "",
    "classes": ""
  }
}

This time we've nested each of the keys for the heading component in a heading object so it is clear where those keys belong. This is good as we may have other components with the same keys. In addition, we've added url, heading_level, and classes. These three new keys will make the component more dynamic.

The url key, if present, will allow us to wrap the title in an <a> tag, otherwise the title will be printed as plain text.
The heading_level variable is something we will use later as we start nesting the heading component into other components. This will allows us to change our headings from say h1 to h2 if we need to. More on this later.
The classes key is a placeholder so we can pass a modifier CSS class when we make use of this component. We did this with Eyebrow.

Rewriting the Twig code like this:

Update your twig file code to look like this:

{# Default to h2 (heading level 2) if no heading level is supplied. #}
<h{{ heading.heading_level|default('2') }} class="heading {{ heading.classes ? ' ' ~ heading.classes }}
  {{- heading.attributes ? heading.attributes.class -}}"
  {{- heading.attributes ? heading.attributes|without(class) -}}>
  {% if heading.url %}
    <a href="{{ heading.url }}">{{ heading.title }}</a>
  {% else %}
    {{ heading.title }}
  {% endif %}
</h{{ heading.heading_level|default('2') }}>

Let's break things down to explain what's happening here:

We've assigned a default value of 2 to the heading level variable. This value can be changed per use case if needed.
We are also passing the "classes" variable so we can apply custom css classes when we use the heading.
In addition, we are preparing for when we integrate this component with Drupal by applying the attributes array which will provide us with Drupal's specific functionality. More on this later.
Finally, If a url is present in the heading, we wrap the title in a <a> tag, otherwise print the title as plain text.

Compiling the styleguide

Now that we have writen all the necessary code to build the Heading component, it's time to see the component in the styleguide. Let's compile our project first.

In your terminal or command line and inside nitflex_dev_theme run the following command:

lando npm run build

Viewing the Heading component

Open your drupal site and point to the URL below

http://nitflex.lndo.site:8000/themes/custom/nitflex_dev_theme/dist/style-guide/index.html

Depending on your setup, you may not need to enter ":8000". Also if you did not use the provided Lando setup, ensure you are using your own custom URL.

Under the Components category you should see the new Heading component.

Previous exercise: Building an Eyebrow component

Next exercise: Building a Button component

2- Heading component