@thecb/components 7.1.3-beta.1 → 7.1.3-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.1.3-beta.1",
+  "version": "7.1.3-beta.3",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/link/ExternalLink.d.ts

@@ -15,5 +15,4 @@ export interface ExternalLinkProps {
 }
 
 export const ExternalLink: React.FC<Expand<ExternalLinkProps> &
-  React.HTMLAttributes<HTMLElement> &
-  React.Ref<HTMLLinkElement>>;
+  React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLLinkElement> }>;

package/src/components/atoms/link/ExternalLink.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, forwardRef } from "react";
 import { ThemeContext } from "styled-components";
 import { fallbackValues } from "./Link.theme";
 import { createThemeValues } from "../../../util/themeUtils";
@@ -6,51 +6,53 @@ import { StyledExternalLink } from "./ExternalLink.styled";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { safeChildren } from "../../../util/general";
 
-const ExternalLink = (
-  {
-    href = "",
-    newTab = false,
-    size = "1rem",
-    lineHeight = "1.5rem",
-    weight = FONT_WEIGHT_REGULAR,
-    extraStyles = ``,
-    variant = "primary",
-    tabIndex = "0",
-    dataQa,
-    ariaLabel,
-    children
-  },
-  ref
-) => {
-  const themeContext = useContext(ThemeContext);
-  const themeValues = createThemeValues(
-    themeContext,
-    fallbackValues,
-    "Link",
-    variant
-  );
+const ExternalLink = forwardRef(
+  (
+    {
+      href = "",
+      newTab = false,
+      size = "1rem",
+      lineHeight = "1.5rem",
+      weight = FONT_WEIGHT_REGULAR,
+      extraStyles = ``,
+      variant = "primary",
+      tabIndex = "0",
+      dataQa,
+      ariaLabel,
+      children
+    },
+    ref
+  ) => {
+    const themeContext = useContext(ThemeContext);
+    const themeValues = createThemeValues(
+      themeContext,
+      fallbackValues,
+      "Link",
+      variant
+    );
 
-  return (
-    <StyledExternalLink
-      href={href}
-      target={newTab ? "_blank" : ""}
-      color={themeValues.externalLinkColor}
-      size={size}
-      lineheight={lineHeight}
-      weight={weight}
-      hovercolor={themeValues.hoverColor}
-      activeColor={themeValues.activeColor}
-      fontFamily={themeValues.fontFamily}
-      tabIndex={tabIndex}
-      extrastyles={extraStyles}
-      rel={newTab ? "noopener" : ""}
-      data-qa={dataQa}
-      aria-label={ariaLabel}
-      ref={ref}
-    >
-      {safeChildren(children, <span />)}
-    </StyledExternalLink>
-  );
-};
+    return (
+      <StyledExternalLink
+        href={href}
+        target={newTab ? "_blank" : ""}
+        color={themeValues.externalLinkColor}
+        size={size}
+        lineheight={lineHeight}
+        weight={weight}
+        hovercolor={themeValues.hoverColor}
+        activeColor={themeValues.activeColor}
+        fontFamily={themeValues.fontFamily}
+        tabIndex={tabIndex}
+        extrastyles={extraStyles}
+        rel={newTab ? "noopener" : ""}
+        data-qa={dataQa}
+        aria-label={ariaLabel}
+        ref={ref}
+      >
+        {safeChildren(children, <span />)}
+      </StyledExternalLink>
+    );
+  }
+);
 
 export default ExternalLink;

package/src/components/atoms/link/ExternalLink.styled.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import styled from "styled-components";
 import { ROYAL_BLUE } from "../../../constants/colors";
 /*
@@ -8,9 +8,9 @@ import { ROYAL_BLUE } from "../../../constants/colors";
 
 /* eslint-disable no-unused-vars */
 export const StyledExternalLink = styled(
-  ({ hoverColor, activeColor, extrastyles, ...props }, ref) => (
+  forwardRef(({ hoverColor, activeColor, extrastyles, ...props }, ref) => (
     <a {...props} ref={ref} />
-  )
+  ))
 )`
   display: flex;
   font-size: ${({ size }) => size};

package/src/components/atoms/link/InternalLink.d.ts

@@ -16,5 +16,4 @@ export interface InternalLinkProps {
 }
 
 export const InternalLink: React.FC<Expand<InternalLinkProps> &
-  React.HTMLAttributes<HTMLElement> &
-  React.Ref<HTMLLinkElement>>;
+  React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLLinkElement> }>;

package/src/components/atoms/link/InternalLink.js

@@ -1,55 +1,57 @@
-import React, { useContext } from "react";
+import React, { useContext, forwardRef } from "react";
 import { ThemeContext } from "styled-components";
 import { fallbackValues } from "./Link.theme";
 import { createThemeValues } from "../../../util/themeUtils";
 import { StyledInternalLink } from "./InternalLink.styled";
 import { safeChildren } from "../../../util/general";
 
-const InternalLink = (
-  {
-    to = "",
-    color,
-    children,
-    active,
-    fontSize,
-    lineheight,
-    fontWeight,
-    variant = "primary",
-    margin,
-    tabIndex = "0",
-    dataQa,
-    extraStyles = ``
-  },
-  ref
-) => {
-  const themeContext = useContext(ThemeContext);
-  const themeValues = createThemeValues(
-    themeContext,
-    fallbackValues,
-    "Link",
-    variant
-  );
+const InternalLink = forwardRef(
+  (
+    {
+      to = "",
+      color,
+      children,
+      active,
+      fontSize,
+      lineheight,
+      fontWeight,
+      variant = "primary",
+      margin,
+      tabIndex = "0",
+      dataQa,
+      extraStyles = ``
+    },
+    ref
+  ) => {
+    const themeContext = useContext(ThemeContext);
+    const themeValues = createThemeValues(
+      themeContext,
+      fallbackValues,
+      "Link",
+      variant
+    );
 
-  return (
-    <StyledInternalLink
-      to={to}
-      color={color}
-      lineheight={lineheight}
-      active={active}
-      fontWeight={fontWeight}
-      fontSize={fontSize}
-      fontFamily={themeValues.fontFamily}
-      margin={margin}
-      hoverColor={themeValues.hoverColor}
-      activeColor={themeValues.activeColor}
-      tabIndex={tabIndex}
-      extrastyles={extraStyles}
-      data-qa={dataQa}
-      ref={ref}
-    >
-      {safeChildren(children, <span />)}
-    </StyledInternalLink>
-  );
-};
+    return (
+      <StyledInternalLink
+        to={to}
+        color={color}
+        lineheight={lineheight}
+        active={active}
+        fontWeight={fontWeight}
+        fontSize={fontSize}
+        fontFamily={themeValues.fontFamily}
+        margin={margin}
+        hoverColor={themeValues.hoverColor}
+        activeColor={themeValues.activeColor}
+        tabIndex={tabIndex}
+        extrastyles={extraStyles}
+        data-qa={dataQa}
+        ref={ref}
+      >
+        {safeChildren(children, <span />)}
+      </StyledInternalLink>
+    );
+  }
+);
 
 export default InternalLink;

package/src/components/atoms/link/InternalLink.styled.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 import { ROYAL_BLUE } from "../../../constants/colors";
@@ -9,8 +9,11 @@ import { ROYAL_BLUE } from "../../../constants/colors";
 
 /* eslint-disable no-unused-vars */
 export const StyledInternalLink = styled(
-  ({ hoverColor, activeColor, active, color, extrastyles, ...props }, ref) => (
-    <Link {...props} ref={ref} />
+  forwardRef(
+    (
+      { hoverColor, activeColor, active, color, extrastyles, ...props },
+      ref
+    ) => <Link {...props} ref={ref} />
   )
 )`
   display: flex;