Pull quote: Allow for white background

[inesdgomes]

The pull quote needs to have an alternative background colour. When it's used on a light blue background, the grey on light blue does not work well.

@beatrizmartinmartins Could you please adjust the component so it supports a white background too?
https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=6340-11230&t=R3lyZzK9MNs9dofF-0

[beatrizmartinmartins]

@inesdgomes changes the background and also the line on the bottom so it had a little bit more contrast with light blue backgrounds. Check the component here

[inesdgomes]

Thanks @beatrizmartinmartins. @justintemps One more small fix: we need to add white as an alternative color for the blockquote. Right now it only supports grey. See component here: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=1433-3559&t=PQqpg8iCWbPVgCjB-0

[justintemps]

@inesdgomes and @beatrizmartinmartins, the pull quote isn't developed as a standalone component, should it be? Right now it's simply a style applied to the html

element in the RichText component, which doesn't take any settings.

The best solution in that case, I think, is to make the RichText component "themable" so you can decide how it looks on light and dark backgrounds. I don't think we can implement a solution that effects the blockquote alone.

[inesdgomes]

Hi @beatrizmartinmartins Justin and I discussed this. Adding another colour setting to the blockquote would not have an ideal development solution, so Justin suggested we use one single colour that works both on a white and light blue rich text. I was thinking perhaps we could change the grey to light blue - then when the quote is used on a white rich text, it'll have a light blue rectangle; when the quote is used on light blue rich text, it won't show any rectangle. What do you think?

[beatrizmartinmartins]

@inesdgomes I made some tests. I think on white looks good, but on light blue background it just gets lost. Why would we have problems on implementing two colored pull quotes?

[inesdgomes]

@justintemps? Any chance you could reconsider this?

[justintemps]

Hey @beatrizmartinmartins the pull quote isn't it's own component, it's part of the RichText component which applies styles to a lot of html elements that it might contain. We don't want to add a setting to the RichText component that only applies to the

element. At this phase, we'd prefer making a simple change to the blockquote that allows us to solve this issue without adding new settings.

[beatrizmartinmartins]

@justintemps got it. Let's keep the light blue version then. Please see it here. cc @inesdgomes

[inesdgomes]

@justintemps Small changes needed here. See designs.

• Quote background colour changes to light blue
• There's a line at the bottom of the quote that seems to be missing here: https://ilo-ui-react.netlify.app/?path=/docs/components-content-richtext--docs

[justintemps]

Moving this to dev in #1283