@griddo/ax 1.75.255 → 1.75.257

package/package.json

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

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

@@ -1,5 +1,5 @@
 import React from "react";
-import TagField from "@ax/components/Fields/TagField";
+import TagsField from "@ax/components/Fields/TagsField";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
@@ -12,21 +12,21 @@ const props = {
   onChange: jest.fn(),
 };
 
-describe("TagField component", () => {
+describe("TagsField component", () => {
   test("should render the component", () => {
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...props} />
+        <TagsField {...props} />
       </ThemeProvider>
     );
 
-    const tagFieldWrapper = screen.getAllByTestId("tag-field-wrapper");
-    expect(tagFieldWrapper).toBeTruthy();
-    expect(tagFieldWrapper).toHaveLength(1);
+    const tagsFieldWrapper = screen.getAllByTestId("tag-field-wrapper");
+    expect(tagsFieldWrapper).toBeTruthy();
+    expect(tagsFieldWrapper).toHaveLength(1);
 
-    const tagFieldInput = screen.getAllByTestId("tag-field-input");
-    expect(tagFieldInput).toBeTruthy();
-    expect(tagFieldInput).toHaveLength(1);
+    const tagsFieldInput = screen.getAllByTestId("tag-field-input");
+    expect(tagsFieldInput).toBeTruthy();
+    expect(tagsFieldInput).toHaveLength(1);
   });
 
   test("should render the tags if have values", () => {
@@ -37,17 +37,17 @@ describe("TagField component", () => {
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...defaultProps} />
+        <TagsField {...defaultProps} />
       </ThemeProvider>
     );
 
-    const tagFieldWrapper = screen.getByTestId("tag-field-wrapper");
-    expect(tagFieldWrapper).toBeTruthy();
+    const tagsFieldWrapper = screen.getByTestId("tag-field-wrapper");
+    expect(tagsFieldWrapper).toBeTruthy();
 
-    const tagFieldInput = screen.getByTestId("tag-field-input");
-    expect(tagFieldInput).toBeTruthy();
+    const tagsFieldInput = screen.getByTestId("tag-field-input");
+    expect(tagsFieldInput).toBeTruthy();
 
-    const tagRendered = within(tagFieldWrapper).getAllByTestId("delete-icon-wrapper");
+    const tagRendered = within(tagsFieldWrapper).getAllByTestId("delete-icon-wrapper");
     expect(tagRendered).toHaveLength(2);
 
     const tagComponent = screen.getByTestId("tag-field-wrapper");
@@ -55,17 +55,17 @@ describe("TagField component", () => {
   });
 });
 
-describe("TagField events", () => {
+describe("TagsField events", () => {
   test("should call the value when call onchange", () => {
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...props} />
+        <TagsField {...props} />
       </ThemeProvider>
     );
-    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
+    const TagsFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
 
-    fireEvent.change(tagFieldInput, { target: { value: "test" } });
-    expect(tagFieldInput.value).toBe("test");
+    fireEvent.change(TagsFieldInput, { target: { value: "test" } });
+    expect(TagsFieldInput.value).toBe("test");
   });
 
   test("should add new value on keyDown if it's not in array", () => {
@@ -76,13 +76,13 @@ describe("TagField events", () => {
     };
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...defaultProps} />
+        <TagsField {...defaultProps} />
       </ThemeProvider>
     );
 
-    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
-    fireEvent.input(tagFieldInput, { target: { value: "test" } });
-    fireEvent.keyDown(tagFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
+    const tagsFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
+    fireEvent.input(tagsFieldInput, { target: { value: "test" } });
+    fireEvent.keyDown(tagsFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
     expect(onChange).toHaveBeenCalledWith(["test"]);
   });
   test("shouldn't add new value on keyDown if it's in array", () => {
@@ -93,13 +93,13 @@ describe("TagField events", () => {
     };
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...defaultProps} />
+        <TagsField {...defaultProps} />
       </ThemeProvider>
     );
 
-    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
-    fireEvent.input(tagFieldInput, { target: { value: "test" } });
-    fireEvent.keyDown(tagFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
+    const tagsFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
+    fireEvent.input(tagsFieldInput, { target: { value: "test" } });
+    fireEvent.keyDown(tagsFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
     expect(onChange).toBeCalledTimes(0);
   });
   test("should delete value from array", () => {
@@ -111,12 +111,12 @@ describe("TagField events", () => {
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...defaultProps} />
+        <TagsField {...defaultProps} />
       </ThemeProvider>
     );
 
-    const tagFieldWrapper = screen.getByTestId("tag-field-wrapper");
-    const tagRendered = within(tagFieldWrapper).getAllByTestId("delete-icon-wrapper");
+    const tagsFieldWrapper = screen.getByTestId("tag-field-wrapper");
+    const tagRendered = within(tagsFieldWrapper).getAllByTestId("delete-icon-wrapper");
     expect(tagRendered).toHaveLength(2);
     fireEvent.click(tagRendered[0], 0);
     expect(onChange).toBeCalledTimes(1);
@@ -126,11 +126,11 @@ describe("TagField events", () => {
     const useRefSpy = jest.spyOn(React, "useRef").mockReturnValueOnce({ current: { focus: jest.fn() } });
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...props} />
+        <TagsField {...props} />
       </ThemeProvider>
     );
-    const tagFieldWrapper = screen.getByTestId("tag-field-wrapper");
-    fireEvent.click(tagFieldWrapper);
+    const tagsFieldWrapper = screen.getByTestId("tag-field-wrapper");
+    fireEvent.click(tagsFieldWrapper);
     expect(useRefSpy).toBeCalledTimes(1);
   });
 });

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

@@ -843,11 +843,11 @@ describe("Gallery component rendering", () => {
 
     expect(screen.getByDisplayValue("a description")).toBeInTheDocument();
 
-    const tagFieldInput = screen.getByTestId("tag-field-input");
-    expect(tagFieldInput).toBeTruthy();
-    fireEvent.change(tagFieldInput, { target: { value: "a tag" } });
+    const tagsFieldInput = screen.getByTestId("tag-field-input");
+    expect(tagsFieldInput).toBeTruthy();
+    fireEvent.change(tagsFieldInput, { target: { value: "a tag" } });
     expect(screen.getByDisplayValue("a tag")).toBeInTheDocument();
-    fireEvent.keyDown(tagFieldInput, { key: "Enter" });
+    fireEvent.keyDown(tagsFieldInput, { key: "Enter" });
     expect(screen.queryByDisplayValue("a tag")).not.toBeInTheDocument();
   });
 });

package/src/components/Fields/{TagField → TagsField}/index.tsx

@@ -3,7 +3,7 @@ import { Tag } from "@ax/components";
 
 import * as S from "./style";
 
-const TagField = (props: IProps): JSX.Element => {
+const TagsField = (props: IProps): JSX.Element => {
   const { value, onChange } = props;
   const valueArray = value && Array.isArray(value) ? value : [];
   const [inputValue, setInputValue] = useState("");
@@ -61,4 +61,4 @@ interface IProps {
   onChange: (value: string[]) => void;
 }
 
-export default TagField;
+export default TagsField;

package/src/components/Fields/index.tsx

@@ -27,7 +27,7 @@ import RichText from "./RichText";
 import Select from "./Select";
 import SliderField from "./SliderField";
 import SummaryButton from "./SummaryButton";
-import TagField from "./TagField";
+import TagsField from "./TagsField";
 import TextArea from "./TextArea";
 import TextField from "./TextField";
 import TimeField from "./TimeField";
@@ -69,7 +69,7 @@ export {
   Select,
   SliderField,
   SummaryButton,
-  TagField,
+  TagsField,
   TextArea,
   TextField,
   TimeField,

package/src/components/Gallery/GalleryPanel/DetailPanel/index.tsx

@@ -181,7 +181,7 @@ const GalleryDetailPanel = (props: IProps) => {
           fieldType="TextArea"
           onChange={handleDescription}
         />
-        <FieldsBehavior title="Tags" value={imageForm.tags} fieldType="TagField" onChange={handleTags} />
+        <FieldsBehavior title="Tags" value={imageForm.tags} fieldType="TagsField" onChange={handleTags} />
       </S.FormWrapper>
     </S.PanelForm>
   );

package/src/schemas/pages/GlobalPage.tsx

@@ -74,7 +74,7 @@ export default {
             },
             {
               title: "Keywords",
-              type: "TagField",
+              type: "TagsField",
               key: "metaKeywords",
             },
             {

package/src/schemas/pages/Page.tsx

@@ -133,7 +133,7 @@ export default {
             },
             {
               title: "Keywords",
-              type: "TagField",
+              type: "TagsField",
               key: "metaKeywords",
             },
             {