@axinom/mosaic-ui 0.56.0-rc.2 → 0.56.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.56.0-rc.2",
+  "version": "0.56.0-rc.4",
   "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.29-rc.2",
+    "@axinom/mosaic-core": "^0.4.29-rc.4",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@mui/base": "5.0.0-beta.40",
@@ -107,5 +107,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ea45b5c291c3c4880d19cdb0731a4e33dc3f19b1"
+  "gitHead": "34571b3a186604e87ad15f99ce3e44aeaaab3459"
 }

package/src/components/Icons/Icons.models.ts

@@ -3,7 +3,7 @@
  */
 export enum IconName {
   Archive,
-  Unarchive,
+  Audio,
   BackwardOne,
   BackwardTen,
   Block,
@@ -14,6 +14,7 @@ export enum IconName {
   ChevronLeft,
   ChevronRight,
   ChevronUp,
+  ClosedCaption,
   Copy,
   Delete,
   Details,
@@ -25,8 +26,8 @@ export enum IconName {
   Filters,
   ForwardOne,
   ForwardTen,
-  Info,
   InProgress,
+  Info,
   MidlineEllipsis,
   Minus,
   Mute,
@@ -38,16 +39,19 @@ export enum IconName {
   QuickEdit,
   QuickEditStation,
   RemoveFilter,
-  Retry,
   Replace,
+  Retry,
   Save,
   Snapshot,
   Stop,
+  Subtitles,
   Success,
+  Unarchive,
   Undo,
   Unmute,
   Unpublish,
   Upload,
+  Video,
   Warning,
   X,
 }

package/src/components/Icons/Icons.tsx

@@ -27,6 +27,23 @@ const ArchiveIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
+const AudioIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      stroke="#B7B7B7"
+      strokeWidth="2"
+      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM14.5,16.7h-5.1v6.7h5.1l7.3,5V11.7l-7.3,5ZM26.1,24.5c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5"
+    />
+  </svg>
+);
+
 const BackwardOne: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
@@ -196,6 +213,23 @@ const ChevronUpIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
+const ClosedCaptionIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      stroke="#B7B7B7"
+      strokeWidth="2"
+      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM17.5,17.8c0-.7-.5-3-3.6-3s-3.6,2.3-3.6,4.3v1.6c0,1.3,0,4.6,3.6,4.6s3.8-2.6,3.8-3M29.6,17.8c0-.7-.5-3-3.6-3s-3.6,2.3-3.6,4.3v1.6c0,1.3,0,4.6,3.6,4.6s3.8-2.6,3.8-3"
+    />
+  </svg>
+);
+
 const CopyIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
@@ -684,6 +718,23 @@ const StopIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
+const SubtitlesIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      stroke="#B7B7B7"
+      strokeWidth="2"
+      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM10.1,17.7h19.8M10.1,24.3h5.9M19.5,24.3h10.4"
+    />
+  </svg>
+);
+
 const SuccessIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
@@ -800,6 +851,23 @@ const WarningIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
+const VideoIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      stroke="#B7B7B7"
+      strokeWidth="2"
+      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM15.9,14.2l10.2,5.7-10.2,5.8v-11.5Z"
+    />
+  </svg>
+);
+
 const XIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
@@ -824,6 +892,7 @@ const XIcon: React.FC<{ className?: string }> = ({ className }) => (
 export const Icons: React.FC<IconsProps> = ({ icon, className }) => {
   const icons: { [key in IconName]: JSX.Element } = {
     [IconName.Archive]: <ArchiveIcon className={className} />,
+    [IconName.Audio]: <AudioIcon className={className} />,
     [IconName.BackwardOne]: <BackwardOne className={className} />,
     [IconName.BackwardTen]: <BackwardTen className={className} />,
     [IconName.Block]: <BlockIcon className={className} />,
@@ -834,6 +903,7 @@ export const Icons: React.FC<IconsProps> = ({ icon, className }) => {
     [IconName.ChevronLeft]: <ChevronLeftIcon className={className} />,
     [IconName.ChevronRight]: <ChevronRightIcon className={className} />,
     [IconName.ChevronUp]: <ChevronUpIcon className={className} />,
+    [IconName.ClosedCaption]: <ClosedCaptionIcon className={className} />,
     [IconName.Copy]: <CopyIcon className={className} />,
     [IconName.Delete]: <DeleteIcon className={className} />,
     [IconName.Details]: <DetailsIcon className={className} />,
@@ -863,12 +933,14 @@ export const Icons: React.FC<IconsProps> = ({ icon, className }) => {
     [IconName.Save]: <SaveIcon className={className} />,
     [IconName.Snapshot]: <SnapshotIcon className={className} />,
     [IconName.Stop]: <StopIcon className={className} />,
+    [IconName.Subtitles]: <SubtitlesIcon className={className} />,
     [IconName.Success]: <SuccessIcon className={className} />,
     [IconName.Unarchive]: <UnarchiveIcon className={className} />,
     [IconName.Undo]: <UndoIcon className={className} />,
     [IconName.Unmute]: <UnmuteIcon className={className} />,
     [IconName.Unpublish]: <UnpublishIcon className={className} />,
     [IconName.Upload]: <UploadIcon className={className} />,
+    [IconName.Video]: <VideoIcon className={className} />,
     [IconName.Warning]: <WarningIcon className={className} />,
     [IconName.X]: <XIcon className={className} />,
   };

package/src/components/Tabs/Tab/CustomTab.tsx

@@ -25,7 +25,7 @@ export const CustomTab: ReactTabsFunctionComponent<TabProps> = ({
       disabledClassName={classes.disabled}
       data-test-id="tab"
     >
-      <div className={classes.content} ref={ref}>
+      <div className={classes.content} ref={ref} data-test-id="tab-label">
         {children}
       </div>
     </Tab>

package/src/components/Tabs/TabList/CustomTabList.tsx

@@ -9,7 +9,11 @@ export const CustomTabList: ReactTabsFunctionComponent<TabListProps> = ({
   className,
   ...otherProps
 }) => (
-  <TabList {...otherProps} className={clsx(classes.tablist, className)}>
+  <TabList
+    {...otherProps}
+    className={clsx(classes.tablist, className)}
+    data-test-id="tab-list"
+  >
     <ScrollContainer>{children}</ScrollContainer>
   </TabList>
 );

package/src/components/Tabs/Tabs.stories.tsx

@@ -63,8 +63,8 @@ const generateItems = (
   count: number,
   disabled?: boolean,
 ): [JSX.Element[], JSX.Element[]] => {
-  const tabs = [];
-  const panels = [];
+  const tabs: JSX.Element[] = [];
+  const panels: JSX.Element[] = [];
 
   for (let i = 0; i < count; i++) {
     const title = faker.random.words(faker.datatype.number({ min: 1, max: 3 }));