From cb8aafaf622460e64587091e403881c3534ec046 Mon Sep 17 00:00:00 2001
From: "Anna (Anya) Parker" <50943381+anna-parker@users.noreply.github.com>
Date: Fri, 24 Jan 2025 09:42:27 +0100
Subject: [PATCH] feat(components): gs-wastewater-mutations-over-time - add
 infoText slot in info box (#686)

---
 .../wastewater-mutations-over-time.tsx              |  4 +++-
 .../gs-wastewater-mutations-over-time.stories.ts    | 13 +++++++++----
 .../gs-wastewater-mutations-over-time.tsx           |  2 ++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx b/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx
index 91669893..e38a77d0 100644
--- a/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx
+++ b/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx
@@ -140,7 +140,9 @@ const WastewaterMutationsOverTimeInfo: FunctionComponent<WastewaterMutationsOver
     return (
         <Info>
             <InfoHeadline1>Info for mutations over time</InfoHeadline1>
-            <InfoParagraph> </InfoParagraph>
+            <InfoParagraph>
+                <slot name='infoText' />
+            </InfoParagraph>
             <InfoComponentCode
                 componentName='wastewater-mutations-over-time'
                 params={originalComponentProps}
diff --git a/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts b/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts
index c8840715..31214229 100644
--- a/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts
+++ b/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts
@@ -14,9 +14,11 @@ const codeExample = String.raw`
     sequenceType='nucleotide'
     width='100%'
     height='700px'
-></gs-wastewater-mutations-over-time>`;
+>
+    <span slot="infoText">Some info text</span>
+</gs-wastewater-mutations-over-time>`;
 
-const meta: Meta<Required<WastewaterMutationsOverTimeProps>> = {
+const meta: Meta<WastewaterMutationsOverTimeProps & { infoText: string }> = {
     title: 'Wastewater visualization/Wastewater mutations over time',
     component: 'gs-wastewater-mutations-over-time',
     argTypes: {
@@ -33,6 +35,7 @@ const meta: Meta<Required<WastewaterMutationsOverTimeProps>> = {
         sequenceType: 'nucleotide',
         width: '100%',
         height: '700px',
+        infoText: 'Some info text',
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -47,7 +50,7 @@ const meta: Meta<Required<WastewaterMutationsOverTimeProps>> = {
 
 export default meta;
 
-export const WastewaterMutationsOverTime: StoryObj<Required<WastewaterMutationsOverTimeProps>> = {
+export const WastewaterMutationsOverTime: StoryObj<WastewaterMutationsOverTimeProps & { infoText: string }> = {
     render: (args) => html`
         <gs-app lapis="${WISE_LAPIS_URL}">
             <gs-wastewater-mutations-over-time
@@ -55,7 +58,9 @@ export const WastewaterMutationsOverTime: StoryObj<Required<WastewaterMutationsO
                 .sequenceType=${args.sequenceType}
                 .width=${args.width}
                 .height=${args.height}
-            ></gs-wastewater-mutations-over-time>
+            >
+                <span slot="infoText">${args.infoText}</span>
+            </gs-wastewater-mutations-over-time>
         </gs-app>
     `,
     parameters: {
diff --git a/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx b/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx
index 4d33e90d..ee579c8f 100644
--- a/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx
+++ b/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx
@@ -23,6 +23,8 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * The content of the tab is a "mutations over time" grid, similar to the one used in the `gs-mutations-over-time` component.
  *
  * This component also assumes that the LAPIS instance has the field `date` which can be used for the time axis.
+ *
+ * @slot infoText - Additional information text to be shown in the info modal (the "?" button).
  */
 @customElement('gs-wastewater-mutations-over-time')
 export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {