Merge pull request #407 from yalesites-org/yalb-1416-empty-headings

YALB-1416: Bug: Empty Headings in HTML | YALB-1312: Bug: Style views Event Time Period radio buttons | YALB-1215: Dials: Banner heading levels

web/profiles/custom/yalesites_profile/config/sync/core.entity_form_display.block_content.cta_banner.default.yml

@@ -5,6 +5,7 @@ dependencies:
   config:
     - block_content.type.cta_banner
     - field.field.block_content.cta_banner.field_heading
+    - field.field.block_content.cta_banner.field_heading_level
     - field.field.block_content.cta_banner.field_instructions
     - field.field.block_content.cta_banner.field_link
     - field.field.block_content.cta_banner.field_media
@@ -39,6 +40,12 @@ content:
         maxlength_js: 50
         maxlength_js_label: 'Content limited to @limit characters, remaining: <strong>@remaining</strong>'
         maxlength_js_enforce: false
+  field_heading_level:
+    type: options_select
+    weight: 16
+    region: content
+    settings: {  }
+    third_party_settings: {  }
   field_instructions:
     type: markup
     weight: 0

web/profiles/custom/yalesites_profile/config/sync/core.entity_form_display.block_content.grand_hero.default.yml

@@ -5,6 +5,7 @@ dependencies:
   config:
     - block_content.type.grand_hero
     - field.field.block_content.grand_hero.field_heading
+    - field.field.block_content.grand_hero.field_heading_level
     - field.field.block_content.grand_hero.field_instructions
     - field.field.block_content.grand_hero.field_link
     - field.field.block_content.grand_hero.field_media
@@ -39,6 +40,12 @@ content:
         maxlength_js: 50
         maxlength_js_label: 'Content limited to @limit characters, remaining: <strong>@remaining</strong>'
         maxlength_js_enforce: false
+  field_heading_level:
+    type: options_select
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
   field_instructions:
     type: markup
     weight: 0

web/profiles/custom/yalesites_profile/config/sync/core.entity_view_display.block_content.cta_banner.default.yml

@@ -5,6 +5,7 @@ dependencies:
   config:
     - block_content.type.cta_banner
     - field.field.block_content.cta_banner.field_heading
+    - field.field.block_content.cta_banner.field_heading_level
     - field.field.block_content.cta_banner.field_instructions
     - field.field.block_content.cta_banner.field_link
     - field.field.block_content.cta_banner.field_media
@@ -27,6 +28,13 @@ content:
     third_party_settings: {  }
     weight: 1
     region: content
+  field_heading_level:
+    type: list_key
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    weight: 6
+    region: content
   field_link:
     type: link_separate
     label: hidden

web/profiles/custom/yalesites_profile/config/sync/core.entity_view_display.block_content.grand_hero.default.yml

@@ -5,6 +5,7 @@ dependencies:
   config:
     - block_content.type.grand_hero
     - field.field.block_content.grand_hero.field_heading
+    - field.field.block_content.grand_hero.field_heading_level
     - field.field.block_content.grand_hero.field_instructions
     - field.field.block_content.grand_hero.field_link
     - field.field.block_content.grand_hero.field_media
@@ -27,6 +28,13 @@ content:
     third_party_settings: {  }
     weight: 1
     region: content
+  field_heading_level:
+    type: list_key
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    weight: 6
+    region: content
   field_link:
     type: link_separate
     label: hidden

web/profiles/custom/yalesites_profile/config/sync/field.field.block_content.cta_banner.field_heading_level.yml

@@ -0,0 +1,23 @@
+uuid: c4cb4f27-4116-41c1-bf7e-3be014652c3a
+langcode: en
+status: true
+dependencies:
+  config:
+    - block_content.type.cta_banner
+    - field.storage.block_content.field_heading_level
+  module:
+    - options
+id: block_content.cta_banner.field_heading_level
+field_name: field_heading_level
+entity_type: block_content
+bundle: cta_banner
+label: 'Heading Level'
+description: 'Optionally override heading level for this banner'
+required: true
+translatable: false
+default_value:
+  -
+    value: '2'
+default_value_callback: ''
+settings: {  }
+field_type: list_string

