@axinom/mosaic-ui 0.63.0-rc.3 → 0.63.0-rc.4

package/package.json

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

package/src/components/Accordion/Accordion.scss

@@ -42,6 +42,7 @@
 
     .button {
       transition: transform 200ms ease;
+
       svg {
         height: 40%;
       }
@@ -49,10 +50,19 @@
       svg * {
         stroke: var(--accordion-item-arrow-color, $accordion-item-arrow-color);
       }
+
+      &.disabled {
+        svg * {
+          stroke: var(
+            --accordion-item-arrow-disabled-color,
+            $accordion-item-arrow-disabled-color
+          );
+        }
+      }
+
+      &.rotated {
+        transform: rotate(90deg);
+      }
     }
   }
 }
-
-.rotated {
-  transform: rotate(90deg);
-}

package/src/components/Accordion/Accordion.spec.tsx

@@ -1,59 +1,30 @@
-import { mount, shallow } from 'enzyme';
+import '@testing-library/jest-dom';
+import { configure, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
-import { Button } from '../Buttons';
-import { IconName } from '../Icons';
 import { Accordion } from './Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
 
+configure({ testIdAttribute: 'data-test-id' });
+
 describe('Accordion', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Accordion />);
-
-    expect(wrapper).toBeTruthy();
-  });
+    render(<Accordion />);
 
