react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
65 lines (64 loc) • 3.35 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Glyphs = void 0;
var _react = _interopRequireDefault(require("react"));
var _classname = require("@bem-react/classname");
var _desktop = require("../Icon.bundle/desktop");
require("./common.example.css");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var glyphList = ['unfold-more', 'expand-more', 'close', 'check', 'cancel', 'check-thick', 'minus-thick'];
var IconExampleTableContainer = (0, _classname.cn)('IconExampleTableContainer');
var Glyphs = function () {
return /*#__PURE__*/_react.default.createElement("table", {
className: IconExampleTableContainer()
}, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
rowSpan: 2
}, "glyph"), /*#__PURE__*/_react.default.createElement("td", {
colSpan: 3
}, "scalable + custom size"), /*#__PURE__*/_react.default.createElement("td", {
colSpan: 5
}, "size attribute")), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "64px"), /*#__PURE__*/_react.default.createElement("td", null, "32px"), /*#__PURE__*/_react.default.createElement("td", null, "18px"), /*#__PURE__*/_react.default.createElement("td", null, "xl"), /*#__PURE__*/_react.default.createElement("td", null, "l"), /*#__PURE__*/_react.default.createElement("td", null, "m"), /*#__PURE__*/_react.default.createElement("td", null, "s"), /*#__PURE__*/_react.default.createElement("td", null, "xs")), glyphList.map(function (glyph, index) {
return /*#__PURE__*/_react.default.createElement("tr", {
key: index
}, /*#__PURE__*/_react.default.createElement("td", null, glyph), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
glyph: glyph,
scalable: true,
style: {
width: '64px',
height: '64px'
}
})), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
glyph: glyph,
scalable: true,
style: {
width: '32px',
height: '32px'
}
})), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
glyph: glyph,
scalable: true,
style: {
width: '18px',
height: '18px'
}
})), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
glyph: glyph,
size: "xl"
})), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
glyph: glyph,
size: "l"
})), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
glyph: glyph,
size: "m"
})), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
glyph: glyph,
size: "s"
})), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
glyph: glyph,
size: "xs"
})));
})));
};
exports.Glyphs = Glyphs;