Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SPIKE] Move Nunjucks macro parameter tables into page content #4060

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

querkmachine
Copy link
Member

@querkmachine querkmachine commented Aug 21, 2024

Currently, Nunjucks macro parameter tables are listed alongside every Nunjucks code example that appears on the page. This leads to fairly a significant duplication of code/content on any component guidance that has more than one example.

This PR looks into moving those tables to be standalone within the page, de-duplicating them in the process.

There was a bit of busywork involved in updating the front matter for all of the component guidance changes. For ease of review, all of the functional changes are in a97e309.

Changes

  • Moves parameter table generation code into its own partial, separate from the example partial.
  • Updates the layout so that the parameter tables are inserted automatically if the current page about a component.
  • Add some new logic so that if there is more than one parameter table to show, they are rendered as an accordion. Otherwise, the table is rendered directly on the page.
  • Adds a link to examples where the Nunjucks parameters used to be listed, now linking to the parameters section of the page.
  • Updates all of the component pages to have a global item value set, used by both examples and parameter tables.

Todo

  • Tests haven't been updated to account for this change yet.
  • The link from examples to the Nunjucks parameter section is currently broken.

Thoughts

  • The placement of the tables doesn't seem ideal (being nestled between 'Research' and 'Help improve' on most pages). This is a consequence of having the partial be automatically inserted after the individually authored guidance. We could move it up, but doing that would mean duplicating the partial's include on each of the guidance pages.
  • This doesn't completely remove the use of details from the Design System site, as it's also used on the font sizes guidance page.

@querkmachine querkmachine self-assigned this Aug 21, 2024
Copy link

netlify bot commented Aug 21, 2024

You can preview this change here:

Name Link
🔨 Latest commit 983f30e
🔍 Latest deploy log https://app.netlify.com/sites/govuk-design-system-preview/deploys/66c5b45523741700083a5349
😎 Deploy Preview https://deploy-preview-4060--govuk-design-system-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

- Split the Nunjucks parameter table code from the example code
- Automatically insert parameter tables at the bottom of component pages
- If there is only one set of parameters, the table is output immediately; otherwise, an accordion is created
@querkmachine querkmachine force-pushed the spike-nunjucks-options-in-page branch from 2820c0e to 983f30e Compare August 21, 2024 09:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant