fix(links): open external links in new tab

Teradata · Aug 13, 2024 · 956b84b · 956b84b
1 parent 80e5566
commit 956b84b
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 9 deletions.
diff --git a/libs/react-components/src/lib/components/Card/index.tsx b/libs/react-components/src/lib/components/Card/index.tsx
@@ -33,13 +33,18 @@ const Card: React.FC<CardProps> = ({
   imageAltText,
   imageDirection = 'left',
   imageSrc,
-  imageWidth = '35%',
+  imageWidth = '350px',
   title,
 }) => {
   return (
     <div className={`${styles.card} ${styles[imageDirection]}`}>
       {imageSrc && (
-        <div className={styles.cardImage} style={{ flex: `0 0 ${imageWidth}` }}>
+        <div
+          className={styles.cardImage}
+          style={
+            { '--td-web-card-img-width': imageWidth } as React.CSSProperties
+          }
+        >
           <img src={imageSrc} alt={imageAltText} />
         </div>
       )}

diff --git a/libs/react-components/src/lib/components/Card/styles.module.scss b/libs/react-components/src/lib/components/Card/styles.module.scss
@@ -73,7 +73,7 @@
 }
 
 .cardImage {
-  flex: 0 0 350px;
+  flex: 0 0 var(--td-web-card-img-width);
 
   img {
     display: block;

diff --git a/libs/react-components/src/lib/components/Footer/index.tsx b/libs/react-components/src/lib/components/Footer/index.tsx
@@ -96,7 +96,12 @@ export const FooterNavLinkItem: React.FC<FooterNavLink> = ({
 }) => {
   return (
     <li className={styles.footerLinkItem}>
-      <a href={href} className={styles.footerNavLink}>
+      <a
+        href={href}
+        className={styles.footerNavLink}
+        target={external ? '_blank' : '_self'}
+        rel="noreferrer"
+      >
         {label}
         {external && (
           <img

diff --git a/libs/react-components/src/lib/components/Footer/styles.module.scss b/libs/react-components/src/lib/components/Footer/styles.module.scss
@@ -66,7 +66,6 @@
   display: flex;
   flex-wrap: wrap;
   gap: 1rem 0.75rem;
-  padding-top: 1rem;
 }
 
 .legalLinksWrapper {

diff --git a/libs/react-components/src/lib/components/NavItem/index.tsx b/libs/react-components/src/lib/components/NavItem/index.tsx
@@ -53,6 +53,7 @@ const NavItem: React.FC<NavItemProps> = ({
   href,
   nestedNavItems = [],
   label,
+  external,
   onClick,
   onMenuChange,
 }) => {
@@ -120,7 +121,8 @@ const NavItem: React.FC<NavItemProps> = ({
                   >
                     <a
                       href={item.href}
-                      target="_self"
+                      target={item.external ? '_blank' : '_self'}
+                      rel="noreferrer"
                       className={`${item.external ? styles.externalLink : ''} ${
                         item.active ? styles.active : ''
                       }`}
@@ -143,7 +145,8 @@ const NavItem: React.FC<NavItemProps> = ({
       ) : (
         <a
           href={href}
-          target="_self" // TODO: remove this
+          target={external ? '_blank' : '_self'}
+          rel="noreferrer"
           className={`${styles.navItemLink} ${active ? styles.active : ''}`}
           onClick={handleClick}
         >

diff --git a/package.json b/package.json
@@ -3,10 +3,11 @@
   "version": "1.9.0",
   "license": "MIT",
   "scripts": {
-    "semantic-release": "semantic-release --branches main",
     "build-storybook": "nx run react-components:build-storybook",
     "format:check": "nx format",
-    "release:prepare": "npx nx run-many --target=build --all && node ./scripts/version-placeholder ./dist"
+    "release:prepare": "npx nx run-many --target=build --all && node ./scripts/version-placeholder ./dist",
+    "semantic-release": "semantic-release --branches main",
+    "storybook": "nx run react-components:storybook"
   },
   "dependencies": {
     "react": "18.3.1",