✨ Add possibility to link to open faq question (#1184)

Author: mariush2

src/organisms/Faq/Category/Question/Question.tsx

@@ -1,8 +1,9 @@
-import { type FC, useState } from 'react';
+import { type FC, useRef, useState } from 'react';
 
 import { Button, Icon, Typography } from '@equinor/eds-core-react';
 import { chevron_down, chevron_up } from '@equinor/eds-icons';
 import { type FaqDto, FaqService } from '@equinor/subsurface-app-management';
+import { useLocation } from '@tanstack/react-router';
 
 import {
   Container,
@@ -24,10 +25,15 @@ export const Question: FC<FaqDto> = ({ id, question, createdDate, answer }) => {
     onImageRead: (path) => FaqService.getFaqImage(path),
     /* v8 ignore end */
   });
-  const [expanded, setExpanded] = useState(false);
+  const { hash } = useLocation();
+  const initialExpanded = useRef(hash === `faq-${id}`);
+  const [expanded, setExpanded] = useState(initialExpanded.current);
 
   const handleOnToggleExpanded = () => {
     setExpanded((prev) => !prev);
+    if (initialExpanded.current) {
+      initialExpanded.current = false;
+    }
   };
 
   return (
@@ -56,7 +62,7 @@ export const Question: FC<FaqDto> = ({ id, question, createdDate, answer }) => {
         <AnimatePresence>
           {expanded && (
             <ExpandWrapper
-              initial={{ height: 0 }}
+              initial={{ height: initialExpanded.current ? 'auto' : 0 }}
               exit={{ height: 0 }}
               animate={{ height: 'auto' }}
             >

src/organisms/Faq/Faq.stories.tsx

@@ -154,13 +154,13 @@ export const SearchFaqs: Story = {
     });
 
     await step('Verify non-matching categories are hidden', async () => {
-      expect(
+      await expect(
         canvas.queryByRole('heading', { name: 'Working with Data' })
       ).not.toBeInTheDocument();
-      expect(
+      await expect(
         canvas.queryByRole('heading', { name: 'Troubleshooting' })
       ).not.toBeInTheDocument();
-      expect(
+      await expect(
         canvas.queryByRole('heading', { name: 'Security & Access' })
       ).not.toBeInTheDocument();
     });
@@ -304,7 +304,26 @@ export const OpenQuestion: Story = {
         /Navigate to .+ and use your company credentials/,
         { exact: false }
       );
-      expect(answerText).toBeVisible();
+      await expect(answerText).toBeVisible();
+    });
+  },
+};
+
+export const InitiallyOpenQuestion: Story = {
+  tags: ['test-only'],
+  parameters: {
+    router: {
+      initialEntries: ['/faq#faq-1'],
+      routes: ['/faq'],
+    },
+  },
+  play: async ({ canvas, step }) => {
+    await step('Verify that the answer is visible on load', async () => {
+      const answerText = await canvas.findByText(
+        /Navigate to .+ and use your company credentials/,
+        { exact: false }
+      );
+      await expect(answerText).toBeVisible();
     });
   },
 };