libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Merge pull request #109 from srambach/98-external-link-spacing

Browse source 
External link fixes for a11y and spacing
This commit is contained in:
Eugenia 2020-09-23 15:56:22 -04:00 committed by GitHub
commit 7a7615af63
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 283 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

272
src/clients/__tests__/__snapshots__/ClientList.test.tsx.snap
View file

@ -96,23 +96,31 @@ Object {
data-label="homeURL"
>
<a
aria-disabled="false"
class="pf-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-1"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
href="http://blog.nerdin.chrealms/master/account/"
>
http://blog.nerdin.chrealms/master/account/
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
<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"
/>
</svg>
</span>
</a>
</td>
<td
@ -187,23 +195,31 @@ Object {
data-label="homeURL"
>
<a
aria-disabled="false"
class="pf-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-2"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
href="http://blog.nerdin.chrealms/master/account/"
>
http://blog.nerdin.chrealms/master/account/
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
<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"
/>
</svg>
</span>
</a>
</td>
<td
@ -495,23 +511,31 @@ Object {
data-label="homeURL"
>
<a
aria-disabled="false"
class="pf-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-3"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
href="http://localhost:8080/"
>
http://localhost:8080/
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
<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"
/>
</svg>
</span>
</a>
</td>
<td
@ -657,23 +681,31 @@ Object {
data-label="homeURL"
>
<a
aria-disabled="false"
class="pf-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-4"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
href="http://blog.nerdin.chadmin/master/console/"
>
http://blog.nerdin.chadmin/master/console/
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
<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"
/>
</svg>
</span>
</a>
</td>
<td
@ -812,23 +844,31 @@ Object {
data-label="homeURL"
>
<a
aria-disabled="false"
class="pf-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-1"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
href="http://blog.nerdin.chrealms/master/account/"
>
http://blog.nerdin.chrealms/master/account/
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
<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"
/>
</svg>
</span>
</a>
</td>
<td
@ -903,23 +943,31 @@ Object {
data-label="homeURL"
>
<a
aria-disabled="false"
class="pf-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-2"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
href="http://blog.nerdin.chrealms/master/account/"
>
http://blog.nerdin.chrealms/master/account/
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
<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"
/>
</svg>
</span>
</a>
</td>
<td
@ -1211,23 +1259,31 @@ Object {
data-label="homeURL"
>
<a
aria-disabled="false"
class="pf-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-3"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
href="http://localhost:8080/"
>
http://localhost:8080/
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
<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"
/>
</svg>
</span>
</a>
</td>
<td
@ -1373,23 +1429,31 @@ Object {
data-label="homeURL"
>
<a
aria-disabled="false"
class="pf-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-4"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
href="http://blog.nerdin.chadmin/master/console/"
>
http://blog.nerdin.chadmin/master/console/
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
<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"
/>
</svg>
</span>
</a>
</td>
<td

21
src/components/external-link/ExternalLink.tsx
View file

@ -1,15 +1,18 @@
import React from "react";
import { ExternalLinkAltIcon } from "@patternfly/react-icons";
import { Button, ButtonProps } from "@patternfly/react-core";
export const ExternalLink = ({
title,
href,
...rest
}: React.HTMLProps<HTMLAnchorElement>) => {
export const ExternalLink = ({ title, href, ...rest }: ButtonProps) => {
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
src/components/external-link/__tests__/ExternalLink.test.tsx
View file

@ -14,4 +14,18 @@ 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();
});
});

100
src/components/external-link/__tests__/__snapshots__/ExternalLink.test.tsx.snap
View file

@ -1,24 +1,63 @@
// 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="OUIA-Generated-Button-link-4"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
href="/application/main"
>
Application link
</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="OUIA-Generated-Button-link-3"
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="OUIA-Generated-Button-link-1"
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"
/>
</svg>
</span>
</a>
</DocumentFragment>
`;
@ -26,22 +65,31 @@ 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="OUIA-Generated-Button-link-2"
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"
/>
</svg>
</span>
</a>
</DocumentFragment>
`;

18
src/stories/ExternalLink.stories.tsx
View file

@ -1,15 +1,14 @@
import React from "react";
import { Meta, Story } from "@storybook/react";
import { ExternalLink } from "../components/external-link/ExternalLink";
import { ButtonProps } from "@patternfly/react-core";
export default {
title: "External link",
component: ExternalLink,
} as Meta;
const Template: Story<React.HTMLProps<HTMLAnchorElement>> = (args) => (
<ExternalLink {...args} />
);
const Template: Story<ButtonProps> = (args) => <ExternalLink {...args} />;
export const WithTitle = Template.bind({});
WithTitle.args = {
@ -21,3 +20,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",
isAriaDisabled: true,
};