mitre-form-component 0.0.23 → 0.0.25

package/dist/index.cjs

@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  default: () => index_default
+  MitreFormComponent: () => Form_default
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -84,6 +84,10 @@ var FormContainer = import_styled_components.default.div`
   overflow-x: hidden;
   overflow-y: auto;
 
+  background: ${(props) => props.$backgroundColor || " #cecece"};
+
+  padding: ${(props) => props.$innerPadding || "1rem"};
+
   /* Hide scrollbars for WebKit browsers */
   ::-webkit-scrollbar {
     display: none;
@@ -121,6 +125,7 @@ var Form = import_styled_components.default.form`
     font-style: italic;
     font-weight: 200;
     font-size: 0.8rem;
+    color: ${(props) => props.$textColor || "var(--black)"};
     text-align: start;
   }
 
@@ -129,11 +134,13 @@ var Form = import_styled_components.default.form`
     font-style: italic;
     font-weight: 200;
     font-size: 0.8rem;
+    color: ${(props) => props.$textColor || "var(--black)"};
   }
 
   h6 {
     text-align: start;
     margin-left: 10px;
+    color: ${(props) => props.$textColor || "var(--black)"};
   }
 
   & > div {
@@ -156,6 +163,7 @@ var Title = import_styled_components.default.h2`
   font-weight: 700;
   line-height: 24px;
   letter-spacing: 0em;
+  color: ${(props) => props.$textColor || "var(--black)"};
 `;
 var Text = import_styled_components.default.p`
   font-size: 1rem;
@@ -163,6 +171,7 @@ var Text = import_styled_components.default.p`
   line-height: 23px;
   letter-spacing: 0em;
   margin-top: 10px;
+  color: ${(props) => props.$textColor || "var(--black)"};
 `;
 
 // src/components/styles/global.ts
@@ -616,21 +625,176 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
 };
 var Input2 = (0, import_react3.forwardRef)(InputBase);
 
