Merge pull request #1190 from nhsuk/feature/nunjucks-arguments-table

create nunjuck macro option config files for each component

CHANGELOG.md

@@ -1,5 +1,15 @@
 # NHS digital service manual Changelog
 
+## 5.0.0 - 14 June 2021
+
+:new: **New features**
+
+- Display Nunjucks macro options with the Nunjucks code examples
+
+:wrench: **Fixes**
+
+- Update dependencies to the latest versions
+
 ## 4.2.0 - 10 June 2021
 
 :new: **New content**

app.js

@@ -67,6 +67,7 @@ const env = nunjucks.configure(appViews, {
  */
 env.addGlobal('getHTMLCode', fileHelper.getHTMLCode);
 env.addGlobal('getNunjucksCode', fileHelper.getNunjucksCode);
+env.addGlobal('getJSONCode', fileHelper.getJSONCode);
 env.addFilter('highlight', (code, language) => {
   const languages = language ? [language] : false;
   return highlightjs.highlightAuto(code.trim(), languages).value;

app/scripts/design-example.js

@@ -75,7 +75,7 @@ class DesignExample {
         document.execCommand('copy');
         document.body.removeChild(el);
         e.target.innerText = 'Copied';
-        setTimeout(() => e.target.innerText = 'Copy', 2500);
+        setTimeout(() => e.target.innerText = 'Copy code', 2500);
     }
 
     showEl(el) {

app/styles/app/_code-highlight.scss

@@ -58,3 +58,7 @@ td code {
   background-color: $color_nhsuk-white;
   padding: 0;
 }
+
+.code-snippet__macro {
+  width: 100%;
+}

app/styles/design-example/_code-snippet.scss

@@ -11,9 +11,13 @@
 
     &--copy {
       border-bottom-color: $nhsuk-button-color;
-      box-shadow: 0 $button-shadow-size 0 $nhsuk-button-color;
+      box-shadow: 0 2px 0 $nhsuk-button-color;
       margin-bottom: 16px;
-      position: static;
+      padding: 2px 8px;
+      position: absolute;
+      right: 16px;
+      text-transform: none;
+      top: 16px;
 
       &:hover {
         background-color: $color_nhsuk-grey-5;
@@ -32,7 +36,7 @@
       color: $color_nhsuk-blue;
       cursor: pointer;
       font-size: 16px;
-      margin-top: 8px;
+      margin-top: 16px;
       position: static;
       right: 16px;
       text-decoration: underline;

app/styles/design-example/_design-example.scss

@@ -57,3 +57,15 @@ p + .design-example {
 .app-code-snippet__macro {
   width: 100%;
 }
+
+.app-tabs__container pre {
+  background-color: $color_nhsuk-grey-5;
+}
+
+.app-code-snippet__container {
+  background-color: $color_nhsuk-grey-5;
+  padding: nhsuk-spacing(3);
+  padding-top: nhsuk-spacing(8);
+  position: relative;
+  width: 100%;
+}

app/views/design-system/components/action-link/macro-options.json

@@ -0,0 +1,34 @@
+{
+  "params": [
+    {
+      "name": "text",
+      "type": "string",
+      "required": true,
+      "description": "Text to use within the action link component."
+    },
+    {
+      "name": "href",
+      "type": "string",
+      "required": true,
+      "description": "The value of the link href attribute."
+    },
+    {
+      "name": "openInNewWindow",
+      "type": "boolean",
+      "required": false,
+      "description": "If set to true, then the link will open in a new window."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "required": false,
+      "description": "Classes to add to the anchor tag."
+    },
+    {
+      "name": "attributes",
+      "type": "object",
+      "required": false,
+      "description": "HTML attributes (for example data attributes) to add to the anchor tag."
+    }
+  ]
+}

app/views/design-system/components/back-link/macro-options.json

@@ -0,0 +1,34 @@
+{
+  "params": [
+    {
+      "name": "text",
+      "type": "string",
+      "required": false,
+      "description": "Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
+    },
+    {
+      "name": "html",
+      "type": "string",
+      "required": false,
+      "description": "HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
+    },
+    {
+      "name": "href",
+      "type": "string",
+      "required": true,
+      "description": "The value of the link href attribute."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "required": false,
+      "description": "Classes to add to the container."
+    },
+    {
+      "name": "attributes",
+      "type": "object",
+      "required": false,
+      "description": "HTML attributes (for example data attributes) to add to the anchor tag."
+    }
+  ]
+}

app/views/design-system/components/breadcrumbs/macro-options.json

@@ -0,0 +1,54 @@
+{
+	"params": [
+		{
+			"name": "items",
+			"type": "array",
+			"required": true,
+			"description": "Array of breadcrumbs item objects.",
+			"params": [
+				{
+					"name": "text",
+					"type": "string",
+					"required": true,
+					"description": "Text to use within the breadcrumbs item."
+				},
+				{
+					"name": "href",
+					"type": "string",
+					"required": false,
+					"description": "The value of the breadcrumb item link href attribute."
+				},
+				{
+					"name": "attributes",
+					"type": "object",
+					"required": false,
+					"description": "HTML attributes (for example data attributes) to add to the individual crumb."
+				}
+			]
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true,
+      "description": "Text to use for the current page."
+    },
+    {
+      "name": "href",
+      "type": "string",
+      "required": true,
+      "description": "The value of the current page link href attribute."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "required": false,
+      "description": "Classes to add to the container."
+    },
+    {
+      "name": "attributes",
+      "type": "object",
+      "required": false,
+      "description": "HTML attributes (for example data attributes) to add to the container."
+    }
+	]
+}

app/views/design-system/components/buttons/macro-options.json

@@ -0,0 +1,64 @@
+{
+	"params": [
+		{
+			"name": "element",
+			"type": "string",
+			"required": false,
+			"description": "Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`."
+		},
+		{
+			"name": "text",
+			"type": "string",
+			"required": true,
+			"description": "If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`."
+		},
+		{
+			"name": "html",
+			"type": "string",
+			"required": true,
+			"description": "If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`."
+		},
+		{
+			"name": "name",
+			"type": "string",
+			"required": false,
+			"description": "Name for the `input` or `button`. This has no effect on `a` elements."
+		},
+		{
+			"name": "type",
+			"type": "string",
+			"required": false,
+			"description": "Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements."
+		},
+		{
+			"name": "value",
+			"type": "string",
+			"required": false,
+			"description": "Value for the `button` tag. This has no effect on `a` or `input` elements."
+		},
+		{
+			"name": "disabled",
+			"type": "boolean",
+			"required": false,
+			"description": "Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically."
+		},
+		{
+			"name": "href",
+			"type": "string",
+			"required": false,
+			"description": "The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined."
+		},
+		{
+			"name": "classes",
+			"type": "string",
+			"required": false,
+			"description": "Classes to add to the button component."
+		},
+		{
+			"name": "attributes",
+			"type": "object",
+			"required": false,
+			"description": "HTML attributes (for example data attributes) to add to the button component."
+		}
+	]
+}

app/views/design-system/components/card/macro-options.json

@@ -0,0 +1,82 @@
+{
+  "params": [
+    {
+      "name": "heading",
+      "type": "string",
+      "required": true,
+      "description": "Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored."
+    },
+    {
+      "name": "headingHtml",
+      "type": "string",
+      "required": true,
+      "description": "HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored."
+    },
+    {
+      "name": "headingClasses",
+      "type": "string",
+      "required": false,
+      "description": "Classes to add to the card heading."
+    },
+    {
+      "name": "headingLevel",
+      "type": "integer",
+      "required": false,
+      "description": "Optional heading level for the card heading. Default: 2"
+    },
+    {
+      "name": "href",
+      "type": "string",
+      "required": false,
+      "description": "The value of the card link href attribute."
+    },
+    {
+      "name": "clickable",
+      "type": "boolean",
+      "required": false,
+      "description": "If set to true, then the whole Card will become a clickable Card variant."
+    },
+    {
+      "name": "feature",
+      "type": "boolean",
+      "required": false,
+      "description": "If set to true, then the Card will become a feature Card variant."
+    },
+    {
+      "name": "imgURL",
+      "type": "string",
+      "required": false,
+      "description": "The URL of the image in the card."
+    },
+    {
+      "name": "imgALT",
+      "type": "string",
+      "required": false,
+      "description": "The alternative text of the image in the card."
+    },
+    {
+      "name": "description",
+      "type": "string",
+      "required": false,
+      "description": "Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored."
+    },
+    {
+      "name": "descriptionHtml",
+      "type": "string",
+      "required": false,
+      "description": "HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "required": false,
+      "description": "Classes to add to the card."
+    },
+    {
+      "name": "attributes",
+      "type": "object",
+      "required": false,
+      "description": "HTML attributes (for example data attributes) to add to the card."
+    }
+  ]
+}

app/views/design-system/components/care-cards/macro-options.json

@@ -0,0 +1,40 @@
+{
+  "params": [
+    {
+      "name": "type",
+      "type": "string",
+      "required": true,
+      "description": "Care card component variant type - non-urgent, urgent or immediate"
+    },
+    {
+      "name": "heading",
+      "type": "string",
+      "required": true,
+      "description": "Heading to be used within the care card component."
+    },
+    {
+      "name": "headingLevel",
+      "type": "integer",
+      "required": false,
+      "description": "Optional heading level for the heading. Default: 3"
+    },
+    {
+      "name": "HTML",
+      "type": "string",
+      "required": true,
+      "description": "Content to be used within the care card component."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "required": false,
+      "description": "Classes to add to the care card."
+    },
+    {
+      "name": "attributes",
+      "type": "object",
+      "required": false,
+      "description": "HTML attributes (for example data attributes) to add to the care card."
+    }
+  ]
+}