From be70cb27750fe3e3b668c16cdfc2f81858b0f55b Mon Sep 17 00:00:00 2001
From: Barkley <barkley.taylor@accenture.com>
Date: Tue, 23 Jan 2024 14:02:18 +0100
Subject: [PATCH 1/5] feat(storybook): add tooltip bubble docs

---
 .../feedback/tooltip/index.stories.ts         |   4 +-
 .../src/components/feedback/tooltip/index.ts  |   2 +-
 .../tooltip/tooltip-bubble/index.stories.ts   |  38 -----
 .../tooltip-bubble/index.css.ts               |   4 +-
 .../tooltip-bubble/index.stories.ts           | 134 ++++++++++++++++++
 .../tooltip-bubble/index.test.ts              |   0
 .../tooltip-bubble/index.ts                   |   2 +-
 .../tooltip-bubble/indexReact.ts              |   0
 .../tooltip-bubble/renderFunction.ts          |   2 +-
 packages/ui-library/src/index.ts              |   2 +-
 10 files changed, 142 insertions(+), 46 deletions(-)
 delete mode 100644 packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts
 rename packages/ui-library/src/components/{feedback/tooltip => internal-components}/tooltip-bubble/index.css.ts (91%)
 create mode 100644 packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts
 rename packages/ui-library/src/components/{feedback/tooltip => internal-components}/tooltip-bubble/index.test.ts (100%)
 rename packages/ui-library/src/components/{feedback/tooltip => internal-components}/tooltip-bubble/index.ts (94%)
 rename packages/ui-library/src/components/{feedback/tooltip => internal-components}/tooltip-bubble/indexReact.ts (100%)
 rename packages/ui-library/src/components/{feedback/tooltip => internal-components}/tooltip-bubble/renderFunction.ts (71%)

diff --git a/packages/ui-library/src/components/feedback/tooltip/index.stories.ts b/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
index 2b845448c..bd23d453d 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
+++ b/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
@@ -8,13 +8,13 @@ import { tooltipPosition } from './tooltip-position';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { FormSizesType } from '../../../globals/types';
 import { Placement as PlacementType } from '@floating-ui/dom';
-import { BlrTooltipBubbleRenderFunction } from './tooltip-bubble/renderFunction';
 
 // this loads the all components instances and registers their html tags
 import '../../../index';