web/profiles/custom/yalesites_profile/config/sync/field.field.block_content.grand_hero.field_heading_level.yml

@@ -0,0 +1,23 @@
+uuid: 7b19e30a-e34c-4869-8522-0ec9074beca3
+langcode: en
+status: true
+dependencies:
+  config:
+    - block_content.type.grand_hero
+    - field.storage.block_content.field_heading_level
+  module:
+    - options
+id: block_content.grand_hero.field_heading_level
+field_name: field_heading_level
+entity_type: block_content
+bundle: grand_hero
+label: 'Heading Level'
+description: 'Optionally override heading level for this banner'
+required: true
+translatable: true
+default_value:
+  -
+    value: '2'
+default_value_callback: ''
+settings: {  }
+field_type: list_string

web/profiles/custom/yalesites_profile/config/sync/field.storage.block_content.field_heading_level.yml

@@ -0,0 +1,27 @@
+uuid: 55bae3c6-a2a3-4e10-85ac-63cc9eefc787
+langcode: en
+status: true
+dependencies:
+  module:
+    - block_content
+    - options
+id: block_content.field_heading_level
+field_name: field_heading_level
+entity_type: block_content
+type: list_string
+settings:
+  allowed_values:
+    -
+      value: '1'
+      label: H1
+    -
+      value: '2'
+      label: H2
+  allowed_values_function: ''
+module: options
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

web/profiles/custom/yalesites_profile/modules/custom/ys_views_basic/assets/css/views-basic.css

@@ -2,20 +2,6 @@
 * @todo Possibly move these styles into admin theme.
 */
 
-/* set variables */
-.layout-builder-configure-block {
-  --color-border: var(--wool);
-  --color-border-lightest: var(--color-basic-white);
-  --color-link-hover: hsl(210, 100%, 21%);
-  --color-link-border: #187e9b;
-  --color-background-primary: var(--color-basic-white);
-  --color-background-hover: var(--dark-theme-gray);
-  --color-border-hover: var(--darkest-gray);
-  --color-text-lighter: #2D424D;
-  --color-text-primary: var(--color-gray-800);
-}
-
-
 /* General styles */
 .views-basic--params {
   display: none;
@@ -61,22 +47,26 @@
 }
 
 /* base for labels */
-.glb-form-type--radio label {
+.glb-form-type--radio label.glb-form-item__label.glb-option {
+  display: flex !important;
+  align-items: center;
+  flex-direction: column;
+  gap: 1rem;
   flex: 1 auto;
-  padding: var(--size-spacing-6) var(--size-spacing-4);
-  border-radius: 0.25rem;
-  border: 2px solid var(--color-border);
+  border: 2px solid var(--wool);
   aspect-ratio: 2/1;
-  display: block !important;
   text-align: left;
-  background: var(--dark-theme-gray);
-  border: 2px solid var(--color-border);
+  background-color: var(--dark-theme-gray);
   padding: var(--size-spacing-4) var(--size-spacing-5);
-  color: var(--color-text-primary);
+  color: var(--darkest-gray);
   border-radius: 0.25rem;
   margin-bottom: var(--size-spacing-4);
 }
 
+.glb-form-type--radio label.glb-form-item__label.glb-option:hover {
+  border-color: var(--darkest-gray);
+}
+
 
 /******
 /******** Input styles
@@ -223,15 +213,15 @@
 .layout-builder-configure-block .form-item-settings-block-form-group-user-selection-entity-and-view-mode-entity-types:focus label,
 .layout-builder-configure-block .form-item-settings-block-form-group-user-selection-entity-and-view-mode-view-mode:hover label,
 .layout-builder-configure-block .form-item-settings-block-form-group-user-selection-entity-and-view-mode-view-mode:focus label {
-  background-color: var(--color-background-hover);
-  border-color: var(--color-border-hover);
+  background-color: var(--dark-theme-gray);
+  border-color: var(--darkest-gray);
 }
 
 .layout-builder-configure-block  .glb-form-type--radio input[checked="checked"] + label,
 .layout-builder-configure-block  .glb-form-type--radio input[checked="checked"] + label:hover,
 .layout-builder-configure-block  .glb-form-type--radio:hover input[checked="checked"] + label {
-  background-color: var(--color-text-primary);
-  color: var(--color-background-primary) !important;
+  background-color: var(--darkest-gray);
+  color: var(--wool) !important;
 }
 
 
@@ -247,8 +237,8 @@
 }
 
 .form-item-settings-block-form-group-user-selection-entity-and-view-mode-entity-types input[value="post"][checked="checked"] + label {
-  background-color: var(--color-text-primary);
-  color: var(--color-background-primary);
+  background-color: var(--darkest-gray);
+  color: var(--wool);
 }
 
 
@@ -260,8 +250,8 @@
 }
 
 .form-item-settings-block-form-group-user-selection-entity-and-view-mode-entity-types input[value="event"][checked="checked"] + label {
-  background-color: var(--color-text-primary);
-  color: var(--color-background-primary);
+  background-color: var(--darkest-gray);
+  color: var(--wool);
 }
 
 /* Pages */
@@ -272,8 +262,8 @@
 }
 
 .form-item-settings-block-form-group-user-selection-entity-and-view-mode-entity-types input[value="page"][checked="checked"] + label {
-  background-color: var(--color-text-primary);
-  color: var(--color-background-primary);
+  background-color: var(--darkest-gray);
+  color: var(--wool);
 }
 
 /* Profiles */
