Merge pull request #61 from arbisoft-qaisarirfan/add-see-more-toggle-video-description

feat: add "See More" toggle for session description in video detail

Author: farhan2742

src/components/ReadMore/__snapshots__/readMore.test.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReadMore Component should match snapshot 1`] = `
+<DocumentFragment>
+  <p
+    class="MuiTypography-root MuiTypography-bodySmall css-cbjig5-MuiTypography-root-Logo-root"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+    <span>
+      ... 
+    </span>
+    <span
+      aria-hidden="true"
+      class="hidden"
+      data-testid="hidden-text"
+    >
+       accumsan arcu in nunc pharetra, ac consectetur nulla bibendum.
+    </span>
+    <span
+      aria-expanded="false"
+      class="show-more-button"
+      data-testid="show-more-button"
+      role="button"
+      tabindex="0"
+    >
+      Read more
+    </span>
+  </p>
+</DocumentFragment>
+`;

src/components/ReadMore/index.ts

@@ -0,0 +1,5 @@
+import ReadMore from "./readMore";
+
+export * from "./types";
+
+export default ReadMore;

src/components/ReadMore/readMore.stories.tsx

@@ -0,0 +1,68 @@
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import ReadMore from "./readMore";
+import { ReadMoreProps } from "./types";
+
+const meta: Meta<ReadMoreProps> = {
+  title: "Components/ReadMore",
+  component: ReadMore,
+  tags: ["autodocs"],
+  argTypes: {
+    amountOfWords: {
+      control: "number",
+      description: "The number of words to show before truncating the text",
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS class for the component",
+    },
+    showLessText: {
+      control: "text",
+      description: "Text to display for the 'Show Less' button",
+    },
+    showMoreText: {
+      control: "text",
+      description: "Text to display for the 'Show More' button",
+    },
+    text: {
+      control: "text",
+      description: "The full text to display",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ReadMoreProps>;
+
+export const Default: Story = {
+  args: {
+    text: faker.lorem.paragraphs(),
+    showMoreText: "Show More",
+    showLessText: "Show Less",
+    amountOfWords: 36,
+  },
+};
+
+export const CustomAmountOfWords: Story = {
+  args: {
+    ...Default.args,
+    amountOfWords: 20,
+  },
+};
+
+export const LongText: Story = {
+  args: {
+    ...Default.args,
+    text: faker.lorem.paragraphs(),
+  },
+};
+
+export const CustomButtonText: Story = {
+  args: {
+    ...Default.args,
+    showMoreText: "Read More",
+    showLessText: "Read Less",
+  },
+};

src/components/ReadMore/readMore.test.tsx

@@ -0,0 +1,60 @@
+import { customRender, screen, fireEvent } from "@/jest/utils/testUtils";
+
+import ReadMore from "./readMore";
+
+describe("ReadMore Component", () => {
+  const text =
+    // eslint-disable-next-line max-len
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan arcu in nunc pharetra, ac consectetur nulla bibendum.";
+
+  it("renders the initial text correctly", () => {
+    customRender(<ReadMore text={text} amountOfWords={5} showMoreText="Read more" showLessText="Read less" />);
+
+    expect(screen.getByTestId("hidden-text")).not.toHaveTextContent(/Lorem ipsum dolor sit amet/);
+    expect(screen.getByTestId("hidden-text")).toHaveTextContent(/consectetur adipiscing elit/);
+    expect(screen.getByTestId("hidden-text")).toHaveClass("hidden");
+    const showMoreButton = screen.getByTestId("show-more-button");
+    expect(showMoreButton).toHaveTextContent("Read more");
+    expect(showMoreButton).not.toHaveTextContent("Read less");
+  });
+
+  it("expands and collapses text when clicking 'Read more' and 'Read less'", () => {
+    customRender(<ReadMore text={text} amountOfWords={5} showMoreText="Read more" showLessText="Read less" />);
+
+    const showMoreButton = screen.getByText("Read more");
+    expect(showMoreButton).toBeInTheDocument();
+
+    fireEvent.click(showMoreButton);
+    expect(screen.getByTestId("hidden-text")).not.toHaveClass("hidden");
+    expect(screen.getByText("Read less")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("Read less"));
+    expect(screen.getByTestId("hidden-text")).toHaveClass("hidden");
+  });
+
+  it("toggles expansion with keyboard (Enter and Space keys)", () => {
+    customRender(<ReadMore text={text} amountOfWords={5} showMoreText="Read more" showLessText="Read less" />);
+
+    const showMoreButton = screen.getByTestId("show-more-button");
+
+    fireEvent.keyDown(showMoreButton, { key: "Enter" });
+    expect(screen.getByTestId("hidden-text")).not.toHaveClass("hidden");
+
+    fireEvent.keyDown(showMoreButton, { key: " " });
+    expect(screen.getByTestId("hidden-text")).toHaveClass("hidden");
+  });
+
+  it("does not show 'Read more' button if text is shorter than amountOfWords", () => {
+    customRender(<ReadMore text="Short text" amountOfWords={10} showMoreText="Read more" showLessText="Read less" />);
+
+    expect(screen.getByText("Short text")).toBeInTheDocument();
+    expect(screen.queryByText("Read more")).not.toBeInTheDocument();
+  });
+
+  it("should match snapshot", () => {
+    const { asFragment } = customRender(
+      <ReadMore amountOfWords={10} text={text} showMoreText="Read more" showLessText="Read less" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/ReadMore/readMore.tsx

@@ -0,0 +1,54 @@
+import { useState, useMemo, KeyboardEvent } from "react";
+
+import { StyledReadMore } from "./styled";
+import { ReadMoreProps } from "./types";
+
+const ReadMore = ({ className, text, amountOfWords = 36, showMoreText, showLessText }: ReadMoreProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const { visibleText, hiddenText, canExpand } = useMemo(() => {
+    const words = text.split(" ");
+    const canTextExpand = words.length > amountOfWords;
+    return {
+      visibleText: canTextExpand ? words.slice(0, amountOfWords - 1).join(" ") : text,
+      hiddenText: canTextExpand ? words.slice(amountOfWords - 1).join(" ") : "",
+      canExpand: canTextExpand,
+    };
+  }, [text, amountOfWords]);
+
+  const toggleExpand = () => setIsExpanded((prev) => !prev);
+
+  const handleKeyboard = (e: KeyboardEvent<HTMLSpanElement>) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      toggleExpand();
+    }
+  };
+
+  return (
+    <StyledReadMore className={className} variant="bodySmall" color="textSecondary">
+      {visibleText}
+      {canExpand && (
+        <>
+          {!isExpanded && <span>... </span>}
+          <span data-testid="hidden-text" className={!isExpanded ? "hidden" : ""} aria-hidden={!isExpanded}>
+            {" " + hiddenText}
+          </span>
+          <span
+            className="show-more-button"
+            data-testid="show-more-button"
+            role="button"
+            tabIndex={0}
+            aria-expanded={isExpanded}
+            onKeyDown={handleKeyboard}
+            onClick={toggleExpand}
+          >
+            {isExpanded ? showLessText : showMoreText}
+          </span>
+        </>
+      )}
+    </StyledReadMore>
+  );
+};
+
+export default ReadMore;

src/components/ReadMore/styled.tsx

@@ -0,0 +1,18 @@
+import { css, styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+
+export const StyledReadMore = styled(Typography, { name: "Logo" })(() => {
+  return css`
+    .hidden {
+      display: none;
+    }
+    .show-more-button {
+      cursor: pointer;
+      display: block;
+      font-size: 14px;
+      margin-top: 10px;
+      text-decoration: underline;
+      text-transform: capitalize;
+    }
+  `;
+});

src/components/ReadMore/types.ts

@@ -0,0 +1,7 @@
+export interface ReadMoreProps {
+  amountOfWords?: number;
+  className?: string;
+  showLessText: string;
+  showMoreText: string;
+  text: string;
+}

src/features/VideoDetail/videoDetail.tsx

@@ -12,16 +12,19 @@ import { format } from "date-fns";
 import { useParams } from "next/navigation";
 
 import MainLayoutContainer from "@/components/containers/MainLayoutContainer";
+import ReadMore from "@/components/ReadMore";
 import RecommendedVideoCard, { RecommendedVideoCardProps } from "@/components/RecommendedVideoCard";
 import VideoPlayer from "@/components/VideoPlayer";
 import useNavigation from "@/hooks/useNavigation";
 import { useEventDetailQuery, useEventTagsQuery } from "@/redux/events/apiSlice";
+import { useTranslation } from "@/services/i18n/client";
 import { convertSecondsToFormattedTime } from "@/utils/utils";
 
 import { StyledDetailSection, StyledNotesSection, StyledTitleSection, TagsContainer } from "./styled";
 
 const VideoDetail = () => {
   const { videoId } = useParams<{ videoId: string }>();
+  const { t } = useTranslation("common");
 
   const { navigateTo } = useNavigation();
 
@@ -114,9 +117,7 @@ const VideoDetail = () => {
           <StyledNotesSection>
             <Typography variant="h5">Session Notes</Typography>
             <div className="description">
-              <Typography variant="bodySmall" color="textSecondary">
-                {dataEvent?.description}
-              </Typography>
+              <ReadMore text={dataEvent?.description ?? ""} showLessText={t("show_less")} showMoreText={t("show_more")} />
             </div>
           </StyledNotesSection>
         </>

src/services/i18n/locales/en/common.json

@@ -3,5 +3,7 @@
   "videos": "Videos",
   "light": "Light",
   "system": "System",
-  "dark": "Dark"
+  "dark": "Dark",
+  "show_less": "Show Less",
+  "show_more": "Show More"
 }