abaabil.details

Details Component

The Details component is a versatile and customizable expandable section built with React. It supports different variants, sizes, and icons, making it suitable for a wide range of use cases.

Overview

The Details component is used to create expandable sections in your application. This documentation provides instructions on how to use the Details component in your JSX-based projects. The Details component is a part of the abaabil.details library.

Importing the Details Component

You can import the Details component from the abaabil package or directly from the abaabil.details package.

import { Details } from 'abaabil';
// or
import Details from 'abaabil.details';

Usage Example

The Details component can be used in your JSX to create expandable sections with various properties. You can customize the component by setting its properties such as summary, icon, variant, size, and more.

import * as React from 'react';
import Details from 'abaabil.details';

const App = () => (
  <div>
    <Details summary="Primary Details" variant="primary">
      <p>This is the primary details content.</p>
    </Details>
    <Details summary="Secondary Details" variant="secondary" size="lg" icon="info">
      <p>This is the secondary details content.</p>
    </Details>
    <Details summary="Tertiary Details" variant="tertiary" size="sm" openIcon="plus" closeIcon="minus">
      <p>This is the tertiary details content.</p>
    </Details>
    <Details summary="Success Details" variant="success" expanded>
      <p>This is the success details content.</p>
    </Details>
    <Details summary="Error Details" variant="error" size="md" icon="warning">
      <p>This is the error details content.</p>
    </Details>
  </div>
);

export default App;

More Usage Examples

Normal Variants

import * as React from 'react';
import Details from 'abaabil.details';

const Example = () => (
  <div className="flex flex-col gap-4">
    <Details variant="primary" summary="Primary">Primary content</Details>
    <Details variant="secondary" summary="Secondary">Secondary content</Details>
    <Details variant="tertiary" summary="Tertiary">Tertiary content</Details>
    <Details variant="success" summary="Success">Success content</Details>
    <Details variant="error" summary="Error">Error content</Details>
  </div>
);

export default Example;

Outlined Variants

import * as React from 'react';
import Details from 'abaabil.details';

const Example = () => (
  <div className="flex flex-col gap-4">
    <Details variant="primary" icon="apple" summary="Primary" outlined>Primary content</Details>
    <Details variant="secondary" icon="cherry" summary="Secondary" outlined>Secondary content</Details>
    <Details variant="tertiary" icon="lemon" summary="Tertiary" outlined>Tertiary content</Details>
    <Details variant="success" icon="carrot" summary="Success" outlined>Success content</Details>
    <Details variant="error" icon="mushroom" summary="Error" outlined>Error content</Details>
  </div>
);

export default Example;

Sizes

import * as React from 'react';
import Details from 'abaabil.details';

const Example = () => (
  <div className="divide-y divide-layer-dark-1 space-y-4">
    <div>
      <Details size="sm" summary="Small">Small content</Details>
    </div>
    <div className="pt-4">
      <Details summary="Base">Base content</Details>
    </div>
    <div className="pt-4">
      <Details size="lg" summary="Large">Large content</Details>
    </div>
  </div>
);

export default Example;

Props

Prop	Type	Default	Description
summary	string	''	The summary text to display in the details summary.
children	node	null	The content to display inside the details section.
variant	string	primary	The details variant. Can be primary, secondary, tertiary, success, or error.
size	string	base	The size of the details. Can be sm, base, or lg.
icon	string	null	Icon to display in the summary. Uses the Icon component.
openIcon	string	chevron-down	Icon to display when the details are closed. Uses the Icon component.
closeIcon	string	chevron-up	Icon to display when the details are open. Uses the Icon component.
expanded	boolean	false	Whether the details should be expanded by default.
outlined	boolean	false	Whether the details should be outlined.
...props	object	{}	Additional props to pass to the details element.

Variants

• primary: Default details style with primary background and text.
• secondary: Secondary details style with secondary background and text.
• tertiary: Tertiary details style with tertiary background and text.
• success: Success details style with success background and text.
• error: Error details style with error background and text.

Sizes

• sm: Small details size.
• base: Base details size.
• lg: Large details size.

Example

import * as React from 'react';
import Details from 'abaabil.details';

const Example = () => (
  <div>
    <Details summary="Primary Details" variant="primary">
      <p>This is the primary details content.</p>
    </Details>
    <Details summary="Secondary Details" variant="secondary" size="lg" icon="info">
      <p>This is the secondary details content.</p>
    </Details>
    <Details summary="Tertiary Details" variant="tertiary" size="sm" openIcon="plus" closeIcon="minus">
      <p>This is the tertiary details content.</p>
    </Details>
    <Details summary="Success Details" variant="success" expanded>
      <p>This is the success details content.</p>
    </Details>
    <Details summary="Error Details" variant="error" size="md" icon="warning">
      <p>This is the error details content.</p>
    </Details>
  </div>
);

export default Example;

Accessibility

The Details component is designed with accessibility in mind:

• It uses proper ARIA attributes for the summary and content.
• Keyboard navigation is supported (Enter and Space keys to toggle).
• The component manages its own open/closed state.
• The summary and content are properly labeled for screen readers.