Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow contextual sizes for Spacer #36

Merged
merged 5 commits into from
Jun 2, 2016
Merged

Allow contextual sizes for Spacer #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
799f32d
Allow contextual sizes for Spacer
May 3, 2016
28a4892
Update componentFactory.js
May 3, 2016
a9d8034
Fix silly mistake
May 3, 2016
03128d2
:baby:'s 1st unit test
May 24, 2016
5016f78
Fix spacer appending classes
May 24, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions lib/componentFactory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ module.exports = function(element) {
}

// If the button is expanded, it needs a <center> tag around the content
if (element.hasClass('expand')) {
if (element.hasClass('expand') || element.hasClass('expanded')) {
inner = format('<center>%s</center>', inner);
expander = '\n<td class="expander"></td>';
}
Expand Down Expand Up @@ -111,14 +111,29 @@ module.exports = function(element) {
case this.components.spacer:
var classes = ['spacer'];
var size = 16;
var html = '';
if (element.attr('class')) {
classes = classes.concat(element.attr('class').split(' '));
}
if (element.attr('size')) {
size = (element.attr('size'));
html += '<table class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>';
} else {
if (element.attr('size-sm')) {
size = (element.attr('size-sm'));
html += '<table class="%s hide-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>';
}
if (element.attr('size-lg')) {
size = (element.attr('size-lg'));
html += '<table class="%s show-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>';
}
}

if( element.attr('size-sm') && element.attr('size-lg') ) {
return format(html, classes.join(' '), classes.join(' '), inner);
}

return format('<table class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>', classes.join(' '), inner);
return format(html, classes.join(' '), inner);

// <wrapper>
case this.components.wrapper:
Expand Down
52 changes: 52 additions & 0 deletions test/components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,58 @@ describe('Spacer', () => {
compare(input, expected);
});

it('creates a spacer element for small screens with correct size', () => {
var input = '<spacer size-sm="10"></spacer>';
var expected = `
<table class="spacer hide-for-large">
<tbody>
<tr>
<td height="10px" style="font-size:10px;line-height:10px;">&#xA0;</td>
</tr>
</tbody>
</table>
`;

compare(input, expected);
});

it('creates a spacer element for large screens with correct size', () => {
var input = '<spacer size-lg="20"></spacer>';
var expected = `
<table class="spacer show-for-large">
<tbody>
<tr>
<td height="20px" style="font-size:20px;line-height:20px;">&#xA0;</td>
</tr>
</tbody>
</table>
`;

compare(input, expected);
});

it('creates a spacer element for small and large screens with correct sizes', () => {
var input = '<spacer size-sm="10" size-lg="20"></spacer>';
var expected = `
<table class="spacer hide-for-large">
<tbody>
<tr>
<td height="10px" style="font-size:10px;line-height:10px;">&#xA0;</td>
</tr>
</tbody>
</table>
<table class="spacer show-for-large">
<tbody>
<tr>
<td height="20px" style="font-size:20px;line-height:20px;">&#xA0;</td>
</tr>
</tbody>
</table>
`;

compare(input, expected);
});

it('copies classes to the final spacer HTML', () => {
var input = '<spacer size="10" class="bgcolor"></spacer>';
var expected = `
Expand Down