@griddo/ax 1.75.86 → 1.75.91

package/package.json

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

package/src/__tests__/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`Avatar component rendering should render the component only with name 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil fkodDH"
+    className="sc-lbVpMG hOAqbs"
     data-testid="avatar"
   />
 </div>
@@ -14,11 +14,11 @@ exports[`Avatar component rendering should render the component only with name 1
 
 exports[`Avatar component rendering should render the component with a wrong image url 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil ejhcAS"
+    className="sc-lbVpMG kLnTvZ"
     data-testid="avatar"
   />
 </div>
@@ -26,11 +26,11 @@ exports[`Avatar component rendering should render the component with a wrong ima
 
 exports[`Avatar component rendering should render the component with an empty string as name 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil hilXDA"
+    className="sc-lbVpMG dbQJiT"
     data-testid="avatar"
   />
 </div>
@@ -38,11 +38,11 @@ exports[`Avatar component rendering should render the component with an empty st
 
 exports[`Avatar component rendering should render the component with image null 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil jDWEnq"
+    className="sc-lbVpMG jpmXvZ"
     data-testid="avatar"
   />
 </div>
@@ -50,11 +50,11 @@ exports[`Avatar component rendering should render the component with image null
 
 exports[`Avatar component rendering should render the component without name or image 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil hilXDA"
+    className="sc-lbVpMG dbQJiT"
     data-testid="avatar"
   />
 </div>

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

@@ -1,11 +1,13 @@
 import * as React from "react";
 import ToggleField, { IToggleFieldProps } from "@ax/components/Fields/ToggleField";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@ax/helpers";
-import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
 import { mock } from "jest-mock-extended";
 
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
 afterEach(cleanup);
 
 const defaultProps = mock<IToggleFieldProps>();
@@ -20,6 +22,10 @@ describe("ToggleField component rendering", () => {
 
     const toggleFieldWrapper = screen.getByTestId("toggle-field-wrapper");
     expect(toggleFieldWrapper).toBeTruthy();
+    const theme = parseTheme(globalTheme);
+    expect(toggleFieldWrapper).not.toHaveStyle(`background: ${theme.colors.uiBackground03}`);
+    const toggleAuxtext = screen.queryByTestId("toggle-auxtext");
+    expect(toggleAuxtext).not.toBeTruthy();
   });
 
   it("should render input as checked", () => {
@@ -60,6 +66,34 @@ describe("ToggleField component rendering", () => {
     const toggleFieldInput = screen.getByTestId<HTMLInputElement>("toggle-field-input");
     expect(toggleFieldInput.name).toEqual("This is the name");
   });
+
+  it("should render the auxText", () => {
+    defaultProps.auxText = "This is the new text";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ToggleField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const auxText = screen.getByText("This is the new text");
+    expect(auxText).toBeInTheDocument();
+  });
+
+  it("should render with the background", () => {
+    defaultProps.background = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ToggleField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toggleFieldWrapper = screen.getByTestId<HTMLInputElement>("toggle-field-wrapper");
+    expect(toggleFieldWrapper).toBeTruthy();
+    const theme = parseTheme(globalTheme);
+    expect(toggleFieldWrapper).toHaveStyle(`background: ${theme.colors.uiBackground03}`);
+  });
 });
 
 describe("onClick events", () => {

package/src/components/Fields/ReferenceField/AutoPanel/AutoItem/index.tsx

@@ -105,7 +105,7 @@ const AutoItem = (props: IProps) => {
   };
 
   const handleButtonClick = () => {
-    addFilter(state.filter);
+    addFilter(state.filter, source.id);
     setState({ ...state, isOpen: false });
   };
 
@@ -121,7 +121,7 @@ const AutoItem = (props: IProps) => {
   const handleDeleteTag = (id: number) => {
     const newFilters = state.filter.filter((e) => e.id !== id);
     setState({ ...state, filter: newFilters });
-    addFilter(newFilters);
+    addFilter(newFilters, source.id);
   };
 
   return (
@@ -193,7 +193,7 @@ interface IProps {
   site: ISite;
   structuredDataSite: IStructuredData[];
   handleDelete: (value: string) => void;
-  addFilter: (value: any[]) => void;
+  addFilter: (value: any[], source: string) => void;
 }
 
 export default AutoItem;

package/src/components/Fields/ReferenceField/AutoPanel/index.tsx

@@ -145,8 +145,9 @@ const AutoPanel = (props: IProps): JSX.Element => {
     }
   };
 
-  const handleAddFilter = (newFilters: any[]) => {
-    setState((state: IReferenceState) => ({ ...state, filter: newFilters }));
+  const handleAddFilter = (newFilters: any[], source: string) => {
+    const oldFilters = state.filter.filter((f: any) => f.source !== source);
+    setState((state: IReferenceState) => ({ ...state, filter: [...oldFilters, ...newFilters] }));
   };
 
   const quantityOptions = [

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

@@ -3,7 +3,7 @@ import React from "react";
 import * as S from "./style";
 
 const ToggleField = (props: IToggleFieldProps): JSX.Element => {
-  const { name, value, disabled, onChange } = props;
+  const { name, value, disabled, onChange, size = "m", background = false, auxText } = props;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const isChecked = e.target.checked;
@@ -13,7 +13,7 @@ const ToggleField = (props: IToggleFieldProps): JSX.Element => {
   };
 
   return (
-    <S.Wrapper data-testid="toggle-field-wrapper">
+    <S.Wrapper background={background} data-testid="toggle-field-wrapper">
       <S.Input
         id={`toggle-${name}`}
         type="checkbox"
@@ -24,7 +24,8 @@ const ToggleField = (props: IToggleFieldProps): JSX.Element => {
         onChange={handleChange}
         data-testid="toggle-field-input"
       />
-      <S.Label htmlFor={`toggle-${name}`} />
+      <S.Label htmlFor={`toggle-${name}`} size={background ? "s" : size} />
+      {auxText && <S.AuxText data-testid="toggle-auxtext">{auxText}</S.AuxText>}
     </S.Wrapper>
   );
 };
@@ -34,6 +35,9 @@ export interface IToggleFieldProps {
   value: any;
   disabled?: boolean;
   onChange?: (value: boolean) => void;
+  size?: "s" | "m";
+  background?: boolean;
+  auxText?: string;
 }
 
 export default ToggleField;

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

@@ -1,6 +1,11 @@
 import styled from "styled-components";
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div<{ background: boolean | undefined }>`
+  background: ${(p) => (p.background ? p.theme.colors.uiBackground03 : "none")};
+  border-radius: ${(p) => (p.background ? p.theme.spacing.xxs : 0)};
+  padding: ${(p) => (p.background ? p.theme.spacing.s : 0)};
+  display: ${(p) => (p.background ? "flex" : "block")};
+`;
 
 const Input = styled.input`
   display: none;
@@ -10,25 +15,26 @@ const Input = styled.input`
   }
 
   &:checked + Label {
-    background: ${p => p.theme.color.interactive01};
+    background: ${(p) => p.theme.color.interactive01};
   }
 
   &:disabled + Label {
     pointer-events: none;
+    opacity: 40%;
   }
-`
+`;
 
-const Label = styled.label`
+const Label = styled.label<{ size?: string }>`
   box-sizing: border-box;
   outline: 0;
   display: block;
-  width: 4em;
-  height: 2em;
+  width: ${(p) => (p.size === "m" ? "4em" : "40px")};
+  height: ${(p) => (p.size === "m" ? "2em" : "18px")};
   position: relative;
   cursor: pointer;
-  background: ${p => p.theme.color.interactiveDisabled};
-  border-radius: 2em;
-  padding: 4px;
+  background: ${(p) => p.theme.color.interactiveDisabled};
+  border-radius: ${(p) => (p.size === "m" ? "2em" : " 2em")};
+  padding: ${(p) => (p.size === "m" ? "4px" : " 2px")};
   transition: all 0.4s ease;
 
   &::selection {
@@ -37,17 +43,17 @@ const Label = styled.label`
 
   &:after {
     border-radius: 50%;
-    background: ${p => p.theme.color.interactiveBackground};
+    background: ${(p) => p.theme.color.interactiveBackground};
     transition: all 0.2s ease;
   }
-  
+
   &:after,
   &:before {
     position: relative;
     display: block;
     content: "";
-    width: 42%;
-    height: 100%;
+    width: ${(p) => (p.size === "m" ? "42%" : "14px")};
+    height: ${(p) => (p.size === "m" ? "100%" : "14px")};
   }
 
   &:after {
@@ -57,10 +63,12 @@ const Label = styled.label`
   &:before {
     display: none;
   }
-`
+`;
+
+const AuxText = styled.span`
+  ${(p) => p.theme.textStyle?.uiXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding-left: ${(p) => p.theme.spacing.xs};
+`;
 
-export {
-  Wrapper,
-  Input,
-  Label,
-};
+export { Wrapper, Input, Label, AuxText };

package/src/components/FieldsBehavior/style.tsx

@@ -1,6 +1,8 @@
 import styled from "styled-components";
 
-export const Label = styled.label<{ error: boolean | undefined }>`
+export const Label = styled.label<{
+  error: boolean | undefined;
+}>`
   ${(p) => p.theme.textStyle?.fieldLabel};
   color: ${(p) => (p.error === true ? p.theme.color?.error : p.theme.color?.textMediumEmphasis)};
   display: block;
@@ -19,8 +21,8 @@ export const HelpText = styled.div<{ error: boolean | undefined }>`
 export const Header = styled.div`
   position: absolute;
   left: 0;
-  right: 0;
   top: 0;
+  right: 0;
   display: flex;
   justify-content: space-between;
 `;

package/src/containers/Navigation/Menu/reducer.tsx

@@ -40,6 +40,7 @@ const initialState = {
     type: "link",
     headerStyle: "",
     footerStyle: "",
+    itemSpecial: false,
   },
   totalItems: 0,
 };
@@ -60,4 +61,4 @@ function reducer(state = initialState, action: MenuActionsCreators): IMenuState
   }
 }
 
-export { initialState as menuInitialState, reducer as menuReducer };
+export { initialState as menuInitialState, reducer as menuReducer };

package/src/modules/Navigation/Menus/List/Table/Item/index.tsx

@@ -55,6 +55,7 @@ const Item = (props: IItemProps): JSX.Element => {
     updateFormValue({ type });
     updateFormValue({ headerStyle });
     updateFormValue({ footerStyle });
+    updateFormValue({ itemSpecial: item.special || false });
   };
 
   const openModal = () => {

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

@@ -10,13 +10,14 @@ import { IRootState, IMenuForm, IImage } from "@ax/types";
 const Form = (props: IProps): JSX.Element => {
   const { form, updateForm, toggleSecondaryPanel, setIsGalleryOpened } = props;
 
-  const { itemLink, itemLabel, itemAuxText, type, itemImage } = form;
+  const { itemLink, itemLabel, itemAuxText, type, itemImage, itemSpecial } = form;
 
   const setLinkValue = (value: any) => updateForm({ itemLink: value });
   const setLabelValue = (value: string) => updateForm({ itemLabel: value });
   const setAuxTextValue = (value: string) => updateForm({ itemAuxText: value });
   const setTypeValue = (value: string) => updateForm({ type: value });
   const setImageValue = (value: IImage) => updateForm({ itemImage: value });
+  const setSpecial = (value: boolean) => updateForm({ itemSpecial: value });
 
   const typeLinkOptions = [
     {
@@ -63,13 +64,6 @@ const Form = (props: IProps): JSX.Element => {
         />
       ) : (
         <>
-          <FieldsBehavior
-            title="Auxiliar Text"
-            name="auxText"
-            fieldType="TextArea"
-            value={itemAuxText || ""}
-            onChange={setAuxTextValue}
-          />
           <FieldsBehavior
             title="Link"
             name="link"
@@ -80,6 +74,13 @@ const Form = (props: IProps): JSX.Element => {
             handlePanel={toggleSecondaryPanel}
             inFloatingPanel={true}
           />
+          <FieldsBehavior
+            title="Auxiliar Text"
+            name="auxText"
+            fieldType="TextArea"
+            value={itemAuxText || ""}
+            onChange={setAuxTextValue}
+          />
           <FieldsBehavior
             title="Image"
             name="image"
@@ -89,6 +90,14 @@ const Form = (props: IProps): JSX.Element => {
             onChange={setImageValue}
             setIsGalleryOpened={setIsGalleryOpened}
           />
+          <FieldsBehavior
+            name="special"
+            fieldType="ToggleField"
+            value={itemSpecial}
+            onChange={setSpecial}
+            background
+            auxText="Check it if the link has a special behavior."
+          />
         </>
       )}
     </>

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

@@ -14,7 +14,7 @@ const SidePanel = (props: IProps): JSX.Element => {
   const { isOpen, isOpenedSecond, toggleModal, toggleSecondaryPanel, addMenuItem, updateMenuItem, item, edit, form } =
     props;
 
-  const { itemLabel, itemLink, itemImage, itemAuxText, type, headerStyle, footerStyle } = form;
+  const { itemLabel, itemLink, itemImage, itemAuxText, type, headerStyle, footerStyle, itemSpecial } = form;
 
   const [isGalleryOpened, setIsGalleryOpened] = useState(false);
 
@@ -29,6 +29,7 @@ const SidePanel = (props: IProps): JSX.Element => {
     auxText: itemAuxText,
     component: "Menu",
     config: { type, headerStyle, footerStyle },
+    special: itemSpecial,
   };
 
   menuItem.children = edit && item ? item.children : [];

package/src/types/index.tsx

@@ -341,6 +341,7 @@ export interface IMenuItem {
   isExpanded?: boolean;
   config: IMenuItemConfig | null;
   parentEditorID?: number;
+  special: boolean;
 }
 
 export interface IMenuItemConfig {
@@ -357,6 +358,7 @@ export interface IMenuForm {
   type: string;
   headerStyle: string;
   footerStyle: string;
+  itemSpecial: boolean;
 }
 
 export interface IHeader {