Merge branch 'develop' into release/2.2

droptica · Apr 13, 2021 · 0109912 · 0109912
2 parents 5119cee + 13a770c
commit 0109912
Show file tree

Hide file tree

Showing 20 changed files with 197 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -1,55 +1,37 @@
-# Droopler profile for Drupal 8 #
+# Droopler profile for Drupal
 <img src="https://droopler-demo.droptica.com/themes/custom/droopler_subtheme/logo.svg" width=300 alt="Droopler Logo" />
 
-## What is Droopler? ##
-Droopler is a Drupal 8 profile designed to build corporate websites. It's based on the latest frontend technologies, including Bootstrap 4. The maintainer of Droopler is [Droptica](https://www.droptica.com).
+## What is Droopler?
+Droopler is a Drupal 8/9 profile designed to build corporate websites. It's based on the latest frontend technologies, including Bootstrap 4. The maintainer of Droopler is [Droptica](https://www.droptica.com).
 
 * **Official website**: [droptica.com/droopler](https://www.droptica.com/droopler)
-* **Documentation**: [droptica.com/droopler/for-developers](https://www.droptica.com/droopler/for-developers/)
+* **Tutorials**: [droptica.com/droopler/tutorials](https://www.droptica.com/droopler/tutorials/)
 * **Demo**: [droopler-demo.droptica.com](https://droopler-demo.droptica.com)
 * **Composer template**: [github.com/droptica/droopler_project](https://github.com/droptica/droopler_project)
 * **Drupal.org project**: [drupal.org/project/droopler](https://www.drupal.org/project/droopler)
 
 For the latest news please subscribe to our [Facebook](https://www.facebook.com/Droopler/) and [Twitter](https://twitter.com/DrooplerCMS).
 
-## What's in this repository? ##
-This repository contains a Drupal profile. When you put it in your /profiles directory, the Drupal installer gets modified and installs base Droopler theme, some module dependencies, and demo content.
+## What's in this repository?
+This repository contains a Drupal profile. When you put it in the `/profiles/contrib/droopler` directory, the Drupal installer gets modified and installs base Droopler theme, some module dependencies, and demo content.
 
-## Installation ##
+## Installation
 The Droopler profile should be installed via Composer. We recommend using [Droopler skeleton repository](https://github.com/droptica/droopler_project). If you are starting from the scratch - in the **require** section of your composer.json put:
 
 ```json
 "require": {
-  "droptica/droopler": "^8.2.0"
+  "droptica/droopler": "^8.2.2"
 }
 ```
 
 And run **composer update**.
 
-In case of unexpected problems please update your main composer.json to comply with the [Droopler skeleton repository](https://github.com/droptica/droopler_project). You may run into some issues with libraries and their directories.
+In case of unexpected problems please update your main composer.json to comply with the latest [Droopler skeleton repository](https://github.com/droptica/droopler_project). You may run into some issues with libraries and their directories.
 
-## Commerce ##
-Droopler, starting from version 2.1 comes with Drupal Commerce integration modules.
-
-### Setup ###
-Firstly you need to download two dependant contrib modules:
-
- * [Commerce](https://www.drupal.org/project/commerce)
- * [Facets Pretty Paths](https://www.drupal.org/project/facets_pretty_paths)
-
-Using composer run `composer require drupal/commerce drupal/facets_pretty_paths` command.
-
-In the next step, you need to enable `d_commerce` module that comes with Droopler.
-
-Droopler comes with two optional submodules extending Commerce integration:
-* `d_commerce_product` - brings Commerce predefined product type with theming applied,
-* `d_commerce_products_list` - adds Droopler Products listing page with categories filtering and sorting enabled.
-
-### Configuration
-In order to start adding your products you need to configure your Commerce store.
-To do that go to `/store/add/online` URL and set up your store details.
-
-### Products
-Having configured Commerce store you can start adding products - if enabled `d_commerce_product` module
-you'll have an additional type of product simply called "Product". Those product types will be displayed on the page `/shop`
-provided by the `d_commerce_products_list` module.
+# Documentation
+* [Droopler Commerce](modules/custom/d_commerce/README.md) - This distribution provides full Drupal Commerce integration.
+* [Updating Droopler](UPDATE.md) - A guide on updating the distribution between major versions.
+* [Using d_settings](modules/custom/d_p/README.md) - How to create new paragraph settings and modify existing ones.
+* [Using SCSS](https://github.com/droptica/droopler_project/blob/master/README.md) - How to handle SCSS using Node.
+* [Creating CSS subtheme](themes/custom/droopler_theme/STARTERKIT_CSS/README.md) - How to create a simple subtheme with CSS inheritance.
+* [Creating SCSS subtheme](themes/custom/droopler_theme/STARTERKIT_SCSS/README.md) - How to create a comlex subtheme with SCSS variables.
diff --git a/UPDATE.md b/UPDATE.md
@@ -1,11 +1,25 @@
-# Droopler 2.0 #
+# Updating Droopler
+
+## Droopler 2.2
+
+No significant actions to be done in this update.
+
+You may want to verify your paragraph themes, as we introduced new d_settings for each paragraph. The migration script should cover most edge cases.
+
+Starting from this version, we are oficially becoming Drupal 9 compatible. You may start considering the upgrade.
+
+## Droopler 2.1
+
+No significant actions to be done in this update.
+
+## Droopler 2.0
 
 **WARNING!**
 
 * If you have a composer-based installation, please apply all the below steps.
 * If you have a drupal.org installation, update your `profiles/droopler` directory and make sure the modules in `modules/contrib` and `profiles/droopler/modules/contrib` are not duplicated (they should stay in the profile). Also, change your theme to `droopler_theme` if you did not make any custom overrides to `droopler_subtheme`. This way you won't have to maintain your subtheme anymore. If you have a custom subtheme, please apply all the below steps.
 
-## 1. Update your subtheme regions ##
+### 1. Update your subtheme regions ##
 
 Please update your `themes/custom/droopler_subtheme.info.yml` file and make sure it has the following regions defined:
 
@@ -41,7 +55,7 @@ regions:
   footer_main: 'Footer Main'
   ```
 
-## 2. Update your subtheme files ##
+### 2. Update your subtheme files 
 
 In the new version, we refactored the process of building assets. To make it work in your subtheme, you have to update the following files in your `themes/custom/droopler_subtheme` directory to the ones [from here](https://github.com/droptica/droopler_project/tree/master/web/themes/custom/droopler_subtheme):
 
@@ -58,11 +72,11 @@ To compile the assets, run the following commands:
 
 Please note that Droopler 2.0 works with the latest version of node.js.
 
-## 3. Update your composer files (optional) ##
+### 3. Update your composer files (optional) 
 
 In 2.0 we changed the composer template to the one provided by Drupal 8.8. You don't have to update your `composer.json`, however, it will simplify your project's maintenance.
 
-## 4. Restore the blue color scheme (optional) ##
+### 4. Restore the blue color scheme (optional) 
 Since version 1.4, the color scheme has changed from blue to red. In case you've grown accustomed to the old Droopler's color scheme, we provide you with a file containing SCSS variables from the older Droopler builds. This file is located in `themes/custom/droopler_theme/scss/config/_old_color_scheme.scss`
 
 In order to restore old color scheme either copy it's contents into the  `themes/custom/droopler_theme/scss/config/_color.scss`,

diff --git a/modules/custom/d_commerce/README.md b/modules/custom/d_commerce/README.md
@@ -0,0 +1,27 @@
+# Droopler Commerce Modules
+Droopler, starting from version 2.1 comes with Drupal Commerce integration modules. 
+Their goal is to provide an out-of-the-box Commerce experience. 
+All the views like Cart, Categories, Products, and Orders are supported by `droopler_theme` by default.
+
+## Setup
+First, you need to download two dependant contrib modules:
+
+ * [Commerce](https://www.drupal.org/project/commerce)
+ * [Facets Pretty Paths](https://www.drupal.org/project/facets_pretty_paths)
+
+Using composer, run `composer require drupal/commerce drupal/facets_pretty_paths` command.
+
+In the next step, you need to enable `d_commerce` module that comes with Droopler.
+
+Droopler comes with two optional submodules extending Commerce integration:
+* `d_commerce_product` - brings Commerce predefined product type with theming applied,
+* `d_commerce_products_list` - adds Droopler Products listing page with categories filtering and sorting enabled.
+
+## Configuration
+To start adding your products you need to configure your Commerce store.
+To do that go to `/store/add/online` URL and set up your store details.
+
+## Products
+Having configured Commerce store, you can start adding products - if enabled `d_commerce_product` module
+you'll have an additional type of product simply called "Product". Those product types will be displayed on the page `/shop`
+provided by the `d_commerce_products_list` module.
diff --git a/...custom/d_p_gallery/templates/field--paragraph--field-d-media-image--d-p-gallery.html.twig b/...custom/d_p_gallery/templates/field--paragraph--field-d-media-image--d-p-gallery.html.twig
@@ -42,24 +42,27 @@
   'field--name-' ~ field_name|clean_class,
   'field--type-' ~ field_type|clean_class,
   'field--label-' ~ label_display,
-  'row',
   'text-center',
-  'mt-4'
+  'mt-4',
+  'mb-n4'
 ] %}
 
 {# Show 4 items in a row for XL, 3 for LG and MD, 2 for SM and 1 for XS #}
 {% set item_classes = [
   'col-xl-3',
   'col-md-4',
   'col-sm-6',
-  'mb-3',
-  'field__item'
+  'mb-4',
+  'field__item',
+  'pr-0'
 ] %}
 
 <div{{ attributes.addClass(classes, 'field__items') }}>
-  {% for item in items %}
-    <div{{ item.attributes.addClass(item_classes) }}>
-      {{ item.content }}
-    </div>
-  {% endfor %}
+  <div class="row mr-0">
+    {% for item in items %}
+      <div{{ item.attributes.addClass(item_classes) }}>
+        {{ item.content }}
+      </div>
+    {% endfor %}
+  </div>
 </div>
diff --git a/modules/custom/d_p_gallery/templates/paragraph--d-p-gallery.html.twig b/modules/custom/d_p_gallery/templates/paragraph--d-p-gallery.html.twig
@@ -55,7 +55,12 @@ view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
       <div class="content-wrapper">
         <div class="container">
           {% block content %}
-            {{ content }}
+            {{ content|without('field_d_cta_link') }}
+            {% if content.field_d_cta_link.0 %}
+              <div class="container mt-4">
+                {{ content.field_d_cta_link }}
+              </div>
+            {% endif %}
           {% endblock %}
         </div>
       </div>

diff --git a/...nce_content/templates/field--paragraph--field-d-cta-link--d-p-reference-content.html.twig b/...nce_content/templates/field--paragraph--field-d-cta-link--d-p-reference-content.html.twig
@@ -45,6 +45,7 @@
     'field--label-' ~ label_display,
     'container',
     'text-center',
+    'mt-4'
   ]
 %}
 {%

diff --git a/modules/custom/d_p_side_by_side/templates/paragraph--d-p-side-by-side.html.twig b/modules/custom/d_p_side_by_side/templates/paragraph--d-p-side-by-side.html.twig
@@ -57,8 +57,8 @@
             {{ content.field_d_p_sbs_items }}
           </div>
         </div>
-        {% if content.field_d_cta_link|render %}
-          <div class="container my-5">
+        {% if content.field_d_cta_link.0 %}
+          <div class="container mt-4">
             {{ content.field_d_cta_link }}
           </div>
         {% endif %}

diff --git a/modules/custom/d_p_side_embed/templates/paragraph--d-p-side-embed.html.twig b/modules/custom/d_p_side_embed/templates/paragraph--d-p-side-embed.html.twig
@@ -76,7 +76,12 @@ view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
       </div>
       <div {{ content_side_attributes.addClass(content_side_classes) }}>
         <div {{ content_fields_attributes.addClass(content_fields_classes) }}>
-          {{ content | without('field_d_embed') }}
+          {{ content|without('field_d_embed', 'field_d_cta_link') }}
+          {% if content.field_d_cta_link.0 %}
+            <div class="mt-4">
+              {{ content.field_d_cta_link }}
+            </div>
+          {% endif %}
         </div>
       </div>
     </div>

diff --git a/modules/custom/d_p_side_image/templates/paragraph--d-p-side-image.html.twig b/modules/custom/d_p_side_image/templates/paragraph--d-p-side-image.html.twig
@@ -73,7 +73,12 @@
         <div class="container">
           <div class="row">
             <div class="{{ text_class }} container-half">
-              {{ content.group_d_side_image_content }}
+              {{ content.group_d_side_image_content|without('field_d_cta_link') }}
+              {% if content.group_d_side_image_content.field_d_cta_link.0 %}
+                <div class="mt-4">
+                  {{ content.group_d_side_image_content.field_d_cta_link }}
+                </div>
+              {% endif %}
             </div>
           </div>
         </div>

diff --git a/modules/custom/d_p_side_tiles/templates/paragraph--d-p-side-tiles.html.twig b/modules/custom/d_p_side_tiles/templates/paragraph--d-p-side-tiles.html.twig
@@ -74,7 +74,12 @@
       </div>
       <div {{ content_side_attributes.addClass(content_side_classes) }}>
         <div {{ content_fields_attributes.addClass(content_fields_classes) }}>
-          {{ content | without('field_d_media_image') }}
+          {{ content|without('field_d_media_image', 'field_d_cta_link') }}
+          {% if content.field_d_cta_link.0 %}
+            <div class="mt-4">
+              {{ content.field_d_cta_link }}
+            </div>
+          {% endif %}
         </div>
       </div>
     </div>

diff --git a/modules/custom/d_p_text_blocks/templates/paragraph--d-p-group-of-text-blocks.html.twig b/modules/custom/d_p_text_blocks/templates/paragraph--d-p-group-of-text-blocks.html.twig
@@ -65,9 +65,11 @@
         {% endif %}
       {% endblock %}
       {% block paragraph_cta_content %}
-        <div class="container">
-          {{ content.field_d_cta_link }}
-        </div>
+        {% if content.field_d_cta_link.0 %}
+          <div class="container mt-4">
+            {{ content.field_d_cta_link }}
+          </div>
+        {% endif %}
       {% endblock %}
     </div>
   </section>

diff --git a/modules/custom/d_p_text_blocks/templates/paragraph--d-p-single-text-block.html.twig b/modules/custom/d_p_text_blocks/templates/paragraph--d-p-single-text-block.html.twig
@@ -55,7 +55,12 @@
       {% endblock %}
       <div class="content-wrapper">
         {% block content %}
-          {{ content.group_d_block_content }}
+          {{ content.group_d_block_content|without('field_d_cta_link') }}
+          {% if content.group_d_block_content.field_d_cta_link.0 %}
+            <div class="mt-4">
+              {{ content.group_d_block_content.field_d_cta_link }}
+            </div>
+          {% endif %}
         {% endblock %}
       </div>
 

diff --git a/modules/custom/d_p_text_paged/templates/paragraph--d-p-text-paged.html.twig b/modules/custom/d_p_text_paged/templates/paragraph--d-p-text-paged.html.twig
@@ -49,7 +49,12 @@
     <div{{ attributes.addClass(classes) }}>
       <div class="container">
         {% block content %}
-          {{ content }}
+          {{ content|without('field_d_cta_link') }}
+          {% if content.field_d_cta_link.0 %}
+            <div class="mt-4">
+              {{ content.field_d_cta_link }}
+            </div>
+          {% endif %}
         {% endblock %}
       </div>
     </div>

diff --git a/modules/custom/d_p_tiles/templates/paragraph--d-p-tiles.html.twig b/modules/custom/d_p_tiles/templates/paragraph--d-p-tiles.html.twig
@@ -63,8 +63,8 @@ view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
         {{ content|without('field_d_cta_link') }}
       {% endblock %}
     </div>
-    {% if content.field_d_cta_link|render %}
-      <div class="container mt-5">
+    {% if content.field_d_cta_link.0 %}
+      <div class="container mt-4">
         {{ content.field_d_cta_link }}
       </div>
     {% endif %}

diff --git a/themes/custom/droopler_theme/STARTERKIT_SCSS/scss/config/_base_theme_overrides.scss b/themes/custom/droopler_theme/STARTERKIT_SCSS/scss/config/_base_theme_overrides.scss
@@ -352,8 +352,6 @@
 // $d-p-text-blocks-group-mobile-padding-y: 2rem;
 // $d-p-text-blocks-group-margin: 0 0 5.5rem 0;
 // $d-p-text-blocks-mobile-group-margin: 0 0 2.8rem 0;
-// $d-p-text-blocks-group-button-margin: 3.125rem auto 0 auto;
-// $d-p-text-blocks-mobile-group-button-margin: 1.875rem auto 4.375rem auto;
 // $d-p-single-box-padding-x: 5%;
 // $d-p-single-box-mobile-padding-x: 10%;
 // $d-p-text-blocks-tiles-padding: 20px;

diff --git a/themes/custom/droopler_theme/scss/components/_d_p_gallery.scss b/themes/custom/droopler_theme/scss/components/_d_p_gallery.scss
@@ -7,6 +7,7 @@ $d-p-gallery-line-color: $color-agamemnon !default;
 $d-p-gallery-line-color-inverted: $color-nestor !default;
 $d-p-gallery-color: $color-hecuba !default;
 $d-p-gallery-bold-color: $color-troilus !default;
+$d-p-gallery-image-margin-bottom: 0 !default;
 
 .paragraph--type--d-p-gallery {
   text-align: center;
@@ -49,6 +50,7 @@ $d-p-gallery-bold-color: $color-troilus !default;
     img {
       width: 100%;
       height: auto;
+      margin-bottom: $d-p-gallery-image-margin-bottom;
     }
   }
 }

diff --git a/themes/custom/droopler_theme/scss/components/_d_p_reference_content.scss b/themes/custom/droopler_theme/scss/components/_d_p_reference_content.scss
@@ -5,6 +5,7 @@ $d-p-reference-content-line-color-inverted: $color-nestor !default;
 // Margins, paddings and sizing.
 $d-p-reference-content-padding-top: 1.51rem !default;
 $d-p-reference-content-padding-bottom: 0 !default;
+$d-p-reference-content-margin-bottom: 0 !default;
 $d-p-reference-content-items-padding-x: 5px !default;
 $d-p-reference-content-item-padding: 5px !default;
 $d-p-reference-content-item-margin-left: -5px !default;
@@ -24,15 +25,15 @@ $d-p-reference-content-content-padding: 5px !default;
   > .field--name-field-d-p-reference-content {
     padding-top: $d-p-reference-content-padding-top;
     padding-bottom: $d-p-reference-content-padding-bottom;
-    margin-bottom: 1.51rem;
-
+    margin-bottom: $d-p-reference-content-margin-bottom;
 
     @include media-breakpoint-up(xl) {
       margin-right: -$d-p-reference-content-item-padding;
     }
 
     .field--wrapper {
       overflow: hidden;
+      margin-bottom: 0;
       @include media-breakpoint-down(lg) {
         padding: 0 0 0 $d-p-reference-content-content-padding;
       }

diff --git a/themes/custom/droopler_theme/scss/components/_d_p_text_blocks.scss b/themes/custom/droopler_theme/scss/components/_d_p_text_blocks.scss
@@ -15,8 +15,6 @@ $d-p-text-blocks-group-padding-y: 3.875rem !default;
 $d-p-text-blocks-group-mobile-padding-y: 2rem !default;
 $d-p-text-blocks-group-margin: 0 0 5.5rem 0 !default;
 $d-p-text-blocks-mobile-group-margin: 0 0 2.8rem 0 !default;
-$d-p-text-blocks-group-button-margin: 3.125rem auto 0 auto !default;
-$d-p-text-blocks-mobile-group-button-margin: 1.875rem auto 4.375rem auto !default;
 $d-p-single-box-padding-x: 5% !default;
 $d-p-single-box-mobile-padding-x: 10% !default;
 
@@ -58,12 +56,6 @@ $d-p-single-text-box-grid-large-padding: $grid-gutter-width !default;
     }
     > .field--type-link {
       text-align: center;
-      a {
-        margin: $d-p-text-blocks-group-button-margin;
-        @include media-breakpoint-down(md) {
-          margin: $d-p-text-blocks-mobile-group-button-margin;
-        }
-      }
     }
   }
 

diff --git a/themes/custom/droopler_theme/scss/components/_d_p_text_paged.scss b/themes/custom/droopler_theme/scss/components/_d_p_text_paged.scss
@@ -46,7 +46,6 @@ $d-p-text-paged-subtitle-margin-y: 1.125rem !default;
   }
   .field--type-link {
     text-align: center;
-    margin-top: 1rem;
   }
   .field--name-field-d-long-text {
     p {
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,6 +45,7 @@ @@
         'field--label-' ~ label_display,
         'container',
         'text-center',
+        'mt-4'
       ]
     %}
     {%
@@ Expand Down @@