react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
57 lines • 2.71 kB
JavaScript
import React from 'react';
import { cn } from '@bem-react/classname';
import { Icon } from '../Icon.bundle/desktop';
import './common.example.css';
var glyphList = ['unfold-more', 'expand-more', 'close', 'check', 'cancel', 'check-thick', 'minus-thick'];
var IconExampleTableContainer = cn('IconExampleTableContainer');
export var Glyphs = function () {
return /*#__PURE__*/React.createElement("table", {
className: IconExampleTableContainer()
}, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
rowSpan: 2
}, "glyph"), /*#__PURE__*/React.createElement("td", {
colSpan: 3
}, "scalable + custom size"), /*#__PURE__*/React.createElement("td", {
colSpan: 5
}, "size attribute")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "64px"), /*#__PURE__*/React.createElement("td", null, "32px"), /*#__PURE__*/React.createElement("td", null, "18px"), /*#__PURE__*/React.createElement("td", null, "xl"), /*#__PURE__*/React.createElement("td", null, "l"), /*#__PURE__*/React.createElement("td", null, "m"), /*#__PURE__*/React.createElement("td", null, "s"), /*#__PURE__*/React.createElement("td", null, "xs")), glyphList.map(function (glyph, index) {
return /*#__PURE__*/React.createElement("tr", {
key: index
}, /*#__PURE__*/React.createElement("td", null, glyph), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
glyph: glyph,
scalable: true,
style: {
width: '64px',
height: '64px'
}
})), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
glyph: glyph,
scalable: true,
style: {
width: '32px',
height: '32px'
}
})), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
glyph: glyph,
scalable: true,
style: {
width: '18px',
height: '18px'
}
})), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
glyph: glyph,
size: "xl"
})), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
glyph: glyph,
size: "l"
})), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
glyph: glyph,
size: "m"
})), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
glyph: glyph,
size: "s"
})), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
glyph: glyph,
size: "xs"
})));
})));
};