chore(sb-8): fix story for tooltip v3

projects/fusion-ui/components/tooltip/v3/tooltip.component.stories.ts

@@ -0,0 +1,145 @@
+import {StoryFn, Meta} from '@storybook/angular';
+import {moduleMetadata} from '@storybook/angular';
+import {CommonModule} from '@angular/common';
+import {TooltipContentComponent, TooltipModule} from './';
+import {TooltipComponentStyleConfiguration, TooltipPosition} from '@ironsource/fusion-ui/components/tooltip/common/base';
+import {dedent} from 'ts-dedent';
+
+export default {
+    title: 'V3/Components/Tooltip/Tooltip',
+    component: TooltipContentComponent,
+    decorators: [
+        moduleMetadata({
+            declarations: [],
+            imports: [CommonModule, TooltipModule]
+        })
+    ],
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: dedent`**Tooltip component** Use tooltips to showcase additional information to help users understand what is going on in a particular section of our planetary system.`
+            }
+        }
+    }
+} as Meta<TooltipContentComponent>;
+
+const TooltipTemplate: StoryFn<TooltipContentComponent> = (args: TooltipContentComponent) => ({
+    props: args,
+    template: `<fusion-tooltip-content style="position: unset;" [tooltipTextContent]="tooltipTextContent" [tooltipPositionClass]="tooltipPositionClass" [tooltipStyleConfiguration]="tooltipStyleConfiguration"></fusion-tooltip-content>`
+});
+
+export const Default = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'This is a single line tooltip with no wrapping text'
+    }
+};
+
+export const Top = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'This is a single line tooltip with no wrapping text',
+        tooltipPositionClass: TooltipPosition.Top
+    }
+};
+
+export const TopLeft = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'This is a single line tooltip with no wrapping text',
+        tooltipPositionClass: TooltipPosition.TopLeft
+    }
+};
+
+export const TopRight = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'This is a single line tooltip with no wrapping text',
+        tooltipPositionClass: TooltipPosition.TopRight
+    }
+};
+
+export const Bottom = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'This is a single line tooltip with no wrapping text',
+        tooltipPositionClass: TooltipPosition.Bottom
+    }
+};
+
+export const BottomLeft = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'This is a single line tooltip with no wrapping text',
+        tooltipPositionClass: TooltipPosition.BottomLeft
+    }
+};
+
+export const BottomRight = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'This is a single line tooltip with no wrapping text',
+        tooltipPositionClass: TooltipPosition.BottomRight
+    }
+};
+
+export const Left = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'This is a single line tooltip with no wrapping text',
+        tooltipPositionClass: TooltipPosition.Left
+    }
+};
+
+export const Right = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'This is a single line tooltip with no wrapping text',
+        tooltipPositionClass: TooltipPosition.Right
+    }
+};
+
+export const WithCustomWidth = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'Well done! You successfully read this alert message.',
+        tooltipStyleConfiguration: {
+            width: '150px'
+        } as TooltipComponentStyleConfiguration
+    }
+};
+
+export const WithCustomWidthAndContentCentered = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'Well done! You successfully read this alert message.',
+        tooltipStyleConfiguration: {
+            width: '150px',
+            'text-align': 'center'
+        } as TooltipComponentStyleConfiguration
+    }
+};
+
+export const WithCustomBackground = {
+    render: TooltipTemplate,
+
+    args: {
+        tooltipTextContent: 'Well done! You successfully read this alert message.',
+        tooltipStyleConfiguration: {
+            width: '150px',
+            backgroundColor: '#3083FF'
+        } as TooltipComponentStyleConfiguration
+    }
+};

projects/fusion-ui/components/tooltip/v3/tooltip.implementation.stories.ts

