@stokr/components-library
Version:
STOKR - Components Library
299 lines (288 loc) • 8.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithHTML = exports.RedArrow = exports.Positions = exports.NoMargins = exports.MultipleTooltips = exports.LongText = exports.InContext = exports.Disabled = exports.Default = exports.CustomChildren = exports.ArrowColorComparison = void 0;
var _react = _interopRequireDefault(require("react"));
var _InfoIcon = require("./InfoIcon");
var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
var _global = _interopRequireDefault(require("../../styles/global"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
title: 'Components Library/Icons/Info Icon',
component: _InfoIcon.InfoIcon,
argTypes: {
title: {
type: 'string',
description: 'Text content to display in the tooltip',
control: 'text'
},
html: {
type: 'string',
description: 'HTML content to display in the tooltip (takes precedence over title)',
control: 'text'
},
position: {
type: 'select',
options: ['top', 'bottom', 'left', 'right'],
description: 'Position of the tooltip relative to the icon',
control: 'select'
},
noMargin: {
type: 'boolean',
description: 'Remove all margins from the container',
control: 'boolean'
},
noMarginLeft: {
type: 'boolean',
description: 'Remove left margin from the container',
control: 'boolean'
},
noMarginRight: {
type: 'boolean',
description: 'Remove right margin from the container',
control: 'boolean'
},
noIcon: {
type: 'boolean',
description: 'Hide the info icon and show children instead',
control: 'boolean'
},
disabled: {
type: 'boolean',
description: 'Disable the tooltip',
control: 'boolean'
},
fullWidth: {
type: 'boolean',
description: 'Make the container full width',
control: 'boolean'
}
},
decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null)))]
}; // Default example
const Default = exports.Default = {
args: {
title: 'This is a helpful tooltip with some information',
position: 'bottom'
}
};
// All positions
const Positions = () => /*#__PURE__*/_react.default.createElement("div", {
style: {
display: 'flex',
gap: '40px',
flexWrap: 'wrap',
padding: '60px'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
textAlign: 'center'
}
}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
position: "top",
title: "Tooltip on top"
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: '10px',
fontSize: '12px'
}
}, "Top")), /*#__PURE__*/_react.default.createElement("div", {
style: {
textAlign: 'center'
}
}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
position: "bottom",
title: "Tooltip on bottom"
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: '10px',
fontSize: '12px'
}
}, "Bottom")), /*#__PURE__*/_react.default.createElement("div", {
style: {
textAlign: 'center'
}
}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
position: "left",
title: "Tooltip on left"
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: '10px',
fontSize: '12px'
}
}, "Left")), /*#__PURE__*/_react.default.createElement("div", {
style: {
textAlign: 'center'
}
}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
position: "right",
title: "Tooltip on right"
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: '10px',
fontSize: '12px'
}
}, "Right")));
// With HTML content
exports.Positions = Positions;
const WithHTML = exports.WithHTML = {
args: {
html: '<strong>Bold text</strong> and <em>italic text</em><br/>With a line break',
position: 'bottom'
}
};
// With long text
const LongText = exports.LongText = {
args: {
title: 'This is a very long tooltip text that demonstrates how the tooltip handles longer content. It should wrap nicely and maintain good readability.',
position: 'bottom'
}
};
// No margins
const NoMargins = () => /*#__PURE__*/_react.default.createElement("div", {
style: {
display: 'flex',
gap: '20px',
alignItems: 'center'
}
}, /*#__PURE__*/_react.default.createElement("span", null, "Text before"), /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
title: "No margin",
noMargin: true
}), /*#__PURE__*/_react.default.createElement("span", null, "Text after"));
// Custom children (no icon)
exports.NoMargins = NoMargins;
const CustomChildren = exports.CustomChildren = {
args: {
title: 'Custom content instead of icon',
noIcon: true,
children: /*#__PURE__*/_react.default.createElement("span", {
style: {
textDecoration: 'underline'
}
}, "Hover me")
}
};
// Disabled
const Disabled = exports.Disabled = {
args: {
title: 'This tooltip is disabled',
disabled: true
}
};
// In context example
const InContext = () => /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '40px',
maxWidth: '500px'
}
}, /*#__PURE__*/_react.default.createElement("h3", {
style: {
display: 'inline-flex',
alignItems: 'center',
gap: '8px'
}
}, "Investment Amount", /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
title: "Enter the amount you wish to invest in this project. Minimum investment is \u20AC1,000.",
position: "top"
})), /*#__PURE__*/_react.default.createElement("input", {
type: "number",
placeholder: "Enter amount",
style: {
marginTop: '10px',
padding: '8px',
width: '100%',
border: '1px solid #ccc',
borderRadius: '4px'
}
}), /*#__PURE__*/_react.default.createElement("p", {
style: {
marginTop: '20px',
fontSize: '14px',
color: '#666'
}
}, "Need help?", ' ', /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
title: "Contact our support team for assistance",
noMarginLeft: true,
noMarginRight: true
})));
// Multiple tooltips
exports.InContext = InContext;
const MultipleTooltips = () => /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '40px'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: '20px'
}
}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
title: "First tooltip",
position: "top"
}), /*#__PURE__*/_react.default.createElement("span", {
style: {
marginLeft: '10px'
}
}, "First example")), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: '20px'
}
}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
title: "Second tooltip",
position: "bottom"
}), /*#__PURE__*/_react.default.createElement("span", {
style: {
marginLeft: '10px'
}
}, "Second example")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
html: "<strong>HTML</strong> tooltip with <em>formatting</em>",
position: "right"
}), /*#__PURE__*/_react.default.createElement("span", {
style: {
marginLeft: '10px'
}
}, "Third example with HTML")));
// Custom arrow color (red)
exports.MultipleTooltips = MultipleTooltips;
const RedArrow = exports.RedArrow = {
args: {
title: 'This tooltip has a red arrow instead of the default blue',
position: 'bottom',
arrowColor: '#ee220d' // Using red from colors
}
};
// Comparison: Blue vs Red arrow
const ArrowColorComparison = () => /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '40px',
display: 'flex',
gap: '40px',
alignItems: 'center'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
textAlign: 'center'
}
}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
title: "Default blue arrow",
position: "bottom"
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: '10px',
fontSize: '12px'
}
}, "Blue (default)")), /*#__PURE__*/_react.default.createElement("div", {
style: {
textAlign: 'center'
}
}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
title: "Custom red arrow",
position: "bottom",
arrowColor: "#ee220d"
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: '10px',
fontSize: '12px'
}
}, "Red (custom)")));
exports.ArrowColorComparison = ArrowColorComparison;