feat(popup): add tooltip

client/.eslintrc.js

@@ -22,7 +22,7 @@ module.exports = {
     'vue/multi-word-component-names': [
       'error',
       {
-        ignores: ['Header'],
+        ignores: ['Header', 'Tooltip'],
       },
     ],
   },

client/src/components/Header.vue

@@ -20,12 +20,17 @@ const channelStore = useChannelStore();
 </template>
 
 <style scoped lang="scss">
+@import '../mediaqueries.scss';
+
 .header {
   display: flex;
   justify-content: space-between;
   padding: var(--padding);
   padding-bottom: 5px;
   height: 10%;
+  @include for-phone-only {
+    height: 15%;
+  }
 }
 
 .center {

client/src/components/PopUp.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { usePopUpStore } from '../stores/popup';
 import GenericButton from './GenericButton.vue';
+import Tooltip from './Tooltip.vue';
 const store = usePopUpStore();
 </script>
 
 <template>
   <div v-if="store.title" class="popup__wrapper">
     <div class="popup">
       <div class="title">{{ store.title }}</div>
+      <Tooltip v-if="store.tooltipText" :text="store.tooltipText" />
       <div class="text" v-if="store.text" data-testid="popup-text">
         {{ store.text }}
       </div>
@@ -33,11 +35,11 @@ const store = usePopUpStore();
 @import '../mediaqueries.scss';
 
 .popup {
-  width: 50%;
+  max-width: 50%;
   min-height: 200px;
   border-radius: 15px;
   background-color: white;
-  padding: 50px;
+  padding: 50px 100px;
   padding-bottom: 40px;
   display: flex;
   flex-direction: column;

client/src/components/Tooltip.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+defineProps<{
+  text: string;
+}>();
+</script>
+
+<template>
+  <div class="tooltip" data-testid="tooltip">
+    <img src="../assets/svg/info.svg" alt="?" />
+    <div class="tooltip-text">
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '../mediaqueries.scss';
+
+.tooltip {
+  position: absolute;
+  right: 70px;
+  transform: translateY(-20px);
+  img {
+    width: 20px;
+    height: 20px;
+  }
+  @include for-phone-only {
+    right: 20px;
+    transform: translateY(-30px);
+  }
+  .tooltip-text {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.2s;
+    background-color: black;
+    color: #fff;
+    padding: 16px;
+    width: 300px;
+    background: #4e4e56;
+    border-radius: 8px 8px 0px 8px;
+    font-size: 14px;
+    line-height: 1.2;
+
+    position: absolute;
+    z-index: 1;
+    bottom: calc(100% + 15px);
+    right: calc(100% - 20px);
+
+    &::after {
+      content: url('../assets/svg/rectangle.svg');
+      position: absolute;
+      transform: scaleX(-1);
+      top: calc(100% - 1px);
+      right: 0;
+    }
+    @include for-desktop-up {
+      width: 300px;
+      bottom: calc(100% + 15px);
+      border-radius: 8px 8px 8px 0px;
+      left: 0;
+      &::after {
+        content: url('../assets/svg/rectangle.svg');
+        position: absolute;
+        transform: unset;
+        top: calc(100% - 1px);
+        right: unset;
+        left: 0;
+      }
+    }
+    @include for-phone-only {
+      width: 70vw;
+      max-width: 300px;
+    }
+  }
+
+  img:hover ~ .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+</style>

client/src/stores/popup.ts

@@ -7,6 +7,7 @@ export interface PopUpData {
   secBtnText?: string;
   mainBtnAction: () => void;
   secBtnAction?: () => void;
+  tooltipText?: string;
 }
 
 export const usePopUpStore = defineStore('popup', {
@@ -18,6 +19,7 @@ export const usePopUpStore = defineStore('popup', {
       secBtnText: '',
       mainBtnAction: () => void 0,
       secBtnAction: () => void 0,
+      tooltipText: undefined,
     } as PopUpData),
   actions: {
     showPopUp(options: PopUpData) {
@@ -28,6 +30,7 @@ export const usePopUpStore = defineStore('popup', {
       this.secBtnText = options.secBtnText ?? '';
       this.mainBtnAction = options.mainBtnAction;
       this.secBtnAction = options.secBtnAction;
+      this.tooltipText = options.tooltipText;
     },
     resetPopUp() {
       this.title = '';
@@ -36,6 +39,7 @@ export const usePopUpStore = defineStore('popup', {
       this.secBtnText = '';
       this.mainBtnAction = () => void 0;
       this.secBtnAction = () => void 0;
+      this.tooltipText = undefined;
     },
   },
 });

client/tests/popup.test.ts

@@ -27,6 +27,7 @@ const fakePopUpData: Required<PopUpData> = {
   secBtnText: 'Second button',
   mainBtnAction: () => counter.value++,
   secBtnAction: () => counter.value--,
+  tooltipText: 'This is a tooltip',
 };
 
 const singleButtonPopUpData: PopUpData = {
@@ -66,5 +67,15 @@ describe('PopUp', () => {
     expect(() => {
       popUpEl.getByTestId('popup-text');
     }).toThrow('Unable to find an element by: [data-testid="popup-text"]');
+    expect(() => {
+      popUpEl.getByTestId('tooltip');
+    }).toThrow('Unable to find an element by: [data-testid="tooltip"]');
+  });
+
+  it('displays popup with tooltip', async () => {
+    const popUpEl = renderPopUp(fakePopUpData);
+    expect(popUpEl.getByTestId('tooltip')).toBeTruthy();
+    const tooltipTextEl = popUpEl.getByText(fakePopUpData.tooltipText);
+    expect(tooltipTextEl).toBeTruthy();
   });
 });