From ddefae0a0abd2c5184b23169f0d70a9e9090fe7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?= <48533432+mariannuar@users.noreply.github.com> Date: Tue, 10 Sep 2024 11:45:24 -0600 Subject: [PATCH] SHS-5784: New Well Color for Collections: Front-end (#1616) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: Andrés Díaz Soto Co-authored-by: CircleCI Co-authored-by: Joe Gilliland-Lloyd <6943710+joegl@users.noreply.github.com> --- .../hs_paragraph_types.module | 36 ++++++++++++++++--- .../src/scss/objects/_layouts.row.scss | 8 +++++ .../_variables.colorful-pairings.scss | 7 ++++ .../_variables.traditional-pairings.scss | 6 ++++ 4 files changed, 52 insertions(+), 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 index bd229565e9..7718be434c 100644 --- 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 index acbd479e36..f47f520d08 100644 --- 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 index 7b4af6de90..f3500dd5bc 100644 --- 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 index 94934721ea..f9d4a16450 100644 --- 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, );