28202 paragraph container

modules/edw_paragraphs/modules/edw_paragraphs_container/README.md

@@ -1,19 +1,72 @@
-EDW Paragraphs Container
-=============================================
+# EDW Paragraphs Container
 
 This module provides a paragraph Container useful when you want to store other components.
 
+Using the "Layout Paragraphs"(https://www.drupal.org/project/layout_paragraphs) module, everything related to the container will be used from the module's settings.
+
 #### Block Item
-| Field label      | Field name             | Description | Field type                 | Cardinality | Required | Translatable | Widget      |
-|------------------|------------------------|-------------|----------------------------|-------------|----------|--------------|-------------|
-| Background color | field_background_color | -           | List (text)                | Single      | No       | No           | Select list |
-| Background image | field_background_media | -           | Entity reference           | Single      | No       | No           | Select list |
+
+| Field label      | Field name             | Description | Field type       | Cardinality | Required | Translatable | Widget      |
+| ---------------- | ---------------------- | ----------- | ---------------- | ----------- | -------- | ------------ | ----------- |
+| Background color | field_background_color | -           | List (text)      | Single      | No       | No           | Select list |
+| Background image | field_background_media | -           | Entity reference | Single      | No       | No           | Select list |
+
+<!--
 | Container size   | field_container_size   | -           | List (text)                | Single      | Yes      | No           | Select list |
 | Content          | field_paragraphs       | -           | Entity reference revisions | Multiple    | Yes      | No           | Paragraph   |
 | Hide on mobile   | field_hide_on_mobile   | -           | Boolean                    | Single      | No       | No           | Checkbox    |
-
+-->
 
 ## Installation
 
 1. Install the `edw_modules` suite using composer as instructed in the main module documentation
-2. Enable the module using drush: `drush en edw_paragraphs_container`
+2. Enable the module using drush: `drush en edw_paragraphs_container`
+
+### Info
+
+It is based on class "grid-container"
+Ex:
+
+```pcss
+.grid-container {
+  --_cg-rows: 6;
+  --_cg-mw: calc(var(--container-mw, 100%) - var(--container-py) * 2);
+  --_cg-mi: 20px;
+  --_cg-gap: 16px;
+  --_cg-col_default: container;
+
+  @media (--md) {
+    --_cg-rows: 12;
+    --_cg-gap: 40px;
+    --_cg-mw: calc(var(--container-mw, 100%) - var(--container-py));
+  }
+
+  /* Calcul */
+  --_calc_cg-mi: calc(var(--_cg-mi) - var(--_cg-gap));
+
+  display: grid;
+  grid-template-columns:
+    [full-start] minmax(var(--_calc_cg-mi), 1fr)
+    [container-start]
+    repeat(
+      var(--_cg-rows),
+      calc(
+        (var(--_cg-mw) - var(--_cg-gap) * (var(--_cg-rows) - 1)) / var(
+            --_cg-rows
+          )
+      )
+    )
+    [container-end]
+    minmax(var(--_calc_cg-mi), 1fr) [full-end];
+  gap: var(--_cg-gap);
+
+  & > * {
+    grid-column: var(--_cg-col_default);
+  }
+
+  & > .full,
+  & > *:has(.grid-container) {
+    --_cg-col_default: full;
+  }
+}
+```

modules/edw_paragraphs/modules/edw_paragraphs_container/components/container/container.component.yml

@@ -0,0 +1,24 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+name: Container
+status: experimental
+description: 'Container description'
+
+props:
+  type: object
+  properties:
+    container_classes:
+      type: array
+      items:
+        type: string
+      title: Container classes
+      description: An array of utility classes. Use to add extra classes or custom CSS classes over to this component.
+
+    container_attributes:
+      type: Drupal\Core\Template\Attribute
+      title: Attributes
+      description: A list of HTML attributes for the container
+
+slots:
+  container_slot_main:
+    title: 'Main slot'
+    description: 'Main slot description'

modules/edw_paragraphs/modules/edw_paragraphs_container/components/container/container.css

@@ -0,0 +1,101 @@
+.c--container {
+  isolation: isolate;
+  /* display: grid; admin issues */
+  grid-template-areas: 'stack';
+
+  & > * {
+    grid-area: stack;
+  }
+}
+
+/* Temporary */
+.c--container {
+  --_c-container_pb: var(--c-container_pb, 60px);
+
+  &.p_pb > .edw-container {
+    padding-block: var(--_c-container_pb);
+  }
+
+  /* To Do field front/admin don't have some class */
+  .field-background-media,
+  .field--name-field-background-media {
+    position: relative;
+    z-index: -1;
+
+    img {
+      position: absolute;
+      inset: 0;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+/* One columns */
+.edw-container--one-column {
+  & > .c--container_default {
+    --_cg-col_default: 2 / 6;
+  }
+
+  & > .c--container_full {
+    --_cg-col_default: full;
+  }
+
+  & > .c--container_small {
+    --_cg-col_default: var(--_cg-col_sm, container);
+
+    @media (min-width: 768px) {
+      --_cg-col_sm: 3 / 13;
+    }
+
+    @media (min-width: 1024px) {
+      --_cg-col_sm: 4 / 12;
+    }
+
+    @media (min-width: 1280px) {
+      --_cg-col_sm: 5 / 11;
+    }
+  }
+}
+
+/* Two columns */
+.edw-container--two-column {
+  --region--delimiter: 8;
+}
+
+@media (min-width: 768px) {
+  .region--column-1 {
+    --_cg-col_default: var(--region--col1_s, 2) /
+      var(--region--col1_e, var(--region--delimiter));
+
+    &:where(.container-out) {
+      --region--col1_s: 1;
+    }
+  }
+
+  .region--column-2 {
+    --_cg-col_default: var(--region--col2_s, var(--region--delimiter)) /
+      var(--region--col2_e, 14);
+
+    &:where(.container-out) {
+      --region--col2_e: -1;
+    }
+  }
+}
+
+.c--container_33-67 {
+  --region--delimiter: 6;
+}
+
+.c--container_67-33 {
+  --region--delimiter: 10;
+}
+
+.c--container_25-75 {
+  --region--delimiter: 5;
+}
+
+.c--container_75-25 {
+  --region--delimiter: 11;
+}

modules/edw_paragraphs/modules/edw_paragraphs_container/components/container/container.twig

@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Container Component.
+ * Proprietes
+ *  container_classes: array(string)
+ *
+ * Slots
+ *  container_slot_main
+ */
+#}
+
+{# Set default value #}
+
+{# Create attributres #}
+{% set container_attributes = container_attributes ?: create_attribute() %}
+
+{# Component classes #}
+{% set container_classes = [
+  'c--container'
+]|merge(container_classes ?: []) %}
+
+{# Add extra attributes, classes #}
+{# {% set container_attributes = container_attributes.setAttribute('data-dots', dots) %} #}
+
+<div{{container_attributes.addClass(container_classes) }}>
+  {% block container_slot_main %}{% endblock %}
+</div>

modules/edw_paragraphs/modules/edw_paragraphs_container/edw_paragraphs_container.info.yml

@@ -5,3 +5,4 @@ type: module
 core_version_requirement: ^9.4 || ^10 || ^11
 dependencies:
   - edw_paragraphs:edw_paragraphs
+  - layout_paragraphs:layout_paragraphs

modules/edw_paragraphs/modules/edw_paragraphs_container/edw_paragraphs_container.layouts.yml

@@ -0,0 +1,21 @@
+one_column:
+  label: "EDW One column"
+  category: "EDW Layouts"
+  template: templates/one-column
+  default_region: main
+  class: '\Drupal\edw_paragraphs_container\Plugin\Layout\OneColumnLayout'
+  regions:
+    main:
+      label: Main content
+
+two_column:
+  label: "EDW Two column"
+  category: "EDW Layouts"
+  template: templates/two-column
+  default_region: column_1
+  class: '\Drupal\edw_paragraphs_container\Plugin\Layout\TwoColumnLayout'
+  regions:
+    column_1:
+      label: First Column
+    column_2:
+      label: Second Column

modules/edw_paragraphs/modules/edw_paragraphs_container/edw_paragraphs_container.module

@@ -0,0 +1,22 @@
+<?php
+
+/**
+ * @file
+ * EDW Paragraphs container module.
+ */
+
+/**
+ * Implements hook_theme().
+ */
+function edw_paragraphs_container_theme($existing, $type, $theme, $path) : array {
+  return [
+    'paragraph__edw_container' => [
+      'template' => 'paragraph--edw-container',
+      'base hook' => 'paragraph',
+    ],
+    // 'field__paragraph__field_paragraphs' => [
+    //   'template' => '_fields/field--paragraph--field-paragraphs',
+    //   'base hook' => 'field',
+    // ]
+  ];
+}

modules/edw_paragraphs/modules/edw_paragraphs_container/edw_paragraphs_container.permissions.yml

@@ -0,0 +1,4 @@
+configure column layout options:
+  title: "Configure column layout options"
+  description: "Configure / override the columns options in layouts"
+  restrict access: true

modules/edw_paragraphs/modules/edw_paragraphs_container/src/Plugin/Layout/OneColumnLayout.php

@@ -0,0 +1,73 @@
+<?php
+
+namespace Drupal\edw_paragraphs_container\Plugin\Layout;
+
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Layout\LayoutDefault;
+use Drupal\Core\Plugin\PluginFormInterface;
+
+/**
+ * Configurable one column layout plugin class.
+ *
+ * @internal
+ *   Plugin classes are internal.
+ */
+class OneColumnLayout extends LayoutDefault implements PluginFormInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function defaultConfiguration() {
+    return parent::defaultConfiguration() + [
+      'extra_classes' => [],
+      'width' => 'default',
+    ];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
+    $configuration = $this->getConfiguration();
+
+    $form['extra_classes'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('Extra classes'),
+      '#default_value' => implode(' ', $configuration['extra_classes']),
+    ];
+
+    $form['width'] = [
+      '#type' => 'select',
+      '#title' => $this->t('Width'),
+      '#options' => $this->getWidthOptions(),
+      '#default_value' => $configuration['width'],
+    ];
+
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
+    $extraClasses = $form_state->getValue('extra_classes');
+    // Explode the string into an array and trim the values.
+    $this->configuration['extra_classes'] = array_map('trim', explode(' ', $extraClasses));
+
+    $this->configuration['width'] = $form_state->getValue('width');
+  }
+
+  /**
+   * Gets the width options for the layout.
+   *
+   * @return array
+   *   An array of width options.
+   */
+  public function getWidthOptions() {
+    return [
+      'default' => $this->t('Default width'),
+      'small' => $this->t('Narrower width'),
+      'full' => $this->t('Full width'),
+    ];
+  }
+}