From 450659c5b73002b2c37140a0557015e5339445b8 Mon Sep 17 00:00:00 2001
From: snenenenenenene <sennebels@gmail.com>
Date: Wed, 12 Jun 2024 12:39:16 +0200
Subject: [PATCH] added tooltip component

---
 addon/components/au-tooltip.gts               | 21 ++++++++
 addon/index.js                                |  1 +
 app/components/au-tooltip.js                  |  1 +
 .../5-components/Content/AuTooltip.stories.js | 25 ++++++++++
 styles/components/_c-tooltip.scss             | 50 +++++++++++++++++++
 5 files changed, 98 insertions(+)
 create mode 100644 addon/components/au-tooltip.gts
 create mode 100644 app/components/au-tooltip.js
 create mode 100644 stories/5-components/Content/AuTooltip.stories.js
 create mode 100644 styles/components/_c-tooltip.scss

diff --git a/addon/components/au-tooltip.gts b/addon/components/au-tooltip.gts
new file mode 100644
index 000000000..3c608db0a
--- /dev/null
+++ b/addon/components/au-tooltip.gts
@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+
+export interface AuTooltipSignature {
+  Args: {
+    text: string;
+    tooltipText: string;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuTooltip extends Component<AuTooltipSignature> {
+  <template>
+    <div class="au-c-tooltip">
+      <p class="au-u-h4 au-u-margin-right-tiny au-u-margin-bottom-none">
+        {{@text}}
+      </p>
+      <span class="au-c-tooltip-text">{{@tooltipText}}
+      </span>
+    </div>
+  </template>
+}
diff --git a/addon/index.js b/addon/index.js
index e778e5be9..bb71216e2 100644
--- a/addon/index.js
+++ b/addon/index.js
@@ -45,6 +45,7 @@ export { default as AuTimePicker } from '@appuniversum/ember-appuniversum/compon
 export { default as AuToaster } from '@appuniversum/ember-appuniversum/components/au-toaster';
 export { default as AuToggleSwitch } from '@appuniversum/ember-appuniversum/components/au-toggle-switch';
 export { default as AuToolbar } from '@appuniversum/ember-appuniversum/components/au-toolbar';
+export { default as AuTooltip } from '@appuniversum/ember-appuniversum/components/au-tooltip';
 
 // Modifiers
 export { default as auDateInput } from '@appuniversum/ember-appuniversum/modifiers/au-date-input';
diff --git a/app/components/au-tooltip.js b/app/components/au-tooltip.js
new file mode 100644
index 000000000..0245c4ec2
--- /dev/null
+++ b/app/components/au-tooltip.js
@@ -0,0 +1 @@
+export { default } from '@appuniversum/ember-appuniversum/components/au-tooltip';
diff --git a/stories/5-components/Content/AuTooltip.stories.js b/stories/5-components/Content/AuTooltip.stories.js
new file mode 100644
index 000000000..164b4e1bb
--- /dev/null
+++ b/stories/5-components/Content/AuTooltip.stories.js
@@ -0,0 +1,25 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { icons } from '../../assets/icons';
+
+export default {
+  title: 'Components/Content/AuTooltip',
+  argTypes: {
+    text: { control: 'text', description: '' },
+    tooltipText: { control: 'text', description: '' },
+  },
+};
+
+const Template = (args) => ({
+  template: hbs`
+     <AuTooltip
+	 @text={{text}}
+	 @tooltipText={{tooltipText}}
+	 />`,
+  context: args,
+});
+
+export const Component = Template.bind({});
+Component.args = {
+  text: 'Lorem Ipsum',
+  tooltipText: 'Tooltip text',
+};
diff --git a/styles/components/_c-tooltip.scss b/styles/components/_c-tooltip.scss
new file mode 100644
index 000000000..a370ce5f1
--- /dev/null
+++ b/styles/components/_c-tooltip.scss
@@ -0,0 +1,50 @@
+/* ==================================
+   #TOOLTIP
+   ================================== */
+
+/* Variables
+   ========================================================================== */
+
+/* Component
+	  ========================================================================== */
+
+.au-c-tooltip {
+  height: 100%;
+  position: relative;
+  display: flex;
+  margin: auto 0;
+  justify-self: center;
+  align-self: center;
+}
+
+.au-c-tooltip .au-c-tooltip-text {
+  position: absolute;
+  cursor: pointer;
+  bottom: 0;
+  left: 0;
+  transform: translateY(100%);
+  visibility: hidden;
+  width: 300px;
+  background-color: var(--au-white);
+  color: var(--au-gray-700);
+  text-align: center;
+  font-size: var(--au-base);
+  line-height: var(--au-global-line-height);
+  display: inline-flex;
+  gap: 0.6rem;
+  align-items: center;
+  font-family: var(--au-font);
+  font-weight: var(--au-medium);
+  border: 0.1rem solid var(--vl-grey-50);
+  padding: 0.1rem 0.6rem 0;
+  border-radius: 0.6rem;
+  min-height: 2.55rem;
+  padding: 5px 0;
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+}
+
+/* Modifiers
+	 ========================================================================== */