@storybynumbers/jck-logo
Version:
166 lines (154 loc) • 14.3 kB
JavaScript
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
const css = require('./logo.scss');
export default class Logo extends Component {
static propTypes = {
className: PropTypes.string,
language: PropTypes.string,
logoStyle: PropTypes.string,
width: PropTypes.number
};
static defaultProps = {
className: '',
language: 'nl',
logoStyle: 'Coloured',
width: 100
};
render() {
const p = this.props;
// Some legacy here. There used to be colored variants. These now default to white.
/*
CMS dropdown:
- None|No logo
- White|All white
- Black|All black
- Coloured|Color with white text
- Coloured-white|Color with black text
*/
const classes = [];
switch (p.logoStyle) {
case 'White':
case 'white':
case 'Coloured-white':
classes.push(css.white);
break;
case 'Black':
case 'black':
case 'Coloured':
classes.push(css.black);
break;
default:
classes.push(css.white);
break;
}
const en = (
<svg className={cx(p.className)}
style={{width: p.width}}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 144.57 238.11">
<path className={css.line} d="M41,133H38.4v-2.59H41Zm0,24.42H38.4V136.06H41Z"/>
<path className={css.line}
d="M47.29,144.77c0,.74,0,1.25.06,2.21s.29,2.59,2.08,2.59,2-1.41,2-2.46l2.62.45c-.45,2.94-1.66,4.45-4.7,4.45-3.68,0-4.48-2.5-4.64-5.12-.06-1-.06-2-.06-2.94s0-1.92.06-2.94c.16-2.62,1.28-5.12,4.67-5.12s4.51,2.5,4.67,5.12c.06,1,.06,2.85.06,3.78Zm4.29-2.3s0-.9,0-1.54c-.06-1-.32-2.62-2.11-2.62s-2,1.63-2.11,2.62c0,.64,0,1.54,0,1.54Z"/>
<path className={css.line}
d="M74,136.06,70.3,151.81H67.8l-2.4-10.24L63,151.81H60.57l-3.71-15.74h2.72l2.3,10.85,2.34-10.85h2.46L69,146.91l2.3-10.85Z"/>
<path className={css.line} d="M80,133H77.4v-2.59H80Zm0,18.78H77.4V136.06H80Z"/>
<path className={css.line}
d="M92.86,140.51l-2.66.38v-.45a2.09,2.09,0,0,0-.48-1.63,1.81,1.81,0,0,0-1.34-.51c-1.22,0-1.89.54-1.89,1.82a2.14,2.14,0,0,0,.1.67c.26.9,1.79,1.47,2.53,1.73,1.63.61,3.3,1.44,3.62,3.33a10.28,10.28,0,0,1,.1,1.47c0,2.91-1.37,4.67-4.51,4.67-2.94,0-4.54-1.54-4.61-4.35v-.32l2.66-.42,0,.45c0,1.25.61,2.24,1.92,2.21,1.57,0,2-.67,2-2.18a8.55,8.55,0,0,0-.06-1c-.22-1-1.47-1.38-2.3-1.7-1.54-.61-3.39-1.47-3.84-3.23a5.34,5.34,0,0,1-.16-1.25c0-2.82,1.7-4.35,4.45-4.35s4.48,1.44,4.48,4.32Z"/>
<path className={css.line}
d="M106.17,151.81h-2.59V140.67c0-1.28-.42-2.37-2-2.37a2.17,2.17,0,0,0-2.21,2.46v11H96.76V130.43h2.59v6.72a4.11,4.11,0,0,1,3-1.28c2.3,0,3.78,1.44,3.78,4.35Z"/>
<path className={css.line}
d="M41.29,177.63v.32c-.06,2.91-1.63,4.45-4.7,4.45-3.42,0-4.32-2.5-4.48-5.12-.06-1-.06-2-.06-2.94s0-1.92.06-2.94c.16-2.62,1-5.12,4.42-5.12s4.77,1.66,4.77,4.58v.32l-2.66.35c0-1.37-.1-2.82-1.86-2.82s-2,1.63-2.08,2.62c-.06,1.25-.06,1.66-.06,3s0,1.79.06,3c.06,1,.29,2.59,2,2.59,2,0,1.92-1.37,1.89-2.78Z"/>
<path className={css.line}
d="M54.09,182.2H51.5v-1.09a4.11,4.11,0,0,1-3,1.28c-2.3,0-3.78-1.44-3.78-4.35V166.46h2.59v11.13c0,1.28.42,2.37,2,2.37a2.17,2.17,0,0,0,2.21-2.46v-11h2.59Z"/>
<path className={css.line} d="M60.71,182.2H58.12V160.83h2.59Z"/>
<path className={css.line} d="M70.57,169H67.66V182.2H65.07V162.14h2.59v4.32h2.91Z"/>
<path className={css.line}
d="M83.05,182.2H80.46v-1.09a4.11,4.11,0,0,1-3,1.28c-2.3,0-3.78-1.44-3.78-4.35V166.46h2.59v11.13c0,1.28.42,2.37,2,2.37a2.17,2.17,0,0,0,2.21-2.46v-11h2.59Z"/>
<path className={css.line}
d="M93.55,169.37a2.84,2.84,0,0,0-1.66-.48c-1.54,0-2.21,1.18-2.21,2.91v10.4H87.09V166.46h2.59v1.09a3.18,3.18,0,0,1,2.62-1.28,4.84,4.84,0,0,1,1.25.13Z"/>
<path className={css.line}
d="M105.58,182.2H103v-1.09a3,3,0,0,1-2.53,1.28c-3.39,0-4.1-2.5-4.26-5.12-.06-1-.06-2-.06-2.94s0-1.92.06-2.94c.16-2.62.86-5.12,4.26-5.12a3,3,0,0,1,2.53,1.28v-1.09h2.59ZM103,174.33v-3c0-1.41-.58-2.62-2.11-2.62-1.79,0-2,1.63-2.08,2.62-.06,1.25-.06,1.66-.06,3s0,1.79.06,3c.06,1,.29,2.59,2.08,2.59,1.54,0,2.11-1.21,2.11-2.62Z"/>
<path className={css.line} d="M112.21,182.2h-2.59V160.83h2.59Z"/>
<path className={css.line}
d="M42.92,218.23H40.33v-6.72a3,3,0,0,1-2.53,1.28c-3.39,0-4.1-2.5-4.26-5.12-.06-1-.06-2-.06-2.94s0-1.92.06-2.95c.16-2.62.86-5.12,4.26-5.12a3,3,0,0,1,2.53,1.28v-1.09h2.59Zm-2.59-13.5v-3c0-1.41-.58-2.62-2.11-2.62-1.79,0-2,1.6-2.08,2.59-.06,1.25-.06,1.7-.06,3s0,1.76.06,3c.06,1,.29,2.62,2.08,2.62,1.54,0,2.11-1.22,2.11-2.62Z"/>
<path className={css.line}
d="M56.36,212.6H53.77v-1.09a4.11,4.11,0,0,1-3,1.28c-2.3,0-3.78-1.44-3.78-4.35V196.86h2.59V208c0,1.28.42,2.37,2,2.37a2.17,2.17,0,0,0,2.21-2.46v-11h2.59Z"/>
<path className={css.line}
d="M69.51,212.6H66.92v-1.09a3,3,0,0,1-2.53,1.28c-3.39,0-4.1-2.5-4.26-5.12-.06-1-.06-2-.06-2.94s0-1.92.06-2.95c.16-2.62.86-5.12,4.26-5.12a3,3,0,0,1,2.53,1.28v-1.09h2.59Zm-2.59-7.87v-3c0-1.41-.58-2.62-2.11-2.62-1.79,0-2,1.63-2.08,2.63-.06,1.25-.06,1.66-.06,3s0,1.79.06,3c.06,1,.29,2.59,2.08,2.59,1.54,0,2.11-1.22,2.11-2.62Z"/>
<path className={css.line}
d="M80,199.77a2.84,2.84,0,0,0-1.66-.48c-1.54,0-2.21,1.18-2.21,2.91v10.4H73.54V196.86h2.59v1.09a3.18,3.18,0,0,1,2.62-1.28,4.8,4.8,0,0,1,1.25.13Z"/>
<path className={css.line} d="M88.9,199.35H86V212.6H83.4V192.54H86v4.32H88.9Z"/>
<path className={css.line}
d="M94.35,205.56c0,.73,0,1.25.06,2.21s.29,2.59,2.08,2.59,2-1.41,2-2.46l2.62.45c-.45,2.94-1.66,4.45-4.7,4.45-3.68,0-4.48-2.5-4.64-5.12-.06-1-.06-2-.06-2.94s0-1.92.06-2.95c.16-2.62,1.28-5.12,4.67-5.12s4.51,2.5,4.67,5.12c.06,1,.06,2.85.06,3.78Zm4.29-2.3s0-.9,0-1.54c-.06-1-.32-2.62-2.11-2.62s-2,1.63-2.11,2.63c0,.64,0,1.54,0,1.54Z"/>
<path className={css.line}
d="M111.41,199.77a2.84,2.84,0,0,0-1.66-.48c-1.54,0-2.21,1.18-2.21,2.91v10.4h-2.59V196.86h2.59v1.09a3.18,3.18,0,0,1,2.62-1.28,4.79,4.79,0,0,1,1.25.13Z"/>
<rect className={css.line} x="25.51" y="76.54" width="7.85" height="34.02"/>
<rect className={css.line} x="42.65" width="7.85" height="110.55"/>
<rect className={css.line} x="59.79" y="34.02" width="7.85" height="76.54"/>
<rect className={css.line} x="76.92" y="85.04" width="7.85" height="25.51"/>
<rect className={css.line} x="76.92" y="34.02" width="7.85" height="25.51"/>
<rect className={css.line} x="111.2" y="34.02" width="7.85" height="25.51"/>
<rect className={css.line} x="94.06" width="7.85" height="110.55"/>
<rect className={css.line} x="111.2" y="76.54" width="7.85" height="34.02"/>
</svg>
);
const nl = (
<svg className={cx(p.className)} xmlns="http://www.w3.org/2000/svg"
style={{width: p.width}}
viewBox="0 0 144.57 238.11">
<path className={css.line} d="M47.72,133H45.13v-2.59h2.59Zm0,24.41H45.13V136.06h2.59Z"/>
<path className={css.line}
d="M61,146.88c-.19,3-1.12,5.12-4.74,5.12s-4.54-2.11-4.74-5.12c-.06-1-.06-2-.06-2.95s0-1.92.06-2.94c.16-2.62,1.28-5.12,4.74-5.12s4.58,2.5,4.74,5.12c.06,1,.06,2,.06,2.94S61,145.85,61,146.88Zm-2.56-6c-.06-1-.26-2.62-2.18-2.62s-2.11,1.63-2.18,2.62c-.06,1.25-.06,1.66-.06,3s0,1.79.06,3c.06,1,.26,2.59,2.18,2.59s2.11-1.6,2.18-2.59c.06-1.25.06-1.7.06-3S58.48,142.17,58.41,140.93Z"/>
<path className={css.line}
d="M74,146.88c-.19,3-1.12,5.12-4.74,5.12s-4.54-2.11-4.74-5.12c-.06-1-.06-2-.06-2.95s0-1.92.06-2.94c.16-2.62,1.28-5.12,4.74-5.12S73.8,138.37,74,141c.06,1,.06,2,.06,2.94S74,145.85,74,146.88Zm-2.56-6c-.06-1-.26-2.62-2.18-2.62s-2.11,1.63-2.18,2.62c-.06,1.25-.06,1.66-.06,3s0,1.79.06,3c.06,1,.26,2.59,2.18,2.59S71.34,148,71.4,147c.06-1.25.06-1.7.06-3S71.47,142.17,71.4,140.93Z"/>
<path className={css.line}
d="M86.86,151.81H84.27v-1.09A3,3,0,0,1,81.74,152c-3.39,0-4.1-2.5-4.26-5.12-.06-1-.06-2-.06-2.95s0-1.92.06-2.94c.16-2.62.86-5.12,4.26-5.12a3,3,0,0,1,2.53,1.28v-6.72h2.59Zm-2.59-7.87v-3c0-1.41-.58-2.62-2.11-2.62-1.79,0-2,1.63-2.08,2.62-.06,1.25-.06,1.66-.06,3s0,1.79.06,3c.06,1,.29,2.59,2.08,2.59,1.54,0,2.11-1.22,2.11-2.62Z"/>
<path className={css.line}
d="M99.72,140.51l-2.66.38v-.45a2.09,2.09,0,0,0-.48-1.63,1.81,1.81,0,0,0-1.34-.51c-1.22,0-1.89.54-1.89,1.82a2.11,2.11,0,0,0,.1.67c.26.9,1.79,1.47,2.53,1.73,1.63.61,3.3,1.44,3.62,3.33a10.45,10.45,0,0,1,.1,1.47c0,2.91-1.38,4.67-4.51,4.67-2.94,0-4.54-1.54-4.61-4.35v-.32l2.66-.42,0,.45c0,1.25.61,2.24,1.92,2.21,1.57,0,2-.67,2-2.18a8.56,8.56,0,0,0-.06-1c-.22-1-1.47-1.38-2.3-1.7-1.54-.61-3.39-1.47-3.84-3.23a5.35,5.35,0,0,1-.16-1.25c0-2.82,1.7-4.35,4.45-4.35s4.48,1.44,4.48,4.32Z"/>
<path className={css.line}
d="M34.83,177.63v.32c-.06,2.91-1.63,4.45-4.7,4.45-3.42,0-4.32-2.5-4.48-5.12-.06-1-.06-2-.06-2.94s0-1.92.06-2.94c.16-2.62,1-5.12,4.42-5.12s4.77,1.66,4.77,4.57v.32l-2.66.35c0-1.38-.1-2.82-1.86-2.82s-2,1.63-2.08,2.62c-.06,1.25-.06,1.66-.06,3s0,1.79.06,3c.06,1,.29,2.59,2,2.59,2,0,1.92-1.38,1.89-2.79Z"/>
<path className={css.line}
d="M47.95,182.2H45.35v-1.09a4.11,4.11,0,0,1-3,1.28c-2.3,0-3.78-1.44-3.78-4.35V166.46h2.59v11.13c0,1.28.42,2.37,2,2.37a2.17,2.17,0,0,0,2.21-2.46v-11h2.59Z"/>
<path className={css.line} d="M54.57,182.2H52V160.83h2.59Z"/>
<path className={css.line} d="M64.11,169H61.19V182.2H58.6V162.14h2.59v4.32h2.91Z"/>
<path className={css.line}
d="M76.78,182.2H74.19v-1.09a4.1,4.1,0,0,1-3,1.28c-2.3,0-3.78-1.44-3.78-4.35V166.46H70v11.13c0,1.28.42,2.37,2,2.37a2.17,2.17,0,0,0,2.21-2.46v-11h2.59Z"/>
<path className={css.line}
d="M87.28,169.37a2.83,2.83,0,0,0-1.66-.48c-1.54,0-2.21,1.18-2.21,2.91v10.4H80.81V166.46h2.59v1.09A3.19,3.19,0,0,1,86,166.27a4.84,4.84,0,0,1,1.25.13Z"/>
<path className={css.line}
d="M92.62,175.16c0,.74,0,1.25.06,2.21S93,180,94.77,180s2-1.41,2-2.46l2.62.45c-.45,2.95-1.66,4.45-4.7,4.45-3.68,0-4.48-2.5-4.64-5.12-.06-1-.06-2-.06-2.94s0-1.92.06-2.94c.16-2.62,1.28-5.12,4.67-5.12s4.51,2.5,4.67,5.12c.06,1,.06,2.85.06,3.78Zm4.29-2.3s0-.9,0-1.54c-.06-1-.32-2.62-2.11-2.62s-2,1.63-2.11,2.62c0,.64,0,1.54,0,1.54Z"/>
<path className={css.line}
d="M105.49,175.16c0,.74,0,1.25.06,2.21s.29,2.59,2.08,2.59,2-1.41,2-2.46l2.62.45c-.45,2.95-1.66,4.45-4.7,4.45-3.68,0-4.48-2.5-4.64-5.12-.06-1-.06-2-.06-2.94s0-1.92.06-2.94c.16-2.62,1.28-5.12,4.67-5.12s4.51,2.5,4.67,5.12c.06,1,.06,2.85.06,3.78Zm4.29-2.3s0-.9,0-1.54c-.06-1-.32-2.62-2.11-2.62s-2,1.63-2.11,2.62c0,.64,0,1.54,0,1.54Z"/>
<path className={css.line} d="M118.67,182.2h-2.59V160.83h2.59Z"/>
<path className={css.line}
d="M37.9,212.62H35l-3.17-7-1.82,3v4H27.37V191.24H30V204l4.32-7.13h2.94L33.52,203Z"/>
<path className={css.line}
d="M56.75,196.87,53,212.62h-2.5l-2.4-10.24-2.4,10.24H43.31L39.6,196.87h2.72l2.3,10.85L47,196.87h2.46l2.3,10.85L54,196.87Z"/>
<path className={css.line}
d="M68.94,212.62H66.35v-1.09a3,3,0,0,1-2.53,1.28c-3.39,0-4.1-2.5-4.26-5.12-.06-1-.06-2-.06-2.94s0-1.92.06-2.95c.16-2.62.86-5.12,4.26-5.12A3,3,0,0,1,66.35,198v-1.09h2.59Zm-2.59-7.87v-3c0-1.41-.58-2.62-2.11-2.62-1.79,0-2,1.63-2.08,2.63-.06,1.25-.06,1.66-.06,3s0,1.79.06,3c.06,1,.29,2.59,2.08,2.59,1.54,0,2.11-1.22,2.11-2.62Z"/>
<path className={css.line}
d="M79.44,199.78a2.85,2.85,0,0,0-1.66-.48c-1.54,0-2.21,1.18-2.21,2.91v10.4H73V196.87h2.59V198a3.18,3.18,0,0,1,2.62-1.28,4.84,4.84,0,0,1,1.25.13Z"/>
<path className={css.line} d="M88.33,199.37H85.42v13.25H82.83V192.55h2.59v4.32h2.91Z"/>
<path className={css.line} d="M94.47,193.83H91.88v-2.59h2.59Zm0,18.78H91.88V196.87h2.59Z"/>
<path className={css.line}
d="M100.78,205.58c0,.73,0,1.25.06,2.21s.29,2.59,2.08,2.59,2-1.41,2-2.46l2.62.45c-.45,2.94-1.66,4.45-4.7,4.45-3.68,0-4.48-2.5-4.64-5.12-.06-1-.06-2-.06-2.94s0-1.92.06-2.95c.16-2.62,1.28-5.12,4.67-5.12s4.51,2.5,4.67,5.12c.06,1,.06,2.85.06,3.78Zm4.29-2.3s0-.9,0-1.54c-.06-1-.32-2.62-2.11-2.62s-2,1.63-2.11,2.63c0,.64,0,1.54,0,1.54Z"/>
<path className={css.line}
d="M117.83,199.78a2.85,2.85,0,0,0-1.66-.48c-1.54,0-2.21,1.18-2.21,2.91v10.4h-2.59V196.87H114V198a3.18,3.18,0,0,1,2.62-1.28,4.84,4.84,0,0,1,1.25.13Z"/>
<rect className={css.line} x="25.51" y="76.54" width="7.85" height="34.02"/>
<rect className={css.line} x="42.65" width="7.85" height="110.55"/>
<rect className={css.line} x="59.79" y="34.02" width="7.85" height="76.54"/>
<rect className={css.line} x="76.92" y="85.04" width="7.85" height="25.51"/>
<rect className={css.line} x="76.92" y="34.02" width="7.85" height="25.51"/>
<rect className={css.line} x="111.2" y="34.02" width="7.85" height="25.51"/>
<rect className={css.line} x="94.06" width="7.85" height="110.55"/>
<rect className={css.line} x="111.2" y="76.54" width="7.85" height="34.02"/>
</svg>
);
return (
<div className={cx(classes)}>
{this.props.language === 'nl' ? nl : en}
</div>
);
}
}