@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
121 lines • 8.47 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var UpTooltip_1 = require("./UpTooltip");
var Ligne_1 = require("../Ligne");
var Panel_1 = require("../../Containers/Panel");
var stories_1 = require("../../../Common/stories");
var addon_knobs_1 = require("@storybook/addon-knobs");
var __1 = require("../../..");
var typestyle_1 = require("typestyle");
var __2 = require("../../..");
var Paragraph_1 = require("../Paragraph");
exports.default = {
title: 'Components/Display/UpTooltip',
decorators: [addon_knobs_1.withKnobs, stories_1.getRootContainer('UpTooltip')],
component: UpTooltip_1.UpTooltip
};
var TooltipRenderer = (React.createElement(Paragraph_1.default, { className: typestyle_1.style({ padding: '10px' }), margin: 'none', paragraphSize: 'small' }, "For more info, please visit our product website..."));
var UpLigneStyleContent = typestyle_1.style({
fontWeight: 'bold',
color: '#fff !important',
backgroundColor: '#F59100',
padding: '5px',
margin: '5px'
});
exports.General = function () { return (React.createElement(React.Fragment, null,
React.createElement(Panel_1.default, { type: 'primary' },
"Panel Type is Light (Default Type)",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, type: 'light' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))),
React.createElement(Panel_1.default, { type: 'danger' },
"Panel Type is Danger",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, type: 'danger' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))),
React.createElement(Panel_1.default, { type: 'default' },
"Panel Type is Default",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, type: 'default' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))),
React.createElement(Panel_1.default, { type: 'error' },
"Panel Type is Error",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, type: 'error' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))),
React.createElement(Panel_1.default, { type: 'info' },
"Panel Type is Info",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, type: 'info' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))),
React.createElement(Panel_1.default, { type: 'primary' },
"Panel Type is Primary",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, type: 'primary' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))),
React.createElement(Panel_1.default, { type: 'success' },
"Panel Type is Success",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, type: 'success' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))),
React.createElement(Panel_1.default, { type: 'warning' },
"Panel Type is Warning",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, type: 'warning' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))))); };
exports.PlaceProperty = function () { return (React.createElement(React.Fragment, null,
React.createElement(Panel_1.default, { type: 'primary' },
"Tooltip with top position",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, place: 'top' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))),
React.createElement(Panel_1.default, { type: 'primary' },
"Tooltip with bottom position",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, place: 'bottom' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))),
React.createElement(Panel_1.default, { type: 'primary' },
"Tooltip with left position",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, place: 'left' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))),
React.createElement(Panel_1.default, { type: 'primary' },
"Tooltip with right position",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, place: 'right' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip"))))); };
exports.PlaceProperty.storyName = 'Change Position By Modifying Place Property';
exports.EffectProperty = function () { return (React.createElement(Panel_1.default, { type: 'primary' },
"Fixed Tooltip that does not follow mouse cursor",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, effect: 'solid' },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip")))); };
exports.EffectProperty.storyName = 'Display Fix Tooltip';
exports.WithCSSBreakLines = function () {
var TooltipContent = 'Text that ends with a new line.\n Text that ends with a new line.\n Text that ends with a new line';
return (React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipContent },
"Example of use of the UpTooltip component on Icon",
React.createElement(__1.UpSvgIcon, { width: 25, height: 25, iconName: 'alert-triangle', color: 'red', style: { cursor: 'pointer' } })));
};
exports.WithCSSBreakLines.storyName = 'Lines Break By Adding \\n Between Sentences ';
exports.MultilinePropertyLinesBreak = function () {
var TooltipContent = (React.createElement(Paragraph_1.default, { margin: 'none', paragraphSize: 'small' },
"Text that ends with a new line.",
React.createElement("br", null),
" Text that ends with a new line.",
React.createElement("br", null),
" Text that ends with a new line"));
return (React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipContent, multiline: true },
"Example of use of the UpTooltip component on button ",
' ',
React.createElement(__2.UpButton, { intent: 'primary' }, "Button")));
};
exports.MultilinePropertyLinesBreak.storyName = 'Lines Break By Passing Truthy Multiline Property';
exports.DisableTooltip = function () { return (React.createElement(Panel_1.default, { type: 'primary' },
"Disable",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, disable: true },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip")))); };
exports.DelayShowHideProperties = function () { return (React.createElement(Panel_1.default, { type: 'primary' },
"Show And Hide Tooltip Without Delay",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer, delayHide: 0, delayShow: 0 },
React.createElement(Ligne_1.default, { className: UpLigneStyleContent }, "UpTooltip")))); };
exports.DelayShowHideProperties.storyName = 'Show And Hide Tooltip Without Delay';
exports.OnTextAsFunction = function () { return (React.createElement(Panel_1.default, { type: 'primary' },
"Example of use of the UpTooltip component on Text",
React.createElement(UpTooltip_1.default, { title: 'Details', content: TooltipRenderer }, function (_a) {
var id = _a.id;
return (React.createElement(Ligne_1.default, { "data-for": id, "data-tip": 'tooltip', className: UpLigneStyleContent }, "UpTooltip"));
}))); };
exports.OnLink = function () { return (React.createElement(Panel_1.default, null,
"Example of use of the UpTooltip component ",
' ',
React.createElement(UpTooltip_1.default, { id: 'Tooltip', title: 'Details', content: TooltipRenderer }, "on Link"))); };
//# sourceMappingURL=index.stories.js.map