Merge branch 'master' into feature/update-templates

lib/form/html.js

@@ -89,13 +89,8 @@ const addRequired = (html, input, index) => {
     }
 
     if (input.required === 'save' || inp.required === 'save' || input.required === 'publish' || inp.required === 'publish') {
-      let level = '';
-      if (inp.required !== undefined) {
-        level += `required--${inp.required}`;
-      }
-      else {
-        level += `required--${input.required}`;
-      }
+      const required = inp.required || input.required;
+      const level = `required--${required}`;
 
       // pre-regex strings
       const stringClass = 'class=["\'][\\w\\W\\s]+?["\']';
@@ -137,6 +132,10 @@ const addRequired = (html, input, index) => {
       // add required to input
       const reName = new RegExp(`name=['"]\\s*${inp.name}\\s*['"]`);
       render = render.replace(reName, `name="${inp.name}" aria-required="true" required`);
+
+      // Add required text to label
+      const reLabel = new RegExp('</label>');
+      render = render.replace(reLabel, `<mark class="${level}">required to ${required}</mark></label>`);
     }
   });
 
@@ -164,14 +163,10 @@ const renderer = (type, errors) => {
       const context = input.inputs;
       let html = nunjucks.renderString(input.html, context);
       let render = '';
-      let required = '';
-      if (input.hasOwnProperty('required')) {
-        required = `required--${input.required}`;
-      }
 
       // Set opening tags based on number of inputs
       if (inputs > 1) {
-        render += `<fieldset id="${input.id}" class="form--fieldset ${required}">`;
+        render += `<fieldset id="${input.id}" class="form--fieldset">`;
         render += `<legend class="form--legend">${input.name}</legend>`;
 
         // Add Description
@@ -180,7 +175,7 @@ const renderer = (type, errors) => {
         }
       }
       else {
-        render += `<div id="${input.id}" class="form--field ${required}">`;
+        render += `<div id="${input.id}" class="form--field">`;
       }
 
       // Wraps repeatable attributes around div

package.json

@@ -34,7 +34,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "browserify": "^13.0.1",
-    "deepmerge": "^0.2.10",
+    "deepmerge": "^1.1.0",
     "js-yaml": "^3.5.3",
     "lodash": "^4.14.1",
     "node-dir": "^0.1.11",
@@ -51,7 +51,7 @@
     "input-plugin-checkbox": "^0.3.1",
     "input-plugin-datetime": "^0.2.2",
     "input-plugin-email": "^0.2.0",
-    "input-plugin-quote": "0.0.1",
+    "input-plugin-quote": "0.2.1",
     "input-plugin-select": "^0.3.0",
     "input-plugin-selects-related": "0.1.3",
     "input-plugin-text": "^0.1.0",

tests/form.js

@@ -60,8 +60,8 @@ test('Form Generation, with required attributes and inputs', t => {
     t.is(typeof rendered.scripts, 'string', 'Scripts is a string');
     t.is(typeof rendered.html, 'string', 'HTML is a string');
 
-    t.true(includes(rendered.html, 'class="required--save">Input required save', 'label gets save required classes'));
     t.true(includes(rendered.html, 'name="input-required-save--text" aria-required="true" required', 'input gets required--save'));
+    t.true(includes(rendered.html, '<mark class="required--save">required to save</mark>', 'mark gets added after label text'));
   });
 });
 
