fix(Accordion): rename to details (#2824)

- Fixes #2364 - `data-color` throws an type error in `showcase.tsx` but this is not related to this branch - Color of details/cards will be adjusted by design, but they wanted to move forward with the currently implemented logic for now --------- Co-authored-by: Tobias Barsnes <[email protected]>
digdir · Nov 26, 2024 · 2b14e96 · 2b14e96
1 parent 6c5f599
commit 2b14e96
Show file tree

Hide file tree

Showing 28 changed files with 549 additions and 616 deletions.
diff --git a/apps/_components/src/ColorModal/ColorModal.tsx b/apps/_components/src/ColorModal/ColorModal.tsx
@@ -97,25 +97,25 @@ export const ColorModal = ({
           </div>
           <div className={classes.right} style={{ backgroundColor: hex }}></div>
         </div>
-        {/* <Accordion.Root
+        {/* <Details.Root
             color='neutral'
             className={classes.accordion}
           >
-            <Accordion.Item>
-              <Accordion.Heading
+            <Details.Item>
+              <Details.Summary
                 level={3}
                 className={classes.accordionHeading}
               >
                 Vis kontrastgrenser mot relevante farger
-              </Accordion.Heading>
-              <Accordion.Content className={classes.accordionContent}>
+              </Details.Summary>
+              <Details.Content className={classes.accordionContent}>
                 <Boxes
                   selectedColor={hex}
                   colorTheme={namespace}
                 />
-              </Accordion.Content>
-            </Accordion.Item>
-          </Accordion.Root> */}
+              </Details.Content>
+            </Details.Item>
+          </Details.Root> */}
       </Modal.Block>
     </Modal>
   );

diff --git a/apps/_components/src/Showcase/Showcase.tsx b/apps/_components/src/Showcase/Showcase.tsx
@@ -1,11 +1,11 @@
 'use client';
 import {
-  Accordion,
   Avatar,
   Button,
   Card,
   Checkbox,
   Combobox,
+  Details,
   Divider,
   Fieldset,
   Heading,
@@ -280,40 +280,40 @@ export function Showcase({ className, ...props }: ShowcaseProps) {
       </div>
       <div className={cl(classes.card, classes.faq)}>
         <Heading className={classes.cardTitle}>Ofte stillte spørsmål</Heading>
-        <Accordion data-color='brand3' border>
-          <Accordion.Item>
-            <Accordion.Heading>
+        <Card data-color='neutral'>
+          <Details>
+            <Details.Summary>
               Hvem kan registrere seg i Frivillighetsregisteret?
-            </Accordion.Heading>
-            <Accordion.Content>
+            </Details.Summary>
+            <Details.Content>
               For å kunne bli registrert i Frivillighetsregisteret, må
               organisasjonen drive frivillig virksomhet. Det er bare foreninger,
               stiftelser og aksjeselskap som kan registreres. Virksomheten kan
               ikke dele ut midler til fysiske personer. Virksomheten må ha et
               styre.
-            </Accordion.Content>
-          </Accordion.Item>
-          <Accordion.Item>
-            <Accordion.Heading>
+            </Details.Content>
+          </Details>
+          <Details>
+            <Details.Summary>
               Hvordan går jeg fram for å registrere i Frivillighetsregisteret?
-            </Accordion.Heading>
-            <Accordion.Content>
+            </Details.Summary>
+            <Details.Content>
               Virksomheten må være registrert i Enhetsregisteret før den kan bli
               registrert i Frivillighetsregisteret. Du kan registrere i begge
               registrene samtidig i Samordnet registermelding.
-            </Accordion.Content>
-          </Accordion.Item>
-          <Accordion.Item>
-            <Accordion.Heading>
+            </Details.Content>
+          </Details>
+          <Details>
+            <Details.Summary>
               Hvordan går jeg fram for å registrere i Frivillighetsregisteret?
-            </Accordion.Heading>
-            <Accordion.Content>
+            </Details.Summary>
+            <Details.Content>
               Virksomheten må være registrert i Enhetsregisteret før den kan bli
               registrert i Frivillighetsregisteret. Du kan registrere i begge
               registrene samtidig i Samordnet registermelding.
-            </Accordion.Content>
-          </Accordion.Item>
-        </Accordion>
+            </Details.Content>
+          </Details>
+        </Card>
       </div>
     </div>
   );

diff --git a/apps/storefront/app/bloggen/2024/v1rc1/page.mdx b/apps/storefront/app/bloggen/2024/v1rc1/page.mdx
@@ -98,7 +98,7 @@ Denne installerer alle tre pakken, og inneholder tokens, CSS og React komponente
 Denne kan legges hvor som helst, og endrer alle barn til modusen du har valgt.
 
 <CodeSnippet language='ts'>
-  {`<Accordion data-color-scheme='dark'>...</Accordion>`}
+  {`<Details data-color-scheme='dark'>...</Details>`}
 </CodeSnippet>
 
 #### Design-tokens templat

diff --git a/apps/storefront/app/komponenter/component-list.ts b/apps/storefront/app/komponenter/component-list.ts
@@ -1,8 +1,8 @@
 export const data = [
   {
-    title: 'Accordion',
-    image: 'Accordion.svg',
-    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-accordion--docs',
+    title: 'Details',
+    image: 'Details.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-details--docs',
   },
   {
     title: 'Alert',

diff --git a/apps/storefront/app/monstre/feilmeldinger/page.mdx b/apps/storefront/app/monstre/feilmeldinger/page.mdx
@@ -3,10 +3,10 @@ import {
   CardContent,
   Heading,
   Paragraph,
-  Accordion,
-  AccordionItem,
-  AccordionContent,
-  AccordionHeading
+  Details,
+  DetailsItem,
+  DetailsContent,
+  DetailsSummary
 } from '@digdir/designsystemet-react';
 
 import { Image } from '@components';
@@ -184,12 +184,12 @@ Her må vi gjøre det så tydelig som mulig for brukeren at flere felt påvirker
 
 I dette eksempelet har vi en gruppe med felt, der brukeren ikke nødvendigvis har alle opplysningene, men må fylle ut minst ett felt.
 
-<Accordion
+<Details
   color='neutral'
 >
-  <AccordionItem>
-    <AccordionHeading>Eksempel på feilmelding som gjelder flere felt</AccordionHeading>
-    <AccordionContent
+  <DetailsItem>
+    <DetailsSummary>Eksempel på feilmelding som gjelder flere felt</DetailsSummary>
+    <DetailsContent
         style={{
         paddingTop: '0px',
         paddingBottom: '0px',
@@ -215,9 +215,9 @@ I dette eksempelet har vi en gruppe med felt, der brukeren ikke nødvendigvis ha
         alt='Skjermbilde av skjema med en gruppe av felter. Brukeren har fylt ut minst ett felt, men har en feil i utfyllingen. Feilmeldingen vises da på vanlig måte under det aktuelle feltet. '
         boxShadow={false}
       />
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
+    </DetailsContent>
+  </DetailsItem>
+</Details>
 
 ## Kode
 

diff --git a/apps/storefront/components/MdxContent/MdxContent.module.css b/apps/storefront/components/MdxContent/MdxContent.module.css
@@ -148,7 +148,7 @@
 
   & :not([data-unstyled]) {
     &:is(p, h2, h3, h4, ul, ol),
-    &[class~='ds-accordion'],
+    &[class~='ds-accordion'] /* TODO: EIRIK */,
     &[class~='ds-card'] {
       max-width: 740px;
     }
@@ -175,7 +175,7 @@
     & h4,
     & ul,
     & ol,
-    & [class~='ds-accordion'],
+    & [class~='ds-accordion'] /* TODO: EIRIK */,
     & [class~='ds-card'] {
       max-width: unset;
     }

diff --git a/...blic/img/component-previews/Accordion.svg → ...public/img/component-previews/Details.svg b/...blic/img/component-previews/Accordion.svg → ...public/img/component-previews/Details.svg
diff --git a/packages/cli/src/migrations/beta-to-v1.ts b/packages/cli/src/migrations/beta-to-v1.ts
@@ -10,7 +10,7 @@ export default (glob?: string) =>
       }),
       // New component token prefixes
       cssVarRename({
-        '--fds-accordion': '--dsc-accordion',
+        '--fds-accordion': '--dsc-accordion' /* TODO: EIRIK */,
         '--fds-alert': '--dsc-alert',
         '--fds-btn': '--dsc-btn',
         '--fds-checkbox': '--dsc-checkbox',

diff --git a/packages/css/src/accordion.css b/packages/css/src/accordion.css
diff --git a/packages/css/src/card.css b/packages/css/src/card.css
@@ -71,9 +71,16 @@
     }
   }
 
-  &:has(> .ds-card__block) {
+  &:has(> .ds-card__block, .ds-details) {
     padding: 0; /* Let Card.Block own the padding */
   }
+
+  & > .ds-details:first-child {
+    border-top: 0;
+  }
+  & > .ds-details:last-child {
+    border-bottom: 0;
+  }
 }
 
 /* Using :where to overwrite user agent CSS, but not our own CSS */