@rocketui/vue 0.0.46 → 0.0.47

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/src/components/Accordion/Accordion.mdx

@@ -0,0 +1,88 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as AccordionStories from './Accordion.stories';
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+The Accordion component is a UI element that allows the user to show and hide content within an expandable and collapsible section. It consists of a container that holds multiple panels, where each panel has a header and a body. When a panel's header is clicked, the corresponding body is shown or hidden.
+
+- [Overview](#overview)
+
+- [Playground](#playground)
+
+- [Usage with props](#usage)
+
+- [Stories](#stories)
+
+- [Customizable Slots](#customizable-slots)
+
+- [Tips](#tips)
+
+## Overview <a id="overview" />
+
+The Accordion component provides a compact way of displaying large amounts of information in a small space. It is particularly useful for displaying hierarchical data, where each panel represents a different level of information. The Accordion component is also a good way to present frequently asked questions (FAQs) as it makes it easy for users to find the information they are looking for.
+
+<Canvas>
+  <Story of={AccordionStories.Overview} />
+</Canvas>
+
+## Playground <a id="playground" />
+
+> Changes you make in the controls will be reflected in the example above. Try it yourself!
+
+<Controls of={AccordionStories.Overview} exclude={/^(default|update.*)$/} />
+
+## Usage with props <a id="usage" />
+
+### accordions (required)
+
+The **accordions** prop is an array that holds the data for each panel in the accordion component. Each panel is an object with properties such as header and body.
+
+### modelValue (optional)
+
+The **modelValue** prop is a boolean that determines whether the accordion component is in an expanded or collapsed state. A value of true indicates that the accordion component is expanded, and a value of false indicates that it is collapsed.
+
+### accordions: title (required)
+
+The **title** prop is a string that is used as the header for each panel in the accordion component.
+
+### accordions: content (required)
+
+The **content** prop is a string that is used as the body for each panel in the accordion component.
+
+### accordions: open (optional)
+
+The **open** prop is a boolean that determines whether the panel is in an expanded or collapsed state. A value of true indicates that the panel is expanded, and a value of false indicates that it is collapsed.
+
+### accordions: disabled (optional)
+
+The **disabled** prop is a boolean that determines whether the panel is disabled. A value of true indicates that the panel is disabled, and a value of false indicates that it is enabled.
+
+## Stories <a id="stories" />
+
+### Single Collapse
+
+<Canvas>
+  <Story of={AccordionStories.SingleCollapse} />
+</Canvas>
+
+### Accordion
+
+<Canvas>
+  <Story of={AccordionStories.Accordion1} />
+</Canvas>
+
+## Customizable Slots <a id="customizable-slots" />
+
+### Tips <a id="tips" />
+
+💡 Use clear and concise headings for each panel's header to help users quickly understand the content within each panel.
+
+💡 Consider using icons or graphics within the header to make the accordion more visually appealing.
+
+💡 Make sure that the accordion is accessible to users who may be using assistive technologies, such as screen readers.
+
+💡 Use the modelValue prop wisely to control the default state of the accordion. For example, you might want to set the modelValue prop to true for the panel that contains the most important information.
+
+💡 Try to limit the amount of content within each panel to ensure that the accordion remains compact and easy to use.

package/src/components/Accordion/Accordion.stories.ts

@@ -0,0 +1,257 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Accordion from './RAccordion.vue';
+
+const DefaultArgs = {
+  accordions: [
+    {
+      title: 'Accordion 1',
+      content: 'Accordion 1 content',
+    },
+  ],
+};
+
+const AccordionStory = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  setup: (args: typeof Accordion) => {
+    return { args };
+  },
+  template: `<Accordion v-bind="args" @update="update"/>`,
+  args: DefaultArgs,
+} as Meta<typeof Accordion>;
+
+export default AccordionStory;
+
+type Story = StoryObj<typeof AccordionStory>;
+
+export const Overview: Story = {
+  args: {
+    accordions: [
+      {
+        title: 'Accordion 1',
+        content: 'Accordion 1 content',
+      },
+    ],
+  },
+};
+
+export const SingleCollapse: Story = {
+  args: {
+    accordions: [
+      {
+        title: 'Accordion 1',
+        content: 'Accordion 1 content',
+      },
+    ],
+  },
+};
+
+export const Accordion1: Story = {
+  args: {
+    accordions: [
+      {
+        title: 'Accordion 1',
+        content: 'Accordion 1 content',
+        open: true,
+      },
+      {
+        title: 'Accordion 2',
+        content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Nulla nec purus feugiat, molestie ipsum et, consequat nibh. 
+        Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo.
+        Fusce euismod magna et sapien varius, ut ultricies enim scelerisque. 
+        Fusce ultrices euismod lobortis. Nullam faucibus aliquet feugiat. 
+        Curabitur ut augue finibus, luctus tortor at, ornare erat. 
+        Donec auctor ipsum ut tellus ultrices, vel tincidunt ipsum posuere. 
+        Nullam euismod, lorem vitae aliquam facilisis, elit nunc aliquet nunc, 
+        ut tristique massa nisl nec elit. 
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero, 
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut 
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        aliquam mauris, quis ultrices nisl velit quis nunc. Nulla facilisi. Nulla 
+        facilisi.
+        
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero,
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio`,
+      },
+      {
+        title: 'Lorem ipsum',
+        content: `
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Nulla nec purus feugiat, molestie ipsum et, consequat nibh. 
+        Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo.
+        Fusce euismod magna et sapien varius, ut ultricies enim scelerisque. 
+        Fusce ultrices euismod lobortis. Nullam faucibus aliquet feugiat. 
+        Curabitur ut augue finibus, luctus tortor at, ornare erat. 
+        Donec auctor ipsum ut tellus ultrices, vel tincidunt ipsum posuere. 
+        Nullam euismod, lorem vitae aliquam facilisis, elit nunc aliquet nunc, 
+        ut tristique massa nisl nec elit. 
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero, 
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut 
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        aliquam mauris, quis ultrices nisl velit quis nunc. Nulla facilisi. Nulla 
+        facilisi.
+        
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero,
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Nulla nec purus feugiat, molestie ipsum et, consequat nibh. 
+        Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo.
+        Fusce euismod magna et sapien varius, ut ultricies enim scelerisque. 
+        Fusce ultrices euismod lobortis. Nullam faucibus aliquet feugiat. 
+        Curabitur ut augue finibus, luctus tortor at, ornare erat. 
+        Donec auctor ipsum ut tellus ultrices, vel tincidunt ipsum posuere. 
+        Nullam euismod, lorem vitae aliquam facilisis, elit nunc aliquet nunc, 
+        ut tristique massa nisl nec elit. 
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero, 
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut 
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        aliquam mauris, quis ultrices nisl velit quis nunc. Nulla facilisi. Nulla 
+        facilisi.
+        
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero,
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Nulla nec purus feugiat, molestie ipsum et, consequat nibh. 
+        Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo.
+        Fusce euismod magna et sapien varius, ut ultricies enim scelerisque. 
+        Fusce ultrices euismod lobortis. Nullam faucibus aliquet feugiat. 
+        Curabitur ut augue finibus, luctus tortor at, ornare erat. 
+        Donec auctor ipsum ut tellus ultrices, vel tincidunt ipsum posuere. 
+        Nullam euismod, lorem vitae aliquam facilisis, elit nunc aliquet nunc, 
+        ut tristique massa nisl nec elit. 
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero, 
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut 
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        aliquam mauris, quis ultrices nisl velit quis nunc. Nulla facilisi. Nulla 
+        facilisi.
+        
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero,
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        `,
+      },
+      {
+        title: 'Lorem ipsum over 600px',
+        content: `
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Nulla nec purus feugiat, molestie ipsum et, consequat nibh. 
+        Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo.
+        Fusce euismod magna et sapien varius, ut ultricies enim scelerisque. 
+        Fusce ultrices euismod lobortis. Nullam faucibus aliquet feugiat. 
+        Curabitur ut augue finibus, luctus tortor at, ornare erat. 
+        Donec auctor ipsum ut tellus ultrices, vel tincidunt ipsum posuere. 
+        Nullam euismod, lorem vitae aliquam facilisis, elit nunc aliquet nunc, 
+        ut tristique massa nisl nec elit. 
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero, 
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut 
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        aliquam mauris, quis ultrices nisl velit quis nunc. Nulla facilisi. Nulla 
+        facilisi.
+        
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero,
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Nulla nec purus feugiat, molestie ipsum et, consequat nibh. 
+        Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo.
+        Fusce euismod magna et sapien varius, ut ultricies enim scelerisque. 
+        Fusce ultrices euismod lobortis. Nullam faucibus aliquet feugiat. 
+        Curabitur ut augue finibus, luctus tortor at, ornare erat. 
+        Donec auctor ipsum ut tellus ultrices, vel tincidunt ipsum posuere. 
+        Nullam euismod, lorem vitae aliquam facilisis, elit nunc aliquet nunc, 
+        ut tristique massa nisl nec elit. 
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero, 
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut 
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        aliquam mauris, quis ultrices nisl velit quis nunc. Nulla facilisi. Nulla 
+        facilisi.
+        
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero,
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Nulla nec purus feugiat, molestie ipsum et, consequat nibh. 
+        Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo.
+        Fusce euismod magna et sapien varius, ut ultricies enim scelerisque. 
+        Fusce ultrices euismod lobortis. Nullam faucibus aliquet feugiat. 
+        Curabitur ut augue finibus, luctus tortor at, ornare erat. 
+        Donec auctor ipsum ut tellus ultrices, vel tincidunt ipsum posuere. 
+        Nullam euismod, lorem vitae aliquam facilisis, elit nunc aliquet nunc, 
+        ut tristique massa nisl nec elit. 
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero, 
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut 
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        aliquam mauris, quis ultrices nisl velit quis nunc. Nulla facilisi. Nulla 
+        facilisi.
+        
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero,
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Nulla nec purus feugiat, molestie ipsum et, consequat nibh. 
+        Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo.
+        Fusce euismod magna et sapien varius, ut ultricies enim scelerisque. 
+        Fusce ultrices euismod lobortis. Nullam faucibus aliquet feugiat. 
+        Curabitur ut augue finibus, luctus tortor at, ornare erat. 
+        Donec auctor ipsum ut tellus ultrices, vel tincidunt ipsum posuere. 
+        Nullam euismod, lorem vitae aliquam facilisis, elit nunc aliquet nunc, 
+        ut tristique massa nisl nec elit. 
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero, 
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut 
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        aliquam mauris, quis ultrices nisl velit quis nunc. Nulla facilisi. Nulla 
+        facilisi.
+        
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero,
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Nulla nec purus feugiat, molestie ipsum et, consequat nibh. 
+        Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo.
+        Fusce euismod magna et sapien varius, ut ultricies enim scelerisque. 
+        Fusce ultrices euismod lobortis. Nullam faucibus aliquet feugiat. 
+        Curabitur ut augue finibus, luctus tortor at, ornare erat. 
+        Donec auctor ipsum ut tellus ultrices, vel tincidunt ipsum posuere. 
+        Nullam euismod, lorem vitae aliquam facilisis, elit nunc aliquet nunc, 
+        ut tristique massa nisl nec elit. 
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero, 
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut 
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        aliquam mauris, quis ultrices nisl velit quis nunc. Nulla facilisi. Nulla 
+        facilisi.
+        
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero,
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        Nulla nec purus feugiat, molestie ipsum et, consequat nibh. 
+        Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo.
+        Fusce euismod magna et sapien varius, ut ultricies enim scelerisque. 
+        Fusce ultrices euismod lobortis. Nullam faucibus aliquet feugiat. 
+        Curabitur ut augue finibus, luctus tortor at, ornare erat. 
+        Donec auctor ipsum ut tellus ultrices, vel tincidunt ipsum posuere. 
+        Nullam euismod, lorem vitae aliquam facilisis, elit nunc aliquet nunc, 
+        ut tristique massa nisl nec elit. 
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero, 
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut 
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        aliquam mauris, quis ultrices nisl velit quis nunc. Nulla facilisi. Nulla 
+        facilisi.
+        
+        Donec euismod, mauris ut ultricies ultrices, nunc ipsum aliquam libero,
+        vitae venenatis eros eros vel arcu. Donec ut porta libero. Sed ut erat ut
+        nunc fermentum aliquam. Donec auctor, eros eget ultrices mollis, ipsum odio
+        `,
+      },
+      {
+        title: 'Accordion 4',
+        content: 'Accordion 4 content',
+        disabled: true,
+      },
+    ],
+  },
+};

package/src/components/Accordion/RAccordion.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import Icon from '../Icon/RIcon.vue';
+import './accordion.css';
+
+export type Accordion = {
+  title: string;
+  content: string;
+  open?: boolean;
+  disabled?: boolean;
+};
+
+export interface AccordionProps {
+  /**
+   * Accordion list
+   * @default []
+   * @type Accordion[]
+   * @example
+   * ```html
+   * <r-accordion :accordions="[
+   *  { title: 'Accordion 1', content: 'Content 1' },
+   *  ]" />
+   * ```
+   */
+  accordions: Accordion[];
+}
+
+const props = defineProps<AccordionProps>();
+
+const accordions = reactive(
+  props.accordions.map(({ title, content }, index) => ({
+    title,
+    content,
+    open: props.accordions[index].open || false,
+    disabled: props.accordions[index].disabled || false,
+  }))
+);
+
+function handleAccordion(selectedIndex: number) {
+  if (accordions[selectedIndex].disabled) return;
+  accordions.forEach((_, index) => {
+    accordions[index].open =
+      index === selectedIndex ? !accordions[index].open : false;
+  });
+}
+</script>
+<template>
+  <div
+    v-for="(accordion, index) in accordions"
+    :key="index"
+    :class="{
+      'r-accordion': true,
+      'r-accordion--disabled': accordion.disabled,
+    }"
+    :data-state="accordion.open ? 'opened' : 'closed'"
+  >
+    <div class="r-accordion__header" @click="handleAccordion(index)">
+      <slot name="title">
+        <div class="r-accordion__title">{{ accordion.title }}</div>
+      </slot>
+      <div class="r-accordion__icon">
+        <Icon name="mdiChevronUp" />
+      </div>
+    </div>
+    <div class="r-accordion__content">
+      <slot name="content">
+        <span>
+          {{ accordion.content }}
+        </span>
+      </slot>
+    </div>
+  </div>
+</template>

package/src/components/Accordion/accordion.css

@@ -0,0 +1,75 @@
+@import '../../index.css';
+
+.r-accordion {
+  @apply rounded-lg px-4 py-3 border-[var(--neutral-200)] border mb-6;
+
+  &:hover:not(&--disabled) {
+    @apply border-[var(--primary-500)];
+  }
+
+  &--disabled {
+    @apply cursor-not-allowed bg-[var(--neutral-100)];
+  }
+
+  &--disabled &__header {
+    @apply cursor-not-allowed;
+
+    & .accordion__title {
+      @apply text-[var(--neutral-500)];
+    }
+
+    & .accordion__icon {
+      @apply text-[var(--neutral-500)];
+    }
+  }
+
+  &__header {
+    @apply flex items-center justify-between cursor-pointer;
+  }
+
+  &__title {
+    @apply text-[var(--neutral-900)] font-medium text-sm;
+  }
+
+  &__icon {
+    @apply text-[var(--neutral-900)] grid items-center;
+  }
+
+  &__content {
+    @apply max-h-0 overflow-y-auto text-[var(--neutral-500)] font-normal text-sm transition-all;
+  }
+
+  &[data-state='opened'] {
+    @apply border-[var(--primary-500)] ring-inset ring-2 ring-[var(--primary-200)];
+  }
+
+  &[data-state='opened'] &__icon {
+    @apply transform rotate-180 text-[var(--primary-500)];
+  }
+
+  &[data-state='opened'] &__content {
+    @apply max-h-[var(--accordion-content-max-height)] mt-3 animate-[slideDown] duration-300;
+  }
+
+  &[data-state='closed'] &__content {
+    @apply max-h-0 mt-0 animate-[slideUp] duration-300 overflow-hidden;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--accordion-content-max-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--accordion-content-max-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/components/Accordion/accordion.spec.ts

@@ -0,0 +1,123 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Accordion from './RAccordion.vue';
+
+describe('Accordion', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(Accordion, {
+      props: {
+        accordions: [
+          {
+            title: 'Accordion Title',
+            content: 'Accordion Description',
+          },
+        ],
+      },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('.accordion__title').text()).toBe('Accordion Title');
+    expect(wrapper.find('.accordion__content').text()).toBe(
+      'Accordion Description'
+    );
+    expect(
+      wrapper
+        .find('.accordion__header')
+        .trigger('click')
+        .then(() => {
+          expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+        })
+    );
+  });
+
+  it('should render correctly with multiple accordions', () => {
+    const wrapper = mount(Accordion, {
+      props: {
+        accordions: [
+          {
+            title: 'Accordion Title 1',
+            content: 'Accordion Description 1',
+          },
+          {
+            title: 'Accordion Title 2',
+            content: 'Accordion Description 2',
+          },
+        ],
+      },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.findAll('.accordion__title').length).toBe(2);
+    expect(wrapper.findAll('.accordion__content').length).toBe(2);
+    expect(wrapper.findAll('.accordion__title')[0].text()).toBe(
+      'Accordion Title 1'
+    );
+    expect(wrapper.findAll('.accordion__content')[0].text()).toBe(
+      'Accordion Description 1'
+    );
+    expect(wrapper.findAll('.accordion__title')[1].text()).toBe(
+      'Accordion Title 2'
+    );
+    expect(wrapper.findAll('.accordion__content')[1].text()).toBe(
+      'Accordion Description 2'
+    );
+  });
+
+  it('should render correctly with multiple accordions and one expanded', () => {
+    const wrapper = mount(Accordion, {
+      props: {
+        accordions: [
+          {
+            title: 'Accordion Title 1',
+            content: 'Accordion Description 1',
+            isExpanded: true,
+          },
+          {
+            title: 'Accordion Title 2',
+            content: 'Accordion Description 2',
+          },
+        ],
+      },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.findAll('.accordion__title').length).toBe(2);
+    expect(wrapper.findAll('.accordion__content').length).toBe(2);
+
+    expect(wrapper.findAll('.accordion')[0].classes()).toContain(
+      'accordion--expanded'
+    );
+    expect(wrapper.findAll('.accordion')[1].classes()).not.toContain(
+      'accordion--expanded'
+    );
+  });
+
+  it('should render correctly with multiple accordions and one expanded and one disabled', () => {
+    const wrapper = mount(Accordion, {
+      props: {
+        accordions: [
+          {
+            title: 'Accordion Title 1',
+            content: 'Accordion Description 1',
+            isExpanded: true,
+          },
+          {
+            title: 'Accordion Title 2',
+            content: 'Accordion Description 2',
+            isDisabled: true,
+          },
+        ],
+      },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.findAll('.accordion__title').length).toBe(2);
+    expect(wrapper.findAll('.accordion__content').length).toBe(2);
+    expect(wrapper.findAll('.accordion')[0].classes()).toContain(
+      'accordion--expanded'
+    );
+    expect(wrapper.findAll('.accordion')[1].classes()).toContain(
+      'accordion--disabled'
+    );
+  });
+});