", () => {
+ it("renders unchanged", () => {
+ const { container } = render(
+
Home ,
+ );
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/packages/commons-ui-next/src/Link/Link.js b/packages/commons-ui-next/src/Link/StyledLink.js
similarity index 59%
rename from packages/commons-ui-next/src/Link/Link.js
rename to packages/commons-ui-next/src/Link/StyledLink.js
index 5356e339e..956af28ea 100644
--- a/packages/commons-ui-next/src/Link/Link.js
+++ b/packages/commons-ui-next/src/Link/StyledLink.js
@@ -1,18 +1,15 @@
-/* eslint-env browser */
import MuiLink from "@mui/material/Link";
import { styled } from "@mui/material/styles";
-import clsx from "clsx";
import NextLink from "next/link";
-import { useRouter } from "next/router";
import PropTypes from "prop-types";
-import React, { useEffect, useState } from "react";
+import React from "react";
import isExternalUrl from "@/commons-ui/next/utils/isExternalUrl";
// Add support for the sx prop for consistency with the other branches.
const Anchor = styled("a")({});
-export const NextLinkComposed = React.forwardRef(
+const NextLinkComposed = React.forwardRef(
function NextLinkComposed(props, ref) {
const {
linkAs,
@@ -57,19 +54,13 @@ NextLinkComposed.propTypes = {
to: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
};
-function checkIfPathsMatch(linkPath, currentPath) {
- return linkPath === currentPath;
-}
-
// A styled version of the Next.js Link component:
// https://nextjs.org/docs/api-reference/next/link
-const Link = React.forwardRef(function Link(props, ref) {
+const StyledLink = React.forwardRef(function Link(props, ref) {
const {
- activeClassName = "active",
as,
- className: classNameProp,
+ className,
href,
- isActive: isActiveProp,
legacyBehavior,
linkAs: linkAsProp,
locale,
@@ -82,37 +73,9 @@ const Link = React.forwardRef(function Link(props, ref) {
...other
} = props;
- const { asPath, isReady } = useRouter();
- const [className, setClassName] = useState(classNameProp);
- const linkAs = linkAsProp || as;
- const isActive = isActiveProp || checkIfPathsMatch;
-
- useEffect(() => {
- if (isReady) {
- const linkPathname = new URL(linkAs || href, window.location.href)
- .pathname;
- const activePathname = new URL(asPath, window.location.href).pathname;
- const newClassName = clsx(classNameProp, {
- [activeClassName]: isActive(linkPathname, activePathname),
- });
-
- if (newClassName !== className) {
- setClassName(newClassName);
- }
- }
- }, [
- activeClassName,
- asPath,
- className,
- classNameProp,
- href,
- isActive,
- isReady,
- linkAs,
- ]);
-
- const isExternal = isExternalUrl(href);
-
+ // https://nextjs.org/docs/app/api-reference/components/link#href-required
+ const url = typeof href === "string" ? href : href.pathname;
+ const isExternal = isExternalUrl(url);
if (isExternal) {
const externalLinkProps = {
href,
@@ -120,12 +83,13 @@ const Link = React.forwardRef(function Link(props, ref) {
target: "_blank",
...other,
};
- if (noLinkStyle) {
- return
;
- }
- return
;
+ const LinkComponent = noLinkStyle ? Anchor : MuiLink;
+ return (
+
+ );
}
+ const linkAs = linkAsProp || as;
const nextjsProps = {
to: href,
linkAs,
@@ -137,33 +101,23 @@ const Link = React.forwardRef(function Link(props, ref) {
locale,
};
- if (noLinkStyle) {
- return (
-
- );
- }
+ const LinkComponent = noLinkStyle ? NextLinkComposed : MuiLink;
+ const component = noLinkStyle ? undefined : NextLinkComposed;
return (
-
);
});
-Link.propTypes = {
- activeClassName: PropTypes.string,
+StyledLink.propTypes = {
as: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
className: PropTypes.string,
href: PropTypes.string,
- isActive: PropTypes.func,
legacyBehavior: PropTypes.bool,
linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
locale: PropTypes.string,
@@ -175,4 +129,4 @@ Link.propTypes = {
shallow: PropTypes.bool,
};
-export default Link;
+export default StyledLink;
diff --git a/packages/commons-ui-next/src/Link/StyledLink.snap.js b/packages/commons-ui-next/src/Link/StyledLink.snap.js
new file mode 100644
index 000000000..db0e8ddea
--- /dev/null
+++ b/packages/commons-ui-next/src/Link/StyledLink.snap.js
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`
renders unchanged 1`] = `
+
+`;
diff --git a/packages/commons-ui-next/src/Link/Link.test.js b/packages/commons-ui-next/src/Link/StyledLink.test.js
similarity index 53%
rename from packages/commons-ui-next/src/Link/Link.test.js
rename to packages/commons-ui-next/src/Link/StyledLink.test.js
index 4ef10c59d..0d9c03e0a 100644
--- a/packages/commons-ui-next/src/Link/Link.test.js
+++ b/packages/commons-ui-next/src/Link/StyledLink.test.js
@@ -1,11 +1,11 @@
import { render } from "@commons-ui/testing-library";
import React from "react";
-import Link from "./Link";
+import StyledLink from "./StyledLink";
-describe("
", () => {
+describe("
", () => {
it("renders unchanged", () => {
- const { container } = render(
Home);
+ const { container } = render(
Home );
expect(container).toMatchSnapshot();
});
});
diff --git a/packages/commons-ui-next/src/Link/index.js b/packages/commons-ui-next/src/Link/index.js
index 6d59fd0b2..f0bdce76f 100644
--- a/packages/commons-ui-next/src/Link/index.js
+++ b/packages/commons-ui-next/src/Link/index.js
@@ -1,3 +1,7 @@
-import Link from "./Link";
+import PagesRouterLink from "./PagesRouterLink";
+import StyledLink from "./StyledLink";
-export default Link;
+export { StyledLink, PagesRouterLink };
+
+// To be backward-compatible, set default Link to PagesRouterLink
+export default PagesRouterLink;
diff --git a/packages/commons-ui-next/src/index.js b/packages/commons-ui-next/src/index.js
index 4b21cb922..548f9c705 100644
--- a/packages/commons-ui-next/src/index.js
+++ b/packages/commons-ui-next/src/index.js
@@ -1,5 +1,6 @@
-/* eslint-disable import/prefer-default-export */
-
export { default as Figure } from "./Figure";
+
export { default as Link } from "./Link";
+export * from "./Link";
+
export { default as RichTypography } from "./RichTypography";
diff --git a/packages/hurumap-next/src/Source/Source.snap.js b/packages/hurumap-next/src/Source/Source.snap.js
index 3c0a29d24..b54076180 100644
--- a/packages/hurumap-next/src/Source/Source.snap.js
+++ b/packages/hurumap-next/src/Source/Source.snap.js
@@ -10,7 +10,7 @@ exports[`Source renders unchanged 1`] = `
: