@purpurds/accordion 5.24.3 → 5.25.0

package/dist/styles.css

@@ -1 +1 @@
-._purpur-accordion_u887g_1{container:accordion/inline-size}._purpur-accordion_u887g_1 ._purpur-accordion__title_u887g_4{margin-bottom:var(--purpur-spacing-300);color:var(--purpur-color-text-default)}@container accordion (min-width: 600px){._purpur-accordion_u887g_1 ._purpur-accordion__title_u887g_4{margin-bottom:var(--purpur-spacing-400)}}._purpur-accordion--negative_u887g_13{background-color:var(--purpur-color-purple-900)}._purpur-accordion--negative_u887g_13 ._purpur-accordion__title_u887g_4{color:var(--purpur-color-text-default-negative)}._purpur-accordion-item_aukzj_1{overflow:hidden;border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-accordion-item_aukzj_1:nth-of-type(1){border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-accordion-item__header_aukzj_8{display:flex}._purpur-accordion-item__trigger_aukzj_11{border:none;padding:0;width:100%;text-align:left;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit;background-color:transparent;transition:background-color var(--purpur-motion-duration-150) ease;display:flex;align-items:center;justify-content:space-between;column-gap:var(--purpur-spacing-100);padding:var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) 0;cursor:pointer;outline:none}@container accordion (min-width: 600px){._purpur-accordion-item__trigger_aukzj_11{padding:var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-300) 0}}@container accordion (min-width: 1024px){._purpur-accordion-item__trigger_aukzj_11{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) var(--purpur-spacing-400) 0}}._purpur-accordion-item__content_aukzj_41{overflow:hidden}._purpur-accordion-item__content_aukzj_41[data-state=open]{animation:_slideDown_aukzj_1 var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item__content_aukzj_41[data-state=closed]{animation:_slideUp_aukzj_1 var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item__contentText_aukzj_50{padding:var(--purpur-spacing-200) 0;max-width:calc(var(--purpur-spacing-1200) / .16)}._purpur-accordion-item__icon_aukzj_54{flex-shrink:0;height:var(--purpur-spacing-300);width:var(--purpur-spacing-300);transition:transform var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item__trigger_aukzj_11[data-state=open]>._purpur-accordion-item__icon_aukzj_54{transform:rotate(180deg)}._purpur-accordion-item_aukzj_1:has(:focus-visible){outline:none;box-shadow:0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus)}._purpur-accordion-item_aukzj_1 ._purpur-accordion-item__title_aukzj_67{max-width:100%}._purpur-accordion-item_aukzj_1 ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item__icon_aukzj_54{color:var(--purpur-color-text-interactive-primary)}._purpur-accordion-item__trigger_aukzj_11:hover{background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-accordion-item__trigger_aukzj_11:hover ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item__trigger_aukzj_11:hover__icon{color:var(--purpur-color-text-interactive-primary-hover)}._purpur-accordion-item__trigger_aukzj_11:active{background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-accordion-item__trigger_aukzj_11:active ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item__trigger_aukzj_11:active__icon{color:var(--purpur-color-text-interactive-primary-active)}._purpur-accordion-item__contentText_aukzj_50 p{color:var(--purpur-color-text-default)}._purpur-accordion-item--negative_aukzj_88{border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative)}._purpur-accordion-item--negative_aukzj_88:nth-of-type(1){border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__icon_aukzj_54{color:var(--purpur-color-text-interactive-primary-negative)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:hover{background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:hover ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:hover ._purpur-accordion-item__icon_aukzj_54{color:var(--purpur-color-border-interactive-primary-negative-hover)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:active{background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:active ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:active ._purpur-accordion-item__icon_aukzj_54{color:var(--purpur-color-border-interactive-primary-negative-active)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__contentText_aukzj_50 p{color:var(--purpur-color-text-default-negative)}@keyframes _slideDown_aukzj_1{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes _slideUp_aukzj_1{0%{height:var(--radix-accordion-content-height)}to{height:0}}
+._purpur-accordion_u887g_1{container:accordion/inline-size}._purpur-accordion_u887g_1 ._purpur-accordion__title_u887g_4{margin-bottom:var(--purpur-spacing-300);color:var(--purpur-color-text-default)}@container accordion (min-width: 600px){._purpur-accordion_u887g_1 ._purpur-accordion__title_u887g_4{margin-bottom:var(--purpur-spacing-400)}}._purpur-accordion--negative_u887g_13{background-color:var(--purpur-color-purple-900)}._purpur-accordion--negative_u887g_13 ._purpur-accordion__title_u887g_4{color:var(--purpur-color-text-default-negative)}._purpur-accordion-item_29ds4_1{border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-accordion-item_29ds4_1:has(button:hover){border-bottom-color:transparent}._purpur-accordion-item_29ds4_1:nth-of-type(1){border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-accordion-item__header_29ds4_10{display:flex}._purpur-accordion-item__trigger_29ds4_13{border:none;padding:0;width:100%;text-align:left;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit;background-color:transparent;transition:background-color var(--purpur-motion-duration-150) ease;display:flex;align-items:center;justify-content:space-between;column-gap:var(--purpur-spacing-100);padding:var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) 0;cursor:pointer;outline:none}@container accordion (min-width: 600px){._purpur-accordion-item__trigger_29ds4_13{padding:var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-300) 0}}@container accordion (min-width: 1024px){._purpur-accordion-item__trigger_29ds4_13{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) var(--purpur-spacing-400) 0}}._purpur-accordion-item__trigger_29ds4_13[data-state=open]>._purpur-accordion-item__trigger__icon_29ds4_43{transform:rotate(180deg)}._purpur-accordion-item__trigger_29ds4_13:hover{background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-accordion-item__trigger_29ds4_13:hover ._purpur-accordion-item__title_29ds4_49,._purpur-accordion-item__trigger_29ds4_13:hover__icon{color:var(--purpur-color-text-interactive-primary-hover)}._purpur-accordion-item__trigger_29ds4_13:active{background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-accordion-item__trigger_29ds4_13:active ._purpur-accordion-item__title_29ds4_49,._purpur-accordion-item__trigger_29ds4_13:active__icon{color:var(--purpur-color-text-interactive-primary-active)}._purpur-accordion-item__trigger_29ds4_13:focus-visible{outline:none;box-shadow:0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);box-sizing:content-box}._purpur-accordion-item__rotate_29ds4_63>._purpur-accordion-item__icon_29ds4_63{transform:rotate(180deg)}._purpur-accordion-item__content_29ds4_66{overflow:hidden;display:grid;grid-template-rows:1fr;padding:var(--purpur-spacing-200) 0;transition:var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);transition-property:grid-template-rows,padding}._purpur-accordion-item__content_29ds4_66[aria-hidden=true]{grid-template-rows:0fr;padding:0;visibility:hidden}._purpur-accordion-item__contentText_29ds4_79{overflow:hidden;max-width:calc(var(--purpur-spacing-1200) / .16)}._purpur-accordion-item__icon_29ds4_63{flex-shrink:0;height:var(--purpur-spacing-300);width:var(--purpur-spacing-300);transition:transform var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item_29ds4_1 ._purpur-accordion-item__title_29ds4_49{max-width:100%}._purpur-accordion-item_29ds4_1 ._purpur-accordion-item__title_29ds4_49,._purpur-accordion-item__icon_29ds4_63{color:var(--purpur-color-text-interactive-primary)}._purpur-accordion-item__contentText_29ds4_79 p{color:var(--purpur-color-text-default)}._purpur-accordion-item--negative_29ds4_98{border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative)}._purpur-accordion-item--negative_29ds4_98:nth-of-type(1){border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative)}._purpur-accordion-item--negative_29ds4_98 ._purpur-accordion-item__title_29ds4_49,._purpur-accordion-item--negative_29ds4_98 ._purpur-accordion-item__icon_29ds4_63{color:var(--purpur-color-text-interactive-primary-negative)}._purpur-accordion-item--negative_29ds4_98 ._purpur-accordion-item__trigger_29ds4_13:hover{background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-accordion-item--negative_29ds4_98 ._purpur-accordion-item__trigger_29ds4_13:hover ._purpur-accordion-item__title_29ds4_49,._purpur-accordion-item--negative_29ds4_98 ._purpur-accordion-item__trigger_29ds4_13:hover ._purpur-accordion-item__icon_29ds4_63{color:var(--purpur-color-border-interactive-primary-negative-hover)}._purpur-accordion-item--negative_29ds4_98 ._purpur-accordion-item__trigger_29ds4_13:active{background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-accordion-item--negative_29ds4_98 ._purpur-accordion-item__trigger_29ds4_13:active ._purpur-accordion-item__title_29ds4_49,._purpur-accordion-item--negative_29ds4_98 ._purpur-accordion-item__trigger_29ds4_13:active ._purpur-accordion-item__icon_29ds4_63{color:var(--purpur-color-border-interactive-primary-negative-active)}._purpur-accordion-item--negative_29ds4_98 ._purpur-accordion-item__contentText_29ds4_79 p{color:var(--purpur-color-text-default-negative)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/accordion",
-  "version": "5.24.3",
+  "version": "5.25.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/accordion.cjs.js",
   "types": "./dist/accordion.d.ts",
@@ -15,11 +15,10 @@
   "source": "src/accordion.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@radix-ui/react-accordion": "~1.1.2",
-    "@purpurds/tokens": "5.24.3",
-    "@purpurds/heading": "5.24.3",
-    "@purpurds/paragraph": "5.24.3",
-    "@purpurds/icon": "5.24.3"
+    "@purpurds/tokens": "5.25.0",
+    "@purpurds/heading": "5.25.0",
+    "@purpurds/icon": "5.25.0",
+    "@purpurds/paragraph": "5.25.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/accordion-item.module.scss

@@ -2,9 +2,11 @@
 
 .purpur-accordion-item {
   $root: &;
-  overflow: hidden;
   border-bottom: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
 
+  &:has(button:hover) {
+    border-bottom-color: transparent;
+  }
   &:nth-of-type(1) {
     border-top: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
   }
@@ -40,22 +42,56 @@
     @container accordion (min-width: #{$purpur-breakpoint-lg}) {
       padding: var(--purpur-spacing-400) var(--purpur-spacing-300) var(--purpur-spacing-400) 0;
     }
-  }
 
-  &__content {
-    overflow: hidden;
+    &[data-state="open"] > &__icon {
+      transform: rotate(180deg);
+    }
+    &:hover {
+      background-color: var(--purpur-color-background-interactive-transparent-hover);
+
+      #{$root}__title,
+      &__icon {
+        color: var(--purpur-color-text-interactive-primary-hover);
+      }
+    }
+
+    &:active {
+      background-color: var(--purpur-color-background-interactive-transparent-active);
+
+      #{$root}__title,
+      &__icon {
+        color: var(--purpur-color-text-interactive-primary-active);
+      }
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);
+      box-sizing: content-box;
+    }
   }
 
-  &__content[data-state="open"] {
-    animation: slideDown var(--purpur-motion-duration-150) ease-in-out;
+  &__rotate > &__icon {
+    transform: rotate(180deg);
   }
 
-  &__content[data-state="closed"] {
-    animation: slideUp var(--purpur-motion-duration-150) ease-in-out;
+  &__content {
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: 1fr;
+    padding: var(--purpur-spacing-200) 0;
+    transition: var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);
+    // Needs to be after transition otherwise it will overwrite it
+    transition-property: grid-template-rows, padding;
+
+    &[aria-hidden="true"] {
+      grid-template-rows: 0fr;
+      padding: 0;
+      visibility: hidden;
+    }
   }
 
   &__contentText {
-    padding: var(--purpur-spacing-200) 0;
+    overflow: hidden;
     max-width: calc(var(--purpur-spacing-1200) / 0.16);
   }
 
@@ -66,15 +102,6 @@
     transition: transform var(--purpur-motion-duration-150) ease-in-out;
   }
 
-  &__trigger[data-state="open"] > &__icon {
-    transform: rotate(180deg);
-  }
-
-  &:has(:focus-visible) {
-    outline: none;
-    box-shadow: 0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);
-  }
-
   #{$root}__title {
     max-width: 100%;
   }
@@ -84,24 +111,6 @@
     color: var(--purpur-color-text-interactive-primary);
   }
 
-  &__trigger:hover {
-    background-color: var(--purpur-color-background-interactive-transparent-hover);
-
-    #{$root}__title,
-    &__icon {
-      color: var(--purpur-color-text-interactive-primary-hover);
-    }
-  }
-
-  &__trigger:active {
-    background-color: var(--purpur-color-background-interactive-transparent-active);
-
-    #{$root}__title,
-    &__icon {
-      color: var(--purpur-color-text-interactive-primary-active);
-    }
-  }
-
   &__contentText p {
     color: var(--purpur-color-text-default);
   }
@@ -141,23 +150,3 @@
     }
   }
 }
-
-@keyframes slideDown {
-  from {
-    height: 0;
-  }
-
-  to {
-    height: var(--radix-accordion-content-height);
-  }
-}
-
-@keyframes slideUp {
-  from {
-    height: var(--radix-accordion-content-height);
-  }
-
-  to {
-    height: 0;
-  }
-}

package/src/accordion-item.tsx

@@ -1,12 +1,12 @@
-import type { ForwardedRef, ReactNode } from "react";
-import React, { forwardRef } from "react";
+import type { ReactNode } from "react";
+import React, { useContext, useId, useState } from "react";
 import type { HeadingTagType } from "@purpurds/heading";
 import { Heading } from "@purpurds/heading";
 import { IconChevronDown } from "@purpurds/icon";
 import { Paragraph } from "@purpurds/paragraph";
-import * as RadixAccordion from "@radix-ui/react-accordion";
 import c from "classnames/bind";
 
+import { NegativeContext } from "./accordion";
 import styles from "./accordion-item.module.scss";
 
 const cx = c.bind(styles);
@@ -21,13 +21,10 @@ export type AccordionItemProps = {
   ["data-testid"]?: string;
   children: ReactNode;
   /**
-   * Different accordion styling
-   * */
+   * @deprecated
+   */
   negative?: boolean;
   className?: string;
-  /**
-   * Title of the accordion item
-   * */
   title: string;
   /**
    * This is the heading tag used for the accordion item title. Defaults to h3.
@@ -35,9 +32,13 @@ export type AccordionItemProps = {
    */
   titleTag?: HeadingTagType;
   /**
-   * Value is used to identify the accordion. By default title is used for that purpose. If there are identical titles in the accordion, then value should be defined.
-   * */
+   * @deprecated
+   */
   value?: string;
+  /**
+   * Makes it possible to set the initial state to opened.
+   * */
+  initialOpen?: boolean;
   /**
    * onClick is called when accordion item is expanded or collapsed
    * event.currentTarget.dataset.state will be either "open" or "closed"
@@ -45,51 +46,67 @@ export type AccordionItemProps = {
   onClick?: (event: AccordionItemOnClickEvent) => void;
 };
 
-export const AccordionItem = forwardRef(
-  (
+export const AccordionItem = ({
+  children,
+  className,
+  title,
+  titleTag = "h3",
+  initialOpen = false,
+  onClick,
+  ...props
+}: AccordionItemProps) => {
+  const negative = useContext(NegativeContext);
+  const uid = useId();
+  const [hidden, setHidden] = useState(!initialOpen);
+
+  const classes = cx([
+    className,
+    rootClassName,
     {
-      children,
-      className,
-      title,
-      titleTag = "h3",
-      negative,
-      onClick,
-      ...props
-    }: AccordionItemProps,
-    ref: ForwardedRef<HTMLButtonElement>
-  ) => {
-    const classes = cx([
-      className,
-      rootClassName,
-      {
-        [`${rootClassName}--negative`]: negative,
-      },
-    ]);
+      [`${rootClassName}--negative`]: negative,
+    },
+  ]);
 
-    return (
-      <RadixAccordion.Item className={classes} value={title} {...props}>
-        <RadixAccordion.Header className={cx(`${rootClassName}__header`)} asChild>
-          <Heading tag={titleTag} variant="title-100" className={cx(`${rootClassName}__title`)}>
-            <RadixAccordion.Trigger
-              ref={ref}
-              onClick={onClick}
-              className={cx(`${rootClassName}__trigger`, className)}
-            >
-              {title}
-              <IconChevronDown size="md" className={cx(`${rootClassName}__icon`)} aria-hidden />
-            </RadixAccordion.Trigger>
-          </Heading>
-        </RadixAccordion.Header>
-        <RadixAccordion.Content className={cx(`${rootClassName}__content`, className)}>
-          <div className={cx(`${rootClassName}__contentText`)}>
-            {typeof children === "string" ? (
-              <Paragraph variant="paragraph-200">{children}</Paragraph>
-            ) : (
-              children
-            )}
-          </div>
-        </RadixAccordion.Content>
-      </RadixAccordion.Item>
-    );
-  }
-);
+  return (
+    <div className={classes} {...props}>
+      <Heading
+        tag={titleTag}
+        variant="title-100"
+        className={cx([`${rootClassName}__header`, `${rootClassName}__title`])}
+      >
+        <button
+          type="button"
+          data-state={hidden ? "open" : "close"} // The state is actually set in the onClick, so reversing the data- output state here
+          onClick={(e: AccordionItemOnClickEvent) => {
+            onClick && onClick(e);
+            setHidden(!hidden);
+          }}
+          className={cx(`${rootClassName}__trigger`, className, {
+            [`${rootClassName}__rotate`]: !hidden,
+          })}
+          aria-expanded={!hidden}
+          aria-controls={uid}
+          id={uid + "button"}
+        >
+          {title}
+          <IconChevronDown size="md" className={cx(`${rootClassName}__icon`)} aria-hidden />
+        </button>
+      </Heading>
+      <div
+        className={cx(`${rootClassName}__content`, className)}
+        aria-hidden={hidden}
+        id={uid}
+        aria-labelledby={uid + "button"}
+        role="region"
+      >
+        <div className={cx(`${rootClassName}__contentText`)}>
+          {typeof children === "string" ? (
+            <Paragraph variant="paragraph-200">{children}</Paragraph>
+          ) : (
+            children
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/accordion.stories.tsx

@@ -44,34 +44,56 @@ const meta = {
       },
     },
   },
+  args: {
+    title: "Title goes here",
+    titleVariant: "title-300",
+    defaultValue: ["1"],
+    negative: false,
+  },
 } satisfies Meta<typeof Accordion>;
 
 export default meta;
 type Story = StoryObj<typeof Accordion>;
 
+const text =
+  "Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at rutrum nulla";
+
+const items = Array(3).fill(text);
+
 export const Showcase: Story = {
   render: (args) => (
     <Accordion {...args}>
-      <Accordion.Item title="Section title" value="1">
-        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
-        rutrum nulla.
-      </Accordion.Item>
-
-      <Accordion.Item title="Section title" value="2">
-        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
-        rutrum nulla.
-      </Accordion.Item>
+      {items.map((t, i) => (
+        <Accordion.Item title={`Section title ${i + 1}`} key={i}>
+          {t}
+        </Accordion.Item>
+      ))}
+    </Accordion>
+  ),
+};
 
-      <Accordion.Item title="Section title" value="3">
-        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
-        rutrum nulla.
-      </Accordion.Item>
+export const UsingSchema: Story = {
+  render: (args) => (
+    <Accordion {...args}>
+      {items.map((t, i) => (
+        <Accordion.Item title={`Section title ${i + 1}`} key={i}>
+          {t}
+        </Accordion.Item>
+      ))}
     </Accordion>
   ),
   args: {
-    title: "Title goes here",
-    titleVariant: "title-300",
-    defaultValue: ["1"],
-    negative: false,
+    schema: JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "FAQPage",
+      mainEntity: items.map((question) => ({
+        "@type": "Question",
+        name: question.title,
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: question,
+        },
+      })),
+    }),
   },
 };

package/src/accordion.test.tsx

@@ -37,10 +37,10 @@ describe("Accordion", () => {
     expect(screen.getByRole("heading", { level: 3, name: "Test heading" })).toBeDefined();
   });
 
-  it("should not render accordion item content when trigger is not clicked", () => {
+  it("should render accordion item content when trigger is not clicked", () => {
     setup();
 
-    expect(screen.queryByText("item content")).toBeNull();
+    expect(screen.queryByText("item content")).not.toBeNull();
   });
 
   it("should show/hide accordion item content when trigger is clicked", () => {
@@ -52,7 +52,7 @@ describe("Accordion", () => {
     expect(screen.getByText("item content")).toBeDefined();
 
     fireEvent.click(trigger);
-    expect(screen.queryByText("item content")).toBeNull();
+    expect(screen.queryByText("item content")).not.toBeNull();
   });
 
   it("should render custom accordion item content", () => {
@@ -69,18 +69,4 @@ describe("Accordion", () => {
 
     expect(screen.getByRole("link", { name: "Test link" })).toBeDefined();
   });
-
-  it("should send onClick event when trigger is clicked", () => {
-    setup();
-
-    const trigger = screen.getByRole("button");
-
-    fireEvent.click(trigger);
-    expect(onClickFunction).toHaveBeenCalled();
-    expect(onClickFunction.mock.calls[0][0].target.dataset.state).toBe("open");
-
-    fireEvent.click(trigger);
-    expect(onClickFunction).toHaveBeenCalled();
-    expect(onClickFunction.mock.calls[0][0].target.dataset.state).toBe("closed");
-  });
 });

package/src/accordion.tsx

@@ -1,12 +1,5 @@
-import React, {
-  Children,
-  cloneElement,
-  JSXElementConstructor,
-  ReactElement,
-  ReactNode,
-} from "react";
+import React, { createContext, ReactNode } from "react";
 import { Heading, HeadingTagType, TitleVariantType } from "@purpurds/heading";
-import * as RadixAccordion from "@radix-ui/react-accordion";
 import c from "classnames/bind";
 
 import styles from "./accordion.module.scss";
@@ -20,15 +13,23 @@ export type AccordionProps = {
   children: ReactNode;
   className?: string;
   /**
-   * The values of the accordion items that should be open by default
+   * @deprecated
    * */
   defaultValue?: string[];
   negative?: boolean;
   title?: string;
   titleTag?: HeadingTagType;
   titleVariant?: TitleVariantType;
+  /**
+   * A schema enables external applications to parse the content in a structured manner.
+   * See more at schema.org . We use a JSON-LD based script-tag to add the schema to the DOM.
+   * Note that only one type of schema can be added per page
+   */
+  schema?: string;
 };
 
+export const NegativeContext = createContext(false);
+
 export const Accordion = ({
   ["data-testid"]: dataTestId,
   children,
@@ -37,6 +38,7 @@ export const Accordion = ({
   title,
   titleTag = "h2",
   titleVariant = "title-300",
+  schema,
   ...props
 }: AccordionProps) => {
   const classes = cx([
@@ -47,23 +49,24 @@ export const Accordion = ({
     },
   ]);
 
-  const renderChildren = () =>
-    Children.map(children, (child) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return cloneElement(child as ReactElement<any, string | JSXElementConstructor<any>>, {
-        negative,
-      });
-    });
-
   return (
-    <RadixAccordion.Root className={classes} type="multiple" data-testid={dataTestId} {...props}>
-      {title ? (
+    <div className={classes} data-testid={dataTestId} {...props}>
+      {title && (
         <Heading tag={titleTag} variant={titleVariant} className={cx(`${rootClassName}__title`)}>
           {title}
         </Heading>
-      ) : null}
-      {renderChildren()}
-    </RadixAccordion.Root>
+      )}
+      <NegativeContext.Provider value={negative}>{children}</NegativeContext.Provider>
+      {schema && (
+        <script
+          type="application/ld+json"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: schema,
+          }}
+        />
+      )}
+    </div>
   );
 };