change external link to pf component
This commit is contained in:
Sarah Rambacher
jenny-s51
parent
3479adb356
commit
9f47fb5fca
4 changed files with 155 additions and 30 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import React from "react";
|
||||
import { ExternalLinkAltIcon } from "@patternfly/react-icons";
|
||||
import { Button } from "@patternfly/react-core";
|
||||
|
||||
export const ExternalLink = ({
|
||||
title,
|
||||
|
|
@ -7,9 +8,15 @@ export const ExternalLink = ({
|
|||
...rest
|
||||
}: React.HTMLProps<HTMLAnchorElement>) => {
|
||||
return (
|
||||
<a href={href} {...rest}>
|
||||
{title ? title : href}{" "}
|
||||
{href?.startsWith("http") && <ExternalLinkAltIcon />}
|
||||
</a>
|
||||
<Button
|
||||
variant="link"
|
||||
icon={href?.startsWith("http") && <ExternalLinkAltIcon />}
|
||||
iconPosition="right"
|
||||
component="a"
|
||||
href={href}
|
||||
{...rest}
|
||||
>
|
||||
{title ? title : href}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,4 +14,25 @@ describe("<ExternalLink />", () => {
|
|||
);
|
||||
expect(comp.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("render with internal url", () => {
|
||||
const comp = render(
|
||||
<ExternalLink href="/application/home/" title="Application page" />
|
||||
);
|
||||
expect(comp.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("render as application", () => {
|
||||
const comp = render(
|
||||
<ExternalLink href="/application/main" title="Application link" />
|
||||
);
|
||||
expect(comp.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("render as disabled", () => {
|
||||
const comp = render(
|
||||
<ExternalLink href="http://hello.nl/" title="Disabled link" isDisabled />
|
||||
);
|
||||
expect(comp.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,24 +1,98 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ExternalLink /> render as application 1`] = `
|
||||
<DocumentFragment>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-button pf-m-link"
|
||||
data-ouia-component-id="3"
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe="true"
|
||||
href="/application/main"
|
||||
>
|
||||
Application link
|
||||
</a>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<ExternalLink /> render as disabled 1`] = `
|
||||
<DocumentFragment>
|
||||
<a
|
||||
aria-disabled="true"
|
||||
class="pf-c-button pf-m-link pf-m-disabled"
|
||||
data-ouia-component-id="4"
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe="true"
|
||||
href="http://hello.nl/"
|
||||
tabindex="-1"
|
||||
>
|
||||
Disabled link
|
||||
<span
|
||||
class="pf-c-button__icon pf-m-end"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<ExternalLink /> render with internal url 1`] = `
|
||||
<DocumentFragment>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-button pf-m-link"
|
||||
data-ouia-component-id="2"
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe="true"
|
||||
href="/application/home/"
|
||||
>
|
||||
Application page
|
||||
</a>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<ExternalLink /> render with link 1`] = `
|
||||
<DocumentFragment>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-button pf-m-link"
|
||||
data-ouia-component-id="0"
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe="true"
|
||||
href="http://hello.nl/"
|
||||
>
|
||||
http://hello.nl/
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
http://hello.nl/
|
||||
<span
|
||||
class="pf-c-button__icon pf-m-end"
|
||||
>
|
||||
<path
|
||||
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
@ -26,22 +100,32 @@ exports[`<ExternalLink /> render with link 1`] = `
|
|||
exports[`<ExternalLink /> render with link and title 1`] = `
|
||||
<DocumentFragment>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-button pf-m-link"
|
||||
data-ouia-component-id="1"
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe="true"
|
||||
href="http://hello.nl/"
|
||||
>
|
||||
Link to Hello
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
Link to Hello
|
||||
<span
|
||||
class="pf-c-button__icon pf-m-end"
|
||||
>
|
||||
<path
|
||||
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -21,3 +21,16 @@ export const WithoutTitle = Template.bind({});
|
|||
WithoutTitle.args = {
|
||||
href: "http://some-other-link.nl/super",
|
||||
};
|
||||
|
||||
export const ApplicationLink = Template.bind({});
|
||||
ApplicationLink.args = {
|
||||
title: "Application link",
|
||||
href: "/application/main",
|
||||
};
|
||||
|
||||
export const DisabledLink = Template.bind({});
|
||||
DisabledLink.args = {
|
||||
title: "Disabled link",
|
||||
href: "http://some-other-link.nl/super",
|
||||
isDisabled: "true",
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue