Refactor logo used in Header and Footer#577
Conversation
ty2k
left a comment
There was a problem hiding this comment.
Looks good to me!
One note from testing: In the kitchen sink app, I do find that the Button component will cause a CSP violation when using style-src: self;. This is expected right now due to the usePress hook usage discussed in #574. I think in your example, the Button elements in the Header example aren't being rendered because of your viewport size (you're getting the list of three items with "Link" text instead).
Here's the Vite preview showing no CSP errors with just <Header/>s and the default <Footer/> at a wider viewport:
Here's what happens when I shrink the viewport width and the "Menu" <Button/> instance appears in the third <Header/>:

Similarly, if I just drop a <Button/> instance on to the page so it's always rendered, I get the CSP violation from usePress:


|
Good flag — thanks for investigating. As you said elsewhere, we're at a bit of a standstill with the |
This PR makes a change to
SvgBcLogo, an icon component consumed by the Header and Footer components.It removes various inline
styleattributes from the SVG of the B.C. Mark. These are used to set the colour of various parts of the logo. It moves these styles into a separate CSS file, and applies them as classes within the SVG.So this:
Becomes:
It is intended to partially resolve the issues identified in #574, where inline styles in components will be blocked by a restrictive Content Security Policy.
07f61c2 and f7ad847 do some cleanup on our dev app to give us a cleaner testbed.
Testing this change with
style-src 'self'CSP (using BCDS Header, Footer and Button components only) shows no violations from these components: