@aegov/design-system-react/dist/components/Accordion/Accordion.stories.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Nested = exports.Multiple = exports.Default = exports.CustomIcon = void 0;
var _react = _interopRequireDefault(require("react"));
var _Accordion = _interopRequireDefault(require("./Accordion"));
var _react2 = require("@phosphor-icons/react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
  title: 'Components/Accordion',
  component: _Accordion.default,
  argTypes: {
    multiple: {
      control: 'boolean',
      defaultValue: false
    },
    collapsible: {
      control: 'boolean'
    }
  }
};
const defaultItems = [{
  value: '1',
  title: 'What is the meaning of a design system?',
  children: /*#__PURE__*/_react.default.createElement("div", {
    className: "space-y-4"
  }, /*#__PURE__*/_react.default.createElement("p", null, "A Design System is a comprehensive set of standards, documentation, principles, and components that guide the creation of a digital product's user interface (UI)."), /*#__PURE__*/_react.default.createElement("p", null, "It acts as a single source of truth for designers, developers, and other stakeholders, ensuring consistency across different parts of a product and even across different products within the same brand. The goal is to accelerate the design and development process, improve user experience, and maintain a coherent visual and functional language."))
}, {
  value: '2',
  title: 'What are components?',
  children: /*#__PURE__*/_react.default.createElement("p", null, "Components are a crucial part of any design system. They are reusable parts of a UI, like buttons, form fields, or navigation menus, and they're defined both in terms of their appearance and their behavior.")
}, {
  value: '3',
  title: 'What else is part of a design system?',
  children: /*#__PURE__*/_react.default.createElement("div", {
    className: "space-y-4"
  }, /*#__PURE__*/_react.default.createElement("p", null, "A well-structured design system will also include usage guidelines for each component, detailing when and how it should be used. Besides components, a design system often includes standards for layout, typography, color, iconography, and more."), /*#__PURE__*/_react.default.createElement("p", null, "Furthermore, it addresses non-visual factors like accessibility, performance, and localization."))
}];

// Default single accordion
const Default = () => /*#__PURE__*/_react.default.createElement(_Accordion.default, {
  items: defaultItems,
  defaultValue: "1"
});

// Multiple selection allowed
exports.Default = Default;
const Multiple = () => /*#__PURE__*/_react.default.createElement(_Accordion.default, {
  multiple: true,
  defaultValue: ['1', '2'],
  items: defaultItems
});

// Custom icon
exports.Multiple = Multiple;
const CustomIcon = () => /*#__PURE__*/_react.default.createElement(_Accordion.default, {
  items: defaultItems.map(item => ({
    ...item,
    icon: _react2.Plus,
    iconRotateDeg: 45
  })),
  defaultValue: "1"
});

// Nested accordions
exports.CustomIcon = CustomIcon;
const Nested = () => {
  const nestedItems = [{
    value: 'parent-1',
    title: 'Parent Accordion 1',
    children: /*#__PURE__*/_react.default.createElement("div", {
      className: "space-y-4"
    }, /*#__PURE__*/_react.default.createElement("p", null, "This is the main content of parent accordion 1."), /*#__PURE__*/_react.default.createElement(_Accordion.default, {
      items: [{
        value: 'child-1',
        title: 'Child Accordion 1',
        icon: _react2.Plus,
        iconRotateDeg: 45,
        children: /*#__PURE__*/_react.default.createElement("p", null, "Content of child accordion 1")
      }, {
        value: 'child-2',
        title: 'Child Accordion 2',
        icon: _react2.Plus,
        iconRotateDeg: 45,
        children: /*#__PURE__*/_react.default.createElement("p", null, "Content of child accordion 2")
      }],
      className: "border-b-0"
    }))
  }, {
    value: 'parent-2',
    title: 'Parent Accordion 2',
    children: /*#__PURE__*/_react.default.createElement("p", null, "Content of parent accordion 2")
  }];
  return /*#__PURE__*/_react.default.createElement(_Accordion.default, {
    items: nestedItems,
    defaultValue: "parent-1"
  });
};
exports.Nested = Nested;