@@ -284,8 +274,8 @@
 }
 
 .form-item-settings-block-form-group-user-selection-entity-and-view-mode-entity-types input[value="profile"][checked="checked"] + label {
-  background-color: var(--color-text-primary);
-  color: var(--color-background-primary);
+  background-color: var(--darkest-gray);
+  color: var(--wool);
 }
 
 /*

web/profiles/custom/yalesites_profile/modules/custom/ys_views_basic/assets/js/views-basic.js

@@ -26,7 +26,9 @@
       const radioGroups = [
         'input[name="settings[block_form][group_user_selection][entity_and_view_mode][entity_types]"]',
         'input[name="settings[block_form][group_user_selection][entity_and_view_mode][view_mode]"]',
-        'input[name="settings[block_form][group_user_selection][filter_and_sort][term_operator]"]',
+        'input[name="settings[block_form][group_user_selection][filter_options][term_operator]"',
+        'input[name="settings[block_form][group_user_selection][filter_and_sort][term_operator]"',
+        'input[name="settings[block_form][group_user_selection][entity_specific][event_time_period]"]'
       ];
 
       // Apply the function to each radio input group

web/profiles/custom/yalesites_profile/modules/custom/ys_views_basic/src/Plugin/Field/FieldWidget/ViewsBasicDefaultWidget.php

@@ -159,6 +159,11 @@ public function formElement(
 
     $form['group_user_selection']['entity_specific'] = [
       '#type' => 'container',
+      '#attributes' => [
+        'class' => [
+          'grouped-items',
+        ],
+      ],
     ];
 
     $form['group_user_selection']['options'] = [
@@ -274,9 +279,9 @@ public function formElement(
       '#type' => 'radios',
       '#title' => $this->t('Event Time Period'),
       '#options' => [
-        'future' => $this->t('Future Events'),
-        'past' => $this->t('Past Events'),
-        'all' => $this->t('All Events'),
+        'future' => $this->t('Future Events') . '<img src="/profiles/custom/yalesites_profile/modules/custom/ys_views_basic/assets/icons/event-time-future.svg" alt="Future Events icon showing a calendar with a future-pointing arrow to the right.">',
+        'past' => $this->t('Past Events') . '<img src="/profiles/custom/yalesites_profile/modules/custom/ys_views_basic/assets/icons/event-time-past.svg" alt="Past Events icon showing a calendar with a past-pointing arrow to the left.">',
+        'all' => $this->t('All Events') . '<img src="/profiles/custom/yalesites_profile/modules/custom/ys_views_basic/assets/icons/event-time-all.svg" alt="All Events icon showing a calendar.">',
       ],
       '#default_value' => ($items[$delta]->params) ? $this->viewsBasicManager->getDefaultParamValue('event_time_period', $items[$delta]->params) : 'future',
       '#states' => [