diff --git a/package-lock.json b/package-lock.json
index 4b53ed6f1087b284b3e4695fbceb206e790c89b8..adcfe4f0ea9f22d0a02ecd6e122cd635a9feb945 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@ess-ics/ce-ui-common",
- "version": "18.1.0",
+ "version": "19.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@ess-ics/ce-ui-common",
- "version": "18.1.0",
+ "version": "19.0.0",
"dependencies": {
"@fontsource/titillium-web": "^5.0.22",
"@mui/x-data-grid-pro": "^6.5.0",
diff --git a/package.json b/package.json
index 298a033e8257b0c1561d9ef5a046f9a6d4634b79..7a73fff235e86ba189bed04d816f4f8c8750baf9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@ess-ics/ce-ui-common",
- "version": "18.1.0",
+ "version": "19.0.0",
"private": true,
"type": "module",
"main": "dist/index.js",
diff --git a/src/components/common/AppLayout/AppLayout.js b/src/components/common/AppLayout/AppLayout.ts
similarity index 100%
rename from src/components/common/AppLayout/AppLayout.js
rename to src/components/common/AppLayout/AppLayout.ts
diff --git a/src/components/common/AppLayout/index.js b/src/components/common/AppLayout/index.ts
similarity index 100%
rename from src/components/common/AppLayout/index.js
rename to src/components/common/AppLayout/index.ts
diff --git a/src/components/common/ErrorPage/ErrorPage.jsx b/src/components/common/ErrorPage/ErrorPage.tsx
similarity index 64%
rename from src/components/common/ErrorPage/ErrorPage.jsx
rename to src/components/common/ErrorPage/ErrorPage.tsx
index c7c2e56dd0fe55fc54008aacc9900bf9bfa9f275..53bf9c91dd046a93367af39314f22e35e7633652 100644
--- a/src/components/common/ErrorPage/ErrorPage.jsx
+++ b/src/components/common/ErrorPage/ErrorPage.tsx
@@ -2,40 +2,31 @@
* ErrorPage
* when page not found go (redirect) home ("/")
*/
-import { useState } from "react";
+import { useState, ReactNode } from "react";
import {
Typography,
Box,
Accordion,
AccordionSummary,
AccordionDetails,
- useMediaQuery
+ useMediaQuery,
+ TypographyProps
} from "@mui/material";
-import { element, object, string } from "prop-types";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { ExternalButtonLink, InternalButtonLink } from "../Link";
import { theme } from "../../../style/Theme";
-const propTypes = {
- /** String describing the most important informatio about the error */
- title: string,
- /** String describing supporting information about the error */
- subtitle: string,
- /** Additional details about the error message, such as a stacktrace if relevant */
- details: string,
- /** Secondary action component that is rendered instead of the "Go home" navigation link */
- SecondaryActionComponent: element,
- /** Mascot component that is rendered on left of title */
- mascotVariantL: element,
- /** Mascot component that is rendered on right of title */
- mascotVariantR: element,
- /** URL to application support, should the user wish to contact the support desk */
- supportHref: string,
- /** Additional props for the title typography; e.g. to override the variant or component */
- titleProps: object,
- /** Additional props for the subtitle typography; e.g. to override the variant or component */
- subtitleProps: object
-};
+export interface ErrorPageProps {
+ title: string;
+ subtitle: string;
+ details?: string;
+ SecondaryActionComponent?: ReactNode;
+ mascotVariantL?: ReactNode;
+ mascotVariantR?: ReactNode;
+ supportHref?: string;
+ titleProps?: TypographyProps;
+ subtitleProps?: TypographyProps;
+}
export const ErrorPage = ({
title,
@@ -47,7 +38,7 @@ export const ErrorPage = ({
supportHref,
titleProps,
subtitleProps
-}) => {
+}: ErrorPageProps) => {
const [showDetails, setShowDetails] = useState(false);
const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
@@ -127,27 +118,16 @@ export const ErrorPage = ({
gap={2}
>
{SecondaryActionComponent ?? (
- <InternalButtonLink
- variant="contained"
- color="primary"
- to="/"
- >
- Return to Home
- </InternalButtonLink>
+ <InternalButtonLink to="/">Return to Home</InternalButtonLink>
)}
- {supportHref ? (
- <ExternalButtonLink
- href={supportHref}
- variant="outlined"
- >
+ {supportHref && (
+ <ExternalButtonLink to={supportHref}>
Contact Support
</ExternalButtonLink>
- ) : null}
+ )}
</Box>
</Box>
</>
);
};
-
-ErrorPage.propTypes = propTypes;
diff --git a/src/components/common/ErrorPage/index.js b/src/components/common/ErrorPage/index.ts
similarity index 100%
rename from src/components/common/ErrorPage/index.js
rename to src/components/common/ErrorPage/index.ts
diff --git a/src/components/common/GitRefLink/GitRefLink.jsx b/src/components/common/GitRefLink/GitRefLink.jsx
index e41b4532bd150d18822609721c44bd66df645158..521a92351f84ca7773baa03dde95430525b5157a 100644
--- a/src/components/common/GitRefLink/GitRefLink.jsx
+++ b/src/components/common/GitRefLink/GitRefLink.jsx
@@ -10,7 +10,7 @@ import { ExternalLink } from "../Link/ExternalLink";
* @param {string} url String containing url to gitlab template.
* @param {string} revision String containing gitlab tag
*/
-export const GitRefLink = ({ url, revision, ...props }) => {
+export const GitRefLink = ({ url, revision }) => {
// if no git reference has been entered
if (!url || url.trim === "") {
return <></>;
@@ -31,9 +31,8 @@ export const GitRefLink = ({ url, revision, ...props }) => {
return (
<ExternalLink
- href={url}
+ to={url}
label={`Git revision ${revision}`}
- {...props}
>
{revision}
</ExternalLink>
diff --git a/src/components/common/Link/ExternalLink.jsx b/src/components/common/Link/ExternalLink.jsx
deleted file mode 100644
index 71a0f73d2db9d7e9d613d0b83c9f6a28f2a49d1e..0000000000000000000000000000000000000000
--- a/src/components/common/Link/ExternalLink.jsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import { Button, Link as MuiLink, Stack } from "@mui/material";
-import LaunchIcon from "@mui/icons-material/Launch";
-import { string, bool, object, node } from "prop-types";
-
-const Link = ({
- LinkComponent = MuiLink,
- href,
- label,
- newTab = true,
- className,
- children,
- ...props
-}) => {
- return (
- <LinkComponent
- href={href}
- target={newTab ? "_blank" : "_self"}
- aria-label={`${label ? label : children}${
- newTab ? ", opens in new tab" : ""
- }`}
- className={className}
- {...props}
- >
- {children}
- </LinkComponent>
- );
-};
-
-/**
- * A stylized external link configurable as opening in the same tab
- * or a new tab, and shows an icon to indicate the link is external.
- * A11y labels are updated automatically, but can be overridden for
- * cases where e.g. the child component isn't a string (such as EllipsisText).
- *
- * @param {string} href link url
- * @param {string} label a11y label; useful when the child component isn't a string
- * @param {boolean} newTab opens the link in a new tab if true (default).
- * @param {boolean} disableExternalLinkIcon removes the icon displayed after the link text if true.
- * @param {object} ExternalLinkContentsProps props for the ExternalLinkContents component,
- * for example to change the icon or its size.
- * @param {...object} props props for the (MUI) Link component
- *
- */
-export const ExternalLink = ({
- href,
- label,
- newTab,
- disableExternalLinkIcon,
- ExternalLinkContentsProps,
- className,
- children,
- ...props
-}) => {
- const _label = label ? label : children;
-
- return (
- <Link
- {...{ href, label: _label, newTab, className }}
- {...props}
- >
- {disableExternalLinkIcon ? (
- children
- ) : (
- <ExternalLinkContents {...ExternalLinkContentsProps}>
- {children}
- </ExternalLinkContents>
- )}
- </Link>
- );
-};
-ExternalLink.propTypes = {
- href: string,
- label: string,
- newTab: bool,
- disableExternalLinkIcon: bool,
- ExternalLinkContentsProps: object,
- children: node
-};
-
-/**
- * An ExternalLink, but styled as a Button.
- *
- * @param {string} href link url
- * @param {string} label a11y label; useful when the child component isn't a string
- * @param {boolean} newTab opens the link in a new tab if true (default).
- * @param {boolean} disableExternalLinkIcon removes the icon displayed after the link text if true.
- * @param {object} ExternalLinkContentsProps props for the ExternalLinkContents component,
- * for example to change the icon or its size.
- * @param {...object} props props for the (MUI) Link component
- *
- */
-export const ExternalButtonLink = ({
- href,
- label,
- newTab,
- disableExternalLinkIcon,
- ExternalLinkContentsProps,
- className,
- children,
- ...props
-}) => {
- return (
- <ExternalLink
- {...{
- LinkComponent: Button,
- component: MuiLink,
- href,
- label,
- newTab,
- disableExternalLinkIcon,
- ExternalLinkContentsProps,
- className,
- ...props
- }}
- >
- {children}
- </ExternalLink>
- );
-};
-ExternalButtonLink.propTypes = {
- ...ExternalLink.propTypes
-};
-
-/**
- * Text followed by an icon that visually indicates "external link".
- * Used internally by ExternalLink and ExternalButtonLink.
- *
- * @param {object} Icon the MUI icon to use as the end element
- * @param {object} IconProps additional props to pass to the Icon
- * for example to change its color or size.
- * @param {object} children renderable children, can be text or an
- * element such as Typography or EllipsisText.
- *
- */
-export const ExternalLinkContents = ({
- Icon = LaunchIcon,
- IconProps,
- children,
- ...props
-}) => {
- return (
- <Stack
- flexDirection="row"
- alignItems="center"
- gap={0.5}
- component="span"
- {...props}
- >
- {children}
- <Icon
- fontSize="small"
- {...IconProps}
- />
- </Stack>
- );
-};
-ExternalLinkContents.propTypes = {
- Icon: object,
- IconProps: object,
- children: node
-};
diff --git a/src/components/common/Link/ExternalLink.tsx b/src/components/common/Link/ExternalLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a3b81219d536ea33129d86a43a39ebf9e2680a67
--- /dev/null
+++ b/src/components/common/Link/ExternalLink.tsx
@@ -0,0 +1,89 @@
+import { ReactNode } from "react";
+import { Button, Link, Stack, ButtonProps, LinkProps } from "@mui/material";
+import { Link as RouterLink } from "react-router-dom";
+import LaunchIcon from "@mui/icons-material/Launch";
+
+interface LinkDefaultProps {
+ to: string;
+ label?: string;
+ disableExternalLinkIcon?: boolean;
+ children: string | ReactNode;
+}
+
+interface LinkContentProps {
+ disableExternalLinkIcon: boolean;
+ children: string | ReactNode;
+}
+
+const LinkContent = ({
+ disableExternalLinkIcon,
+ children
+}: LinkContentProps) => {
+ return (
+ <>
+ {disableExternalLinkIcon ? (
+ children
+ ) : (
+ <Stack
+ flexDirection="row"
+ alignItems="center"
+ gap={0.5}
+ >
+ {children}
+ <LaunchIcon fontSize="small" />
+ </Stack>
+ )}
+ </>
+ );
+};
+
+export interface ExternalLinkProps extends LinkDefaultProps {
+ LinkProps?: LinkProps;
+}
+
+export const ExternalLink = ({
+ to,
+ label,
+ disableExternalLinkIcon = false,
+ LinkProps,
+ children
+}: ExternalLinkProps) => (
+ <Link
+ component={RouterLink}
+ to={to}
+ target="_blank"
+ aria-label={label || ""}
+ {...LinkProps}
+ >
+ <LinkContent disableExternalLinkIcon={disableExternalLinkIcon}>
+ {children}
+ </LinkContent>
+ </Link>
+);
+
+export interface ExternalButtonLinkProps extends LinkDefaultProps {
+ ButtonProps?: ButtonProps;
+}
+
+export const ExternalButtonLink = ({
+ to,
+ label,
+ disableExternalLinkIcon = false,
+ ButtonProps,
+ children
+}: ExternalButtonLinkProps) => {
+ return (
+ <Button
+ component={RouterLink}
+ to={to}
+ target="_blank"
+ aria-label={label || ""}
+ variant="outlined"
+ {...ButtonProps}
+ >
+ <LinkContent disableExternalLinkIcon={disableExternalLinkIcon}>
+ {children}
+ </LinkContent>
+ </Button>
+ );
+};
diff --git a/src/components/common/Link/InternalLink.jsx b/src/components/common/Link/InternalLink.jsx
deleted file mode 100644
index fa9ebf9d9defcfd248b774fac7e99e3356c0b33c..0000000000000000000000000000000000000000
--- a/src/components/common/Link/InternalLink.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Button, Link } from "@mui/material";
-import { Link as RouterLink } from "react-router-dom";
-import { string, object, node } from "prop-types";
-
-/**
- * An accessible link for pages within the application; an MUI Link with
- * the capabilities of a React Router Link.
- *
- * @param {string} label a11y label; useful if the child component isn't a string.
- * @param {string} to location to route to
- * @param {...object} props additional React Router and MUI Link props
- * @param {object} children renderable children, can be a string or a
- * component such as Typography or EllipsisText
- *
- */
-export const InternalLink = ({ label, to, children, ...props }) => {
- return (
- <Link
- component={RouterLink}
- to={to}
- aria-label={label ? label : children}
- {...props}
- >
- {children}
- </Link>
- );
-};
-InternalLink.propTypes = {
- label: string,
- to: string,
- props: object,
- children: node
-};
-
-/**
- * An InternalLink stylized as a Button.
- *
- * @param {string} label a11y label; useful if the child component isn't a string.
- * @param {string} to location to route to
- * @param {...object} props additional React Router and MUI Button props
- * @param {object} children renderable children, can be a string or a
- * component such as Typography or EllipsisText
- *
- */
-export const InternalButtonLink = ({ children, label, to, ...props }) => {
- return (
- <Button
- component={RouterLink}
- to={to}
- aria-label={label ? label : children}
- {...props}
- >
- {children}
- </Button>
- );
-};
-InternalButtonLink.propTypes = {
- ...InternalLink.propTypes
-};
diff --git a/src/components/common/Link/InternalLink.tsx b/src/components/common/Link/InternalLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d34fa5d71a8a74277f6298ec5bf4447645d22765
--- /dev/null
+++ b/src/components/common/Link/InternalLink.tsx
@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+import { Button, ButtonProps, Link, LinkProps } from "@mui/material";
+import { Link as RouterLink } from "react-router-dom";
+
+interface LinkDefaultProps {
+ to: string;
+ label?: string;
+ children: string | ReactNode;
+}
+
+export interface InternalLinkProps extends LinkDefaultProps {
+ LinkProps?: LinkProps;
+}
+
+export const InternalLink = ({
+ label,
+ to,
+ LinkProps,
+ children
+}: InternalLinkProps) => {
+ return (
+ <Link
+ component={RouterLink}
+ to={to}
+ aria-label={label || ""}
+ {...LinkProps}
+ >
+ {children}
+ </Link>
+ );
+};
+
+export interface InternalButtonLinkProps extends LinkDefaultProps {
+ ButtonProps?: ButtonProps;
+}
+
+export const InternalButtonLink = ({
+ label,
+ to,
+ ButtonProps,
+ children
+}: InternalButtonLinkProps) => {
+ return (
+ <Button
+ component={RouterLink}
+ to={to}
+ aria-label={label || ""}
+ variant="contained"
+ {...ButtonProps}
+ >
+ {children}
+ </Button>
+ );
+};
diff --git a/src/components/common/Link/index.js b/src/components/common/Link/index.js
deleted file mode 100644
index 1022d6530a27fb2ea4637b41f41e5831217d0bd6..0000000000000000000000000000000000000000
--- a/src/components/common/Link/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {
- ExternalLink,
- ExternalButtonLink,
- ExternalLinkContents
-} from "./ExternalLink";
-import { InternalLink, InternalButtonLink } from "./InternalLink";
-
-export {
- ExternalLink,
- ExternalButtonLink,
- ExternalLinkContents,
- InternalLink,
- InternalButtonLink
-};
diff --git a/src/components/common/Link/index.ts b/src/components/common/Link/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b4d7e0131fd083bdaf3f2c4eae022d960e927869
--- /dev/null
+++ b/src/components/common/Link/index.ts
@@ -0,0 +1,23 @@
+import {
+ ExternalLink,
+ ExternalButtonLink,
+ ExternalLinkProps,
+ ExternalButtonLinkProps
+} from "./ExternalLink";
+import {
+ InternalLink,
+ InternalButtonLink,
+ InternalLinkProps,
+ InternalButtonLinkProps
+} from "./InternalLink";
+
+export {
+ ExternalLink,
+ ExternalButtonLink,
+ type ExternalLinkProps,
+ type ExternalButtonLinkProps,
+ InternalLink,
+ InternalButtonLink,
+ type InternalLinkProps,
+ type InternalButtonLinkProps
+};
diff --git a/src/components/navigation/Help/Help.jsx b/src/components/navigation/Help/Help.jsx
index 4b7219c5792612a1ca67f245ff41f79b1ac4e289..1387b085fe2d9df2282b96ee1a2a6aa2ded245d0 100644
--- a/src/components/navigation/Help/Help.jsx
+++ b/src/components/navigation/Help/Help.jsx
@@ -26,7 +26,7 @@ export const Help = styled(
>
Want more information about this app?
<ExternalLink
- href={docsHref}
+ to={docsHref}
label="Visit the documentation to learn more"
>
Read the docs
@@ -38,7 +38,7 @@ export const Help = styled(
>
Experiencing issues or want to suggest an improvement?
<ExternalLink
- href={supportHref}
+ to={supportHref}
label="Report an issue or improvement with the support desk"
>
Contact support
@@ -50,7 +50,7 @@ export const Help = styled(
>
Want to use the API?
<ExternalLink
- href={apiHref}
+ to={apiHref}
label="REST API documentation"
>
REST API documentation
diff --git a/src/stories/common/EllipsisText/EllipsisText.stories.jsx b/src/stories/common/EllipsisText/EllipsisText.stories.jsx
index 381b517368d7134d53b47b0b211a9b19cf186022..b8cde6973dbdee1a5cf4bb63ea9738d7fe7575c5 100644
--- a/src/stories/common/EllipsisText/EllipsisText.stories.jsx
+++ b/src/stories/common/EllipsisText/EllipsisText.stories.jsx
@@ -50,15 +50,16 @@ Default.args = {
const ExternalLinkTemplate = ({ text, ...props }) => {
return (
- <Container>
- <ExternalLink
- newTab
- href="https://europeanspallationsource.se/"
- label={text}
- >
- <EllipsisText {...props}>{text}</EllipsisText>
- </ExternalLink>
- </Container>
+ <MemoryRouter>
+ <Container>
+ <ExternalLink
+ to="https://europeanspallationsource.se/"
+ label={text}
+ >
+ <EllipsisText {...props}>{text}</EllipsisText>
+ </ExternalLink>
+ </Container>
+ </MemoryRouter>
);
};
diff --git a/src/stories/common/ErrorPage/ErrorPage.stories.jsx b/src/stories/common/ErrorPage/ErrorPage.stories.tsx
similarity index 91%
rename from src/stories/common/ErrorPage/ErrorPage.stories.jsx
rename to src/stories/common/ErrorPage/ErrorPage.stories.tsx
index 8fcb53dcb52af0efbbc0b852ec2ca31995683153..f8f6b4988ae53453e34f63a4bf88c5cfab8b3a93 100644
--- a/src/stories/common/ErrorPage/ErrorPage.stories.jsx
+++ b/src/stories/common/ErrorPage/ErrorPage.stories.tsx
@@ -1,6 +1,8 @@
+import { Meta } from "@storybook/react";
import { Button, Paper } from "@mui/material";
import { BrowserRouter } from "react-router-dom";
import { ErrorPage } from "../../../components/common/ErrorPage";
+import { ErrorPageProps } from "../../../components/common/ErrorPage/ErrorPage";
import { theme } from "../../../style/Theme";
import {
SidewaysMascot,
@@ -10,9 +12,9 @@ import {
export default {
title: "Common/ErrorPage",
component: ErrorPage
-};
+} as Meta<typeof ErrorPage>;
-const Template = (props) => {
+const Template = (props: ErrorPageProps) => {
return (
<BrowserRouter>
<Paper sx={{ padding: 2 }}>
@@ -24,7 +26,7 @@ const Template = (props) => {
const mascotDefaultProps = { width: "250px", height: "500px" };
-export const Default = (args) => <Template {...args} />;
+export const Default = (args: ErrorPageProps) => <Template {...args} />;
Default.args = {
title: "Badger Ducks Summoned",
subtitle: "HTTP 503",
@@ -71,7 +73,7 @@ Suppressed: com.physics.particles.PauliExclusionFreakoutException: Pauli exclusi
`
};
-export const Customized = (args) => <Template {...args} />;
+export const Customized = (args: ErrorPageProps) => <Template {...args} />;
Customized.args = {
...Default.args,
titleProps: { variant: "h1", color: theme.palette.error.main },
diff --git a/src/stories/common/GitRefLink/GitRefLink.stories.jsx b/src/stories/common/GitRefLink/GitRefLink.stories.jsx
index 8a70055f2c31cb3b5c86ff4e205f20546f00320a..4ea6a36f59a0996fea23fadf46e1a9564a0d6a33 100644
--- a/src/stories/common/GitRefLink/GitRefLink.stories.jsx
+++ b/src/stories/common/GitRefLink/GitRefLink.stories.jsx
@@ -1,3 +1,4 @@
+import { MemoryRouter } from "react-router-dom";
import { GitRefLink } from "../../../components/common/GitRefLink";
export default {
@@ -6,10 +7,12 @@ export default {
const Template = () => {
return (
- <GitRefLink
- url="https://gitlab.esss.lu.se/ccce/dev/iocs/instances/e3-ioc-test-01.git"
- revision="0.0.TEST"
- />
+ <MemoryRouter>
+ <GitRefLink
+ url="https://gitlab.esss.lu.se/ccce/dev/iocs/instances/e3-ioc-test-01.git"
+ revision="0.0.TEST"
+ />
+ </MemoryRouter>
);
};
diff --git a/src/stories/common/Link/Link.stories.jsx b/src/stories/common/Link/Link.stories.jsx
deleted file mode 100644
index ff7cd6d48f6840474e85752a484b6a1ad714ec87..0000000000000000000000000000000000000000
--- a/src/stories/common/Link/Link.stories.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { MemoryRouter } from "react-router-dom";
-import PetsIcon from "@mui/icons-material/Pets";
-import {
- ExternalButtonLink,
- ExternalLink,
- InternalButtonLink,
- InternalLink
-} from "../../../components/common/Link";
-
-export default {
- title: "Common/Link"
-};
-
-const InternalTemplate = ({ children }) => {
- return <MemoryRouter>{children}</MemoryRouter>;
-};
-export const Internal = (args) => (
- <InternalTemplate>
- <InternalLink {...args}>{args.text}</InternalLink>
- </InternalTemplate>
-);
-Internal.args = {
- to: "/",
- text: "Navigate within app",
- label: "Navigate internally to somewhere"
-};
-export const InternalButton = (args) => (
- <InternalTemplate>
- <InternalButtonLink {...args}>{args.text}</InternalButtonLink>
- </InternalTemplate>
-);
-InternalButton.args = {
- ...Internal.args,
- variant: "contained",
- color: "primary"
-};
-
-const ExternalTemplate = ({ demoCustomIcon, render, ...props }) => {
- if (demoCustomIcon) {
- props = {
- ...props,
- ExternalLinkContentsProps: {
- Icon: PetsIcon,
- IconProps: { color: "essPurple" }
- }
- };
- }
- return render(props);
-};
-
-export const External = (args) => (
- <ExternalTemplate
- {...args}
- render={(props) => <ExternalLink {...props}>{props.text}</ExternalLink>}
- />
-);
-External.args = {
- disableExternalLinkIcon: false,
- demoCustomIcon: false,
- href: "https://europeanspallationsource.se/",
- newTab: true,
- text: "Visit External Website",
- label: "Visit our website"
-};
-
-export const ExternalButton = (args) => (
- <ExternalTemplate
- {...args}
- render={(props) => (
- <ExternalButtonLink {...props}>{props.text}</ExternalButtonLink>
- )}
- />
-);
-ExternalButton.args = {
- ...External.args,
- variant: "contained",
- color: "primary"
-};
diff --git a/src/stories/common/Link/Link.stories.tsx b/src/stories/common/Link/Link.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4ce5c81a28b7057b37674ece64a0be4a0accce1b
--- /dev/null
+++ b/src/stories/common/Link/Link.stories.tsx
@@ -0,0 +1,86 @@
+import { ReactNode } from "react";
+import { MemoryRouter } from "react-router-dom";
+import {
+ ExternalButtonLink,
+ ExternalLink,
+ InternalButtonLink,
+ InternalLink,
+ InternalLinkProps,
+ InternalButtonLinkProps,
+ ExternalLinkProps,
+ ExternalButtonLinkProps
+} from "../../../components/common/Link";
+
+export default {
+ title: "Common/Link"
+};
+
+interface TemplateProps {
+ children: ReactNode;
+}
+
+const Template = ({ children }: TemplateProps) => {
+ return <MemoryRouter>{children}</MemoryRouter>;
+};
+
+export const Internal = (args: InternalLinkProps) => (
+ <Template>
+ <InternalLink {...args}>Navigate within app</InternalLink>
+ </Template>
+);
+Internal.args = {
+ to: "/",
+ label: "Navigate internally to somewhere"
+};
+
+export const InternalButton = (args: InternalButtonLinkProps) => (
+ <Template>
+ <InternalButtonLink {...args}>Navigate within app</InternalButtonLink>
+ </Template>
+);
+InternalButton.args = {
+ ...Internal.args
+};
+
+export const External = (args: ExternalLinkProps) => (
+ <Template>
+ <ExternalLink {...args}>Visit External Website</ExternalLink>
+ </Template>
+);
+External.args = {
+ to: "https://europeanspallationsource.se/",
+ label: "Visit our website"
+};
+
+export const ExternalButton = (args: ExternalButtonLinkProps) => (
+ <Template>
+ <ExternalButtonLink {...args}>Visit External Website</ExternalButtonLink>
+ </Template>
+);
+ExternalButton.args = {
+ ...External.args
+};
+
+export const LinkWithProps = (args: ExternalLinkProps) => (
+ <Template>
+ <ExternalLink {...args}>
+ Visit External Website with custom props
+ </ExternalLink>
+ </Template>
+);
+LinkWithProps.args = {
+ ...External.args,
+ LinkProps: { sx: { color: "red", width: "100%", display: "block" } }
+};
+
+export const ButtonWithProps = (args: ExternalButtonLinkProps) => (
+ <Template>
+ <ExternalButtonLink {...args}>
+ Visit External Website with custom props
+ </ExternalButtonLink>
+ </Template>
+);
+ButtonWithProps.args = {
+ ...External.args,
+ ButtonProps: { variant: "contained" }
+};
diff --git a/src/stories/navigation/Help/Help.stories.jsx b/src/stories/navigation/Help/Help.stories.jsx
index ecb8ccfe180c9850a9e885bd6931f32640383ac7..e63cb0e300edc6d9cb87ecdb5994f8348ecd3bba 100644
--- a/src/stories/navigation/Help/Help.stories.jsx
+++ b/src/stories/navigation/Help/Help.stories.jsx
@@ -1,4 +1,5 @@
import { useState } from "react";
+import { MemoryRouter } from "react-router-dom";
import { Button, Paper, Tooltip, Stack, Typography } from "@mui/material";
import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
import { Help } from "../../../components/navigation/Help";
@@ -10,7 +11,11 @@ export default {
};
const Template = (args) => {
- return <Help {...args} />;
+ return (
+ <MemoryRouter>
+ <Help {...args} />
+ </MemoryRouter>
+ );
};
const HelpContainer = (args) => {