✨ Add Svelte and React accordions

Author: Frontendland

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "svelte.plugin.svelte.compilerWarnings": {
+        "a11y-click-events-have-key-events": "ignore",
+        "a11y-no-static-element-interactions": "ignore"
+    }
+}

astro.config.mjs

@@ -1,12 +1,14 @@
 import { defineConfig } from 'astro/config'
 
 import svelte from '@astrojs/svelte'
+import react from '@astrojs/react'
 
 export default defineConfig({
     outDir: 'build',
     trailingSlash: 'never',
     integrations: [
-        svelte()
+        svelte(),
+        react()
     ],
     build: {
         format: 'file'

package-lock.json

@@ -10,8 +10,11 @@
     },
     "dependencies": {
         "@astrojs/check": "0.7.0",
+        "@astrojs/react": "3.5.0",
         "@astrojs/svelte": "5.5.0",
         "astro": "4.10.2",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
         "sass": "1.77.5",
         "svelte": "4.2.18",
         "typescript": "5.4.5"
@@ -23,7 +26,12 @@
     },
     "files": [
         "dist/components",
-        "src/env.d.ts",
+        "src/astro.d.ts",
+        "src/astro.js",
+        "src/svelte.d.ts",
+        "src/svelte.js",
+        "src/react.d.ts",
+        "src/react.js",
         "scss",
         "public"
     ],
@@ -50,5 +58,4 @@
     "bugs": {
         "url": "https://github.com/Frontendland/webcoreui/issues"
     }
-
 }

package.json

@@ -1,5 +1,5 @@
 declare module 'webcoreui/astro' {
-    import type { Props as AccordionProps } from './components/Accordion/Accordion.astro'
+    import type { AccordionProps } from './components/Accordion/accordion'
 
     export function Accordion(_props: AccordionProps): any
 }

src/astro.d.ts

@@ -1,10 +1,7 @@
 ---
-export interface Props {
-    items: {
-        title: string
-        content: string
-    }[]
-}
+import type { AccordionProps } from './accordion'
+
+interface Props extends AccordionProps {}
 
 const {
     items

src/components/Accordion/Accordion.astro

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type { AccordionProps } from './accordion'
+
+    export let items: AccordionProps['items']
+
+    let state = Array(items.length).fill(false)
+
+    const toggle = (index: number) => {
+        state = state.map((_, i) => index === i
+            ? !state[i]
+            : state[i]
+        )
+    }
+</script>
+
+<ul>
+    {#each items as item, index}
+        <li>
+            <div
+                class="accordion-title"
+                class:open={state[index]}
+                on:click={() => toggle(index)}
+            >
+                {item.title}
+            </div>
+            <div class="accordion-wrapper">
+                <div class="accordion-content">
+                    {@html item.content}
+                </div>
+            </div>
+        </li>
+    {/each}
+</ul>
+
+<style lang="scss">
+    @import './accordion.scss';
+</style>

src/components/Accordion/Accordion.svelte

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import type { AccordionProps } from './accordion'
+import './accordion.scss'
+
+export const Accordion = ({ items }: AccordionProps) => {
+    const [state, setState] = useState(Array(items.length).fill(false))
+
+    const toggle = (index: number) => {
+        setState(state.map((_, i) => index === i
+            ? !state[i]
+            : state[i]
+        ))
+    }
+
+    return (
+        <ul data-id="accordion">
+            {items.map((item, index) => (
+                <li key={index}>
+                    <div
+                        className={state[index] ? 'accordion-title open' : 'accordion-title'}
+                        onClick={() => toggle(index)}
+                    >
+                        {item.title}
+                    </div>
+                    <div className="accordion-wrapper">
+                        <div className="accordion-content">
+                            <div dangerouslySetInnerHTML={{ __html: item.content }} />
+                        </div>
+                    </div>
+                </li>
+            ))}
+        </ul>
+    )
+}

src/components/Accordion/Accordion.tsx

@@ -0,0 +1,6 @@
+export type AccordionProps = {
+    items: {
+        title: string
+        content: string
+    }[]
+}

src/components/Accordion/accordion.ts

@@ -7,7 +7,6 @@
         display: block;
         border-bottom: 1px solid #252525;
         font-size: 16px;
-        font-weight: 400;
     }
 
     .card-body {

src/components/Card/card.scss

@@ -1 +1 @@
-/// <reference types="astro/client" />
+/// <reference types="astro/client" />