Add ability to choose theming for select components

[reillyzlab]

Allow [nearly] all components to change color theme between white, gray, or blue

Components that still need:

• [ ] Three column with image
• [ ] Cabinet
• [ ] Drawers
• [ ] Group of Links - Grid [w/ and w/o Description]
• [ ] Group of Links - Mini Grid
• [ ] Group of Links - List
• [ ] Group of Links - Quick Links
• [ ] Grid of Guides
• [ ] Grid of Quotes
• [ ] Formatted Text
• [ ] Transaction Grid
• [ ] Feedback (larger issues here)
• [ ] News/Announcements
• [ ] Upcoming events

[reillyzlab]

Dependent on design designating what each color layout looks like - corresponding ticket: https://github.com/CityOfBoston/boston.gov-d8/issues/322

[jimafisk]

Updating all components this way would likely exceed a week (largest sprint label).

[andrebtlima]

Need to determine which components currently can be themed, just to make sure the above checklist is still correct.

[padora-cob]

Components ready for review and feedback:

• [x] Three column with image
• [x] Cabinet
• [x] Drawers
• [x] Group of Links - Grid [w/ and w/o Description]
• [x] Group of Links - Mini Grid
• [x] Group of Links - List
• [ ] Group of Links - Quick Links
• [x] Grid of Guides
• [x] Grid of Quotes
• [x] Formatted Text
• [x] Transaction Grid
• [ ] Feedback (larger issues here)
• [x] News/Announcements
• [x] Upcoming events

[reillyzlab]

On gray background page, the following need the department contact fixed. This should be red with light blue hover to match the other components (example below):

• [ ] three column with image
• [ ] Grid of guides

-- On white background page:

1. The following need the department contact fixed. This should be red with light blue hover to match the other components (example below):

   • [ ] three column with image
   • [ ] Grid of guides

2. Event and notices:

   • [ ] I think the featured event/notice needs a box or something to frame the content - @sebastianebarb or @carolinestj to advise?
   • [x] There is something funny happening when events are 'canceled' -- see:

-- On dark blue background page:

1. The department contact is inconsistent in coloring. These should be consistent. Few examples of how they vary. @sebastianebarb @carolinestj to advise how to handle this

   

2. Events and notices:

   • [x] There is something funny happening when events are 'canceled' -- see:

[reillyzlab]

@padora-cob @sebastianebarb realize it wasn't originally on the ticket but is there a reason we didn't do the commissions components?

[padora-cob]

@padora-cob @sebastianebarb realize it wasn't originally on the ticket but is there a reason we didn't do the commissions components?

I don't think so, I simply went off the list above. I think there could be a few more components we could add this to though. Would just want to add them to the list so I don't lose track with all the files flying around.

[carolinestj]

we should check that the red #D22D23 is accessible on the dark blue background, when I check it it fails. The lighter red #FB4D42 passes though!

Example:

[duffy-james]

Aside from the issues @reillyzlab flagged, here are some others. This is specifically for the "blue" theme:

1. The "short description" field in the individual drawers appears to be a blue color that's blending into the background slightly:

It's a little different, but I imagine this would cause an accessibility issue.

2. The "short description" for the individual links in the "group of links - list" with and without description components is blending into the background. You can only see the text when you hover over the link with your mouse:

Normal:

Hover state

3. The "newsletter" component has extra white space at each corner of the component:

4. This is related to the spacing issues in between components, but I'm still seeing extra white space and other issues. It might just be related to the "emergency alerts" component, as that is the common denominator.

There's extra white space in between this "maps" and "emergency alerts" component:

The space is real tight in between the "iframe" and the "emergency alerts" component:

5. The "featured" event also appears to be missing text because it's blending into the background:

If you click and drag over that section, you can see the missing text:

[duffy-james]

For the "white" themed components, here are some minor issues:

1. The "short description" text in the individual "drawers" of the "drawers" component blends into the background:

2. There's extra spacing in between the "FYI" component and a "photo" component:

[duffy-james]

There are also some minor issues with the "gray" components:

1. There's extra spacing in between a few components (probably a separate issue, but just a flag):

"Drawers" and "quick links" components:

"Group of links - list" and "photo" components:

"Grid of cards" and "photo" components:

"FYI" and "photo" components:

"Formatted text" and "photo" components:

"Map" and "emergency alerts" components:

And it's tight in between the "emergency alert" and "iframe" components:

2. The "newsletter" component also has four white corners:

[duffy-james]

Last thing, across all of the color themes, the hover state for the "grid of guides" has some random red color in the background:

Blue:

Gray:

White:

[stephaniemar]

Estimated about 1 weeks worth of work for this.

[duffy-james]

Closing this ticket; work is now being accounted for in Jira.