UHF-9739 Updating news

hdbt_admin.libraries.yml

@@ -29,6 +29,13 @@ tpr-edit-form:
   js:
     dist/js/tprEditForm.min.js: {}
 
+updating-news-auto-toggle:
+  js:
+    dist/js/updatingNewsAutoToggle.min.js: {}
+  version: 1.0
+  dependencies:
+    - core/once
+
 debug-item-composer:
   js:
     dist/js/debug-item-composer.min.js: {}

hdbt_admin.theme

@@ -146,6 +146,11 @@ function hdbt_admin_form_node_form_alter(&$form, FormStateInterface $form_state)
   ) {
     $form['menu']['content_translation_status']['#access'] = FALSE;
   }
+
+  // Auto toggle updating news field group if there is content in the group.
+  if ($node->getType() === 'news_item') {
+    $form['#attached']['library'][] = 'hdbt_admin/updating-news-auto-toggle';
+  }
 }
 
 /**

src/js/updatingNewsAutoToggle.js

@@ -0,0 +1,28 @@
+/**
+ * @file
+ * Updating news field group auto toggle if there is content.
+ */
+
+(function (once) {
+
+  'use strict';
+
+  const updatingNews = once(
+    'updating-news-auto-toggle',
+    '[data-drupal-selector="edit-group-updating-news"]'
+  );
+
+  if (updatingNews.length === 0) {
+    return;
+  }
+
+  updatingNews.forEach(details => {
+    const updatingNewsContent = details.querySelector(
+      'table.field-news-item-updating-news-values > tbody'
+    );
+
+    if (updatingNewsContent) {
+      details.open = true;
+    }
+  });
+})(once);

src/scss/06_components/misc/_select-paragraph.scss

@@ -11,7 +11,7 @@ $button-border-radius: 6px;
     background-color: $color-white;
     height: $button-height;
     min-height: $button-height;
-    width: 400px;
+    width: 450px;
 
     .dropbutton__item {
       min-height: calc(#{$button-height} - (#{$button-border-thickness} * 2));

src/scss/06_components/paragraphs/__index.scss

@@ -9,4 +9,5 @@
 @import 'library';
 @import 'liftup-with-image';
 @import 'list-of-links';
+@import 'news-update';
 @import 'text';

src/scss/06_components/paragraphs/_news-update.scss

@@ -0,0 +1,36 @@
+// Hide news item updating news paragraph label as it's obsolete in field group.
+.field-news-item-updating-news-values > thead {
+  display: none;
+}
+
+// Hide news update paragraph field label as it's only taking extra space in UI.
+.field-news-update-values > thead {
+  display: none;
+}
+
+// Remove extra margins, padding and borders from
+// the date picker field wrapper and labels.
+.hdbt-admin .field--name-field-news-update-date > fieldset {
+  border: 0;
+  margin-bottom: 0;
+  padding: 0;
+
+  // Unify the font-size of the date-picker field label.
+  .fieldset__label {
+    font-size: remify(16px) !important;
+    line-height: 1.5 !important;
+    padding: 0;
+  }
+
+  // Remove side margins from fieldset wrapper.
+  .fieldset__wrapper {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  // Remove all margins from datetime wrapper and datetime label.
+  .fieldset__wrapper .form-datetime-wrapper,
+  .form-item.form-item--no-label {
+    margin: 0;
+  }
+}