SHS-5783 / SHS-5784: New Well Color for Collections

[codechefmarc]

READY FOR REVIEW

Summary

Backend

• Adds two new fields: Background Color (field_bg_color) and Background Color Width (field_bg_color_width) to the Collection and Private Collection paragraphs
• Background Color Width only appears if Background Color has a value
• Hides the old Background Color field (field_paragraph_style) - to be cleaned up in a subsequent PR.
• As part of a deploy hook, if the old Background Color field had a value, marks the new Background Color field with the default value of "Color Palette Default"

Frontend

Update the styles and logic to make the new two fields Background Color (field_bg_color) and Background Color Width (field_bg_color_width) work in the FE

Need Review By (Date)

09/11/2024

Urgency

medium

Steps to Test

Backend

1. If using the Tugboat site to test, the deploy hook should have already been run
2. Edit an existing page that had a background color set (for hs_colorful a good example is "Collection with Mixed Components in a Well"
3. Open the "Collection" paragraph in the Main Region
4. Verify that the Background Color field has a value of "Color Palette Default"
5. Verify that the Background Color Width field is only visible when the Background color field is set

7. Verify that if "- None -" is selected for the Background Color that the Background Color Width field disappears
8. Verify that the old Background Color field (field_paragraph_style) (now labeled "Background Color (old)" for Collections and "Style (old)" for Private Collections) is not visible at all on the Paragraph form. (Verify via /admin/structure/paragraphs_type/hs_collection/form-display for Collections and /admin/structure/paragraphs_type/hs_priv_collection/form-display for Private Collections)

9. Verify that the correct options are available for the Background Color field: Default, Grey, Light and that this field is optional

10. Verify that the correct options are available for the Background Color Width field: Limited Width, Full Width and that this field (when visible) is required.

11. Repeat the previous tests in a Private Page with a Private Collection component.

Frontend

1. On Traditional and Colorful
2. Create a Flexible Page and add Collections for each Background Color and each Background Color Width
3. Verify the width and the color is correct in all different color pairings. It should look like what it's proposed in the design (Traditional / Colorful). The distribution of the colors in the design it's in the following way:

• Color default value -> Colors in the first column (left side of the page)
• Grey -> Color in the second column (center of the page)
• Light -> Colors in the last column (right side of the page)

5. Please, also verify that existing Collection components that had a background set the well color looks as expected
6. Repeat the previous tests in a Private Page with a Private Collection component.

PR Checklist

• PR Checklist
• Humsci Basic PR Checklist

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1208060702831006

[dalin-]

I thought I'd do a review since @cienvaras is out until Monday. This code all looks great. Your explanation matches what I intended. But I'm not sure how to log into tugboat to do an extra confirmation.

What do you suggest for how @mariannuar might move forward tomorrow before Andrés is back? Continue working on this branch?

[codechefmarc]

Thanks! I sent the login info to you in Slack. As to FE work - I think that's fine to work on this same branch. I saw the note about possible changes to the color names, though, so perhaps wait a bit before those are finalized. Then I can update the BE code to match those new colors (if any change) and then FE work can start.

[mariannuar]

@dalin- (cc: @codechefmarc ) Just a heads up that I'm done with my allocations this week for this project :) and I'm currently working on the multiselect ticket, so I think I could start working on the FE part of this on Monday afternoon. Thank you!

[cienvaras]

@codechefmarc Need to change a bit how the new field values are being updated. Please take a look at the inline comment and let me know if you have any questions.

[cienvaras]

@codechefmarc Thanks for implementing the update hook. Code looks good, just found an issue when setting one of the new values, but should be easy to fix.

[dalin-]

Some suggestions to get a better complexity score.

[dalin-]

Unrelated to complexity, but this technique is not safe. If an exception is thrown on item 5, the rest of the items in this loop will be skipped. Better to wait to remove an item until after it's been successfully processed.

[codechefmarc]

@cienvaras - Ok, this is ready for a re-review. Thank you for the find on setting the second field, that is now fixed.

[cienvaras]

@ahughes3 Fixed, both the field order and the screenshots. Let us know if any other change is required.

[joegl]

A couple of recommendations and suggestions.

[ahughes3]

Looks good!