wa_layout_layouts_advice_advice-article.html.twig

{#
 File comments
#}

{%
    set classes = [
    'layout',
    'layout--advice',
]
%}
<div{{ attributes.addClass(classes) }}>
    <div class="row">
        {% if content.main %}
            <div {{ region_attributes.main.addClass(['layout__region', 'col-12']) }}>
                {{ content.main }}
            </div>
        {% endif %}
        {% if content.about %}
            <div {{ region_attributes.about.addClass(['layout__region', 'advice-about__region', 'col-12']) }}>
                {{ content.about }}
            </div>
        {% endif %}
        {% if content.footer %}
            <div {{ region_attributes.footer.addClass(['layout__region', 'col-12']) }}>
                {{ content.footer }}
            </div>
        {% endif %}
    </div>
</div>

wa_layout_layouts_advice_advice.html.twig

{#
 File comments
#}

{%
    set classes = [
    'layout',
    'layout--advice',
]
%}
<div{{ attributes.addClass(classes) }}>
    <div class="row">
        <div {{ region_attributes.top_left.addClass(['layout__region', 'col-12', 'col-lg-7']) }}>
            {{ content.top_left }}
        </div>
        <div {{ region_attributes.top_right.addClass(['layout__region', 'col-12' , 'col-lg-5']) }}>
            {{ content.top_right }}
        </div>
    </div>
    <div class="row">
        {% if content.main %}
            <div {{ region_attributes.main.addClass(['layout__region', 'col-12']) }}>
                {{ content.main }}
            </div>
        {% endif %}
        {% if content.footer %}
            <div {{ region_attributes.footer.addClass(['layout__region', 'col-12']) }}>
                {{ content.footer }}
            </div>
        {% endif %}
    </div>
</div>

wa_layout_layouts_dashboard_dashboard-page.html.twig

{#
 File comments
#}
{# page-grid #}
{%
    set classes = [
    'layout',
    'layout--dashboard-page',
]
%}

<div{{ attributes.addClass(classes) }}>
    {% if content.about %}
        <div {{ region_attributes.about.addClass(['layout__region', 'col-12']) }}>
            {{ content.about }}
        </div>
    {% endif %}
    {% if content.main %}
        <div {{ region_attributes.main.addClass(['layout__region']) }}>
            {{ content.main }}
        </div>
    {% endif %}
    {% if content.sidebar %}
        <div {{ region_attributes.sidebar.addClass(['layout__region', 'page-col-3']) }}>
            {{ content.sidebar }}
        </div>
    {% endif %}
</div>

wa_layout_layouts_front_front.html.twig

{#
 File comments
#}

{%
    set classes = [
    'layout',
    'layout--front',
]
%}
<div{{ attributes.addClass(classes) }}>
    {% if content.main %}
        <div class="front-banner">
            <div class="row">
                <div {{ region_attributes.banner.addClass(['layout__region', 'col-12']) }}>
                    {{ content.banner }}
                </div>
            </div>
        </div>
    {% endif %}
    <div class="row">
        {% if content.main %}
            <div {{ region_attributes.main.addClass(['layout__region', 'col-12']) }}>
                {{ content.main }}
            </div>
        {% endif %}
        {% if content.footer %}
            <div {{ region_attributes.footer.addClass(['layout__region', 'col-12']) }}>
                {{ content.footer }}
            </div>
        {% endif %}
    </div>
</div>

wa_layout_layouts_global_one.html.twig

{#
 File comments
#}
{%
    set classes = [
    'layout',
    'layout--one',
    settings.container.extra_classes,
]
%}

<div{{ attributes.addClass(classes) }}>
    <div class="row">
        {% if content.main %}
            <div {{ region_attributes.main.addClass(['layout__region', 'col-12', settings.main.extra_classes]) }}>
                {{ content.main }}
            </div>
        {% endif %}
    </div>
</div>

wa_layout_layouts_media_video-podcast.html.twig

{#
 File comments
#}

{%
    set classes = [
    'layout',
    'layout--media',
    settings.container.extra_classes,
]
%}

<div{{ attributes.addClass(classes) }}>
    <div class="row row_big">
        {% if content.main %}
            <div {{ region_attributes.main.addClass(['layout__region', 'layout__region-main', 'col-12', 'col-lg-8', 'mb-4', settings.main.extra_classes]) }}>
                {{ content.main }}
            </div>
        {% endif %}
        {% if content.sidebar %}
            <div {{ region_attributes.sidebar.addClass(['layout__region', 'layout__region-sidebar', 'col-12', 'col-lg-4', settings.main.extra_classes]) }}>
                {{ content.sidebar }}
            </div>
        {% endif %}
    </div>
</div>

wa_layout_src_Element_WaIcon.php

<?php

namespace Drupal\wa_layout\Element;

use Drupal\Core\Render\Element\RenderElement;

/**
 * Provides a render element to display WA icon.
 *
 * Properties:
 * - #icon_name: The icon ID.
 *
 * Usage Example:
 * @code
 * $build['icon'] = [
 *   '#type' => 'wa_icon',
 *   '#icon_name' => 'comments',
 * ];
 * @endcode
 *
 * @RenderElement("wa_icon")
 */
class WaIcon extends RenderElement {

  /**
   * {@inheritdoc}
   */
  public function getInfo() {
    return [
      '#pre_render' => [
        [get_class($this), 'preRenderWaIconElement'],
      ],
      '#icon_name' => 'comments',
    ];
  }

  /**
   * Entity element pre render callback.
   *
   * @param array $element
   *   An associative array containing the properties of the icon element.
   *
   * @return array
   *   The modified element.
   */
  public static function preRenderWaIconElement(array $element) {


    $element['icon'] = [
      '#theme' => 'wa_svg_icon',
      '#icon' => $element['#icon_name'],
      '#attributes' => $element['#attributes'],
    ];

    return $element;
  }

}

wa_layout_src_Layout_WALayoutBase.php

<?php
/**
 * Created by PhpStorm.
 * User: Lex
 * Date: 28.12.2018
 * Time: 18:20
 */

namespace Drupal\wa_layout\Layout;

use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Layout\LayoutDefault;
use Drupal\Core\Plugin\PluginFormInterface;

class WALayoutBase extends LayoutDefault implements PluginFormInterface {

  /**
   * {@inheritdoc}
   */
  public function defaultConfiguration() {
    return parent::defaultConfiguration() + [
        'container' => [
          'extra_classes' => '',
        ],
      ];
  }

  /**
   * {@inheritdoc}
   */
  public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
    $configuration = $this->getConfiguration();

    $form['container'] = [
      '#type' => 'details',
      '#tree' => TRUE,
      '#title' => $this->t('Container settings'),
    ];
    $form['container']['extra_classes'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Extra classes'),
      '#default_value' => $configuration['container']['extra_classes'],
    ];

    foreach ($this->getPluginDefinition()->getRegionNames() as $region) {
      $form[$region] = [
        '#type' => 'details',
        '#tree' => TRUE,
        '#title' => $this->t('Settings @region region', ['@region' => $region]),
      ];
      $form[$region]['extra_classes'] = [
        '#type' => 'textfield',
        '#title' => $this->t('Extra classes'),
        '#default_value' => isset($configuration[$region]['extra_classes']) ? $configuration[$region]['extra_classes'] : '',
      ];
    }

    return $form;
  }

  /**
   * @inheritdoc
   */
  public function validateConfigurationForm(array &$form, FormStateInterface $form_state) {
    // any additional form validation that is required
  }

  /**
   * {@inheritdoc}
   */
  public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
    $this->configuration['container'] = $form_state->getValue('container');
    foreach ($this->getPluginDefinition()->getRegionNames() as $region) {
      $this->configuration[$region] = $form_state->getValue($region);
    }
  }

}

wa_layout_src_WALayoutsTwigExtension.php

<?php

namespace Drupal\wa_layout;

use Drupal\Core\Template\Attribute;

/**
 * Twig extension.
 */
class WALayoutsTwigExtension extends \Twig_Extension {

  /**
   * {@inheritdoc}
   */
  public function getFunctions() {
    $functions = [];
    $functions[] = new \Twig_SimpleFunction('wasvg', [
      $this,
      'wasvg',
    ]);
    return $functions;
  }

  /**
   * Render WA SVG icon
   *
   * @param $name
   * @param array $classes
   *
   * @return array
   */
  public function wasvg($name, array $classes = []) {

    if (empty($name)) {
      return [];
    }
    $attributes = new Attribute(['class' => $classes]);
    $attributes->addClass('icon');
    $attributes->addClass('icon-' . $name);

    $build = [
      '#type' => 'inline_template',
      '#template' => '<svg {{ attributes }}><use xlink:href="/{{ directory }}/img/sprite.svg#{{ name }}"></use></svg>',
      '#context' => [
        'name' => $name,
        'attributes' => $attributes,
        'directory' => \Drupal::theme()->getActiveTheme()->getPath(),
      ],
    ];

    return $build;
  }

}

wa_layout_templates_top-level-landing-page.html.twig

{{ content.banner }}
<section class="mb-4">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-7">
                <div class="info-text">
                    {{ content.left_sidebar }}
                </div>
            </div>
            <div class="col-12 col-lg-5">
                {{ content.right_sidebar }}
            </div>
        </div>
    </div>
</section>
{{ content.content }}

wa_layout_templates_wa-svg-icon.html.twig

{#
 File comments
#}

{%
    set classes = [
    'icon',
    'icon__' ~ icon,
]
%}
<svg {{ attributes.addClass(classes) }}>
    <use xlink:href="/{{ directory }}/img/sprite.svg#{{ icon }}"></use>
</svg>

wa_layout_wa_layout.info.yml

name: W&A Layouts
type: module
core: 8.x
package: Writers&Artists

wa_layout_wa_layout.layouts.yml

one_column:
  label: Top level landing page
  category: W&A Layouts
  template: templates/top-level-landing-page
  regions:
    banner:
      label: Banner
    left_sidebar:
      label: Left sidebar
    right_sidebar:
      label: Right sidebar
    content:
      label: Content
front:
  label: 'Front page'
  category: 'W&A Layouts'
  path: layouts/front
  template: front
  class: '\Drupal\wa_layout\Layout\WALayoutBase'
  default_region: main
  icon_map:
    - [banner]
    - [main]
    - [footer]
  regions:
    banner:
      label: Banner
    main:
      label: Main
    footer:
      label: Footer

advice:
  label: 'Advice'
  category: 'W&A Layouts'
  path: layouts/advice
  template: advice
  class: '\Drupal\wa_layout\Layout\WALayoutBase'
  default_region: main
  icon_map:
    - [top_left, top_right]
    - [main]
    - [footer]
  regions:
    top_left:
      label: Top left
    top_right:
      label: Top right
    main:
      label: Main
    footer:
      label: Footer
advice_article:
  label: 'Advice Article'
  category: 'W&A Layouts'
  path: layouts/advice
  template: advice-article
  class: '\Drupal\wa_layout\Layout\WALayoutBase'
  default_region: main
  icon_map:
    - [main]
    - [about]
    - [footer]
  regions:
    main:
      label: Main
    about:
      label: About
    footer:
      label: Footer

# Dashboard layouts
dashboard_page:
  label: 'Dashboard page'
  category: 'W&A Layouts'
  path: layouts/dashboard
  template: dashboard-page
  class: '\Drupal\wa_layout\Layout\WALayoutBase'
  default_region: main
  icon_map:
    - [about, main, sidebar]
  regions:
    main:
      label: Main
    about:
      label: About
    sidebar:
      label: Sidebar

#Video & Podcasts
video_podcast:
  label: 'Video & Podcasts'
  category: 'W&A Layouts'
  path: layouts/media
  template: video-podcast
  class: '\Drupal\wa_layout\Layout\WALayoutBase'
  default_region: main
  icon_map:
    - [main, sidebar]
  regions:
    main:
      label: Main
    sidebar:
      label: Sidebar

wa_one:
  label: 'One column'
  category: 'W&A Layouts'
  path: layouts/global
  template: one
  class: '\Drupal\wa_layout\Layout\WALayoutBase'
  default_region: main
  icon_map:
    - [main]
  regions:
    main:
      label: Main

wa_layout_wa_layout.libraries.yml

slick:
  remote: https://github.com/kenwheeler/slick/
  version: 1.8.1
  license:
    name: MIT
    url: https://github.com/kenwheeler/slick/blob/master/LICENSE
    gpl-compatible: true
  css:
    theme:
      /libraries/slick/slick/slick.css: {}
  js:
    /libraries/slick/slick/slick.min.js: { minified: true }

select2:
  remote: https://github.com/kenwheeler/slick/
  version: 4.0.5
  license:
    name: MIT
    url: https://github.com/kenwheeler/slick/blob/master/LICENSE
    gpl-compatible: true
  css:
    theme:
      /libraries/jquery.select2/dist/css/select2.min.css: { minified: true }
  js:
    /libraries/jquery.select2/dist/js/select2.full.min.js: { minified: true }

wa_layout_wa_layout.module

<?php

/**
 * @file
 * Primary module hooks for W&amp;A Layouts module.
 *
 * @DCG
 * This file is no longer required in Drupal 8.
 * @see https://www.drupal.org/node/2217931
 */


/**
 * Implements hook_theme().
 */
function wa_layout_theme($existing, $type, $theme, $path) {
  $themes = [];

  $themes['wa_svg_icon'] = [
    'variables' => [
      'icon' => NULL,
      'attributes' => NULL,
    ],
    'template' => 'wa-svg-icon',
  ];
  return $themes;
}

wa_layout_wa_layout.services.yml

services:
  wa_layout.twig_extension:
    class: Drupal\wa_layout\WALayoutsTwigExtension
    tags:
      - { name: twig.extension }