@griddo/ax 10.2.24 → 10.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.2.24",
+  "version": "10.3.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c15819b6b6ef01e589bc9669e0356dca242df6c7"
+  "gitHead": "f7da8e919f51b1c424f27d00d78954ec837e84f0"
 }

package/src/GlobalStore.tsx

@@ -20,6 +20,7 @@ import { domainsReducer, domainsInitialState } from "./containers/Domains/reduce
 import { redirectsReducer, redirectsInitialState } from "./containers/Redirects/reducer";
 import { analyticsReducer, analyticsInitialState } from "./containers/Analytics/reducer";
 import { integrationsReducer, integrationsInitialState } from "./containers/Integrations/reducer";
+import { fileDriveReducer, fileDriveInitialState } from "./containers/FileDrive/reducer";
 import { LOGOUT } from "./containers/App/constants";
 
 import { IRootState } from "@ax/types";
@@ -54,6 +55,7 @@ export class GlobalStore {
       redirects: redirectsReducer as Reducer<any, Action<any>>,
       analytics: analyticsReducer as Reducer<any, Action<any>>,
       integrations: integrationsReducer as Reducer<any, Action<any>>,
+      fileDrive: fileDriveReducer as Reducer<any, Action<any>>,
     });
 
     const rootReducer = (state: IRootState | undefined, action: any) => {
@@ -75,6 +77,7 @@ export class GlobalStore {
           redirects: redirectsInitialState,
           analytics: analyticsInitialState,
           integrations: integrationsInitialState,
+          fileDrive: fileDriveInitialState,
         };
       }
 

package/src/__mocks__/store/GenericStore.ts

@@ -22,4 +22,7 @@ export const defaultStore = {
     currentPermissions: [],
     roles: [],
   },
+  app: {
+    isLoading: false,
+  }
 };

package/src/__tests__/components/Fields/FileField/FileField.test.tsx

@@ -3,14 +3,38 @@ import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { mock } from "jest-mock-extended";
-import { render, screen, cleanup } from "@testing-library/react";
+import { render, screen, cleanup } from "../../../../../config/jest/test-utils";
 import FileField, { IFileFieldProps } from "@ax/components/Fields/FileField";
 import { act } from "react-dom/test-utils";
+import thunk from "redux-thunk";
+import configureStore from "redux-mock-store";
+
+import { defaultStore } from "./../../../../__mocks__/store/GenericStore";
 
 afterEach(cleanup);
 
 const defaultProps = mock<IFileFieldProps>();
 
