Add Tooltip

CRRU-UK · Jun 26, 2024 · 630dee7 · 630dee7
1 parent 928e657
commit 630dee7
Show file tree

Hide file tree

Showing 9 changed files with 197 additions and 31 deletions.
diff --git a/public/fonts/Philosopher-Bold.ttf b/public/fonts/Philosopher-Bold.ttf
diff --git a/public/images/icons/help.svg b/public/images/icons/help.svg
diff --git a/public/images/icons/tooltip.svg b/public/images/icons/tooltip.svg
diff --git a/src/components/Tooltip/Tooltip.module.scss b/src/components/Tooltip/Tooltip.module.scss
@@ -0,0 +1,74 @@
+@import "../../scss/variables";
+
+$icon-size-large: 22px;
+$icon-size-small: 16px;
+
+$tooltip-spacing: 10px;
+
+.tooltip {
+  overflow: visible;
+  z-index: 10;
+  position: relative;
+  transform: translateY(4px);
+  margin-left: 5px;
+  display: inline-block;
+  width: $icon-size-large;
+  height: $icon-size-large;
+
+  @include breakpoint("small") {
+    width: $icon-size-small;
+    height: $icon-size-small;
+  }
+}
+
+.tooltip-button,
+.tooltip-text {
+  display: block;
+}
+
+.tooltip-button {
+  opacity: .5;
+  z-index: 0;
+  width: $icon-size-large;
+  height: $icon-size-large;
+  background: url("../../../public/images/icons/tooltip.svg") center center no-repeat transparent;
+  background-size: contain;
+
+  @include breakpoint("small") {
+    width: $icon-size-small;
+    height: $icon-size-small;
+  }
+}
+
+.tooltip-button:hover,
+.tooltip-button-active {
+  opacity: 1;
+}
+
+$easing-in: 0.6s $global-transition-ease-out-expo;
+$easing-out: 0.6s $global-transition-ease-in-expo;
+
+.tooltip-text {
+  pointer-events: none;
+  z-index: 10;
+  opacity: 0;
+  position: absolute;
+  left: -$tooltip-spacing;
+  bottom: calc(100% + $tooltip-spacing);
+  padding: 10px;
+  width: 200px;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgba($global-color-body, .3);
+  background: $global-color-background;
+  transform: translateY(20%);
+  transition: opacity $easing-in, transform $easing-in;
+}
+
+.tooltip-text-active {
+  pointer-events: all;
+  opacity: 1;
+  transform: translateY(0%);
+}
diff --git a/src/components/Tooltip/Tooltip.spec.tsx b/src/components/Tooltip/Tooltip.spec.tsx
@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom';
+
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+import Tooltip from './Tooltip';
+
+beforeAll(() => {
+  expect.extend(toHaveNoViolations);
+});
+
+it('Passes accessibility with default props', async () => {
+  const { container } = render(
+    <Tooltip
+      text="mocked tooltip"
+    />,
+  );
+
+  const results = await axe(container);
+
+  expect(results).toHaveNoViolations();
+});
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable react/require-default-props */
+/* istanbul ignore file */
+
+import { useState } from 'react';
+
+import styles from './Tooltip.module.scss';
+
+export interface TooltipProps {
+  text: string,
+}
+
+const Tooltip = ({
+  text,
+}: TooltipProps) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  const textClasses = [styles['tooltip-text']];
+  const buttonClasses = [styles['tooltip-button']];
+  if (open) {
+    buttonClasses.push(styles['tooltip-button-active']);
+    textClasses.push(styles['tooltip-text-active']);
+  }
+
+  return (
+    <span
+      className={styles.tooltip}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+    >
+      <button
+        type="button"
+        className={buttonClasses.join(' ')}
+        onKeyDown={() => {}}
+        title="Tooltip"
+        aria-label="Tooltip"
+        aria-expanded={open}
+        tabIndex={0}
+      />
+      <span className={textClasses.join(' ')}>
+        {text}
+      </span>
+    </span>
+  );
+};
+
+export default Tooltip;
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -11,6 +11,7 @@ import ListItem from './ListItem/ListItem';
 import Note from './Note/Note';
 import SEO from './SEO/SEO';
 import Social from './Social/Social';
+import Tooltip from './Tooltip/Tooltip';
 
 export {
   Breadcrumbs,
@@ -26,4 +27,5 @@ export {
   Note,
   SEO,
   Social,
+  Tooltip,
 };
diff --git a/src/pages/research/catalogues/bottlenose-dolphin/[slug].module.scss b/src/pages/research/catalogues/bottlenose-dolphin/[slug].module.scss
@@ -60,21 +60,6 @@ $grid-spacing-small: $global-spacing-small / 2;
     border-bottom: 1px dotted $global-color-body-dark;
   }
 
