Add show more collapsible title

quran · Feb 29, 2024 · 3974c51 · 3974c51
1 parent 1e77e36
commit 3974c51
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -207,6 +207,7 @@
   "language": "Language",
   "languages": "Languages",
   "learn-more": "Learn more",
+  "show-more": "Show more",
   "learning-plans": "Learning Plans",
   "less": "Less",
   "loading": "Loading",

diff --git a/src/components/RamadanActivity/ReadMoreCollapsible/index.tsx b/src/components/RamadanActivity/ReadMoreCollapsible/index.tsx
@@ -19,12 +19,22 @@ export enum Section {
   INSPIRING_READING = 'inspiring_reading',
 }
 
+export enum TitleType {
+  SHOW_MORE = 'show_more',
+  LEARN_MORE = 'learn_more',
+}
+
 type Props = {
   children: React.ReactNode;
   section: Section;
+  titleType?: TitleType;
 };
 
-const ReadMoreCollapsible: React.FC<Props> = ({ children, section }) => {
+const ReadMoreCollapsible: React.FC<Props> = ({
+  children,
+  section,
+  titleType = TitleType.LEARN_MORE,
+}) => {
   const { t } = useTranslation('common');
 
   const onCollapseOpenChange = (isCollapseOpen: boolean) => {
@@ -39,7 +49,11 @@ const ReadMoreCollapsible: React.FC<Props> = ({ children, section }) => {
       <Collapsible
         direction={CollapsibleDirection.Right}
         onOpenChange={(isCollapseOpen) => onCollapseOpenChange(isCollapseOpen)}
-        title={<span className={styles.title}>{t('learn-more')}</span>}
+        title={
+          <span className={styles.title}>
+            {t(titleType === TitleType.LEARN_MORE ? 'learn-more' : 'show-more')}
+          </span>
+        }
         prefix={<ChevronDownIcon />}
         shouldRotatePrefixOnToggle
       >

diff --git a/src/pages/ramadan-activities/index.tsx b/src/pages/ramadan-activities/index.tsx
@@ -10,7 +10,10 @@ import NextSeoWrapper from '@/components/NextSeoWrapper';
 import PageContainer from '@/components/PageContainer';
 import Hero from '@/components/RamadanActivity/Hero';
 import InlineLink from '@/components/RamadanActivity/InlineLink';
-import ReadMoreCollapsible, { Section } from '@/components/RamadanActivity/ReadMoreCollapsible';
+import ReadMoreCollapsible, {
+  Section,
+  TitleType,
+} from '@/components/RamadanActivity/ReadMoreCollapsible';
 import Button, { ButtonVariant } from '@/dls/Button/Button';
 import styles from '@/pages/contentPage.module.scss';
 import { logButtonClick } from '@/utils/eventLogger';
@@ -338,7 +341,10 @@ const RamadanActivitiesPage: NextPage = (): JSX.Element => {
                 />
               </li>
             </ul>
-            <ReadMoreCollapsible section={Section.INSPIRING_READING}>
+            <ReadMoreCollapsible
+              section={Section.INSPIRING_READING}
+              titleType={TitleType.SHOW_MORE}
+            >
               <ul>
                 <li>
                   <InlineLink