+// src/components/Button/styles.ts
+var import_polished = require("polished");
+var import_styled_components4 = __toESM(require("styled-components"), 1);
+var Icon = import_styled_components4.default.span`
+  font-size: 0;
+  line-height: 0;
+  transition: all 0.25s ease;
+
+  transform: translate3d(-30px, 0px, 0px);
+  visibility: hidden;
+  opacity: 0;
+  margin-right: 0.625rem;
+`;
+var Text2 = import_styled_components4.default.span`
+  font-family: "Montserrat", sans-serif;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin-bottom: -2px;
+
+  transition: all 0.25s ease;
+`;
+var TextSubmitting = import_styled_components4.default.span`
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+
+  transition: all 0.25s ease;
+`;
+var LoadingIcon = import_styled_components4.default.span.withConfig({
+  shouldForwardProp: (prop) => prop !== "hasText"
+})`
+  display: block;
+
+  width: 1rem;
+  height: 1rem;
+  border: 0.125rem solid var(--white);
+  border-radius: 50%;
+  animation: loadingAnimation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: var(--white) transparent transparent transparent;
+
+  margin-right: ${(props) => props.hasText ? "0.625rem" : "0"};
+
+  @keyframes loadingAnimation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+var Button = import_styled_components4.default.button.withConfig({
+  shouldForwardProp: (prop) => ![
+    "hasIcon",
+    "isSubmitting",
+    "hasSubmittingMessage",
+    "bgColor",
+    "bordercolor",
+    "color",
+    "height"
+  ].includes(prop)
+})`
+  background: ${(props) => (0, import_polished.darken)(0.1, props?.bgColor || "#F6C76B")};
+  color: ${(props) => props?.color || "#2F2F2F"};
+  border: 1px solid ${(props) => (0, import_polished.darken)(0.1, props?.bordercolor || "#F6C76B")};
+  border-radius: 2px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.75rem;
+  height: ${(props) => props?.height || "3.125rem"};
+  position: relative;
+  font-size: 0;
+  line-height: 0;
+
+  transition: all 0.25s;
+
+  ${Icon} {
+    display: ${(props) => props?.hasIcon ? "block" : ""};
+  }
+
+  ${Text2} {
+    transform: ${(props) => props?.hasIcon ? "translate3d(-4.5px, 0px, 0px)" : "unset"};
+
+    @media print, screen and (min-width: 40em) {
+      transform: ${(props) => props?.hasIcon ? "translate3d(-14.5px, 0px, 0px)" : "unset"};
+    }
+
+    color: ${(props) => props?.color || "#2F2F2F"};
+  }
+
+  &:hover {
+    background: ${(props) => (0, import_polished.darken)(0.2, props?.bgColor || "#F6C76B")};
+    border-color: ${(props) => (0, import_polished.darken)(0.2, props?.bordercolor || "#F6C76B")};
+
+    ${Icon} {
+      opacity: 1;
+      visibility: visible;
+      transform: translate3d(0px, 0px, 0px);
+    }
+
+    ${Text2} {
+      transform: ${(props) => props?.hasIcon ? "translate3d(-5px, 0px, 0px)" : "unset"};
+    }
+  }
+
+  ${Text2} {
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components4.css`
+        transform: unset;
+        opacity: 0;
+      `}
+  }
+
+  ${LoadingIcon} {
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components4.css`
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+        position: absolute;
+      `}
+  }
+`;
+
+// src/components/Button/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Button2({
+  children,
+  icon,
+  isSubmitting = false,
+  submittingMessage = "",
+  disabled = false,
+  color = "#2F2F2F",
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    Button,
+    {
+      isSubmitting,
+      hasSubmittingMessage: submittingMessage.length > 0,
+      disabled: isSubmitting || disabled,
+      "aria-disabled": isSubmitting || disabled,
+      hasIcon: !!icon,
+      color,
+      ...rest,
+      children: [
+        icon && !isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { "data-testid": "button-icon", children: icon }),
+        isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingIcon, { hasText: submittingMessage.length > 0 }),
+        (!isSubmitting || submittingMessage.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text2, { className: "text", children }),
+        isSubmitting && submittingMessage.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextSubmitting, { children: submittingMessage })
+      ]
+    }
+  );
+}
+
 // src/components/Alert/index.tsx
 var import_react4 = require("react");
 
 // src/components/Alert/styles.ts
-var import_styled_components4 = __toESM(require("styled-components"), 1);
-var fadeIn = import_styled_components4.keyframes`
+var import_styled_components5 = __toESM(require("styled-components"), 1);
+var fadeIn = import_styled_components5.keyframes`
   from { opacity: 0; transform: translateY(-10px); }
   to { opacity: 1; transform: translateY(0); }
 `;
-var fadeOut = import_styled_components4.keyframes`
+var fadeOut = import_styled_components5.keyframes`
   from { opacity: 1; transform: translateY(0); }
   to { opacity: 0; transform: translateY(-10px); }
 `;
 var typeStyles = {
-  error: import_styled_components4.css`
+  error: import_styled_components5.css`
     background-color: var(--red);
     border: 1px solid var(--red);
     color: var(--white);
@@ -638,7 +802,7 @@ var typeStyles = {
       color: var(--white);
     }
   `,
-  warning: import_styled_components4.css`
+  warning: import_styled_components5.css`
     background-color: var(--yellow-500);
     border: 1px solid var(--yellow-400);
     color: var(--black);
@@ -646,7 +810,7 @@ var typeStyles = {
       color: var(--black);
     }
   `,
-  info: import_styled_components4.css`
+  info: import_styled_components5.css`
     background-color: var(--blue);
     border: 1px solid var(--blue);
     color: var(--white);
@@ -654,7 +818,7 @@ var typeStyles = {
       color: var(--white);
     }
   `,
-  success: import_styled_components4.css`
+  success: import_styled_components5.css`
     background-color: var(--green);
     border: 1px solid var(--green-2);
     color: var(--white);
