From 14ce1aa1c55ac287988f6427cf0021ce6aad88ec Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Fri, 14 Mar 2025 08:48:31 +0100
Subject: [PATCH 1/7] migrated AppLayout
---
src/components/common/AppLayout/{AppLayout.js => AppLayout.ts} | 0
src/components/common/AppLayout/{index.js => index.ts} | 0
2 files changed, 0 insertions(+), 0 deletions(-)
rename src/components/common/AppLayout/{AppLayout.js => AppLayout.ts} (100%)
rename src/components/common/AppLayout/{index.js => index.ts} (100%)
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
--
GitLab
From 0c25045628f117655ebdd3e6f2efacd90cdbe04b Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Mon, 17 Mar 2025 09:56:09 +0100
Subject: [PATCH 2/7] migrated internal and external links
---
.../common/GitRefLink/GitRefLink.jsx | 5 +-
src/components/common/Link/ExternalLink.jsx | 161 ------------------
src/components/common/Link/ExternalLink.tsx | 89 ++++++++++
src/components/common/Link/InternalLink.jsx | 59 -------
src/components/common/Link/InternalLink.tsx | 54 ++++++
src/components/common/Link/index.js | 14 --
src/components/common/Link/index.ts | 4 +
src/components/navigation/Help/Help.jsx | 6 +-
src/stories/common/Link/Link.stories.jsx | 55 ++----
9 files changed, 167 insertions(+), 280 deletions(-)
delete mode 100644 src/components/common/Link/ExternalLink.jsx
create mode 100644 src/components/common/Link/ExternalLink.tsx
delete mode 100644 src/components/common/Link/InternalLink.jsx
create mode 100644 src/components/common/Link/InternalLink.tsx
delete mode 100644 src/components/common/Link/index.js
create mode 100644 src/components/common/Link/index.ts
diff --git a/src/components/common/GitRefLink/GitRefLink.jsx b/src/components/common/GitRefLink/GitRefLink.jsx
index e41b4532..521a9235 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 71a0f73d..00000000
--- 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 00000000..6e52a10c
--- /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: ReactNode;
+}
+
+export interface LinkContentProps {
+ disableExternalLinkIcon: boolean;
+ children: ReactNode;
+}
+
+export 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 fa9ebf9d..00000000
--- 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 00000000..d34fa5d7
--- /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 1022d653..00000000
--- 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 00000000..6213608c
--- /dev/null
+++ b/src/components/common/Link/index.ts
@@ -0,0 +1,4 @@
+import { ExternalLink, ExternalButtonLink } from "./ExternalLink";
+import { InternalLink, InternalButtonLink } from "./InternalLink";
+
+export { ExternalLink, ExternalButtonLink, InternalLink, InternalButtonLink };
diff --git a/src/components/navigation/Help/Help.jsx b/src/components/navigation/Help/Help.jsx
index 4b7219c5..1387b085 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/Link/Link.stories.jsx b/src/stories/common/Link/Link.stories.jsx
index ff7cd6d4..d62b57f8 100644
--- a/src/stories/common/Link/Link.stories.jsx
+++ b/src/stories/common/Link/Link.stories.jsx
@@ -1,5 +1,4 @@
import { MemoryRouter } from "react-router-dom";
-import PetsIcon from "@mui/icons-material/Pets";
import {
ExternalButtonLink,
ExternalLink,
@@ -11,13 +10,13 @@ export default {
title: "Common/Link"
};
-const InternalTemplate = ({ children }) => {
+const Template = ({ children }) => {
return <MemoryRouter>{children}</MemoryRouter>;
};
export const Internal = (args) => (
- <InternalTemplate>
+ <Template>
<InternalLink {...args}>{args.text}</InternalLink>
- </InternalTemplate>
+ </Template>
);
Internal.args = {
to: "/",
@@ -25,54 +24,30 @@ Internal.args = {
label: "Navigate internally to somewhere"
};
export const InternalButton = (args) => (
- <InternalTemplate>
+ <Template>
<InternalButtonLink {...args}>{args.text}</InternalButtonLink>
- </InternalTemplate>
+ </Template>
);
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);
+ ...Internal.args
};
export const External = (args) => (
- <ExternalTemplate
- {...args}
- render={(props) => <ExternalLink {...props}>{props.text}</ExternalLink>}
- />
+ <Template>
+ <ExternalLink {...args}>{args.children}</ExternalLink>
+ </Template>
);
External.args = {
- disableExternalLinkIcon: false,
- demoCustomIcon: false,
- href: "https://europeanspallationsource.se/",
- newTab: true,
- text: "Visit External Website",
+ to: "https://europeanspallationsource.se/",
+ children: "Visit External Website",
label: "Visit our website"
};
export const ExternalButton = (args) => (
- <ExternalTemplate
- {...args}
- render={(props) => (
- <ExternalButtonLink {...props}>{props.text}</ExternalButtonLink>
- )}
- />
+ <Template>
+ <ExternalButtonLink {...args}>{args.children}</ExternalButtonLink>
+ </Template>
);
ExternalButton.args = {
- ...External.args,
- variant: "contained",
- color: "primary"
+ ...External.args
};
--
GitLab
From 3f2127488a00ee40849b4ee749e24363a7a41ed4 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Mon, 17 Mar 2025 10:14:14 +0100
Subject: [PATCH 3/7] migrated Links stories
---
.../EllipsisText/EllipsisText.stories.jsx | 19 ++--
.../common/GitRefLink/GitRefLink.stories.jsx | 11 ++-
src/stories/common/Link/Link.stories.jsx | 53 -----------
src/stories/common/Link/Link.stories.tsx | 90 +++++++++++++++++++
src/stories/navigation/Help/Help.stories.jsx | 7 +-
5 files changed, 113 insertions(+), 67 deletions(-)
delete mode 100644 src/stories/common/Link/Link.stories.jsx
create mode 100644 src/stories/common/Link/Link.stories.tsx
diff --git a/src/stories/common/EllipsisText/EllipsisText.stories.jsx b/src/stories/common/EllipsisText/EllipsisText.stories.jsx
index 381b5173..b8cde697 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/GitRefLink/GitRefLink.stories.jsx b/src/stories/common/GitRefLink/GitRefLink.stories.jsx
index 8a70055f..4ea6a36f 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 d62b57f8..00000000
--- a/src/stories/common/Link/Link.stories.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { MemoryRouter } from "react-router-dom";
-import {
- ExternalButtonLink,
- ExternalLink,
- InternalButtonLink,
- InternalLink
-} from "../../../components/common/Link";
-
-export default {
- title: "Common/Link"
-};
-
-const Template = ({ children }) => {
- return <MemoryRouter>{children}</MemoryRouter>;
-};
-export const Internal = (args) => (
- <Template>
- <InternalLink {...args}>{args.text}</InternalLink>
- </Template>
-);
-Internal.args = {
- to: "/",
- text: "Navigate within app",
- label: "Navigate internally to somewhere"
-};
-export const InternalButton = (args) => (
- <Template>
- <InternalButtonLink {...args}>{args.text}</InternalButtonLink>
- </Template>
-);
-InternalButton.args = {
- ...Internal.args
-};
-
-export const External = (args) => (
- <Template>
- <ExternalLink {...args}>{args.children}</ExternalLink>
- </Template>
-);
-External.args = {
- to: "https://europeanspallationsource.se/",
- children: "Visit External Website",
- label: "Visit our website"
-};
-
-export const ExternalButton = (args) => (
- <Template>
- <ExternalButtonLink {...args}>{args.children}</ExternalButtonLink>
- </Template>
-);
-ExternalButton.args = {
- ...External.args
-};
diff --git a/src/stories/common/Link/Link.stories.tsx b/src/stories/common/Link/Link.stories.tsx
new file mode 100644
index 00000000..4c15ebfd
--- /dev/null
+++ b/src/stories/common/Link/Link.stories.tsx
@@ -0,0 +1,90 @@
+import { ReactNode } from "react";
+import { MemoryRouter } from "react-router-dom";
+import {
+ ExternalButtonLink,
+ ExternalLink,
+ InternalButtonLink,
+ InternalLink
+} from "../../../components/common/Link";
+import {
+ ExternalLinkProps,
+ ExternalButtonLinkProps
+} from "../../../components/common/Link/ExternalLink";
+import {
+ InternalLinkProps,
+ InternalButtonLinkProps
+} from "../../../components/common/Link/InternalLink";
+
+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 ecb8ccfe..e63cb0e3 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) => {
--
GitLab
From f24f861574be675cb78cbc2afc5e2d20440114bd Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Mon, 17 Mar 2025 10:16:59 +0100
Subject: [PATCH 4/7] migrated error page
---
.../{ErrorPage.jsx => ErrorPage.tsx} | 54 ++++++-------------
.../common/ErrorPage/{index.js => index.ts} | 0
2 files changed, 17 insertions(+), 37 deletions(-)
rename src/components/common/ErrorPage/{ErrorPage.jsx => ErrorPage.tsx} (65%)
rename src/components/common/ErrorPage/{index.js => index.ts} (100%)
diff --git a/src/components/common/ErrorPage/ErrorPage.jsx b/src/components/common/ErrorPage/ErrorPage.tsx
similarity index 65%
rename from src/components/common/ErrorPage/ErrorPage.jsx
rename to src/components/common/ErrorPage/ErrorPage.tsx
index c7c2e56d..c56ff124 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
-};
+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,20 +118,11 @@ 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"
- >
+ <ExternalButtonLink to={supportHref}>
Contact Support
</ExternalButtonLink>
) : null}
@@ -149,5 +131,3 @@ export const ErrorPage = ({
</>
);
};
-
-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
--
GitLab
From 8973d941486dd37100eed75427109a5b992916c8 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Mon, 17 Mar 2025 10:38:04 +0100
Subject: [PATCH 5/7] migrated error page story
---
src/components/common/ErrorPage/ErrorPage.tsx | 2 +-
.../{ErrorPage.stories.jsx => ErrorPage.stories.tsx} | 10 ++++++----
2 files changed, 7 insertions(+), 5 deletions(-)
rename src/stories/common/ErrorPage/{ErrorPage.stories.jsx => ErrorPage.stories.tsx} (91%)
diff --git a/src/components/common/ErrorPage/ErrorPage.tsx b/src/components/common/ErrorPage/ErrorPage.tsx
index c56ff124..45c90414 100644
--- a/src/components/common/ErrorPage/ErrorPage.tsx
+++ b/src/components/common/ErrorPage/ErrorPage.tsx
@@ -16,7 +16,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { ExternalButtonLink, InternalButtonLink } from "../Link";
import { theme } from "../../../style/Theme";
-interface ErrorPageProps {
+export interface ErrorPageProps {
title: string;
subtitle: string;
details?: string;
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 8fcb53dc..f8f6b498 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 },
--
GitLab
From db80a33bfedf4489b06e2cf7ec9292d45348bbd1 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Tue, 18 Mar 2025 09:30:54 +0100
Subject: [PATCH 6/7] 19.0.0
---
package-lock.json | 4 ++--
package.json | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 4b53ed6f..adcfe4f0 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 298a033e..7a73fff2 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",
--
GitLab
From 5e7a05c66caf88632f98febfd3f38d5a03bc600f Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Tue, 18 Mar 2025 14:46:33 +0100
Subject: [PATCH 7/7] fixed merge comments
---
src/components/common/ErrorPage/ErrorPage.tsx | 12 ++++-----
src/components/common/Link/ExternalLink.tsx | 12 ++++-----
src/components/common/Link/index.ts | 25 ++++++++++++++++---
src/stories/common/Link/Link.stories.tsx | 12 +++------
4 files changed, 38 insertions(+), 23 deletions(-)
diff --git a/src/components/common/ErrorPage/ErrorPage.tsx b/src/components/common/ErrorPage/ErrorPage.tsx
index 45c90414..53bf9c91 100644
--- a/src/components/common/ErrorPage/ErrorPage.tsx
+++ b/src/components/common/ErrorPage/ErrorPage.tsx
@@ -21,11 +21,11 @@ export interface ErrorPageProps {
subtitle: string;
details?: string;
SecondaryActionComponent?: ReactNode;
- mascotVariantL: ReactNode;
- mascotVariantR: ReactNode;
+ mascotVariantL?: ReactNode;
+ mascotVariantR?: ReactNode;
supportHref?: string;
- titleProps: TypographyProps;
- subtitleProps: TypographyProps;
+ titleProps?: TypographyProps;
+ subtitleProps?: TypographyProps;
}
export const ErrorPage = ({
@@ -121,11 +121,11 @@ export const ErrorPage = ({
<InternalButtonLink to="/">Return to Home</InternalButtonLink>
)}
- {supportHref ? (
+ {supportHref && (
<ExternalButtonLink to={supportHref}>
Contact Support
</ExternalButtonLink>
- ) : null}
+ )}
</Box>
</Box>
</>
diff --git a/src/components/common/Link/ExternalLink.tsx b/src/components/common/Link/ExternalLink.tsx
index 6e52a10c..a3b81219 100644
--- a/src/components/common/Link/ExternalLink.tsx
+++ b/src/components/common/Link/ExternalLink.tsx
@@ -7,15 +7,15 @@ interface LinkDefaultProps {
to: string;
label?: string;
disableExternalLinkIcon?: boolean;
- children: ReactNode;
+ children: string | ReactNode;
}
-export interface LinkContentProps {
+interface LinkContentProps {
disableExternalLinkIcon: boolean;
- children: ReactNode;
+ children: string | ReactNode;
}
-export const LinkContent = ({
+const LinkContent = ({
disableExternalLinkIcon,
children
}: LinkContentProps) => {
@@ -51,7 +51,7 @@ export const ExternalLink = ({
<Link
component={RouterLink}
to={to}
- target={"_blank"}
+ target="_blank"
aria-label={label || ""}
{...LinkProps}
>
@@ -76,7 +76,7 @@ export const ExternalButtonLink = ({
<Button
component={RouterLink}
to={to}
- target={"_blank"}
+ target="_blank"
aria-label={label || ""}
variant="outlined"
{...ButtonProps}
diff --git a/src/components/common/Link/index.ts b/src/components/common/Link/index.ts
index 6213608c..b4d7e013 100644
--- a/src/components/common/Link/index.ts
+++ b/src/components/common/Link/index.ts
@@ -1,4 +1,23 @@
-import { ExternalLink, ExternalButtonLink } from "./ExternalLink";
-import { InternalLink, InternalButtonLink } from "./InternalLink";
+import {
+ ExternalLink,
+ ExternalButtonLink,
+ ExternalLinkProps,
+ ExternalButtonLinkProps
+} from "./ExternalLink";
+import {
+ InternalLink,
+ InternalButtonLink,
+ InternalLinkProps,
+ InternalButtonLinkProps
+} from "./InternalLink";
-export { ExternalLink, ExternalButtonLink, InternalLink, InternalButtonLink };
+export {
+ ExternalLink,
+ ExternalButtonLink,
+ type ExternalLinkProps,
+ type ExternalButtonLinkProps,
+ InternalLink,
+ InternalButtonLink,
+ type InternalLinkProps,
+ type InternalButtonLinkProps
+};
diff --git a/src/stories/common/Link/Link.stories.tsx b/src/stories/common/Link/Link.stories.tsx
index 4c15ebfd..4ce5c81a 100644
--- a/src/stories/common/Link/Link.stories.tsx
+++ b/src/stories/common/Link/Link.stories.tsx
@@ -4,16 +4,12 @@ import {
ExternalButtonLink,
ExternalLink,
InternalButtonLink,
- InternalLink
-} from "../../../components/common/Link";
-import {
+ InternalLink,
+ InternalLinkProps,
+ InternalButtonLinkProps,
ExternalLinkProps,
ExternalButtonLinkProps
-} from "../../../components/common/Link/ExternalLink";
-import {
- InternalLinkProps,
- InternalButtonLinkProps
-} from "../../../components/common/Link/InternalLink";
+} from "../../../components/common/Link";
export default {
title: "Common/Link"
--
GitLab