Add minke whale catalogue

src/components/Card/Card.module.scss

@@ -78,6 +78,10 @@ $bottom-border-size: 5px;
   background-image: url('../../../public/images/icons/catalogues/dolphin.svg');
 }
 
+.whale > .icon {
+  background-image: url('../../../public/images/icons/catalogues/whale.svg');
+}
+
 .disabled {
   pointer-events: none;
   box-shadow: none;
@@ -112,7 +116,7 @@ $bottom-border-size: 5px;
   justify-content: flex-start;
 }
 
-.subid {
+.reference {
   opacity: 0.6;
   margin-left: auto;
   font-size: 12px;

src/components/Card/Card.spec.tsx

@@ -13,7 +13,8 @@ beforeAll(() => {
 it('Passes accessibility with default props', async () => act(async () => {
   const { container } = render(
     <Card
-      type='bottlenose-dolphin'
+      // @ts-expect-error String of enum value
+      type="bottlenose-dolphin"
       id="mocked title"
       link="/mocked-link"
     />,
@@ -27,9 +28,10 @@ it('Passes accessibility with default props', async () => act(async () => {
 it('Passes accessibility with optional props', async () => act(async () => {
   const { container } = render(
     <Card
-      type='minke-whale'
+      // @ts-expect-error String of enum value
+      type="minke-whale"
       id="mocked title"
-      subid="mocked subtitle"
+      reference="mocked subtitle"
       name="mocked name"
       link="/mocked-link"
     />,

src/components/Card/Card.tsx

@@ -1,34 +1,38 @@
 import Link from 'next/link';
 
-import type { CatalogueTypes } from '@/helpers/types';
+import { Catalogues } from '@/helpers/constants';
 
 import React from 'react';
 
 import styles from './Card.module.scss';
 
 interface Props {
-  type: CatalogueTypes,
+  type: Catalogues,
   id: string,
   name?: string,
-  subid?: string,
+  reference?: string,
   link: string,
   disabled?: boolean,
 }
 
 const Card = ({
   type,
   id,
-  subid,
+  reference,
   name,
   link,
   disabled = false,
 }: Props) => {
   const classes = [styles.card, styles['no-image']];
 
-  if (type === 'bottlenose-dolphin') {
+  if (type === Catalogues.BottlenoseDolphin) {
     classes.push(styles.dolphin);
   }
 
+  if (type === Catalogues.MinkeWhale) {
+    classes.push(styles.whale);
+  }
+
   if (disabled) {
     classes.push(styles.disabled);
   }
@@ -39,7 +43,7 @@ const Card = ({
       <span className={styles.text}>
         <span className={styles.id}>
           <b>{id}</b>
-          {subid && (<span className={styles.subid}>{subid}</span>)}
+          {reference && (<span className={styles.reference}>{reference}</span>)}
         </span>
         <span className={styles.name}>{name ?? <i>Unnamed</i>}</span>
       </span>

src/components/Toolbar/Toolbar.spec.tsx

@@ -12,7 +12,10 @@ beforeAll(() => {
 
 it('Passes accessibility with default props', async () => act(async () => {
   const { container } = render(
-    <Toolbar type='bottlenose-dolphin' />,
+    <Toolbar
+      // @ts-expect-error String of enum value
+      type="bottlenose-dolphin"
+    />,
   );
 
   const results = await axe(container);

src/components/Toolbar/Toolbar.tsx

@@ -2,19 +2,21 @@ import styles from './Toolbar.module.scss';
 
 import React, { useState, useEffect } from 'react';
 
-import type { CatalogueTypes, CatalogueBottlenoseDolphinListAPIResponse } from '@/helpers/types';
+import type { CatalogueAPIResponse } from '@/helpers/types';
+
+import { Catalogues } from '@/helpers/constants';
 
 import { Card, Loading } from '@/components';
 
 interface Props {
-  type: CatalogueTypes,
+  catalogue: Catalogues,
 }
 
 const Toolbar = ({
-  type,
+  catalogue,
 }: Props) => {
   const [search, setSearch] = useState<string>('');
-  const [data, setData] = useState<null | CatalogueBottlenoseDolphinListAPIResponse>(null);
+  const [data, setData] = useState<null | CatalogueAPIResponse>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
@@ -26,8 +28,8 @@ const Toolbar = ({
     const getData = async () => {
       setLoading(true);
 
-      const response = await fetch(`/api/catalogues/${type}?search=${search}&page=1`);
-      const result: CatalogueBottlenoseDolphinListAPIResponse = await response.json();
+      const response = await fetch(`/api/catalogues/${catalogue}?search=${search}&page=1`);
+      const result: CatalogueAPIResponse = await response.json();
       setData(result);
 
       setLoading(false);
@@ -51,11 +53,11 @@ const Toolbar = ({
   const resultsElements = data?.meta?.totalItems === 0 ? noResultsElement : data?.items.map((item) => (
     <li key={item.id}>
       <Card
-        type={type}
+        type={catalogue}
         id={`#${item.id}`}
         name={item?.name ? String(item.name) : undefined}
-        subid={item?.auid ? `#${item.auid}` : undefined}
-        link={`/research/catalogues/${type}/${item.slug}`}
+        reference={item?.reference ? `#${item.reference}` : undefined}
+        link={`/research/catalogues/${catalogue}/${item.slug}`}
       />
     </li>
   ));
@@ -65,7 +67,7 @@ const Toolbar = ({
       <div className={classes.join(' ')}>
         <input
           type="search"
-          placeholder="Search by name, ID, AUID, birth year..."
+          placeholder="Search by name, ID, reference, birth year..."
           onChange={({ target }) => handleSearchChange((target as HTMLInputElement).value)}
         />
 

src/components/Tooltip/Tooltip.module.scss

@@ -57,7 +57,7 @@ $easing-out: 0.6s $global-transition-ease-in-expo;
   right: -$tooltip-spacing;
   bottom: calc(100% + $tooltip-spacing);
   padding: 10px;
-  width: 250px;
+  width: 260px;
   font-size: 14px;
   line-height: 20px;
   font-weight: 700;

src/components/Tree/Tree.module.scss

@@ -165,6 +165,50 @@ $tree-label-border-width: 5px;
   }
 }
 
+.tree .calves > ul > li > .last-known {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-start;
+  position: absolute;
+  left: 0;
+  top: -35px;
+  padding: 8px;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 12px;
+  border-radius: $tree-label-border-width;
+  color: $global-color-catalogue-light;
+  background: $global-color-catalogue-dark;
+  text-transform: uppercase;
+
+  @include breakpoint($global-catalogue-breakpoint-small) {
+    top: -25px;
+    padding: 5px;
+    font-size: 10px;
+    line-height: 10px;
+  }
+
+  $icon-size-large: 12px;
+  $icon-size-small: 10px;
+
+  &::before {
+    content: '';
+    margin-right: 5px;
+    display: block;
+    width: $icon-size-large;
+    height: $icon-size-large;
+    background: url('../../../public/images/icons/catalogues/star.svg') center center no-repeat;
+    background-size: contain;
+
+    @include breakpoint($global-catalogue-breakpoint-small) {
+      margin-right: 4px;
+      width: $icon-size-small;
+      height: $icon-size-small;
+    }
+  }
+}
+
 .tree .name,
 .tree .empty {
   @extend %tree-items;

src/components/Tree/Tree.spec.tsx

@@ -27,7 +27,7 @@ const mockedEntryData = {
 const mockedMotherCalvesData = {
   mother: {
     id: 'mocked mother id',
-    auid: 'mocked mother auid',
+    reference: 'mocked mother reference',
     name: 'mocked mother name',
     slug: 'mocked mother slug',
   },
@@ -37,12 +37,14 @@ const mockedMotherCalvesData = {
 it('Passes accessibility with default props', async () => act(async () => {
   const { container } = render(
     <Tree
+      // @ts-expect-error String of enum value
+      type="bottlenose-dolphin"
       data={{
         ...mockedMotherCalvesData,
         entry: {
           ...mockedEntryData,
           id: 'mocked id',
-          auid: 'mocked auid',
+          reference: 'mocked reference',
           name: 'mocked name',
           slug: 'mocked slug',
         },

src/components/Tree/Tree.tsx

@@ -2,13 +2,17 @@ import styles from './Tree.module.scss';
 
 import type { CatalogueBottlenoseDolphin } from '@/helpers/types';
 
+import { Catalogues } from '@/helpers/constants';
+
 import { Card } from '@/components';
 
 interface Props {
+  type: Catalogues.BottlenoseDolphin,
   data: CatalogueBottlenoseDolphin,
 }
 
 const Tree = ({
+  type,
   data,
 }: Props) => {
   const {
@@ -23,10 +27,10 @@ const Tree = ({
   if (mother) {
     motherElement = (
       <Card
-        type='bottlenose-dolphin'
+        type={type}
         id={`#${mother.id}`}
         name={mother?.name ? String(mother.name) : undefined}
-        subid={mother?.auid ? `#${mother.auid}` : undefined}
+        reference={mother?.reference ? `#${mother.reference}` : undefined}
         link={`/research/catalogues/bottlenose-dolphin/${mother.slug}`}
       />
     );
@@ -37,12 +41,13 @@ const Tree = ({
     calvesElement = (
       <ul>
         {
-          calves.map((item) => (
+          calves.map((item, index) => (
             <li key={item.id}>
+              {index === 0 && (<span className={styles['last-known']}>Last know calf</span>)}
               <Card
-                type='bottlenose-dolphin'
+                type={type}
                 id={`#${item.id}`}
-                subid={item?.auid ? `#${item.auid}` : undefined}
+                reference={item?.reference ? `#${item.reference}` : undefined}
                 name={item?.name ?? undefined}
                 link={item.slug}
               />
@@ -62,9 +67,9 @@ const Tree = ({
 
       <li className={styles.name}>
         <Card
-          type='bottlenose-dolphin'
+          type={type}
           id={`#${entry.id}`}
-          subid={entry?.auid ? `#${entry.auid}` : undefined}
+          reference={entry?.reference ? `#${entry.reference}` : undefined}
           name={entry.name ?? undefined}
           link={''}
           disabled

src/helpers/constants.ts

@@ -44,6 +44,7 @@ export enum ContentTypes {
   SpeciesPage = 'speciesPage',
   ScientificPublication = 'scientificPublication',
   CatalogueBottlenoseDolphin = 'catalogueBottlenoseDolphin',
+  CatalogueMinkeWhale = 'catalogueMinkeWhale',
   People = 'people',
   Sponsor = 'sponsor',
   UsefulLink = 'usefulLink',
@@ -84,4 +85,9 @@ export enum InlineContentEntries {
   News = ContentTypes.NewsArticle,
 }
 
+export enum Catalogues {
+  BottlenoseDolphin = 'bottlenose-dolphin',
+  MinkeWhale = 'minke-whale',
+}
+
 export const CATALOGUE_RESULTS_LIMIT = 30;