Merge pull request #259 from UN-OCHA/berliner/HPC-9860

HPC-9860: Add control for number of columns in achievement lists paragraphs
UN-OCHA · Nov 12, 2024 · 674c187 · 674c187
2 parents fce5ec4 + eddb82c
commit 674c187
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 7 deletions.
diff --git a/config/core.entity_form_display.paragraph.achievement_list.default.yml b/config/core.entity_form_display.paragraph.achievement_list.default.yml
@@ -4,6 +4,7 @@ status: true
 dependencies:
   config:
     - field.field.paragraph.achievement_list.field_achievements
+    - field.field.paragraph.achievement_list.field_columns
     - field.field.paragraph.achievement_list.field_text
     - paragraphs.paragraphs_type.achievement_list
   module:
@@ -16,6 +17,7 @@ third_party_settings:
       children:
         - group_achievements
         - group_caption
+        - group_settings
       label: Tabs
       region: content
       parent_name: ''
@@ -57,6 +59,22 @@ third_party_settings:
         formatter: closed
         description: ''
         required_fields: true
+    group_settings:
+      children:
+        - field_columns
+      label: Settings
+      region: content
+      parent_name: group_tabs
+      weight: 8
+      format_type: tab
+      format_settings:
+        classes: ''
+        show_empty_fields: false
+        id: ''
+        label_as_html: false
+        formatter: closed
+        description: ''
+        required_fields: true
 id: paragraph.achievement_list.default
 targetEntityType: paragraph
 bundle: achievement_list
@@ -82,6 +100,13 @@ content:
         convert: '0'
         duplicate: duplicate
     third_party_settings: {  }
+  field_columns:
+    type: number
+    weight: 2
+    region: content
+    settings:
+      placeholder: ''
+    third_party_settings: {  }
   field_text:
     type: text_textarea
     weight: 2
@@ -92,13 +117,13 @@ content:
     third_party_settings: {  }
   status:
     type: boolean_checkbox
-    weight: 3
+    weight: 1
     region: content
     settings:
       display_label: true
     third_party_settings: {  }
   translation:
-    weight: 4
+    weight: 3
     region: content
     settings: {  }
     third_party_settings: {  }

diff --git a/config/core.entity_view_display.paragraph.achievement_list.default.yml b/config/core.entity_view_display.paragraph.achievement_list.default.yml
@@ -4,6 +4,7 @@ status: true
 dependencies:
   config:
     - field.field.paragraph.achievement_list.field_achievements
+    - field.field.paragraph.achievement_list.field_columns
     - field.field.paragraph.achievement_list.field_text
     - paragraphs.paragraphs_type.achievement_list
   module:
@@ -30,4 +31,5 @@ content:
     third_party_settings: {  }
     weight: 1
     region: content
-hidden: {  }
+hidden:
+  field_columns: true
diff --git a/config/field.field.paragraph.achievement_list.field_columns.yml b/config/field.field.paragraph.achievement_list.field_columns.yml
@@ -0,0 +1,34 @@
+uuid: 69b81f5b-70a8-46ee-855c-9b8b3c5c501a
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_columns
+    - paragraphs.paragraphs_type.achievement_list
+  module:
+    - field_config_cardinality
+third_party_settings:
+  field_config_cardinality:
+    cardinality_config: '1'
+    cardinality_label_config: false
+    unlimited_not_required: ''
+    limited_not_required: ''
+    limited_required: ''
+id: paragraph.achievement_list.field_columns
+field_name: field_columns
+entity_type: paragraph
+bundle: achievement_list
+label: Columns
+description: 'Set the number of columns for the display of the achievement list.'
+required: false
+translatable: true
+default_value:
+  -
+    value: 4
+default_value_callback: ''
+settings:
+  min: 1
+  max: 4
+  prefix: ''
+  suffix: ''
+field_type: integer
diff --git a/config/field.storage.paragraph.field_columns.yml b/config/field.storage.paragraph.field_columns.yml
@@ -0,0 +1,20 @@
+uuid: 48bdb0bb-3efd-447a-ae1b-ab261d2725d6
+langcode: en
+status: true
+dependencies:
+  module:
+    - paragraphs
+id: paragraph.field_columns
+field_name: field_columns
+entity_type: paragraph
+type: integer
+settings:
+  unsigned: false
+  size: normal
+module: core
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false
diff --git a/html/modules/custom/ncms_ui/css/frontend_styles.css b/html/modules/custom/ncms_ui/css/frontend_styles.css
@@ -181,10 +181,21 @@
 }
 
 .paragraph--type--achievement-list .field__items > .field__item {
-  flex: 0 0 calc((100% - 3rem) / 4);
   background: #eee;
   padding: 1rem 0;
 }
+.paragraph--type--achievement-list .field__items.col-1 > .field__item {
+  flex: 0 0 calc((100% - 3rem));
+}
+.paragraph--type--achievement-list .field__items.col-2 > .field__item {
+  flex: 0 0 calc((100% - 3rem) / 2);
+}
+.paragraph--type--achievement-list .field__items.col-3 > .field__item {
+  flex: 0 0 calc((100% - 3rem) / 3);
+}
+.paragraph--type--achievement-list .field__items.col-4 > .field__item {
+  flex: 0 0 calc((100% - 3rem) / 4);
+}
 .paragraph--type--achievement-list .field__items > .field__item > * {
   padding: 0 1rem;
 }

diff --git a/html/modules/custom/ncms_ui/ncms_ui.module b/html/modules/custom/ncms_ui/ncms_ui.module
@@ -315,6 +315,16 @@ function ncms_ui_preprocess_field__paragraph__field_title__document_chapter(&$va
   }
 }
 
+/**
+ * Implements hook_preprocess_hook().
+ */
+function ncms_ui_preprocess_field__paragraph__achievement_list(&$variables) {
+  /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
+  $paragraph = $variables['element']['#object'];
+  $columns = $paragraph->hasField('field_columns') ? ($paragraph->get('field_columns')->value ?? 4) : 4;
+  $variables['attributes']['class'][] = 'col-' . $columns;
+}
+
 /**
  * Implements hook_preprocess_layout_paragraphs_builder_controls().
  */

diff --git a/...es/custom/common_design_subtheme/components/gho-achievement-list/gho-achievement-list.css b/...es/custom/common_design_subtheme/components/gho-achievement-list/gho-achievement-list.css
@@ -10,19 +10,29 @@
 }
 
 @media (min-width: 504px) {
-  .gho-achievement-list .field__item {
+  .gho-achievement-list .field__items.col-3 > .field__item,
+  .gho-achievement-list .field__items.col-4 > .field__item {
     flex: 0 0 calc((100% - 1rem) / 2);
   }
 }
 
 @media (min-width: 734px) {
-  .gho-achievement-list .field__item {
+  .gho-achievement-list .field__items.col-2 > .field__item {
+    /* Full size col-2 */
+    flex: 0 0 calc((100% - 2rem) / 2);
+  }
+  .gho-achievement-list .field__items.col-4 > .field__items {
     flex: 0 0 calc((100% - 2rem) / 3);
   }
 }
 
 @media (min-width: 960px) {
-  .gho-achievement-list .field__item {
+  .gho-achievement-list .field__items.col-3 > .field__item {
+    /* Full size col-3 */
+    flex: 0 0 calc((100% - 2rem) / 3);
+  }
+  .gho-achievement-list .field__items.col-4 > .field__item {
+    /* Full size col-4 */
     flex: 0 0 calc((100% - 3rem) / 4);
   }
 }