+const initialStore = {
+  ...defaultStore,
+  fileDrive: {
+    currentFolderContent: null,
+    currentFolderID: null,
+    breadcrumb: [],
+    foldersTree: [],
+    isUploading: false,
+    isSuccess: false,
+    isError: false,
+    errorMsg: "",
+    displayMode: "grid",
+  },
+};
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+const store = mockStore(initialStore);
+
 describe("FileField component rendering", () => {
   it("should render the component", () => {
     defaultProps.value.url = "google.es";
@@ -18,7 +42,8 @@ describe("FileField component rendering", () => {
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <FileField {...defaultProps} />
-      </ThemeProvider>
+      </ThemeProvider>,
+      { store }
     );
 
     const fileDataWrapper = screen.getByTestId("file-data-wrapper");
@@ -32,7 +57,8 @@ describe("FileField component rendering", () => {
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <FileField {...defaultProps} />
-      </ThemeProvider>
+      </ThemeProvider>,
+      { store }
     );
 
     const fileDataWrapper = screen.getByTestId("file-data-wrapper");
@@ -49,7 +75,7 @@ describe("onClick events", () => {
       </ThemeProvider>
     );
 
-    const { rerender } = render(Component);
+    const { rerender } = render(Component, {store});
 
     const fileButton = screen.getByTestId("field-icon-wrapper");
     act(() => fileButton.click());
@@ -67,14 +93,14 @@ describe("onClick events", () => {
       </ThemeProvider>
     );
 
-    const { rerender } = render(Component);
+    const { rerender } = render(Component, { store });
 
     const fileButton = screen.getByTestId("field-icon-wrapper");
     act(() => fileButton.click());
 
     rerender(Component);
 
-    const fileDragAndDropWrapper = screen.queryByTestId("file-drag-and-drop-wrapper");
+    const fileDragAndDropWrapper = screen.queryByTestId("file-gallery-wrapper");
     expect(fileDragAndDropWrapper).toBeFalsy();
   });
 
@@ -90,7 +116,7 @@ describe("onClick events", () => {
     const windowOpen = window.open;
     (window as any).open = () => ({ focus: () => null });
 
-    const { rerender } = render(Component);
+    const { rerender } = render(Component, {store});
 
     const spyWindowOpen = jest.spyOn(window, "open");
 
@@ -119,7 +145,7 @@ describe("onClick events", () => {
       </ThemeProvider>
     );
 
-    const { rerender } = render(Component);
+    const { rerender } = render(Component, {store});
 
     const floatingMenu = screen.getAllByTestId("icon-action-component");
 

package/src/__tests__/components/Gallery/GalleryPanel/GalleryDragAndDrop/GalleryDragAndDrop.test.tsx

@@ -157,7 +157,7 @@ describe("GalleryDragAndDrop component actions", () => {
     const buttonTry = screen.getByText(/TRY AGAIN/i);
     fireEvent.click(buttonTry);
     expect(store.getActions()).toContainEqual({
-      payload: { errorMsg: "", inDropZone: false, isError: false, isUploading: false },
+      payload: { errorMsg: "", isError: false, isUploading: false },
       type: "gallery/SET_UPLOAD_ERROR",
     });
   });

package/src/api/files.tsx

@@ -1,3 +1,5 @@
+import { IGetFolderParams } from "@ax/types";
+import { encodeData } from "@ax/helpers";
 import { template } from "./config";
 import { IServiceConfig, sendRequest } from "./utils";
 
@@ -7,10 +9,178 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/files",
     method: "POST",
   },
+  GET_FOLDER_CONTENT: {
+    ...template,
+    endpoint: ["/site/", "/folders"],
+    method: "GET",
+  },
+  GET_FOLDERS_TREE: {
+    ...template,
+    endpoint: ["/site/", "/folders/tree"],
+    method: "GET",
+  },
+  CREATE_FOLDER: {
+    ...template,
+    endpoint: "/folder",
+    method: "POST",
+  },
+  UPDATE_FOLDER: {
+    ...template,
+    endpoint: "/folder/",
+    method: "PUT",
+  },
+  DELETE_FOLDER: {
+    ...template,
+    endpoint: "/folders/",
+    method: "DELETE",
+  },
+  UPDATE_FILE: {
+    ...template,
+    endpoint: "/files/",
+    method: "PUT",
+  },
+  DELETE_FILE: {
+    ...template,
+    endpoint: "/files/",
+    method: "DELETE",
+  },
+  DELETE_FILES_BULK: {
+    ...template,
+    endpoint: "/files/bulk",
+    method: "DELETE",
+  },
+  MOVE_FILE: {
+    ...template,
+    endpoint: ["/files/", "/folder/"],
+    method: "PUT",
+  },
+  MOVE_FILES_BULK: {
+    ...template,
+    endpoint: "/files/bulk/folder/",
+    method: "PUT",
+  },
+  REPLACE_FILE: {
+    ...template,
+    endpoint: ["/files/", "/replace"],
+    method: "PUT",
+  },
 };
 
 const uploadFile = async (data: FormData) => {
   return sendRequest(SERVICES.UPLOAD_FILE, data as any);
 };
 
-export default { uploadFile };
+const getFolderContent = async (params: IGetFolderParams) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_FOLDER_CONTENT;
+
+  const { siteID, folderID, search, filter, order } = params;
+
+  const data = {
+    ...(folderID && { folder: folderID }),
+    ...(search && { search }),
+    ...(order && { order }),
+    ...(filter && { filterType: filter }),
+  };
+
+  const queryParams = encodeData(data);
+  const query = queryParams.length ? `?${queryParams}` : "";
+
+  SERVICES.GET_FOLDER_CONTENT.dynamicUrl = `${host}${prefix}${siteID}${suffix}${query}`;
+
+  return sendRequest(SERVICES.GET_FOLDER_CONTENT);
+};
+
+const getFoldersTree = async (siteID: number | "global") => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_FOLDERS_TREE;
+
+  SERVICES.GET_FOLDERS_TREE.dynamicUrl = `${host}${prefix}${siteID}${suffix}`;
+
+  return sendRequest(SERVICES.GET_FOLDERS_TREE);
+};
+
+const createFolder = async (data: { folderName: string; site: number | "global"; parentId?: number }) => {
+  return sendRequest(SERVICES.CREATE_FOLDER, data);
+};
+
+const updateFolder = async (folderID: number, data: { parentId: number; folderName: string }) => {
+  const { host, endpoint } = SERVICES.UPDATE_FOLDER;
+  SERVICES.UPDATE_FOLDER.dynamicUrl = `${host}${endpoint}${folderID}`;
+
+  return sendRequest(SERVICES.UPDATE_FOLDER, data);
+};
+
+const deleteFolder = async (folderID: number) => {
+  const { host, endpoint } = SERVICES.DELETE_FOLDER;
+  SERVICES.DELETE_FOLDER.dynamicUrl = `${host}${endpoint}${folderID}`;
+
+  return sendRequest(SERVICES.DELETE_FOLDER);
+};
+
+const updateFile = async (fileID: number, data: { title: string; alt: string; tags: string[] }) => {
+  const { host, endpoint } = SERVICES.UPDATE_FILE;
+  SERVICES.UPDATE_FILE.dynamicUrl = `${host}${endpoint}${fileID}`;
+
+  return sendRequest(SERVICES.UPDATE_FILE, data);
+};
+
+const deleteFile = async (fileID: number) => {
+  const { host, endpoint } = SERVICES.DELETE_FILE;
+  SERVICES.DELETE_FILE.dynamicUrl = `${host}${endpoint}${fileID}`;
+
+  return sendRequest(SERVICES.DELETE_FILE);
+};
+
+const deleteFilesBulk = async (ids: number[]) => sendRequest(SERVICES.DELETE_FILES_BULK, { ids });
+
+const moveFile = async (fileID: number, folderID: number) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.MOVE_FILE;
+
+  SERVICES.MOVE_FILE.dynamicUrl = `${host}${prefix}${fileID}${suffix}${folderID}`;
+
+  return sendRequest(SERVICES.MOVE_FILE);
+};
+
+const moveFilesBulk = async (ids: number[], folderID: number) => {
+  const { host, endpoint } = SERVICES.MOVE_FILES_BULK;
+
+  SERVICES.MOVE_FILES_BULK.dynamicUrl = `${host}${endpoint}${folderID}`;
+
+  return sendRequest(SERVICES.MOVE_FILES_BULK, { ids });
+};
+
+const replaceFile = async (data: FormData, fileID: number, keepUrl: boolean) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.REPLACE_FILE;
+
+  const query = keepUrl ? "?keepUrl=on" : "";
+
+  SERVICES.REPLACE_FILE.dynamicUrl = `${host}${prefix}${fileID}${suffix}${query}`;
+
+  return sendRequest(SERVICES.REPLACE_FILE, data as any);
+};
+
+export default {
+  uploadFile,
+  getFolderContent,
+  getFoldersTree,
+  createFolder,
+  updateFolder,
+  deleteFolder,
+  updateFile,
+  deleteFile,
+  deleteFilesBulk,
+  moveFile,
+  moveFilesBulk,
+  replaceFile,
+};

package/src/api/users.tsx

@@ -64,14 +64,17 @@ const getUsers = async (params: any) => {
 };
 
 const getSiteUsers = async (params: any, siteID: number) => {
-  const { host, endpoint: [prefix, suffix], } = SERVICES.GET_SITE_USERS;
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_SITE_USERS;
 
   const { query, filterQuery } = params;
 
   SERVICES.GET_SITE_USERS.dynamicUrl = `${host}${prefix}${siteID}${suffix}${filterQuery}`;
 
   if (query && query.trim() !== "") {
-    SERVICES.GET_SITE_USERS.dynamicUrl = `${SERVICES.GET_USERS.dynamicUrl}${query}`;
+    SERVICES.GET_SITE_USERS.dynamicUrl = `${SERVICES.GET_SITE_USERS.dynamicUrl}${query}`;
   }
 
   return sendRequest(SERVICES.GET_SITE_USERS);

package/src/components/ActionMenu/index.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 
 import { FloatingMenu, Icon, IconAction, Tooltip } from "@ax/components";
+import { IActionMenuOption } from "@ax/types";
 
 import * as S from "./style";
 
 const ActionMenu = (props: IActionMenuProps): JSX.Element => {
   const { options, icon, className, tooltip } = props;
 
-  const filteredOptions = options.filter((option: IOption | undefined | null) => !!option);
+  const filteredOptions = options.filter((option: IActionMenuOption | undefined | null) => !!option);
 
   const MoreInfoButton = () => (
     <S.IconActionWrapper data-testid="more-info-button">
@@ -15,7 +16,7 @@ const ActionMenu = (props: IActionMenuProps): JSX.Element => {
     </S.IconActionWrapper>
   );
 
-  const ActionMenuItem = (item: IOption) => (
+  const ActionMenuItem = (item: IActionMenuOption) => (
     <S.ActionItem
       key={item.icon}
       onClick={item.action}
@@ -39,7 +40,7 @@ const ActionMenu = (props: IActionMenuProps): JSX.Element => {
         <Tooltip content={tooltip} hideOnClick>
           <FloatingMenu Button={MoreInfoButton}>
             <S.ActionMenu>
-              {filteredOptions.map((item: IOption | undefined | null) => item && ActionMenuItem(item))}
+              {filteredOptions.map((item: IActionMenuOption | undefined | null) => item && ActionMenuItem(item))}
             </S.ActionMenu>
           </FloatingMenu>
         </Tooltip>
@@ -50,17 +51,8 @@ const ActionMenu = (props: IActionMenuProps): JSX.Element => {
   );
 };
 
-interface IOption {
-  label: string;
-  action: any;
-  icon: string;
-  disabled?: boolean;
-  helpText?: string | null;
-  color?: boolean;
-}
-
 export interface IActionMenuProps {
-  options: (IOption | undefined | null)[];
+  options: (IActionMenuOption | undefined | null)[];
   icon: string;
   className?: string;
   tooltip?: string;

package/src/components/BackFolder/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import Icon from "../Icon";
+import * as S from "./style";
+
+const BackFolder = (props: IBackFolderProps): JSX.Element => {
+  const { onClick, size } = props;
+
+  const iconSize = size === "S" ? "16" : "24";
+
+  return (
+    <S.FolderBack onClick={onClick} size={size}>
+      <S.BackIconWrapper>
+        <Icon name="project"/>
+      </S.BackIconWrapper>
+      <S.BackIconWrapper>
+        <Icon name="back" />
+      </S.BackIconWrapper>
+    </S.FolderBack>
+  );
+};
+
+export interface IBackFolderProps {
+  onClick: () => void;
+  size?: "S"|"M";
+}
+
+export default BackFolder;

package/src/components/BackFolder/style.tsx

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+const FolderBack = styled.div<{ size?: "S" | "M" }>`
+  position: relative;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  border-radius: ${(p) => p.theme.radii.s};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 84px;
+  height:  ${(p) => p.size === "S" ? "40px" : "64px"};
+  cursor: pointer;
+  padding: ${(p) => `0 ${p.theme.spacing.s}`};
+  margin-right: ${(p) => p.size === "S" ? p.theme.spacing.xxs : p.theme.spacing.s};
+  &:hover {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+  }
+`;
+
+const BackIconWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+  &:last-child {
+    svg {
+      path {
+        fill: ${(p) => p.theme.color.iconHighEmphasis};
+      }
+    }
+  }
+`;
+
+export { FolderBack, BackIconWrapper }

package/src/components/BulkSelectionOptions/index.tsx

@@ -1,16 +1,17 @@
 import React from "react";
 
 import { Button, CheckField, TableCounter } from "@ax/components";
+import { IBulkAction } from "@ax/types";
 
 import * as S from "./style";
 
 const BulkSelectionOptions = (props: IBulkSelectionProps): JSX.Element => {
-  const { isScrolling, checkState, actions, selectItems, totalItems } = props;
+  const { isScrolling, checkState, actions, selectItems, totalItems, className } = props;
 
   const filteredActions = actions.filter((action: IBulkAction | undefined | null) => !!action);
 
   return (
-    <S.BulkHeader isScrolling={isScrolling} data-testid="bulk-header-wrapper">
+    <S.BulkHeader isScrolling={isScrolling} data-testid="bulk-header-wrapper" className={className}>
       <S.BulkActionsWrapper>
         <S.SelectAllCheckField>
           <CheckField
@@ -42,18 +43,13 @@ const BulkSelectionOptions = (props: IBulkSelectionProps): JSX.Element => {
   );
 };
 
-interface IBulkAction {
-  icon?: string;
-  text: string;
-  action: () => void;
-}
-
 interface IBulkSelectionProps {
   checkState: any;
   actions: (IBulkAction | undefined | null)[];
   selectItems: () => void;
   totalItems: number;
   isScrolling?: boolean;
+  className?: string;
 }
 
 export default BulkSelectionOptions;

package/src/components/Button/index.tsx

@@ -10,7 +10,9 @@ enum buttonStyles {
   INVERSE = "lineInverse",
 }
 
-const Button = ({ children, type, disabled, icon, buttonStyle, onClick, className, loader }: IButtonProps): JSX.Element => {
+const Button = (props: IButtonProps): JSX.Element => {
+  const { children, type, disabled, icon, buttonStyle, onClick, className, loader, backIcon } = props;
+
   const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (onClick !== undefined) {
       e.preventDefault();
@@ -18,12 +20,14 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
     }
   };
 
-  let iconWrapper = icon ? <Icon name={icon} /> : loader ? <Loader name={loader} /> : undefined;
+  let iconWrapper = icon ? <Icon name={icon} /> : loader ? <Loader name={loader} /> : <></>;
+  let iconBackWrapper = backIcon ? <Icon name={backIcon} /> : <></>;
 
   const buttonContent = (
-    <S.Label icon={icon || loader}>
+    <S.Label icon={icon || loader} backIcon={backIcon}>
       {iconWrapper}
       <span>{children}</span>
+      {iconBackWrapper}
     </S.Label>
   );
 
@@ -80,6 +84,7 @@ export interface IButtonProps {
   disabled?: boolean;
   buttonStyle?: "solid" | "text" | "line" | "lineInverse" | undefined; // TODO: investigar si podemos hacer esto más elegante y aprovechar el enum buttonStyles
   className?: string;
+  backIcon?: string;
 }
 
 export default Button;

package/src/components/Button/style.tsx

@@ -94,8 +94,8 @@ export const TextButton = styled((props) => <Button {...props} />)`
 
 export const LineButton = styled((props) => <Button {...props} />)<{ isInverse: boolean | undefined }>`
   background-color: ${(p) => (p.isInverse ? p.theme.color.uiMainMenuBackground : p.theme.color.interactiveBackground)};
-  border: 1px solid ${(p) => (p.isInverse ? "#fff" : p.theme.color.interactive01)};
-  color: ${(p) => (p.isInverse ? "#fff" : p.theme.color.interactive01)};
+  border: 1px solid ${(p) => (p.isInverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
+  color: ${(p) => (p.isInverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
   :hover:before {
     background-color: ${(p) => (p.isInverse ? p.theme.color.uiMainMenuBackground : p.theme.color.overlayHoverPrimary)};
   }
@@ -123,11 +123,13 @@ export const LineButton = styled((props) => <Button {...props} />)<{ isInverse:
   }
 `;
 
-export const Label = styled.span<{ icon: string | undefined }>`
+export const Label = styled.span<{ icon?: string; backIcon?: string }>`
   outline: none;
   position: relative;
   z-index: 1;
   span {
     padding-left: ${(p) => (p.icon ? `calc(${p.theme.spacing.s} + ${p.theme.spacing.xxs})` : `0`)};
+    padding-right: ${(p) => (p.backIcon ? p.theme.spacing.xxs : `0`)};
   }
+  padding-right: ${(p) => (p.backIcon ? p.theme.spacing.s : `0`)};
 `;

package/src/components/ElementsTooltip/index.tsx

@@ -4,7 +4,17 @@ import { trimText } from "@ax/helpers";
 import * as S from "./style";
 
 const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
-  const { elements, maxChar, defaultElements = 1, colors, rounded = false, elementsPerRow = 1 } = props;
+  const {
+    elements,
+    maxChar,
+    defaultElements = 1,
+    colors,
+    rounded = false,
+    elementsPerRow = 1,
+    defaultColor,
+    prefix = "",
+    size = "S",
+  } = props;
 
   if (!elements) return <></>;
 
@@ -21,26 +31,28 @@ const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
   return (
     <S.Wrapper data-testid="elements-wrapper">
       {visibleElements.map((fullElement, idx) => {
-        const element = maxChar ? trimText(fullElement, maxChar) : fullElement;
-        const color = colors && colors[element] ? colors[element] : undefined;
+        const element = defaultElements === 1 && maxChar ? trimText(fullElement, maxChar) : fullElement;
+        const color = defaultColor ? defaultColor : colors && colors[element] ? colors[element] : undefined;
 
         return (
-          <S.Element data-testid="element" key={idx} color={color} rounded={rounded}>
+          <S.Element data-testid="element" key={idx} color={color} rounded={rounded} size={size}>
+            {prefix}
             {element}
           </S.Element>
         );
       })}
       {remainingElements > 0 && (
-        <S.Element data-testid="remaining-element" rounded={rounded}>
+        <S.Element data-testid="remaining-element" rounded={rounded} size={size}>
           +{remainingElements}
           <S.Tooltip>
             {elementsRows.map((row, idx) => {
               return (
                 <S.Row data-testid="row-element" key={idx}>
                   {row.map((element, idx) => {
-                    const color = colors && colors[element] ? colors[element] : undefined;
+                    const color = defaultColor ? defaultColor : colors && colors[element] ? colors[element] : undefined;
                     return (
-                      <S.Element data-testid="div-element" key={idx} color={color} rounded={rounded}>
+                      <S.Element data-testid="div-element" key={idx} color={color} rounded={rounded} size={size}>
+                        {prefix}
                         {element}
                       </S.Element>
                     );
@@ -62,6 +74,9 @@ export interface IElementsTooltipProps {
   colors?: any;
   rounded?: boolean;
   elementsPerRow?: number;
+  defaultColor?: string;
+  prefix?: string;
+  size?: "S" | "M";
 }
 
 export default ElementsTooltip;

package/src/components/ElementsTooltip/style.tsx

@@ -17,9 +17,9 @@ const Tooltip = styled.div`
   border-radius: ${(p) => p.theme.radii.s};
 `;
 
-const Element = styled.div<{ color?: string; rounded: boolean }>`
+const Element = styled.div<{ color?: string; rounded: boolean; size: "S" | "M" }>`
   position: relative;
-  ${(p) => p.theme.textStyle.uiXS};
+  ${(p) => (p.size === "M" ? p.theme.textStyle.uiS : p.theme.textStyle.uiXS)};
   ${(p) => p.theme.colors.textMediumEmphasis};
   padding: ${(p) => p.theme.spacing.xxs} ${(p) => p.theme.spacing.xs};
   margin: calc(${(p) => p.theme.spacing.xxs} / 2);