Updates to Image Text2 component

[kristinashu]

This is probably blocked by - Remove deprecated components #1902 and Updates Figuregrid2 component #2696

Related to - New Image Text Mini component #2694

Based on design in #2282, component comps https://redpen.io/tuab5adf37d05d0414 and Fellowship comps https://redpen.io/p/mga45e3eeaaf9bc071.

Styling and CMS form fields

• Keep image at 1:1 ratio
• Add styles to Test so they match our style guide (H2-H6, normal body + large body, bold, italic, list, url link)
• Add optional top divider and separate optional bottom divider (1px black)
• Vertically center the image with the content
• Mobile: halve the size of the image and left align it
• Update component name from Image Text2 to Image Text [blocked by deprecating old component (Wagtail) Deprecated Image Text component needs to be removed from codebase #2739] - ok to hold off on name change
• Remove Small checkbox (this is now Image text mini)

@alanmoo or @Pomax can you please either add to this ticket or open a separate one that includes additional steps for determining where this component is used and how we can make sure we don't break anything while doing these updates?

Component comp

[Pomax]

It looks like we're still using ImageTextBlock on nine pages so we'll have to switch those over to ImageTextBlock2 first before we can remove the original ImageTextBlock (which is a necessary step before we can start renaming things relating to ImageBlock2. Streamfield migrations are unfortunately even more complex than standard django model renames)

[kristinashu]

Amazing that you can tell which pages are using it! I will update those tomorrow.

[kristinashu]

Ok that was painfully tedious but they're all gone now!

[Pomax]

Super! On a CMS permissions note, can you see the "settings -> block inventory" option? I don't recall it being an explicit permission in the user group policies, but I also don't think we ever checked that everyone with CMS access can see it, even though it'd be super useful if everyone could.

[kristinashu]

Yes, I see it!

[Pomax]

ah, perfect. Thanks for checking!

[kristinashu]

I guess, feel free to do the renaming later if deleted the deprecated component is a blocker.

[alanmoo]

Removing the "small" checkbox is going to impact at least one page on the existing site: https://foundation.mozilla.org/en/initiatives/responsible-cs/challenge/.

Has an audit been done to understand the effects of this (and the URL removal)?

I wonder if it might be better to rebuild this as a separate component called Image Text and deprecate ImageText2

[kristinashu]

ImageText2 (without the checkbox) has been used extensively on the site so replacing it would be a nightmare.

I can certainly do an audit of where the "small" checkbox has been used and then replace those with Image Text Mini when we have it (that's why I put mini as a higher priority to this one).

[youriwims]

@kristinashu, any updates on the 'small' checkbox audit?

[kristinashu]

From an inventory search and looking at the page, here are the instances:

• https://foundation.mozilla.org/en/fellowships/
• https://foundation.mozilla.org/en/fellowships/apply/
• https://foundation.mozilla.org/en/initiatives/responsible-cs/
• https://foundation.mozilla.org/en/initiatives/responsible-cs/faq/
• https://foundation.mozilla.org/en/initiatives/responsible-cs/industry-support/
• https://foundation.mozilla.org/en/initiatives/responsible-cs/judges/
• https://foundation.mozilla.org/en/initiatives/responsible-cs/challenge/
• https://foundation.mozilla.org/en/opportunity/mozilla-information-trust-initiative/ (removed)
• https://foundation.mozilla.org/en/docs/how-do-i-wagtail/sample-page/ (removed)
• https://foundation.mozilla.org/en/docs/brand/design/Typography/
• https://foundation.mozilla.org/en/docs/brand/design/color/

As soon as #2722 is pushed live I will go in an update these with the new component!

[youriwims]

Add styles to Test so they match our style guide (H2-H6, normal body + large body, bold, italic, list, url link)

@kristinashu, what type of list(i.e. ordered/bulleted or unordered/no-bullets) did you want here?

[kristinashu]

All those text styles should be the same as the Paragraph component.

[Pomax]

marking as blocked until #2763 is on production (not just staging)

[Pomax]

#2763 got deployed to production, marking as unblocked again.

[kristinashu]

w00t Youri! Looks like this is all done and working great!

The final step is represented in - [Wagtail Component] Remove Image Text 2 Component #2793