Static Site
This commit is contained in:
153
Static/package/dist/collection/components/tooltip/tooltip.css
vendored
Normal file
153
Static/package/dist/collection/components/tooltip/tooltip.css
vendored
Normal file
@ -0,0 +1,153 @@
|
||||
:root {
|
||||
--ifx-font-family: "Source Sans 3";
|
||||
font-family: var(--ifx-font-family, sans-serif);
|
||||
}
|
||||
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.tooltip__container {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
font-family: var(--ifx-font-family);
|
||||
}
|
||||
|
||||
.tooltip-extended, .tooltip-compact, .tooltip-dismissible {
|
||||
background-color: #1D1D1D;
|
||||
border: 1px solid black;
|
||||
z-index: 1080;
|
||||
display: none;
|
||||
transition: opacity 0.3s;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.visible.tooltip-extended, .visible.tooltip-compact, .visible.tooltip-dismissible {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tooltip-dismissible {
|
||||
min-width: 110px;
|
||||
width: auto;
|
||||
}
|
||||
.tooltip-dismissible .close-button {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
order: 2;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.tooltip-dismissible .tooltip-dismissible-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
flex-grow: 1;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.tooltip-dismissible .tooltip-dismissible-header,
|
||||
.tooltip-dismissible .tooltip-dismissible-body {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
line-height: 20px;
|
||||
}
|
||||
.tooltip-dismissible .tooltip-dismissible-header {
|
||||
font-weight: 600;
|
||||
}
|
||||
.tooltip-dismissible .tooltip-dismissible-body {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.tooltip-compact {
|
||||
padding: 4px 8px;
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tooltip-extended {
|
||||
min-width: 100px;
|
||||
width: auto;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
.tooltip-extended .extended_icon {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tooltip-extended .tooltip-extended-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
flex-grow: 1;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.tooltip-extended .tooltip-extended-header,
|
||||
.tooltip-extended .tooltip-extended-body {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
line-height: 20px;
|
||||
}
|
||||
.tooltip-extended .tooltip-extended-header {
|
||||
font-weight: 600;
|
||||
}
|
||||
.tooltip-extended .tooltip-extended-body {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.tooltip__container .tooltip-arrow-svg {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
[data-placement=top].tooltip-extended > .tooltip-arrow-svg, [data-placement=top].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=top].tooltip-compact > .tooltip-arrow-svg {
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: rotate(180deg) translateX(-50%);
|
||||
}
|
||||
[data-placement=top-start].tooltip-extended > .tooltip-arrow-svg, [data-placement=top-start].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=top-start].tooltip-compact > .tooltip-arrow-svg {
|
||||
bottom: -8px;
|
||||
left: 10px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
[data-placement=top-end].tooltip-extended > .tooltip-arrow-svg, [data-placement=top-end].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=top-end].tooltip-compact > .tooltip-arrow-svg {
|
||||
bottom: -8px;
|
||||
right: 10px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
[data-placement=bottom].tooltip-extended > .tooltip-arrow-svg, [data-placement=bottom].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=bottom].tooltip-compact > .tooltip-arrow-svg {
|
||||
top: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
[data-placement=bottom-start].tooltip-extended > .tooltip-arrow-svg, [data-placement=bottom-start].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=bottom-start].tooltip-compact > .tooltip-arrow-svg {
|
||||
top: -8px;
|
||||
left: 10px;
|
||||
}
|
||||
[data-placement=bottom-end].tooltip-extended > .tooltip-arrow-svg, [data-placement=bottom-end].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=bottom-end].tooltip-compact > .tooltip-arrow-svg {
|
||||
top: -8px;
|
||||
right: 10px;
|
||||
}
|
||||
[data-placement=left].tooltip-extended > .tooltip-arrow-svg, [data-placement=left].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=left].tooltip-compact > .tooltip-arrow-svg {
|
||||
right: -4px;
|
||||
top: 50%;
|
||||
transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
}
|
||||
[data-placement=right].tooltip-extended > .tooltip-arrow-svg, [data-placement=right].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=right].tooltip-compact > .tooltip-arrow-svg {
|
||||
left: -4px;
|
||||
top: 50%;
|
||||
transform: rotate(270deg) translateY(-50%) translateX(50%);
|
||||
}
|
||||
19
Static/package/dist/collection/components/tooltip/tooltip.e2e.js
vendored
Normal file
19
Static/package/dist/collection/components/tooltip/tooltip.e2e.js
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
import { newE2EPage } from "@stencil/core/testing";
|
||||
describe('ifx-tooltip', () => {
|
||||
it('renders', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-tooltip></ifx-tooltip>');
|
||||
const element = await page.find('ifx-tooltip');
|
||||
expect(element).toHaveClass('hydrated');
|
||||
});
|
||||
it('renders tooltip when visible prop is set', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-tooltip></ifx-tooltip>');
|
||||
const component = await page.find('ifx-tooltip');
|
||||
component.setProperty('visible', true);
|
||||
await page.waitForChanges();
|
||||
const tooltipEl = await page.find('ifx-tooltip >>> .tooltip-compact');
|
||||
expect(tooltipEl).not.toBeNull();
|
||||
});
|
||||
});
|
||||
//# sourceMappingURL=tooltip.e2e.js.map
|
||||
1
Static/package/dist/collection/components/tooltip/tooltip.e2e.js.map
vendored
Normal file
1
Static/package/dist/collection/components/tooltip/tooltip.e2e.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"tooltip.e2e.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGnD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAE3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,6BAA6B,CAAC,CAAC;IAErD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC/C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAGH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,6BAA6B,CAAC,CAAC;IACrD,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAEjD,SAAS,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;EACnC,CAAC,CAAC,CAAC;AAGL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\n\ndescribe('ifx-tooltip', () => {\n\n it('renders', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-tooltip></ifx-tooltip>');\n\n const element = await page.find('ifx-tooltip');\n expect(element).toHaveClass('hydrated');\n });\n\n\n it('renders tooltip when visible prop is set', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-tooltip></ifx-tooltip>');\n const component = await page.find('ifx-tooltip');\n\n component.setProperty('visible', true);\n await page.waitForChanges();\n\n const tooltipEl = await page.find('ifx-tooltip >>> .tooltip-compact');\n expect(tooltipEl).not.toBeNull();\n });\n\n\n});\n\n"]}
|
||||
268
Static/package/dist/collection/components/tooltip/tooltip.js
vendored
Normal file
268
Static/package/dist/collection/components/tooltip/tooltip.js
vendored
Normal file
@ -0,0 +1,268 @@
|
||||
import { h } from "@stencil/core";
|
||||
import { createPopper } from "@popperjs/core";
|
||||
export class Tooltip {
|
||||
constructor() {
|
||||
this.popperInstance = null;
|
||||
this.onMouseEnter = () => {
|
||||
var _a, _b;
|
||||
// Enable the event listeners immediately
|
||||
(_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
|
||||
...options.modifiers,
|
||||
{ name: 'eventListeners', enabled: true },
|
||||
] })));
|
||||
// Initialize the popper instance
|
||||
this.initializePopper();
|
||||
// Make the tooltip visible
|
||||
this.tooltipVisible = true;
|
||||
this.tooltipEl.style.display = 'block';
|
||||
// Update the popper instance immediately after initialization
|
||||
(_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
|
||||
};
|
||||
this.onMouseLeave = () => {
|
||||
this.tooltipVisible = false;
|
||||
this.tooltipEl.style.display = 'none';
|
||||
};
|
||||
this.onClick = () => {
|
||||
var _a;
|
||||
if (this.variant.toLowerCase() === 'dismissible') {
|
||||
this.initializePopper();
|
||||
this.tooltipVisible = !this.tooltipVisible;
|
||||
this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';
|
||||
(_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
|
||||
}
|
||||
};
|
||||
this.tooltipVisible = false;
|
||||
this.header = '';
|
||||
this.text = '';
|
||||
this.position = 'auto';
|
||||
this.internalPosition = 'auto';
|
||||
this.variant = 'compact';
|
||||
this.icon = undefined;
|
||||
}
|
||||
componentWillLoad() {
|
||||
if (this.variant.toLowerCase().trim() === "") {
|
||||
this.variant = 'compact';
|
||||
}
|
||||
}
|
||||
initializePopper() {
|
||||
if (this.popperInstance)
|
||||
return;
|
||||
this.referenceEl = this.el;
|
||||
this.tooltipEl;
|
||||
if (this.variant.toLowerCase() === 'compact') {
|
||||
this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');
|
||||
}
|
||||
else if (this.variant.toLowerCase() === 'dismissible') {
|
||||
this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');
|
||||
}
|
||||
else {
|
||||
this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');
|
||||
}
|
||||
const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;
|
||||
// Set the internalPosition
|
||||
this.internalPosition = effectivePosition;
|
||||
if (this.tooltipEl && this.referenceEl) {
|
||||
this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {
|
||||
placement: this.internalPosition,
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'arrow',
|
||||
options: {
|
||||
element: '.tooltip-arrow-svg'
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
// Add this line to set the 'data-placement' attribute on the tooltip
|
||||
this.tooltipEl.setAttribute('data-placement', effectivePosition);
|
||||
}
|
||||
determineBestPosition() {
|
||||
// This is a simplified version, you can enhance this based on available viewport space.
|
||||
const rect = this.referenceEl.getBoundingClientRect();
|
||||
const yOffset = window.scrollY; // Get current scroll position
|
||||
const xOffset = window.scrollX; // Get current horizontal scroll position
|
||||
const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;
|
||||
const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;
|
||||
if (this.position === 'auto') {
|
||||
if (verticalHalfwayPoint > window.innerHeight / 2) {
|
||||
if (horizontalHalfwayPoint > window.innerWidth / 2) {
|
||||
return 'top-end';
|
||||
}
|
||||
else {
|
||||
return 'top-start';
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (horizontalHalfwayPoint > window.innerWidth / 2) {
|
||||
return 'bottom-end';
|
||||
}
|
||||
else {
|
||||
return 'bottom-start';
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
return this.position;
|
||||
}
|
||||
}
|
||||
positionChanged(newVal) {
|
||||
var _a;
|
||||
this.internalPosition = newVal;
|
||||
(_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
this.popperInstance = null; // Force re-initialization on next mouse enter
|
||||
}
|
||||
disconnectedCallback() {
|
||||
var _a;
|
||||
(_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
}
|
||||
render() {
|
||||
const tooltipDismissible = {
|
||||
'tooltip-dismissible': true,
|
||||
'visible': this.tooltipVisible,
|
||||
};
|
||||
const tooltipCompact = {
|
||||
'tooltip-compact': true,
|
||||
'visible': this.tooltipVisible,
|
||||
};
|
||||
const tooltipExtended = {
|
||||
'tooltip-extended': true,
|
||||
'visible': this.tooltipVisible,
|
||||
};
|
||||
const eventHandlers = this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended' ? {
|
||||
onMouseEnter: this.onMouseEnter,
|
||||
onMouseLeave: this.onMouseLeave,
|
||||
} : {
|
||||
onClick: this.onClick,
|
||||
};
|
||||
return (h("div", Object.assign({ "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, eventHandlers), h("slot", null), this.variant.toLowerCase() === 'dismissible' && h("div", { class: tooltipDismissible }, h("ifx-icon", { icon: "cross16", class: "close-button" }), h("div", { class: "tooltip-dismissible-content" }, this.header && h("div", { class: "tooltip-dismissible-header" }, this.header), h("div", { class: "tooltip-dismissible-body" }, this.text)), h("svg", { class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
|
||||
h("div", { class: tooltipCompact }, this.text, h("svg", { class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
|
||||
h("div", { class: tooltipExtended }, h("slot", { name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
|
||||
h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { class: "tooltip-extended-content" }, this.header && h("div", { class: "tooltip-extended-header" }, this.header), h("div", { class: "tooltip-extended-body" }, this.text)), h("svg", { class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
|
||||
}
|
||||
static get is() { return "ifx-tooltip"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["tooltip.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["tooltip.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"header": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "header",
|
||||
"reflect": false,
|
||||
"defaultValue": "''"
|
||||
},
|
||||
"text": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "text",
|
||||
"reflect": false,
|
||||
"defaultValue": "''"
|
||||
},
|
||||
"position": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto'",
|
||||
"resolved": "\"auto\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"right\" | \"top\" | \"top-end\" | \"top-start\"",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "position",
|
||||
"reflect": false,
|
||||
"defaultValue": "'auto'"
|
||||
},
|
||||
"variant": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "'compact' | 'dismissible' | 'extended'",
|
||||
"resolved": "\"compact\" | \"dismissible\" | \"extended\"",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "variant",
|
||||
"reflect": false,
|
||||
"defaultValue": "'compact'"
|
||||
},
|
||||
"icon": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "icon",
|
||||
"reflect": false
|
||||
}
|
||||
};
|
||||
}
|
||||
static get states() {
|
||||
return {
|
||||
"tooltipVisible": {},
|
||||
"internalPosition": {}
|
||||
};
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
static get watchers() {
|
||||
return [{
|
||||
"propName": "position",
|
||||
"methodName": "positionChanged"
|
||||
}];
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=tooltip.js.map
|
||||
1
Static/package/dist/collection/components/tooltip/tooltip.js.map
vendored
Normal file
1
Static/package/dist/collection/components/tooltip/tooltip.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
41
Static/package/dist/collection/components/tooltip/tooltip.stories.js
vendored
Normal file
41
Static/package/dist/collection/components/tooltip/tooltip.stories.js
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
import { icons } from "@infineon/infineon-icons";
|
||||
export default {
|
||||
title: "Components/Tooltip",
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
header: "Tooltip headline",
|
||||
text: "Hi, I'm a tooltip",
|
||||
position: 'auto',
|
||||
variant: 'compact',
|
||||
icon: "c-info-24",
|
||||
},
|
||||
argTypes: {
|
||||
icon: {
|
||||
options: Object.values(icons).map(i => i['name']),
|
||||
control: { type: 'select' },
|
||||
},
|
||||
position: {
|
||||
options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],
|
||||
control: { type: 'radio' }
|
||||
},
|
||||
variant: {
|
||||
options: ['compact', 'dismissible', 'extended'],
|
||||
control: { type: 'radio' }
|
||||
},
|
||||
header: { control: 'text', if: { arg: 'variant', neq: 'compact' } }
|
||||
}
|
||||
};
|
||||
const DefaultTemplate = ({ header, text, variant, position, icon }) => {
|
||||
const element = document.createElement('ifx-tooltip');
|
||||
if (variant === 'dismissible' || variant === 'extended') {
|
||||
element.setAttribute('header', header);
|
||||
}
|
||||
element.setAttribute('text', text);
|
||||
element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);
|
||||
element.setAttribute('position', position);
|
||||
element.setAttribute('icon', icon);
|
||||
element.textContent = "I'm the tooltip reference element - Please hover me"; // Set content for the reference element
|
||||
return element;
|
||||
};
|
||||
export const Default = DefaultTemplate.bind({});
|
||||
//# sourceMappingURL=tooltip.stories.js.map
|
||||
1
Static/package/dist/collection/components/tooltip/tooltip.stories.js.map
vendored
Normal file
1
Static/package/dist/collection/components/tooltip/tooltip.stories.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,IAAI,EAAE;IACJ,MAAM,EAAE,kBAAkB;IAC1B,IAAI,EAAE,mBAAmB;IACzB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,WAAW;GAGlB;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC;MACzG,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,OAAO,EAAE;MACP,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,CAAC;MAC/C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;GACpE;CAEF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE;EACpE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EACtD,IAAI,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,UAAU,EAAE;IACvD,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;GACxC;EACD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;EACnC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;EAC/E,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;EAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;EAEnC,OAAO,CAAC,WAAW,GAAG,qDAAqD,CAAC,CAAC,wCAAwC;EAErH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAA;AAGD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons'\n\nexport default {\n title: \"Components/Tooltip\",\n tags: ['autodocs'],\n args: {\n header: \"Tooltip headline\",\n text: \"Hi, I'm a tooltip\",\n position: 'auto',\n variant: 'compact',\n icon: \"c-info-24\",\n\n\n },\n argTypes: {\n icon: {\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n },\n position: {\n options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],\n control: { type: 'radio' }\n },\n variant: {\n options: ['compact', 'dismissible', 'extended'],\n control: { type: 'radio' }\n },\n header: { control: 'text', if: { arg: 'variant', neq: 'compact' } }\n }\n\n};\n\n\nconst DefaultTemplate = ({ header, text, variant, position, icon }) => {\n const element = document.createElement('ifx-tooltip');\n if (variant === 'dismissible' || variant === 'extended') {\n element.setAttribute('header', header);\n }\n element.setAttribute('text', text);\n element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);\n element.setAttribute('position', position);\n element.setAttribute('icon', icon);\n\n element.textContent = \"I'm the tooltip reference element - Please hover me\"; // Set content for the reference element\n\n return element;\n}\n\n\nexport const Default = DefaultTemplate.bind({});\n\n"]}
|
||||
Reference in New Issue
Block a user