now-design-organisms/dist/AccordionSelectableListContainer/AccordionSelectableListContainer.stories.js

Organism components for the Now Design System

import React, { useState } from 'react';
import AccordionSelectableListContainer from './AccordionSelectableListContainer';
import { MetalcloudMeltingFurnaceLine, SystemAddFill, ArrowsArrowDownSLine, WeatherSunLine, UserLine, SettingsLine, FileTextLine } from 'now-design-icons';
export default {
  title: 'Organisms/AccordionSelectableListContainer',
  component: AccordionSelectableListContainer,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: 'An organism component that manages multiple AccordionSelectableList components with state management and selection handling.'
      }
    }
  },
  argTypes: {
    accordionData: {
      control: {
        type: 'object'
      },
      description: 'Array of accordion configurations'
    },
    selectedItemId: {
      control: {
        type: 'text'
      },
      description: 'ID of the currently selected item across all accordions'
    },
    onItemSelect: {
      action: 'itemSelected',
      description: 'Callback when any item is selected'
    },
    allowMultipleSelection: {
      control: {
        type: 'boolean'
      },
      description: 'Whether multiple items can be selected simultaneously'
    },
    className: {
      control: {
        type: 'text'
      },
      description: 'Additional CSS classes'
    }
  }
};
const Template = args => /*#__PURE__*/React.createElement(AccordionSelectableListContainer, args);
const sampleAccordionData = [{
  id: 'production',
  triggerLabel: 'Production',
  triggerIcon: MetalcloudMeltingFurnaceLine,
  items: [{
    id: 'melting-furnace',
    label: 'Melting Furnace',
    icon: MetalcloudMeltingFurnaceLine
  }, {
    id: 'casting-line',
    label: 'Casting Line',
    icon: SystemAddFill
  }, {
    id: 'quality-check',
    label: 'Quality Check',
    icon: WeatherSunLine
  }]
}, {
  id: 'management',
  triggerLabel: 'Management',
  triggerIcon: UserLine,
  items: [{
    id: 'user-management',
    label: 'User Management',
    icon: UserLine
  }, {
    id: 'settings',
    label: 'Settings',
    icon: SettingsLine
  }, {
    id: 'reports',
    label: 'Reports',
    icon: FileTextLine
  }]
}, {
  id: 'system',
  triggerLabel: 'System',
  triggerIcon: SystemAddFill,
  items: [{
    id: 'configuration',
    label: 'Configuration',
    icon: SystemAddFill
  }, {
    id: 'maintenance',
    label: 'Maintenance',
    icon: MetalcloudMeltingFurnaceLine
  }, {
    id: 'backup',
    label: 'Backup',
    icon: WeatherSunLine
  }]
}];
export const Default = Template.bind({});
Default.args = {
  accordionData: sampleAccordionData,
  selectedItemId: null,
  allowMultipleSelection: false
};
export const WithSelectedItem = Template.bind({});
WithSelectedItem.args = {
  accordionData: sampleAccordionData,
  selectedItemId: 'melting-furnace',
  allowMultipleSelection: false
};
export const MultipleSelection = Template.bind({});
MultipleSelection.args = {
  accordionData: sampleAccordionData,
  selectedItemId: null,
  allowMultipleSelection: true
};
export const Interactive = () => {
  const [selectedItemId, setSelectedItemId] = useState(null);
  const handleItemSelect = itemId => {
    setSelectedItemId(itemId);
  };
  return /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: '300px'
    }
  }, /*#__PURE__*/React.createElement(AccordionSelectableListContainer, {
    accordionData: sampleAccordionData,
    selectedItemId: selectedItemId,
    onItemSelect: handleItemSelect,
    allowMultipleSelection: false
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: '16px',
      padding: '12px',
      backgroundColor: '#f5f5f5',
      borderRadius: '4px'
    }
  }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, "Selected Item:"), " ", selectedItemId || 'None')));
};
export const MultipleSelectionInteractive = () => {
  const [selectedItems, setSelectedItems] = useState([]);
  const handleItemSelect = itemId => {
    setSelectedItems(prev => {
      if (prev.includes(itemId)) {
        return prev.filter(id => id !== itemId);
      } else {
        return [...prev, itemId];
      }
    });
  };
  return /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: '300px'
    }
  }, /*#__PURE__*/React.createElement(AccordionSelectableListContainer, {
    accordionData: sampleAccordionData,
    selectedItemId: selectedItems,
    onItemSelect: handleItemSelect,
    allowMultipleSelection: true
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: '16px',
      padding: '12px',
      backgroundColor: '#f5f5f5',
      borderRadius: '4px'
    }
  }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, "Selected Items:"), " ", selectedItems.length > 0 ? selectedItems.join(', ') : 'None')));
};
export const ComplexData = () => {
  const complexAccordionData = [{
    id: 'manufacturing',
    triggerLabel: 'Manufacturing',
    triggerIcon: MetalcloudMeltingFurnaceLine,
    items: [{
      id: 'furnace-1',
      label: 'Furnace Line 1',
      icon: MetalcloudMeltingFurnaceLine
    }, {
      id: 'furnace-2',
      label: 'Furnace Line 2',
      icon: MetalcloudMeltingFurnaceLine
    }, {
      id: 'casting-1',
      label: 'Casting Unit 1',
      icon: SystemAddFill
    }, {
      id: 'casting-2',
      label: 'Casting Unit 2',
      icon: SystemAddFill
    }, {
      id: 'quality-1',
      label: 'Quality Station 1',
      icon: WeatherSunLine
    }, {
      id: 'quality-2',
      label: 'Quality Station 2',
      icon: WeatherSunLine
    }]
  }, {
    id: 'operations',
    triggerLabel: 'Operations',
    triggerIcon: UserLine,
    items: [{
      id: 'users',
      label: 'User Management',
      icon: UserLine
    }, {
      id: 'roles',
      label: 'Role Management',
      icon: UserLine
    }, {
      id: 'permissions',
      label: 'Permissions',
      icon: SettingsLine
    }, {
      id: 'audit',
      label: 'Audit Logs',
      icon: FileTextLine
    }]
  }, {
    id: 'analytics',
    triggerLabel: 'Analytics',
    triggerIcon: FileTextLine,
    items: [{
      id: 'reports',
      label: 'Reports',
      icon: FileTextLine
    }, {
      id: 'dashboards',
      label: 'Dashboards',
      icon: FileTextLine
    }, {
      id: 'metrics',
      label: 'Metrics',
      icon: WeatherSunLine
    }, {
      id: 'alerts',
      label: 'Alerts',
      icon: SystemAddFill
    }]
  }, {
    id: 'system',
    triggerLabel: 'System',
    triggerIcon: SystemAddFill,
    items: [{
      id: 'config',
      label: 'Configuration',
      icon: SystemAddFill
    }, {
      id: 'maintenance',
      label: 'Maintenance',
      icon: MetalcloudMeltingFurnaceLine
    }, {
      id: 'backup',
      label: 'Backup & Restore',
      icon: WeatherSunLine
    }, {
      id: 'updates',
      label: 'System Updates',
      icon: SystemAddFill
    }, {
      id: 'logs',
      label: 'System Logs',
      icon: FileTextLine
    }]
  }];
  return /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: '350px'
    }
  }, /*#__PURE__*/React.createElement(AccordionSelectableListContainer, {
    accordionData: complexAccordionData,
    selectedItemId: null,
    allowMultipleSelection: false
  }));
};
export const WithDisabledItems = () => {
  const accordionDataWithDisabled = [{
    id: 'production',
    triggerLabel: 'Production',
    triggerIcon: MetalcloudMeltingFurnaceLine,
    items: [{
      id: 'melting-furnace',
      label: 'Melting Furnace',
      icon: MetalcloudMeltingFurnaceLine
    }, {
      id: 'casting-line',
      label: 'Casting Line (Disabled)',
      icon: SystemAddFill,
      disabled: true
    }, {
      id: 'quality-check',
      label: 'Quality Check',
      icon: WeatherSunLine
    }]
  }, {
    id: 'management',
    triggerLabel: 'Management',
    triggerIcon: UserLine,
    items: [{
      id: 'user-management',
      label: 'User Management',
      icon: UserLine
    }, {
      id: 'settings',
      label: 'Settings (Disabled)',
      icon: SettingsLine,
      disabled: true
    }, {
      id: 'reports',
      label: 'Reports',
      icon: FileTextLine
    }]
  }];
  return /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: '300px'
    }
  }, /*#__PURE__*/React.createElement(AccordionSelectableListContainer, {
    accordionData: accordionDataWithDisabled,
    selectedItemId: null,
    allowMultipleSelection: false
  }));
};
export const LongLabels = () => {
  const longLabelData = [{
    id: 'long-accordion-1',
    triggerLabel: 'This is a very long accordion trigger label that might wrap to multiple lines in the component',
    triggerIcon: MetalcloudMeltingFurnaceLine,
    items: [{
      id: 'long-item-1',
      label: 'This is a very long item label that might wrap to multiple lines',
      icon: SystemAddFill
    }, {
      id: 'long-item-2',
      label: 'Another long label with different content to test text wrapping behavior',
      icon: WeatherSunLine
    }, {
      id: 'long-item-3',
      label: 'Short label',
      icon: UserLine
    }]
  }, {
    id: 'long-accordion-2',
    triggerLabel: 'Another long accordion label for testing purposes',
    triggerIcon: UserLine,
    items: [{
      id: 'long-item-4',
      label: 'Fourth long item with extensive text content',
      icon: SettingsLine
    }, {
      id: 'long-item-5',
      label: 'Fifth item with medium length text',
      icon: FileTextLine
    }]
  }];
  return /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: '450px'
    }
  }, /*#__PURE__*/React.createElement(AccordionSelectableListContainer, {
    accordionData: longLabelData,
    selectedItemId: null,
    allowMultipleSelection: false
  }));
};