wix-style-react
Version:
wix-style-react
340 lines (327 loc) • 9.47 kB
JavaScript
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React from 'react';
import { string, bool } from 'prop-types';
import classNames from 'classnames';
import typography from '../../src/Typography';
import styles from './styles.scss';
/** Capitalize first character */
function capitalize(str) {
if (!str) {
return undefined;
}
return str[0].toUpperCase() + str.substring(1);
}
var DEFAULT_SIZE = 'medium';
var DEFAULT_WEIGHT = 'thin';
var DEFAULT_SKIN = 'standard';
var propsToClassNames = function propsToClassNames(props) {
var _names;
var names = (_names = {
text: true
}, _defineProperty(_names, 'size' + capitalize(props.size), !!props.size), _defineProperty(_names, 'weight' + capitalize(props.weight), !!props.weight), _defineProperty(_names, 'skin' + capitalize(props.skin), !!props.skin), _defineProperty(_names, 'link', !!props.link), _defineProperty(_names, 'disabled', !!props.disabled), _defineProperty(_names, 'light', !!props.light), _defineProperty(_names, 'secondary', !!props.secondary), _names);
return Object.entries(names).reduce(function (acc, entry) {
if (entry[1]) {
acc.push(entry[0]);
}
return acc;
}, []);
};
var textClasses = function textClasses(props) {
return classNames(propsToClassNames(props).map(function (name) {
return typography[name];
}));
};
var TextSizeWeightExample = function TextSizeWeightExample(props) {
var classes = textClasses(props);
return React.createElement(
'tr',
null,
React.createElement(
'td',
null,
props.size ? props.size : '[' + DEFAULT_SIZE + ']'
),
React.createElement(
'td',
null,
props.weight ? props.weight : '[' + DEFAULT_WEIGHT + ']'
),
React.createElement(
'td',
null,
propsToClassNames(props).join(' ')
),
React.createElement(
'td',
null,
React.createElement(
'span',
{ className: classes },
'This is a text'
)
)
);
};
TextSizeWeightExample.propTypes = {
size: string,
weight: string
};
var TextColorExample = function TextColorExample(props) {
var boolLabel = function boolLabel(val) {
return val === undefined ? '-' : val ? 'true' : 'false';
};
var link = boolLabel(props.link);
var disabled = boolLabel(props.disabled);
var light = boolLabel(props.light);
var secondary = boolLabel(props.secondary);
return React.createElement(
'tr',
null,
React.createElement(
'td',
null,
props.skin ? props.skin : '[' + DEFAULT_SKIN + ']'
),
React.createElement(
'td',
null,
link
),
React.createElement(
'td',
null,
disabled
),
React.createElement(
'td',
null,
light
),
React.createElement(
'td',
null,
secondary
),
React.createElement(
'td',
null,
propsToClassNames(props).join(' ')
),
React.createElement(
'td',
{ style: { backgroundColor: props.light ? 'black' : 'white' } },
React.createElement(
'span',
{ className: textClasses(props) },
'This is a text'
)
),
React.createElement(
'td',
null,
props.note
)
);
};
TextColorExample.propTypes = {
skin: string,
link: bool,
disabled: bool,
light: bool,
secondary: bool,
note: string
};
export function renderSizeAndWeightTable() {
return React.createElement(
'table',
{ className: styles.table },
React.createElement(
'thead',
null,
React.createElement(
'tr',
null,
React.createElement(
'th',
null,
'Size'
),
React.createElement(
'th',
null,
'Weight'
),
React.createElement(
'th',
null,
'Classes'
),
React.createElement(
'th',
null,
'Example'
)
)
),
React.createElement(TextSizeWeightExample, null),
React.createElement(TextSizeWeightExample, { size: 'medium' }),
React.createElement(TextSizeWeightExample, { size: 'small' }),
React.createElement(TextSizeWeightExample, { size: 'tiny' }),
React.createElement(TextSizeWeightExample, { weight: 'thin' }),
React.createElement(TextSizeWeightExample, { weight: 'normal' }),
React.createElement(TextSizeWeightExample, { weight: 'bold' }),
React.createElement(TextSizeWeightExample, { weight: 'thin', size: 'tiny' }),
React.createElement(TextSizeWeightExample, { weight: 'normal', size: 'tiny' }),
React.createElement(TextSizeWeightExample, { weight: 'bold', size: 'tiny' }),
React.createElement(TextSizeWeightExample, { weight: 'thin', size: 'small' }),
React.createElement(TextSizeWeightExample, { weight: 'normal', size: 'small' }),
React.createElement(TextSizeWeightExample, { weight: 'bold', size: 'small' }),
React.createElement(TextSizeWeightExample, { weight: 'thin', size: 'medium' }),
React.createElement(TextSizeWeightExample, { weight: 'normal', size: 'medium' }),
React.createElement(TextSizeWeightExample, { weight: 'bold', size: 'medium' })
);
}
export function renderColorTable() {
return React.createElement(
'table',
{ className: styles.table },
React.createElement(
'thead',
null,
React.createElement(
'tr',
null,
React.createElement(
'th',
null,
'Skin'
),
React.createElement(
'th',
null,
'Link'
),
React.createElement(
'th',
null,
'Disabled'
),
React.createElement(
'th',
null,
'Light'
),
React.createElement(
'th',
null,
'Secondary'
),
React.createElement(
'th',
null,
'Classes'
),
React.createElement(
'th',
null,
'Example'
),
React.createElement(
'th',
null,
'Notes'
)
)
),
React.createElement(TextColorExample, null),
React.createElement(TextColorExample, { skin: 'standard' }),
React.createElement(TextColorExample, { skin: 'success' }),
React.createElement(TextColorExample, { skin: 'error' }),
React.createElement(TextColorExample, { skin: 'premium' }),
React.createElement(TextColorExample, { link: true }),
React.createElement(TextColorExample, { disabled: true }),
React.createElement(TextColorExample, { light: true }),
React.createElement(TextColorExample, { secondary: true }),
React.createElement(TextColorExample, { secondary: true, light: true }),
React.createElement(TextColorExample, {
skin: 'standard',
link: true,
note: 'default skin class is explicitly set'
}),
React.createElement(TextColorExample, {
skin: 'standard',
disabled: true,
note: 'default skin class is explicitly set'
}),
React.createElement(TextColorExample, {
skin: 'standard',
light: true,
note: 'default skin class is explicitly set'
}),
React.createElement(TextColorExample, {
skin: 'standard',
secondary: true,
note: 'default skin class is explicitly set'
}),
React.createElement(TextColorExample, {
skin: 'error',
link: true,
note: 'boolean flags have no affect on non standard skin'
}),
React.createElement(TextColorExample, {
skin: 'error',
disabled: true,
note: 'boolean flags have no affect on non standard skin'
}),
React.createElement(TextColorExample, {
skin: 'error',
light: true,
note: 'boolean flags have no affect on non standard skin'
}),
React.createElement(TextColorExample, {
skin: 'error',
secondary: true,
note: 'boolean flags have no affect on non standard skin'
}),
React.createElement(TextColorExample, {
skin: 'success',
link: true,
note: 'boolean flags have no affect on non standard skin'
}),
React.createElement(TextColorExample, {
skin: 'success',
disabled: true,
note: 'boolean flags have no affect on non standard skin'
}),
React.createElement(TextColorExample, {
skin: 'success',
light: true,
note: 'boolean flags have no affect on non standard skin'
}),
React.createElement(TextColorExample, {
skin: 'success',
secondary: true,
note: 'boolean flags have no affect on non standard skin'
}),
React.createElement(TextColorExample, {
skin: 'premium',
link: true,
note: 'boolean flags have no affect on non standard skin'
}),
React.createElement(TextColorExample, {
skin: 'premium',
disabled: true,
note: 'boolean flags have no affect on non standard skin'
}),
React.createElement(TextColorExample, {
skin: 'premium',
light: true,
note: 'boolean flags have no affect on non standard skin'
}),
React.createElement(TextColorExample, {
skin: 'premium',
secondary: true,
note: 'boolean flags have no affect on non standard skin'
})
);
}