Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SUP-192 | @rebeccahongsf | update media caption link styles #8

Merged
merged 6 commits into from
May 3, 2024
Merged

SUP-192 | @rebeccahongsf | update media caption link styles #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4b7a609
SUP-192 | @rebeccahongsf | update media caption link styles
rebeccahongsf May 2, 2024
a7981e0
fixup media caption and add spacer
rebeccahongsf May 2, 2024
e955d15
remove redundant className
rebeccahongsf May 2, 2024
686a5f7
add custom color bay light light and sand
rebeccahongsf May 2, 2024
7cd5362
fixup format
rebeccahongsf May 3, 2024
7960a09
replace button class to prevent loop
rebeccahongsf May 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/elements/action-link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Link from "@components/elements/link";
import {ChevronRightIcon} from "@heroicons/react/20/solid";
import {ArrowLongRightIcon} from "@heroicons/react/20/solid";
import {HtmlHTMLAttributes} from "react";
import {twMerge} from "tailwind-merge";

Expand All @@ -10,11 +10,11 @@ type Props = HtmlHTMLAttributes<HTMLAnchorElement> & {
href: string
}

const ActionLink = ({children, ...props}: Props) => {
const ActionLink = ({ children, className, ...props }: Props) => {
return (
<Link {...props} className={twMerge("relative", props.className)}>
<Link {...props} className={twMerge("relative", className?.replace("link--action", ""))}>
{children}
<ChevronRightIcon height={20} className="ml-2 inline-block mb-2"/>
<ArrowLongRightIcon height={20} className="ml-2 inline-block mb-2"/>
</Link>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/elements/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const Button = ({
return (
<Link
href={href}
className={twMerge(standardClasses, className)}
className={twMerge(standardClasses, className?.replace("button", ""))}
{...props}
>
{children}
Expand Down
12 changes: 6 additions & 6 deletions src/components/elements/link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ type Props = HtmlHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & LinkPro
href: string
}

const DrupalLink = ({href, className, children, ...props}: Props) => {
const DrupalLink = ({href, children, ...props}: Props) => {
// Make sure all links have a href.
href = href || "#"
const drupalBase: string = (process.env.NEXT_PUBLIC_DRUPAL_BASE_URL || "").replace(/\/$/, "");
Expand All @@ -21,20 +21,20 @@ const DrupalLink = ({href, className, children, ...props}: Props) => {
href = href.replace(drupalBase, "").replace("<front>", "/");
}

if (className?.includes("link--action")) {
if (props.className?.includes("link--action")) {
return (
<ActionLink href={href} {...props}>
{children}
</ActionLink>
)
}

if (className?.includes("button")) {
if (props.className?.includes("button")) {
return (
<Button
href={href}
big={className.includes("--big")}
secondary={className.includes("--secondary")}
big={props.className.includes("--big")}
secondary={props.className.includes("--secondary")}
{...props}
>
{children}
Expand All @@ -43,7 +43,7 @@ const DrupalLink = ({href, className, children, ...props}: Props) => {
}

return (
<Link href={href} className={className} {...props}>
<Link href={href} {...props}>
{children}
{href.startsWith("mailto") &&
<EnvelopeIcon width={20} className="ml-4 inline-block"/>
Expand Down
6 changes: 3 additions & 3 deletions src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@ const MediaCaptionParagraph = ({paragraph, ...props}: Props) => {
}
{videoUrl && <Oembed url={videoUrl}/>}

<figcaption className="text-archway-dark">
<figcaption>
{paragraph.suMediaCaptionLink?.url &&
<Link href={paragraph.suMediaCaptionLink.url} className="link--action">
<Link href={paragraph.suMediaCaptionLink.url} className="link--action text-stone-dark hocus:text-archway-dark">
{paragraph.suMediaCaptionLink.title}
</Link>
}

<Wysiwyg html={paragraph.suMediaCaptionCaption?.processed}/>
<Wysiwyg html={paragraph.suMediaCaptionCaption?.processed} className="text-archway-dark children:text-18 rs-mb-4"/>

</figcaption>
</figure>
Expand Down
10 changes: 6 additions & 4 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,12 @@ module.exports = {
scale: {
'-100': '-1',
},
colors: {
'press-indigo': '#003D69',
'press-grass': '#00593E',
},
},
colors: {
'press-indigo': '#003D69',
'press-grass': '#00593E',
Copy link
Contributor Author

@rebeccahongsf rebeccahongsf May 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI: I stand corrected on this. I must've tested it incorrectly since the way @jenbreese had this configured originally before I made these changes in PR #5 was correct! 😃

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about adding "Magenta" and "Steel" while we're here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was able to locate the new colors press-sand and press-bay-light-light. Do you know where I can find the Magenta and Steel hex codes?
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No idea. We'll come back to it

'press-bay-light-light': '#a0d2bf',
'press-sand': '#9c9286',
},
},
plugins: [
Expand Down