feat: Update Expandable to use native <details> element

docs/contributing/pages/components.mdx

@@ -130,6 +130,12 @@ Render an expandable section to provide additional information to users on deman
   provide optional information that can help users be more successful.
 </Expandable>
 
+<Expandable title="Expandable with a code block">
+  ```js
+  const foo = 'bar';
+  ```
+</Expandable>
+
 ```markdown {tabTitle:Example}
 <Expandable title="Here's something worth noting">
   This is an expandable section in an `'info'` alert style.

src/components/codeBlock/code-blocks.module.scss

@@ -19,7 +19,7 @@
     font-size: 0.85rem;
     border: 0;
     border-radius: 4px;
-    margin: 0 0 1rem;
+    margin: 0;
   }
 
   /**

src/components/codeTabs.tsx

@@ -134,8 +134,6 @@ export function CodeTabs({children}: CodeTabProps) {
 }
 
 const Container = styled('div')`
-  margin-bottom: 1.5rem;
-
   pre[class*='language-'] {
     padding: 10px 12px;
     border-radius: 0 0 3px 3px;

src/components/docPage/type.scss

@@ -136,6 +136,10 @@
     font-weight: 500;
   }
 
+  .code-tabs-wrapper:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+
   .anchorlink,
   .anchorlink.before {
     display: flex;

src/components/expandable/index.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import {ReactNode, useEffect, useState} from 'react';
+import {ChevronDownIcon, ChevronRightIcon} from '@radix-ui/react-icons';
+
+// explicitly not usig CSS modules here
+// because there's some prerendered content that depends on these exact class names
+import '../callout/styles.scss';
+import styles from './style.module.scss';
+
+type Props = {
+  children: ReactNode;
+  title: string;
+  /** If defined, the expandable will be grouped with other expandables that have the same group. */
+  group?: string;
+  level?: 'info' | 'warning' | 'success';
+  permalink?: boolean;
+};
+
+function slugify(str: string) {
+  return str
+    .toLowerCase()
+    .replace(/ /g, '-')
+    .replace(/[^a-z0-9-]/g, '');
+}
+
+export function Expandable({title, level = 'info', children, permalink, group}: Props) {
+  const id = permalink ? slugify(title) : undefined;
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Ensure we scroll to the element if the URL hash matches
+  useEffect(() => {
+    if (!id) {
+      return () => {};
+    }
+
+    if (window.location.hash === `#${id}`) {
+      document.querySelector(`#${id}`)?.scrollIntoView();
+      setIsExpanded(true);
+    }
+
+    // When the hash changes (e.g. when the back/forward browser buttons are used),
+    // we want to ensure to jump to the correct section
+    const onHashChange = () => {
+      if (window.location.hash === `#${id}`) {
+        setIsExpanded(true);
+        document.querySelector(`#${id}`)?.scrollIntoView();
+      }
+    };
+    // listen for hash changes and expand the section if the hash matches the title
+    window.addEventListener('hashchange', onHashChange);
+    return () => {
+      window.removeEventListener('hashchange', onHashChange);
+    };
+  }, [id]);
+
+  function toggleIsExpanded(event: React.MouseEvent<HTMLDetailsElement>) {
+    const newVal = event.currentTarget.open;
+
+    if (id) {
+      if (newVal) {
+        window.history.pushState({}, '', `#${id}`);
+      } else {
+        window.history.pushState({}, '', '#');
+      }
+    }
+
+    setIsExpanded(newVal);
+  }
+
+  return (
+    <details
+      name={group}
+      className={`${styles.expandable} callout !block ${'callout-' + level}`}
+      open={isExpanded}
+      // We only need this to keep the URL hash in sync
+      onToggle={id ? toggleIsExpanded : undefined}
+      id={id}
+    >
+      <summary className={`${styles['expandable-header']} callout-header`}>
+        <ChevronDownIcon
+          className={`${styles['expandable-icon-expanded']} callout-icon`}
+        />
+        <ChevronRightIcon
+          className={`${styles['expandable-icon-collapsed']} callout-icon`}
+        />
+        <div>{title}</div>
+      </summary>
+      <div className={`${styles['expandable-body']} callout-body content-flush-bottom`}>
+        {children}
+      </div>
+    </details>
+  );
+}
+
+//
+//
+// <details name={group} className={`callout !block ${'callout-' + level}`}>
+//       <summary className="callout-header">{title}</summary>
+//       <div className="callout-body content-flush-bottom">{children}</div>
+//     </details>
+//
+//
+
+//
+// <Callout
+//       level={level}
+//       title={title}
+//       Icon={isExpanded ? ChevronDownIcon : ChevronRightIcon}
+//       id={id}
+//       titleOnClick={toggleIsExpanded}
+//     >
+//       {isExpanded ? children : undefined}
+//     </Callout>

src/components/expandable/style.module.scss

@@ -0,0 +1,32 @@
+.expandable-header {
+  display: flex;
+  cursor: pointer;
+  gap: 0.7rem;
+  margin-bottom: 0.3rem;
+}
+
+.expandable-body {
+  margin-left: 1.6rem;
+
+  & ul, & ol {
+    padding-left: 1.2rem;
+  }
+}
+
+.expandable {
+  &:open {
+    padding-bottom: 1rem;
+  }
+
+  &:not(:open) .expandable-header {
+    margin-bottom: 0;
+  }
+
+  &:open .expandable-icon-collapsed {
+    display: none;
+  }
+
+  &:not(:open) .expandable-icon-expanded {
+    display: none;
+  }
+}