Merge pull request #771 from DTS-STN/ken/collapse-slim-variant

Add variant for collapse component styling
DTS-STN · Nov 15, 2024 · 544de49 · 544de49
2 parents 308ea0b + e1a0c45
commit 544de49
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 40 deletions.
diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
@@ -1,29 +1,26 @@
 import { useId } from 'react'
 
+const variants = {
+  slim: 'text-base',
+  default: 'rounded border',
+}
 export interface CollapseProps {
   title: string
   children?: React.ReactNode
-  detailProps?: string
-  summaryProps?: string
+  variant?: keyof typeof variants
 }
 
-const Collapse = ({
-  title,
-  children,
-  detailProps,
-  summaryProps,
-}: CollapseProps) => {
+const Collapse = ({ title, children, variant = 'default' }: CollapseProps) => {
   const id = useId()
   return (
     <details
       aria-describedby={`${id}-details-summary`}
-      className={'mb-3 max-w-prose p-3 ' + detailProps}
+      className={`mb-3 max-w-prose p-3 ${variants[variant]}`}
     >
       <summary
         id={`${id}-details-summary`}
         className={
-          'cursor-pointer text-blue-light hover:text-link-selected focus:text-link-selected ' +
-          summaryProps
+          'cursor-pointer text-blue-light hover:text-link-selected hover:underline focus:text-link-selected focus:underline '
         }
       >
         {title}

diff --git a/src/pages/email.tsx b/src/pages/email.tsx
@@ -245,10 +245,7 @@ const Email = () => {
               required
               helpMessage={t('email.help-message')}
               extraContent={
-                <Collapse
-                  title={t('email.for-child.title')}
-                  detailProps="text-base"
-                >
+                <Collapse title={t('email.for-child.title')} variant="slim">
                   <p className="mt-4 border-l-[6px] border-gray-400 pl-6 text-base text-gray-600">
                     <Trans i18nKey="email.for-child.help-message" ns="email" />
                   </p>
@@ -270,7 +267,7 @@ const Email = () => {
                 <Trans i18nKey="given-name.help-message" ns="email" />
               }
               extraContent={
-                <Collapse title={t('given-name.title')} detailProps="text-base">
+                <Collapse title={t('given-name.title')} variant="slim">
                   <p className="mt-4 border-l-[6px] border-gray-400 pl-6 text-base text-gray-600">
                     <Trans i18nKey="one-name" ns="email" />
                   </p>

diff --git a/src/pages/expectations.tsx b/src/pages/expectations.tsx
@@ -46,11 +46,7 @@ const Expectations = () => {
           <p>{t('not-liable')}</p>
           <h2 className="h2">{t('header-privacy')}</h2>
           <p>{t('privacy-description')}</p>
-          <Collapse
-            title={t('header-privacy')}
-            detailProps="rounded border"
-            summaryProps="hover:underline focus:underline"
-          >
+          <Collapse title={t('header-privacy')}>
             <p>
               <Trans i18nKey={'description-privacy.1'} ns="expectations" />
             </p>

diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx
@@ -53,11 +53,7 @@ const Landing = () => {
           {t('where-to-find.applied-in-person.header')}
         </h3>
         <p>{t('where-to-find.applied-in-person.text')}</p>
-        <Collapse
-          title={t('receipt-image-1.title')}
-          detailProps="rounded border"
-          summaryProps="hover:underline focus:underline"
-        >
+        <Collapse title={t('receipt-image-1.title')}>
           <div className="mt-3 max-w-prose border-t p-3">
             <ExampleImage
               imageProps={{
@@ -85,11 +81,7 @@ const Landing = () => {
             </ul>
           </div>
         </Collapse>
-        <Collapse
-          title={t('receipt-image-2.title')}
-          detailProps="rounded border"
-          summaryProps="hover:underline focus:underline"
-        >
+        <Collapse title={t('receipt-image-2.title')}>
           <div className="mt-3 max-w-prose border-t p-3">
             <ExampleImage
               imageProps={{
@@ -138,11 +130,7 @@ const Landing = () => {
             </ul>
           </div>
         </Collapse>
-        <Collapse
-          title={t('receipt-image-3.title')}
-          detailProps="rounded border"
-          summaryProps="hover:underline focus:underline"
-        >
+        <Collapse title={t('receipt-image-3.title')}>
           <div className="mt-3 max-w-prose border-t p-3">
             <ExampleImage
               imageProps={{

diff --git a/src/pages/status.tsx b/src/pages/status.tsx
@@ -246,10 +246,7 @@ const Status = () => {
                   <Trans i18nKey="given-name.help-message" ns="status" />
                 }
                 extraContent={
-                  <Collapse
-                    title={t('given-name.title')}
-                    detailProps="text-base"
-                  >
+                  <Collapse title={t('given-name.title')} variant="slim">
                     <p className="mt-4 border-l-[6px] border-gray-400 pl-6 text-base text-gray-600">
                       <Trans i18nKey="one-name" ns="status" />
                     </p>