fix(client): persist transcript expanded state (freeCodeCamp#58437)

Author: moT01

client/i18n/locales/english/translations.json

@@ -430,7 +430,7 @@
     "questions": "Questions",
     "answered-mcq": "You have unanswered questions and/or incorrect answers.",
     "explanation": "Explanation",
-    "transcript": "Read a transcript of this video",
+    "transcript": "Transcript",
     "solution-link": "Solution Link",
     "source-code-link": "Source Code Link",
     "ms-link": "Microsoft Link",

client/src/templates/Challenges/components/challenge-transcript.css

@@ -1,3 +1,4 @@
 .challenge-transcript-heading {
   cursor: pointer;
+  font-weight: bold;
 }

client/src/templates/Challenges/components/challenge-transcript.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import store from 'store';
+import ChallengeTranscript from './challenge-transcript';
+
+const baseProps = {
+  transcript: 'Sample transcript text'
+};
+
+describe('<ChallengeTranscript />', () => {
+  beforeEach(() => {
+    store.clearAll();
+  });
+
+  it('renders the transcript heading', () => {
+    render(<ChallengeTranscript {...baseProps} />);
+    expect(screen.getByText('learn.transcript')).toBeVisible();
+  });
+
+  it('renders collapsed by default', () => {
+    render(<ChallengeTranscript {...baseProps} />);
+    expect(screen.getByTestId('challenge-transcript')).not.toHaveAttribute(
+      'open'
+    );
+    expect(screen.getByText('Sample transcript text')).not.toBeVisible();
+  });
+
+  it("renders collapsed when localstorage 'fcc-transcript-expanded = false'", () => {
+    store.set('fcc-transcript-expanded', false);
+    render(<ChallengeTranscript {...baseProps} />);
+    expect(screen.getByTestId('challenge-transcript')).not.toHaveAttribute(
+      'open'
+    );
+    expect(screen.getByText('Sample transcript text')).not.toBeVisible();
+  });
+
+  it("renders expanded when 'fcc-transcript-expanded = true'", () => {
+    store.set('fcc-transcript-expanded', true);
+    render(<ChallengeTranscript {...baseProps} />);
+    expect(screen.getByTestId('challenge-transcript')).toHaveAttribute('open');
+    expect(screen.getByText('Sample transcript text')).toBeVisible();
+  });
+});

client/src/templates/Challenges/components/challenge-transcript.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Spacer } from '@freecodecamp/ui';
+import store from 'store';
 import PrismFormatted from './prism-formatted';
 
 import './challenge-transcript.css';
@@ -14,10 +15,25 @@ function ChallengeTranscript({
 }: ChallengeTranscriptProps): JSX.Element {
   const { t } = useTranslation();
 
+  // default to collapsed
+  const [isOpen, setIsOpen] = useState(
+    () => (store.get('fcc-transcript-expanded') as boolean | null) ?? false
+  );
+
+  function toggleExpandedState(e: React.MouseEvent<HTMLDetailsElement>) {
+    e.preventDefault();
+    store.set('fcc-transcript-expanded', !isOpen);
+    setIsOpen(!isOpen);
+  }
+
   return (
     <>
-      <details>
-        <summary className='challenge-transcript-heading'>
+      <details data-testid='challenge-transcript' open={isOpen}>
+        <summary
+          onClick={toggleExpandedState}
+          aria-expanded={isOpen}
+          className='challenge-transcript-heading'
+        >
           {t('learn.transcript')}
         </summary>
         <Spacer size='m' />