-  &::before {
-    content: "";
-    display: block;
-    margin-right: 5px;
-    width: 18px;
-    height: 18px;
-    background: url("../../../../../public/images/icons/help.svg") center center no-repeat transparent;
-    background-size: contain;
-
-    @include breakpoint("small") {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
   &:hover {
     cursor: help;
   }
@@ -259,20 +244,21 @@ $line-color: #CCC;
       z-index: 10;
       position: relative;
       padding: 8px 0;
+      font-weight: 700;
       font-size: 16px;
       line-height: 16px;
-      color: $global-color-body-dark;
+      color: rgba($global-color-body-dark, 0.5);
       background: $global-color-background;
     }
   }
 }
 
 .tree .mother > b::after {
-  background: linear-gradient(180deg, rgba($line-color, 1) 70%, rgba($line-color, 0) 100%);
+  background: linear-gradient(180deg, rgba($line-color, 1) 75%, rgba($line-color, 0) 100%);
 }
 
 .tree .calves > b::after {
-  background: linear-gradient(180deg, rgba($line-color, 0) 0%, rgba($line-color, 1) 30%);
+  background: linear-gradient(180deg, rgba($line-color, 0) 0%, rgba($line-color, 1) 25%);
 }
 
 .tree .mother > b {
@@ -282,7 +268,7 @@ $line-color: #CCC;
 // TODO: Re-do this
 .tree .mother a {
   margin: 0 auto;
-  width: 50%;
+  width: calc(50% - ($column-gap / 2));
 }
 
 .tree .calves > ul {

diff --git a/src/pages/research/catalogues/bottlenose-dolphin/[slug].tsx b/src/pages/research/catalogues/bottlenose-dolphin/[slug].tsx
@@ -13,7 +13,7 @@ import { formatDateMonth } from '@/helpers/formatDate';
 import { getCatalogueItem, getCatalogueItemSlug } from '@/helpers/getBottlenoseDolphinCatalogue';
 
 import Hero from '@/components/Hero/Hero';
-import { Breadcrumbs, SEO, Catalogue } from '@/components/index';
+import { Breadcrumbs, SEO, Catalogue, Tooltip } from '@/components/index';
 
 import styles from './[slug].module.scss';
 
@@ -174,16 +174,52 @@ const Page: NextPage<PageProps> = ({
             )}
 
             <ul className={styles.info}>
-              <li><b>CRRU ID #</b> {id}</li>
-              <li><b>AU ID Ref #</b> <Unknown /></li>
-              <li><b>Name</b> {name ?? <i>(None)</i>}</li>
-              <li><b>First Seen</b> {firstSeen ? formatDateMonth(firstSeen) : <Unknown />}</li>
-              <li><b>Birth Year</b> {birthYear ?? <Unknown />}</li>
-              <li><b>Age (Years)</b> {age ? ageText : <Unknown />}</li>
-              <li><b>Sex</b> {sex === 'Unknown' ? <Unknown /> : sex}</li>
-              <li className={styles['info-item-double']}><b>Total Number Of Calves</b> 5</li>
-              <li className={styles['info-item-full']}><b>Dorsal Edge Markings (DEMs)</b> {dorsalEdgeMarkings ?? 'None'}</li>
-              <li className={styles['info-item-full']}><b>Other Features</b> {otherFeatures ?? 'None'}</li>
+              <li>
+                <b>CRRU ID #</b>
+                {id}
+              </li>
+              <li>
+                <b>
+                  AU ID Ref # 
+                  <Tooltip text="ID assigned by the AULFS (Aberdeen University Lighthouse Field Station)" />
+                </b>
+                <Unknown />
+              </li>
+              <li>
+                <b>Name</b>
+                {name ?? <i>(None)</i>}
+              </li>
+              <li>
+                <b>First Seen</b>
+                {firstSeen ? formatDateMonth(firstSeen) : <Unknown />}
+              </li>
+              <li>
+                <b>Birth Year</b>
+                {birthYear ?? <Unknown />}
+              </li>
+              <li>
+                <b>Age (Years)</b>
+                {age ? ageText : <Unknown />}
+              </li>
+              <li>
+                <b>Sex</b>
+                {sex === 'Unknown' ? <Unknown /> : sex}
+              </li>
+              <li className={styles['info-item-double']}>
+                <b>
+                  Total Number Of Calves
+                  <Tooltip text="Total number of calves as identified by CRRU and AULFS" />
+                </b>
+                5
+              </li>
+              <li className={styles['info-item-full']}>
+                <b>Dorsal Edge Markings (DEMs)</b>
+                {dorsalEdgeMarkings ?? 'None'}
+              </li>
+              <li className={styles['info-item-full']}>
+                <b>Other Features</b>
+                {otherFeatures ?? 'None'}
+              </li>
             </ul>
 
             {imagesElement}