@axinom/mosaic-ui 0.66.0-rc.9 → 0.66.0

package/src/components/InfoTooltip/InfoTooltip.scss

@@ -36,7 +36,7 @@ $pop-up-arrow-extrusion: -7px;
   color: var(--infotooltip-text-color, $infotooltip-text-color);
   padding: 15px;
 
-  z-index: 10;
+  z-index: 9999;
 
   .arrow,
   .arrow::before {

package/src/components/InlineMenu/InlineMenu.scss

@@ -13,7 +13,7 @@ $pop-up-arrow-extrusion: -7px;
 
   box-shadow: 0px 1px 8px 3px rgba(92, 92, 92, 0.27);
 
-  z-index: 10;
+  z-index: 9999;
 
   .arrow,
   .arrow::before {
@@ -102,7 +102,7 @@ $pop-up-arrow-extrusion: -7px;
 }
 
 .buttonDefaultOpacity {
-  background-color: rgba(white, 0.7) !important;
+  background-color: color-mix(in srgb, white 70%, transparent) !important;
   svg * {
     stroke: var(
       --inline-menu-button-stroke-color,

package/src/components/LandingPageTiles/LandingPageTiles.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { createGroups, getRandomInt } from '../../helpers/storybook';
+import { SvgElement } from '../VisualElements/SvgElement';
 import { LandingPageTiles } from './LandingPageTiles';
 import { LandingPageItem } from './LandingPageTiles.model';
 
@@ -15,7 +16,7 @@ const defaultContainer = {
 
 const DefaultIcon: React.FC = () => {
   return (
-    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+    <SvgElement viewBox="0 0 40 40">
       <path
         vectorEffect="non-scaling-stroke"
         fill="none"
@@ -23,7 +24,7 @@ const DefaultIcon: React.FC = () => {
         d="M39,39H1V1h38V39z M39.1,26l-8.4-8.7l-9.1,11.5
 	l-6.4-5.4L3.6,39.1 M12.8,7.8c-2.4,0-4.4,2-4.4,4.4s2,4.4,4.4,4.4s4.4-2,4.4-4.4S15.3,7.8,12.8,7.8z"
       />
-    </svg>
+    </SvgElement>
   );
 };
 

package/src/components/LandingPageTiles/TileLarge/TileLarge.spec.tsx

@@ -84,7 +84,11 @@ describe('TileLarge', () => {
   });
 
   it('renders an icon when passed as a string URL', () => {
-    const wrapper = shallow(<TileLarge {...mockProps} />);
+    const wrapper = mount(
+      <MemoryRouter>
+        <TileLarge {...mockProps} />
+      </MemoryRouter>,
+    );
     const iconUrl = wrapper.find('img').prop('src');
 
     expect(iconUrl).toBe(`${mockProps.icon}`);

package/src/components/LandingPageTiles/TileLarge/TileLarge.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useValueOrOnDemand } from '../../../hooks/useValueOrOnDemand/useValueOrOnDemand';
 import { Loader } from '../../Loaders/Loader/Loader';
+import { ImgElement } from '../../VisualElements';
 import { LandingPageItem } from '../LandingPageTiles.model';
 import classes from './TileLarge.scss';
 
@@ -56,7 +57,7 @@ export const TileLarge: React.FC<TileLargeProps> = ({
         {React.isValidElement(icon)
           ? icon
           : typeof icon === 'string' && (
-              <img src={icon} alt={`${label} icon`} />
+              <ImgElement src={icon} decorative={true} />
             )}
       </div>
       <div className={classes.titlesSection}>

package/src/components/LandingPageTiles/TileSmall/TileSmall.spec.tsx

@@ -1,5 +1,6 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
+import { MemoryRouter } from 'react-router';
 import { TileSmall, TileSmallProps } from './TileSmall';
 
 const mockProps: TileSmallProps = {
@@ -31,7 +32,11 @@ describe('TileSmall', () => {
   });
 
   it('renders an icon when passed a string URL', () => {
-    const wrapper = shallow(<TileSmall {...mockProps} />);
+    const wrapper = mount(
+      <MemoryRouter>
+        <TileSmall {...mockProps} />
+      </MemoryRouter>,
+    );
     const iconUrl = wrapper.find('img').prop('src');
 
     expect(iconUrl).toBe(`${mockProps.icon}`);

package/src/components/LandingPageTiles/TileSmall/TileSmall.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { ImgElement } from '../../VisualElements';
 import { LandingPageItem } from '../LandingPageTiles.model';
 import classes from './TileSmall.scss';
 
@@ -50,7 +51,7 @@ export const TileSmall: React.FC<TileSmallProps> = ({
         {React.isValidElement(icon)
           ? icon
           : typeof icon === 'string' && (
-              <img src={icon} alt={`${label} icon`} />
+              <ImgElement src={icon} decorative={true} />
             )}
       </div>
 

package/src/components/List/List.scss

@@ -42,10 +42,10 @@
     p {
       margin-left: 10px;
 
-      color: $dark-gray;
+      color: var(--ax-neutral-dark);
     }
 
-    background-color: $light-gray !important;
+    background-color: var(--ax-neutral-light) !important;
   }
 
   .error {
@@ -56,9 +56,9 @@
     p {
       margin: 10px 0px 10px 10px;
 
-      color: $red;
+      color: var(--ax-error);
     }
 
-    background-color: rgba($red, 0.15) !important;
+    background-color: color-mix(in srgb, var(--ax-error) 15%, transparent) !important;
   }
 }

package/src/components/List/ListCheckBox/ListCheckBox.tsx

@@ -44,6 +44,7 @@ export const ListCheckBox: React.FC<ListCheckBoxProps> = ({
     <div
       className={clsx(classes.container, 'list-checkbox-container', className)}
       onClick={containerHandler}
+      aria-checked={isChecked}
     >
       <Button
         height={height}

package/src/components/List/ListHeader/ColumnLabel/ColumnLabel.spec.tsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { SortData } from '../../List.model';
 import { ColumnLabel } from './ColumnLabel';
@@ -37,7 +37,7 @@ describe('ColumnLabel', () => {
   });
 
   it('renders the directional arrows by default', () => {
-    const wrapper = shallow(<ColumnLabel propertyName={'test-prop'} />);
+    const wrapper = mount(<ColumnLabel propertyName="test-prop" />);
 
     const dirArrows = wrapper.find('svg');
     const clickWrapper = wrapper.find('.clickWrapper');
@@ -77,7 +77,7 @@ describe('ColumnLabel', () => {
     );
 
     const columnTitle = wrapper.find('.clickWrapper');
-    columnTitle.simulate('click');
+    columnTitle.simulate('click', { stopPropagation: jest.fn() });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({
@@ -102,7 +102,7 @@ describe('ColumnLabel', () => {
     );
 
     const columnTitle = wrapper.find('.clickWrapper');
-    columnTitle.simulate('click');
+    columnTitle.simulate('click', { stopPropagation: jest.fn() });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({
@@ -126,7 +126,7 @@ describe('ColumnLabel', () => {
     );
 
     const columnTitle = wrapper.find('.clickWrapper');
-    columnTitle.simulate('click');
+    columnTitle.simulate('click', { stopPropagation: jest.fn() });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({
@@ -150,7 +150,7 @@ describe('ColumnLabel', () => {
     );
 
     const columnTitle = wrapper.find('.clickWrapper');
-    columnTitle.simulate('click');
+    columnTitle.simulate('click', { stopPropagation: jest.fn() });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({

package/src/components/List/ListHeader/ColumnLabel/ColumnLabel.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
 import { noop } from '../../../../helpers/utils';
+import { SvgElement } from '../../../VisualElements/SvgElement';
 import { ColumnSortKeys, SortData } from '../../List.model';
 import classes from './ColumnLabel.scss';
 
@@ -64,7 +65,11 @@ export const ColumnLabel = <T,>({
         <div
           className={clsx(classes.clickWrapper, classes.sortable)}
           onClick={
-            propertyName && (() => onSortChanged(getSortDir(propertyName)))
+            propertyName &&
+            ((e) => {
+              onSortChanged(getSortDir(propertyName));
+              e.stopPropagation();
+            })
           }
           data-test-id={`list-label:${String(propertyName)}`}
           data-test-sort-dir={direction ?? 'none'}
@@ -73,26 +78,18 @@ export const ColumnLabel = <T,>({
             {label ?? propertyName}
           </span>
           <div className={classes.arrows}>
-            <svg
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 13 10"
-            >
+            <SvgElement viewBox="0 0 13 10">
               <path
                 className={clsx({ [classes.sorted]: direction === 'asc' })}
                 d="M1.5,7.3l4.8-5.7l5.2,5.7"
               ></path>
-            </svg>
-            <svg
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 13 10"
-            >
+            </SvgElement>
+            <SvgElement viewBox="0 0 13 10">
               <path
                 className={clsx({ [classes.sorted]: direction === 'desc' })}
                 d="M11.5,2.8L6.7,8.5L1.5,2.8"
               ></path>
-            </svg>
+            </SvgElement>
           </div>
         </div>
       </div>

package/src/components/List/ListHeader/ListHeader.scss

@@ -5,7 +5,6 @@
   display: grid;
   position: sticky;
   top: 0;
-  //z-index: 1;
 
   background-color: var(
     --explorer-header-background-color,
@@ -13,7 +12,7 @@
   );
 
   box-sizing: border-box;
-  border-bottom: solid 1px lighten($gray, 15%);
+  border-bottom: solid 1px var(--ax-neutral-light);
 
   .columnLabel {
     box-sizing: border-box;
@@ -29,7 +28,7 @@
       height: 100%;
 
       z-index: 1;
-      border-right: var(--explorer-list-row-border, 1px solid #dddddd);
+      border-right: var(--explorer-list-row-border, 1px solid var(--ax-neutral-light));
       position: absolute;
       right: 0;
 

package/src/components/List/ListHeader/ListHeader.spec.tsx

@@ -208,6 +208,8 @@ describe('ListHeader', () => {
         } as any),
       );
 
+      window.dispatchEvent(new Event('mouseup', {} as any));
+
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });

package/src/components/List/ListHeader/ListHeader.tsx

@@ -85,60 +85,66 @@ export const ListHeader = <T extends Data>({
     alignItems: verticalTextAlign,
   } as React.CSSProperties;
 
-  const { cols, mouseDown } = useResize(columns, onColumnSizesChanged);
+  const { cols, mouseDown, ResizeIndicator } = useResize(
+    columns,
+    onColumnSizesChanged,
+  );
 
   return (
-    <div
-      className={clsx(classes.container, 'list-header-container', className)}
-      style={customStyles}
-      data-test-id="list-header"
-    >
-      {columns.map((column, i) => (
-        <div
-          key={column.key ?? (column.propertyName as string)}
-          ref={cols[i].ref}
-          className={clsx(classes.columnLabel)}
-        >
-          <ColumnLabel<T>
-            propertyName={column.propertyName}
-            label={column.label ?? (column.propertyName as string)}
-            sortable={column.sortable}
-            columnSortKeys={column?.columnSortKeys}
-            sortData={sortData}
-            onSortChanged={onSortChanged}
-          />
+    <>
+      {ResizeIndicator}
+      <div
+        className={clsx(classes.container, 'list-header-container', className)}
+        style={customStyles}
+        data-test-id="list-header"
+      >
+        {columns.map((column, i) => (
           <div
-            onMouseDown={
-              !column.disableResizing
-                ? (e) => {
-                    e.preventDefault();
-                    mouseDown(i);
-                  }
-                : undefined
-            }
-            onDoubleClick={() => onResetColumnSizes()}
-            className={clsx(classes.resizeHandle, {
-              [classes.resizeHandleDisabled]: column.disableResizing,
-            })}
-          />
-        </div>
-      ))}
-      {hasActionColumn && (
-        <div
-          ref={cols[cols.length - 1].ref}
-          className={clsx(classes.columnLabel)}
-        >
-          {showItemCheckbox && (
-            <ListCheckBox
-              height={actionSize}
-              width={actionSize}
-              isChecked={itemSelected}
-              isDisabled={isCheckboxDisabled}
-              onCheckBoxToggled={onCheckboxToggled}
+            key={column.key ?? (column.propertyName as string)}
+            ref={cols[i].ref}
+            className={clsx(classes.columnLabel)}
+          >
+            <ColumnLabel<T>
+              propertyName={column.propertyName}
+              label={column.label ?? (column.propertyName as string)}
+              sortable={column.sortable}
+              columnSortKeys={column?.columnSortKeys}
+              sortData={sortData}
+              onSortChanged={onSortChanged}
+            />
+            <div
+              onMouseDown={
+                !column.disableResizing
+                  ? (e) => {
+                      e.preventDefault();
+                      mouseDown(i);
+                    }
+                  : undefined
+              }
+              onDoubleClick={() => onResetColumnSizes()}
+              className={clsx(classes.resizeHandle, {
+                [classes.resizeHandleDisabled]: column.disableResizing,
+              })}
             />
-          )}
-        </div>
-      )}
-    </div>
+          </div>
+        ))}
+        {hasActionColumn && (
+          <div
+            ref={cols[cols.length - 1].ref}
+            className={clsx(classes.columnLabel)}
+          >
+            {showItemCheckbox && (
+              <ListCheckBox
+                height={actionSize}
+                width={actionSize}
+                isChecked={itemSelected}
+                isDisabled={isCheckboxDisabled}
+                onCheckBoxToggled={onCheckboxToggled}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </>
   );
 };

package/src/components/List/ListRow/ListRow.scss

@@ -29,34 +29,7 @@
 
   &.disabled {
     cursor: not-allowed;
-    color: var(--disabled-text-color, $gray);
-  }
-
-  .cellWrapper {
-    display: grid;
-    width: 100%;
-    height: 100%;
-  }
-
-  .cell {
-    max-width: 100%;
-    max-height: 100%;
-
-    span {
-      padding: 5px 0;
-      display: block;
-      width: 100%;
-    }
-
-    &.nowrap {
-      overflow: hidden;
-
-      span {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
+    color: var(--disabled-text-color, var(--ax-neutral));
   }
 
   .actions {

package/src/components/List/ListRow/ListRow.spec.tsx

@@ -47,7 +47,7 @@ describe('ListRow', () => {
   `(
     'renders the defined columns in the defined order -> $name',
     ({ expectedColumns }: { expectedColumns: Column<TestExplorerData>[] }) => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListRow {...mockProps} columns={expectedColumns} />,
       );
 
@@ -74,7 +74,7 @@ describe('ListRow', () => {
 
     setLocale('en-US');
 
-    const wrapper = shallow(
+    const wrapper = mount(
       <ListRow
         data={rowData}
         columns={expectedColumns}
@@ -115,7 +115,7 @@ describe('ListRow', () => {
     ];
     const rowData = { value: 'something' };
 
-    const wrapper = shallow(
+    const wrapper = mount(
       // @ts-expect-error Typings to not match up
       <ListRow {...mockProps} data={rowData} columns={expectedColumns} />,
     );
@@ -129,9 +129,7 @@ describe('ListRow', () => {
       { propertyName: "doesn't exist", size: '1fr', label: 'desc' },
     ];
 
-    const wrapper = shallow(
-      <ListRow {...mockProps} columns={expectedColumns} />,
-    );
+    const wrapper = mount(<ListRow {...mockProps} columns={expectedColumns} />);
 
     const actualColumns = wrapper.find('.cellWrapper');
 
@@ -488,12 +486,16 @@ describe('ListRow', () => {
       ];
       const rowData = { value: mockValue };
 
-      const wrapper = shallow(
+      const wrapper = mount(
         // @ts-expect-error Typings to not match up
         <ListRow {...mockProps} data={rowData} columns={expectedColumns} />,
       );
 
-      const cell = wrapper.find('.cell').first();
+      // When a custom renderer returns a string, it's wrapped in a span with data-test-id
+      const span = wrapper
+        .find('span[data-test-id="list-entry-property:value"]')
+        .first();
+      const cell = span.closest('.cell');
 
       expect(cell.prop('title')).toBe(mockValue);
     });