feature: revise layout and add bottom spacer option (#903)

* feature: revise layout and add bottom spacer option

* feature: update config name

apps/drupal-default/particle_helper/src/Plugin/Layout/ParticleLayout.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace Drupal\particle_helper\Plugin\Layout;
+
+/**
+ * @file
+ * Contains \Drupal\particle_helper\Plugin\Layout\ParticleLayout.
+ */
+
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Layout\LayoutDefault;
+use Drupal\Core\Plugin\PluginFormInterface;
+use Drupal\particle\Particle;
+
+/**
+ * Provides a layout options for Layout Builder.
+ */
+class ParticleLayout extends LayoutDefault implements PluginFormInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function defaultConfiguration() {
+    return parent::defaultConfiguration() + [
+        'spacer_bottom' => '',
+      ];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
+    $form = parent::buildConfigurationForm($form, $form_state);
+    $configuration = $this->getConfiguration();
+
+    $spacings = Particle::SPACING;
+    $spacer_bottom_options = [];
+    foreach ($spacings as $key => $value) {
+      $spacer_bottom_options['mb-' . $key] = $value;
+    }
+    $spacer_bottom_options = array_merge(['_none' => $this->t('-None-')], $spacer_bottom_options);
+
+    $form['spacer_bottom'] = [
+      '#type' => 'select',
+      '#options' => $spacer_bottom_options,
+      '#title' => $this->t('Additional Bottom Spacing'),
+      '#description' => $this->t('Select a value for additional bottom spacing. These are based on design spacers.'),
+      '#default_value' => $configuration['spacer_bottom'],
+    ];
+
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
+    parent::submitConfigurationForm($form, $form_state);
+    $this->configuration['spacer_bottom'] = ($form_state->getValue('spacer_bottom') != '_none') ? $form_state->getValue('spacer_bottom') : '';
+  }
+
+}

apps/drupal-default/particle_theme/includes/misc.theme.inc

@@ -5,7 +5,7 @@
  * Functions to support theming miscellaneous things the Particle theme.
  */
 
