10339: accordion styles

flexion · Sep 17, 2024 · c5092f2 · c5092f2
1 parent a5e1fac
commit c5092f2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/web-client/src/styles/custom.scss b/web-client/src/styles/custom.scss
@@ -1385,12 +1385,10 @@ hr.lighter {
   font-size: 20px !important;
 }
 
-
 .usa-accordion__heading:not(:first-child) {
   margin-top: 1rem;
 }
 
-
 .all-columns-view {
   column-count: 4;
 
@@ -2408,4 +2406,9 @@ button.change-scanner-button {
 .accordion-title {
   padding-top: 24px;
   padding-bottom: 24px;
-}
+}
+
+.padding-0 {
+  // This has higher importance than uwds padding-0
+  padding: 0;
+}
diff --git a/web-client/src/ustc-ui/Accordion/Accordion.tsx b/web-client/src/ustc-ui/Accordion/Accordion.tsx
@@ -27,12 +27,14 @@ export const Accordion = ({
 
 export const AccordionItem = ({
   children,
-  className,
+  contentClassName,
+  headerClassName,
   initiallyOpen = false,
   title,
 }: {
   initiallyOpen?: boolean;
-  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
   children: ReactNode;
   title: string;
 }) => {
@@ -41,11 +43,15 @@ export const AccordionItem = ({
 
   return (
     <>
-      <h3 className="usa-accordion__heading">
+      <h3 className={classNames('usa-accordion__heading')}>
         <button
           aria-controls={id}
           aria-expanded={isOpen}
-          className="usa-accordion__button"
+          className={classNames(
+            'usa-accordion__button',
+            'accordion-title',
+            headerClassName,
+          )}
           onClick={() => {
             setIsOpen(!isOpen);
           }}
@@ -54,7 +60,7 @@ export const AccordionItem = ({
         </button>
       </h3>
       <div
-        className={classNames('usa-accordion__content', className)}
+        className={classNames('usa-accordion__content', contentClassName)}
         hidden={!isOpen}
         id={id}
       >

diff --git a/web-client/src/views/Dashboards/FilingFeeOptions.tsx b/web-client/src/views/Dashboards/FilingFeeOptions.tsx
@@ -33,7 +33,7 @@ export const FilingFeeOptions = function () {
 
         <Accordion>
           <AccordionItem
-            contentClassName="bg-gray padding-0"
+            contentClassName="bg-gray padding-x-0"
             headerClassName="padding-0"
             title="Other options"
           >