Merge pull request #44 from CDCgov/jw/linkbutton

Create LinkButton component
CDCgov · Nov 7, 2024 · 71dbdf3 · 71dbdf3
2 parents 1df4f9f + a89140f
commit 71dbdf3
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 35 deletions.
diff --git a/src/app/components/LinkButton/LinkButton.tsx b/src/app/components/LinkButton/LinkButton.tsx
@@ -0,0 +1,57 @@
+import Link, { LinkProps } from 'next/link';
+
+interface LinkButtonProps extends LinkProps {
+  children: React.ReactNode;
+  variant: 'primary' | 'secondary';
+  disabled?: boolean;
+}
+export function LinkButton({
+  children,
+  variant,
+  href,
+  disabled = false,
+  ...props
+}: LinkButtonProps) {
+  if (variant === 'secondary') {
+    return (
+      <Link
+        href={href}
+        className="usa-button hover:bg-red items-center justify-start gap-2.5 rounded border-2 border-[#224a58] bg-white px-5 py-3 hover:border-2"
+        {...props}
+      >
+        <span className="text-center text-base font-bold leading-none text-[#224a58]">
+          {children}
+        </span>
+      </Link>
+    );
+  }
+
+  if (disabled) {
+    return <DisabledPrimaryLink>{children}</DisabledPrimaryLink>;
+  }
+
+  return (
+    <Link
+      href={href}
+      className="usa-button hover:bg-green self-end justify-self-start bg-[#224a58]"
+      {...props}
+    >
+      <span className="text-center text-base font-bold text-white">
+        {children}
+      </span>
+    </Link>
+  );
+}
+
+type DisabledLinkProps = Pick<LinkButtonProps, 'children'>;
+
+function DisabledPrimaryLink({ children }: DisabledLinkProps) {
+  return (
+    <div
+      className="usa-button usa-button--disabled self-end justify-self-start bg-[#224a58]"
+      aria-disabled
+    >
+      <span className="text-base font-bold text-black">{children}</span>
+    </div>
+  );
+}
diff --git a/src/app/components/NavigationLink/NavigationLink.module.scss b/src/app/components/NavigationLink/NavigationLink.module.scss
diff --git a/src/app/components/NavigationLink/NavigationLink.tsx b/src/app/components/NavigationLink/NavigationLink.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import Link, { LinkProps } from 'next/link';
 import { usePathname } from 'next/navigation';
-import styles from './NavigationLink.module.scss';
 
 interface NavigationLinkProps extends Pick<LinkProps, 'href' | 'onClick'> {
   children: React.ReactNode;
@@ -12,13 +11,13 @@ export function NavigationLink({
   children,
   onClick,
 }: NavigationLinkProps) {
-  const pathname = usePathname(); // Use usePathname hook to get the current path
+  const pathname = usePathname();
   const isActive = pathname === href;
   return (
-    <Link href={href} passHref className="usa-nav__link" onClick={onClick}>
+    <Link href={href} passHref onClick={onClick}>
       <span
-        className={classNames(styles.navbarItemText, {
-          'navbar-item-active': isActive,
+        className={classNames('text-white', {
+          underline: isActive,
         })}
       >
         {children}

diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
@@ -99,7 +99,7 @@ function Left() {
       </Form>
       <Button
         type="submit"
-        className="mt-6 inline-flex h-11 items-center justify-start gap-2.5 rounded bg-[#224a58] px-5 py-3 text-right text-base font-bold text-white"
+        className="hover:bg-green mt-6 inline-flex h-11 items-center justify-start gap-2.5 rounded bg-[#224a58] px-5 py-3 text-right text-base font-bold text-white"
       >
         Send inquiry
       </Button>

diff --git a/src/app/our-products/page.tsx b/src/app/our-products/page.tsx
@@ -1,8 +1,8 @@
 import Image from 'next/image';
-import Link from 'next/link';
 import { basePath } from '../utils/constants';
 import Hero from '../components/Hero/Hero';
 import { ContentContainer } from '../components/ContentContainer/ContentContainer';
+import { LinkButton } from '../components/LinkButton/LinkButton';
 
 export default function OurProducts() {
   return (
@@ -95,13 +95,9 @@ function ProductCard({
           </p>
         </div>
       </div>
-      <Link
-        aria-disabled={linkToHref ? 'false' : 'true'}
-        href={linkToHref}
-        className="usa-button self-end justify-self-start bg-[#224a58]"
-      >
+      <LinkButton variant="primary" disabled={!linkToHref} href={linkToHref}>
         {linkText}
-      </Link>
+      </LinkButton>
     </div>
   );
 }

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,7 +4,7 @@ import { basePath } from './utils/constants';
 import Carousel from './components/Carousel/Carousel';
 import Hero from './components/Hero/Hero';
 import { ContentContainer } from './components/ContentContainer/ContentContainer';
-import Link from 'next/link';
+import { LinkButton } from './components/LinkButton/LinkButton';
 
 export default async function Home() {
   return (
@@ -88,9 +88,9 @@ function SectionTwo() {
             need for a direct connection, our products save jurisdictions time
             and effort for case investigation and analysis.
           </p>
-          <Link className="usa-button usa-button--active" href="/">
+          <LinkButton href="/our-products" variant="primary">
             Find out more about our products
-          </Link>
+          </LinkButton>
         </div>
         <Image
           className="max-h-[20rem] max-w-[30rem]"
@@ -141,14 +141,9 @@ function InvitationCta() {
             Contact our team to learn more about how our products can help
             improve your data workflows
           </div>
-          <Link
-            href="/engage-with-us"
-            className="usa-btn inline-flex items-center justify-start gap-2.5 rounded border-2 border-[#224a58] bg-white px-5 py-3"
-          >
-            <span className="text-center text-base font-bold leading-none text-[#224a58]">
-              Engage with us
-            </span>
-          </Link>
+          <LinkButton href="/engage-with-us" variant="secondary">
+            Engage with us
+          </LinkButton>
         </div>
       </GridContainer>
     </section>