@axinom/mosaic-ui 0.66.0-rc.2 → 0.66.0-rc.21

package/src/components/Filters/SelectionTypes/OptionsFilter/OptionsFilter.scss

@@ -4,11 +4,7 @@
   @include boxSizing;
 
   display: grid;
-  grid-auto-rows: 50px;
-  background-color: var(
-    --filter-controller-background-color,
-    $filter-controller-background-color
-  );
+  grid-auto-rows: 40px;
   gap: 1px;
   border-top: unset;
 
@@ -18,7 +14,7 @@
 
     span {
       font-size: var(--filter-font-size, $filter-font-size);
-      color: var(--filter-title-color, $filter-title-color);
+      color: var(--popper-text-color, $popper-text-color);
       display: grid;
       place-items: center left;
       padding: 0 20px;
@@ -27,15 +23,15 @@
 
       &:hover {
         background-color: var(
-          --filter-background-selected-color,
-          $filter-background-selected-color
+          --popper-item-hover-color,
+          $popper-item-hover-color
         );
       }
 
       &.selected {
         background-color: var(
-          --filter-background-selected-color,
-          $filter-background-selected-color
+          --popper-background-selected-color,
+          $popper-background-selected-color
         );
       }
     }

package/src/components/Filters/SelectionTypes/OptionsFilter/OptionsFilter.tsx

