Change Accordion to Accoridon.Root

digdir · Jun 18, 2024 · d20f272 · d20f272
1 parent 963dc4b
commit d20f272
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 30 deletions.
diff --git a/packages/react/src/components/Accordion/Accordion.mdx b/packages/react/src/components/Accordion/Accordion.mdx
@@ -25,7 +25,7 @@ Med `Accordion` kan du presentere mye innhold på liten plass i en eller flere r
 ```tsx
 import { Accordion } from '@digdir/designsystemet-react';
 
-<Accordion>
+<Accordion.Root>
   <Accordion.Item>
     <Accordion.Heading>Accordion heading text</Accordion.Heading>
     <Accordion.Content>Accordion content</Accordion.Content>
@@ -34,7 +34,7 @@ import { Accordion } from '@digdir/designsystemet-react';
     <Accordion.Heading>Accordion heading text</Accordion.Heading>
     <Accordion.Content>Accordion content</Accordion.Content>
   </Accordion.Item>
-</Accordion>;
+</Accordion.Root>;
 ```
 
 ## Eksempler

diff --git a/packages/react/src/components/Accordion/Accordion.stories.tsx b/packages/react/src/components/Accordion/Accordion.stories.tsx
@@ -7,14 +7,14 @@ import { Accordion } from '.';
 
 export default {
   title: 'Komponenter/Accordion',
-  component: Accordion,
+  component: Accordion.Root,
   parameters: {
     layout: 'padded',
   },
 } as Meta;
 
-export const Preview: StoryFn<typeof Accordion> = (args) => (
-  <Accordion {...args}>
+export const Preview: StoryFn<typeof Accordion.Root> = (args) => (
+  <Accordion.Root {...args}>
     <Accordion.Item>
       <Accordion.Heading level={3}>
         Hvem kan registrere seg i Frivillighetsregisteret?
@@ -36,23 +36,23 @@ export const Preview: StoryFn<typeof Accordion> = (args) => (
         registrene samtidig i Samordnet registermelding.
       </Accordion.Content>
     </Accordion.Item>
-  </Accordion>
+  </Accordion.Root>
 );
 
-export const AccordionBorder: StoryFn<typeof Accordion> = () => (
-  <Accordion
+export const AccordionBorder: StoryFn<typeof Accordion.Root> = () => (
+  <Accordion.Root
     border
     color='subtle'
   >
     <Accordion.Item>
       <Accordion.Heading level={3}>Vedlegg</Accordion.Heading>
       <Accordion.Content>Vedlegg 1, vedlegg 2, vedlegg 3</Accordion.Content>
     </Accordion.Item>
-  </Accordion>
+  </Accordion.Root>
 );
 
-export const AccordionColor: StoryFn<typeof Accordion> = () => (
-  <Accordion
+export const AccordionColor: StoryFn<typeof Accordion.Root> = () => (
+  <Accordion.Root
     border
     color='brand2'
   >
@@ -74,7 +74,7 @@ export const AccordionColor: StoryFn<typeof Accordion> = () => (
         <Link href='https://minjegerside.brreg.no/'>Min jegerside</Link>
       </Accordion.Content>
     </Accordion.Item>
-  </Accordion>
+  </Accordion.Root>
 );
 
 // Default values are selected in Controls
@@ -83,14 +83,14 @@ Preview.args = {
   color: 'neutral',
 };
 
-export const Controlled: StoryFn<typeof Accordion> = () => {
+export const Controlled: StoryFn<typeof Accordion.Root> = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
       <Button onClick={() => setOpen(!open)}>Toggle Accordions</Button>
       <br />
-      <Accordion>
+      <Accordion.Root>
         <Accordion.Item open={open}>
           <Accordion.Heading onHeaderClick={() => setOpen(!open)}>
             Enkeltpersonforetak
@@ -126,7 +126,7 @@ export const Controlled: StoryFn<typeof Accordion> = () => {
             risiko? Da kan du vurdere å etablere et ansvarlig selskap.
           </Accordion.Content>
         </Accordion.Item>
-      </Accordion>
+      </Accordion.Root>
     </>
   );
 };
diff --git a/packages/react/src/components/Accordion/Accordion.test.tsx b/packages/react/src/components/Accordion/Accordion.test.tsx
@@ -10,14 +10,14 @@ const TestComponent = ({
   ...rest
 }: Omit<AccordionItemProps, 'children'>): JSX.Element => {
   return (
-    <Accordion>
+    <Accordion.Root>
       <Accordion.Item {...rest}>
         <Accordion.Heading>Accordion Header Title Text</Accordion.Heading>
         <Accordion.Content>
           The fantastic accordion content text
         </Accordion.Content>
       </Accordion.Item>
-    </Accordion>
+    </Accordion.Root>
   );
 };
 

diff --git a/...ct/src/components/Accordion/Accordion.tsx → ...rc/components/Accordion/AccordionRoot.tsx b/...ct/src/components/Accordion/Accordion.tsx → ...rc/components/Accordion/AccordionRoot.tsx
@@ -2,7 +2,7 @@ import type { ReactNode, HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import cl from 'clsx/lite';
 
-export type AccordionProps = {
+export type AccordionRootProps = {
   /** Accordion background color
    * @default neutral
    */
@@ -13,7 +13,7 @@ export type AccordionProps = {
   children: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 
-export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+export const AccordionRoot = forwardRef<HTMLDivElement, AccordionRootProps>(
   ({ border = false, color = 'neutral', className, ...rest }, ref) => {
     return (
       <div
@@ -30,4 +30,4 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
   },
 );
 
-Accordion.displayName = 'Accordion';
+AccordionRoot.displayName = 'Accordion.Root';
diff --git a/packages/react/src/components/Accordion/index.ts b/packages/react/src/components/Accordion/index.ts
@@ -1,32 +1,36 @@
-import type { AccordionProps } from './Accordion';
+import type { AccordionRootProps } from './AccordionRoot';
 import type { AccordionItemProps } from './AccordionItem';
 import type { AccordionContentProps } from './AccordionContent';
 import type { AccordionHeaderProps } from './AccordionHeading';
-import { Accordion as AccordionParent } from './Accordion';
+import { AccordionRoot } from './AccordionRoot';
 import { AccordionItem } from './AccordionItem';
 import { AccordionContent } from './AccordionContent';
 import { AccordionHeading } from './AccordionHeading';
 
-type AccordionComponent = typeof AccordionParent & {
+type AccordionComponent = {
+  Root: typeof AccordionRoot;
   Item: typeof AccordionItem;
   Heading: typeof AccordionHeading;
   Content: typeof AccordionContent;
 };
 
-const Accordion = AccordionParent as AccordionComponent;
+const Accordion = {} as AccordionComponent;
 
+Accordion.Root = AccordionRoot;
 Accordion.Heading = AccordionHeading;
 Accordion.Content = AccordionContent;
 Accordion.Item = AccordionItem;
 
-Accordion.Heading.displayName = 'Accordion.Heading';
-Accordion.Content.displayName = 'Accordion.Content';
-Accordion.Item.displayName = 'Accordion.Item';
-
 export type {
-  AccordionProps,
+  AccordionRootProps,
   AccordionContentProps,
   AccordionHeaderProps,
   AccordionItemProps,
 };
-export { Accordion, AccordionItem, AccordionContent, AccordionHeading };
+export {
+  Accordion,
+  AccordionRoot,
+  AccordionItem,
+  AccordionContent,
+  AccordionHeading,
+};