Add disabled prop to ButtonLink (#1008)

- Migrates ButtonLink to Astro, and adds a disabled prop to it.
- Removes redundant ButtonWithTitle component.

See https://add-disabled-prop.ep-preview.click/programme/mentorship/ for
example

Closes #978

Author: egeakman

src/components/button-link/button-link.astro

@@ -0,0 +1,32 @@
+---
+import type React from 'react';
+
+export interface Props {
+  url?: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  secondary?: boolean;
+  isExternal?: boolean;
+}
+
+const { url, className = "", secondary = false, disabled = false, isExternal} = Astro.props;
+const resolvedIsExternal = isExternal !== undefined ? isExternal : url?.startsWith("http");
+---
+
+<a
+  class={`font-bold text-lg px-4 py-4 bg-button rounded-[60px] inline-block leading-4 hover:bg-button-hover not-prose
+    ${secondary || disabled ? "bg-primary text-white hover:bg-primary-hover" : "text-text-inverted"}
+    ${secondary ? "text-text" : ""}
+    ${className || ""}
+    ${disabled ? "opacity-50 pointer-events-none" : ""}`}
+  href={url}
+>
+  <slot />
+
+  {resolvedIsExternal && (
+    <span class="inline-block ml-1 font-system text-lg leading-4">
+      ↗
+    </span>
+  )}
+</a>

src/components/button-link/button-link.tsx

@@ -1,7 +1,7 @@
 ---
 import type { ImageMetadata } from "astro";
 import { Image } from "astro:assets";
-import { ButtonLink } from "../button-link/button-link";
+import ButtonLink from "../button-link/button-link.astro";
 
 export interface Props {
   title: string;
@@ -28,7 +28,7 @@ const { title, subtitle, url, image } = Astro.props;
     <h3 class="text-3xl font-bold mt-2 mb-4 text-primary">{title}</h3>
   </a>
   <ButtonLink
-    href={url}
+    url={url}
     className="mb-4"
     isExternal={false}
   >

src/components/button-link/index.tsx

@@ -1,5 +1,5 @@
 ---
-import { ButtonLink } from "../button-link";
+import ButtonLink from "../button-link/button-link.astro";
 import HeaderButton from "./header-button.astro";
 
 export interface Props {
@@ -15,17 +15,17 @@ const IS_LIVE = false;
   {
     !mobile ? (
       <>
-        <ButtonLink secondary href="https://www.europython-society.org/coc/">
+        <ButtonLink secondary url="https://www.europython-society.org/coc/">
           <abbr title="Code of Conduct" class="no-underline md:hidden">
             CoC
           </abbr>
           <span class="hidden md:inline">Code of Conduct</span>
         </ButtonLink>
-        <ButtonLink href="https://voting.europython.eu" className="hidden md:block">
+        <ButtonLink url="https://voting.europython.eu" className="hidden md:block">
           <span>Community vote</span>
         </ButtonLink>
         {IS_LIVE && (
-          <ButtonLink href="/live">
+          <ButtonLink url="/live">
             Live
             <span class="hidden md:inline"> 📺</span>
           </ButtonLink>

src/components/button-with-title/button-with-title.tsx

@@ -1,6 +1,6 @@
 ---
 import Prose from "../prose/prose.astro";
-import { ButtonLink } from "../button-link";
+import ButtonLink from "../button-link/button-link.astro";
 import { Title } from "../typography/title";
 import { Image } from "astro:assets";
 
@@ -31,12 +31,12 @@ import venueImage from "./prague.png";
     </Prose>
 
     <div class="space-x-4 mb-5">
-      <ButtonLink href="/where">
+      <ButtonLink url="/where">
         Where is EuroPython?
       </ButtonLink>
     </div>
     <div class="space-x-12">
-      <ButtonLink href="/explore">
+      <ButtonLink url="/explore">
         Explore Prague
       </ButtonLink>
     </div>

src/components/button-with-title/index.tsx

@@ -1,5 +1,5 @@
 ---
-import { ButtonLink } from "../button-link/button-link";
+import ButtonLink from "../button-link/button-link.astro";
 import { Title } from "../typography/title";
 import Keynoter from "./keynoter.astro";
 
@@ -120,7 +120,7 @@ const placeholders = Math.max(0, 6 - keynoters.length);
         <span class="text-body-light inline-block mr-2">#</span>
         See other sessions
       </h3>
-      <ButtonLink href="/sessions">List of Sessions</ButtonLink>
+      <ButtonLink url="/sessions">List of Sessions</ButtonLink>
     </div>
   </div>
 </section>

src/components/button/button.tsx

@@ -4,7 +4,7 @@ import { Separator } from "../separator/separator";
 import { Fragment } from "react";
 import { Fullbleed } from "../layout/fullbleed";
 
-import { ButtonLink } from "../button-link";
+import ButtonLink from "../button-link/button-link.astro";
 import { Title } from "../typography/title";
 
 import SponsorTier from "./sponsor-tier.astro";
@@ -70,7 +70,7 @@ const topTier = sponsorTiers.find((tier) => tier.name === "Keystone");
           }
 
           <div class="mt-4">
-            <ButtonLink href="/sponsor">Become a sponsor</ButtonLink>
+            <ButtonLink url="/sponsor">Become a sponsor</ButtonLink>
           </div>
         </div>
       </div>

src/components/button/index.tsx

@@ -10,7 +10,9 @@ subtitle: A set of tips to help you put together a strong, compelling EuroPython
 The Call for Proposals ran from the 10th of January to the 3rd of February 2025, 23:59 UTC.
 
 <div class="text-center">
-    <ButtonWithTitle title="Call for Reviewers Now Open" href="https://forms.gle/4GTJjwZ1nHBGetM18" text="JOIN THE REVIEWER TEAM!"></ButtonWithTitle></div>
+    ### Call for Reviewers Now Open
+    <ButtonLink url="https://forms.gle/4GTJjwZ1nHBGetM18">JOIN THE REVIEWER TEAM!</ButtonLink>
+</div>
 
 -----
 

src/components/card/card.astro

@@ -27,7 +27,7 @@ mentee what their contribution should be (that's for the mentee to decide).
 ## Mentors
 
 <div class="text-center">
-    <Button>Signup closed</Button>
+    <ButtonLink disabled>Signup closed</ButtonLink>
 </div>
 
 We expect mentors to have past speaking experience at conferences similar to
@@ -48,7 +48,7 @@ You will also be invited to join the panel of the Webinar Workshops.
 ## Mentee
 
 <div class="text-center">
-    <Button>Signup closed</Button>
+    <ButtonLink disabled>Signup closed</ButtonLink>
 </div>
 
 If you require help contributing to EuroPython, especially if you are from an

src/components/header/header-actions.astro

@@ -3,6 +3,9 @@ title: Voting
 subtitle: Your opinion for a great conference!
 ---
 
+import { Image } from "astro:assets";
+import voteOptions from "../images/voting.png";
+
 # Community Voting
 
 Welcome to EuroPython Community Voting! We want feedback about what YOU would
@@ -20,7 +23,7 @@ from Wednesday, 5 February 23:00:00 UTC
 
 until Monday, 17 February 23:59:59 UTC
 
-<ButtonLink href="https://voting.europython.eu">Cast your votes now!</ButtonLink>
+<ButtonLink url="https://voting.europython.eu">Cast your votes now!</ButtonLink>
 </div>
 
 
@@ -67,14 +70,7 @@ to receive a new confirmation link.
 
 For each submission, you can choose only one of four options
 
-<div style={{textAlign: "center", marginBottom: 8}}>
-<Button>Must see</Button>
-<Button>Want to see</Button>
-</div>
-<div style={{textAlign: "center", marginBottom: 8}}>
-<Button>Maybe</Button>
-<Button>Not interested</Button>
-</div>
+<Image src={voteOptions} alt="Vote Options" width="1200" class="w-full h-auto border-4 border-white rounded-lg shadow-lg" />
 
 - Your vote for each submission is automatically saved, but you can change it
   at any time before the voting phase ends.
@@ -93,9 +89,12 @@ programme team who curate and are responsible for the final programme, but one
 of the major factors upon which they rely, will be the preferences of the
 community through this voting process.
 
-<div style={{textAlign: "center", marginBottom: 10}}>
-<ButtonLink href="https://voting.europython.eu">Go to the community voting</ButtonLink>
-</div>
+<ButtonLink
+  url="https://voting.europython.eu"
+  className="flex justify-center mb-10"
+>
+  Go to the community voting
+</ButtonLink>
 
 
 **[Subscribe to our newsletter](https://blog.europython.eu/#/portal/signup)**

src/components/hero-section/prague.astro

@@ -3,15 +3,13 @@ import { type CollectionEntry, getCollection } from "astro:content";
 import Layout from "../layouts/Layout.astro";
 
 import Prose from "../components/prose/prose.astro";
-import { ButtonLink } from "../components/button-link";
-import { Button } from "../components/button";
+import ButtonLink from "../components/button-link/button-link.astro";
 import { Separator } from "../components/separator/separator";
 import { Map } from "../components/map";
 import { MapSprints } from "../components//map-for-sprints";
 import { YouTube } from "@astro-community/astro-embed-youtube";
 import BenefitsList from "../components/benefits-list/benefits-list.astro";
 import BenefitItem from "../components/benefits-list/benefit-item.astro";
-import { ButtonWithTitle } from "../components/button-with-title";
 import { Note } from "../components/note";
 import { SponsorTiers } from "../components/sponsor-tiers";
 
@@ -38,13 +36,11 @@ const description = post.data.subtitle;
     <Content
       components={{
         ButtonLink,
-        Button,
         Map,
         MapSprints,
         YouTube,
         BenefitItem,
         BenefitsList,
-        ButtonWithTitle,
         Note,
         SponsorTiers,
         hr: Separator,