Merge pull request #1482 from basedosdados/feat/bdpro-lp

feat: implement forwardRef for text components, update Next.js Link usage

Author: AldemirLucas

next/components/atoms/Text/BodyText.js

@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Text } from "@chakra-ui/react";
 
 const typographyStyles = {
@@ -15,11 +16,12 @@ const typographyStyles = {
   },
 };
 
-export default function BodyText ({ children, typography = "medium", ...props }) {
+const BodyText = forwardRef(({ children, typography = "medium", ...props }, ref) => {
   const { fontSize, lineHeight } = typographyStyles[typography];
 
   return (
     <Text
+      ref={ref}
       fontFamily="Roboto"
       fontWeight="400"
       fontSize={fontSize}
@@ -30,4 +32,6 @@ export default function BodyText ({ children, typography = "medium", ...props })
       {children}
     </Text>
   );
-};
+});
+
+export default BodyText;

next/components/atoms/Text/Display.js

@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Text } from "@chakra-ui/react";
 
 const typographyStyles = {
@@ -15,11 +16,12 @@ const typographyStyles = {
   },
 };
 
-export default function Display ({ children, typography = "medium", ...props }) {
+const Display = forwardRef(({ children, typography = "medium", ...props }, ref) => {
   const { fontSize, lineHeight } = typographyStyles[typography];
 
   return (
     <Text
+      ref={ref}
       fontFamily="Roboto"
       fontWeight="500"
       fontSize={fontSize}
@@ -30,4 +32,6 @@ export default function Display ({ children, typography = "medium", ...props })
       {children}
     </Text>
   );
-};
+});
+
+export default Display;

next/components/atoms/Text/LabelText.js

@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Text } from "@chakra-ui/react";
 
 const typographyStyles = {
@@ -23,11 +24,12 @@ const typographyStyles = {
   }
 };
 
-export default function LabelText ({ children, typography = "medium", ...props }) {
+const LabelText = forwardRef(({ children, typography = "medium", ...props }, ref) => {
   const { fontSize, lineHeight } = typographyStyles[typography];
 
   return (
     <Text
+      ref={ref}
       fontFamily="Roboto"
       fontWeight="500"
       fontSize={fontSize}
@@ -38,4 +40,6 @@ export default function LabelText ({ children, typography = "medium", ...props }
       {children}
     </Text>
   );
-};
+});
+
+export default LabelText;

next/components/atoms/Text/TitleText.js

@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Text } from "@chakra-ui/react";
 
 const typographyStyles = {
@@ -15,11 +16,12 @@ const typographyStyles = {
   }
 };
 
-export default function TitleText ({ children, typography = "medium", ...props }) {
+const TitleText = forwardRef(({ children, typography = "medium", ...props }, ref) => {
   const { fontSize, lineHeight } = typographyStyles[typography];
 
   return (
     <Text
+      ref={ref}
       fontFamily="Roboto"
       fontWeight="500"
       fontSize={fontSize}
@@ -30,4 +32,6 @@ export default function TitleText ({ children, typography = "medium", ...props }
       {children}
     </Text>
   );
-};
+});
+
+export default TitleText;

next/pages/prices.js

@@ -204,11 +204,11 @@ export const CardPrice = ({
           ) : (
             <Link
               href={button.href || '#'}
-              width="100%"
-              style={{ textDecoration: 'none' }}
+              passHref
             >
               <Box
                 id={button?.id}
+                as="a"
                 display="flex"
                 alignItems="center"
                 justifyContent="center"