@@ -14,6 +14,9 @@ export interface OptionFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** Optional id for the label element */
+  labelId?: string;
 }
 
 export const OptionsFilter: React.FC<OptionFilterProps> = ({
@@ -21,9 +24,12 @@ export const OptionsFilter: React.FC<OptionFilterProps> = ({
   options,
   onSelect,
   className = '',
+  labelId,
 }) => {
   return (
     <div
+      role="radiogroup"
+      aria-labelledby={labelId}
       className={clsx(classes.container, 'options-filter-container', className)}
     >
       {options?.map((option: Option) => (
@@ -32,6 +38,8 @@ export const OptionsFilter: React.FC<OptionFilterProps> = ({
           onClick={() => onSelect(option.value)}
           key={option.label}
           data-test-value={option.value as string}
+          role="radio"
+          aria-checked={value === option.value}
         >
           <span
             className={clsx(value === option.value && classes.selected)}

package/src/components/Filters/SelectionTypes/SearcheableOptionsFilter/SearcheableOptionsFilter.tsx

@@ -14,6 +14,9 @@ interface SearcheableOptionFilterProps
   searchInputPlaceholder?: string;
   maxItems?: number;
   onSelect: (value: string, stringValue?: string) => void;
+
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const SearcheableOptionsFilter: React.FC<
@@ -24,6 +27,7 @@ export const SearcheableOptionsFilter: React.FC<
   maxItems = 10,
   onSelect,
   className,
+  inputId,
   ...rest
 }) => {
   const [options, setOptions] = useState<Option[]>([]);
@@ -56,9 +60,10 @@ export const SearcheableOptionsFilter: React.FC<
         )}
       >
         <input
+          id={inputId}
           autoFocus
           onChange={debounce(onChangeHandler, 500)}
-          className={clsx(classes.inputValue, '' && classes.hasError)}
+          className={classes.inputValue}
           placeholder={searchInputPlaceholder}
         />
       </div>

package/src/components/FormElements/Radio/Radio.tsx

@@ -5,6 +5,7 @@ import {
   ConfirmationConfig,
   ConfirmationMode,
 } from '../../ConfirmDialog';
+import { SvgElement } from '../../VisualElements/SvgElement';
 import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './Radio.scss';
@@ -42,7 +43,7 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
   confirmValue,
   disabled = false,
 }) => (
-  <svg
+  <SvgElement
     className={clsx(classes.buttonContainer, {
       [classes.checked]: checked,
       [classes.hasError]: hasError,
@@ -59,7 +60,7 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
   >
     <circle className={classes.radioOutline} cx="17" cy="17" r="15" />
     <circle className={classes.radioDot} cx="17" cy="17" r="7.5" />
-  </svg>
+  </SvgElement>
 );
 
 /**

package/src/components/FormElements/Select/Select.scss

@@ -94,7 +94,7 @@
   ul {
     display: grid;
     row-gap: 1px;
-    background-color: var(--popper-background-color, $popper-background-color);
+    background-color: white;
     padding: 0px;
     margin-top: 1px;
     margin-bottom: 1px;
@@ -105,7 +105,7 @@
     li {
       display: grid;
       place-items: center left;
-      height: 50px;
+      height: 40px;
       font-size: var(--popper-item-font-size, $popper-item-font-size);
       color: var(--popper-text-color, $popper-text-color);
       background-color: white;
@@ -116,18 +116,23 @@
       &:hover {
         cursor: pointer;
         background-color: var(
-          --popper-background-selected-color,
-          $popper-background-selected-color
+          --popper-item-hover-color,
+          $popper-item-hover-color
         );
       }
 
-      &[aria-selected='true'],
-      &[class='Mui-focused Mui-focusVisible'] {
+      &[aria-selected='true'] {
         background-color: var(
           --popper-background-selected-color,
           $popper-background-selected-color
         );
       }
+      &[class='Mui-focused Mui-focusVisible'] {
+        background-color: var(
+          --popper-item-selected-color,
+          $popper-item-selected-color
+        );
+      }
     }
   }
 }

package/src/components/FormElements/ToggleButton/ToggleButton.tsx

@@ -7,6 +7,7 @@ import {
   ConfirmationConfig,
   ConfirmationMode,
 } from '../../ConfirmDialog';
+import { SvgElement } from '../../VisualElements/SvgElement';
 import { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './ToggleButton.scss';
@@ -119,43 +120,22 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
           data-test-checked={selected}
         >
           <div className={clsx(classes.off, { [classes.active]: !selected })}>
-            <svg
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 40 40"
-            >
+            <SvgElement viewBox="0 0 40 40">
               {showONOFFText && !selected && (
                 <g className={classes.svgText}>
-                  <path
-                    d="M6.5,20.1c0-1,0.2-1.9,0.5-2.6c0.2-0.5,0.5-1,0.9-1.4c0.4-0.4,0.8-0.7,1.3-0.9c0.6-0.3,1.4-0.4,2.2-0.4
-		c1.5,0,2.7,0.5,3.6,1.4c0.9,0.9,1.3,2.2,1.3,3.8c0,1.6-0.4,2.9-1.3,3.8c-0.9,0.9-2.1,1.4-3.6,1.4c-1.5,0-2.7-0.5-3.6-1.4
-		S6.5,21.7,6.5,20.1z M8.6,20c0,1.1,0.3,2,0.8,2.6c0.5,0.6,1.2,0.9,2,0.9c0.8,0,1.5-0.3,2-0.9c0.5-0.6,0.8-1.5,0.8-2.6
-		c0-1.1-0.3-2-0.8-2.6s-1.2-0.8-2-0.8c-0.8,0-1.5,0.3-2,0.9C8.8,18,8.6,18.8,8.6,20z"
-                  ></path>
-                  <path d="M17.9,25V15h6.9v1.7H20v2.4h4.2v1.7H20V25H17.9z"></path>
-                  <path d="M26.6,25V15h6.9v1.7h-4.9v2.4h4.2v1.7h-4.2V25H26.6z"></path>
+                  <OffIcon />
                 </g>
               )}
-            </svg>
+            </SvgElement>
           </div>
           <div className={clsx(classes.on, { [classes.active]: selected })}>
-            <svg
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 40 40"
-            >
+            <SvgElement viewBox="0 0 40 40">
               {showONOFFText && selected && (
                 <g className={classes.svgText}>
-                  <path
-                    d="M10.4,20.1c0-1,0.2-1.9,0.5-2.6c0.2-0.5,0.5-1,0.9-1.4s0.8-0.7,1.3-0.9c0.6-0.3,1.3-0.4,2.2-0.4
-		c1.5,0,2.7,0.5,3.5,1.4s1.3,2.2,1.3,3.8c0,1.6-0.4,2.9-1.3,3.8c-0.9,0.9-2.1,1.4-3.5,1.4c-1.5,0-2.7-0.5-3.6-1.4
-		C10.8,22.9,10.4,21.7,10.4,20.1z M12.4,20c0,1.1,0.3,2,0.8,2.6c0.5,0.6,1.2,0.9,2,0.9s1.5-0.3,2-0.9C17.7,22,18,21.1,18,20
-		c0-1.1-0.3-2-0.8-2.6s-1.2-0.8-2-0.8s-1.5,0.3-2,0.9C12.7,18,12.4,18.8,12.4,20z"
-                  ></path>
-                  <path d="M21.7,25V15h2l4.1,6.7V15h1.9v10h-2l-4-6.5V25H21.7z"></path>
+                  <OnIcon />
                 </g>
               )}
-            </svg>
+            </SvgElement>
           </div>
         </button>
         {confirmation && (
@@ -176,3 +156,28 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
     </>
   );
 };
+
+const OffIcon: React.FC = () => (
+  <>
+    <path
+      d="M6.5,20.1c0-1,0.2-1.9,0.5-2.6c0.2-0.5,0.5-1,0.9-1.4c0.4-0.4,0.8-0.7,1.3-0.9c0.6-0.3,1.4-0.4,2.2-0.4
+c1.5,0,2.7,0.5,3.6,1.4c0.9,0.9,1.3,2.2,1.3,3.8c0,1.6-0.4,2.9-1.3,3.8c-0.9,0.9-2.1,1.4-3.6,1.4c-1.5,0-2.7-0.5-3.6-1.4
+S6.5,21.7,6.5,20.1z M8.6,20c0,1.1,0.3,2,0.8,2.6c0.5,0.6,1.2,0.9,2,0.9c0.8,0,1.5-0.3,2-0.9c0.5-0.6,0.8-1.5,0.8-2.6
+c0-1.1-0.3-2-0.8-2.6s-1.2-0.8-2-0.8c-0.8,0-1.5,0.3-2,0.9C8.8,18,8.6,18.8,8.6,20z"
+    />
+    <path d="M17.9,25V15h6.9v1.7H20v2.4h4.2v1.7H20V25H17.9z" />
+    <path d="M26.6,25V15h6.9v1.7h-4.9v2.4h4.2v1.7h-4.2V25H26.6z" />
+  </>
+);
+
+const OnIcon: React.FC = () => (
+  <>
+    <path
+      d="M10.4,20.1c0-1,0.2-1.9,0.5-2.6c0.2-0.5,0.5-1,0.9-1.4s0.8-0.7,1.3-0.9c0.6-0.3,1.3-0.4,2.2-0.4
+c1.5,0,2.7,0.5,3.5,1.4s1.3,2.2,1.3,3.8c0,1.6-0.4,2.9-1.3,3.8c-0.9,0.9-2.1,1.4-3.5,1.4c-1.5,0-2.7-0.5-3.6-1.4
+C10.8,22.9,10.4,21.7,10.4,20.1z M12.4,20c0,1.1,0.3,2,0.8,2.6c0.5,0.6,1.2,0.9,2,0.9s1.5-0.3,2-0.9C17.7,22,18,21.1,18,20
+c0-1.1-0.3-2-0.8-2.6s-1.2-0.8-2-0.8s-1.5,0.3-2,0.9C12.7,18,12.4,18.8,12.4,20z"
+    />
+    <path d="M21.7,25V15h2l4.1,6.7V15h1.9v10h-2l-4-6.5V25H21.7z" />
+  </>
+);

package/src/components/Hub/Hub.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { SvgElement } from '../VisualElements/SvgElement';
 import { Hub } from './Hub';
 import { HubItem } from './Hub.model';
 
@@ -14,7 +15,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"
@@ -22,7 +23,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/Hub/Tile/Tile.spec.tsx

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

package/src/components/Hub/Tile/Tile.tsx

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

package/src/components/Icons/Icons.scss

@@ -5,6 +5,7 @@
 
   height: 35px;
 
+  rect,
   polygon,
   polyline,
   path,

package/src/components/Icons/Icons.spec.tsx

@@ -11,50 +11,73 @@ describe('Icons', () => {
   });
 
   it.each`
-    key                         | result
-    ${IconName.Archive}         | ${1}
-    ${IconName.Block}           | ${1}
-    ${IconName.Bulk}            | ${1}
-    ${IconName.Calendar}        | ${1}
-    ${IconName.Checkmark}       | ${1}
-    ${IconName.ChevronDown}     | ${1}
-    ${IconName.ChevronLeft}     | ${1}
-    ${IconName.ChevronRight}    | ${1}
-    ${IconName.ChevronUp}       | ${1}
-    ${IconName.Copy}            | ${1}
-    ${IconName.Delete}          | ${1}
-    ${IconName.Details}         | ${1}
-    ${IconName.Drag}            | ${6}
-    ${IconName.Ellipsis}        | ${1}
-    ${IconName.Error}           | ${1}
-    ${IconName.External}        | ${1}
-    ${IconName.File}            | ${1}
-    ${IconName.Info}            | ${1}
-    ${IconName.MidlineEllipsis} | ${1}
-    ${IconName.Minus}           | ${1}
-    ${IconName.NavigateRight}   | ${1}
-    ${IconName.Pause}           | ${1}
-    ${IconName.Play}            | ${1}
-    ${IconName.Plus}            | ${1}
-    ${IconName.Publish}         | ${1}
-    ${IconName.RemoveFilter}    | ${1}
-    ${IconName.Replace}         | ${1}
-    ${IconName.Retry}           | ${1}
-    ${IconName.Snapshot}        | ${1}
-    ${IconName.Stop}            | ${1}
-    ${IconName.Success}         | ${1}
-    ${IconName.Unarchive}       | ${1}
-    ${IconName.Undo}            | ${1}
-    ${IconName.Unpublish}       | ${1}
-    ${IconName.Upload}          | ${1}
-    ${IconName.Warning}         | ${1}
-    ${IconName.X}               | ${1}
-  `('renders an icon for each key in IconName', ({ key, result }) => {
+    key                          | result
+    ${IconName.Axi}              | ${1}
+    ${IconName.Archive}          | ${1}
+    ${IconName.Audio}            | ${1}
+    ${IconName.DescriptiveAudio} | ${1}
+    ${IconName.BackwardOne}      | ${1}
+    ${IconName.BackwardTen}      | ${1}
+    ${IconName.Block}            | ${1}
+    ${IconName.Bulk}             | ${1}
+    ${IconName.BulkEdit}         | ${1}
+    ${IconName.Calendar}         | ${1}
+    ${IconName.Checkmark}        | ${1}
+    ${IconName.ChevronDown}      | ${1}
+    ${IconName.ChevronLeft}      | ${1}
+    ${IconName.ChevronRight}     | ${1}
+    ${IconName.ChevronUp}        | ${1}
+    ${IconName.ClosedCaption}    | ${1}
+    ${IconName.Copy}             | ${1}
+    ${IconName.Delete}           | ${1}
+    ${IconName.Details}          | ${1}
+    ${IconName.Drag}             | ${6}
+    ${IconName.Ellipsis}         | ${1}
+    ${IconName.Error}            | ${1}
+    ${IconName.External}         | ${1}
+    ${IconName.File}             | ${1}
+    ${IconName.Filters}          | ${1}
+    ${IconName.ForwardOne}       | ${1}
+    ${IconName.ForwardTen}       | ${1}
+    ${IconName.Info}             | ${1}
+    ${IconName.InProgress}       | ${1}
+    ${IconName.MidlineEllipsis}  | ${1}
+    ${IconName.Minus}            | ${1}
+    ${IconName.Mute}             | ${1}
+    ${IconName.NavigateRight}    | ${1}
+    ${IconName.Pause}            | ${1}
+    ${IconName.Play}             | ${1}
+    ${IconName.Plus}             | ${1}
+    ${IconName.Publish}          | ${1}
+    ${IconName.QuickEdit}        | ${1}
+    ${IconName.QuickEditStation} | ${1}
+    ${IconName.RemoveFilter}     | ${1}
+    ${IconName.Replace}          | ${1}
+    ${IconName.Retry}            | ${1}
+    ${IconName.Save}             | ${2}
+    ${IconName.Snapshot}         | ${1}
+    ${IconName.Stop}             | ${1}
+    ${IconName.Subtitles}        | ${1}
+    ${IconName.Success}          | ${1}
+    ${IconName.Unarchive}        | ${1}
+    ${IconName.Undo}             | ${1}
+    ${IconName.Unmute}           | ${1}
+    ${IconName.Unpublish}        | ${1}
+    ${IconName.Upload}           | ${1}
+    ${IconName.Video}            | ${1}
+    ${IconName.Warning}          | ${1}
+    ${IconName.X}                | ${1}
+  `('renders $key icon with $result children', ({ key, result }) => {
     const wrapper = mount(<Icons icon={key} />);
 
-    const icon = wrapper.find('svg');
+    const svgElement = wrapper.find('svg');
+    expect(svgElement).toHaveLength(1);
+
+    // Get the actual DOM node and count its children
+    const domNode = svgElement.getDOMNode() as SVGElement;
+    const childrenCount = domNode.children.length;
 
-    expect(icon.children()).toHaveLength(result);
+    expect(childrenCount).toBe(result);
   });
 
   it('passes down optional className to icon', () => {
@@ -75,4 +98,30 @@ describe('Icons', () => {
 
     expect(icon.children()).toHaveLength(0);
   });
+
+  it('applies accessibility attributes correctly', () => {
+    const wrapper = mount(
+      <Icons
+        icon={IconName.Play}
+        aria-label="Play video"
+        title="Start playback"
+      />,
+    );
+
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('aria-label')).toBe('Play video');
+    expect(svg.prop('role')).toBe('img');
+    expect(svg.prop('aria-hidden')).toBeUndefined();
+    expect(wrapper.find('title').text()).toBe('Start playback');
+  });
+
+  it('marks decorative icons as presentation', () => {
+    const wrapper = mount(<Icons icon={IconName.Play} />);
+
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('presentation');
+    expect(svg.prop('aria-hidden')).toBe('true');
+  });
 });