ADAPT-2894 Update Section with additional options

[rebeccahongsf]

NOT READY FOR REVIEW

Summary

Update Section with additional options:

• Add title font/weight and alignment option
• Tweak psuedo-elements for tab background color

Review By (Date)

• June 28

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Run local dev and review on /test-items/rebecca/section-update-test or Netlify preview

Front End Validation

• Is the markup using the appropriate semantic tags and passes HTML validation?
• Cross-browser testing has been performed?
• Automated accessibility scans performed?
• Manual accessibility tests performed?
• Design is approved by @ user?

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided? eg (unit, behat, or codeception)

Code security

• Are all forms properly sanitized?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

Affected Projects or Products

• Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

• ADAPT-2894

[yvonnetangsu]

@rebeccahongsf The tab position is a little off. If you add width: fit-content to the heading, and set a margin left and right to auto, then it should be fixed 😄

[yvonnetangsu]

I haven't pulled it down yet, but looks like we need to provide an option for the section title to be sans serif and semibold also (if you haven't added that already - I'm just going by the preview build) 🙏🏼

[rebeccahongsf]

I haven't pulled it down yet, but looks like we need to provide an option for the section title to be sans serif and semibold also (if you haven't added that already - I'm just going by the preview build) 🙏🏼

Great catch @yvonnetangsu! I definitely overlooked the font-family change 😃 This PR has been updated with the request changes

[yvonnetangsu]

Looks like there's some visual regression 😄
https://deploy-preview-210--adapt-giving.netlify.app/

We would like the default to use the old settings 🙏🏼

[yvonnetangsu]

Ah ha I pulled it down so I can see what's going on now. My suggestions:

1. For the default left-aligned section title/intro option, the title needs a margin-left:0/margin-right:auto (maybe the margin-right:auto isn't even needed)
2. Move the "Sans serif semibold" title option so that it becomes one of the multi-select option under "Section Title Styles" schema in storyblok and adjust the code as needed.
   

That should probably do it 🤔 I also tweak the Storyblok for Section options a bit so it should be a bit cleaner now. Thanks in advance!

[rebeccahongsf]

Ah ha I pulled it down so I can see what's going on now. My suggestions:

1. For the default left-aligned section title/intro option, the title needs a margin-left:0/margin-right:auto (maybe the margin-right:auto isn't even needed)
2. Move the "Sans serif semibold" title option so that it becomes one of the multi-select option under "Section Title Styles" schema in storyblok and adjust the code as needed.
   

That should probably do it 🤔 I also tweak the Storyblok for Section options a bit so it should be a bit cleaner now. Thanks in advance!

PR Update:

1. I was able to restructure the isCenterAlign classes so that the previously suggested changes for the Tab alignment is only targeted when isCenterAlign has been selected. I do have a question regarding class naming convention (see here within PR and would like to see whether we have concerns with creating a specific class like this just for the sections styles.

2. When the Sans Serif Semi Bold option is moved into the Section Title Styles, we are unable to control whether the font su-serif is conditionally applied and su-sans does not overwrite the class styles in the event that both classes are applied to the same HTML tag. I've left it as the Single Select dropdown for now but I'm completely open to alt implementations and actively looking into other possibilities on how we can check the boolean. 🤔

[sherakama]

Code looks fine to me. I will leave it to @yvonnetangsu to push the green button to merge this in-case there are any last comments.

@rebeccahongsf I am fine with the new css class and name for getting this to work.

[yvonnetangsu]

Code looks fine to me. I will leave it to @yvonnetangsu to push the green button to merge this in-case there are any last comments.

@rebeccahongsf I am fine with the new css class and name for getting this to work.

We're almost there. Currently the section titles are all default to sans serif (in the preview). We do need to adjust the code so that they go back to being serif 😃

But no worries - @rebeccahongsf Thank you for getting us 95% there. I'll take over and get this ticket and the other one merged tonight. Normally I'd rather we work through this together, but looks like tomorrow is meetingful for me, so I'm going to wrap this up tonight. Enjoy your evening!

[yvonnetangsu]

We're all done 🥳 ! Thank you @rebeccahongsf and @sherakama