@axinom/mosaic-ui 0.28.0-rc.4 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.28.0-rc.4",
+  "version": "0.28.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "build-storybook -s ./.storybook/static"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.1-rc.14",
+    "@axinom/mosaic-core": "^0.4.1",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "03134b934baa215bbae0f024d9dc112d0a3dc661"
+  "gitHead": "c64cc582e131b50adfc21b0c8ad940469780f43b"
 }

package/src/components/FormElements/SingleLineText/SingleLineText.tsx

@@ -46,7 +46,6 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
   onFocus,
   className = '',
   tooltipContent,
-  ...rest
 }) => {
   const errorMsg: string | undefined = error;
   const [val, setVal] = useState(value ?? '');
@@ -105,7 +104,6 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
       error={errorMsg}
       tooltipContent={tooltipContent}
       dataTestFieldType="SingleLineText"
-      {...rest}
     >
       <input
         className={clsx({ [classes.hasError]: errorMsg !== undefined })}

package/src/components/FormElements/TextArea/TextArea.tsx

@@ -41,7 +41,6 @@ export const TextArea: React.FC<TextAreaProps> = ({
   onFocus,
   className = '',
   tooltipContent,
-  ...rest
 }) => {
   const errorMsg: string | undefined = error;
 
@@ -52,7 +51,6 @@ export const TextArea: React.FC<TextAreaProps> = ({
       error={errorMsg}
       tooltipContent={tooltipContent}
       dataTestFieldType="TextArea"
-      {...rest}
     >
       <textarea
         className={clsx({ [classes.hasError]: errorMsg !== undefined })}

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

@@ -1,4 +1,3 @@
-import { text } from '@storybook/addon-knobs';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Story } from '../../helpers/storybook';
@@ -98,20 +97,3 @@ export const Default: Story = () => {
     </div>
   );
 };
-
-export const knobs: Story = () => {
-  const item: HubItem = {
-    groupName: text('Group Name', 'Image Service'),
-    path: text('Path', '/video/acquisition'),
-    label: text('Label', 'Transcoding'),
-    subLabel: text('Sub Label', 'Image Acquisition'),
-    icon: <DefaultIcon />,
-  };
-  return (
-    <div style={defaultContainer}>
-      <MemoryRouter>
-        <Hub items={[item]} />
-      </MemoryRouter>
-    </div>
-  );
-};

package/src/components/Hub/Hub.tsx

@@ -56,7 +56,6 @@ export const Hub: React.FC<HubProps> = ({
                 key={itemIndex}
                 path={item.path}
                 label={item.label}
-                subLabel={item.subLabel}
                 icon={item.icon}
                 disabled={item.disabled}
               />

package/src/components/Hub/Tile/Tile.model.ts

@@ -5,8 +5,6 @@ export interface TileProps {
   path: string;
   /** Tile label */
   label: string;
-  /** Tile sub label */
-  subLabel?: string;
   /** Icon location or an react element of svg icon.
    * if an react element of svg is passed, the correct style for two types ("small" and "large") will be applied accordingly
    * The styles which don't want to be affected based on the tile type can be passed as inline styles.

package/src/components/Hub/Tile/Tile.scss

@@ -15,7 +15,11 @@
   &:hover {
     border: 1px solid var(--hub-tile-border-hover, $hub-tile-border-hover);
 
-    box-shadow: 0 0 0 2px var(--hub-tile-border-hover, $hub-tile-border-hover);
+    box-shadow: 0 0 0 2px
+    var(
+      --hub-tile-border-hover,
+      $hub-tile-border-hover
+    );
   }
 
   &.disabled {
@@ -30,12 +34,14 @@
     height: 60px;
     align-self: center;
     svg * {
-      stroke: var(--hub-tile-stroke-color, $hub-tile-stroke-color);
+      stroke: var(
+        --hub-tile-stroke-color,
+        $hub-tile-stroke-color,
+        );
     }
   }
 
   .label {
-    display: grid;
     text-align: center;
     align-self: start;
     font-size: 18px;

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

@@ -16,13 +16,7 @@ import classes from './Tile.scss';
  *  icon={'/images/default_image.svg'}
  * />
  */
-export const Tile: React.FC<TileProps> = ({
-  path,
-  label,
-  subLabel,
-  icon,
-  disabled,
-}) => {
+export const Tile: React.FC<TileProps> = ({ path, label, icon, disabled }) => {
   return (
     <Link
       className={clsx(classes.tile, disabled && classes.disabled)}
@@ -37,10 +31,9 @@ export const Tile: React.FC<TileProps> = ({
               <img src={icon} alt={`${label} icon`} />
             )}
       </div>
-      <div className={classes.label}>
-        <span data-test-id="tile-label">{label}</span>
-        <span>{subLabel}</span>
-      </div>
+      <span className={classes.label} data-test-id="tile-label">
+        {label}
+      </span>
     </Link>
   );
 };

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

@@ -26,8 +26,8 @@ const mockItems: LandingPageItem[] = [
     type: 'small',
   },
   {
-    path: '/localizations',
-    label: 'Localizations',
+    path: '/translations',
+    label: 'Translations',
     icon: '/images/default_image.svg',
     type: 'small',
   },

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

@@ -101,8 +101,8 @@ const smallTiles: LandingPageItem[] = [
     type: 'small',
   },
   {
-    path: '/localizations',
-    label: 'Localizations',
+    path: '/translations',
+    label: 'Translations',
     icon: <DefaultIcon />,
     type: 'small',
   },

package/src/index.ts

@@ -4,5 +4,4 @@ export * from './helpers';
 export * from './hooks';
 export * from './initialize';
 export * from './types';
-export { ErrorTypeToStationError } from './utils/ErrorTypeToStationError';
 export * from './validators';