Button

So you get the idea, inside the 01-patterns directory we create a new directory that matches the name of the component we want to create and then create a few files inside that directory. Let's repeat this process for the Button component.

Component's data

1. Inside nitflex_dev_theme/src/_patterns/01-patterns/ create a new directory called button.

2. Inside the button directory create a new file called button.yml.

3. Inside button.yml add the following code:

button:
  modifier:
  text: "Watch now"
  url: "#"

We just created an object for the button with key/value text, url, type, and modifier.

1. Inside the button directory create a new file called button.twig.

2. Inside button.twig add the following code:

{% if button.url %}
  <a href="{{ button.url }}" class="button">
    {{ button.text }}
  </a>
{% else %}
  <button class="button">
    {{ button.text }}
  </button>
{% endif %}

We've added some logic to the button to ensure we render the right HTML element based on the data we receive. For example, if a URL is passed, we use an <a> with the class of button, otherwise we use a <button> tag. This is important in many ways; we always want to make sure we use proper semantic markup for accessibility and for the task at hand. An <a> tag will allow us to be directed to another page or a section within the same page, whereas a <button> element will allow us to perform an action such as submit content.

1. Inside the button directory create a new file called button.scss.

2. Inside button.scss add this code:

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

.button {
  background-color: $color-black;
  border: 2px solid $color-tundora;
  border-radius: 44px;
  color: $color-white;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 40px;
  text-decoration: none;
  transition: border 0.125s ease, background-color 0.125s ease;
  white-space: nowrap;

  &:hover,
  &:focus {
    border-color: $color-white;
  }
}

Compiling the code

Now that we have written all the necessary code to build the component, it's time to see the component in the style-guide. Let's compile our project first.

• In your command line, navigate to /themes/custom/nitflex_dev_theme.

• Run this command:

lando npm run build && lando php patternlab/core/console --generate

What does this command do?

The command above runs all gulp tasks found inside the gulp-tasks directory in the theme. Keep in mind, we are using the word lando because our local environment was built with lando. Typically the build command would be npm run build.

Viewing the component

• Open your Drupal site and point to the URL below:

  http://nitflex.lndo.site/themes/custom/nitflex_dev_theme/dist/style-guide/?p=viewall-patterns-button

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