Building components

7. Creating the Featured Movie component

The Featured Movie component, much like the Movie Card, presents similar requirements for field collections, which we will address pretty much the same way we did for the Movie card.

Let's start by creating the usual files for building the component:

  1. Inside nitflex_dev_theme/src/components/ create a new directory called featured-movie

  2. Inside the featured-movie directory create these files:

    • featured-movie.json, featured-movie.scss, and featured-movie.twig

  1. Copy the following code snippet into featured-movie.json:

    {
 "cover_image": "<img src=\"/sites/default/files/action-1.jpg\" alt=\"Alt text\" />",
 "heading": {
   "title": "BADCamp 2018",
   "url": "#",
   "heading_level": 2
 },
 "promo_text": "Be part of th 12th season this fall",
 "mpaa_rating": "PG-13",
 "average_rating": "5",
 "synopsis": "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
 "watch_button": {
   "text": "Watch now",
   "url": "#"
 }
}

  2. Copy the following code snippet into featured-movie.twig:

    
{{ attach_library('nitflex_dev_theme/featured-movie') }}

<section class="featured-movie {{ attributes ? attributes.class }}"{{ attributes ? attributes|without(class) }}>
 {{ title_prefix }}
 {{ title_suffix }}
 {% if cover_image %}
   <div class="featured-movie__cover-image">
     {{ cover_image }}
   </div>
 {% endif %}
 <div class="featured-movie__meta">
   <div class="featured-movie__title">
     {%
       include '@nitflex_dev_theme/heading/heading.twig' with {
         heading: {
           title: heading.title,
           heading_level: heading.heading_level,
         }
       } only
     %}
   </div>
   {% if promo_text %}
     <div class="featured-movie__promo">
       {%
         include '@nitflex_dev_theme/eyebrow/eyebrow.twig' with {
           eyebrow: promo_text
         }
       %}
     </div>
   {% endif %}
   <div class="featured-movie__settings">
     <div class="featured-movie__favorites-toggle">
       {% block favorites_toggle %}
         {%
           include '@nitflex_dev_theme/add-to-favorites/add-to-favorites.twig' with {
             url: '#',
           } only
         %}
       {% endblock %}
     </div>
     {% if mpaa_rating %}
       <div class="featured-movie__mpaa-rating">
         {%
           include '@nitflex_dev_theme/mpaa-rating/mpaa-rating.twig' with {
             rating: mpaa_rating
           }
         %}
       </div>
     {% endif %}
     {% if average_rating %}
       <div class="featured-movie__average-rating">
         {% include '@nitflex_dev_theme/average-rating/average-rating.twig' with {
             count: average_rating
           } only
         %}
       </div>
     {% endif %}
   </div>
   {% if synopsis %}
     <div class="featured-movie__synopsis">
       {{ synopsis }}
     </div>
   {% endif %}
   {% if watch_button %}
     <div class="featured-movie__cta">
       {%
         include '@nitflex_dev_theme/button/button.twig' with {
           button: watch_button,
           modifier_class: 'button--primary'
         } only
       %}
     </div>
   {% endif %}
 </div>
</section>

  3. Finally, Add the following code to featured-movie.scss:

    // Featured Movie
//
// This is the featured movie component.
//
// Markup: featured-movie.twig
//
// Classes: kss-full-width
//
// Style guide: Components.Featured Movie

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

.featured-movie {
 align-items: center;
 background: $color-black;
 display: flex;
 height: 480px;
 overflow: hidden;
 position: relative;
 width: 100%;

 @include breakpoint($bp-sm) {
   height: 640px;
 }

 @include breakpoint($bp-lg) {
   height: 740px;
 }
}

.featured-movie__cover-image {
 background-color: $color-black;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;

 &::after {

   @include breakpoint($bp-md) {
     background-image: linear-gradient(to right, $color-black 15%, rgba($color-black, 0) 100%);
     content: '';
     display: block;
     height: 100%;
     opacity: 0.85;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
   }
 }

 img {
   @include center-align($position: absolute);
   height: 110%;
   opacity: 0.35;
   max-width: none;
   width: auto;
   z-index: $zi-ground;

   @include breakpoint($bp-md) {
     opacity: 1;
   }

   @include breakpoint($bp-lg) {
     height: auto;
     max-width: none;
     width: 110%;
   }
 }
}

.featured-movie__meta {
 color: $color-white;
 display: flex;
 flex-wrap: wrap;
 padding: 20px;
 position: relative;

 @include breakpoint($bp-sm) {
   padding: 20px 40px;
 }

 @include breakpoint($bp-md) {
   padding: 40px 50px;
   max-width: 50%;
 }
}

.featured-movie__title {
 width: 100%;

 .heading {
   font-size: 4.8rem;
   line-height: 1;

   @include breakpoint($bp-lg) {
     font-size: 6rem;
   }
 }
}

.featured-movie__promo {
 font-size: 1.8rem;
 font-weight: $font-weight-bold;
 padding: 12px 0;
 width: 100%;

 @include breakpoint($bp-md) {
   font-size: 2.4rem;
 }

 .eyebrow {
   text-transform: none;
   white-space: normal;
 }
}

.featured-movie__settings {
 align-items: center;
 display: flex;
 padding: 12px 0;
}

.featured-movie__favorites-toggle {
 margin-right: 10px;
}

.featured-movie__mpaa-rating {
 margin-right: 10px;

 .mpaa-rating {
   border-color: $color-white;
   color: $color-white;
 }
}

.featured-movie__synopsis {
 font-size: 1.4rem;
 padding: 12px 0;
 width: 100%;

 @include breakpoint($bp-sm) {
   font-size: 1.6rem;
 }
}

.featured-movie__cta {
 padding: 12px 0;
 width: 100%;
}

    IMPORTANT Be sure to create the featured-movie library.

Breaking it down

By now you should have a good understanding of what we are doing here.

  1. First we built a JSON object in which we outlined each of the fields the featured movie component needs. These fields include the movie title, average rating, MPAA rating, add to favorites button as well as a watch movie button.

  2. Next we wrote the markup in twig which makes use of the data from the JSON object. Most of this data is being passed to the component in the way of twig includes which makes use of previously built components such as heading, eyebrow and button.

  3. Finally we wrote the css styles to give the featured movie component the look and feel we want.

Compiling the styleguide

  • In your terminal or command line, navigate to /themes/custom/nitflex_dev_theme and run the following command:
lando npm run build

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 component.

Previous exercise: Drupal Libraries

Next exercise: Movie Card Collection

results matching ""

    No results matching ""