now-design-atoms
Version:
Atomic UI components for now-design.
58 lines (57 loc) • 1.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.HoverTop = exports.FocusBottom = exports.ClickRight = void 0;
var _react = _interopRequireDefault(require("react"));
var _Tooltip = _interopRequireDefault(require("./Tooltip"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var _default = exports["default"] = {
title: 'Atoms/Tooltip',
component: _Tooltip["default"]
};
var HoverTop = exports.HoverTop = function HoverTop() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
padding: 40
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
content: "This is a tooltip",
position: "top",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
children: "Hover me"
})
})
});
};
var ClickRight = exports.ClickRight = function ClickRight() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
padding: 40
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
content: "Opens on click",
position: "right",
trigger: "click",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
children: "Click me"
})
})
});
};
var FocusBottom = exports.FocusBottom = function FocusBottom() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
padding: 40
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
content: "Appears on focus",
position: "bottom",
trigger: "focus",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
placeholder: "Focus me"
})
})
});
};