@axinom/mosaic-ui 0.63.0-rc.0 → 0.63.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.63.0-rc.0",
+  "version": "0.63.0-rc.1",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c111f5f22c27fa1ceaff19826888a61590b80651"
+  "gitHead": "6425b41d87ac24779772f202eb544e2574d9f614"
 }

package/src/components/Accordion/Accordion.stories.tsx

@@ -5,6 +5,7 @@ import { default as React, ReactNode, useEffect, useState } from 'react';
 import { createGroups, generateItemArray } from '../../helpers/storybook';
 import { TextButton } from '../Buttons/TextButton/TextButton';
 import { Divider } from '../FormElements';
+import { List } from '../List';
 import { Accordion } from './Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
 
@@ -17,12 +18,13 @@ const groups = createGroups({
 const generateItems = (
   startIndex?: number,
   sticky?: boolean,
+  children?: JSX.Element,
 ): JSX.Element[] => {
   return generateItemArray(10, (index) => {
     const key = index + (startIndex ?? 1);
     return (
       <AccordionItem key={key} header={<b>Item {key}</b>} sticky={sticky}>
-        <p>{faker.lorem.paragraph(20)}</p>
+        {children ?? <p>{faker.lorem.paragraph(20)}</p>}
       </AccordionItem>
     );
   });
@@ -56,7 +58,7 @@ export const Default: StoryObj<typeof Accordion> = {
   render: (args) => <Accordion {...args} header={<b>{args.header}</b>} />,
   args: {
     children: generateItems(),
-    header: 'Header' as any,
+    header: 'Header' as unknown as JSX.Element,
   },
   name: 'Default',
 };
@@ -103,3 +105,43 @@ export const AddingAndShuffling: StoryObj<typeof Accordion> = {
   },
   name: 'Adding and shuffling',
 };
+
+export const NestedSticky: StoryObj<typeof Accordion> = {
+  args: {
+    ...Default.args,
+    children: generateItems(
+      1,
+      true,
+      <div style={{ height: '350px' }}>
+        <List
+          columns={[
+            {
+              propertyName: 'id',
+              label: 'Id',
+              size: '50px',
+            },
+            {
+              propertyName: 'title',
+              label: 'Title',
+            },
+            {
+              propertyName: 'desc',
+              label: 'Description',
+            },
+          ]}
+          data={generateItemArray(10, (index) => ({
+            id: index + 1,
+            desc: `Description ${index + 1}: ${faker.lorem.words(
+              faker.datatype.number({ min: 10, max: 50 }),
+            )}`,
+            title: `Item ${index + 1}: ${faker.random.words(
+              faker.datatype.number({ min: 1, max: 3 }),
+            )}`,
+          }))}
+        />
+      </div>,
+    ),
+    stickyRows: true,
+  },
+  name: 'Nested Sticky',
+};

package/src/components/Accordion/AccordionItem/AccordionItem.scss

@@ -23,6 +23,7 @@
   }
 
   &.sticky {
+    z-index: 1;
     position: sticky;
     top: 50px;
   }