@griddo/ax 10.2.10 → 10.2.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.2.10",
+  "version": "10.2.12",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -231,5 +231,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4f8dec9928d74145e37a1593b531364b8235dfaf"
+  "gitHead": "7985f1e2650c017b4fd9873cf942bae0fd1e2670"
 }

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

@@ -293,7 +293,7 @@ describe("UrlField component rendering", () => {
     const selectComponents = screen.getAllByTestId("select-component");
 
     await act(async () => {
-      selectComponents[3].click();
+      selectComponents[2].click();
     });
 
     expect(selectComponents).toBeTruthy();

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

@@ -23,6 +23,8 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
     filter,
     options,
     source,
+    type,
+    maxWidth,
   } = props;
 
   const initialState: { items: IOption[]; hasEmptyOption: boolean } = {
@@ -110,16 +112,14 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 
   // tslint:disable-next-line: no-shadowed-variable
   const getObjectValue = (val: any, options: IOption[]) => {
-    if (!val) {
-      return null;
-    }
     const fixedVal = Array.isArray(val) ? val[0] : val;
-    const selectedValue = typeof fixedVal === "object" ? fixedVal.id : fixedVal;
+    const selectedValue = fixedVal && typeof fixedVal === "object" ? fixedVal.id : fixedVal;
 
     return options && options.find((option: IOption) => option.value === selectedValue);
   };
 
-  const className = error ? "react-select-error" : "";
+  const className = error ? `react-select-error ${type}` : type;
+  const searchable = type === "inline" ? false : true;
 
   return (
     <div data-testid="asyncSelect">
@@ -137,6 +137,8 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
         className={className}
         mandatory={mandatory}
         hasEmptyOption={state.hasEmptyOption}
+        isSearchable={searchable}
+        maxWidth={maxWidth}
       />
     </div>
   );
@@ -160,14 +162,16 @@ export interface IAsyncSelectProps {
   error?: boolean;
   disabled?: boolean;
   onChange: (value: string | number | null) => void;
-  site: ISite | null;
-  lang: string;
-  selectedContent: any;
+  site?: ISite | null;
+  lang?: string;
+  selectedContent?: any;
   mandatory?: boolean;
   placeholder?: string;
   filter?: any[];
   options?: any[];
   source?: string;
+  type?: string;
+  maxWidth?: number;
 }
 
 export default AsyncSelect;

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

@@ -1,7 +1,11 @@
 import styled, { css } from "styled-components";
 import AsyncSelect from "react-select/async";
 
-export const StyledSelect = styled(AsyncSelect)<{ isDisabled: boolean | undefined; error: boolean | undefined }>`
+export const StyledSelect = styled(AsyncSelect)<{
+  isDisabled: boolean | undefined;
+  error: boolean | undefined;
+  maxWidth?: number;
+}>`
   ${(p) => p.theme.textStyle.fieldContent};
   color: ${(p) => p.theme.color.textHighEmphasis};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
@@ -90,4 +94,57 @@ export const StyledSelect = styled(AsyncSelect)<{ isDisabled: boolean | undefine
       }
     }
   }
