@griddo/ax 1.73.28 → 1.74.0

package/src/api/sites.tsx

@@ -1,5 +1,5 @@
 import { AxiosResponse } from "axios";
-import { IGetGlobalPagesParams, IGetSitePagesParams } from "@ax/types";
+import { IGetGlobalPagesParams, IGetSitePagesParams, IGetSitesParams } from "@ax/types";
 import { template } from "./config";
 import { sendRequest, sendInitialRequest, IServiceConfig } from "./utils";
 
@@ -69,11 +69,21 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/site/", "/publish"],
     method: "POST",
   },
+  PUBLISH_SITE_BULK: {
+    ...template,
+    endpoint: "/site/publish/bulk",
+    method: "POST",
+  },
   UNPUBLISH_SITE: {
     ...template,
     endpoint: ["/site/", "/unpublish"],
     method: "POST",
   },
+  UNPUBLISH_SITE_BULK: {
+    ...template,
+    endpoint: "/site/unpublish/bulk",
+    method: "POST",
+  },
   IMPORT_PAGE: {
     ...template,
     endpoint: ["/site/", "/pages/global/imports/"],
@@ -101,10 +111,33 @@ const SERVICES: { [key: string]: IServiceConfig } = {
   },
 };
 
-const getAllSites = async (language?: number) => {
+const getAllSites = async (params: IGetSitesParams = { recentSitesNumber: 7 }) => {
   const { host, endpoint } = SERVICES.GET_ALL_SITES;
-  SERVICES.GET_ALL_SITES.dynamicUrl = language ? `${host}${endpoint}?language=${language}` : "";
-  return sendRequest(SERVICES.GET_ALL_SITES);
+  const { token, language, recentSitesNumber, searchQuery, filterQuery, page, itemsPerPage, pagination } = params;
+
+  const queryParams =
+    language && recentSitesNumber
+      ? `?recentSitesNumber=${recentSitesNumber}&language=${language}`
+      : (language && `?language=${language}`) || `?recentSitesNumber=${recentSitesNumber}`;
+
+  SERVICES.GET_ALL_SITES.dynamicUrl = `${host}${endpoint}${queryParams}`;
+
+  if (pagination) {
+    const paginationParams = `&pagination=true&page=${page}&itemsPerPage=${itemsPerPage}`;
+    SERVICES.GET_ALL_SITES.dynamicUrl = `${SERVICES.GET_ALL_SITES.dynamicUrl}${paginationParams}`;
+  }
+  if (filterQuery) {
+    SERVICES.GET_ALL_SITES.dynamicUrl = `${SERVICES.GET_ALL_SITES.dynamicUrl}${filterQuery}`;
+  }
+  if (searchQuery && searchQuery.trim() !== "") {
+    SERVICES.GET_ALL_SITES.dynamicUrl = `${SERVICES.GET_ALL_SITES.dynamicUrl}${searchQuery}`;
+  }
+  
+  if (token) {
+    return sendInitialRequest(SERVICES.GET_ALL_SITES, token, { recentSitesNumber: 7 });
+  } else {
+    return sendRequest(SERVICES.GET_ALL_SITES);
+  }
 };
 
 const getSiteInfo = async (siteID: number) => {
@@ -280,6 +313,7 @@ const getSiteImages = async (
     host,
     endpoint: [prefix, suffix],
   } = SERVICES.GET_SITE_IMAGES;
+
   const items = itemsPerPage ? `&itemsPerPage=${itemsPerPage}` : "";
   const thumb = thumbWidth && thumbHeight ? `&thumbWidth=${thumbWidth}&thumbHeight=${thumbHeight}` : "";
   SERVICES.GET_SITE_IMAGES.dynamicUrl = `${host}${prefix}${site}${suffix}?page=${page}${items}${thumb}${query}`;
@@ -318,6 +352,8 @@ const publishSite = (siteID: number) => {
   return sendRequest(SERVICES.PUBLISH_SITE);
 };
 
+const publishSiteBulk = (ids: number[]) => sendRequest(SERVICES.PUBLISH_SITE_BULK, { sites: ids });
+
 const unpublishSite = (siteID: number) => {
   const {
     host,
@@ -327,6 +363,7 @@ const unpublishSite = (siteID: number) => {
   SERVICES.UNPUBLISH_SITE.dynamicUrl = `${host}${prefix}${siteID}${suffix}`;
   return sendRequest(SERVICES.UNPUBLISH_SITE);
 };
+const unpublishSiteBulk = (ids: number[]) => sendRequest(SERVICES.UNPUBLISH_SITE_BULK, { sites: ids });
 
 export default {
   getAllSites,
@@ -339,7 +376,9 @@ export default {
   createSite,
   updateSite,
   publishSite,
+  publishSiteBulk,
   unpublishSite,
+  unpublishSiteBulk,
   getGlobalPages,
   getGlobalPagesLight,
   importPage,

package/src/components/ActionMenu/index.tsx

@@ -8,7 +8,7 @@ const ActionMenu = (props: IProps): JSX.Element => {
   const { options, icon, className, tooltip } = props;
 
   const MoreInfoButton = () => (
-    <S.IconActionWrapper>
+    <S.IconActionWrapper data-testid="more-info-button">
       <IconAction icon={icon} />
     </S.IconActionWrapper>
   );

package/src/components/Avatar/index.tsx

@@ -2,17 +2,17 @@ import React from "react";
 import { getInitials } from "@ax/helpers";
 import * as S from "./style";
 
-const Avatar = (props: IProps) => {
+const Avatar = (props: IAvatarProps): JSX.Element => {
   const { image, name } = props;
 
   return (
-    <S.AvatarWrapper>
-      <S.Avatar image={image} initials={getInitials(name)} />
+    <S.AvatarWrapper data-testid="avatar-wrapper">
+      <S.Avatar image={image} initials={getInitials(name)} data-testid="avatar" />
     </S.AvatarWrapper>
   );
 };
 
-interface IProps {
+export interface IAvatarProps {
   image?: string | null;
   name?: string;
 }

package/src/components/Browser/index.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState } from "react";
 
 import { findByEditorID } from "@ax/forms";
 import { copyTextToClipboard } from "@ax/helpers";
-import { useToast } from "@ax/hooks";
+import { useOnMessageReceivedFromIframe, useToast } from "@ax/hooks";
+
 import Icon from "../Icon";
 import Tooltip from "../Tooltip";
 import Toast from "../Toast";
@@ -24,9 +25,9 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     disabled,
     siteID,
     isPreview,
-    setSelectedContent,
     showIframe,
     browserRef,
+    actions,
   } = props;
 
   const { id, entity } = content;
@@ -36,21 +37,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
   const [resolution, setResolution] = useState("desktop");
   const { isVisible, toggleToast, setIsVisible } = useToast();
 
-  const onMessageReceivedFromIframe = useCallback(
-    (ev: MessageEvent<{ type: string; message: string }>) => {
-      if (typeof ev.data !== "object") return;
-      if (!ev.data.type) return;
-      if (ev.data.type !== "module-click") return;
-      if (!ev.data.message) return;
-      setSelectedContent(ev.data.message);
-    },
-    [setSelectedContent]
-  );
-
-  useEffect(() => {
-    window.addEventListener("message", onMessageReceivedFromIframe);
-    return () => window.removeEventListener("message", onMessageReceivedFromIframe);
-  }, [onMessageReceivedFromIframe]);
+  useOnMessageReceivedFromIframe(actions);
 
   useEffect(() => {
     localStorage.setItem("selectedID", "0");
@@ -70,7 +57,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     const isNavigationModule = ["header", "footer"].includes(selectedComponent.type);
 
     if (!isPreview && (!disabled || isNavigationModule)) {
-      setSelectedContent && setSelectedContent(editorID);
+      actions?.setSelectedContentAction(editorID);
     }
   };
 
@@ -102,6 +89,21 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     message: "URL Copied",
   };
 
+  const deleteModuleSelected = (editorID: number) => {
+    actions?.setSelectedContentAction(0);
+    actions?.deleteModuleAction(editorID);
+  };
+
+  const duplicateModuleSelected = async (editorID: number) => {
+    const duplicatedEditorID = await actions?.duplicateModuleAction(editorID);
+    actions?.setSelectedContentAction(duplicatedEditorID);
+  };
+
+  const moduleActions = {
+    deleteModuleAction: deleteModuleSelected,
+    duplicateModuleAction: duplicateModuleSelected,
+  };
+
   return (
     <S.BrowserWrapper ref={browserRef}>
       <S.NavBar>
@@ -150,6 +152,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
             footer={footer}
             languageID={content.language}
             pageLanguages={content.pageLanguages}
+            moduleActions={moduleActions}
             renderer="editor"
           />
         </S.Wrapper>
@@ -164,7 +167,6 @@ interface IBrowserProps {
   header?: any;
   footer?: any;
   url: string;
-  setSelectedContent?: any;
   isPage: boolean;
   theme: string;
   socials: any;
@@ -175,6 +177,11 @@ interface IBrowserProps {
   isPreview?: boolean;
   showIframe?: boolean;
   browserRef?: any;
+  actions?: {
+    setSelectedContentAction: any;
+    deleteModuleAction(editorID: number): void;
+    duplicateModuleAction(editorID: number): Promise<number>;
+  };
 }
 
 export default Browser;

package/src/components/BrowserContent/index.tsx

@@ -18,6 +18,7 @@ const BrowserContent = (props: IProps) => {
     languageID,
     pageLanguages,
     selectEditorID,
+    moduleActions,
     renderer,
   } = props;
 
@@ -44,6 +45,7 @@ const BrowserContent = (props: IProps) => {
       publicApiUrl={PUBLIC_API_URL}
       instance={INSTANCE}
       siteId={siteID}
+      moduleActions={moduleActions}
     >
       <Preview
         isPage={isPage}
@@ -77,6 +79,10 @@ interface IProps {
     parentComponent: string | undefined | null,
     e: React.SyntheticEvent
   ): void;
+  moduleActions?: {
+    deleteModuleAction(editorID: number): void;
+    duplicateModuleAction(editorID: number): void;
+  };
 }
 
 export default BrowserContent;

package/src/components/Fields/AsyncSelect/style.tsx

@@ -15,6 +15,8 @@ export const StyledSelect = styled(AsyncSelect)<{ isDisabled: boolean | undefine
     height: ${(p) => p.theme.spacing.l};
     min-width: calc(${(p) => p.theme.spacing.xl} * 4);
     max-width: calc(${(p) => p.theme.spacing.xl} * 6);
+    cursor: pointer;
+
     :hover {
       border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.uiLine)};
     }
@@ -59,13 +61,14 @@ export const StyledSelect = styled(AsyncSelect)<{ isDisabled: boolean | undefine
         min-height: ${(p) => p.theme.spacing.l};
         padding: ${(p) => p.theme.spacing.s};
         &:first-child {
-          ${(p) => !p.mandatory && p.hasEmptyOption &&
+          ${(p) =>
+            !p.mandatory &&
+            p.hasEmptyOption &&
             css`
               font-style: italic;
               color: ${(p) => p.theme.color.textLowEmphasis};
               background-color: ${(p) => p.theme.color.uiLineInverse};
-            `
-          }
+            `}
         }
         :hover {
           cursor: pointer;

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

@@ -43,6 +43,7 @@ const CheckField = ({
           checked={checked}
           disabled={disabled}
           onChange={handleChange}
+          aria-label={`${name}`}
         />
         <S.CheckMark
           data-testid={"checkFieldCheckMark"}

package/src/components/Fields/DateField/style.tsx

@@ -1,7 +1,9 @@
 import styled from "styled-components";
 
 export const DatePickerWrapper = styled.div`
-  .react-datepicker-popper[data-placement^="bottom"] {
+  .react-datepicker-popper,
+  .react-datepicker-popper[data-placement^="bottom"],
+  .react-datepicker-popper[data-placement^="bottom-start"] {
     margin-top: 0
     z-index: 2;
   }

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

@@ -7,17 +7,25 @@ import * as S from "./style";
 const HeadingField = (props: IHeadingFieldProps): JSX.Element => {
   const { value, onChange, options, showAdvanced } = props;
 
-  const handleChange = (newValue: string) => onChange({ ...value, content: newValue });
-  const handleSelectChange = (newValue: string) => onChange({ ...value, tag: newValue });
+  const getContentValue = () => value?.content || props.default?.content || "";
+  const getTagValue = () => value?.tag || props.default?.tag || "";
 
-  const contentValue = value && value.content ? value.content : "";
+  const handleChange = (newValue: string) => {
+    const tag = getTagValue();
+    onChange({ content: newValue, tag });
+  };
+
+  const handleSelectChange = (newValue: string) => {
+    const content = getContentValue();
+    onChange({ content, tag: newValue });
+  };
 
   return (
     <>
-      <TextField {...props} value={contentValue} onChange={handleChange} />
+      <TextField {...props} value={getContentValue()} onChange={handleChange} />
       {showAdvanced && (
         <S.AdvancedWrapper data-testid="text-field-advanced-wrapper">
-          <FieldsBehavior fieldType="Select" options={options} value={value.tag} onChange={handleSelectChange} />
+          <FieldsBehavior fieldType="Select" options={options} value={getTagValue()} onChange={handleSelectChange} />
         </S.AdvancedWrapper>
       )}
     </>
@@ -30,6 +38,7 @@ interface IHeadingFieldProps {
   onChange: (value: IHeadingField) => void;
   options: IOption[];
   showAdvanced: boolean;
+  default: IHeadingField;
 }
 
 interface IOption {

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

@@ -19,6 +19,7 @@ const ImageField = (props: IImageFieldProps) => {
     site,
     setIsGalleryOpened,
     cropPreview = false,
+    fullWidth = false,
   } = props;
 
   const isLinkableImage = selectedContent && selectedContent.component === "LinkableImage";
@@ -73,6 +74,7 @@ const ImageField = (props: IImageFieldProps) => {
         preview={!!previewSrc}
         disabled={disabled}
         onClick={handleClick}
+        fullWidth={fullWidth}
       >
         <S.IconWrapper>
           <Icon name="image" size="18" />
@@ -114,6 +116,7 @@ export interface IImageFieldProps {
   validators?: Record<string, unknown>;
   site: ISite;
   cropPreview?: boolean;
+  fullWidth?: boolean;
 }
 
 export default memo(ImageField);

package/src/components/Fields/ImageField/style.tsx

@@ -1,14 +1,14 @@
 import styled from "styled-components";
 import { Wrapper } from "@ax/components/FieldsBehavior/style";
 
-const FieldWrapper = styled.div<{ error?: boolean; preview: boolean; disabled?: boolean }>`
+const FieldWrapper = styled.div<{ error?: boolean; preview: boolean; disabled?: boolean; fullWidth?: boolean }>`
   position: relative;
   display: ${(p) => (p.preview ? `none` : `flex`)};
   justify-content: center;
   align-items: center;
   flex-flow: column nowrap;
   min-height: ${(p) => `calc(${p.theme.spacing.l} * 2)`};
-  max-width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
+  max-width: ${(p) => (!p.fullWidth ? `calc(${p.theme.spacing.xl} * 5) ` : '100%')};
   width: 100%;
   background-color: ${(p) => p.theme.colors.uiBackground02};
   border: ${(p) =>

package/src/components/Fields/Select/style.tsx

@@ -18,6 +18,8 @@ export const StyledSelect = styled(Select)<{
     box-shadow: none;
     height: ${(p) => p.theme.spacing?.l};
     max-width: calc(${(p) => p.theme.spacing?.xl} * 6);
+    cursor: pointer;
+
     :hover {
       border-color: ${(p) => (p.error ? p.theme.color?.error : p.theme.color?.uiLine)};
     }

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

@@ -17,7 +17,8 @@ const SliderField = (props: ITextFieldProps): JSX.Element => {
     if (bubbleRef.current) {
       bubbleRef.current.style.left = setBubbleLeft();
     }
-  }, [bubbleRef]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bubbleRef, value]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;

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

@@ -96,6 +96,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
         icon={hasBackgroundIcon}
         hasPrefix={!!prefix}
         prefixWidth={width}
+        aria-label={name}
       />
       {hasBackgroundIcon && (
         <S.BackgroundIcon data-testid="backgroundIconComponent" onClick={onClickIcon}>

package/src/components/Icon/components/BulletList.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+function SvgBulletList(props) {
+  return (
+    <svg width={24} height={24} fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5 6C2.5 5.17 3.17 4.5 4 4.5C4.83 4.5 5.5 5.17 5.5 6C5.5 6.83 4.83 7.5 4 7.5C3.17 7.5 2.5 6.83 2.5 6ZM2.5 12C2.5 11.17 3.17 10.5 4 10.5C4.83 10.5 5.5 11.17 5.5 12C5.5 12.83 4.83 13.5 4 13.5C3.17 13.5 2.5 12.83 2.5 12ZM4 16.5C3.17 16.5 2.5 17.18 2.5 18C2.5 18.82 3.18 19.5 4 19.5C4.82 19.5 5.5 18.82 5.5 18C5.5 17.18 4.83 16.5 4 16.5ZM8 19C7.44772 19 7 18.5523 7 18C7 17.4477 7.44772 17 8 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H8ZM7 12C7 12.5523 7.44772 13 8 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H8C7.44772 11 7 11.4477 7 12ZM7 6C7 5.44772 7.44772 5 8 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H8C7.44772 7 7 6.55228 7 6Z"
+        fill="#5057FF"
+      />
+    </svg>
+  );
+}
+
+export default SvgBulletList;

package/src/components/Icon/components/Grid2.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+function SvgGrid2(props) {
+  return (
+    <svg width={24} height={24} fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5 9H9V5H5V9ZM5 11C3.89543 11 3 10.1046 3 9V5C3 3.89543 3.89543 3 5 3H9C10.1046 3 11 3.89543 11 5V9C11 10.1046 10.1046 11 9 11H5ZM5 19H9V15H5V19ZM5 21C3.89543 21 3 20.1046 3 19V15C3 13.8954 3.89543 13 5 13H9C10.1046 13 11 13.8954 11 15V19C11 20.1046 10.1046 21 9 21H5ZM15 19H19V15H15V19ZM15 21C13.8954 21 13 20.1046 13 19V15C13 13.8954 13.8954 13 15 13H19C20.1046 13 21 13.8954 21 15V19C21 20.1046 20.1046 21 19 21H15ZM15 9H19V5H15V9ZM15 11C13.8954 11 13 10.1046 13 9V5C13 3.89543 13.8954 3 15 3H19C20.1046 3 21 3.89543 21 5V9C21 10.1046 20.1046 11 19 11H15Z"
+        fill="#5057FF"
+      />
+    </svg>
+  );
+}
+
+export default SvgGrid2;

package/src/components/Icon/svgs/Bullet-list.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 6C2.5 5.17 3.17 4.5 4 4.5C4.83 4.5 5.5 5.17 5.5 6C5.5 6.83 4.83 7.5 4 7.5C3.17 7.5 2.5 6.83 2.5 6ZM2.5 12C2.5 11.17 3.17 10.5 4 10.5C4.83 10.5 5.5 11.17 5.5 12C5.5 12.83 4.83 13.5 4 13.5C3.17 13.5 2.5 12.83 2.5 12ZM4 16.5C3.17 16.5 2.5 17.18 2.5 18C2.5 18.82 3.18 19.5 4 19.5C4.82 19.5 5.5 18.82 5.5 18C5.5 17.18 4.83 16.5 4 16.5ZM8 19C7.44772 19 7 18.5523 7 18C7 17.4477 7.44772 17 8 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H8ZM7 12C7 12.5523 7.44772 13 8 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H8C7.44772 11 7 11.4477 7 12ZM7 6C7 5.44772 7.44772 5 8 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H8C7.44772 7 7 6.55228 7 6Z" fill="#5057FF"/>
+</svg>

package/src/components/Icon/svgs/Grid-2.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 9H9V5H5V9ZM5 11C3.89543 11 3 10.1046 3 9V5C3 3.89543 3.89543 3 5 3H9C10.1046 3 11 3.89543 11 5V9C11 10.1046 10.1046 11 9 11H5ZM5 19H9V15H5V19ZM5 21C3.89543 21 3 20.1046 3 19V15C3 13.8954 3.89543 13 5 13H9C10.1046 13 11 13.8954 11 15V19C11 20.1046 10.1046 21 9 21H5ZM15 19H19V15H15V19ZM15 21C13.8954 21 13 20.1046 13 19V15C13 13.8954 13.8954 13 15 13H19C20.1046 13 21 13.8954 21 15V19C21 20.1046 20.1046 21 19 21H15ZM15 9H19V5H15V9ZM15 11C13.8954 11 13 10.1046 13 9V5C13 3.89543 13.8954 3 15 3H19C20.1046 3 21 3.89543 21 5V9C21 10.1046 20.1046 11 19 11H15Z" fill="#5057FF"/>
+</svg>

package/src/components/IconAction/index.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const IconAction = (props: IIconActionProps): JSX.Element => {
-  const { icon, onClick, disabled, inversed, size = "m" } = props;
+  const { icon, onClick, disabled, inversed, size = "m", active } = props;
   const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (onClick !== undefined) {
       e.preventDefault();
@@ -19,8 +19,9 @@ const IconAction = (props: IIconActionProps): JSX.Element => {
       onClick={handleOnClick}
       size={size}
       inversed={inversed}
+      active={active}
     >
-      <S.Icon>
+      <S.Icon data-testid={`icon-action-${icon}`}>
         <Icon name={icon} />
       </S.Icon>
     </S.Button>
@@ -33,6 +34,7 @@ export interface IIconActionProps {
   size?: "s" | "m";
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   inversed?: boolean;
+  active?: boolean;
 }
 
 export default IconAction;

package/src/components/IconAction/style.tsx

@@ -1,7 +1,12 @@
 import styled from "styled-components";
 
-export const Button = styled.button<{ size: string | undefined; inversed?: boolean; disabled?: boolean }>`
-  background: transparent;
+export const Button = styled.button<{
+  size: string | undefined;
+  inversed?: boolean;
+  disabled?: boolean;
+  active?: boolean;
+}>`
+  background: ${(p) => (p.active ? p.theme.color?.overlayHoverPrimary : "transparent")};
   border: none;
   border-radius: 50%;
   color: inherit;
@@ -22,6 +27,7 @@ export const Button = styled.button<{ size: string | undefined; inversed?: boole
     opacity: 0;
     transition: opacity 0.1s;
   }
+
   :hover:before {
     background-color: ${(p) => p.theme.color?.overlayHoverPrimary};
     opacity: 1;

package/src/components/LanguageMenu/index.tsx

@@ -5,7 +5,7 @@ import { Flag, Icon } from "@ax/components";
 import * as S from "./style";
 import { ILanguage } from "@ax/types";
 
-const LanguageMenu = (props: IProps): JSX.Element => {
+const LanguageMenu = (props: ILanguageMenuProps): JSX.Element => {
   const { availableLanguages, language, setLanguage, isInAppBar, currentLanguages } = props;
 
   const getCurrentLanguage = (lang: string) =>
@@ -30,18 +30,23 @@ const LanguageMenu = (props: IProps): JSX.Element => {
     }
 
     return (
-      <S.LanguageIcon>
+      <S.LanguageIcon data-testid="language-icon">
         <Icon name={iconName} />
       </S.LanguageIcon>
     );
   };
 
   const languageMenuItem = (item: ILanguage) => (
-    <S.LanguageItem key={item.locale} selected={item.locale === language} onClick={setLanguage(item)} data-testid="language-menu-item">
+    <S.LanguageItem
+      key={item.locale}
+      selected={item.locale === language}
+      onClick={setLanguage(item)}
+      data-testid="language-menu-item"
+    >
       <S.LanguageItemWrapper>
         <S.LanguageLabel>
           <Flag name={item.locale} />
-          <S.LanguageText>
+          <S.LanguageText data-testid="language-text">
             <S.Locale>{item.label}</S.Locale> - {item.language}
           </S.LanguageText>
         </S.LanguageLabel>
@@ -54,11 +59,13 @@ const LanguageMenu = (props: IProps): JSX.Element => {
   );
 
   return (
-    <S.ActionMenu data-testid="language-menu">{availableLanguages && availableLanguages.map((item: any) => languageMenuItem(item))}</S.ActionMenu>
+    <S.ActionMenu data-testid="language-menu">
+      {availableLanguages && availableLanguages.map((item: any) => languageMenuItem(item))}
+    </S.ActionMenu>
   );
 };
 
-interface IProps {
+export interface ILanguageMenuProps {
   language?: string | null;
   availableLanguages?: any[] | null;
   currentLanguages?: any[];

package/src/components/Login/RecoveryModal/index.tsx

@@ -45,7 +45,7 @@ const RecoveryModal = (props: IRecoveryProps): JSX.Element => {
 
   const ModalContent = !modalState.isMailSent ? (
     <>
-      <p>Forgot your password? No problem, we'll send you an email with instructions to reset it.</p>
+      <p>Forgot your password? No problem, we&apos;ll send you an email with instructions to reset it.</p>
       <FieldsBehavior
         fieldType="TextField"
         placeholder="Type your email"
@@ -55,6 +55,7 @@ const RecoveryModal = (props: IRecoveryProps): JSX.Element => {
         onChange={handleModalChange}
         error={modalState.error}
         helptext={errorText}
+        name="email"
       />
     </>
   ) : (
@@ -62,7 +63,7 @@ const RecoveryModal = (props: IRecoveryProps): JSX.Element => {
       <p>
         We sent you an email with further instructions to reset your password to <strong>{modalState.input}</strong>.
       </p>
-      <p>If you don't receive it, please check your spam folder or contact support.</p>
+      <p>If you don&apos;t receive it, please check your spam folder or contact support.</p>
     </>
   );
 
@@ -75,12 +76,12 @@ const RecoveryModal = (props: IRecoveryProps): JSX.Element => {
       mainAction={mainAction}
       secondaryAction={secondaryAction}
     >
-      {isOpen ? <S.ModalContent>{ModalContent}</S.ModalContent> : null}
+      {isOpen ? <S.ModalContent data-testid="recovery-modal-content">{ModalContent}</S.ModalContent> : null}
     </Modal>
   );
 };
 
-interface IRecoveryProps {
+export interface IRecoveryProps {
   isOpen: boolean;
   toggleModal(): void;
 }

package/src/components/Login/index.tsx

@@ -42,7 +42,7 @@ const Login = (props: ILoginProps): JSX.Element => {
   const icon = viewPass ? "hide" : "view";
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="login-wrapper">
       <S.Main>
         <S.Header>
           <S.Subtitle>{textWelcome}</S.Subtitle>
@@ -56,6 +56,7 @@ const Login = (props: ILoginProps): JSX.Element => {
             autoComplete="email"
             value={email}
             onChange={_handleEmail}
+            name="email"
           />
           <FieldsBehavior
             fieldType="TextField"
@@ -67,6 +68,7 @@ const Login = (props: ILoginProps): JSX.Element => {
             icon={icon}
             onClickIcon={_togglePassword}
             iconPosition="in"
+            name="password"
           />
           <FieldsBehavior
             fieldType="UniqueCheck"
@@ -74,12 +76,20 @@ const Login = (props: ILoginProps): JSX.Element => {
             value={rememberMe}
             onChange={handleRememberMe}
             options={[{ title: "Remember me" }]}
+            name="rememberMe"
           />
           <Button type="submit" disabled={isLoggingIn ? true : false}>
             {btnText}
           </Button>
           <S.Password>
-            <span onClick={toggleModal} onKeyPress={toggleModal} role="checkbox" aria-checked="false" tabIndex={0}>
+            <span
+              onClick={toggleModal}
+              onKeyPress={toggleModal}
+              role="checkbox"
+              aria-checked="false"
+              tabIndex={0}
+              data-testid="forgot-button"
+            >
               Forgot your password?
             </span>
           </S.Password>
@@ -90,7 +100,7 @@ const Login = (props: ILoginProps): JSX.Element => {
   );
 };
 
-interface ILoginProps {
+export interface ILoginProps {
   handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
   email: string;
   handleEmail: (email: string) => void;