Merge pull request #79 from BouyguesTelecom/update/link-native

Update/link native
BouyguesTelecom · Jun 20, 2024 · 6b167ca · 6b167ca
2 parents f9975e0 + 1826b31
commit 6b167ca
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 84 deletions.
diff --git a/packages/react/components/link/Link.native.tsx b/packages/react/components/link/Link.native.tsx
@@ -10,6 +10,7 @@ import { ComponentName } from "../enumsComponentsName"
 
 /**
  * Link Component
+ * @param plain {boolean} Link without underline
  * @param to {string} Url to open
  * @param title {string} Title attribute
  * @param typo {TypographyAlign} Typos align link
@@ -33,10 +34,9 @@ const Link = ({
   level,
   iconName,
   inverted,
+  style,
   ...others
 }: LinkProps): JSX.Element => {
-  const [underlineWidth, setUnderlineWidth] = React.useState(0);
-
   const linkLevels = (level: TextLevels) => {
     return (
       (level && level == "ONE" && 16) ||
@@ -110,15 +110,19 @@ const Link = ({
         (inverted && getColorStyle(TrilogyColor.BACKGROUND)) ||
         getColorStyle(TrilogyColor.MAIN),
       fontSize: inline && level ? linkLevels(level) : 14,
-      lineHeight: inline && level ? linkLevels(level) * 1.5 : 14
+      lineHeight: inline && level ? linkLevels(level) * 1.5 : 14,
+      textDecorationStyle: "solid",
+      textDecorationLine: "underline",
     },
     androidLink: {
       color:
         (inverted && getColorStyle(TrilogyColor.BACKGROUND)) ||
         getColorStyle(TrilogyColor.MAIN),
       fontSize: inline && level ? linkLevels(level) : 14,
       lineHeight: inline && level ? linkLevels(level) * 1.5 : 14,
-      height: inline && level ? getHeightLinkAndroid(level) : "auto"
+      height: inline && level ? getHeightLinkAndroid(level) : "auto",
+      textDecorationStyle: "solid",
+      textDecorationLine: "underline",
     },
     iconView: {
       flexDirection: "row",
@@ -143,90 +147,72 @@ const Link = ({
     : "NotSpecified"
 
   return (
-    <View style={{ height: 21 }}>
-      <View
-        style={
-          Platform.OS === "android"
-            ? [styles.linkAlignement, styles.androidContainer]
-            : [styles.linkAlignement, styles.container]
-        }
-        accessible={!!linkAccessibilityLabel}
-        accessibilityLabel={linkAccessibilityLabel}
-        testID={linkTestId}
-      >
-        {children && typeof children.valueOf() === "string" ? (
-          <TouchableOpacity
-            activeOpacity={0.8}
-            onPress={(e) => {
-              if (to) {
-                Linking.openURL(to || "")
-              }
-              if (onClick) {
-                onClick(e)
-              }
-            }}
-          >
-            {iconName ? (
-              <View style={styles.iconView}>
-                <Text
-                  onLayout={(event) => {
-                    const { width } = event.nativeEvent.layout;
-                    setUnderlineWidth(width);
-                  }}
-                  accessibilityLabel={title || ""}
-                  style={styles.link}
-                  {...others}
-                >
-                  {children}
-                </Text>
-                <Spacer size={SpacerSize.SMALLER} horizontal />
-                <Icon
-                  color={"TERTIARY"}
-                  name={iconName}
-                  style={styles.icon}
-                  size='small'
-                />
-              </View>
-            ) : (
+    <View
+      style={
+        Platform.OS === "android"
+          ? [styles.linkAlignement, styles.androidContainer]
+          : [styles.linkAlignement, styles.container]
+      }
+      accessible={!!linkAccessibilityLabel}
+      accessibilityLabel={linkAccessibilityLabel}
+      testID={linkTestId}
+    >
+      {children && typeof children.valueOf() === "string" ? (
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={(e) => {
+            if (to) {
+              Linking.openURL(to || "")
+            }
+            if (onClick) {
+              onClick(e)
+            }
+          }}
+        >
+          {iconName ? (
+            <View style={styles.iconView}>
               <Text
-                onLayout={(event) => {
-                  const { width } = event.nativeEvent.layout;
-                  setUnderlineWidth(width);
-                }}
                 accessibilityLabel={title || ""}
-                style={
-                  Platform.OS === "android" ? styles.androidLink : styles.link
-                }
+                style={[styles.link, style]}
                 {...others}
               >
                 {children}
               </Text>
-            )}
-          </TouchableOpacity>
-        ) : (
-          <TouchableOpacity
-            activeOpacity={0.8}
-            onPress={(e) => {
-              if (to) {
-                Linking.openURL(to || "")
-              }
-              if (onClick) {
-                onClick(e)
+              <Spacer size={SpacerSize.SMALLER} horizontal />
+              <Icon
+                color={"TERTIARY"}
+                name={iconName}
+                style={styles.icon}
+                size='small'
+              />
+            </View>
+          ) : (
+            <Text
+              accessibilityLabel={title || ""}
+              style={
+                Platform.OS === "android" ? [styles.androidLink, style] : [styles.link, style]
               }
-            }}
-          >
-            {children}
-          </TouchableOpacity>
-        )}
-      </View>
-      <View
-        style={{
-          height: 2,
-          backgroundColor: getColorStyle(TrilogyColor.MAIN),
-          width: underlineWidth,
-          marginTop: 2,
-        }}
-      />
+              {...others}
+            >
+              {children}
+            </Text>
+          )}
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={(e) => {
+            if (to) {
+              Linking.openURL(to || "")
+            }
+            if (onClick) {
+              onClick(e)
+            }
+          }}
+        >
+          {children}
+        </TouchableOpacity>
+      )}
     </View>
   )
 }

diff --git a/packages/react/components/link/LinkProps.ts b/packages/react/components/link/LinkProps.ts
@@ -2,6 +2,7 @@ import { Accessibility, Clickable } from '../../objects/facets'
 import { TypographyAlign, TypographyAlignValues } from '../../objects/Typography/TypographyAlign'
 import { IconName, IconNameValues } from '../icon'
 import { TextLevels } from '../text'
+import { Styles } from "../../types";
 
 /**
  * Link Interface
@@ -21,4 +22,5 @@ export interface LinkProps extends Accessibility, Clickable {
   inverted?: boolean
   plain?: boolean
   blank?: boolean
+  style?: Styles
 }
diff --git a/packages/react/components/price/PriceProps.ts b/packages/react/components/price/PriceProps.ts
@@ -1,9 +1,7 @@
 import { PriceLevel, PriceLevelValues } from "./PriceEnum"
 import { Invertable } from "../../objects/facets/Invertable"
 import { Accessibility, AlertProps, AlignableProps } from "../../objects"
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Styles = { [key: string]: any }
+import { Styles } from "../../types";
 
 /**
  * Price Interface

diff --git a/packages/react/types/index.ts b/packages/react/types/index.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Styles = { [key: string]: any }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// eslint-disable-next-line @typescript-eslint/no-explicit-any
		export type Styles = { [key: string]: any }