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

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');
+  });
 });