grommet
Version:
focus on the essential experience
76 lines (75 loc) • 2.41 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = exports.Caret = void 0;
var _react = _interopRequireDefault(require("react"));
var _grommet = require("grommet");
var _grommetIcons = require("grommet-icons");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var TipContent = function TipContent(_ref) {
var message = _ref.message;
return /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
direction: "row",
align: "center"
}, /*#__PURE__*/_react["default"].createElement("svg", {
viewBox: "0 0 22 22",
version: "1.1",
width: "22px",
height: "22px"
}, /*#__PURE__*/_react["default"].createElement("polygon", {
fill: "grey",
points: "6 2 18 12 6 22",
transform: "matrix(-1 0 0 1 30 0)"
})), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
background: "grey",
direction: "row",
pad: "small",
round: "xsmall"
}, /*#__PURE__*/_react["default"].createElement(_grommet.Text, null, message)));
};
var Caret = exports.Caret = function Caret() {
return (
/*#__PURE__*/
// Uncomment <Grommet> lines when using outside of storybook
// <Grommet theme={...}>
_react["default"].createElement(_grommet.Box, {
align: "center",
justify: "center",
background: "dark-1",
fill: true,
gap: "large"
}, /*#__PURE__*/_react["default"].createElement(_grommet.Heading, {
textAlign: "center",
level: "1",
size: "xsmall"
}, "Tooltip is styled with a Caret"), /*#__PURE__*/_react["default"].createElement(_grommet.Box, null, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
fill: true,
direction: "row",
justify: "between"
}, /*#__PURE__*/_react["default"].createElement(_grommet.Tip, {
dropProps: {
align: {
left: 'right'
}
},
content: /*#__PURE__*/_react["default"].createElement(TipContent, {
message: "Designed with an SVG of Caret"
}),
plain: true
}, /*#__PURE__*/_react["default"].createElement(_grommet.Button, {
icon: /*#__PURE__*/_react["default"].createElement(_grommetIcons.Trash, null),
plain: false
})))))
// </Grommet>
);
};
Caret.args = {
full: true
};
Caret.parameters = {
chromatic: {
disable: true
}
};
var _default = exports["default"] = {
title: 'Controls/Tip/Caret'
};