Add ability to invert background colour in review app examples #3808
Conversation
querkmachine
force-pushed
the
review-app-inverse-example-support
branch
from
6ee209c
to
138e81e
Compare
There was a problem hiding this comment.
This is brilliant 🙌
Can you fix the "inverse" colour for $app-preview-border-colour too?
We're using #e4f2ff at the moment which only looks good on a white background, maybe pair it with:
$app-preview-border-colour: mix(govuk-colour("blue"), govuk-colour("white"), 10%);
$app-preview-border-colour-inverse: mix(govuk-colour("white"), govuk-colour("blue"), 10%);Added a comment about background colour classes too
querkmachine
force-pushed
the
review-app-inverse-example-support
branch
from
138e81e
to
9261f96
Compare
packages/govuk-frontend/src/govuk/components/button/button.yaml
Outdated
Show resolved
Hide resolved
querkmachine
force-pushed
the
review-app-inverse-example-support
branch
from
9261f96
to
7401164
Compare
querkmachine
force-pushed
the
review-app-inverse-example-support
branch
from
7401164
to
d6b59c0
Compare
| @@ -131,10 +131,15 @@ export default async () => { | |||
| {{ ${macroName}(${macroParameters}) }} | |||
| `, {}) | |||
|
|
|||
| let bodyClasses = '' | |||
| let bodyClasses = 'app-template__body' | |||
There was a problem hiding this comment.
Not a blocker but now I've seen layoutModifiers should we use an array here too?
Could swap += with .push() then have a .join(' ') as it passes into the render context
There was a problem hiding this comment.
I gave it a shot at one point, but setting the component-preview modifier by pushing it into an array just... didn't work as expected for reasons I couldn't understand. It was being applied in contexts where it shouldn't on first load, but then would work correctly after restarting the server (and then break again..., rinse, repeat).
The res.render line didn't like having the .join inline either, so I just kept it as-is rather than try and debug and optimise where it might not be needed.
…port Add ability to invert background colour in review app examples
Adds support for adding an array of modifiers (
previewLayoutModifiers) to review app examples. If the array exists, the example is rendered with the provided modifier classes.Resolves #3780.
Changes
previewLayoutModifiersarray in each example's metadata. If it finds it, it loops through it and adds an additional modifier class to thebodyClassesstring..app-template__body--inverseclass. It makes the body background blue..app-whitespace-highlight.<html>/<body>to follow a similar scheme to the Frontend template:.app-no-canvas-backgroundto.app-template..app-template__bodyclass to the<body>element by default..app-iframe-in-component-previewto.app-template__body--component-preview.Thoughts
<body>when they might make more sense being on<html>. However, thehtmlClassesNunjucks variable doesn't seem to be accessible at the same point thatbodyClassesis being set.