+
+  &.inline {
+    ${(p) => p.theme.textStyle.uiS};
+    text-transform: capitalize;
+
+    .react-select__control {
+      background: transparent;
+      border: none;
+      height: auto;
+      justify-content: ${(p) => (p.alignRight ? "flex-end" : "flex-start")};
+      min-width: auto;
+
+      .react-select__value-container {
+        flex: 0 1 auto;
+        padding: 0;
+        .react-select__single-value {
+          position: relative;
+          transform: none;
+          color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.interactive01)};
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          max-width: ${(p) => (p.maxWidth ? `${p.maxWidth}px` : `calc(${p.theme.spacing.xl} * 4)`)};
+          display: block;
+          overflow: hidden;
+        }
+      }
+      .react-select__indicator {
+        color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.interactive01)};
+        padding: 0;
+        svg {
+          width: ${(p) => p.theme.spacing.s};
+          height: ${(p) => p.theme.spacing.s};
+        }
+      }
+      .react-select__input {
+        input {
+          cursor: default;
+        }
+      }
+    }
+
+    .react-select__control--is-disabled {
+      .react-select__value-container {
+        .react-select__single-value {
+          color: ${(p) => p.theme.color.interactiveDisabled};
+        }
+      }
+    }
+
+    .react-select__menu {
+      ${(p) => p.theme.textStyle.fieldContent};
+    }
+  }
 `;

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

@@ -5,7 +5,19 @@ import Icon from "@ax/components/Icon";
 import * as S from "./style";
 
 const CheckField = (props: ICheckFieldProps): JSX.Element => {
-  const { name, title, value, checked, error, disabled, indeterminate, onChange, icon, inversed = false } = props;
+  const {
+    name,
+    title,
+    value,
+    checked,
+    error,
+    disabled,
+    indeterminate,
+    onChange,
+    icon,
+    className,
+    inversed = false,
+  } = props;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const isChecked = e.target.checked;
@@ -15,7 +27,7 @@ const CheckField = (props: ICheckFieldProps): JSX.Element => {
   };
 
   return (
-    <S.Wrapper>
+    <S.Wrapper className={className}>
       <S.Label data-testid="check-field-label" disabled={disabled} inversed={inversed}>
         {icon ? (
           <S.IconLabelWrapper data-testid="check-field-icon-label">
@@ -60,6 +72,7 @@ export interface ICheckFieldProps {
   onChange?: (value: ICheck) => void;
   icon?: string;
   inversed?: boolean;
+  className?: string;
 }
 
 export default CheckField;

package/src/components/Fields/IntegrationsField/IntegrationItem/CustomPanel/index.tsx

@@ -40,53 +40,55 @@ const CustomPanel = (props: IProps): JSX.Element => {
 
   return (
     <FloatingPanel title="Add custom code" toggleModal={toggleModal} isOpen={isOpen}>
-      <S.ContentWrapper>
-        <S.NoteWrapper>
-          <NoteField value={{ text: noteText }} />
-        </S.NoteWrapper>
-        <FieldsBehavior
-          title="Name"
-          name="name"
-          fieldType="TextField"
-          value={form.name}
-          placeholder="Type a name"
-          onChange={(value: string) => handleChange({ name: value })}
-          mandatory
-          validators={{ mandatory: true }}
-        />
-        <FieldsBehavior
-          title="Head Code"
-          name="contentHead"
-          fieldType="TextArea"
-          value={form.contentHead}
-          placeholder="Enter the code that will be injected into the head’s page."
-          onChange={(value: string) => handleChange({ contentHead: value })}
-          rows={4}
-        />
-        <FieldsBehavior
-          title="Body Code"
-          name="contentBody"
-          fieldType="TextArea"
-          value={form.contentBody}
-          placeholder="Enter the code that will be injected into the body’s page."
-          onChange={(value: string) => handleChange({ contentBody: value })}
-          rows={4}
-        />
-        <FieldsBehavior
-          title="Page body code in:"
-          name="contentBodyPosition"
-          fieldType="RadioGroup"
-          value={form.contentBodyPosition}
-          options={bodyCodeOptions}
-          onChange={(value: string) => handleChange({ contentBodyPosition: value })}
-          disabled={!form.contentBody?.length}
-        />
-      </S.ContentWrapper>
-      <S.Footer>
-        <Button className="button" type="button" onClick={editButton.action} disabled={!form.name?.length}>
-          {editButton.label}
-        </Button>
-      </S.Footer>
+      <S.Wrapper>
+        <S.ContentWrapper>
+          <S.NoteWrapper>
+            <NoteField value={{ text: noteText }} />
+          </S.NoteWrapper>
+          <FieldsBehavior
+            title="Name"
+            name="name"
+            fieldType="TextField"
+            value={form.name}
+            placeholder="Type a name"
+            onChange={(value: string) => handleChange({ name: value })}
+            mandatory
+            validators={{ mandatory: true }}
+          />
+          <FieldsBehavior
+            title="Head Code"
+            name="contentHead"
+            fieldType="TextArea"
+            value={form.contentHead}
+            placeholder="Enter the code that will be injected into the head’s page."
+            onChange={(value: string) => handleChange({ contentHead: value })}
+            rows={4}
+          />
+          <FieldsBehavior
+            title="Body Code"
+            name="contentBody"
+            fieldType="TextArea"
+            value={form.contentBody}
+            placeholder="Enter the code that will be injected into the body’s page."
+            onChange={(value: string) => handleChange({ contentBody: value })}
+            rows={4}
+          />
+          <FieldsBehavior
+            title="Page body code in:"
+            name="contentBodyPosition"
+            fieldType="RadioGroup"
+            value={form.contentBodyPosition}
+            options={bodyCodeOptions}
+            onChange={(value: string) => handleChange({ contentBodyPosition: value })}
+            disabled={!form.contentBody?.length}
+          />
+        </S.ContentWrapper>
+        <S.Footer>
+          <Button className="button" type="button" onClick={editButton.action} disabled={!form.name?.length}>
+            {editButton.label}
+          </Button>
+        </S.Footer>
+      </S.Wrapper>
     </FloatingPanel>
   );
 };

package/src/components/Fields/IntegrationsField/IntegrationItem/CustomPanel/style.tsx

@@ -1,5 +1,10 @@
 import styled from "styled-components";
 
+const Wrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+`;
+
 const Footer = styled.div`
   position: absolute;
   bottom: ${(p) => p.theme.spacing.m};
@@ -20,4 +25,4 @@ const ContentWrapper = styled.div`
   padding: 0 ${(p) => p.theme.spacing.m} ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.m};
 `;
 
-export { Footer, NoteWrapper, ContentWrapper };
+export { Wrapper, Footer, NoteWrapper, ContentWrapper };

package/src/components/Fields/IntegrationsField/IntegrationItem/VariablesPanel/index.tsx

@@ -94,17 +94,19 @@ const VariablesPanel = (props: IProps): JSX.Element => {
 
   return (
     <FloatingPanel title="Define values" toggleModal={toggleModal} isOpen={isOpen}>
-      <S.ContentWrapper>
-        <S.NoteWrapper>
-          <NoteField value={{ text: noteText }} />
-        </S.NoteWrapper>
-        {renderVariables()}
-      </S.ContentWrapper>
-      <S.Footer>
-        <Button className="button" type="button" onClick={editButton.action}>
-          {editButton.label}
-        </Button>
-      </S.Footer>
+      <S.Wrapper>
+        <S.ContentWrapper>
+          <S.NoteWrapper>
+            <NoteField value={{ text: noteText }} />
+          </S.NoteWrapper>
+          {renderVariables()}
+        </S.ContentWrapper>
+        <S.Footer>
+          <Button className="button" type="button" onClick={editButton.action}>
+            {editButton.label}
+          </Button>
+        </S.Footer>
+      </S.Wrapper>
     </FloatingPanel>
   );
 };

package/src/components/Fields/IntegrationsField/IntegrationItem/VariablesPanel/style.tsx

@@ -1,5 +1,10 @@
 import styled from "styled-components";
 
+const Wrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+`;
+
 const Footer = styled.div`
   position: absolute;
   bottom: ${(p) => p.theme.spacing.m};
@@ -8,9 +13,7 @@ const Footer = styled.div`
 
 const NoteWrapper = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.m};
-
 `
-
 const ContentWrapper = styled.div`
   height: calc(100% - ${(p) => p.theme.spacing.s} * 10);
   overflow-y: scroll;
@@ -20,4 +23,4 @@ const ContentWrapper = styled.div`
   padding: 0 ${(p) => p.theme.spacing.m} ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.m};
 `;
 
-export { Footer, NoteWrapper, ContentWrapper };
+export { Wrapper, Footer, NoteWrapper, ContentWrapper };

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

@@ -55,6 +55,7 @@ const DropDown = styled.div<{ floating?: boolean; isOpen: boolean }>`
   z-index: 2;
   height: ${(p) => (p.isOpen ? "100%" : 0)};
   max-height: 130px;
+  min-height: 100px;
   overflow: ${(p) => (p.isOpen ? "auto" : "hidden")};
   position: ${(p) => (p.floating ? "absolute" : "block")};
 `;