Update card macro paths

[davidhunter08]

While adding NHS App components to the NHS HTML prototype using the Nunjucks macro:

{% from "nhsapp/components/card/macro.njk" import nhsappCard %}

{{ nhsappCard({
  title: 'Request repeat prescriptions',
  href: '#'
}) }}

It threw up errors for the card links component (all other components worked as expected):

Error 1

Couldn't find the badge macro.

Template render error: (/Users/davidhunter/Documents/prototypes/nhs-app-design-styles-components-patterns/node_modules/nhsapp-frontend/dist/nhsapp/components/card/card.njk)
Error: template not found: badge/large/macro.njk

Fix

Prefixing the path with ../:

{% from "../badge/large/macro.njk" import nhsappBadgeLarge %}

Error 2

Couldn't find the icons macro.

Template render error: (/Users/davidhunter/Documents/prototypes/nhs-app-design-styles-components-patterns/node_modules/nhsapp-frontend/dist/nhsapp/components/card/card.njk)
Error: template not found: icon/macro.njk

Fix

Prefixing the paths with ../../ and ../:

{% from "../../styles/icon/macro.njk" import nhsappIcon %}

{% import "../icon/icons.njk" as iconHtml %}

Error 3

Couldn't find the icon svgs.

Template render error: (/Users/davidhunter/Documents/prototypes/nhs-app-design-styles-components-patterns/node_modules/nhsapp-frontend/dist/nhsapp/components/card/card.njk)
Error: template not found: icons/chevron-right.svg

Fix

Prefixing all the icons with ../../assets/:

{% include "../../assets/icons/account.svg" %}

Summary

Updating the paths in the macros fixes the problem:

Is it the best solution? Is there a smarter way to do this?

[davidhunter08]

Screenshot showing all the components Nunjucks macros working in the HTML prototype kit with these changes.

[edwardscull]

Discussed offline and feel relative paths are a better approach overall 👍