-use Drupal\Particle\Particle;
+use Drupal\particle\Particle;
 
 /**
  * Implements hook_preprocess().

apps/drupal-default/particle_theme/particle.layouts.yml

@@ -1,56 +1,151 @@
-particle_one_col:
-  label: 'Particle one column'
-  path: layout/particle-onecol
-  template: particle-onecol
-  category: 'Columns: 1'
-  default_region: content
+# Particle Layouts
+# @see apps/drupal-default/particle_theme/templates/layout/layout.html.twig
+particle_one_column:
+  label: 'Container Column'
+  category: 'Particle Columns: 1'
+  description: A single column layout.
+  class: '\Drupal\particle_helper\Plugin\Layout\ParticleLayout'
+  path: layout
+  template: layout
+  default_region: main
   icon_map:
     - [content]
   regions:
-    content:
-      label: Main Content
-particle_two_col:
-  label: 'Particle two column'
-  path: layout/particle-twocol
-  template: particle-twocol
-  category: 'Columns: 2'
-  default_region: first
+    main:
+      label: Particle Main Content
+      region_classes: ['layout__region', 'layout__region--main', 'w-full']
+
+particle_one_column_breakout:
+  label: 'Breakout Column'
+  category: 'Particle Columns: 1'
+  description: A single column layout that breaks out of the site container.
+  class: '\Drupal\particle_helper\Plugin\Layout\ParticleLayout'
+  path: layout
+  template: layout
+  default_region: main
   icon_map:
-    - [first, second]
+    - [content]
   regions:
-    first:
-      label: First
-    second:
-      label: Second
-particle_three_col:
-  label: 'Particle three column'
-  path: layout/particle-threecol
-  template: particle-threecol
-  category: 'Columns: 3'
-  default_region: first
+    main:
+      label: Particle Main Content
+      region_classes: ['layout__region', 'layout__region--main', 'w-breakout']
+
+particle_two_column_3_1:
+  label: 'Two Columns: 3:1'
+  category: 'Particle Columns: 2'
+  description: A two column layout with 2/3 main and 1/3 aside sections.
+  class: '\Drupal\particle_helper\Plugin\Layout\ParticleLayout'
+  path: layout
+  template: layout
+  default_region: main
+  icon_map:
+    - [top]
+    - [main, main, aside]
+    - [bottom]
+  regions:
+    main:
+      label: Particle Main
+      region_classes:
+        [
+          'layout__region',
+          'layout__region--main',
+          'w-full',
+          'md:w-2/3',
+          'pr-6',
+          'md:pr-8',
+        ]
+    aside:
+      label: Particle Sidebar
+      region_classes:
+        ['layout__region', 'layout__region--aside', 'w-full', 'md:w-1/3']
+
+particle_three_column_1_1:
+  label: 'Three Columns: 1:1'
+  category: 'Particle Columns: 3'
+  description: A three column layout with equal 1/3 width columns.
+  class: '\Drupal\particle_helper\Plugin\Layout\ParticleLayout'
+  path: layout
+  template: layout
+  default_region: main
   icon_map:
+    - [top]
     - [first, second, third]
+    - [bottom]
   regions:
     first:
-      label: First
+      label: Particle First
+      region_classes:
+        [
+          'layout__region',
+          'layout__region--first',
+          'w-full',
+          'md:w-1/3',
+          'pr-6',
+          'md:pr-8',
+        ]
     second:
-      label: Second
+      label: Particle Second
+      region_classes:
+        [
+          'layout__region',
+          'layout__region--second',
+          'w-full',
+          'md:w-1/3',
+          'pr-6',
+          'md:pr-8',
+        ]
     third:
-      label: Third
-particle_four_col:
-  label: 'Particle four column'
-  path: layout/particle-fourcol
-  template: particle-fourcol
-  category: 'Columns: 4'
-  default_region: first
+      label: Particle Third
+      region_classes:
+        ['layout__region', 'layout__region--third', 'w-full', 'md:w-1/3']
+
+particle_four_column_1_1:
+  label: 'Four Columns: 1:1'
+  category: 'Particle Columns: 4'
+  description: A four column layout with equal 1/4 width columns.
+  class: '\Drupal\particle_helper\Plugin\Layout\ParticleLayout'
+  path: layout
+  template: layout
+  default_region: main
   icon_map:
+    - [top]
     - [first, second, third, fourth]
+    - [bottom]
   regions:
     first:
-      label: First
+      label: Particle First
+      region_classes:
+        [
+          'layout__region',
+          'layout__region--first',
+          'w-full',
+          'md:w-1/3',
+          'pr-6',
+          'md:pr-8',
+        ]
     second:
-      label: Second
+      label: Particle Second
+      region_classes:
+        [
+          'layout__region',
+          'layout__region--second',
+          'w-full',
+          'md:w-1/3',
+          'pr-6',
+          'md:pr-8',
+        ]
     third:
-      label: Third
+      label: Particle Third
+      region_classes:
+        [
+          'layout__region',
+          'layout__region--third',
+          'w-full',
+          'md:w-1/3',
+          'pr-6',
+          'md:pr-8',
+        ]
     fourth:
-      label: Fourth
+      label: Particle Fourth
+      region_classes:
+        ['layout__region', 'layout__region--fourth', 'w-full', 'md:w-1/3']

apps/drupal-default/particle_theme/src/Particle.php

@@ -25,4 +25,40 @@ class Particle {
    */
   const FRONTEND_DOCS = 'https://phase2.github.io/frontend-docs/';
 
+  /**
+   * Provides breakpoints based on Tailwind Config.
+   */
+  const BREAKPOINTS = [
+    'xs' => '0px',
+    'sm' => '640px',
+    'md' => '768px',
+    'lg' => '1024px',
+    'xl' => '1280px',
+  ];
+
+  /**
+   * Provides spacing based on Tailwind Config.
+   */
+  const SPACING = [
+    'px' => '1px',
+    '0' => '0',
+    '1' => '0.25rem',
+    '2' => '0.5rem',
+    '3' => '0.75rem',
+    '4' => '1rem',
+    '5' => '1.25rem',
+    '6' => '1.5rem',
+    '8' => '2rem',
+    '10' => '2.5rem',
+    '12' => '3rem',
+    '16' => '4rem',
+    '20' => '5rem',
+    '24' => '6rem',
+    '32' => '8rem',
+    '40' => '10rem',
+    '48' => '12rem',
+    '56' => '14rem',
+    '64' => '16rem',
+  ];
+
 }

apps/drupal-default/particle_theme/templates/layout/layout.html.twig

@@ -14,10 +14,17 @@
  */
 #}
 
-{% set classes = ['layout', 'layout--' ~ (layout.id|clean_class)] %}
+{% set layout_classes = [
+  'layout',
+  'layout--' ~ (layout.id|clean_class),
+  'layout__grid',
+  'flex',
+  'flex-wrap',
+  settings.spacer_bottom ? settings.spacer_bottom|clean_class
+] %}
 
 {% if content %}
-  <div {{ attributes.addClass(classes) }}>
+  <div {{ attributes.addClass(layout_classes) }}>
     {% for key, value in layout.getRegions %}
       {% if content[key] %}
         <div {{ region_attributes[key].addClass(value.region_classes) }}>