react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
193 lines • 6.47 kB
JavaScript
var __assign = this && this.__assign || function () {
__assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React from 'react';
import { Button } from '../Button.bundle/desktop';
import { ButtonContent } from '../Content/Button-Content';
import { Icon } from '../../Icon/Icon.bundle/desktop';
var buttonViews = ['action', 'default', 'pseudo', 'clear', 'link'];
export var View = function () {
return /*#__PURE__*/React.createElement(React.Fragment, null, buttonViews.map(function (view, index) {
return /*#__PURE__*/React.createElement("span", {
key: index
}, /*#__PURE__*/React.createElement(Button, {
view: view,
as: "button"
}, view), ' ');
}));
};
export var Disabled = function () {
return /*#__PURE__*/React.createElement(React.Fragment, null, buttonViews.map(function (view, index) {
return /*#__PURE__*/React.createElement("span", {
key: index
}, /*#__PURE__*/React.createElement(Button, {
view: view,
as: "button",
disabled: true
}, view), ' ');
}));
};
export var Size = function () {
return /*#__PURE__*/React.createElement(React.Fragment, null, ['l', 'm', 's'].map(function (size, index) {
return /*#__PURE__*/React.createElement("span", {
key: index
}, buttonViews.map(function (view, index2) {
return /*#__PURE__*/React.createElement("span", {
key: index2
}, /*#__PURE__*/React.createElement(Button, __assign({}, {
size: size,
view: view
}, {
as: "button"
}), view), ' ');
}), index < 2 ? ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null))) : undefined);
}));
};
export var Types = function () {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
view: "pseudo",
as: "button"
}, "button"), ' ', /*#__PURE__*/React.createElement(Button, {
view: "pseudo",
as: "a",
type: "link",
url: "#"
}, "link"), ' ', /*#__PURE__*/React.createElement(Button, {
view: "pseudo",
as: "span"
}, "span"));
};
export var WithIcon = function () {
return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Button, {
view: "default",
as: "button",
size: "l",
iconLeft: function (className) {
return /*#__PURE__*/React.createElement(Icon, {
className: className,
glyph: "close",
size: "l"
});
},
iconRight: function (className) {
return /*#__PURE__*/React.createElement(Icon, {
className: className,
glyph: "expand-more",
size: "l"
});
}
}, "both sides")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Button, {
view: "default",
as: "button",
size: "m",
iconLeft: function (className) {
return /*#__PURE__*/React.createElement(Icon, {
className: className,
glyph: "check"
});
}
}, "select item")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Button, {
view: "default",
as: "button",
size: "s",
iconRight: function (className) {
return /*#__PURE__*/React.createElement(Icon, {
className: className,
glyph: "unfold-more",
size: "s"
});
}
}, "unfold")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Button, {
view: "default",
as: "button",
size: "l",
iconLeft: function () {
return /*#__PURE__*/React.createElement(Icon, {
glyph: "close"
});
}
}), ' ', /*#__PURE__*/React.createElement(Button, {
view: "default",
as: "button",
size: "m",
iconLeft: function () {
return /*#__PURE__*/React.createElement(Icon, {
glyph: "close"
});
}
}), ' ', /*#__PURE__*/React.createElement(Button, {
view: "default",
as: "button",
size: "s",
iconLeft: function () {
return /*#__PURE__*/React.createElement(Icon, {
glyph: "close",
size: "s"
});
}
}))), buttonViews.map(function (view, index) {
return /*#__PURE__*/React.createElement("tr", {
key: index
}, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Button, {
view: view,
as: "button",
size: "m",
iconLeft: function (className) {
return /*#__PURE__*/React.createElement(Icon, {
className: className,
glyph: "close"
});
},
iconRight: function (className) {
return /*#__PURE__*/React.createElement(Icon, {
className: className,
glyph: "expand-more"
});
}
}, "both sides")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Button, {
view: view,
as: "button",
size: "m",
iconLeft: function (className) {
return /*#__PURE__*/React.createElement(Icon, {
className: className,
glyph: "check"
});
}
}, "select item")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Button, {
view: view,
as: "button",
size: "m",
iconRight: function (className) {
return /*#__PURE__*/React.createElement(Icon, {
className: className,
glyph: "unfold-more"
});
}
}, "unfold")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Button, {
view: view,
as: "button",
size: "m",
iconRight: function (className) {
return /*#__PURE__*/React.createElement(Icon, {
className: className,
glyph: "unfold-more"
});
}
}, "unfold")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Button, {
view: view,
as: "button",
size: "m",
raw: true
}, /*#__PURE__*/React.createElement(ButtonContent, null, /*#__PURE__*/React.createElement(Icon, {
glyph: "close"
})))));
})));
};