wix-storybook-utils/dist/es/src/AnchoredTitle/AnchoredTitle.js

Utilities for automated component documentation within Storybook

import React, { useState, useRef } from 'react';
import { ConfirmSmall, LinkSmall } from '@wix/wix-ui-icons-common';
import copy from 'copy-to-clipboard';
import ReactTooltip from 'react-tooltip';
import addons from '@storybook/addons';
import Heading from '../Heading';
import { classes } from './AnchoredTitle.st.css';
export var AnchoredTitle = function (_a) {
    var title = _a.title, _b = _a.children, children = _b === void 0 ? null : _b;
    var _c = useState(false), copied = _c[0], setCopied = _c[1];
    var id = title.replace(/\s+/g, '_');
    var copyLinkRef = useRef(null);
    var onCopy = function (event) {
        event.preventDefault();
        setCopied(true);
        addons.getChannel().emit('navigateUrl', "#".concat(id));
        setTimeout(function () {
            copy(new URL(window.parent.location).href);
        });
    };
    var onMouseEnter = function () { return ReactTooltip.show(copyLinkRef.current); };
    var onMouseLeave = function () {
        return ReactTooltip.hide(copyLinkRef.current) && setCopied(false);
    };
    var onAnchorClicked = function (event) {
        return children ? onCopy(event) : event.preventDefault();
    };
    return (React.createElement("div", { className: classes.root, onClick: !children && onCopy, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
        React.createElement("a", { ref: copyLinkRef, "data-for": id, "data-tip": true, className: classes.link, id: id, href: "#".concat(id), target: "_self", onClick: onAnchorClicked },
            React.createElement(LinkSmall, null)),
        !children ? React.createElement(Heading, { as: "h3" }, title) : children,
        React.createElement(ReactTooltip, { id: id, effect: "solid", arrowColor: "transparent", offset: { top: -5 }, className: classes.tooltip },
            React.createElement("div", { className: classes.tooltipContent },
                copied && React.createElement(ConfirmSmall, null),
                copied ? 'Copied' : 'Copy Link'))));
};
//# sourceMappingURL=AnchoredTitle.js.map