Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add visual cues and remove confusing button element with no action or…
Browse files Browse the repository at this point in the history
… href, add isVisualOnly prop to Button (#141)
adriencyberspace authored Aug 15, 2024
1 parent bea240e commit a80c22d
Showing 3 changed files with 20 additions and 3 deletions.
5 changes: 4 additions & 1 deletion app/components/ui/Cards/OppEventCard.module.scss
Original file line number Diff line number Diff line change
@@ -8,7 +8,6 @@
width: 100%;
overflow: hidden;
position: relative;
cursor: pointer;

&:focus-within {
outline: 3px solid $black;
@@ -18,6 +17,10 @@
flex-direction: column;
}

&:hover {
background: $surface-secondary;
}

@media screen and (max-width: $break-tablet-l) {
flex-direction: column;
}
8 changes: 6 additions & 2 deletions app/components/ui/Cards/OppEventCard.tsx
Original file line number Diff line number Diff line change
@@ -19,6 +19,10 @@ export const OppEventCard = (props: OppEventCardProps) => {
details: { title, id, calendarEvent, imageUrl },
sectionType,
} = props;

const topLevelSlug = sectionType === "event" ? "events" : "opportunities";
const fullSlug = `/${topLevelSlug}/${id}`;

return (
<div className={`${styles.oppEventCard} ${styles[sectionType]}`}>
{imageUrl ? (
@@ -36,7 +40,7 @@ export const OppEventCard = (props: OppEventCardProps) => {
<div className={styles.content}>
<div>
<h4 className={styles.contentTitle}>
<a href={id}>{title}</a>
<a href={fullSlug}>{title}</a>
</h4>
{calendarEvent && (
<div className={styles.contentTime}>
@@ -45,7 +49,7 @@ export const OppEventCard = (props: OppEventCardProps) => {
)}
</div>

<Button arrowVariant="after" variant="linkBlue" size="lg">
<Button arrowVariant="after" variant="linkBlue" size="lg" isVisualOnly>
View more
</Button>
</div>
10 changes: 10 additions & 0 deletions app/components/ui/inline/Button/Button.tsx
Original file line number Diff line number Diff line change
@@ -22,6 +22,7 @@ export const Button = ({
disabled,
href,
mobileFullWidth = true,
isVisualOnly = false,
}: {
children: string | JSX.Element;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
@@ -37,6 +38,7 @@ export const Button = ({
iconName?: string; // use font awesome icon name without 'fa-'
href?: string;
mobileFullWidth?: boolean;
isVisualOnly?: boolean; // Maintains button styling as visual cue clickable cards but hidden to screen readers
}) => {
const buttonClass = classNames(
styles.button,
@@ -63,6 +65,14 @@ export const Button = ({
</>
);

if (isVisualOnly) {
return (
<p className={buttonClass} aria-hidden>
{content}
</p>
);
}

// Links that follow same visual guidelines as buttons
if (href) {
const isExternalLink = !href.startsWith("/");

0 comments on commit a80c22d

Please sign in to comment.