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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.35.0-rc.9",
+  "version": "0.35.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.8-rc.9",
+    "@axinom/mosaic-core": "^0.4.8",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -104,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "294d6a683845640ef70dc4ed5e9f057dfaacc388"
+  "gitHead": "cb1823de8e408b481091bfe0b0107815e8b49880"
 }

package/src/components/Buttons/Button/Button.model.ts

@@ -20,11 +20,11 @@ export type ButtonProps =
  */
 export interface NavigationButtonProps
   extends CommonNavigationButtonOptions,
-    Pick<ButtonIconOptions, 'icon'> {}
+    Pick<ButtonIconOptions, 'icon' | 'customIcon'> {}
 
 /**
  * Button options for icon buttons with JS handlers
  */
 export interface ContextButtonProps
   extends CommonJsButtonOptions,
-    Pick<ButtonIconOptions, 'icon'> {}
+    Pick<ButtonIconOptions, 'icon' | 'customIcon'> {}

package/src/components/Buttons/Button/Button.spec.tsx

@@ -9,6 +9,14 @@ const navigationButtonProps = {
   path: '/test',
 };
 
+const CustomIcon: React.FC = () => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  ></svg>
+);
+
 describe('Button (with icon)', () => {
   describe('ContextButtonElement', () => {
     it('renders the component without crashing', () => {
@@ -139,6 +147,25 @@ describe('Button (with icon)', () => {
 
       expect(icon.exists()).toBe(true);
     });
+
+    it('renders `customIcon` when provided', () => {
+      const wrapper = mount(<Button customIcon={<CustomIcon />} />);
+      const customIcon = wrapper.find(CustomIcon);
+
+      expect(customIcon.exists()).toBe(true);
+    });
+
+    it('renders `customIcon` instead of `icon` when both are provided', () => {
+      const wrapper = mount(
+        <Button icon={IconName.ChevronRight} customIcon={<CustomIcon />} />,
+      );
+
+      const customIcon = wrapper.find(CustomIcon);
+      const icon = wrapper.find(Icons);
+
+      expect(customIcon.exists()).toBe(true);
+      expect(icon.exists()).toBe(false);
+    });
   });
 
   describe('NavigationButtonElement', () => {
@@ -297,5 +324,34 @@ describe('Button (with icon)', () => {
 
       expect(icons.prop('icon')).toBe(mockIcon);
     });
+
+    it('renders `customIcon` when provided', () => {
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} customIcon={<CustomIcon />} />
+        </Router>,
+      );
+      const customIcon = wrapper.find(CustomIcon);
+
+      expect(customIcon.exists()).toBe(true);
+    });
+
+    it('renders `customIcon` instead of `icon` when both are provided', () => {
+      const wrapper = mount(
+        <Router>
+          <Button
+            {...navigationButtonProps}
+            icon={IconName.ChevronRight}
+            customIcon={<CustomIcon />}
+          />
+        </Router>,
+      );
+
+      const customIcon = wrapper.find(CustomIcon);
+      const icon = wrapper.find(Icons);
+
+      expect(customIcon.exists()).toBe(true);
+      expect(icon.exists()).toBe(false);
+    });
   });
 });

package/src/components/Buttons/Button/Button.tsx

@@ -17,6 +17,7 @@ const ButtonElement: React.ForwardRefRenderFunction<
 > = (
   {
     className,
+    customIcon,
     dataTestId,
     disabled = false,
     height,
@@ -30,6 +31,7 @@ const ButtonElement: React.ForwardRefRenderFunction<
 ) => {
   const commonProps = {
     className,
+    customIcon,
     dataTestId,
     disabled,
     height,
@@ -65,6 +67,7 @@ const ContextButtonElement = React.forwardRef<
     disabled = false,
     icon,
     className = '',
+    customIcon,
     dataTestId,
     onButtonClicked = noop,
     onBlur,
@@ -91,7 +94,7 @@ const ContextButtonElement = React.forwardRef<
       onBlur={onBlur}
       data-test-id={dataTestId ?? 'button'}
     >
-      <Icons icon={icon} />
+      {customIcon ? customIcon : <Icons icon={icon} />}
     </button>
   );
 });
@@ -105,6 +108,7 @@ const NavigationButtonElement = React.forwardRef<
     height,
     width,
     icon,
+    customIcon,
     className = '',
     dataTestId = undefined,
     disabled = false,
@@ -129,7 +133,7 @@ const NavigationButtonElement = React.forwardRef<
       data-test-id={dataTestId ?? 'button'}
       target={openInNewTab ? '_blank' : undefined}
     >
-      <Icons icon={icon ? icon : defaultIcon} />
+      {customIcon ? customIcon : <Icons icon={icon ? icon : defaultIcon} />}
     </Link>
   );
 });

package/src/components/Buttons/Button.model.ts

