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

* SUP-192 | @rebeccahongsf | update media caption link styles * fixup media caption and add spacer * remove redundant className * add custom color bay light light and sand * fixup format * replace button class to prevent loop
SU-SWS · May 3, 2024 · e00d526 · e00d526
1 parent bd7e632
commit e00d526
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 18 deletions.
diff --git a/src/components/elements/action-link.tsx b/src/components/elements/action-link.tsx
@@ -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";
 
@@ -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>
   )
 }

diff --git a/src/components/elements/button.tsx b/src/components/elements/button.tsx
@@ -80,7 +80,7 @@ export const Button = ({
   return (
     <Link
       href={href}
-      className={twMerge(standardClasses, className)}
+      className={twMerge(standardClasses, className?.replace("button", ""))}
       {...props}
     >
       {children}

diff --git a/src/components/elements/link.tsx b/src/components/elements/link.tsx
@@ -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(/\/$/, "");
@@ -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}
@@ -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"/>

diff --git a/src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx b/src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx
@@ -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>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -44,10 +44,12 @@ module.exports = {
       scale: {
         '-100': '-1',
       },
-      colors: {
-        'press-indigo': '#003D69',
-        'press-grass': '#00593E',
-      },
+    },
+    colors: {
+      'press-indigo': '#003D69',
+      'press-grass': '#00593E',
+      'press-bay-light-light': '#a0d2bf',
+      'press-sand': '#9c9286',
     },
   },
   plugins: [