@@ -663,7 +827,7 @@ var typeStyles = {
     }
   `
 };
-var AlertContainer = import_styled_components4.default.div`
+var AlertContainer = import_styled_components5.default.div`
   position: fixed;
   width: 500px;
   top: 15px;
@@ -683,7 +847,7 @@ var AlertContainer = import_styled_components4.default.div`
 
   ${({ $type }) => typeStyles[$type]}
 `;
-var DismissButton = import_styled_components4.default.button`
+var DismissButton = import_styled_components5.default.button`
   position: absolute;
   background: transparent;
   right: 10px;
@@ -705,7 +869,7 @@ var DismissButton = import_styled_components4.default.button`
 
 // src/components/Alert/index.tsx
 var import_hi = require("react-icons/hi");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Alert = ({
   type = "info",
   children,
@@ -725,7 +889,7 @@ var Alert = ({
       return () => clearTimeout(timer);
     }
   }, [autoDismiss, handleDismiss]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     AlertContainer,
     {
       $type: type,
@@ -735,12 +899,12 @@ var Alert = ({
       role: "alert",
       children: [
         children,
-        dismissible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        dismissible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           DismissButton,
           {
             onClick: handleDismiss,
             "aria-label": "Dismiss alert",
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_hi.HiX, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hi.HiX, {})
           }
         )
       ]
@@ -749,7 +913,7 @@ var Alert = ({
 };
 
 // src/components/Form/index.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var schema = yup.object().shape({
   name: yup.string().required("Nome \xE9 obrigat\xF3rio"),
   email: yup.string().required("Email \xE9 obrigat\xF3rio").email("Email inv\xE1lido"),
@@ -820,10 +984,10 @@ var MitreFormComponent = import_react5.default.forwardRef(({
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(global_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlobalStyles, {}),
-    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(global_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GlobalStyles, {}),
+    error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Alert,
       {
         type: "error",
@@ -833,7 +997,7 @@ var MitreFormComponent = import_react5.default.forwardRef(({
         children: error.message
       }
     ),
-    successMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    successMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Alert,
       {
         type: "success",
@@ -843,66 +1007,69 @@ var MitreFormComponent = import_react5.default.forwardRef(({
         children: successMessage
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(FormContainer, { ref, children: [
-      showHeader && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(HeaderContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Title, { children: "Atendimento por mensagem" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { children: "Informe seus dados e retornaremos a mensagem." })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(HeaderContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        Input2,
-        {
-          id: "name",
-          label: "Nome *",
-          placeholder: "Digite seu nome",
-          ...register("name"),
-          borderColor: colorPrimary,
-          textColor,
-          error: errors.name?.message,
-          autoComplete: "name",
-          required: true
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        Input2,
-        {
-          id: "email",
-          label: "Email *",
-          type: "email",
-          placeholder: "exemplo@email.com",
-          ...register("email"),
-          borderColor: colorPrimary,
-          textColor,
-          error: errors.email?.message,
-          autoComplete: "email",
-          required: true
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonContainer, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { children: [
-        "A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contat\xE1-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa",
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "a",
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Input2,
+          {
+            id: "name",
+            label: "Nome *",
+            placeholder: "Digite seu nome",
+            ...register("name"),
+            borderColor: colorPrimary,
+            textColor,
+            error: errors.name?.message,
+            autoComplete: "name",
+            required: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Input2,
           {
-            href: "https://www.mitrerealty.com.br/politica-de-privacidade",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            children: "Pol\xEDtica de Privacidade"
+            id: "email",
+            label: "Email *",
+            type: "email",
+            placeholder: "exemplo@email.com",
+            ...register("email"),
+            borderColor: colorPrimary,
+            textColor,
+            error: errors.email?.message,
+            autoComplete: "email",
+            required: true
           }
         ),
-        ". Ao clicar em ",
-        '"',
-        "enviar",
-        '"',
-        ", voc\xEA concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por voc\xEA para finalidade informada"
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button2, { bgColor: colorPrimary, color: textColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { children: [
+          "A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contat\xE1-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "a",
+            {
+              href: "https://www.mitrerealty.com.br/politica-de-privacidade",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: "Pol\xEDtica de Privacidade"
+            }
+          ),
+          ". Ao clicar em ",
+          '"',
+          "enviar",
+          '"',
+          ", voc\xEA concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por voc\xEA para finalidade informada"
+        ] })
       ] })
     ] })
   ] });
 });
 MitreFormComponent.displayName = "MitreFormComponent";
 var Form_default = MitreFormComponent;
-
-// src/index.ts
-var index_default = Form_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MitreFormComponent
+});
 //# sourceMappingURL=index.cjs.map