@@ -66,6 +66,11 @@ export interface ButtonIconOptions {
   icon?: IconName;
   /** Optional Icon Position */
   iconPosition?: 'left' | 'right';
+  /**
+   * Optional custom icon.
+   * When provided, `icon` property is ignored.
+   */
+  customIcon?: React.ReactNode;
 }
 
 /**

package/src/components/Buttons/CompositeButton/CompositeButton.spec.tsx

@@ -1,10 +1,18 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { IconName } from '../../Icons';
+import { IconName, Icons } from '../../Icons';
 import { ButtonContext } from '../Button.model';
 import { CompositeButton } from './CompositeButton';
 
+const CustomIcon: React.FC = () => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  ></svg>
+);
+
 describe('CompositeButton', () => {
   describe('Composite context button', () => {
     it('renders the component without crashing', () => {
@@ -143,6 +151,26 @@ describe('CompositeButton', () => {
 
       expect(button.text()).toBe('');
     });
+
+    it('renders `customIcon` when provided', () => {
+      const wrapper = mount(<CompositeButton customIcon={<CustomIcon />} />);
+      const customIcon = wrapper.find(CustomIcon);
+
+      expect(customIcon.exists()).toBeTruthy();
+    });
+
+    it('renders `customIcon` instead of `icon` when both provided', () => {
+      const wrapper = mount(
+        <CompositeButton
+          customIcon={<CustomIcon />}
+          icon={IconName.ChevronRight}
+        />,
+      );
+      const customIcon = wrapper.find(CustomIcon);
+
+      expect(customIcon.exists()).toBeTruthy();
+      expect(wrapper.find(Icons).exists()).toBeFalsy();
+    });
   });
 
   describe('Composite navigation button', () => {
@@ -298,6 +326,33 @@ describe('CompositeButton', () => {
       expect(iconDiv.find('Icons').prop('icon')).toBe(IconName.External);
     });
 
+    it('renders `customIcon` when provided', () => {
+      const wrapper = mount(
+        <Router>
+          <CompositeButton customIcon={<CustomIcon />} path="/example" />
+        </Router>,
+      );
+      const customIcon = wrapper.find(CustomIcon);
+
+      expect(customIcon.exists()).toBeTruthy();
+    });
+
+    it('renders `customIcon` instead of `icon` when both provided', () => {
+      const wrapper = mount(
+        <Router>
+          <CompositeButton
+            customIcon={<CustomIcon />}
+            icon={IconName.ChevronRight}
+            path="/example"
+          />
+        </Router>,
+      );
+      const iconDiv = wrapper.find('div').at(1);
+
+      expect(iconDiv.find('CustomIcon').exists()).toBeTruthy();
+      expect(iconDiv.find('Icons').exists()).toBeFalsy();
+    });
+
     it('renders the default data-test-id when dataTestId prop is not provided', () => {
       const wrapper = mount(
         <Router>

package/src/components/Buttons/CompositeButton/CompositeButton.tsx

@@ -22,6 +22,7 @@ import classes from './CompositeButton.scss';
  */
 export const CompositeButton: React.FC<CompositeButtonProps> = ({
   className,
+  customIcon,
   dataTestId,
   disabled,
   height,
@@ -35,6 +36,7 @@ export const CompositeButton: React.FC<CompositeButtonProps> = ({
 }) => {
   const commonProps = {
     className,
+    customIcon,
     dataTestId,
     disabled,
     height,
@@ -57,6 +59,7 @@ export const CompositeButton: React.FC<CompositeButtonProps> = ({
 const CompositeContextButton: React.FC<CompositeJsButtonProps> = ({
   buttonContext = ButtonContext.Context,
   className,
+  customIcon,
   dataTestId = undefined,
   disabled = false,
   height,
@@ -90,7 +93,10 @@ const CompositeContextButton: React.FC<CompositeJsButtonProps> = ({
     >
       <div>{text}</div>
       <div className={classes.icon}>
-        {icon !== null && icon !== undefined && <Icons icon={icon} />}
+        {customIcon ||
+          (icon !== null && icon !== undefined ? (
+            <Icons icon={icon} />
+          ) : undefined)}
       </div>
     </button>
   );
@@ -98,6 +104,7 @@ const CompositeContextButton: React.FC<CompositeJsButtonProps> = ({
 
 const CompositeNavigationButton: React.FC<CompositeNavigationButtonProps> = ({
   className,
+  customIcon,
   dataTestId = undefined,
   disabled = false,
   height,
@@ -129,7 +136,7 @@ const CompositeNavigationButton: React.FC<CompositeNavigationButtonProps> = ({
     >
       <div>{text}</div>
       <div className={classes.icon}>
-        <Icons icon={icon ? icon : defaultIcon} />
+        {customIcon ? customIcon : <Icons icon={icon ? icon : defaultIcon} />}
       </div>
     </Link>
   );

package/src/components/FormStation/FormStation.scss

@@ -70,6 +70,10 @@
     }
 
     .formContainer {
+      overflow-x: hidden;
+    }
+
+    .paddedContent {
       padding: 30px;
     }
 

package/src/components/FormStation/FormStation.tsx

@@ -246,8 +246,8 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
               <MessageBar {...stationMessage}>{stationMessage.body}</MessageBar>
             )}
             <div
-              className={clsx({
-                [classes.formContainer]: !edgeToEdgeContent,
+              className={clsx(classes.formContainer, {
+                [classes.paddedContent]: !edgeToEdgeContent,
               })}
             >
               <Form>