Update to design-system 0.33.0

[billhimmelsbach]

Updates the design system dependency to the latest published version 0.33.0. This includes the updates included in 0.32.0 and 0.33.0.

Changes

Update deps: design-system 0.33.0 (2023-11-07)

Breaking Change

• cfpb-typography
  • #1791 Remove large pull quote (@anselmbradford)

Enhancement

• cfpb-buttons
  • #1766 Remove @btn-v-padding-modifier-ie (@anselmbradford)

Bug Fix

• cfpb-forms
  • #1803 fix: Multiselect - Deselect icon stays positioned in upper right corner even with multiline text (@meissadia)
  • #1792 Multiselect: Remove display: -webkit-box property (@anselmbradford)

Update deps: design-system 0.32.0 (2023-10-24)

Breaking

• cfpb-core
  • #1785 fix: [Lead paragraph] Adjust margins

Bug Fix

• cfpb-buttons, cfpb-core, cfpb-layout, cfpb-notifications, cfpb-pagination, cfpb-tables, cfpb-typography
  • #1789 Remove redundant margin | add responsive style code comments

Enhancement

• cfpb-layout
  • #1781 New component: o-text-introduction
• cfpb-forms
  • #1777 [Tag] Update styles per approved redesign

How to test this PR

1. Does updating the design-system dependency cause any unintended consequences for the cf.gov styling or functionality? (see screenshot comparisons below)

Screenshots

design-system 0.33.0 (2023-11-07) changes

#1791 Remove large pull quote (@anselmbradford)
Removes unused large pull quote class that is no longer used on the website, no screenshot required

#1766 Remove @btn-v-padding-modifier-ie (@anselmbradford)
Removes unused CSS class that is no longer used on the website, no screenshot required

#1803 fix: Multiselect - Deselect icon stays positioned in upper right corner even with multiline text (@meissadia)
and...
#1777 [Tag] Update styles per approved redesign

Currently on cf.gov (DS 0.31.0)	On DEV4 (DS 0.33.0)

• #1792 Multiselect: Remove display: -webkit-box property (@anselmbradford)

Use safari to view behavior, first screenshot shows after click that the component does not expand

Currently on cf.gov (DS 0.31.0)	On DEV4 (DS 0.33.0)

design-system 0.32.0 (2023-10-24) changes

#1785 fix: [Lead paragraph] Adjust margins (desktop)

Currently on cf.gov (DS 0.31.0)	On DEV4 (DS 0.33.0)

#1789 Remove redundant margin | add responsive style code comments (mobile)

Currently on cf.gov (DS 0.31.0)	On DEV4 (DS 0.33.0)

#1781 New component: o-text-introduction
currently only used in the design system, no screenshot required

Checklist

• PR has an informative and human-readable title
  • PR titles are used to generate the change log in releases; good ones make that easier to scan.
  • Consider prefixing, e.g., "Mega Menu: fix layout bug", or "Docs: Update Docker installation instructions".
• Changes are limited to a single goal (no scope creep)
• Code follows the standards laid out in the CFPB development guidelines
• Future todos are captured in comments and/or tickets
• Project documentation has been updated, potentially one or more of:
  • This repo’s docs (edit the files in the /docs folder) – for basic, close-to-the-code docs on working with this repo
  • CFGOV/platform wiki on GHE – for internal CFPB developer guidance
  • CFPB/hubcap wiki on GHE – for internal CFPB design and content guidance

Front-end testing

Browser testing

Visually tested in the following supported browsers:

• Firefox
• Chrome
• Safari
• Safari on iOS (sauce labs emulated)
• Chrome on Android (sauce labs emulated)

Accessibility

• Does not introduce new errors or warnings in WAVE (no new errors confirmed)

Other

• Does not introduce new lint warnings
• Flexible from small to large screens

Notes

• Snyk warning are ignored since they are unrelated back end deps

TODO:

• Release DEV4 reservation

[billhimmelsbach]

I don't think @meissadia has the right permissions to be a reviewer? I'm adding him here though.

[anselmbradford]

LGTM 👍

I noticed the (x) in the tags appears to have 15px on the top/bottom, but only 10px on the right. This looks okay when it's only one line, but when it's a multi-line pill it looks a little off because it's not centered in the upper-right corner. It shouldn't hold up this PR because the Safari bugfix should go in ASAP, but I would probably move the (x) in another 5px from the right in a future PR.

EDIT: those pixel values won't be right, as that's just the difference I was seeing in a screenshot in Photoshop, so they're likely half that in the real world. At any rate, the point is it seems like the margin/padding for the (x) should be equal on all sides.

[billhimmelsbach]

Thanks @anselmbradford!