refactor(accordion): Namespace css prefix (digdir#1846)

Feedback changes from pull request
poi33 · Apr 25, 2024 · ab2228b · ab2228b
1 parent f045be5
commit ab2228b
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 184 deletions.
diff --git a/packages/css/accordion.css b/packages/css/accordion.css
@@ -1,32 +1,32 @@
 @layer fds.accordion {
-  .accordion {
+  .fds-accordion {
     --fds-accordion-border-radius: var(--fds-border_radius-interactive);
     --fds-accordion-border-color: var(--fds-semantic-border-neutral-subtle);
 
     border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
     box-sizing: border-box;
   }
 
-  .accordion--border {
+  .fds-accordion--border {
     border: 1px solid var(--fds-accordion-border-color);
     border-radius: var(--fds-accordion-border-radius);
   }
 
-  .accordion__expand-icon {
+  .fds-accordion__expand-icon {
     border-radius: var(--fds-border_radius-interactive);
   }
 
-  .accordion__content {
+  .fds-accordion__content {
     padding: var(--fds-spacing-5, 1rem);
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .accordion__header {
+  .fds-accordion__header {
     margin: 0;
   }
 
-  .accordion__button {
+  .fds-accordion__button {
     width: 100%;
     display: flex;
     justify-content: flex-start;
@@ -40,99 +40,92 @@
     padding: var(--fds-spacing-4);
   }
 
-  .accordion--border .accordion__button {
+  .fds-accordion--border .fds-accordion__button {
     border-radius: var(--fds-accordion-border-radius);
   }
 
 
-  .accordion__item:focus-within {
+  .fds-accordion__item:focus-within {
     position: relative;
   }
 
-  /*
-  * I Think this is unused? The button has no siblings. accordion content has no border
-  .accordion__item:where(.accordion__content--open) .accordion__button:hover+* .accordion__content {
-    border-color: var(--fds-semantic-border-neutral-strong);
-  }
-  */
-
-  .accordion__item:where(.accordion__item--open) .accordion__expand-icon {
+  .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__expand-icon {
     transform: rotateZ(180deg);
   }
 
-  .accordion--neutral,
-  .accordion--neutral .accordion__button {
+  .fds-accordion--neutral,
+  .fds-accordion--neutral .fds-accordion__button {
     background-color: var(--fds-semantic-surface-neutral-default);
   }
 
-  .accordion--subtle,
-  .accordion--subtle .accordion__button {
+  .fds-accordion--subtle,
+  .fds-accordion--subtle .fds-accordion__button {
     background-color: var(--fds-semantic-surface-neutral-subtle);
   }
 
-  .accordion--first,
-  .accordion--first .accordion__button {
+  .fds-accordion--first,
+  .fds-accordion--first .fds-accordion__button {
     --fds-accordion-border-color: var(--fds-semantic-border-first-default);
 
     background: var(--fds-semantic-surface-first-light);
   }
 
 
-  .accordion--second,
-  .accordion--second .accordion__button {
+  .fds-accordion--second,
+  .fds-accordion--second .fds-accordion__button {
     --fds-accordion-border-color: var(--fds-semantic-border-second-default);
 
     background: var(--fds-semantic-surface-second-light);
   }
 
 
-  .accordion--third,
-  .accordion--third .accordion__button {
+  .fds-accordion--third,
+  .fds-accordion--third .fds-accordion__button {
     --fds-accordion-border-color: var(--fds-semantic-border-third-default);
 
     background: var(--fds-semantic-surface-third-light);
   }
 
-  .accordion--first .accordion__item:where(.accordion__item--open) .accordion__button,
-  .accordion--second .accordion__item:where(.accordion__item--open) .accordion__button,
-  .accordion--third .accordion__item:where(.accordion__item--open) .accordion__button {
+  .fds-accordion--first .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
+  .fds-accordion--second .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
+  .fds-accordion--third .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
     background-color: rgba(0 0 0 / 0.03);
   }
 
-  .accordion--neutral .accordion__item:where(.accordion__item--open) .accordion__button,
-  .accordion--subtle .accordion__item:where(.accordion__item--open) .accordion__button {
+  .fds-accordion--neutral .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
+  .fds-accordion--subtle .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
     background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
   }
 
-  .accordion--border .accordion__item:first-child .accordion__button {
+  .fds-accordion--border .fds-accordion__item:first-child .fds-accordion__button {
     border-top: 0;
   }
 
-  .accordion--first .accordion__item:not(:first-child) .accordion__button,
-  .accordion--second .accordion__item:not(:first-child) .accordion__button,
-  .accordion--third .accordion__item:not(:first-child) .accordion__button {
+  .fds-accordion--first .fds-accordion__item:not(:first-child) .fds-accordion__button,
+  .fds-accordion--second .fds-accordion__item:not(:first-child) .fds-accordion__button,
+  .fds-accordion--third .fds-accordion__item:not(:first-child) .fds-accordion__button {
     border-top: 1px solid var(--fds-semantic-surface-neutral-default);
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .accordion__button:hover .accordion__expand-icon {
+    .fds-accordion__button:hover .fds-accordion__expand-icon {
       background-color: rgba(0 0 0 / 0.1);
     }
 
-    .accordion--neutral .accordion__button:hover,
-    .accordion--subtle .accordion__button:hover {
+    .fds-accordion--neutral .fds-accordion__button:hover,
+    .fds-accordion--subtle .fds-accordion__button:hover {
       background-color: var(--fds-semantic-surface-neutral-subtle-hover);
     }
 
-    .accordion--first .accordion__button:hover {
+    .fds-accordion--first .fds-accordion__button:hover {
       background-color: var(--fds-semantic-surface-first-light-hover);
     }
 
-    .accordion--second .accordion__button:hover {
+    .fds-accordion--second .fds-accordion__button:hover {
       background-color: var(--fds-semantic-surface-second-light-hover);
     }
 
-    .accordion--third .accordion__button:hover {
+    .fds-accordion--third .fds-accordion__button:hover {
       background-color: var(--fds-semantic-surface-third-light-hover);
     }
   }

diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
@@ -517,140 +517,6 @@
   }
 }
 
-@layer fds.accordion {
-  .fds-accordion-accordion-a8137c3d {
-    --fds-accordion-border-radius: var(--fds-border_radius-interactive);
-    --fds-accordion-border-color: var(--fds-semantic-border-neutral-subtle);
-
-    border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
-    box-sizing: border-box;
-  }
-
-  .fds-accordion-border-a8137c3d {
-    border: 1px solid var(--fds-accordion-border-color);
-    border-radius: var(--fds-accordion-border-radius);
-  }
-
-  .fds-accordion-expandIcon-a8137c3d {
-    border-radius: var(--fds-border_radius-interactive);
-  }
-
-  .fds-accordion-content-a8137c3d {
-    padding: var(--fds-spacing-5, 1rem);
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .fds-accordion-header-a8137c3d {
-    margin: 0;
-  }
-
-  .fds-accordion-accordionButton-a8137c3d {
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--fds-spacing-2);
-    margin: 0;
-    text-align: left;
-    cursor: pointer;
-    border: none;
-    border-top: 1px solid var(--fds-semantic-border-neutral-subtle);
-    padding: var(--fds-spacing-4);
-  }
-
-  .fds-accordion-border-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    border-radius: var(--fds-accordion-border-radius);
-  }
-
-  .fds-accordion-item-a8137c3d:focus-within {
-    position: relative;
-  }
-
-  .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d:hover + * .fds-accordion-content-a8137c3d {
-    border-color: var(--fds-semantic-border-neutral-strong);
-  }
-
-  .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-expandIcon-a8137c3d {
-    transform: rotateZ(180deg);
-  }
-
-  .fds-accordion-neutral-a8137c3d,
-  .fds-accordion-neutral-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    background-color: var(--fds-semantic-surface-neutral-default);
-  }
-
-  .fds-accordion-subtle-a8137c3d,
-  .fds-accordion-subtle-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    background-color: var(--fds-semantic-surface-neutral-subtle);
-  }
-
-  .fds-accordion-first-a8137c3d,
-  .fds-accordion-first-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    --fds-accordion-border-color: var(--fds-semantic-border-first-default);
-
-    background: var(--fds-semantic-surface-first-light);
-  }
-
-  .fds-accordion-second-a8137c3d,
-  .fds-accordion-second-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    --fds-accordion-border-color: var(--fds-semantic-border-second-default);
-
-    background: var(--fds-semantic-surface-second-light);
-  }
-
-  .fds-accordion-third-a8137c3d,
-  .fds-accordion-third-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    --fds-accordion-border-color: var(--fds-semantic-border-third-default);
-
-    background: var(--fds-semantic-surface-third-light);
-  }
-
-  .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d {
-    background-color: rgba(0 0 0 / 0.03);
-  }
-
-  .fds-accordion-neutral-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-subtle-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d {
-    background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
-  }
-
-  .fds-accordion-border-a8137c3d .fds-accordion-item-a8137c3d:first-child .fds-accordion-accordionButton-a8137c3d {
-    border-top: 0;
-  }
-
-  .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d {
-    border-top: 1px solid var(--fds-semantic-surface-neutral-default);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .fds-accordion-accordionButton-a8137c3d:hover .fds-accordion-expandIcon-a8137c3d {
-      background-color: rgba(0 0 0 / 0.1);
-    }
-
-    .fds-accordion-neutral-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover,
-    .fds-accordion-subtle-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-neutral-subtle-hover);
-    }
-
-    .fds-accordion-first-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-first-light-hover);
-    }
-
-    .fds-accordion-second-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-second-light-hover);
-    }
-
-    .fds-accordion-third-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-third-light-hover);
-    }
-  }
-}
-
 .fds-animateheight-root-a203211d.fds-animateheight-openingOrClosing-a203211d,
 .fds-animateheight-root-a203211d.fds-animateheight-closed-a203211d {
   overflow: hidden;

diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx
@@ -15,9 +15,9 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
   ({ border = false, color = 'neutral', className, ...rest }, ref) => (
     <div
       className={cl(
-        'accordion',
-        border && 'accordion--border',
-        color && `accordion--${color}`,
+        'fds-accordion',
+        border && 'fds-accordion--border',
+        color && `fds-accordion--${color}`,
         className,
       )}
       ref={ref}

diff --git a/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx b/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx
@@ -35,7 +35,7 @@ export const AccordionContent = forwardRef<
       >
         <div
           ref={ref}
-          className={cl('accordion__content', className)}
+          className={cl('fds-accordion__content', className)}
           {...rest}
         >
           {children}

diff --git a/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx b/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
@@ -38,19 +38,19 @@ export const AccordionHeader = forwardRef<
       ref={ref}
       size='xsmall'
       level={level}
-      className={cl('accordion__header', className)}
+      className={cl('fds-accordion__header', className)}
       {...rest}
     >
       <button
         type='button'
-        className={cl('accordion__button', `fds-focus`)}
+        className={cl('fds-accordion__button', `fds-focus`)}
         onClick={handleClick}
         aria-expanded={context.open}
         aria-controls={context.contentId}
       >
         <ChevronDownIcon
           aria-hidden
-          className={cl('accordion__expand-icon')}
+          className='fds-accordion__expand-icon'
           fontSize={'1.5rem'}
         />
         <Paragraph

diff --git a/packages/react/src/components/Accordion/AccordionItem/AccordionItem.tsx b/packages/react/src/components/Accordion/AccordionItem/AccordionItem.tsx
@@ -32,8 +32,8 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
     return (
       <div
         className={cl(
-          'accordion__item',
-          (open ?? internalOpen) && 'accordion__item--open',
+          'fds-accordion__item',
+          (open ?? internalOpen) && 'fds-accordion__item--open',
           className,
         )}
         ref={ref}