oskar-ui/dist/components/Tooltip.stories.js

React component library

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
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 { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Tooltip from "./Tooltip";
import styled from "styled-components";
import Button from "@mui/material/Button";
import SearchIcon from "@mui/icons-material/Search";
export default {
    title: "Example/Tooltip",
    component: Tooltip,
    args: {
        message: "Lorem Ipsum",
    },
};
var triggerProps = ["hover", "click"];
var sizeProps = [
    { props: "sm", text: "small" },
    { props: "md", text: "medium" },
    { props: "lg", text: "large" },
];
var positionProps = ["top", "bottom", "left", "right"];
var Template = function (args) { return (_jsx(StoryWrapper, { children: triggerProps.map(function (trigger, index) {
        return (_jsxs(Storycontainer, { children: [_jsx("h1", { children: trigger }), _jsx(Tooltip, __assign({}, args, { trigger: trigger }, { children: _jsx(StyledDiv, { children: "div" }) })), _jsx(Tooltip, __assign({}, args, { trigger: trigger }, { children: _jsx("img", { src: "https://www.viewhotels.jp/asakusa-annex/wp-content/uploads/sites/6/2020/03/test-img-300x196.jpg", alt: "test img" }) })), _jsx(Tooltip, __assign({}, args, { trigger: trigger }, { children: _jsx(SearchIcon, { sx: { fontSize: 40 } }) })), _jsx(Tooltip, __assign({}, args, { trigger: trigger }, { children: _jsx(Button, __assign({ variant: "contained" }, { children: "ToolTip Button" })) }))] }, "template-".concat(index)));
    }) })); };
export var Primary = Template.bind({});
export var Secondary = Template.bind({});
Secondary.args = {
    theme: "secondary",
};
export var Size = function (args) {
    return (_jsx(StoryWrapper, { children: sizeProps.map(function (size, index) {
            return (_createElement(Tooltip, __assign({}, args, { size: size.props, key: "size-".concat(index) }),
                _jsx(Button, __assign({ variant: "contained" }, { children: size.text }))));
        }) }));
};
export var Position = function (args) {
    return (_jsx(StoryWrapper, { children: positionProps.map(function (position, index) {
            return (_createElement(Tooltip, __assign({}, args, { position: position, key: "position-".concat(index) }),
                _jsx(Button, __assign({ variant: "contained" }, { children: position }))));
        }) }));
};
export var AbsolutePosition = function (args) {
    return (_jsx(_Fragment, { children: _jsx(RelativeWrapper, { children: _jsx(Tooltip, __assign({}, args, { position: "bottom", trigger: "hover" }, { children: _jsx(AbsoluteWrapper, { children: "top:30 / right:30" }) })) }) }));
};
var StoryWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 12px;\n  padding: 12px;\n"], ["\n  display: flex;\n  gap: 12px;\n  padding: 12px;\n"])));
var Storycontainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n"])));
var StyledDiv = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  min-height: 50px;\n  border: 1px solid black;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  min-height: 50px;\n  border: 1px solid black;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
var RelativeWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  width: 400px;\n  height: 100px;\n  border: 1px solid black;\n"], ["\n  position: relative;\n  width: 400px;\n  height: 100px;\n  border: 1px solid black;\n"])));
var AbsoluteWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  right: 30px;\n  border: 1px solid black;\n"], ["\n  position: absolute;\n  top: 30px;\n  right: 30px;\n  border: 1px solid black;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;