Merge pull request #436 from performant-software/RB-accordion-list-horiz

Adds optional horizontal setting for accordion sections

Author: ajolipa

packages/core-data/src/components/AccordionItemsList.js

@@ -68,10 +68,15 @@ const AccordionItemsList = (props: Props) => (
             </Accordion.Trigger>
           </h2>
         </Accordion.Header>
-        <Accordion.Content
-          className='accordion-list-content text-[13px] font-semibold leading-[120%]'
-        >
-          <ul>
+        <Accordion.Content className='accordion-list-content text-[13px] font-semibold leading-[120%]'>
+          <ul className={clsx(
+            { flex: relation.horizontal },
+            { 'flex-row': relation.horizontal },
+            { 'flex-wrap': relation.horizontal },
+            { 'gap-6': relation.horizontal },
+            { 'py-6': relation.horizontal }
+          )}
+          >
             {
               _.map(relation.items, (item, idxx) => (
                 <>

packages/core-data/src/types/RelatedRecordsList.js

@@ -3,6 +3,11 @@
 import type { RelatedRecord } from './RelatedRecord';
 
 export type RelatedRecordsList = {
+  /**
+   * When set to true, items will be displayed in a row rather than a column
+   */
+  horizontal?: boolean,
+
   /**
    * Icon to use in front of each list item. Defaults to none. Note this is overridden if a renderItem prop is provided
    */

packages/storybook/src/core-data/AccordionItemsList.stories.js

@@ -54,6 +54,40 @@ const sampleDataWithIcon = [
   }
 ];
 
+const sampleDataWithImages = [
+  {
+    title: 'Related Images',
+    horizontal: true,
+    renderItem: (item) => (
+      <img src={item.data.src} className='max-h-[90px]' alt={item.name} />
+    ),
+    items: [
+      {
+        name: 'Kazuya Miyuki',
+        data: {
+          src: 'https://static.wikia.nocookie.net/all-worlds-alliance/images/1/15/MiyukiKazuya-Render.png'
+        }
+      },
+      {
+        name: 'Eijun Sawamura',
+        data: {
+          src: 'https://static.wikia.nocookie.net/all-worlds-alliance/images/2/22/369779ccc7619f63a468c6e8fd3be2f4.png'
+        }
+      }
+    ],
+    icon: 'person'
+  },
+  {
+    title: 'Related Organizations',
+    items: [
+      {
+        name: 'Seido High School Baseball Club'
+      }
+    ],
+    icon: 'occupation'
+  }
+];
+
 const sampleDataWithClickEvent = [
   {
     title: 'Related People',
@@ -103,3 +137,9 @@ export const WithClickEvent = () => (
     items={sampleDataWithClickEvent}
   />
 );
+
+export const WithImagesInRow = () => (
+  <AccordionItemsList
+    items={sampleDataWithImages}
+  />
+);