@@ -0,0 +1,248 @@
+import {StoryFn, Meta} from '@storybook/angular';
+import {moduleMetadata} from '@storybook/angular';
+import {CommonModule} from '@angular/common';
+import {TooltipComponent, TooltipModule} from './';
+import {dedent} from 'ts-dedent';
+
+export default {
+    title: 'V3/Components/Tooltip/Implementation',
+    component: TooltipComponent,
+    decorators: [
+        moduleMetadata({
+            declarations: [],
+            imports: [CommonModule, TooltipModule]
+        })
+    ],
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: dedent`**Tooltip directive** Use directive ***[fusionTooltip]*** to set tooltip text for element.
+                If element has class mane 'truncate', but element content entered to place, tooltip will not shown.
+
+                Position will calculated automatically`
+            }
+        },
+        layout: 'centered'
+    },
+    args: {
+        fusionTooltip: 'Well done! You successfully read this alert message'
+    }
+} as Meta<TooltipComponent>;
+
+const TooltipTemplate: StoryFn<TooltipComponent> = (args: TooltipComponent) => ({
+    props: args,
+    template: `
+<style>
+    .truncate{
+       width: 100%;
+       display: inline-block;
+       white-space: nowrap;
+       overflow: hidden !important;
+       text-overflow: ellipsis;
+    }
+</style>
+<div class="truncate" [fusionTooltip]="fusionTooltip" style="width: 100px;">Element with tooltip</div>
+`
+});
+
+export const Directive = {
+    render: TooltipTemplate,
+
+    parameters: {
+        docs: {
+            source: {
+                language: 'typescript',
+                code: dedent`
+    import { Component } from '@angular/core';
+    import { TooltipModule } from '@ironsource/fusion-ui/components/tooltip/v3';
+
+    @Component({
+      selector: 'fusion-story-wrapper',
+      template: \`<div [fusionTooltip]="tooltipText" style="width: max-content; margin: auto;">Element with tooltip</div>\`,
+      standalone: true,
+      imports: [TooltipModule],
+    })
+    export class FusionStoryWrapperComponent {
+      tooltipText = 'Well done! You successfully read this alert message';
+    }
+    `,
+                format: true,
+                type: 'code'
+            }
+        }
+    }
+};
+
+// endregion
+
+// region Inline
+const TooltipInlineTemplate: StoryFn<TooltipComponent> = (args: TooltipComponent) => ({
+    props: args,
+    template: `
+<fusion-tooltip [tooltipConfiguration]="tooltipConfiguration">
+    <div class="fusionTooltipTrigger">
+        <div>Element with tooltip</div>
+    </div>
+    <div class="fusionTooltipContent">
+        <div style="margin-bottom: 5px; font-size: 14px">Tooltip title</div>
+        <div>{{fusionTooltip}}</div>
+    </div>
+</fusion-tooltip>
+`
+});
+
+export const Inline = {
+    render: TooltipInlineTemplate,
+
+    parameters: {
+        docs: {
+            description: {
+                story: dedent`**Tooltip component** Use ***TooltipComponent*** (<fusion-tooltip>). In this case you can put in tooltip ***any*** content.
+    * Inner element with class ***"fusionTooltipTrigger"*** has trigger for tooltip.
+    * Inner element with class ***"fusionTooltipContent"*** has tooltip content.
+    `
+            },
+            source: {
+                language: 'typescript',
+                code: dedent`
+    import { Component } from '@angular/core';
+    import { TooltipModule } from '@ironsource/fusion-ui/components/tooltip/v3';
+
+    @Component({
+      selector: 'fusion-story-wrapper',
+      template: \`<div style="width:150px; margin:auto; margin-top: 100px"><fusion-tooltip>
+        <div class="fusionTooltipTrigger">
+            <div>Element with tooltip</div>
+        </div>
+        <div class="fusionTooltipContent">
+            <div style="margin-bottom: 5px; font-size: 14px">Tooltip title</div>
+            <div>Well done! You successfully read this alert message</div>
+        </div>
+    </fusion-tooltip></div>\`,
+      standalone: true,
+      imports: [TooltipModule],
+    })
+    export class FusionStoryWrapperComponent {
+      tooltipText = 'Well done! You successfully read this alert message';
+    }
+    `,
+                format: true,
+                type: 'code'
+            }
+        }
+    }
+};
+
+const TooltipInlineWithLinkTemplate: StoryFn<TooltipComponent> = (args: TooltipComponent) => ({
+    props: args,
+    template: `
+<fusion-tooltip [tooltipConfiguration]="tooltipConfiguration">
+    <div class="fusionTooltipTrigger">
+        <div>Element with tooltip</div>
+    </div>
+    <div class="fusionTooltipContent">
+        <div style="margin-bottom: 5px; font-size: 14px">Tooltip title</div>
+        <div>{{fusionTooltip}} <a href="https://fusion.ironsrc.net/" target="_blank" style="color: #ffffff">click me</a></div>
+    </div>
+</fusion-tooltip>
+`
+});
+
+export const InlinePreventToClose = {
+    render: TooltipInlineWithLinkTemplate,
+
+    args: {
+        tooltipConfiguration: {
+            preventTooltipToClose: true
+        }
+    },
+
+    parameters: {
+        docs: {
+            description: {
+                story: dedent`**Tooltip component** with link in tooltip content
+
+                In this case need "prevent" hide tooltip on "tooltiped" element "mouseleave" event.
+                For this need to add to the tooltipConfiguration \`preventTooltipToClose: true\`
+                `
+            },
+            source: {
+                language: 'typescript',
+                code: dedent`
+    import { Component } from '@angular/core';
+    import { TooltipModule } from '@ironsource/fusion-ui/components/tooltip/v3';
+
+    @Component({
+      selector: 'fusion-story-wrapper',
+      template: \`<div style="width:150px; margin:auto; margin-top: 100px">
+      <fusion-tooltip [tooltipConfiguration]="{preventTooltipToClose: true}">
+        <div class="fusionTooltipTrigger">
+            <div>Element with tooltip</div>
+        </div>
+        <div class="fusionTooltipContent">
+            <div style="margin-bottom: 5px; font-size: 14px">Tooltip title</div>
+            <div>Well done! You successfully read this alert message <a href="https://fusion.ironsrc.net/" target="_blank" style="color: #ffffff">click me</a></div>
+        </div>
+    </fusion-tooltip>
+    </div>\`,
+      standalone: true,
+      imports: [TooltipModule],
+    })
+    export class FusionStoryWrapperComponent {
+      tooltipText = 'Well done! You successfully read this alert message';
+    }
+    `,
+                format: true,
+                type: 'code'
+            }
+        }
+    }
+};
+
+export const InlineCustomization = {
+    render: TooltipInlineTemplate,
+
+    args: {
+        tooltipConfiguration: {
+            backgroundColor: '#3083FF'
+        }
+    },
+
+    parameters: {
+        docs: {
+            description: {
+                story: dedent`**Tooltip customization** Use ***[tooltipConfiguration]*** for change tooltip default background color`
+            },
+            source: {
+                language: 'typescript',
+                code: dedent`
+    import { Component } from '@angular/core';
+    import { TooltipModule } from '@ironsource/fusion-ui/components/tooltip/v3';
+
+    @Component({
+      selector: 'fusion-story-wrapper',
+      template: \`<div style="width:150px; margin:auto; margin-top: 100px">
+        <fusion-tooltip [tooltipConfiguration]="{backgroundColor: '#3083FF'}">
+        <div class="fusionTooltipTrigger">
+            <div>Element with tooltip</div>
+        </div>
+        <div class="fusionTooltipContent">
+            <div style="margin-bottom: 5px; font-size: 14px">Tooltip title</div>
+            <div>Well done! You successfully read this alert message</div>
+        </div>
+      </fusion-tooltip>
+    </div>\`,
+      standalone: true,
+      imports: [TooltipModule],
+    })
+    export class FusionStoryWrapperComponent {
+      tooltipText = 'Well done! You successfully read this alert message';
+    }
+    `,
+                format: true,
+                type: 'code'
+            }
+        }
+    }
+};