-  it('contains a wrapper', () => {
-    const wrapper = shallow(<Accordion header={<b>Header</b>} />);
-
-    const accWrapper = wrapper.find('.container > div');
-
-    expect(accWrapper.hasClass('wrapper')).toBe(true);
+    expect(screen.getByTestId('accordion')).toBeInTheDocument();
   });
 
   it('renders the component header', () => {
-    const wrapper = shallow(<Accordion header={<b>Header</b>} />);
-
-    expect(wrapper.find('.header').exists()).toBeTruthy();
+    render(<Accordion header={<b>Header</b>} />);
+    expect(screen.getByTestId('accordion-header')).toBeInTheDocument();
   });
 
   it('does not render a header when the prop is not provided', () => {
-    const wrapper = shallow(<Accordion />);
-
-    expect(wrapper.find('.header').exists()).toBeFalsy();
-  });
-
-  it('populates toggleExpanded and isExpanded props of child AccordionItem components', () => {
-    const wrapper = mount(
-      <Accordion header={<b>Header</b>}>
-        <div id="extra"></div>
-        <AccordionItem header={<b>Item 1</b>}>
-          <p>Content 1</p>
-        </AccordionItem>
-      </Accordion>,
-    );
-
-    const item = wrapper.find(AccordionItem);
-    const extra = wrapper.find('#extra');
-
-    expect(item.prop('isExpanded')).toBeDefined();
-    expect(item.prop('toggleExpanded')).toBeDefined();
-
-    expect(extra.prop('isExpanded')).toBeUndefined();
-    expect(extra.prop('toggleExpanded')).toBeUndefined();
+    render(<Accordion />);
+    expect(screen.queryByTestId('accordion-header')).not.toBeInTheDocument();
   });
 
   it('expands / collapses all children when the button is clicked', () => {
-    const wrapper = mount(
+    render(
       <Accordion header={<b>Header</b>}>
         <AccordionItem header={<b>Item 1</b>}>
           <p>Content 1</p>
@@ -67,26 +38,31 @@ describe('Accordion', () => {
       </Accordion>,
     );
 
-    const button = wrapper.find('.header .button').first();
-    button.simulate('click');
+    // Find the expand/collapse all button (assuming it's the first button in header)
+    const headerButton = screen.getByTestId('accordion-toggle-all');
+    fireEvent.click(headerButton);
 
-    let items = wrapper.find(AccordionItem);
+    // All items should be expanded (content visible)
+    let rows = screen.getAllByTestId('accordion-item-content');
+    expect(rows).toHaveLength(3);
 
-    items.forEach((item) => {
-      expect(item.prop('isExpanded')).toBe(true);
+    rows.forEach((row) => {
+      expect(row).toHaveClass('expanded');
     });
 
-    button.simulate('click');
+    fireEvent.click(headerButton);
 
-    items = wrapper.find(AccordionItem);
+    // All items should be collapsed (content not visible)
+    rows = screen.getAllByTestId('accordion-item-content');
+    expect(rows).toHaveLength(3);
 
-    items.forEach((item) => {
-      expect(item.prop('isExpanded')).toBe(false);
+    rows.forEach((row) => {
+      expect(row).not.toHaveClass('expanded');
     });
   });
 
   it('displays rotated ChevronRight icon when one or more children are expanded', () => {
-    const wrapper = mount(
+    render(
       <Accordion header={<b>Header</b>}>
         <AccordionItem header={<b>Item 1</b>}>
           <p>Content 1</p>
@@ -100,25 +76,29 @@ describe('Accordion', () => {
       </Accordion>,
     );
 
-    let button = wrapper.find(Button).first();
-
-    expect(button.prop('icon')).toBe(IconName.ChevronRight);
-    expect(button.hasClass('rotated')).toBe(false);
+    // The button in the header should have the ChevronRight icon and not be rotated initially
+    const headerButton = screen.getByTestId('accordion-toggle-all');
+    expect(headerButton.querySelector('.rotated')).not.toBeInTheDocument();
 
-    const item = wrapper.find(AccordionItem).last();
+    // Expand the last item
+    const lastItemButton = screen.getAllByRole('button')[2];
+    fireEvent.click(lastItemButton);
 
-    item.find('button').simulate('click');
+    // Now the header button should have the rotated class
+    expect(headerButton).toHaveClass('rotated');
 
-    button = wrapper.find(Button).first();
+    // Collapse the last item
+    fireEvent.click(lastItemButton);
 
-    expect(button.prop('icon')).toBe(IconName.ChevronRight);
-    expect(button.hasClass('rotated')).toBe(true);
-
-    item.find('button').simulate('click');
+    // The header button should not have the rotated class anymore
+    expect(headerButton).not.toHaveClass('rotated');
+  });
 
-    button = wrapper.find(Button).first();
+  it('disables the expand/collapse all button when there are no children', () => {
+    render(<Accordion header={<b>Header</b>} />);
 
-    expect(button.prop('icon')).toBe(IconName.ChevronRight);
-    expect(button.hasClass('rotated')).toBe(false);
+    // The button should be disabled when there are no children
+    const headerButton = screen.getByTestId('accordion-toggle-all');
+    expect(headerButton).toBeDisabled();
   });
 });

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

@@ -145,3 +145,11 @@ export const NestedSticky: StoryObj<typeof Accordion> = {
   },
   name: 'Nested Sticky',
 };
+
+export const NoChildren: StoryObj<typeof Accordion> = {
+  args: {
+    ...Default.args,
+    children: undefined,
+  },
+  name: 'No children',
+};

package/src/components/Accordion/Accordion.tsx

@@ -58,6 +58,7 @@ export const Accordion: React.FC<AccordionProps> = ({
 }) => {
   const expandAll = useExpand();
   const [expanded, setExpanded] = useState<ExpandedState>({});
+  const disabled = !React.Children.count(children);
 
   useEffect(() => {
     setExpanded((oldState) => {
@@ -110,8 +111,11 @@ export const Accordion: React.FC<AccordionProps> = ({
               }}
               className={clsx(classes.button, {
                 [classes.rotated]: expandAll.isExpanded,
+                [classes.disabled]: disabled,
               })}
               buttonContext={ButtonContext.None}
+              disabled={disabled}
+              dataTestId="accordion-toggle-all"
             ></Button>
             {header}
           </div>

package/src/components/Accordion/AccordionItem/AccordionItem.spec.tsx

@@ -1,111 +1,73 @@
-import { mount, shallow } from 'enzyme';
+import '@testing-library/jest-dom';
+import { configure, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { AccordionItem } from './AccordionItem';
 
-describe('AccordionItem', () => {
-  it('renders the component without crashing', () => {
-    const wrapper = shallow(<AccordionItem header={<b>Item 1</b>} />);
-
-    expect(wrapper).toBeTruthy();
-  });
+configure({ testIdAttribute: 'data-test-id' });
 
-  it('renders expanded content', () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={true} />,
-    );
-
-    const content = wrapper.find('.expanded');
+describe('AccordionItem', () => {
+  const header = <span>Header</span>;
+  const content = <div>Accordion Content</div>;
 
-    expect(content).toHaveLength(1);
+  it('renders header and children', () => {
+    render(<AccordionItem header={header}>{content}</AccordionItem>);
+    expect(screen.getByText('Header')).toBeInTheDocument();
+    expect(screen.getByText('Accordion Content')).toBeInTheDocument();
   });
 
-  it('does not render expanded content when isExpanded is false', () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={false} />,
+  it('calls toggleExpanded when row is clicked', () => {
+    const toggleExpanded = jest.fn();
+    render(
+      <AccordionItem header={header} toggleExpanded={toggleExpanded}>
+        {content}
+      </AccordionItem>,
     );
-
-    const content = wrapper.find('.expanded');
-
-    expect(content).toHaveLength(0);
+    fireEvent.click(screen.getByTestId('accordion-item-row'));
+    expect(toggleExpanded).toHaveBeenCalled();
   });
 
-  it('triggers toggleExpanded callback when the expand button is pressed', () => {
-    const spy = jest.fn();
-    const wrapper = mount(
-      <AccordionItem header={<b>Item 1</b>} toggleExpanded={spy} />,
-    );
-
-    const button = wrapper.find('button');
-
-    button.simulate('click');
-
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-
-  it('adds 50px spacing element by default', () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>}>
-        <div></div>
+  it('shows expanded styles and rotates icon when isExpanded is true', () => {
+    render(
+      <AccordionItem header={header} isExpanded>
+        {content}
       </AccordionItem>,
     );
-
-    const contentStyles = wrapper
-      .find('.content')
-      .prop('style') as React.CSSProperties;
-    const children = wrapper.find('.content > div');
-
-    expect(contentStyles.gridTemplateColumns).toBeUndefined();
-    expect(children).toHaveLength(2);
+    const row = screen.getByTestId('accordion-item-row');
+    expect(row.className).toMatch(/rowExpanded/);
+    const button = row.querySelector('button');
+    expect(button?.className).toMatch(/rotated/);
+    const contentDiv = screen.getByTestId('accordion-item-content');
+    expect(contentDiv.className).toMatch(/expanded/);
   });
 
-  it(`doesn't add 50px spacing element if 'allowLeftSpacing' is set to false`, () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} allowLeftSpacing={false}>
-        <div></div>
+  it('applies sticky class when sticky is true', () => {
+    render(
+      <AccordionItem header={header} sticky>
+        {content}
       </AccordionItem>,
     );
-
-    const contentStyles = wrapper
-      .find('.content')
-      .prop('style') as React.CSSProperties;
-    const children = wrapper.find('.content > div');
-
-    expect(contentStyles.gridTemplateColumns).toBe('1fr');
-    expect(children).toHaveLength(1);
+    const row = screen.getByTestId('accordion-item-row');
+    expect(row.className).toMatch(/sticky/);
   });
 
-  it(`should set expanded class when 'isExpanded' is true`, () => {
-    const wrapper = mount(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={true}>
-        <div></div>
+  it('does not add left spacing when allowLeftSpacing is false', () => {
+    render(
+      <AccordionItem header={header} allowLeftSpacing={false}>
+        {content}
       </AccordionItem>,
     );
-
-    const expanded = wrapper.find('.expanded');
-
-    expect(expanded).toHaveLength(1);
+    const contentDiv = screen.getByText('Accordion Content').parentElement;
+    expect(contentDiv).toHaveStyle('grid-template-columns: 1fr');
   });
 
-  it(`should not set expanded class when 'isExpanded' is true`, () => {
-    const wrapper = mount(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={false}>
-        <div></div>
+  it('applies custom className to root element', () => {
+    render(
+      <AccordionItem header={header} className="custom-class">
+        {content}
       </AccordionItem>,
     );
-
-    const expanded = wrapper.find('.expanded');
-
-    expect(expanded).toHaveLength(0);
-  });
-
-  it('creates a class based off of the className prop', () => {
-    const mockClassName = 'test-class';
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} className={mockClassName} />,
+    expect(screen.getByTestId('accordion-item').className).toContain(
+      'custom-class',
     );
-
-    const item = wrapper.find('.test-class');
-
-    expect(item.hasClass(mockClassName)).toBe(true);
   });
 });

package/src/styles/variables.scss

@@ -42,6 +42,7 @@ $accordion-item-text-color: $dark-gray;
 $accordion-item-hover-color: rgba($blue, 0.15);
 $accordion-item-border: 1px solid $light-gray;
 $accordion-item-arrow-color: $blue;
+$accordion-item-arrow-disabled-color: $gray;
 
 /* Explorer vars */
 $explorer-background-color: #ffffff;