import { __assign } from "tslib";
import * as React from 'react';
import { Tooltip } from '@fluentui/react-tooltip';
import { makeStyles } from '@fluentui/react-make-styles';
var useStyles = makeStyles({
    exampleList: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'flex-start',
        margin: '16px 0',
        gap: '16px',
    },
    targetContainer: {
        display: 'inline-grid',
        alignItems: 'center',
        justifyItems: 'center',
        gap: '4px',
        margin: '16px 128px',
    },
    target: {
        width: '48px',
        height: '48px',
    },
});
export var Basic = function () {
    var styles = useStyles();
    var targetRef = React.useRef(null);
    return (React.createElement(React.Fragment, null,
        "Hover or focus the buttons to show their tooltips:",
        React.createElement("div", { className: styles.exampleList },
            React.createElement(Tooltip, { content: "This is a default tooltip", triggerAriaAttribute: "describedby" },
                React.createElement("button", null, "Default")),
            React.createElement(Tooltip, { content: "This is a subtle tooltip", subtle: true, triggerAriaAttribute: "describedby" },
                React.createElement("button", null, "Subtle")),
            React.createElement(Tooltip, { content: "This tooltip has no arrow", noArrow: true, triggerAriaAttribute: "describedby" },
                React.createElement("button", null, "No arrow")),
            React.createElement(Tooltip, { triggerAriaAttribute: "describedby", content: React.createElement(React.Fragment, null,
                    "This ",
                    React.createElement("i", null, "tooltip"),
                    " has ",
                    React.createElement("u", null, "formatted"),
                    " content") },
                React.createElement("button", null, "Formatted content")),
            React.createElement(Tooltip, { content: "This tooltip targets the red square", targetRef: targetRef, triggerAriaAttribute: "describedby" },
                React.createElement("button", null,
                    "Custom target:",
                    ' ',
                    React.createElement("div", { ref: targetRef, style: { display: 'inline-block', width: '8px', height: '8px', background: 'red' } }))),
            React.createElement(Tooltip, { content: "The trigger button was rendered by a render function", triggerAriaAttribute: "describedby" }, function (triggerProps) { return (React.createElement("div", null,
                React.createElement("button", __assign({}, triggerProps), "Custom trigger"))); }))));
};
export var Aria = function () {
    var styles = useStyles();
    return (React.createElement(React.Fragment, null,
        "Use a screen reader to hear how the tooltip can be used as its target's label or description:",
        React.createElement("div", { className: styles.exampleList },
            React.createElement(Tooltip, { content: "This tooltip is the label for the button", triggerAriaAttribute: "label" },
                React.createElement("button", null,
                    React.createElement("span", { "aria-hidden": "true" }, "\uD83D\uDCAC"))),
            React.createElement(Tooltip, { content: "This tooltip describes the button", triggerAriaAttribute: "describedby" },
                React.createElement("button", null, "Description")))));
};
export var Positioning = function () {
    var styles = useStyles();
    return (React.createElement(React.Fragment, null,
        React.createElement("div", null, "Each of these buttons places the tooltip in a different location relative to its trigger button."),
        React.createElement("div", { className: styles.targetContainer },
            React.createElement(Tooltip, { content: "above start", position: "above", align: "start" },
                React.createElement("button", { className: styles.target, style: { gridArea: '1 / 2' } })),
            React.createElement(Tooltip, { content: "above center", position: "above", align: "center" },
                React.createElement("button", { className: styles.target, style: { gridArea: '1 / 3' } })),
            React.createElement(Tooltip, { content: "above end", position: "above", align: "end" },
                React.createElement("button", { className: styles.target, style: { gridArea: '1 / 4' } })),
            React.createElement(Tooltip, { content: "before top", position: "before", align: "top" },
                React.createElement("button", { className: styles.target, style: { gridArea: '2 / 1' } })),
            React.createElement(Tooltip, { content: "before center", position: "before", align: "center" },
                React.createElement("button", { className: styles.target, style: { gridArea: '3 / 1' } })),
            React.createElement(Tooltip, { content: "before bottom", position: "before", align: "bottom" },
                React.createElement("button", { className: styles.target, style: { gridArea: '4 / 1' } })),
            React.createElement(Tooltip, { content: "after top", position: "after", align: "top" },
                React.createElement("button", { className: styles.target, style: { gridArea: '2 / 5' } })),
            React.createElement(Tooltip, { content: "after center", position: "after", align: "center" },
                React.createElement("button", { className: styles.target, style: { gridArea: '3 / 5' } })),
            React.createElement(Tooltip, { content: "after bottom", position: "after", align: "bottom" },
                React.createElement("button", { className: styles.target, style: { gridArea: '4 / 5' } })),
            React.createElement(Tooltip, { content: "below start", position: "below", align: "start" },
                React.createElement("button", { className: styles.target, style: { gridArea: '5 / 2' } })),
            React.createElement(Tooltip, { content: "below center", position: "below", align: "center" },
                React.createElement("button", { className: styles.target, style: { gridArea: '5 / 3' } })),
            React.createElement(Tooltip, { content: "below end", position: "below", align: "end" },
                React.createElement("button", { className: styles.target, style: { gridArea: '5 / 4' } })))));
};
export var OnlyIfTruncated = function () {
    var _a = React.useState(true), wide = _a[0], setWide = _a[1];
    var text = 'The tooltip will only show if the text is truncated.';
    return (React.createElement(React.Fragment, null,
        React.createElement(Tooltip, { content: text, onlyIfTruncated: true },
            React.createElement("div", { tabIndex: 0, style: {
                    width: !wide ? '100px' : undefined,
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    border: '1px solid gray',
                    padding: '4px',
                } }, text)),
        React.createElement("button", { onClick: function () { return setWide(function (w) { return !w; }); } }, "Toggle width")));
};
//# sourceMappingURL=Tooltip.stories.js.map