IRSR24-22 | @jdwjdwjdw | Add fog and light fog section variants (#11)

* Add fog and light fog section variants * Label fixup * Update spacing * Update layout styles, fixups
SU-SWS · Nov 16, 2023 · 7467e05 · 7467e05
1 parent 29e34c7
commit 7467e05
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 1 deletion.
diff --git a/dist/css/main.css b/dist/css/main.css
diff --git a/ppo_irsr_subtheme.react_behaviors.yml b/ppo_irsr_subtheme.react_behaviors.yml
@@ -52,6 +52,21 @@ entity_variant_info:
       options:
         irsr-card-grid--two-col: Max 2 grid columns
 
+layout_variant_info:
+  id: layout_style
+  label: 'Layout Paragraph Type'
+  bundles:
+    - paragraphs_type|stanford_layout
+  config:
+    section_color:
+      type: select
+      title: Section background color
+      description: Choose the section background color.
+      empty_option: Default
+      options:
+        irsr-section-color--foggy: Fog
+        irsr-section-color--foggy-light: Light Fog
+
 lists_variant_info:
   id: lists_style
   label: Lists Paragraph Style

diff --git a/ppo_irsr_subtheme.theme b/ppo_irsr_subtheme.theme
@@ -58,6 +58,7 @@ function ppo_irsr_subtheme_preprocess_ds_entity_view(&$variables) {
   if ($paragraph->bundle() == 'stanford_card') {
     ppo_irsr_subtheme_preprocess_card($variables);
   }
+
 }
 
 /**
@@ -108,4 +109,17 @@ function ppo_irsr_subtheme_preprocess_paragraph__stanford_entity(array &$variabl
     $paragraph->getBehaviorSetting('react_paragraphs:entity_variant_info', 'grid_rows'),
   ];
   $variables['attributes']['class'] = array_merge($existing_classes, $extra_classes);
+}
+
+/**
+ * Implements hook_preprocess_paragraph__stanford_layout().
+ */
+function ppo_irsr_subtheme_preprocess_paragraph__stanford_layout(array &$variables): void {
+  /** @var \Drupal\paragraphs\Layout\Paragraph $paragraph */
+  $paragraph = &$variables['paragraph'];
+  $existing_classes = $variables['attributes']['class'] ?? [];
+  $extra_classes = [
+    $paragraph->getBehaviorSetting('react_paragraphs:layout_variant_info', 'section_color'),
+  ];
+  $variables['attributes']['class'] = array_merge($existing_classes, $extra_classes);
 }
diff --git a/src/scss/components/index.scss b/src/scss/components/index.scss
@@ -24,4 +24,5 @@
 
 @import 'banner/index.scss';
 @import 'card/index.scss';
+@import 'layout/index.scss';
 @import 'lists/index.scss';
diff --git a/src/scss/components/layout/_layout.scss b/src/scss/components/layout/_layout.scss
@@ -0,0 +1,64 @@
+@charset "UTF-8";
+
+
+.content {
+  // Prevent background color overflow
+  overflow-x: clip;
+
+  .paragraph-item {
+    margin-bottom: 0;
+
+    .ptype-stanford-layout {
+      @include responsive-spacing('padding-top', 5);
+      @include responsive-spacing('padding-bottom', 7);
+
+      //  Layout paragraph type section variant styles
+      &.irsr-section-color--foggy,
+      &.irsr-section-color--foggy-light {
+        position: relative;
+
+        &::before,
+        &::after {
+          content: "";
+          position: absolute;
+          /* fill vertically */
+          top: 0;
+          bottom: 0;
+          width: 100%;
+          right: 100%;
+          z-index: -1;
+        }
+
+        &::after {
+          left: 100%;
+        }
+      }
+
+      &.irsr-section-color--foggy {
+        background-color: $su-color-foggy;
+
+        &::before,
+        &::after {
+          background: $su-color-foggy;
+        }
+      }
+
+      &.irsr-section-color--foggy-light {
+        background-color: $su-color-foggy-light;
+
+        &::before,
+        &::after {
+          background: $su-color-foggy-light;
+        }
+      }
+
+      .su-entity-item {
+        margin-bottom: 0;
+      }
+
+      .su-entity-button {
+        @include responsive-spacing('margin-top', 5);
+      }
+    }
+  }
+}
diff --git a/src/scss/components/layout/index.scss b/src/scss/components/layout/index.scss
@@ -0,0 +1,3 @@
+@charset "UTF-8";
+
+@import 'layout';