SHS-5784: New Well Color for Collections: Front-end (#1616)

* feat(shs-5784): add new well color for collections - FE * feat(shs-5784): add new well color for collections - FE * fix(shs-5784): logic * Updated dependencies * SHS-5791: Update Stanford University brand bar link (#1618) * SHS-5791: Update Stanford University brand bar link. * feat(shs-5784): improve code in module and add vireo light well color * fix(shs-5784): add import for html * HSD8-000: Fix localist_url fieldwidget discovery (#1621) HSD8-000: Fix localist_url fieldwidget discovery. --------- Co-authored-by: Mari Nez <mariannuar@gmail.com> Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com> Co-authored-by: CircleCI <sws-developers@lists.stanford.edu> Co-authored-by: Joe Gilliland-Lloyd <6943710+joegl@users.noreply.github.com>
SU-HSDO · Sep 10, 2024 · ddefae0 · ddefae0
1 parent f663cca
commit ddefae0
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 5 deletions.
diff --git a/docroot/modules/humsci/hs_paragraph_types/hs_paragraph_types.module b/docroot/modules/humsci/hs_paragraph_types/hs_paragraph_types.module
@@ -7,19 +7,45 @@
 
 use Drupal\Core\Form\FormStateInterface;
 use \Drupal\Core\Render\Element;
+use Drupal\Component\Utility\Html;
 
 /**
  * Implements hook_preprocess_HOOK().
  */
 function hs_paragraph_types_preprocess_paragraph(&$variables) {
-  if (in_array($variables['paragraph']->bundle(), ['hs_collection', 'hs_priv_collection'])) {
-    /** @var \Drupal\paragraphs\ParagraphInterface $paragraph */
-    $paragraph = $variables['paragraph'];
+  /** @var \Drupal\paragraphs\ParagraphInterface $paragraph */
+  $paragraph = $variables['paragraph'];
+  $bundle = $paragraph->bundle();
+
+  // Exit early if it's not a relevant bundle
+  if (!in_array($bundle, ['hs_collection', 'hs_priv_collection'])) {
+    return NULL;
+  }
+
+  $variables['#attached']['library'][] = 'hs_paragraph_types/hs_collection';
+  $variables['attributes']['class'][] = 'hs-paragraph-style';
+
+  // Logic for private collections
+  if ($bundle == 'hs_priv_collection') {
+    // Logic for private collections
     $row_style = $paragraph->get('field_paragraph_style')->getString();
     if (!empty($row_style)) {
-      $variables['attributes']['class'][] = 'hs-paragraph-style hs-paragraph-style--' . $row_style;
+      $variables['attributes']['class'][] = 'hs-paragraph-style--' . $row_style;
     }
-    $variables['#attached']['library'][] = 'hs_paragraph_types/hs_collection';
+    return;
+  }
+
+  // Logic for normal collections.
+  // Replace underscores with hyphens in the bg_color value
+  $bg_color = Html::cleanCssIdentifier($paragraph->get('field_bg_color')->getString());
+
+  // Append "-well" to the bg_color
+  $bg_width = $paragraph->get('field_bg_color_width')->getString();
+  if (!empty($bg_color)) {
+    $bg_width_class = $bg_width == 'full_width' ? 'well-full-width' : 'well';
+    $bg_color .= '-well';
+    $variables['attributes']['class'][] = 'hs-paragraph-style--' . $bg_width_class;
+    $variables['attributes']['class'][] = 'hs-paragraph-style--' . $bg_color;
   }
 }
 

diff --git a/docroot/themes/humsci/humsci_basic/src/scss/objects/_layouts.row.scss b/docroot/themes/humsci/humsci_basic/src/scss/objects/_layouts.row.scss
@@ -58,6 +58,14 @@
       @include hb-page-width;
     }
   }
+
+  &--grey-well {
+    background-color: var(--palette--gray-well);
+  }
+
+  &--light-well {
+    background-color: var(--palette--light-well);
+  }
 }
 
 // Decanter uses flexbox for row components. For modern browsers, let's use CSS Grid.