+import { BlrTooltipBubbleRenderFunction } from '../../internal-components/tooltip-bubble/renderFunction';
 
 export default {
-  title: 'Design System/Web Components/Feedback/Tooltip/Tooltip',
+  title: 'Design System/Web Components/Feedback/Tooltip',
   argTypes: {
     theme: {
       options: Themes,
diff --git a/packages/ui-library/src/components/feedback/tooltip/index.ts b/packages/ui-library/src/components/feedback/tooltip/index.ts
index e97dbef0f..10ed5a561 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.ts
+++ b/packages/ui-library/src/components/feedback/tooltip/index.ts
@@ -3,10 +3,10 @@ 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 '../../internal-components/tooltip-bubble/renderFunction';
 
 const enterEvents = ['pointerenter', 'focus'];
 const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts
deleted file mode 100644
index dbb03e2d2..000000000
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { html } from 'lit';
-import { BlrTooltipBubbleType } from '.';
-import { BlrTooltipBubbleRenderFunction } from './renderFunction';
-import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
-
-// this loads the all components instances and registers their html tags
-import '../../../../index';
-
-export default {
-  title: 'Design System/Web Components/Feedback/Tooltip/TooltipBubble',
-  argTypes: {
-    theme: {
-      options: Themes,
-      control: { type: 'select' },
-    },
-  },
-  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 BlrTooltipBubble = (params: BlrTooltipBubbleType) => html`<div style="position: relative; height: 200px;">
-  ${BlrTooltipBubbleRenderFunction(params)}
-</div>`;
-
-BlrTooltipBubble.storyName = 'Tooltip Bubble';
-
-const args: BlrTooltipBubbleType = {
-  theme: 'Light',
-  message: 'Tooltip text comes here Tooltip text comes here',
-  visible: true,
-  static: true,
-};
-
-BlrTooltipBubble.args = args;
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.css.ts
similarity index 91%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts
rename to packages/ui-library/src/components/internal-components/tooltip-bubble/index.css.ts
index 73e7daf9e..2e1ab21f3 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts
+++ b/packages/ui-library/src/components/internal-components/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";
+import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
 
 export const { tokenizedLight: light, tokenizedDark: dark } = renderThemedCssStrings((componentTokens) => {
   const { Tooltip } = componentTokens.Feedback;
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts
new file mode 100644
index 000000000..6a8ff0e7e
--- /dev/null
+++ b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts
@@ -0,0 +1,134 @@
+import { html } from 'lit';
+
+import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import '../../../index';
+import { BlrTooltipBubbleType } from '.';
+import { BlrTooltipBubbleRenderFunction } from './renderFunction';
+
+export default {
+  title: 'Design System/Web Components/Internal Components/Tooltip Bubble',
+  argTypes: {
+    theme: {
+      options: Themes,
+      control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
+    },
+
+    elevation: {
+      description: 'Choose if the component should be elevated.',
+      control: { type: 'boolean' },
+      table: {
+        category: 'Appearance',
+      },
+    },
+
+    hasArrow: {
+      description: 'Choose if component has an arrow, pointing to the related element.',
+      control: { type: 'boolean' },
+      table: {
+        category: 'Appearance',
+      },
+    },
+    visible: {
+      description: 'Toggles the visibility of the component.',
+      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 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)
+
+  </markdown>
+`,
+      },
+    },
+  },
+};
+
+export const TooltipBubble = (params: BlrTooltipBubbleType) => html`<div style="position: relative; height: 100px;">
+  ${BlrTooltipBubbleRenderFunction(params)}
+</div>`;
+
+const defaultParams: BlrTooltipBubbleType = {
+  theme: 'Light',
+  elevation: true,
+  hasArrow: true,
+  visible: true,
+  message: 'Message-text',
+  static: true,
+};
+
+TooltipBubble.args = defaultParams;
+
+/**
+ * ## Appearance
+* ### 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`
+    ${TooltipBubble({
+      ...defaultParams,
+      message: 'With elevation',
+    })}
+    ${TooltipBubble({
+      ...defaultParams,
+      elevation: false,
+      message: 'Without elevation',
+    })}
+  `;
+};
+Elevation.story = { name: ' ' };
+
+/**
+ * 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`
+    ${TooltipBubble({
+      ...defaultParams,
+      message: 'With arrow',
+    })}
+    ${TooltipBubble({
+      ...defaultParams,
+      hasArrow: false,
+      message: 'Without arrow',
+    })}
+  `;
+};
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.test.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.test.ts
similarity index 100%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.test.ts
rename to packages/ui-library/src/components/internal-components/tooltip-bubble/index.test.ts
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts
similarity index 94%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts
rename to packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts
index 1766730f8..f828a20bf 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts
+++ b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts
@@ -1,7 +1,7 @@
 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 { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { TAG_NAME } from './renderFunction';
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/indexReact.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/indexReact.ts
rename to packages/ui-library/src/components/internal-components/tooltip-bubble/indexReact.ts
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts
similarity index 71%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
rename to packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts
index fc1ba2675..e2ad848ff 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
+++ b/packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrTooltipBubbleType } from '.';
-import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-tooltip-bubble';
 
diff --git a/packages/ui-library/src/index.ts b/packages/ui-library/src/index.ts
index 7380f0e6e..c8c84f05e 100644
--- a/packages/ui-library/src/index.ts
+++ b/packages/ui-library/src/index.ts
@@ -6,7 +6,7 @@ export { BlrTextButton } from './components/actions/buttons/text-button';
 // Feedback
 export { BlrLoader } from './components/feedback/loader';
 
-export { BlrTooltipBubble } from './components/feedback/tooltip/tooltip-bubble';
+export { BlrTooltipBubble } from './components/internal-components/tooltip-bubble';
 
 export { BlrTooltip } from './components/feedback/tooltip';
 

From b896d9f01e8fcf13f3f3ce059f594b59326c29fa Mon Sep 17 00:00:00 2001
From: Barkley <barkley.taylor@accenture.com>
Date: Tue, 23 Jan 2024 15:51:54 +0100
Subject: [PATCH 2/5] fix(storybook): change structur

---
 .../src/components/feedback/tooltip/index.stories.ts       | 4 ++--
 .../ui-library/src/components/feedback/tooltip/index.ts    | 3 +--
 .../tooltip}/tooltip-bubble/index.css.ts                   | 4 ++--
 .../tooltip}/tooltip-bubble/index.stories.ts               | 7 ++++---
 .../tooltip}/tooltip-bubble/index.test.ts                  | 0
 .../tooltip}/tooltip-bubble/index.ts                       | 3 +--
 .../tooltip}/tooltip-bubble/indexReact.ts                  | 0
 .../tooltip}/tooltip-bubble/renderFunction.ts              | 2 +-
 packages/ui-library/src/index.ts                           | 2 +-
 9 files changed, 12 insertions(+), 13 deletions(-)
 rename packages/ui-library/src/components/{internal-components => feedback/tooltip}/tooltip-bubble/index.css.ts (91%)
 rename packages/ui-library/src/components/{internal-components => feedback/tooltip}/tooltip-bubble/index.stories.ts (94%)
 rename packages/ui-library/src/components/{internal-components => feedback/tooltip}/tooltip-bubble/index.test.ts (100%)
 rename packages/ui-library/src/components/{internal-components => feedback/tooltip}/tooltip-bubble/index.ts (94%)
 rename packages/ui-library/src/components/{internal-components => feedback/tooltip}/tooltip-bubble/indexReact.ts (100%)
 rename packages/ui-library/src/components/{internal-components => feedback/tooltip}/tooltip-bubble/renderFunction.ts (71%)

diff --git a/packages/ui-library/src/components/feedback/tooltip/index.stories.ts b/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
index bd23d453d..5c0a93041 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
+++ b/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
@@ -11,10 +11,10 @@ import { Placement as PlacementType } from '@floating-ui/dom';
 
 // this loads the all components instances and registers their html tags
 import '../../../index';
-import { BlrTooltipBubbleRenderFunction } from '../../internal-components/tooltip-bubble/renderFunction';
+import { BlrTooltipBubbleRenderFunction } from './tooltip-bubble/renderFunction';
 
 export default {
-  title: 'Design System/Web Components/Feedback/Tooltip',
+  title: 'Design System/Web Components/Feedback/Tooltip/Tooltip',
   argTypes: {
     theme: {
       options: Themes,
diff --git a/packages/ui-library/src/components/feedback/tooltip/index.ts b/packages/ui-library/src/components/feedback/tooltip/index.ts
index 10ed5a561..80f706126 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.ts
+++ b/packages/ui-library/src/components/feedback/tooltip/index.ts
@@ -4,9 +4,8 @@ import { Placement as PlacementType } from '@floating-ui/dom';
 import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
 import { tooltipPosition } from './tooltip-position';
 import { styleCustom } from './index.css';
-
 import { TAG_NAME } from './renderFunction';
-import { BlrTooltipBubbleRenderFunction } from '../../internal-components/tooltip-bubble/renderFunction';
+import { BlrTooltipBubbleRenderFunction } from './tooltip-bubble/renderFunction';
 
 const enterEvents = ['pointerenter', 'focus'];
 const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.css.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts
similarity index 91%
rename from packages/ui-library/src/components/internal-components/tooltip-bubble/index.css.ts
rename to packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts
index 2e1ab21f3..4f63db993 100644
--- a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.css.ts
+++ b/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 { 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;
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts
similarity index 94%
rename from packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts
rename to packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts
index 6a8ff0e7e..46e8880a9 100644
--- a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts
+++ b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts
@@ -1,12 +1,13 @@
 import { html } from 'lit';
 
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
-import '../../../index';
+import '../../../../index';
 import { BlrTooltipBubbleType } from '.';
+
+import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 import { BlrTooltipBubbleRenderFunction } from './renderFunction';
 
 export default {
-  title: 'Design System/Web Components/Internal Components/Tooltip Bubble',
+  title: 'Design System/Web Components/Feedback/Tooltip/Tooltip Bubble',
   argTypes: {
     theme: {
       options: Themes,
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.test.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.test.ts
similarity index 100%
rename from packages/ui-library/src/components/internal-components/tooltip-bubble/index.test.ts
rename to packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.test.ts
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts
similarity index 94%
rename from packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts
rename to packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts
index f828a20bf..53db30bf0 100644
--- a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts
+++ b/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 {
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/indexReact.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/internal-components/tooltip-bubble/indexReact.ts
rename to packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/indexReact.ts
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
similarity index 71%
rename from packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts
rename to packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
index e2ad848ff..fc1ba2675 100644
--- a/packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts
+++ b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrTooltipBubbleType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-tooltip-bubble';
 
diff --git a/packages/ui-library/src/index.ts b/packages/ui-library/src/index.ts
index c8c84f05e..7380f0e6e 100644
--- a/packages/ui-library/src/index.ts
+++ b/packages/ui-library/src/index.ts
@@ -6,7 +6,7 @@ export { BlrTextButton } from './components/actions/buttons/text-button';
 // Feedback
 export { BlrLoader } from './components/feedback/loader';
 
-export { BlrTooltipBubble } from './components/internal-components/tooltip-bubble';
+export { BlrTooltipBubble } from './components/feedback/tooltip/tooltip-bubble';
 
 export { BlrTooltip } from './components/feedback/tooltip';
 

From f11fdde6ce5213452bdd2ab294da61c1c11bc111 Mon Sep 17 00:00:00 2001
From: Barkley <barkley.taylor@accenture.com>
Date: Tue, 23 Jan 2024 14:02:18 +0100
Subject: [PATCH 3/5] feat(storybook): add tooltip bubble docs

---
 .../feedback/tooltip/index.stories.ts         |   2 +-
 .../src/components/feedback/tooltip/index.ts  |   2 +-
 .../tooltip-bubble/index.css.ts               |   4 +-
 .../tooltip-bubble/index.stories.ts           | 134 ++++++++++++++++++
 .../tooltip-bubble/index.test.ts              |   0
 .../tooltip-bubble/index.ts                   |   2 +-
 .../tooltip-bubble/indexReact.ts              |   0
 .../tooltip-bubble/renderFunction.ts          |   2 +-
 packages/ui-library/src/index.ts              |   2 +-
 9 files changed, 141 insertions(+), 7 deletions(-)
 rename packages/ui-library/src/components/{feedback/tooltip => internal-components}/tooltip-bubble/index.css.ts (91%)
 create mode 100644 packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts
 rename packages/ui-library/src/components/{feedback/tooltip => internal-components}/tooltip-bubble/index.test.ts (100%)
 rename packages/ui-library/src/components/{feedback/tooltip => internal-components}/tooltip-bubble/index.ts (94%)
 rename packages/ui-library/src/components/{feedback/tooltip => internal-components}/tooltip-bubble/indexReact.ts (100%)
 rename packages/ui-library/src/components/{feedback/tooltip => internal-components}/tooltip-bubble/renderFunction.ts (71%)

diff --git a/packages/ui-library/src/components/feedback/tooltip/index.stories.ts b/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
index a619a5d42..9510c2f18 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
+++ b/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
@@ -43,7 +43,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Feedback/Tooltip/Tooltip',
+  title: 'Design System/Web Components/Feedback/Tooltip',
   argTypes: {
     theme: {
       options: Themes,
diff --git a/packages/ui-library/src/components/feedback/tooltip/index.ts b/packages/ui-library/src/components/feedback/tooltip/index.ts
index e97dbef0f..10ed5a561 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.ts
+++ b/packages/ui-library/src/components/feedback/tooltip/index.ts
@@ -3,10 +3,10 @@ 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 '../../internal-components/tooltip-bubble/renderFunction';
 
 const enterEvents = ['pointerenter', 'focus'];
 const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.css.ts
similarity index 91%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts
rename to packages/ui-library/src/components/internal-components/tooltip-bubble/index.css.ts
index 73e7daf9e..2e1ab21f3 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts
+++ b/packages/ui-library/src/components/internal-components/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";
+import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
 
 export const { tokenizedLight: light, tokenizedDark: dark } = renderThemedCssStrings((componentTokens) => {
   const { Tooltip } = componentTokens.Feedback;
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts
new file mode 100644
index 000000000..6a8ff0e7e
--- /dev/null
+++ b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts
@@ -0,0 +1,134 @@
+import { html } from 'lit';
+
+import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import '../../../index';
+import { BlrTooltipBubbleType } from '.';
+import { BlrTooltipBubbleRenderFunction } from './renderFunction';
+
+export default {
+  title: 'Design System/Web Components/Internal Components/Tooltip Bubble',
+  argTypes: {
+    theme: {
+      options: Themes,
+      control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
+    },
+
+    elevation: {
+      description: 'Choose if the component should be elevated.',
+      control: { type: 'boolean' },
+      table: {
+        category: 'Appearance',
+      },
+    },
+
+    hasArrow: {
+      description: 'Choose if component has an arrow, pointing to the related element.',
+      control: { type: 'boolean' },
+      table: {
+        category: 'Appearance',
+      },
+    },
+    visible: {
+      description: 'Toggles the visibility of the component.',
+      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 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)
+
+  </markdown>
+`,
+      },
+    },
+  },
+};
+
+export const TooltipBubble = (params: BlrTooltipBubbleType) => html`<div style="position: relative; height: 100px;">
+  ${BlrTooltipBubbleRenderFunction(params)}
+</div>`;
+
+const defaultParams: BlrTooltipBubbleType = {
+  theme: 'Light',
+  elevation: true,
+  hasArrow: true,
+  visible: true,
+  message: 'Message-text',
+  static: true,
+};
+
+TooltipBubble.args = defaultParams;
+
+/**
+ * ## Appearance
+* ### 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`
+    ${TooltipBubble({
+      ...defaultParams,
+      message: 'With elevation',
+    })}
+    ${TooltipBubble({
+      ...defaultParams,
+      elevation: false,
+      message: 'Without elevation',
+    })}
+  `;
+};
+Elevation.story = { name: ' ' };
+
+/**
+ * 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`
+    ${TooltipBubble({
+      ...defaultParams,
+      message: 'With arrow',
+    })}
+    ${TooltipBubble({
+      ...defaultParams,
+      hasArrow: false,
+      message: 'Without arrow',
+    })}
+  `;
+};
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.test.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.test.ts
similarity index 100%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.test.ts
rename to packages/ui-library/src/components/internal-components/tooltip-bubble/index.test.ts
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts
similarity index 94%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts
rename to packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts
index 1766730f8..f828a20bf 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts
+++ b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts
@@ -1,7 +1,7 @@
 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 { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { TAG_NAME } from './renderFunction';
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/indexReact.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/indexReact.ts
rename to packages/ui-library/src/components/internal-components/tooltip-bubble/indexReact.ts
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts
similarity index 71%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
rename to packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts
index fc1ba2675..e2ad848ff 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
+++ b/packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrTooltipBubbleType } from '.';
-import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-tooltip-bubble';
 
diff --git a/packages/ui-library/src/index.ts b/packages/ui-library/src/index.ts
index 7380f0e6e..c8c84f05e 100644
--- a/packages/ui-library/src/index.ts
+++ b/packages/ui-library/src/index.ts
@@ -6,7 +6,7 @@ export { BlrTextButton } from './components/actions/buttons/text-button';
 // Feedback
 export { BlrLoader } from './components/feedback/loader';
 
-export { BlrTooltipBubble } from './components/feedback/tooltip/tooltip-bubble';
+export { BlrTooltipBubble } from './components/internal-components/tooltip-bubble';
 
 export { BlrTooltip } from './components/feedback/tooltip';
 

From 740f503c53ee15c650bbf4b629275aa59f53a175 Mon Sep 17 00:00:00 2001
From: Barkley <barkley.taylor@accenture.com>
Date: Tue, 23 Jan 2024 15:51:54 +0100
Subject: [PATCH 4/5] fix(storybook): change structur

---
 .../feedback/tooltip/index.stories.ts         |   2 +-
 .../src/components/feedback/tooltip/index.ts  |   3 +-
 .../tooltip}/tooltip-bubble/index.css.ts      |   4 +-
 .../tooltip/tooltip-bubble/index.stories.ts   |  88 +++++-------
 .../tooltip}/tooltip-bubble/index.test.ts     |   0
 .../tooltip}/tooltip-bubble/index.ts          |   3 +-
 .../tooltip}/tooltip-bubble/indexReact.ts     |   0
 .../tooltip}/tooltip-bubble/renderFunction.ts |   2 +-
 .../tooltip-bubble/index.stories.ts           | 134 ------------------
 packages/ui-library/src/index.ts              |   2 +-
 10 files changed, 42 insertions(+), 196 deletions(-)
 rename packages/ui-library/src/components/{internal-components => feedback/tooltip}/tooltip-bubble/index.css.ts (91%)
 rename packages/ui-library/src/components/{internal-components => feedback/tooltip}/tooltip-bubble/index.test.ts (100%)
 rename packages/ui-library/src/components/{internal-components => feedback/tooltip}/tooltip-bubble/index.ts (94%)
 rename packages/ui-library/src/components/{internal-components => feedback/tooltip}/tooltip-bubble/indexReact.ts (100%)
 rename packages/ui-library/src/components/{internal-components => feedback/tooltip}/tooltip-bubble/renderFunction.ts (71%)
 delete mode 100644 packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts

diff --git a/packages/ui-library/src/components/feedback/tooltip/index.stories.ts b/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
index 9510c2f18..a619a5d42 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
+++ b/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
@@ -43,7 +43,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Feedback/Tooltip',
+  title: 'Design System/Web Components/Feedback/Tooltip/Tooltip',
   argTypes: {
     theme: {
       options: Themes,
diff --git a/packages/ui-library/src/components/feedback/tooltip/index.ts b/packages/ui-library/src/components/feedback/tooltip/index.ts
index 10ed5a561..80f706126 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.ts
+++ b/packages/ui-library/src/components/feedback/tooltip/index.ts
@@ -4,9 +4,8 @@ import { Placement as PlacementType } from '@floating-ui/dom';
 import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
 import { tooltipPosition } from './tooltip-position';
 import { styleCustom } from './index.css';
-
 import { TAG_NAME } from './renderFunction';
-import { BlrTooltipBubbleRenderFunction } from '../../internal-components/tooltip-bubble/renderFunction';
+import { BlrTooltipBubbleRenderFunction } from './tooltip-bubble/renderFunction';
 
 const enterEvents = ['pointerenter', 'focus'];
 const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.css.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts
similarity index 91%
rename from packages/ui-library/src/components/internal-components/tooltip-bubble/index.css.ts
rename to packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts
index 2e1ab21f3..4f63db993 100644
--- a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.css.ts
+++ b/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 { 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;
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts
index 1f8ecd78c..7a8ddc908 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts
+++ b/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,14 +38,6 @@ 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' },
@@ -54,35 +45,41 @@ export default {
         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>`;
 
@@ -90,8 +87,8 @@ 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,
 };
 
@@ -99,54 +96,39 @@ 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: ' ' };
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.test.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.test.ts
similarity index 100%
rename from packages/ui-library/src/components/internal-components/tooltip-bubble/index.test.ts
rename to packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.test.ts
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts
similarity index 94%
rename from packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts
rename to packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts
index f828a20bf..53db30bf0 100644
--- a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.ts
+++ b/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 {
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/indexReact.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/internal-components/tooltip-bubble/indexReact.ts
rename to packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/indexReact.ts
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
similarity index 71%
rename from packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts
rename to packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
index e2ad848ff..fc1ba2675 100644
--- a/packages/ui-library/src/components/internal-components/tooltip-bubble/renderFunction.ts
+++ b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrTooltipBubbleType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-tooltip-bubble';
 
diff --git a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts b/packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts
deleted file mode 100644
index 6a8ff0e7e..000000000
--- a/packages/ui-library/src/components/internal-components/tooltip-bubble/index.stories.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { html } from 'lit';
-
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
-import '../../../index';
-import { BlrTooltipBubbleType } from '.';
-import { BlrTooltipBubbleRenderFunction } from './renderFunction';
-
-export default {
-  title: 'Design System/Web Components/Internal Components/Tooltip Bubble',
-  argTypes: {
-    theme: {
-      options: Themes,
-      control: { type: 'select' },
-      table: {
-        category: 'Appearance',
-      },
-    },
-
-    elevation: {
-      description: 'Choose if the component should be elevated.',
-      control: { type: 'boolean' },
-      table: {
-        category: 'Appearance',
-      },
-    },
-
-    hasArrow: {
-      description: 'Choose if component has an arrow, pointing to the related element.',
-      control: { type: 'boolean' },
-      table: {
-        category: 'Appearance',
-      },
-    },
-    visible: {
-      description: 'Toggles the visibility of the component.',
-      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 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)
-
-  </markdown>
-`,
-      },
-    },
-  },
-};
-
-export const TooltipBubble = (params: BlrTooltipBubbleType) => html`<div style="position: relative; height: 100px;">
-  ${BlrTooltipBubbleRenderFunction(params)}
-</div>`;
-
-const defaultParams: BlrTooltipBubbleType = {
-  theme: 'Light',
-  elevation: true,
-  hasArrow: true,
-  visible: true,
-  message: 'Message-text',
-  static: true,
-};
-
-TooltipBubble.args = defaultParams;
-
-/**
- * ## Appearance
-* ### 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`
-    ${TooltipBubble({
-      ...defaultParams,
-      message: 'With elevation',
-    })}
-    ${TooltipBubble({
-      ...defaultParams,
-      elevation: false,
-      message: 'Without elevation',
-    })}
-  `;
-};
-Elevation.story = { name: ' ' };
-
-/**
- * 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`
-    ${TooltipBubble({
-      ...defaultParams,
-      message: 'With arrow',
-    })}
-    ${TooltipBubble({
-      ...defaultParams,
-      hasArrow: false,
-      message: 'Without arrow',
-    })}
-  `;
-};
diff --git a/packages/ui-library/src/index.ts b/packages/ui-library/src/index.ts
index c8c84f05e..7380f0e6e 100644
--- a/packages/ui-library/src/index.ts
+++ b/packages/ui-library/src/index.ts
@@ -6,7 +6,7 @@ export { BlrTextButton } from './components/actions/buttons/text-button';
 // Feedback
 export { BlrLoader } from './components/feedback/loader';
 
-export { BlrTooltipBubble } from './components/internal-components/tooltip-bubble';
+export { BlrTooltipBubble } from './components/feedback/tooltip/tooltip-bubble';
 
 export { BlrTooltip } from './components/feedback/tooltip';
 

From 8c33b658aba5d188c20cc5104c8b3c2f477386a5 Mon Sep 17 00:00:00 2001
From: David Kennedy <david.a.kennedy@accenture.com>
Date: Wed, 24 Jan 2024 11:24:39 +0100
Subject: [PATCH 5/5] fix(ui-library):label padding

---
 .../src/foundation/semantic-tokens/form.css.ts       | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/packages/ui-library/src/foundation/semantic-tokens/form.css.ts b/packages/ui-library/src/foundation/semantic-tokens/form.css.ts
index 4d7045612..bfee5f917 100644
--- a/packages/ui-library/src/foundation/semantic-tokens/form.css.ts
+++ b/packages/ui-library/src/foundation/semantic-tokens/form.css.ts
@@ -279,21 +279,14 @@ export const { tokenizedLight: formLight, tokenizedDark: formDark } = renderThem
       }
 
       &.sm {
-        padding: ${SM.LabelSlot.Padding};
         font-weight: ${FormLabel.Label.Typography.SM.fontWeight};
         font-size: ${FormLabel.Label.Typography.SM.fontSize};
         font-family: ${FormLabel.Label.Typography.SM.fontFamily}, sans-serif;
         line-height: ${FormLabel.Label.Typography.SM.lineHeight};
         gap: ${FormLabel.Container.ItemSpacing.SM};
-        __FIX__color: ${FormLabel.Label.TextColor.Rest};
-
-        &.__FIX__error {
-          color: ${FormLabel.Label.TextColor.Error};
-        }
       }
 
       &.md {
-        padding: ${MD.LabelSlot.Padding};
         font-weight: ${FormLabel.Label.Typography.MD.fontWeight};
         font-size: ${FormLabel.Label.Typography.MD.fontSize};
         font-family: ${FormLabel.Label.Typography.MD.fontFamily}, sans-serif;
@@ -302,16 +295,11 @@ export const { tokenizedLight: formLight, tokenizedDark: formDark } = renderThem
       }
 
       &.lg {
-        padding: ${LG.LabelSlot.Padding};
         font-weight: ${FormLabel.Label.Typography.LG.fontWeight};
         font-size: ${FormLabel.Label.Typography.LG.fontSize};
         font-family: ${FormLabel.Label.Typography.LG.fontFamily}, sans-serif;
         line-height: ${FormLabel.Label.Typography.LG.lineHeight};
         gap: ${FormLabel.Container.ItemSpacing.LG};
-
-        &.__FIX__error {
-          color: ${FormLabel.Label.TextColor.Error};
-        }
       }
     }