Add accordion stuff

docs/src/content/docs/docs/components/accordion.mdx

@@ -0,0 +1,37 @@
+---
+title: Accordion
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { Accordion, AccordionItem } from '@studiocms/ui/components';
+
+A simple divider. Allows for showing a label in the center, which is helpful for seperating sidebars or other structured content.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Accordion>
+        <AccordionItem>
+          <div slot="summary">This is the summary</div>
+          <div slot="details">These are the details</div>
+        </AccordionItem>
+        <AccordionItem>
+          <div slot="summary">This is the 2nd summary</div>
+          <div slot="details">These are the 2nd details</div>
+        </AccordionItem>
+      </Accordion>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro showLinenumbers title="DividerExample.astro"
+    ---
+    import { Divider } from '@studiocms/ui/components';
+    ---
+
+    <Divider>
+      Divider
+    </Divider>
+    ```
+  </TabItem>
+</Tabs>

packages/studiocms_ui/src/components.ts

@@ -20,6 +20,7 @@ export { Tabs, TabItem } from './components/index';
 export { Breadcrumbs } from './components/index';
 export { Group } from './components/index';
 export { Badge } from './components/index';
+export { Accordion, AccordionItem } from './components/index'
 
 export {
 	Sidebar,

packages/studiocms_ui/src/components/Accordion/Accordion.astro

@@ -0,0 +1,14 @@
+---
+import './accordion.css';
+
+interface Props {
+  initialOpen?: string;
+}
+---
+
+<div class="sui-accordion">
+  <slot />
+</div>
+<script>
+  import 'studiocms:ui/scripts/accordion';
+</script>

packages/studiocms_ui/src/components/Accordion/Item.astro

@@ -0,0 +1,12 @@
+---
+
+---
+
+<div class="sui-accordion-item">
+    <div class="sui-accordion-summary">
+        <slot name="summary" />
+    </div>
+    <div class="sui-accordion-details initial">
+        <slot name="details" />
+    </div>
+</div>

packages/studiocms_ui/src/components/Accordion/accordion.css

@@ -0,0 +1,23 @@
+.sui-accordion {
+  width: 100%;
+}
+
+.sui-accordion-details.initial {
+  visibility: hidden;
+  transition: none;
+  max-height: none;
+  position: absolute;
+  top: -200vh;
+  left: -200vh;
+}
+
+.sui-accordion-details.active {
+  overflow: hidden;
+  max-height: 0;
+  transition: all .3s ease;
+  position: relative;
+}
+
+.sui-accordion-item.active > .sui-accordion-details {
+  max-height: 100px;
+}

packages/studiocms_ui/src/components/Accordion/accordion.ts

@@ -0,0 +1,25 @@
+const accordions = document.querySelectorAll<HTMLDivElement>('.sui-accordion');
+
+for (const accordion of accordions) {
+  const items = accordion.querySelectorAll<HTMLDivElement>('.sui-accordion-item');
+
+  for (const item of items) {
+    const content = accordion.querySelector<HTMLDivElement>('.sui-accordion-details');
+    if (!content) continue;
+    const contentBoundingBox = content.getBoundingClientRect();
+
+    if (content.classList.contains('initial')) {
+      content.classList.remove('initial');
+      content.classList.add('active');
+    }
+
+    item.addEventListener('click', () => {
+      item.classList.toggle('active');
+      if (item.classList.contains('active')) {
+        content.style.maxHeight = `${contentBoundingBox.height}px`;
+      } else {
+        content.style.maxHeight = `0`;
+      } 
+    });
+  }
+}

packages/studiocms_ui/src/components/index.ts

@@ -15,8 +15,10 @@ export { default as SearchSelect } from './SearchSelect/SearchSelect.astro';
 export { default as Dropdown } from './Dropdown/Dropdown.astro';
 export { default as User } from './User/User.astro';
 export { default as ThemeToggle } from './ThemeToggle/ThemeToggle.astro';
-export { default as Footer } from './Footer/Footer.astro';
 export { Tabs, TabItem } from './Tabs/index';
+export { default as Accordion } from './Accordion/Accordion.astro';
+export { default as AccordionItem } from './Accordion/Item.astro';
+export { default as Footer } from './Footer/Footer.astro';
 
 export { default as Sidebar } from './Sidebar/Single.astro';
 export { default as DoubleSidebar } from './Sidebar/Double.astro';

packages/studiocms_ui/src/integration.ts

@@ -54,6 +54,7 @@ export default function integration(options: Options = {}): AstroIntegration {
 						'studiocms:ui/scripts/toaster': `import ${JSON.stringify(resolve('./components/Toast/toaster.ts'))}`,
 						'studiocms:ui/scripts/toast': `import ${JSON.stringify(resolve('./components/Toast/toast.ts'))}`,
 						'studiocms:ui/scripts/toggle': `import ${JSON.stringify(resolve('./components/Toggle/toggle.ts'))}`,
+						'studiocms:ui/scripts/accordion': `import ${JSON.stringify(resolve('./components/Accordion/accordion.ts'))}`,
 					},
 				});