feat(storybook): add tooltip bubble docs

packages/ui-library/src/components/feedback/tooltip/index.stories.ts

@@ -230,11 +230,10 @@ export const Offset = () => {
 
   `;
 };
-
 /**
  * ## Dependencies
  * ### Tooltip Bubble
- * The Tooltip component makes use of the Tooltip Bubble component. For more information have a look at the [Tooltip Bubble](?path=/docs/design-system-web-components-feedback-tooltip-tooltipbubble--docs) component.
+ * The Tooltip component makes use of the Tooltip Bubble component. For more information have a look at the [Tooltip Bubble](?path=/docs/design-system-web-components-feedback-tooltip-tooltip-bubble--docs) component.
  */
 
 export const TooltipBubble = () => {

packages/ui-library/src/components/feedback/tooltip/index.ts

@@ -3,10 +3,9 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { Placement as PlacementType } from '@floating-ui/dom';
 import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
 import { tooltipPosition } from './tooltip-position';
-import { BlrTooltipBubbleRenderFunction } from './tooltip-bubble/renderFunction';
 import { styleCustom } from './index.css';
-
 import { TAG_NAME } from './renderFunction';
+import { BlrTooltipBubbleRenderFunction } from './tooltip-bubble/renderFunction';
 
 const enterEvents = ['pointerenter', 'focus'];
 const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];

packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts

@@ -1,5 +1,5 @@
-import { typeSafeNestedCss } from "../../../../utils/nested-typesafe-css-literals";
 import { renderThemedCssStrings } from "../../../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss } from "../../../../utils/nested-typesafe-css-literals";
 
 export const { tokenizedLight: light, tokenizedDark: dark } = renderThemedCssStrings((componentTokens) => {
   const { Tooltip } = componentTokens.Feedback;

packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts

@@ -1,23 +1,22 @@
 import { html } from 'lit';
+
+import '../../../../index';
 import { BlrTooltipBubbleType } from '.';
-import { BlrTooltipBubbleRenderFunction } from './renderFunction';
-import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 
-const sharedStyles = html`
-  <style>
-    .wrapper {
-      margin: 1.25rem;
-    }
-  </style>
-`;
+import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
+import { BlrTooltipBubbleRenderFunction } from './renderFunction';
 
 export default {
-  title: 'Design System/Web Components/Feedback/Tooltip/TooltipBubble',
+  title: 'Design System/Web Components/Feedback/Tooltip/Tooltip Bubble',
   argTypes: {
     theme: {
       options: Themes,
       control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
     },
+
     elevation: {
       description: 'Choose if the component should be elevated.',
       control: { type: 'boolean' },
@@ -39,114 +38,97 @@ export default {
         category: 'Appearance',
       },
     },
-    static: {
-      description:
-        'Select if the component position should be static or dynamic when used inside the Tooltip component with Floating UI.',
-      control: { type: 'boolean' },
-      table: {
-        category: 'Appearance',
-      },
-    },
     message: {
       description: 'Enter the message the component should have.',
       control: { type: 'text' },
       table: {
         category: 'Content / Settings',
       },
     },
+    static: {
+      description:
+        'Select if the component position should be static or dynamic when used inside the Tooltip component with Floating UI.',
+      control: { type: 'boolean' },
+      table: {
+        category: 'Technical Attributes',
+      },
+    },
   },
+
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A126744&mode=dev',
+    },
     viewMode: 'docs',
     layout: 'centered',
     docs: {
       description: {
         component: `
-  <Markdown>
-  The Tooltip Bubble component, distinguished from the Tooltip counterpart by its independence from the Floating UI library, incorporates essential features such as customizable shape, pointing arrow, message content, and visibility properties, serving as a crucial element primarily consumed by the Tooltip component, along with other components that don't require advanced floating UI features, such as, for example, the Slider component.
+  <markdown>
+  The Tooltip Bubble is a part of the Tooltip component. It incorporates essential features such as shape, pointing arrow, message content, elevation and visibility properties.
 
   - [**Appearance**](#appearance)
     - [**Elevation**](#elevation)  
     - [**Has Arrow**](#has-arrow)
-  - [**Content / Settings**](#content--settings)
-    - [**Message**](#message)
-  </Markdown>
+
+  </markdown>
 `,
       },
     },
   },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A126744&mode=dev',
-    },
-  },
 };
 
-export const TooltipBubble = (params: BlrTooltipBubbleType) => html`<div style="position: relative; height: 200px;">
+export const TooltipBubble = (params: BlrTooltipBubbleType) => html`<div style="position: relative; height: 100px;">
   ${BlrTooltipBubbleRenderFunction(params)}
 </div>`;
 
 const defaultParams: BlrTooltipBubbleType = {
   theme: 'Light',
   elevation: true,
   hasArrow: true,
-  message: 'Tooltip text comes here Tooltip text comes here',
   visible: true,
+  message: 'Message-text',
   static: true,
 };
 
 TooltipBubble.args = defaultParams;
 
 /**
  * ## Appearance
- * ### Elevation
- * With elevation, the Tooltip component can be given a lifted appearance with subtle shadows or kept flat for a more minimalist design.
+* ### Elevation
+With elevation, the Tooltip Bubble component can be given a lifted appearance with subtle shadows or kept flat for a more minimalist design. 
  */
 
 export const Elevation = () => {
   return html`
-    ${sharedStyles}
     ${TooltipBubble({
       ...defaultParams,
+      message: 'With elevation',
     })}
     ${TooltipBubble({
       ...defaultParams,
       elevation: false,
+      message: 'Without elevation',
     })}
   `;
 };
-
 Elevation.story = { name: ' ' };
 
 /**
- * The Tooltip component can have a pointing arrow, directing the user's attention to the specific element, or appear as a self-contained box.
+ * The Tooltip Bubble component can have a pointing arrow, directing the user's attention to the specific element, or appear as a self-contained box.
  */
 
 export const HasArrow = () => {
   return html`
-    ${sharedStyles}
     ${TooltipBubble({
       ...defaultParams,
+      message: 'With arrow',
     })}
     ${TooltipBubble({
       ...defaultParams,
       hasArrow: false,
+      message: 'Without arrow',
     })}
   `;
 };
-
-/**
- * ## Content / Settings
- * ### Message
- * The Tooltip component can incorporate a message.
- */
-export const Message = () => {
-  return html`
-    ${sharedStyles}
-    ${TooltipBubble({
-      ...defaultParams,
-    })}
-  `;
-};
-
-Message.story = { name: ' ' };

packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts

@@ -1,10 +1,9 @@
 import { LitElement, css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { light, dark } from './index.css';
-import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
 import { classMap } from 'lit/directives/class-map.js';
-
 import { TAG_NAME } from './renderFunction';
+import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
 
 @customElement(TAG_NAME)
 export class BlrTooltipBubble extends LitElement {