From 00f3d5221cd363428fd6a7bf5a77a6e03d906c47 Mon Sep 17 00:00:00 2001
From: Fausto Quaggia <fausto.quaggia@gmail.com>
Date: Mon, 22 Jul 2024 22:24:55 +0200
Subject: [PATCH] feat: button tooltip

---
 packages/ui-stencil-vue/lib/components.ts     |  3 ++-
 packages/ui-stencil/src/components.d.ts       |  2 ++
 .../internal/orama-button/orama-button.scss   | 27 ++++++++++++++++++-
 .../internal/orama-button/orama-button.tsx    |  2 ++
 .../internal/orama-button/readme.md           | 15 ++++++-----
 .../orama-chat-assistent-message.scss         | 26 ------------------
 .../orama-chat-assistent-message.tsx          |  4 +--
 7 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
index 848024f5..03981f9d 100644
--- a/packages/ui-stencil-vue/lib/components.ts
+++ b/packages/ui-stencil-vue/lib/components.ts
@@ -13,7 +13,8 @@ export const OramaButton = /*@__PURE__*/ defineContainer<JSX.OramaButton>('orama
   'class',
   'variant',
   'type',
-  'disabled'
+  'disabled',
+  'withTooltip'
 ]);
 
 
diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
index d3a0be8e..7ecf6ff3 100644
--- a/packages/ui-stencil/src/components.d.ts
+++ b/packages/ui-stencil/src/components.d.ts
@@ -28,6 +28,7 @@ export namespace Components {
         "disabled"?: boolean;
         "type"?: ButtonProps['type'];
         "variant"?: ButtonProps['variant'];
+        "withTooltip"?: string;
     }
     interface OramaChat {
     }
@@ -302,6 +303,7 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         "type"?: ButtonProps['type'];
         "variant"?: ButtonProps['variant'];
+        "withTooltip"?: string;
     }
     interface OramaChat {
     }
diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss b/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss
index 828da1b7..9f99aaa4 100644
--- a/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss
+++ b/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss
@@ -9,9 +9,22 @@
   padding: var(--spacing-m, $spacing-m);
   cursor: pointer;
   font-family: var(--font-primary, font('primary'));
-
   transition: all 0.2s;
   transition-property: color, background-color, opacity;
+
+  &__tooltip {
+    display: block;
+    opacity: 0;
+    position: absolute;
+    background-color: var(--text-color-primary, text-color('primary'));
+    color: var(--background-color-primary, background-color('primary'));
+    padding: var(--spacing-s, $spacing-s);
+    border-radius: var(--radius-s, $radius-s);
+    font-size: 10px;
+    z-index: 1;
+    top: -28px;
+    animation: fadeInOut 1s ease-in-out 1;
+  }
 }
 
 .button--primary {
@@ -51,3 +64,15 @@
     background-color: var(--background-color-tertiary, background-color('tertiary'));
   }
 }
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx b/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx
index 6cb91091..ad23d962 100644
--- a/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx
@@ -40,6 +40,7 @@ export class OramaButton {
   @Prop() variant?: ButtonProps['variant'] = 'primary'
   @Prop() type?: ButtonProps['type']
   @Prop() disabled?: boolean
+  @Prop() withTooltip?: string
 
   render() {
     const Tag = this.as
@@ -51,6 +52,7 @@ export class OramaButton {
     return (
       <Tag class={buttonClass} {...buttonProps} disabled={this.disabled}>
         <slot />
+        {this.withTooltip && <span class="button__tooltip">{this.withTooltip}</span>}
       </Tag>
     )
   }
diff --git a/packages/ui-stencil/src/components/internal/orama-button/readme.md b/packages/ui-stencil/src/components/internal/orama-button/readme.md
index 613a099c..8d446c5e 100644
--- a/packages/ui-stencil/src/components/internal/orama-button/readme.md
+++ b/packages/ui-stencil/src/components/internal/orama-button/readme.md
@@ -7,13 +7,14 @@
 
 ## Properties
 
-| Property   | Attribute  | Description | Type                                 | Default     |
-| ---------- | ---------- | ----------- | ------------------------------------ | ----------- |
-| `as`       | `as`       |             | `"a" \| "button"`                    | `'button'`  |
-| `class`    | `class`    |             | `string`                             | `undefined` |
-| `disabled` | `disabled` |             | `boolean`                            | `undefined` |
-| `type`     | `type`     |             | `"button" \| "reset" \| "submit"`    | `undefined` |
-| `variant`  | `variant`  |             | `"icon" \| "primary" \| "secondary"` | `'primary'` |
+| Property      | Attribute      | Description | Type                                 | Default     |
+| ------------- | -------------- | ----------- | ------------------------------------ | ----------- |
+| `as`          | `as`           |             | `"a" \| "button"`                    | `'button'`  |
+| `class`       | `class`        |             | `string`                             | `undefined` |
+| `disabled`    | `disabled`     |             | `boolean`                            | `undefined` |
+| `type`        | `type`         |             | `"button" \| "reset" \| "submit"`    | `undefined` |
+| `variant`     | `variant`      |             | `"icon" \| "primary" \| "secondary"` | `'primary'` |
+| `withTooltip` | `with-tooltip` |             | `string`                             | `undefined` |
 
 
 ## Dependencies
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
index 96a3f1aa..404ae727 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
@@ -72,29 +72,3 @@ orama-chat-assistent-message {
     transform: rotate(360deg);
   }
 }
-
-.tooltip {
-  display: block;
-  opacity: 0;
-  position: absolute;
-  background-color: var(--text-color-primary, text-color('primary'));
-  color: var(--background-color-primary, background-color('primary'));
-  padding: var(--spacing-s, $spacing-s);
-  border-radius: var(--radius-s, $radius-s);
-  font-size: 10px;
-  z-index: 1;
-  top: -28px;
-  animation: fadeInOut 1s ease-in-out 1;
-}
-
-@keyframes fadeInOut {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
index 545a920c..28238014 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
@@ -44,9 +44,9 @@ export class OramaChatAssistentMessage {
               variant="icon"
               onClick={this.handleCopyToClipboard}
               onKeyDown={this.handleCopyToClipboard}
+              withTooltip={this.isCopied ? 'Copied!' : undefined}
             >
-              {this.isCopied ? <ph-copy weight="fill" /> : <ph-copy />}
-              {this.isCopied && <span class="tooltip">Copied!</span>}
+              <ph-copy />
             </orama-button>
             <orama-button
               type="button"