Improve the way macros are imported from GOV.UK Frontend

[36degrees]

At the minute all of the the component macros are included as part of the default layout:

govuk-prototype-kit/app/views/layout.html

Lines 6 to 30 in 3b6870f

	{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
	{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
	{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
	{% from "govuk/components/button/macro.njk" import govukButton %}
	{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
	{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
	{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
	{% from "govuk/components/details/macro.njk" import govukDetails %}
	{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}
	{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
	{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
	{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
	{% from "govuk/components/input/macro.njk" import govukInput %}
	{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
	{% from "govuk/components/panel/macro.njk" import govukPanel %}
	{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
	{% from "govuk/components/radios/macro.njk" import govukRadios %}
	{% from "govuk/components/select/macro.njk" import govukSelect %}
	{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
	{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
	{% from "govuk/components/table/macro.njk" import govukTable %}
	{% from "govuk/components/tabs/macro.njk" import govukTabs %}
	{% from "govuk/components/tag/macro.njk" import govukTag %}
	{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
	{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

We do this so that users do not need to import the components themselves – despite the examples in the Design System always including the import, we tell them not to include it.

This means that:

• when we add a new component to GOV.UK Frontend, we have to remember to add it to the list of imports
• components are only imported into the default layout, and not the unbranded layout
• GOV.UK Frontend works differently to any other 'extensions' the user has installed

We should explore ways to auto-load the components in all of the provided layouts, possibly via the extensions framework.

[edwardhorsford]

One stepping stone I'd thought the kit could do would be to move those imports to an include. So layout would just have a single line:
{% include 'govuk-frontend/macros' %}

This would also be easier for using in other layouts. Though my current approach is to have all my layouts branch off of the main layout.njk - I wonder if there could be a common parent for this and the unbranded version.

[edwardhorsford]

I should also note that much of my layouts are imports for my own components that I store in /app/views/_components. This could also have an include. Or the kit could conceivably do magic to scrape that folder and import each x/macro.njk it finds.

[joelanman]

I think we should consider moving all users to the solution @edwardhorsford suggested (import all macros) - for production and prototyping.

That means it's simpler for everyone, and we can remove the import statement from every code example. As soon as you have more than 1 component on your page, the multiple imports aren't really correct. Even having import next to the component instead of at the top of the page is a bit odd - if you were to later try and use the component earlier in the page it wouldn't work.

[edwardhorsford]

A side advantage of a separate include is that that file could live outside of app so more easily be updated. Keeping layout for user-side changes.

[joelanman]

components are now all imported automatically via the GOV.UK Frontend Prototype Kit config file