diff --git a/scm-ui/ui-components/src/layout/Footer.stories.tsx b/scm-ui/ui-components/src/layout/Footer.stories.tsx index c25b618a87..d2b592a46e 100644 --- a/scm-ui/ui-components/src/layout/Footer.stories.tsx +++ b/scm-ui/ui-components/src/layout/Footer.stories.tsx @@ -32,7 +32,7 @@ import hitchhiker from "../__resources__/hitchhiker.png"; // @ts-ignore ignore unknown jpg import marvin from "../__resources__/marvin.jpg"; import NavLink from "../navigation/NavLink"; -import ExternalLink from "../navigation/ExternalLink"; +import ExternalNavLink from "../navigation/ExternalNavLink"; import { MemoryRouter } from "react-router-dom"; const trillian: Me = { @@ -50,9 +50,9 @@ const bindAvatar = (binder: Binder, avatar: string) => { }; const bindLinks = (binder: Binder) => { - binder.bind("footer.information", () => ); - binder.bind("footer.information", () => ); - binder.bind("footer.support", () => ); + binder.bind("footer.information", () => ); + binder.bind("footer.information", () => ); + binder.bind("footer.support", () => ); binder.bind("profile.setting", () => ); }; diff --git a/scm-ui/ui-components/src/layout/Footer.tsx b/scm-ui/ui-components/src/layout/Footer.tsx index 8f27e8042a..355a74c67e 100644 --- a/scm-ui/ui-components/src/layout/Footer.tsx +++ b/scm-ui/ui-components/src/layout/Footer.tsx @@ -29,7 +29,7 @@ import NavLink from "../navigation/NavLink"; import FooterSection from "./FooterSection"; import styled from "styled-components"; import { EXTENSION_POINT } from "../avatar/Avatar"; -import ExternalLink from "../navigation/ExternalLink"; +import ExternalNavLink from "../navigation/ExternalNavLink"; import { useTranslation } from "react-i18next"; type Props = { @@ -99,12 +99,15 @@ const Footer: FC = ({ me, version, links }) => { }> - + }> - - + + diff --git a/scm-ui/ui-components/src/navigation/ExternalLink.tsx b/scm-ui/ui-components/src/navigation/ExternalLink.tsx index 1565f6fa79..bf1dbad5ea 100644 --- a/scm-ui/ui-components/src/navigation/ExternalLink.tsx +++ b/scm-ui/ui-components/src/navigation/ExternalLink.tsx @@ -22,34 +22,15 @@ * SOFTWARE. */ import React, { FC } from "react"; -import classNames from "classnames"; type Props = { to: string; - icon?: string; - label: string; }; -// TODO is it used in the menu? should it use MenuContext for collapse state? - -const ExternalLink: FC = ({ to, icon, label }) => { - let showIcon; - if (icon) { - showIcon = ( - <> - {" "} - - ); - } - - return ( -
  • - - {showIcon} - {label} - -
  • - ); -}; +const ExternalLink: FC = ({ to, children }) => ( + + {children} + +); export default ExternalLink; diff --git a/scm-ui/ui-components/src/navigation/ExternalNavLink.tsx b/scm-ui/ui-components/src/navigation/ExternalNavLink.tsx new file mode 100644 index 0000000000..3b88b495ae --- /dev/null +++ b/scm-ui/ui-components/src/navigation/ExternalNavLink.tsx @@ -0,0 +1,56 @@ +/* + * MIT License + * + * Copyright (c) 2020-present Cloudogu GmbH and Contributors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +import React, { FC } from "react"; +import classNames from "classnames"; +import ExternalLink from "./ExternalLink"; + +type Props = { + to: string; + icon?: string; + label: string; +}; + +// TODO is it used in the menu? should it use MenuContext for collapse state? + +const ExternalNavLink: FC = ({ to, icon, label }) => { + let showIcon; + if (icon) { + showIcon = ( + <> + {" "} + + ); + } + + return ( +
  • + + {showIcon} + {label} + +
  • + ); +}; + +export default ExternalNavLink; diff --git a/scm-ui/ui-components/src/navigation/index.ts b/scm-ui/ui-components/src/navigation/index.ts index 4dcce4321b..9ab01d755d 100644 --- a/scm-ui/ui-components/src/navigation/index.ts +++ b/scm-ui/ui-components/src/navigation/index.ts @@ -33,3 +33,5 @@ export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink"; export { default as SecondaryNavigation } from "./SecondaryNavigation"; export { MenuContext, StateMenuContextProvider } from "./MenuContext"; export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem"; +export { default as ExternalLink } from "./ExternalLink"; +export { default as ExternalNavLink } from "./ExternalNavLink";