Discussion: How might we improve the sharing of component CSS and content between web products?

[natalia-fitzgerald]

Discussion topic

How might we improve the sharing of component CSS and content between cf.gov and in React-built applications?

Background

Metro 2, Data Products, and SBL teams have incorporated DSR versions of cf.gov components into their apps. These components do not live in the CFPB Design System.

Related questions

How might we reduce the level of effort for managing changes?

• For example, we have a DSR footer that is based on the cf.gov footer (it’s a copy and paste of the cf.gov footer code). If the cf.gov footer CSS changes we have to copy and paste again. If the content changes we have to manually change it on the DSR side.
• We have previously talked about adding some of these components to the DS but if that’s not feasible just yet what are the other possible paths we could take?

Let's share ideas!

@anselmbradford @virginiacc @billhimmelsbach @flacoman91

[anselmbradford]

Web Components :D

[virginiacc]

Another example is the secondary nav, where the CSS for the version in the DSR is not exactly the same as the one in cf.gov but could probably be standardized.

For the footer, as @natalia-fitzgerald mentioned above, the DSR includes both styles and content that are copied pretty directly from cf.gov's footer.scss and footer.html.

In both cases, it would be great if we could pull at least the CSS (or maybe a web component?) from a shared location like the DS. For the cf.gov footer, maybe there's a way to also share the content in some format (web component, json, even just html) so it doesn't need to be updated in multiple places if / when there are changes. Now that we've added a simplified footer component in the DSR for our application use cases, does it make sense to still have a component that outputs a generic version of the very specific website footer layout?