@griddo/ax 1.74.25 → 1.74.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.74.25",
+  "version": "1.74.27",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -229,5 +229,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "48ba7633e22251e27382c46d1da311dbe3147918"
+  "gitHead": "d7b0b5155bf123938bb8b79167848e67fc7570f1"
 }

package/src/__tests__/components/ActionMenu/ActionMenu.test.tsx

@@ -0,0 +1,246 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import ActionMenu, { IActionMenuProps } from "@ax/components/ActionMenu";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("Action menu component rendering", () => {
+  it("should render the component with options hidden", () => {
+    const defaultProps: IActionMenuProps = {
+      icon: "more",
+      options: [
+        {
+          label: "Option 1",
+          icon: "modified",
+          action: jest.fn(),
+        },
+        {
+          label: "Option 2",
+          icon: "active",
+          action: jest.fn(),
+        },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ActionMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const actionMenuWrapper = screen.getByTestId("action-menu-wrapper");
+    expect(actionMenuWrapper).toBeTruthy();
+    const menuItems = screen.queryAllByTestId("action-menu-item");
+    expect(menuItems.length).toBe(0);
+  });
+});
+
+describe("Action menu events", () => {
+  it("should show the component with 2 options on icon click", () => {
+    const defaultProps: IActionMenuProps = {
+      icon: "more",
+      options: [
+        {
+          label: "Option 1",
+          icon: "modified",
+          action: jest.fn(),
+        },
+        {
+          label: "Option 2",
+          icon: "active",
+          action: jest.fn(),
+        },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ActionMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const actionMenuWrapper = screen.getByTestId("action-menu-wrapper");
+    expect(actionMenuWrapper).toBeTruthy();
+    const iconAction = screen.getByTestId("icon-action-component");
+    expect(iconAction).toBeTruthy();
+    fireEvent.click(iconAction);
+
+    const menuItems = screen.getAllByTestId("action-menu-item");
+    expect(menuItems.length).toBe(2);
+  });
+
+  it("should show the component with option with helptext", () => {
+    const helpText = "this is the helptext";
+    const defaultProps: IActionMenuProps = {
+      icon: "more",
+      options: [
+        {
+          label: "Option 1",
+          icon: "modified",
+          action: jest.fn(),
+          helpText,
+        },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ActionMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const actionMenuWrapper = screen.getByTestId("action-menu-wrapper");
+    expect(actionMenuWrapper).toBeTruthy();
+    const iconAction = screen.getByTestId("icon-action-component");
+    expect(iconAction).toBeTruthy();
+    fireEvent.click(iconAction);
+
+    const helpTextComponent = screen.getByText(helpText);
+    expect(helpTextComponent).toBeTruthy();
+  });
+
+  it("should show the component with option with original class", () => {
+    const defaultProps: IActionMenuProps = {
+      icon: "more",
+      options: [
+        {
+          label: "Option 1",
+          icon: "modified",
+          action: jest.fn(),
+          color: true,
+        },
+        {
+          label: "Option 2",
+          icon: "active",
+          action: jest.fn(),
+        },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ActionMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const actionMenuWrapper = screen.getByTestId("action-menu-wrapper");
+    expect(actionMenuWrapper).toBeTruthy();
+    const iconAction = screen.getByTestId("icon-action-component");
+    expect(iconAction).toBeTruthy();
+    fireEvent.click(iconAction);
+    const menuItems = screen.getAllByTestId("action-menu-item");
+
+    expect(menuItems[0]).toHaveClass("original");
+    expect(menuItems[1]).not.toHaveClass("original");
+  });
+
+  it("should hide the component on second icon click", () => {
+    const defaultProps: IActionMenuProps = {
+      icon: "more",
+      options: [
+        {
+          label: "Option 1",
+          icon: "modified",
+          action: jest.fn(),
+        },
+        {
+          label: "Option 2",
+          icon: "active",
+          action: jest.fn(),
+        },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ActionMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const actionMenuWrapper = screen.getByTestId("action-menu-wrapper");
+    expect(actionMenuWrapper).toBeTruthy();
+    const iconAction = screen.getByTestId("icon-action-component");
+    expect(iconAction).toBeTruthy();
+    fireEvent.click(iconAction);
+
+    const menuItems = screen.getAllByTestId("action-menu-item");
+    expect(menuItems.length).toBe(2);
+
+    fireEvent.click(iconAction);
+
+    const menuItems2 = screen.queryAllByTestId("action-menu-item");
+    expect(menuItems2.length).toBe(0);
+  });
+
+  it("should call action on item click and hide component", () => {
+    const actionMock = jest.fn();
+    const defaultProps: IActionMenuProps = {
+      icon: "more",
+      options: [
+        {
+          label: "Option 1",
+          icon: "modified",
+          action: actionMock,
+        },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ActionMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconAction = screen.getByTestId("icon-action-component");
+    fireEvent.click(iconAction);
+
+    const menuItems = screen.getAllByTestId("action-menu-item");
+    expect(menuItems.length).toBe(1);
+    fireEvent.click(menuItems[0]);
+
+    expect(actionMock).toBeCalledTimes(1);
+
+    const menuItems2 = screen.queryAllByTestId("action-menu-item");
+    expect(menuItems2.length).toBe(0);
+  });
+
+  it("should show disabled item", () => {
+    const actionMock = jest.fn();
+    const defaultProps: IActionMenuProps = {
+      icon: "more",
+      options: [
+        {
+          label: "Option 1",
+          icon: "modified",
+          action: actionMock,
+          disabled: true,
+        },
+        {
+          label: "Option 2",
+          icon: "active",
+          action: jest.fn(),
+        },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ActionMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconAction = screen.getByTestId("icon-action-component");
+    fireEvent.click(iconAction);
+
+    const menuItems = screen.getAllByTestId("action-menu-item");
+    expect(menuItems.length).toBe(2);
+
+    expect(menuItems[0]).toHaveAttribute("disabled");
+    expect(menuItems[1]).not.toHaveAttribute("disabled");
+  });
+});

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

@@ -11,8 +11,8 @@ afterEach(cleanup);
 
 const defaultProps = mock<IProps>();
 
-describe("AsyncSelect component rendering", () => {
-  test("should render the component AsyncSelect", () => {
+describe("ColorPicker component rendering", () => {
+  test("should render the component ColorPicker", () => {
     defaultProps.value = "#000000";
     defaultProps.theme = parseTheme(globalTheme);
 
@@ -21,7 +21,7 @@ describe("AsyncSelect component rendering", () => {
         <ColorPicker {...defaultProps} />
       </ThemeProvider>
     );
-    expect(screen.getByTestId("colorPickerWrapper")).toBeTruthy();
+    expect(screen.getByTestId("color-picker-wrapper")).toBeTruthy();
   });
 
   test("should render the Picker", () => {
@@ -36,14 +36,50 @@ describe("AsyncSelect component rendering", () => {
     const inputActionComponent = screen.getByTestId("icon-action-component");
     expect(inputActionComponent).toBeTruthy();
     fireEvent.click(inputActionComponent);
-    expect(screen.findByTestId("pickerWrapper")).toBeTruthy();
+    expect(screen.findByTestId("picker-wrapper")).toBeTruthy();
+  });
+
+  test("should not render the text input field if onlyFixedColors is true", () => {
+    defaultProps.theme = "griddo-default";
+    defaultProps.error = true;
+    defaultProps.onlyFixedColors = true;
+    defaultProps.colors = [
+      {
+        theme: "griddo-default",
+        options: [
+          { name: "chart1", hex: "#d9e3f0" },
+          { name: "chart2", hex: "#697689" },
+          { name: "chart2", hex: "#37d67a" },
+        ],
+      },
+      {
+        theme: "griddo-alternative",
+        options: [
+          { name: "chart1", hex: "#fffff" },
+          { name: "chart2", hex: "#ddddd" },
+          { name: "chart2", hex: "#00000" },
+        ],
+      },
+    ];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ColorPicker {...defaultProps} />
+      </ThemeProvider>
+    );
+    const inputActionComponent = screen.getByTestId("icon-action-component");
+    expect(inputActionComponent).toBeTruthy();
+    fireEvent.click(inputActionComponent);
+    expect(screen.queryByTestId("input-picker")).not.toBeTruthy();
   });
 });
 
-describe("AsyncSelect events", () => {
+describe("ColorPicker events", () => {
   test("should trigger the onChange", () => {
     defaultProps.value = "#000000";
     defaultProps.theme = parseTheme(globalTheme);
+    defaultProps.colors = ["#000000", "#d9e3f0", "#f47373", "#697689"];
+    defaultProps.onlyFixedColors = false;
     const onChangeMock = defaultProps.onChange as jest.MockedFunction<(newColor: string) => void>;
 
     render(
@@ -51,7 +87,7 @@ describe("AsyncSelect events", () => {
         <ColorPicker {...defaultProps} />
       </ThemeProvider>
     );
-    const inputComponent = screen.getByTestId("inputPickerWrapper");
+    const inputComponent = screen.getByTestId("input-picker-wrapper");
     expect(inputComponent).toBeTruthy();
     fireEvent.change(inputComponent, { target: { value: 555 } });
     expect(onChangeMock).not.toBeCalled();
@@ -73,7 +109,7 @@ describe("AsyncSelect events", () => {
         <ColorPicker {...defaultProps} />
       </ThemeProvider>
     );
-    const inputComponent = screen.getByTestId("inputPickerWrapper");
+    const inputComponent = screen.getByTestId("input-picker-wrapper");
     expect(inputComponent).toBeTruthy();
     fireEvent.change(inputComponent, { target: { value: "#fff" } });
     expect(handleValidationMock).toBeCalled();
@@ -93,7 +129,7 @@ describe("AsyncSelect events", () => {
     const inputActionComponent = screen.getByTestId("icon-action-component");
     expect(inputActionComponent).toBeTruthy();
     fireEvent.click(inputActionComponent);
-    const inputPicker = await screen.findByTestId("inputPicker");
+    const inputPicker = await screen.findByTestId("input-picker");
     expect(inputPicker).toBeTruthy();
     fireEvent.change(inputPicker, { target: { value: "#fff" } });
     expect(onChangeMock).toBeCalled();
@@ -114,7 +150,7 @@ describe("AsyncSelect events", () => {
     const inputActionComponent = screen.getByTestId("icon-action-component");
     expect(inputActionComponent).toBeTruthy();
     fireEvent.click(inputActionComponent);
-    const inputPicker = await screen.findByTestId("inputPicker");
+    const inputPicker = await screen.findByTestId("input-picker");
     expect(inputPicker).toBeTruthy();
     fireEvent.change(inputPicker, { target: { value: "#fff" } });
     expect(onChangeMock).toBeCalled();
@@ -138,7 +174,7 @@ describe("AsyncSelect events", () => {
     const inputActionComponent = screen.getByTestId("icon-action-component");
     expect(inputActionComponent).toBeTruthy();
     fireEvent.click(inputActionComponent);
-    const gridItem = await screen.findAllByTestId("gridItem");
+    const gridItem = await screen.findAllByTestId("grid-item");
     // is getting the default colors
     expect(gridItem).toHaveLength(9);
   });
@@ -161,7 +197,7 @@ describe("AsyncSelect events", () => {
     const inputActionComponent = screen.getByTestId("icon-action-component");
     expect(inputActionComponent).toBeTruthy();
     fireEvent.click(inputActionComponent);
-    const gridItem = await screen.findAllByTestId("gridItem");
+    const gridItem = await screen.findAllByTestId("grid-item");
     // it's getting the color passed
     expect(gridItem).toHaveLength(1);
   });
@@ -178,7 +214,7 @@ describe("AsyncSelect events", () => {
         <ColorPicker {...defaultProps} />
       </ThemeProvider>
     );
-    const inputComponent = screen.getByTestId("inputPickerWrapper");
+    const inputComponent = screen.getByTestId("input-picker-wrapper");
     expect(inputComponent).toBeTruthy();
     fireEvent.blur(inputComponent, { target: { value: "#fff" } });
     expect(handleValidationMock).toBeCalled();

package/src/__tests__/components/InformativeMenu/InformativeMenu.test.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import InformativeMenu, { IInformativeMenuProps } from "@ax/components/InformativeMenu";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("Informative Menu component rendering", () => {
+  it("should render the component hidden", () => {
+    const defaultProps: IInformativeMenuProps = {
+      message: "This is the message",
+      icon: "alert",
+      actionText: "Got it",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <InformativeMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.queryByText(defaultProps.message)).toBeFalsy();
+  });
+
+  it("should render the component with message on mouse enter", () => {
+    const defaultProps: IInformativeMenuProps = {
+      message: "This is the message",
+      icon: "alert",
+      actionText: "Got it",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <InformativeMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconAction = screen.getByTestId("icon-action-component");
+    expect(iconAction).toBeTruthy();
+    fireEvent.mouseEnter(iconAction);
+    const componentText = screen.getByText(defaultProps.message);
+    expect(componentText).toBeTruthy();
+    const button = screen.getByText(defaultProps.actionText).closest("button");
+    expect(button).toBeTruthy();
+  });
+
+  it("should hide the component with message on mouse leave", () => {
+    const defaultProps: IInformativeMenuProps = {
+      message: "This is the message",
+      icon: "alert",
+      actionText: "Got it",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <InformativeMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconAction = screen.getByTestId("icon-action-component");
+    expect(iconAction).toBeTruthy();
+    fireEvent.mouseEnter(iconAction);
+    expect(screen.getByText(defaultProps.message)).toBeTruthy();
+    fireEvent.mouseLeave(iconAction);
+    expect(screen.queryByText(defaultProps.message)).toBeFalsy();
+  });
+
+  it("should hide the component on button click", () => {
+    const defaultProps: IInformativeMenuProps = {
+      message: "This is the message",
+      icon: "alert",
+      actionText: "Got it",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <InformativeMenu {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconAction = screen.getByTestId("icon-action-component");
+    expect(iconAction).toBeTruthy();
+    fireEvent.mouseEnter(iconAction);
+    expect(screen.getByText(defaultProps.message)).toBeTruthy();
+    const button = screen.getByText(defaultProps.actionText).closest("button");
+    expect(button).toBeTruthy();
+    button && fireEvent.click(button);
+    expect(screen.queryByText(defaultProps.message)).toBeFalsy();
+  });
+});

package/src/__tests__/components/ProgressBar/ProgressBar.test.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import ProgressBar, { IProgressBarProps } from "@ax/components/ProgressBar";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("ProgressBar component rendering", () => {
+  it("should render the component", () => {
+    const defaultProps: IProgressBarProps = {
+      percentage: 0,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ProgressBar {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tracker = screen.getByTestId("progressbar-tracker");
+    expect(tracker).toBeTruthy();
+  });
+});

package/src/__tests__/components/SideModal/SideModal.test.tsx

@@ -0,0 +1,356 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { CalledWithMock, mock } from "jest-mock-extended";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+
+import SideModal, { ISideModalProps } from "@ax/components/SideModal";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ISideModalProps>();
+
+describe("SideModal component rendering", () => {
+  it("should render the component", () => {
+    const handleClickMock = jest.fn();
+    const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
+    defaultProps.categories = [
+      { featured: true, label: "All", value: "all" },
+      { label: "Articles And Events", value: "articlesAndEvents" },
+    ];
+    defaultProps.isOpen = true;
+    defaultProps.theme = "default-theme";
+    defaultProps.whiteList = ["EventsDistributor", "ArticlesDistributor"];
+    defaultProps.handleClick = handleClickMock;
+    defaultProps.toggleModal = toggleModalMock;
+    defaultProps.optionsType = "modules";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const sideModal = screen.getByTestId("side-modal");
+    expect(sideModal).toBeTruthy();
+  });
+
+  it("should not render the component if isOpen is false", () => {
+    const handleClickMock = jest.fn();
+    const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
+    defaultProps.categories = [
+      { featured: true, label: "All", value: "all" },
+      { label: "Articles And Events", value: "articlesAndEvents" },
+    ];
+    defaultProps.isOpen = false;
+    defaultProps.theme = "default-theme";
+    defaultProps.whiteList = ["EventsDistributor", "ArticlesDistributor"];
+    defaultProps.handleClick = handleClickMock;
+    defaultProps.toggleModal = toggleModalMock;
+    defaultProps.optionsType = "modules";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const sideModal = screen.queryByTestId("side-modal");
+    expect(sideModal).not.toBeTruthy();
+  });
+
+  it("should render optiontype as title", () => {
+    defaultProps.isOpen = true;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const sideModalTitle = screen.getByTestId("side-modal-title");
+    expect(sideModalTitle).toBeTruthy();
+    expect(sideModalTitle.textContent).toEqual("modules");
+  });
+
+  it("should render close button", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const closeButton = screen.getByTestId("side-modal-close-button");
+    expect(closeButton).toBeTruthy();
+  });
+
+  it("should render default check if setDefault prop exists", () => {
+    defaultProps.setDefault = {
+      action: jest.fn(),
+      checked: false,
+      title: "Set the default header",
+    };
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const checkfield = screen.getByTestId("check-field-wrapper");
+    expect(checkfield).toBeTruthy();
+  });
+
+  it("should render options", () => {
+    defaultProps.setDefault = undefined;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const options = screen.getAllByTestId("side-modal-option");
+    expect(options).toBeTruthy();
+    expect(options.length).toEqual(2);
+  });
+
+  it("should render option thumbnails", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const thumbnails = screen.getAllByTestId("side-modal-option-img");
+    expect(thumbnails).toBeTruthy();
+    expect(thumbnails.length).toEqual(2);
+  });
+
+  it("should render all options when All filter is selected", () => {
+    const handleClickMock = jest.fn();
+    const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
+    defaultProps.categories = [
+      { featured: true, label: "All", value: "all" },
+      { label: "Content", value: "content" },
+      { label: "Collections", value: "collections" },
+    ];
+    defaultProps.isOpen = true;
+    defaultProps.theme = "default-theme";
+    defaultProps.whiteList = ["BasicContent", "CardCollection"];
+    defaultProps.handleClick = handleClickMock;
+    defaultProps.toggleModal = toggleModalMock;
+    defaultProps.optionsType = "modules";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+    const filters = screen.getAllByTestId("side-modal-nav-link");
+    expect(filters).toBeTruthy();
+    expect(filters.length).toEqual(3);
+    const allFilter = filters[0];
+    expect(allFilter.textContent).toEqual("All");
+    const links = screen.getAllByTestId("side-modal-link");
+    const allOptionLink = links[0];
+    const selectedStyles = getComputedStyle(allOptionLink);
+    expect(selectedStyles.color).toEqual("rgb(32, 34, 76)");
+    const options = screen.getAllByTestId("side-modal-option");
+    expect(options).toBeTruthy();
+    expect(options.length).toEqual(2);
+    expect(options[0].textContent).toEqual("Basic Content");
+    expect(options[1].textContent).toEqual("Card Collection");
+  });
+
+  it("should render components modal if option type is components", () => {
+    const handleClickMock = jest.fn();
+    const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
+    defaultProps.componentOptions = {
+      image: { component: "LinkableImage", editorID: 11, parentEditorID: 6 },
+      video: { component: "Video", editorID: 12, parentEditorID: 6 },
+    };
+    defaultProps.isOpen = true;
+    defaultProps.theme = "default-theme";
+    defaultProps.whiteList = ["LinkableImage", "Video"];
+    defaultProps.handleClick = handleClickMock;
+    defaultProps.toggleModal = toggleModalMock;
+    defaultProps.optionsType = "components";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+    const options = screen.getAllByTestId("side-modal-option");
+    expect(options).toBeTruthy();
+    expect(options.length).toEqual(2);
+  });
+});
+
+describe("SideModal component events", () => {
+  it("should call handle click and toggle modal on click option", () => {
+    const handleClickMock = jest.fn();
+    const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
+    defaultProps.categories = [
+      { featured: true, label: "All", value: "all" },
+      { label: "Articles And Events", value: "articlesAndEvents" },
+    ];
+    defaultProps.componentOptions = undefined;
+    defaultProps.isOpen = true;
+    defaultProps.theme = "default-theme";
+    defaultProps.whiteList = ["Accordion", "AddressCollection"];
+    defaultProps.handleClick = handleClickMock;
+    defaultProps.toggleModal = toggleModalMock;
+    defaultProps.optionsType = "modules";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const options = screen.getAllByTestId("side-modal-option");
+    expect(options).toBeTruthy();
+    expect(options.length).toEqual(2);
+    const option = options[0];
+    fireEvent.click(option);
+    expect(handleClickMock).toHaveBeenCalled();
+    expect(toggleModalMock).toHaveBeenCalled();
+  });
+
+  it("should select filter on click", () => {
+    const handleClickMock = jest.fn();
+    const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
+    defaultProps.categories = [
+      { featured: true, label: "All", value: "all" },
+      { label: "Content", value: "content" },
+      { label: "Collections", value: "collections" },
+    ];
+    defaultProps.isOpen = true;
+    defaultProps.theme = "default-theme";
+    defaultProps.whiteList = ["BasicContent", "CardCollection"];
+    defaultProps.handleClick = handleClickMock;
+    defaultProps.toggleModal = toggleModalMock;
+    defaultProps.optionsType = "modules";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const filters = screen.getAllByTestId("side-modal-nav-link");
+    expect(filters).toBeTruthy();
+    expect(filters.length).toEqual(3);
+    const allFilter = filters[0];
+    const contentFilter = filters[1];
+    expect(allFilter.textContent).toEqual("All");
+    expect(contentFilter.textContent).toEqual("Content");
+    const links = screen.getAllByTestId("side-modal-link");
+    expect(links).toBeTruthy();
+    expect(links.length).toEqual(3);
+    const contentOptionLink = links[1];
+    const notSelectedStyles = getComputedStyle(contentOptionLink);
+    expect(notSelectedStyles.color).toEqual("rgba(32, 34, 76, 0.6)");
+    fireEvent.click(contentFilter);
+    const selectedStyles = getComputedStyle(contentOptionLink);
+    expect(selectedStyles.color).toEqual("rgb(32, 34, 76)");
+  });
+
+  it("should filter by category on click", () => {
+    const handleClickMock = jest.fn();
+    const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
+    defaultProps.categories = [
+      { featured: true, label: "All", value: "all" },
+      { label: "Content", value: "content" },
+      { label: "Collections", value: "collections" },
+    ];
+    defaultProps.isOpen = true;
+    defaultProps.theme = "default-theme";
+    defaultProps.whiteList = ["BasicContent", "CardCollection"];
+    defaultProps.handleClick = handleClickMock;
+    defaultProps.toggleModal = toggleModalMock;
+    defaultProps.optionsType = "modules";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const filters = screen.getAllByTestId("side-modal-nav-link");
+    const options = screen.getAllByTestId("side-modal-option");
+    expect(options.length).toEqual(2);
+    expect(filters).toBeTruthy();
+    expect(filters.length).toEqual(3);
+    const contentFilter = filters[1];
+    expect(contentFilter.textContent).toEqual("Content");
+    fireEvent.click(contentFilter);
+    expect(options.length).toEqual(2);
+  });
+
+  it("should filter by query", () => {
+    defaultProps.showSearch = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+    const filterButton = screen.getByTestId("icon-search-wrapper");
+
+    expect(filterButton).toBeTruthy();
+    fireEvent.click(filterButton);
+    const searchFieldWrapper = screen.getByTestId("search-field-wrapper");
+    expect(searchFieldWrapper).toBeTruthy();
+    const input = screen.getByTestId("search-input");
+    fireEvent.click(searchFieldWrapper);
+    fireEvent.change(input, { target: { value: "Basic content" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter", charCode: 13 });
+    const options = screen.getAllByTestId("side-modal-option");
+    expect(options.length).toEqual(1);
+    expect(options[0].textContent).toEqual("Basic Content");
+  });
+
+  it("should call toggle modal on click outside the modal", () => {
+    const map: any = {};
+
+    document.addEventListener = jest.fn((event, callback) => {
+      map[event] = callback;
+    });
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    map.mousedown({
+      target: document.body,
+    });
+
+    expect(defaultProps.toggleModal).toHaveBeenCalled();
+  });
+
+  it("should not call toggle modal on click inside the modal", () => {
+    const map: any = {};
+
+    document.addEventListener = jest.fn((event, callback) => {
+      map[event] = callback;
+    });
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SideModal {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const title = screen.getByTestId("side-modal-title");
+
+    map.mousedown({
+      target: title,
+    });
+
+    expect(defaultProps.toggleModal).not.toHaveBeenCalled();
+  });
+});

package/src/components/ActionMenu/index.tsx

@@ -4,7 +4,7 @@ import { FloatingMenu, Icon, IconAction, Tooltip } from "@ax/components";
 
 import * as S from "./style";
 
-const ActionMenu = (props: IProps): JSX.Element => {
+const ActionMenu = (props: IActionMenuProps): JSX.Element => {
   const { options, icon, className, tooltip } = props;
 
   const MoreInfoButton = () => (
@@ -32,7 +32,7 @@ const ActionMenu = (props: IProps): JSX.Element => {
   );
 
   return (
-    <S.Wrapper className={className}>
+    <S.Wrapper className={className} data-testid="action-menu-wrapper">
       <Tooltip content={tooltip} hideOnClick>
         <FloatingMenu Button={MoreInfoButton}>
           <S.ActionMenu>{options.map((item: IOption) => ActionMenuItem(item))}</S.ActionMenu>
@@ -51,7 +51,7 @@ interface IOption {
   color?: boolean;
 }
 
-interface IProps {
+export interface IActionMenuProps {
   options: IOption[];
   icon: string;
   className?: string;

package/src/components/ConfigPanel/index.tsx

@@ -11,7 +11,6 @@ import PreviewForm from "./PreviewForm";
 import Header from "./Header";
 
 import * as S from "./style";
-
 const navigationModulesTypes = ["header", "footer"];
 
 const ConfigPanel = (props: IStateProps): JSX.Element => {

package/src/components/Fields/ColorPicker/Picker/index.tsx

@@ -1,26 +1,13 @@
 import React, { useState } from "react";
-import { hex3to6 } from "../helpers";
+import { hex3to6, defaultColors } from "./../helpers";
 
 import * as S from "./style";
 
 const Picker = (props: IProps): JSX.Element => {
-  const { value, onChange, colors } = props;
-
+  const { value, onChange, colors, onlyFixedColors } = props;
   const [color, setColor] = useState(value);
   const [inputValue, setInputValue] = useState(value);
 
-  const defaultColors = [
-    "#d9e3f0",
-    "#f47373",
-    "#697689",
-    "#37d67a",
-    "#2ccce4",
-    "#555555",
-    "#dce775",
-    "#ff8a65",
-    "#ba68c8",
-  ];
-
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let newValue = e.target.value;
     setInputValue(newValue);
@@ -38,9 +25,10 @@ const Picker = (props: IProps): JSX.Element => {
     }
   };
 
-  const handleClick = (newColor: string) => () => {
-    setInputValue(newColor);
-    setColor(newColor);
+  const handleClick = (newColor: string | any ) => () => {
+    const gridColor = typeof newColor !== "object" ? newColor : newColor.hex;
+    setInputValue(gridColor);
+    setColor(gridColor);
     onChange(newColor);
   };
 
@@ -57,24 +45,29 @@ const Picker = (props: IProps): JSX.Element => {
   const gridColors = colors ? colors : defaultColors;
 
   return (
-    <S.Wrapper data-testid="pickerWrapper">
+    <S.Wrapper data-testid="picker-wrapper">
       <S.Cover background={color} light={isLight(color)}>
         {color}
       </S.Cover>
       <S.Grid>
-        {gridColors.map((item: string) => (
-          <S.GridItem
-            data-testid="gridItem"
-            key={item}
-            background={item}
-            onClick={handleClick(item)}
-            selected={item === color}
-          />
-        ))}
+        {gridColors.map((item: any) => {
+          const gridColor = typeof item === "object" ? item.hex : item;
+          return (
+            <S.GridItem
+              data-testid="grid-item"
+              key={gridColor}
+              background={gridColor}
+              onClick={handleClick(item)}
+              selected={gridColor === color}
+            />
+          );
+        })}
       </S.Grid>
-      <S.InputWrapper>
-        <S.Input data-testid="inputPicker" type="text" value={inputValue} onChange={handleChange} />
-      </S.InputWrapper>
+      {!onlyFixedColors ? (
+        <S.InputWrapper>
+          <S.Input data-testid="input-picker" type="text" value={inputValue} onChange={handleChange} />
+        </S.InputWrapper>
+      ) : null}
     </S.Wrapper>
   );
 };
@@ -83,6 +76,7 @@ export interface IProps {
   value: string;
   colors?: string[];
   onChange: (newColor: string) => void;
+  onlyFixedColors?: boolean;
 }
 
 export default Picker;

package/src/components/Fields/ColorPicker/helpers.tsx

@@ -3,4 +3,39 @@ const hex3to6 = (color: string) => {
   return "#" + hexcolor.split('').map((hex: string) => hex + hex).join('');
 }
 
-export { hex3to6 };
+const defaultOptions = (vusOptions: Record<string, unknown>[]) => {
+  return !vusOptions.find((entry) => entry.theme);
+};
+
+const defaultColors = [
+  "#d9e3f0",
+  "#f47373",
+  "#697689",
+  "#37d67a",
+  "#2ccce4",
+  "#555555",
+  "#dce775",
+  "#ff8a65",
+  "#ba68c8",
+];
+
+const getOptions = (theme: string, onlyFixedColors: boolean | undefined, colorOptions: any[] | undefined) => {
+  if (!colorOptions) return defaultColors;
+  if (onlyFixedColors) return colorOptions;
+
+  const themes = colorOptions.filter((entry) => entry.theme).map((entry) => entry.theme);
+  const themeExists = themes.includes(theme);
+  const defaultsOptions = colorOptions.filter((entry) => typeof entry === "string");
+
+  // 1 - Si options solo tiene las defaults options (legacy) devuelve las defaults.
+  // 2 - Si options no tiene el theme, devuelve las defaults.
+  if (defaultOptions(colorOptions) || !themeExists) return defaultsOptions;
+
+  // Si options tiene el theme, devuelve las options de ese theme.
+  const optionsObj = colorOptions.find((entry) => entry.theme === theme);
+
+  return optionsObj && optionsObj.options;
+};
+
+
+export { hex3to6, getOptions, defaultColors };

package/src/components/Fields/ColorPicker/index.tsx

@@ -2,18 +2,48 @@ import React, { useRef, useState, memo, useReducer, useCallback } from "react";
 
 import { useHandleClickOutside } from "@ax/hooks";
 import { IconAction } from "@ax/components";
+import { defaultColors, getOptions, hex3to6 } from "./helpers";
 import Picker from "./Picker";
-import { hex3to6 } from "./helpers";
 
 import * as S from "./style";
 
 const ColorPicker = (props: IProps): JSX.Element => {
-  const { value, onChange, error, colors, handleValidation, theme } = props;
+  const { value, onChange, error, colors = [], handleValidation, theme, onlyFixedColors } = props;
+
+  const getCurrentColors = () => {
+    if (onlyFixedColors) {
+      const currentOption = colors?.find((options: any) => options.theme === theme);
+      return currentOption ? currentOption?.options : defaultColors;
+    } else {
+      return colors.length ? colors : defaultColors;
+    }
+  };
 
-  const initialState = { color: value, inputValue: value };
+  const currentColors = getCurrentColors();
+
+  const getInitialState = () => {
+    const defaultColor = currentColors[0];
+    if (onlyFixedColors) {
+      const currentValue = currentColors.find((color: any) => color.name === value);
+      const isObject = typeof defaultColor === "object";
+
+      let color;
+      if (currentValue) {
+        color = isObject ? currentValue.hex : currentValue;
+      } else {
+        color = isObject ? defaultColor.hex : defaultColor;
+      }
+
+      return { color, inputValue: color };
+    } else {
+      const color = value ? value : defaultColor;
+      return { color, inputValue: color };
+    }
+  };
+
+  const initialState = getInitialState();
   const reducer = useCallback((state: any, payload: any) => ({ ...state, ...payload }), []);
   const [state, dispatch] = useReducer(reducer, initialState);
-
   const [isVisible, setIsVisible] = useState(false);
   const wrapper = useRef<HTMLDivElement>(null);
 
@@ -44,9 +74,12 @@ const ColorPicker = (props: IProps): JSX.Element => {
     error && handleValidation && handleValidation(inputValue, { colorHex: true });
   };
 
-  const handlePickerChange = (color: string) => {
-    dispatch({ color, inputValue: color });
-    onChange(color);
+  const handlePickerChange = (value: string | any) => {
+    const isObject = typeof value === "object";
+    const hex = !isObject ? value : value.hex;
+    const name = !isObject ? value : value.name;
+    dispatch({ color: hex, inputValue: hex });
+    onChange(name);
   };
 
   const handleOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
@@ -57,44 +90,32 @@ const ColorPicker = (props: IProps): JSX.Element => {
 
   const icon = isVisible ? "close" : "colorPicker";
 
-  const defaultOptions = (vusOptions: Record<string, unknown>[]) => {
-    return !vusOptions.find((entry) => entry.theme);
-  };
-
-  const getOptions = (theme: string, colorOptions: any[] | undefined) => {
-    if (!colorOptions) return undefined;
-
-    const themes = colorOptions.filter((entry) => entry.theme).map((entry) => entry.theme);
-    const themeExists = themes.includes(theme);
-    const defaultsOptions = colorOptions.filter((entry) => typeof entry === "string");
-
-    // 1 - Si options solo tiene las defaults options (legacy) devuelve las defaults.
-    // 2 - Si options no tiene el theme, devuelve las defaults.
-    if (defaultOptions(colorOptions) || !themeExists) return defaultsOptions;
-
-    // Si options tiene el theme, devuelve las options de ese theme.
-    const optionsObj = colorOptions.find((entry) => entry.theme === theme);
-    return optionsObj && optionsObj.options;
-  };
-
   return (
-    <S.Wrapper ref={wrapper} data-testid="colorPickerWrapper">
+    <S.Wrapper ref={wrapper} data-testid="color-picker-wrapper">
       <S.InputWrapper>
         <S.ColorWrapper background={state.color} />
         <S.Input
-          data-testid="inputPickerWrapper"
+          data-testid="input-picker-wrapper"
           type="text"
           value={state.inputValue}
           onChange={handleInputChange}
           error={error}
           placeholder="#FFFFFF"
           onBlur={handleOnBlur}
+          readOnly={onlyFixedColors}
         />
         <S.IconWrapper>
           <IconAction icon={icon} size="s" onClick={togglePicker} />
         </S.IconWrapper>
       </S.InputWrapper>
-      {isVisible && <Picker value={state.color} onChange={handlePickerChange} colors={getOptions(theme, colors)} />}
+      {isVisible && (
+        <Picker
+          value={state.color}
+          onChange={handlePickerChange}
+          colors={getOptions(theme, onlyFixedColors, currentColors)}
+          onlyFixedColors={onlyFixedColors}
+        />
+      )}
     </S.Wrapper>
   );
 };
@@ -102,10 +123,11 @@ const ColorPicker = (props: IProps): JSX.Element => {
 export interface IProps {
   value: string;
   error?: boolean;
-  colors?: string[] | Record<string, unknown>[];
+  colors?: string[] | Record<string, unknown>[] | any[];
   onChange: (newColor: string) => void;
   handleValidation?: (value: string, validators: Record<string, unknown>) => void;
   theme: string;
+  onlyFixedColors?: boolean;
 }
 
 export default memo(ColorPicker);

package/src/components/InformativeMenu/index.tsx

@@ -4,7 +4,7 @@ import { Button, FloatingMenu, IconAction } from "@ax/components";
 
 import * as S from "./style";
 
-const InformativeMenu = (props: IProps): JSX.Element => {
+const InformativeMenu = (props: IInformativeMenuProps): JSX.Element => {
   const { icon, message, actionText, iconSize, position } = props;
 
   const InfoButton = () => <IconAction icon={icon} size={iconSize} />;
@@ -25,11 +25,11 @@ const InformativeMenu = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface IInformativeMenuProps {
   icon: string;
   message: string;
   actionText: string;
-  iconSize?: "s" | "m" | undefined;
+  iconSize?: "s" | "m";
   position?: string;
 }
 export default InformativeMenu;

package/src/components/ProgressBar/index.tsx

@@ -10,13 +10,13 @@ const ProgressBar = (props: IProgressBarProps): JSX.Element => {
   };
 
   return (
-    <S.Tracker>
+    <S.Tracker data-testid="progressbar-tracker">
       <S.ProgressInTracker percentage={percentageLimits(0, percentage, 100)} />
     </S.Tracker>
   );
 };
 
-interface IProgressBarProps {
+export interface IProgressBarProps {
   percentage: number;
 }
 

package/src/components/SideModal/SideModalOption/index.tsx

@@ -28,7 +28,7 @@ const SideModalOption = (props: IProps) => {
 
   return (
     <S.Item onClick={setOption} data-testid="side-modal-option">
-      <S.Thumbnail {...thumbnailProps} />
+      <S.Thumbnail data-testid="side-modal-option-img" {...thumbnailProps} />
       {label}
     </S.Item>
   );

package/src/components/SideModal/index.tsx

@@ -58,13 +58,19 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [current, whiteList]);
 
+  const handleToggleModal = () => {
+    setSearchQuery("");
+    toggleModal();
+  };
+
   const node = useRef<any>(null);
+
   const handleClickOutside = (e: any) => {
     if (node.current.contains(e.target)) {
       return;
     }
 
-    toggleModal();
+    handleToggleModal();
   };
 
   useHandleClickOutside(isOpen, handleClickOutside);
@@ -87,8 +93,10 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
     return (
       <MenuItem key={`${value}${i}`} active={isSelected}>
-        <S.NavLink onClick={filterOptions}>
-          <S.Link active={isSelected}>{label}</S.Link>
+        <S.NavLink onClick={filterOptions} data-testid="side-modal-nav-link">
+          <S.Link data-testid="side-modal-link" active={isSelected}>
+            {label}
+          </S.Link>
         </S.NavLink>
       </MenuItem>
     );
@@ -115,7 +123,6 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
   const filteredOptions =
     options.options &&
     options.options.map((option: any, i: number) => {
-      if (typeof option !== "object" && typeof option !== "string") return null;
       const displayName = getDisplayName(option.component ? option.component : option);
       if (searchQuery.length > 0) {
         const name = displayName.toLowerCase();
@@ -126,7 +133,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
         <SideModalOption
           option={option}
           handleClick={handleClick}
-          toggleModal={toggleModal}
+          toggleModal={handleToggleModal}
           key={`${option}${i}`}
           theme={theme}
         >
@@ -139,20 +146,20 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     ? createPortal(
         <S.Wrapper ref={node} optionsType={optionsType} data-testid="side-modal">
           <S.Header>
-            <S.Title>{optionsType}</S.Title>
+            <S.Title data-testid="side-modal-title">{optionsType}</S.Title>
             {showSearch && optionsType !== "components" && (
               <S.SearchWrapper>
                 <SearchField onChange={setSearchQuery} closeOnInactive />
               </S.SearchWrapper>
             )}
             {!showSearch && (
-              <S.ButtonWrapper>
-                <IconAction icon="close" onClick={toggleModal} />
+              <S.ButtonWrapper data-testid="side-modal-close-button">
+                <IconAction icon="close" onClick={handleToggleModal} />
               </S.ButtonWrapper>
             )}
           </S.Header>
           {setDefault && !setDefault.checked && (
-            <S.CheckFieldWrapper>
+            <S.CheckFieldWrapper data-testid="check-field-wrapper">
               <CheckField
                 name="setDefault"
                 value="setDefault"
@@ -177,7 +184,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     : null;
 };
 
-interface ISideModalProps {
+export interface ISideModalProps {
   isOpen: boolean;
   whiteList: string[] | undefined;
   categories?: ModuleCategoryInfo[];

package/src/modules/Navigation/Menus/List/Table/SidePanel/Form/index.tsx

@@ -55,6 +55,7 @@ const Form = (props: IProps): JSX.Element => {
         <FieldsBehavior
           title="Image"
           name="image"
+          fullWidth={true}
           fieldType="ImageField"
           value={itemImage || null}
           onChange={setImageValue}