Update npm package generator to place layouts and components in templ…

…ates to satisfy flask (#276) * Update npm package generator to place layouts and components in templates to satisfy flask * update template for runner * Fix loops in jinja * Improve page template assetsURL for runner * Upgrade details and accordion to be able to pass own attributes * Fix unit tests * Fix attributes and page validity * Put generate npm package back to match master * Allow attributes to be passed to feedback buttons * Add ability to configure signout button and service links * Allow header title to be different to html title * Add ability to add attributes to panels * Fix panel body * Fix panels classes logic * Allow attributes on labels and fix classes for jinja * Fix field classes for jinja * Fix checkbox config for jinja * Update date input configs * Fix input for nunjucks * Fix mutually exclusive date unit tests * Fix language selection examples render error and fix error handling in nunjucks html loader * Remove rogue import * Fix nunjucks-html-loader render error handling * Improve error logging * Refactor summary component so that config it closer aligned to eq schema * Remove summary border bottom on last item * Revert "Remove summary border bottom on last item" This reverts commit afe4ce6. * Added summary no border bottom variant * Added print-button helper * Added print-button unit tests * Fix checkboxes / radios when theres an error * Fix inpage link to work with new runner layout * Ensure inpagelink only focuses visible editable inputs * Fix mutually exclusive date example labels * Fix mutually exclusive getLabelText function where label is within a h1 in the legend * Update field component so that it doesn't automatically set the wrapping element to fieldset when mutually exclusive unless a legend is provided * Add scripts block to template
ONSdigital · Apr 3, 2019 · a0b355b · a0b355b
1 parent 394ed53
commit a0b355b
Show file tree

Hide file tree

Showing 124 changed files with 1,069 additions and 739 deletions.
diff --git a/lib/filters/set-attribute.js b/lib/filters/set-attribute.js
@@ -0,0 +1,4 @@
+export default function setAttribute(dictionary, key, value) {
+  dictionary[key] = value;
+  return dictionary;
+}
diff --git a/lib/filters/set-attributes.js b/lib/filters/set-attributes.js
@@ -0,0 +1,9 @@
+export default function setAttributes(dictionary, attributes) {
+  for (const key in attributes) {
+    if (attributes.hasOwnProperty(key)) {
+      dictionary[key] = attributes[key];
+    }
+  }
+
+  return dictionary;
+}
diff --git a/lib/helpers/generate-example-params.js b/lib/helpers/generate-example-params.js
@@ -6,6 +6,8 @@ import pretty from 'pretty';
 
 import { NunjucksLoader } from '../nunjucks-loader';
 import { removeFrontmatterFromString } from '../remove-frontmatter-from-string';
+import setAttribute from '../filters/set-attribute';
+import setAttributes from '../filters/set-attributes';
 
 const sourcePath = `${process.cwd()}/src`;
 
@@ -55,6 +57,10 @@ export function generateExampleParams(params, addDependency) {
 
     const loader = new NunjucksLoader(sourcePath);
     const environment = new nunjucks.Environment(loader);
+
+    environment.addFilter('setAttribute', setAttribute);
+    environment.addFilter('setAttributes', setAttributes);
+
     nunjucks.configure(null, {
       watch: false,
       autoescape: true

diff --git a/lib/nunjucks-html-loader.js b/lib/nunjucks-html-loader.js
@@ -10,6 +10,8 @@ import { htmlErrorStack } from 'print-error';
 import { MarkdownExtension } from './tags/markdown';
 import { NunjucksLoader } from './nunjucks-loader';
 import { removeFrontmatterFromString } from './remove-frontmatter-from-string';
+import setAttribute from './filters/set-attribute';
+import setAttributes from './filters/set-attributes';
 
 import { navigationHelper, subNavigationHelper, generateExampleParams } from './helpers';
 
@@ -95,10 +97,6 @@ function getPageInfo(context) {
   let pageRef = siteMap;
   let pathRef = '';
 
-  if (path === '/components/language-selector/examples/english/index.njk') {
-    debugger;
-  }
-
   pathParts.forEach((part, index) => {
     if (pageRef) {
       part = `/${part.replace('index.njk', '').replace('.njk')}`;
@@ -135,11 +133,12 @@ function getPageInfo(context) {
   }
 }
 
-function handleError(error, environment, layoutPath, callback) {
+function handleError(error, environment, layoutPath, callback, pageInfo) {
   if (error) {
+    const filePath = `${process.cwd()}/src${pageInfo.url}/index.njk`;
     console.log('');
-    console.log(chalk.red(error.stack));
-    let html = htmlErrorStack(error, { fontSize: '10px' });
+    console.log(chalk.red(error.stack.replace('(unknown path)', filePath)));
+    let html = htmlErrorStack(error, { fontSize: '10px' }).replace('(unknown path)', filePath);
     html = `{% extends "${layoutPath}/_error.njk" %}{% block body %}${html}{% endblock %}`;
     html = nunjucks.compile(html, environment).render({
       error: error.toString()
@@ -160,7 +159,6 @@ function getFrontmatterFromFile(filePath) {
 
 export default async function(source) {
   this.cacheable();
-  let didError;
 
   const callback = this.async();
   const options = loaderUtils.getOptions(this) || {};
@@ -198,74 +196,78 @@ export default async function(source) {
     addDependency: this.addDependency.bind(this)
   });
 
+  environment.addFilter('setAttribute', setAttribute);
+  environment.addFilter('setAttributes', setAttributes);
+
   environment.addExtension('MarkdownExtension', new MarkdownExtension());
 
   // Render page nunjucks to HTML
-  let html = await renderHTML(nunjucks, source, environment, context, options, callback, didError);
-
-  // Prettify HTML to stop markdown wrapping everything in code blocks
-  html = pretty(html);
-
-  // No need to render markdown if rendering an example page
-  if (!isExample) {
-    // Fix indented markdown (from nunjucks renderer) from being wrapped in code blocks by removing indents
-    html = html.replace(/(?!<code[^>]*?>)(\n +)(?![^<]*?<\/code>)/g, '\n');
-
-    // Render page markdown to HTML
-    html = marked(html, {
-      smartypants: true,
-      pedantic: true,
-      renderer: markdownRenderer
-    });
-  }
+  renderHTML(nunjucks, source, environment, context)
+    .then(html => {
+      // Prettify HTML to stop markdown wrapping everything in code blocks
+      html = pretty(html);
+
+      // No need to render markdown if rendering an example page
+      if (!isExample) {
+        // Fix indented markdown (from nunjucks renderer) from being wrapped in code blocks by removing indents
+        html = html.replace(/(?!<code[^>]*?>)(\n +)(?![^<]*?<\/code>)/g, '\n');
+
+        // Render page markdown to HTML
+        html = marked(html, {
+          smartypants: true,
+          pedantic: true,
+          renderer: markdownRenderer
+        });
+      }
 
-  // Get page layout template path
-  let layoutPath;
+      // Get page layout template path
+      let layoutPath;
 
-  if (frontmatterData && frontmatterData.layout) {
-    layoutPath = `${frontmatterData.layout}.njk`;
-  } else if (isExample) {
-    layoutPath = '_example.njk';
-  } else {
-    layoutPath = '_page.njk';
-  }
+      if (frontmatterData && frontmatterData.layout) {
+        layoutPath = `${frontmatterData.layout}.njk`;
+      } else if (isExample) {
+        layoutPath = '_example.njk';
+      } else {
+        layoutPath = '_page.njk';
+      }
 
-  if (layoutPath.slice(0, 1) !== '_') {
-    layoutPath = `_${layoutPath}`;
-  }
+      if (layoutPath.slice(0, 1) !== '_') {
+        layoutPath = `_${layoutPath}`;
+      }
 
-  layoutPath = `${options.layoutPath}/${layoutPath}`;
+      layoutPath = `${options.layoutPath}/${layoutPath}`;
 
-  this.addDependency(layoutPath);
+      this.addDependency(layoutPath);
 
-  // Wrap html in extend for layout
-  source = `{% extends "${layoutPath}" %}
+      // Wrap html in extend for layout
+      source = `{% extends "${layoutPath}" %}
             {% block body %}
             ${html}
             {% endblock %}`;
 
-  // Render full page wrapped in layout
-  html = await renderHTML(nunjucks, source, environment, context, options, callback, didError);
-
-  // Clean up html
-  html = pretty(html, {
-    ocd: true
-  });
-
-  if (!didError) {
-    callback(null, html);
-  }
+      // Render full page wrapped in layout
+      renderHTML(nunjucks, source, environment, context)
+        .then(html => {
+          // Clean up html
+          html = pretty(html, {
+            ocd: true
+          });
+
+          callback(null, html);
+        })
+        .catch(error => handleError(error, environment, options.layoutPath, callback, pageInfo));
+    })
+    .catch(error => handleError(error, environment, options.layoutPath, callback, pageInfo));
 }
 
-function renderHTML(nunjucks, source, environment, context, options, callback, didError) {
-  return new Promise(resolve => {
+async function renderHTML(nunjucks, source, environment, context) {
+  return new Promise((resolve, reject) => {
     nunjucks.compile(source, environment).render(context, (error, result) => {
       if (error) {
-        didError = true;
-        handleError(error, environment, options.layoutPath, callback);
+        reject(error);
+      } else {
+        resolve(result);
       }
-
-      resolve(result);
     });
   });
 }
diff --git a/nunjucks.config.js b/nunjucks.config.js
@@ -0,0 +1,7 @@
+const setAttribute = require('./lib/filters/set-attribute').default;
+const setAttributes = require('./lib/filters/set-attributes').default;
+
+module.exports = function(environment) {
+  environment.addFilter('setAttribute', setAttribute);
+  environment.addFilter('setAttributes', setAttributes);
+};
diff --git a/package.json b/package.json
@@ -5,42 +5,29 @@
   "main": "index.js",
   "license": "MIT",
   "author": {
-    "email": "[email protected]",
     "name": "Ben Meyrick",
+    "email": "[email protected]",
     "url": "https://github.com/bameyrick"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
-    "start": "yarn tidy-clean && yarn webpack-dev-server --host 0.0.0.0 --watch --config webpack.dev.babel.js",
     "build": "yarn tidy-clean && yarn webpack --config webpack.prod.babel.js",
     "check-unused": "npx npm-check-unused",
+    "dedupe-deps": "npx yarn-deduplicate yarn.lock",
     "lint-staged": "lint-staged",
+    "npm-bundle": "NODE_ENV=production yarn build && babel-node lib/generate-npm-package.js",
+    "start": "yarn tidy-clean && yarn webpack-dev-server --host 0.0.0.0 --watch --config webpack.dev.babel.js",
     "test": "karma start ./src/tests/config/karma.conf.js && karma start ./src/tests/config/karma.conf.nomodule.js && codecov",
     "test:browserstack": "TEST_ON_BROWSERSTACK=true karma start ./src/tests/config/karma.conf.js && TEST_ON_BROWSERSTACK=true karma start ./src/tests/config/karma.conf.nomodule.js",
     "test:local": "KARMA_SINGLE_RUN=false karma start ./src/tests/config/karma.conf.js",
-    "dedupe-deps": "npx yarn-deduplicate yarn.lock",
-    "tidy-clean": "rm -rf build css favicons fonts img components page-templates scripts coverage scss",
-    "npm-bundle": "NODE_ENV=production yarn build && babel-node lib/generate-npm-package.js"
+    "tidy-clean": "rm -rf build css favicons fonts img templates scripts coverage scss"
   },
-  "browserslist": [
-    "last 2 versions",
-    "not ie < 11",
-    "not ie_mob < 11"
-  ],
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged",
       "post-checkout": "yarn tidy-clean && yarn check"
     }
   },
   "lint-staged": {
-    "*.scss": [
-      "prettier --print-width 140 --single-quote --parser postcss --write",
-      "sass-lint",
-      "git add"
-    ],
     "*.js": [
       "prettier --print-width 140 --single-quote --parser babylon --write",
       "eslint --fix",
@@ -50,8 +37,18 @@
       "prettier --write",
       "remark",
       "git add"
+    ],
+    "*.scss": [
+      "prettier --print-width 140 --single-quote --parser postcss --write",
+      "sass-lint",
+      "git add"
     ]
   },
+  "browserslist": [
+    "last 2 versions",
+    "not ie < 11",
+    "not ie_mob < 11"
+  ],
   "devDependencies": {
     "@babel/core": "^7.1.6",
     "@babel/node": "^7.2.2",
@@ -61,6 +58,7 @@
     "@babel/preset-env": "^7.1.6",
     "@babel/register": "^7.0.0",
     "@babel/runtime": "^7.2.0",
+    "abortcontroller-polyfill": "^1.2.3",
     "autoprefixer": "^9.3.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.4",
@@ -70,6 +68,7 @@
     "circular-dependency-plugin": "^5.0.2",
     "codecov": "^3.1.0",
     "copy-webpack-plugin": "^4.6.0",
+    "core-js": "^2.6.0",
     "cssnano": "^4.1.7",
     "eslint": "^5.9.0",
     "eslint-cli": "^1.1.1",
@@ -99,10 +98,12 @@
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.11",
     "marked": "^0.5.2",
+    "mdn-polyfills": "^5.14.0",
     "mocha": "^5.2.0",
     "ncp": "^2.0.0",
     "node-sass": "^4.10.0",
     "node-sass-glob-importer": "^5.2.0",
+    "normalize-scss": "^7.0.1",
     "nunjucks": "^3.1.4",
     "nunjucks-loader": "^3.0.0",
     "postcss-loader": "^3.0.0",
@@ -119,6 +120,7 @@
     "rimraf": "^2.6.3",
     "sass-lint": "^1.12.1",
     "sass-loader": "^7.1.0",
+    "throttle-typescript": "^1.0.1",
     "url-loader": "^1.1.2",
     "url-search-params-polyfill": "^5.0.0",
     "webpack": "^4.26.0",
@@ -127,14 +129,10 @@
     "webpack-dev-server": "^3.1.10",
     "webpack-fix-style-only-entries": "^0.0.5",
     "webpack-livereload-plugin": "^2.1.1",
-    "webpack-merge": "^4.1.4"
-  },
-  "dependencies": {
-    "abortcontroller-polyfill": "^1.2.3",
-    "core-js": "^2.6.0",
-    "mdn-polyfills": "^5.14.0",
-    "normalize-scss": "^7.0.1",
-    "throttle-typescript": "^1.0.1",
+    "webpack-merge": "^4.1.4",
     "whatwg-fetch": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }
diff --git a/src/components/accordion/_macro-options.md b/src/components/accordion/_macro-options.md
@@ -1,15 +1,31 @@
-| Name        | Type                 | Required | Description                                                                |
-| ----------- | -------------------- | -------- | -------------------------------------------------------------------------- |
-| id          | string               | true     | id of the accordion                                                        |
-| classes     | string               | false    | Classes to add to the button component                                     |
-| closeButton | string               | true     | The close button text for each accordion item                              |
-| buttonOpen  | string               | true     | The open button text for each accordion item                               |
-| items       | Array<AccordionItem> | true     | Accordion items to render                                                  |
-| openAll     | string               | false    | Text for the open all button. If not specified the button will not render  |
-| closeAll    | string               | false    | Text for the close all button. If not specified the button will not render |
+| Name      | Type                   | Required | Description                                                                              |
+| --------- | ---------------------- | -------- | ---------------------------------------------------------------------------------------- |
+| id        | string                 | true     | id of the accordion                                                                      |
+| classes   | string                 | false    | Classes to add to the accordion component                                                |
+| itemList  | `Array<AccordionItem>` | true     | Accordion items to render                                                                |
+| allButton | `AccordionButton`      | false    | Settings for the show all / hide all button. If not specified the button will not render |
 
 ## AccordionItem
 | Name | Type | Required | Description |
-| ------- | ------ | -------- | --------------------------------- |
+| ----------------- | --------------------- | -------- | --------------------------------------------------------------------------- |
 | title | string | true | The title of the accordion item |
 | content | string | true | The content of the accordion item |
+| button | `AccordionItemButton` | false | Settings for the button |
+| attributes | object | false | HTML attributes (for example data attributes) to add to the details element |
+| summaryAttributes | object | false | HTML attributes (for example data attributes) to add to the summary element |
+
+## AccordionButton
+
+| Name       | Type   | Required | Description                                                        |
+| ---------- | ------ | -------- | ------------------------------------------------------------------ |
+| open       | string | true     | Text to show when all of the items aren't open                     |
+| close      | string | true     | Text to show when all of the items are open                        |
+| attributes | object | false    | HTML attributes (for example data attributes) to add to the button |
+
+## AccordionItemButton
+
+| Name       | Type   | Required | Description                                                        |
+| ---------- | ------ | -------- | ------------------------------------------------------------------ |
+| open       | string | true     | Text for the button when the item is closed                        |
+| close      | string | true     | Text for the button when the item is open                          |
+| attributes | object | false    | HTML attributes (for example data attributes) to add to the button |