@zomako/elearning-components 2.0.4 → 2.0.6

package/src/components/Accordion/README.md

@@ -1,164 +0,0 @@
-# Accordion Component
-
-A fully accessible React accordion using **pure CSS** for animations and CSS Modules for styling. It renders a list of collapsible items with smooth expand/collapse and supports either single or multiple open panels. No Framer Motion or other animation library is required.
-
-## Purpose
-
-The `Accordion` component is designed for e-learning and content-heavy UIs where you need to reveal content on demand without leaving the page. Use it for FAQs, course modules, step-by-step instructions, or any list of titled sections with collapsible bodies.
-
-## Features
-
-- **Pure CSS expand/collapse** – Smooth animations without Framer Motion; consistent with a CSS-first approach and smaller bundle size
-- **Single or multiple open panels** – Controlled by the `allowMultiple` prop
-- **Id-based API** – Items use required `id`; initial open state is set via `defaultOpenId` (string or string[])
-- **Keyboard accessible** – Enter/Space to toggle, Arrow keys to move focus, Home/End for first/last
-- **ARIA-compliant** – Correct `aria-expanded`, `aria-controls`, `aria-labelledby`, and `aria-hidden` for screen readers
-- **Clean, modern styling** – CSS Modules with a clear header/content distinction
-- **TypeScript** – Exported `AccordionProps` and `AccordionItem` interfaces
-
-## Installation
-
-### Prerequisites
-
-- React 16.8+ (hooks)
-- Node.js and npm (or yarn/pnpm)
-
-### Dependencies
-
-```bash
-npm install react react-dom
-```
-
-No animation library is required.
-
-## Props
-
-The component accepts props as defined in the `AccordionProps` interface.
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `items` | `AccordionItem[]` | Yes | — | List of accordion items. Each must have `id`, `title`, and `content`. |
-| `allowMultiple` | `boolean` | No | `false` | If `true`, multiple panels can be open at once. If `false`, opening one closes the others. |
-| `defaultOpenId` | `string \| string[]` | No | — | Id(s) of item(s) to open initially. Single string or array of strings. |
-
-### AccordionItem
-
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `id` | `string` | Yes | Unique id for the item (used for state and as React `key`). |
-| `title` | `string` | Yes | Label for the accordion header. |
-| `content` | `React.ReactNode` | Yes | Content shown when the panel is expanded. |
-
-### TypeScript interfaces
-
-```typescript
-import Accordion, { AccordionProps, AccordionItem } from './Accordion';
-
-interface AccordionItem {
-  id: string;
-  title: string;
-  content: React.ReactNode;
-}
-
-interface AccordionProps {
-  items: AccordionItem[];
-  allowMultiple?: boolean;
-  defaultOpenId?: string | string[];
-}
-```
-
-## Usage
-
-### Basic example (single open panel)
-
-Only one panel is open at a time. No panel is open initially.
-
-```tsx
-import Accordion, { AccordionItem } from './components/Accordion';
-
-const items: AccordionItem[] = [
-  {
-    id: 'included',
-    title: 'What is included?',
-    content: 'Access to all lessons, quizzes, and downloadable resources for 12 months.',
-  },
-  {
-    id: 'refund',
-    title: 'Can I get a refund?',
-    content: 'Yes. You can request a full refund within 14 days of purchase if you have not completed more than 2 lessons.',
-  },
-  {
-    id: 'support',
-    title: 'How do I get support?',
-    content: 'Use the Help button in the course dashboard or email support@example.com.',
-  },
-];
-
-function FAQ() {
-  return <Accordion items={items} />;
-}
-```
-
-### Multiple panels open
-
-Allow several panels to be open at once, with specific items open by id:
-
-```tsx
-<Accordion
-  items={items}
-  allowMultiple
-  defaultOpenId={['included', 'support']}
-/>
-```
-
-### One panel open by default (single mode)
-
-Open a single item initially by id:
-
-```tsx
-<Accordion
-  items={items}
-  defaultOpenId="refund"
-/>
-```
-
-### Rich content
-
-`content` can be any `React.ReactNode` (e.g. lists, links, components):
-
-```tsx
-const items: AccordionItem[] = [
-  {
-    id: 'module-1',
-    title: 'Module 1: Introduction',
-    content: (
-      <>
-        <p>Welcome to the course. In this module you will:</p>
-        <ul>
-          <li>Learn the key concepts</li>
-          <li>Complete a short quiz</li>
-        </ul>
-      </>
-    ),
-  },
-];
-```
-
-## Accessibility
-
-- **Keyboard**: Each header is focusable. Enter or Space toggles the panel. Arrow Down/Right moves to the next header, Arrow Up/Left to the previous. Home focuses the first header, End the last.
-- **ARIA**: The root has `role="region"` and `aria-label="Accordion"`. Each trigger has `aria-expanded` and `aria-controls` pointing to its panel. Each panel has `role="region"`, `aria-labelledby` pointing to its header, and `aria-hidden` when collapsed.
-- **Focus**: Focus is not trapped; keyboard users can tab in and out of the accordion and use the arrow keys to move between headers.
-
-## Styling
-
-Styles are in `style.module.css`. Expand/collapse and chevron rotation use CSS transitions (no JavaScript animation library). You can override by targeting the accordion’s container in your own CSS. The design uses a light gray header background and white content area with a clear border between header and content.
-
-## File structure
-
-```
-Accordion/
-  index.tsx       # Component and TypeScript interfaces
-  style.module.css # Component styles (pure CSS animations)
-  README.md       # This file
-```