Skip to content

Commit

Permalink
🆕 moved requied class to mark only
Browse files Browse the repository at this point in the history
  • Loading branch information
Nick Tilden committed Sep 29, 2016
1 parent 98d49f9 commit 1b45e60
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 30 deletions.
10 changes: 3 additions & 7 deletions lib/form/html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ const addRequired = (html, input, index) => {

// Add required text to label
const reLabel = new RegExp('</label>');
render = render.replace(reLabel, `<mark class="mark-${required}">required to ${required}</mark></label>`);
render = render.replace(reLabel, `<mark class="${level}">required to ${required}</mark></label>`);
}
});

Expand Down Expand Up @@ -163,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
Expand All @@ -179,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
Expand Down
23 changes: 8 additions & 15 deletions tests/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +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="mark-save">required to save</mark>', 'mark gets added after label text'));
t.true(includes(rendered.html, '<mark class="required--save">required to save</mark>', 'mark gets added after label text'));
});
});

Expand All @@ -77,18 +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="mark-save">required to save</mark>', 'mark gets added after label text'));
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}} <mark class="mark-{{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="mark-{{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[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 => {
Expand All @@ -98,17 +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="mark-save">required to save</mark>', 'mark gets added after label text'));
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}} <mark class="mark-{{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[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 => {
Expand All @@ -121,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'));
});
});

Expand Down
16 changes: 8 additions & 8 deletions tests/html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}} <mark class=\'mark-{{textarea.required}}\'>required to {{textarea.required}}</mark></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: {
Expand Down Expand Up @@ -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}} <mark class=\'mark-{{textarea.required}}\'>required to {{textarea.required}}</mark></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: [
{
Expand Down Expand Up @@ -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 <mark class="mark-save">required to save</mark></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}} <mark class=\'mark-{{textarea.required}}\'>required to {{textarea.required}}</mark></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: {
Expand Down Expand Up @@ -134,10 +134,10 @@ test('Add Required Checkbox - Pass', t => {

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="mark-publish">required to publish</mark></label><input type="text" id="91f79620-ba21-4a4a-a4c7-02f456129b0f" name="name--text" placeholder="Text goes here" /></div>"',
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=\'mark-{{text.required}}\'>required to {{text.required}}</mark></label><input type=\'{{text.type}}\' id=\'{{text.id}}\' name=\'{{text.name}}\' placeholder=\'{{text.placeholder}}\' /></div>',
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: {
Expand All @@ -162,11 +162,11 @@ test('Add Required and Repeatable - Pass', t => {

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="mark-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="mark-publish">required to publish</mark></label><input type="url" id="91f79620-ba21-4a4a-a4c7-02f456129b0f--2" name="name--url" placeholder="http://"></div></fieldset>"',
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=\'mark-{{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=\'mark-{{url.required}}\'>required to {{url.required}}</mark></label><input type=\'{{url.type}}\' id=\'{{url.id}}\' name=\'{{url.name}}\' placeholder=\'{{url.placeholder}}\'></div></fieldset>',
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: {
Expand Down

0 comments on commit 1b45e60

Please sign in to comment.