@@ -75,16 +75,16 @@ test('Form Generation, with identifier automatically required', t => {
     t.is(typeof rendered.scripts, 'string', 'Scripts is a string');
     t.is(typeof rendered.html, 'string', 'HTML is a string');
 
-    t.true(includes(rendered.html, 'class="required--save">SOme New THING', 'label gets save required classes'));
     t.true(includes(rendered.html, 'name="new-text-thing--text" aria-required="true" required', 'input gets required--save'));
+    t.true(includes(rendered.html, '<mark class="required--save">required to save</mark>', 'mark gets added after label text'));
   });
 });
 
 test('Form Generation, with required, with classes on a label', t => {
   return types.only('baz', {}, '', config).then(rslt => {
     const result = rslt;
-    result.attributes[0].html = '<label for="{{text.id}}" class="I-am-a-test this-must__still_be123-here">{{text.label}}</label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';
-    result.attributes[2].html = '<label class="I-am-a-test this-must__still_be123-here" for="{{text.id}}">{{text.label}}</label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';
+    result.attributes[0].html = '<label for="{{text.id}}" class="I-am-a-test this-must__still_be123-here">{{text.label}} <mark class="required--{{text.required}}">required to {{text.required}}</mark></label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';
+    result.attributes[2].html = '<label class="I-am-a-test this-must__still_be123-here" for="{{text.id}}">{{text.label}} <mark class="required--{{text.required}}">required to {{text.required}}</mark></label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';
 
     return form(result);
   }).then(rendered => {
@@ -94,15 +94,14 @@ test('Form Generation, with required, with classes on a label', t => {
     t.is(typeof rendered.scripts, 'string', 'Scripts is a string');
     t.is(typeof rendered.html, 'string', 'HTML is a string');
 
-    t.true(includes(rendered.html, 'class="I-am-a-test this-must__still_be123-here required--save">Plugin required save', 'label gets save required classes if class after for'));
-    t.true(includes(rendered.html, 'class="I-am-a-test this-must__still_be123-here required--publish" for="', 'label gets save required classes if class before for'));
+    t.true(includes(rendered.html, '<mark class="required--save">required to save</mark>', 'mark gets added after label text'));
   });
 });
 
 test('Form Generation, with required attributes and inputs that have wrong levels', t => {
   return types.only('baz', {}, '', config).then(rslt => {
     const result = rslt;
-    result.attributes[5].html = '<label for="{{text.id}}" class="I-am-a-test-of-bad-level">{{text.label}}</label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';
+    result.attributes[5].html = '<label for="{{text.id}}" class="I-am-a-test-of-bad-level">{{text.label}} <mark class="required--{{text.required}}">required to {{text.required}}</mark></label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';
 
     return form(result);
   }).then(rendered => {
@@ -115,8 +114,8 @@ test('Form Generation, required knows publish vs save', t => {
   return types.only('baz', {}, '', config).then(result => {
     return form(result);
   }).then(rendered => {
-    t.true(includes(rendered.html, '<div id="plugin-required-save" class="form--field required--save">', 'determines save for plugin'));
-    t.true(includes(rendered.html, '<div id="plugin-required-publish" class="form--field required--publish">', 'determines publish for plugin'));
+    t.true(includes(rendered.html, '<mark class="required--save">required to save</mark>', 'determines save for plugin'));
+    t.true(includes(rendered.html, '<mark class="required--publish">required to publish</mark>', 'determines publish for plugin'));
   });
 });
 
@@ -174,4 +173,3 @@ test('Form Generation, with repeatables', t => {
     t.true(includes(rendered.html, '<input type="text" id="c4087332-edda-432d-8464-cc9679742e4e--1" name="my-quote--quote--1" value="foo1" placeholder="Source Material" />'), 'Indexing for input text of second instance');
   });
 });
-

tests/html.js

@@ -10,7 +10,7 @@ test('Add Errors - Pass', t => {
     },
     input: {
       description: 'I am the Bar Content Type Config textarea description',
-      html: '<label for=\'{{textarea.id}}\'>{{textarea.label}}</label><textarea id=\'{{textarea.id}}\' name=\'{{textarea.name}}\' placeholder=\'{{textarea.placeholder}}\' />{{textarea.value}}</textarea>',
+      html: '<label for=\'{{textarea.id}}\'>{{textarea.label}} <mark class=\'required--{{textarea.required}}\'>required to {{textarea.required}}</mark></label><textarea id=\'{{textarea.id}}\' name=\'{{textarea.name}}\' placeholder=\'{{textarea.placeholder}}\' />{{textarea.value}}</textarea>',
       id: 'my-textarea',
       inputs: {
         textarea: {
@@ -41,7 +41,7 @@ test('Add Errors Repeatable - Pass', t => {
     },
     input: {
       description: 'An email input with domain validation',
-      html: '<label for=\'{{email.id}}\'>{{email.label}}</label><input type=\'{{email.type}}\' id=\'{{email.id}}\' name=\'{{email.name}}\' value=\'{{email.value}}\' placeholder=\'{{email.placeholder}}\' />',
+      html: '<label for=\'{{email.id}}\'>{{email.label}} <mark class=\'required--{{textarea.required}}\'>required to {{textarea.required}}</mark></label><input type=\'{{email.type}}\' id=\'{{email.id}}\' name=\'{{email.name}}\' value=\'{{email.value}}\' placeholder=\'{{email.placeholder}}\' />',
       id: 'my-email',
       inputs: [
         {
@@ -81,10 +81,10 @@ test('Add Errors Repeatable - Pass', t => {
 
 test('Add Required - Pass', t => {
   const param = {
-    html: '"<label for="91f79620-ba21-4a4a-a4c7-02f456129b0f">My Awesome Text Area</label><textarea id="91f79620-ba21-4a4a-a4c7-02f456129b0f" name="my-textarea--textarea" placeholder="Type something..." />test</textarea>"',
+    html: '"<label for="91f79620-ba21-4a4a-a4c7-02f456129b0f">My Awesome Text Area <mark class="required--save">required to save</mark></label><textarea id="91f79620-ba21-4a4a-a4c7-02f456129b0f" name="my-textarea--textarea" placeholder="Type something..." />test</textarea>"',
     input: {
       description: 'I am the Bar Content Type Config textarea description',
-      html: '<label for=\'{{textarea.id}}\'>{{textarea.label}}</label><textarea id=\'{{textarea.id}}\' name=\'{{textarea.name}}\' placeholder=\'{{textarea.placeholder}}\' />{{textarea.value}}</textarea>',
+      html: '<label for=\'{{textarea.id}}\'>{{textarea.label}} <mark class=\'required--{{textarea.required}}\'>required to {{textarea.required}}</mark></label><textarea id=\'{{textarea.id}}\' name=\'{{textarea.name}}\' placeholder=\'{{textarea.placeholder}}\' />{{textarea.value}}</textarea>',
       id: 'my-textarea',
       inputs: {
         textarea: {
@@ -132,3 +132,64 @@ test('Add Required Checkbox - Pass', t => {
   t.false(includes(result, expected));
 });
 
+test('Add Required and Repeatable - Pass', t => {
+  const param = {
+    html: '"<div class="form--repeatable"><label for="91f79620-ba21-4a4a-a4c7-02f456129b0f">Add Your Text <mark class="required--publish">required to publish</mark></label><input type="text" id="91f79620-ba21-4a4a-a4c7-02f456129b0f" name="name--text" placeholder="Text goes here" /></div>"',
+    input: {
+      description: 'I am the Bar Content Type Config text description',
+      html: '<div class=\'form--repeatable\'><label for=\'{{text.id}}\'>{{text.label}} <mark class=\'required--{{text.required}}\'>required to {{text.required}}</mark></label><input type=\'{{text.type}}\' id=\'{{text.id}}\' name=\'{{text.name}}\' placeholder=\'{{text.placeholder}}\' /></div>',
+      id: 'text-required',
+      inputs: {
+        text: {
+          id: '91f79620-ba21-4a4a-a4c7-02f456129b0f--1',
+          label: 'Add Your Text',
+          name: 'name--text',
+          placeholder: 'Text goes here',
+          type: 'text',
+        },
+      },
+      name: 'Add Your Text',
+      required: 'publish',
+      repeatable: 'true',
+      type: 'text',
+    },
+    index: undefined,
+  };
+  const expected = 'aria-required="true" required';
+  const result = html.required(param.html, param.input, param.index);
+  t.false(includes(result, expected));
+});
+
+test('Add Object Required - Pass', t => {
+  const param = {
+    html: '"<fieldset id="community-links" class="form--fieldset required--publish"><legend class="form--legend">Object</legend><p class="form--description">I am the Foo Object text description</p><div class="form--field"><label for="91f79620-ba21-4a4a-a4c7-02f456129b0f--1" class="required--publish">Add Your Text <mark class="required--publish">required to publish</mark></label><input type="text" id="91f79620-ba21-4a4a-a4c7-02f456129b0f--1" name="name--text" placeholder="Text goes here"></div><div class="form--field"><label for="91f79620-ba21-4a4a-a4c7-02f456129b0f--2">Add Your URL <mark class="required--publish">required to publish</mark></label><input type="url" id="91f79620-ba21-4a4a-a4c7-02f456129b0f--2" name="name--url" placeholder="http://"></div></fieldset>"',
+    input: {
+      name: 'Object',
+      description: 'I am the Foo Object text description',
+      html: '<fieldset id=\'community-links\' class=\'form--fieldset required--{{text.required}}\'><legend class=\'form--legend\'>{{input.name}}</legend><p class=\'form--description\'>{{input.description}}</p><div class=\'form--field\'><label for=\'{{text.id}}\' class=\'required--{{text.required}}\'>{{text.label}} <mark class=\'required--{{text.required}}\'>required to {{text.required}}</mark></label><input type=\'{{text.type}}\' id=\'{{text.id}}\' name=\'{{text.name}}\' placeholder=\'{{text.placeholder1}}\'></div><div class=\'form--field\'><label for=\'{{url.id}}\'>{{url.label}} <mark class=\'required--{{url.required}}\'>required to {{url.required}}</mark></label><input type=\'{{url.type}}\' id=\'{{url.id}}\' name=\'{{url.name}}\' placeholder=\'{{url.placeholder}}\'></div></fieldset>',
+      id: 'object-required',
+      inputs: {
+        text: {
+          id: '91f79620-ba21-4a4a-a4c7-02f456129b0f--1',
+          label: 'Add Your Text',
+          name: 'name--text',
+          placeholder: 'Text goes here',
+          type: 'text',
+          required: 'publish',
+        },
+        url: {
+          id: '91f79620-ba21-4a4a-a4c7-02f456129b0f--2',
+          label: 'Add Your URL',
+          name: 'name--url',
+          placeholder: 'http://',
+          type: 'url',
+          required: 'publish',
+        },
+      },
+    },
+    index: undefined,
+  };
+  const expected = 'aria-required="true" required';
+  const result = html.required(param.html, param.input, param.index);
+  t.false(includes(result, expected));
+});