diff --git a/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.colorful-pairings.scss b/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.colorful-pairings.scss
@@ -19,6 +19,7 @@ $hc-colorful-pairings: (
     'tertiary-reversed': #00d5f5,
     'tertiary-darken-20': darken(#007c8f, 20%),
     'spotlight': #e4f4ee,
+    'light-well': #e6f5f1,
   ),
   'mountain': (
     'primary': #64305f,
@@ -35,6 +36,7 @@ $hc-colorful-pairings: (
     'tertiary-reversed': #74fbc7,
     'tertiary-darken-20': darken(#148762, 20%),
     'spotlight': #e4f5ff,
+    'light-well': #e2f0f8,
   ),
   'cardinal': (
     'primary': #600e0e,
@@ -51,6 +53,7 @@ $hc-colorful-pairings: (
     'tertiary-reversed': #cecfd1,
     'tertiary-darken-20': darken(#b1040e, 20%),
     'spotlight': #e9e6e2,
+    'light-well': #f7e5e5,
   ),
   'lake': (
     'primary': #005160,
@@ -67,6 +70,7 @@ $hc-colorful-pairings: (
     'tertiary-reversed': #fdfcf2,
     'tertiary-darken-20': darken(#485045, 20%),
     'spotlight': #e1eadd,
+    'light-well': #eaeae4,
   ),
   'canyon': (
     'primary': #005160,
@@ -83,6 +87,7 @@ $hc-colorful-pairings: (
     'tertiary-reversed': #ebebeb,
     'tertiary-darken-20': darken(#006073, 20%),
     'spotlight': #dfedef,
+    'light-well': #fef4f4,
   ),
   'cliff': (
     'primary': #8c1515,
@@ -99,6 +104,7 @@ $hc-colorful-pairings: (
     'tertiary-reversed': #cecfd1,
     'tertiary-darken-20': darken(#620e0e, 20%),
     'spotlight': #dfedef,
+    'light-well': #edfcff,
   ),
 );
 $hc-colorful-globals: (
@@ -109,4 +115,5 @@ $hc-colorful-globals: (
   'white': #ffffff,
   'black': #000000,
   'cardinal': #8c1515,
+  'gray-well': #e9e7e7,
 );
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.traditional-pairings.scss b/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.traditional-pairings.scss
@@ -19,6 +19,7 @@ $ht-traditional-pairings: (
     'tertiary-reversed': #dbdcde,
     'tertiary-darken-20': darken(#b1040e, 20%),
     'spotlight': #dde0e0,
+    'light-well': #f7eeee,
   ),
   'bluejay': (
     'primary': #600e0e,
@@ -35,6 +36,7 @@ $ht-traditional-pairings: (
     'tertiary-reversed': #daebed,
     'tertiary-darken-20': darken(#b1040e, 20%),
     'spotlight': #e9f5f6,
+    'light-well': #bfdbdf,
   ),
   'warbler': (
     'primary': #003b45,
@@ -51,6 +53,7 @@ $ht-traditional-pairings: (
     'tertiary-reversed': #dcd9d3,
     'tertiary-darken-20': #41473e,
     'spotlight': #e1eadd,
+    'light-well': #e1eadd,
   ),
   'firefinch': (
     'primary': #a64c47,
@@ -67,6 +70,7 @@ $ht-traditional-pairings: (
     'tertiary-reversed': #f4f4f4,
     'tertiary-darken-20': darken(#8c1515, 20%),
     'spotlight': #e0e0d1,
+    'light-well': #ecece4,
   ),
   'vireo': (
     'primary': #2b2e13,
@@ -83,6 +87,7 @@ $ht-traditional-pairings: (
     'tertiary-reversed': #dbdcde,
     'tertiary-darken-20': darken(#666252, 20%),
     'spotlight': #e1dfd5,
+    'light-well': #f0f2dd,
   ),
 );
 
@@ -95,4 +100,5 @@ $ht-traditional-globals: (
   'white': #ffffff,
   'black': #000000,
   'cardinal': #8c1515,
+  'gray-well': #edece8,
 );