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

[joetower]

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

Description of work

• This branch includes YALB-1501: Bug: Missing admin styles - Alternate Admin Theme Approach #388 and should not be merged in before it.
• YALB-1416 - Adds conditional check for heading value in drupal block - Atomic: fix(yalb-1416): add ternary check for heading value atomic#167
• YALB-1312 - Adds styles to temporarily theme Event Time Period until we have icons to use. Adds input names to JS file for checked state change on click, to provide visual feedback. Changes in this branch.
• YALB-1215 - Adds new field for field_heading_level adds the field to Banners (CTA and Hero) and wires it to heading_level in the Storybook components. Includes component library work here: YALB-1215: Dials: Banner heading levels component-library-twig#285

Functional testing steps:

Testing: YALB-1215: Dials: Banner heading levels

• View this page: https://pr-407-yalesites-platform.pantheonsite.io/your-story-beautifully-told
• And this page: https://pr-407-yalesites-platform.pantheonsite.io/welcome
• Confirm that both Banners have an h2.
  

• Login and edit https://pr-407-yalesites-platform.pantheonsite.io/node/83/layout
• Change the heading level to h1
• Save and view the page and verify the heading is now an h1

yalb-1215-grand-hero-h1.mp4

• Do the same for the home page (https://pr-407-yalesites-platform.pantheonsite.io/welcome) and verify it also renders an h1 if you change it: https://pr-407-yalesites-platform.pantheonsite.io/node/16/layout

---

Testing: YALB-1416: Bug: Empty Headings in HTML

• Navigate to: https://pr-407-yalesites-platform.pantheonsite.io/your-story-beautifully-told
• Scroll to the bottom and verify the View of Posts does not render a heading element on the page

• Edit the page and add a heading, save the page
• View it again and confirm the heading renders as it should

• You can test this by adding additional Views components, as you'd like

---

Testing: YALB-1312: Bug: Style views Event Time Period radio buttons

• Navigate to https://pr-407-yalesites-platform.pantheonsite.io/events
• Edit the page, edit the "Upcoming Events" component (https://pr-407-yalesites-platform.pantheonsite.io/node/39/layout) and verify:
  • The Time Period radios are temporarily styled so that each radio element doesn't take up a lot of space

yalb-event-form-updates-be.mp4

And if you add a new Views Events block:

yalb-1416-event-form-updates-be.mp4

[github-actions]

Created multidev environment pr-407 for yalesites-platform.

[dblanken-yale]

This all looks so good. I did have one question about the events. I'm still seeing the radio button circle selectors on the events, but not in the other selectable radio button items. Should we hide them as well--they look hidden on the other radios on that configuration? If not, I think this is ready! If it is, feel free to re-request review and I'll be happy to.

Great work!

[codechefmarc]

YALB-1416: Approved

YALB-1312: Approved, but wanted to find out if this was going to get an icon ahead of getting merged? Looks good to merge now and we can always add the icon later.

YALB-1215: I'm seeing a "None" option and I checked and there is a different way we're handling those dial fields. Mainly using the allowed_values_function and default_value_callback in the configs themselves. It's not something you can set in the Drupal UI, but in code. I can help if you'd like, or you can reference these guys (specifically the field_style_color on the callout component:

• web/profiles/custom/yalesites_profile/modules/custom/ys_themes/config/install/ys_themes.component_overrides.yml
• web/profiles/custom/yalesites_profile/config/sync/field.field.block_content.callout.field_style_color.yml
• web/profiles/custom/yalesites_profile/config/sync/field.storage.block_content.field_style_color.yml

[joetower]

@dblanken-yale Those radios for "Event Time Period" should look like the other Radios in the Views Basic form.

---

@codechefmarc I tried rebuilding what we were working on - moving the field_heading_level allowed values to our component_overrides and it didn't work. If you'd like to look at it in this branch, awesome, otherwise we could create a follow up ticket. What do you think?

[joetower]

Well, once it finishes building. I hit comment too soon 😆

[nJim]

YALB-1215: I'm seeing a "None" option and I checked
@codechefmarc @joetower I have a ticket this sprint to address this. If you like, feel free to make the field required and set a default value in the field UI. I don't know if this will be the final fix, but it cleans up any confusion right now.

[joetower]

@codechefmarc This is ready for another look, please.

• For YALB-1215: I made the field_heading_level required for both banner types 👍
• For YALB-1312: I added icons for the Event Time Period
  • I added them in the way we discussed on the Footer Menu Block ticket. I noticed the other form inputs in this Views-Basic aren't using that same pattern.
  • pattern example:

       '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.">'),```
  
  

• Should we create a tech debt ticket to change those, or no?

If you add a new Views -> Event component you should see:

yalb-1416-event-period-icons.mp4

[codechefmarc]

@joetower - yup, that will work, but, in researching yesterday I found a better way to do this that will be easier for translators in that the image isn't inside the translated text:

'basic' => $this->t('Basic') . '<img src="/profiles/custom/yalesites_profile/modules/custom/ys_core/images/preview-icons/footer-basic.svg" alt="Basic footer icon showing a small Yale logo, and gray placeholders for copyright and social media icons.">',

And yes, I really like this idea much better than doing it in a background image, so we should create a tech debt ticket to change out all of them - it seemed it was much easier for you to style as well.

[codechefmarc]

Approved for the work listed here. However, I mentioned in Slack that I noticed the main nav isn’t rendering correctly on that multidev. I think that is related to work just merged in for the first level links as headings?

[dblanken-yale]

@codechefmarc I tested this on my PR and it's due to atomic's changes not being in release versions yet. If you make a branch mirroring this one from develop and rebuild, it shows fine. No worries there.