Commit 539ea5eb authored by Simon Knox's avatar Simon Knox

limit icon component size to valid values

parent 815f35be
......@@ -12,6 +12,9 @@
/>
*/
// only allow classes in images.scss e.g. s12
const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
export default {
props: {
name: {
......@@ -22,7 +25,10 @@
size: {
type: Number,
required: false,
default: 0,
default: 16,
validator(value) {
return validSizes.includes(value);
},
},
cssClasses: {
......@@ -42,10 +48,11 @@
},
};
</script>
<template>
<svg
:class="[iconSizeClass, cssClasses]">
<use
<use
v-bind="{'xlink:href':spriteHref}"/>
</svg>
</template>
......@@ -11,7 +11,7 @@ describe('Sprite Icon Component', function () {
icon = mountComponent(IconComponent, {
name: 'test',
size: 99,
size: 32,
cssClasses: 'extraclasses',
});
});
......@@ -34,12 +34,18 @@ describe('Sprite Icon Component', function () {
});
it('should properly compute iconSizeClass', function () {
expect(icon.iconSizeClass).toBe('s99');
expect(icon.iconSizeClass).toBe('s32');
});
it('forbids invalid size prop', () => {
expect(icon.$options.props.size.validator(NaN)).toBeFalsy();
expect(icon.$options.props.size.validator(0)).toBeFalsy();
expect(icon.$options.props.size.validator(9001)).toBeFalsy();
});
it('should properly render img css', function () {
const classList = icon.$el.classList;
const containsSizeClass = classList.contains('s99');
const containsSizeClass = classList.contains('s32');
const containsCustomClass = classList.contains('extraclasses');
expect(containsSizeClass).toBe(true);
expect(containsCustomClass).toBe(true);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment