Skip to content

Migrate the rest of common components #1318

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

Open
eyeseast wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Migrate the rest of common components #1318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d62d429
Migrate Flex.svelte. Add stories. Convert it to use classes instead o…
eyeseast Apr 14, 2026
2748a0e
Migrate NavItem.svelte and update everything that uses it
eyeseast Apr 14, 2026
aa8b242
snap
eyeseast Apr 14, 2026
34135d5
Update Premium, Pin and Tip and everything they touch
eyeseast Apr 15, 2026
3064fad
Migrate <Button> and update on:click handlers everywhere it's used
eyeseast Apr 21, 2026
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
4 changes: 2 additions & 2 deletions src/lib/components/accounts/Mailkey.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,10 @@
</p>
{/if}
<Flex gap={1} wrap justify="center">
<Button mode="primary" on:click={create}>
<Button mode="primary" onclick={create}>
{$_("mailkey.create.button")}
</Button>
<Button mode="danger" on:click={destroy}>
<Button mode="danger" onclick={destroy}>
{$_("mailkey.destroy.button")}
</Button>
</Flex>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/accounts/Unverified.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ a user who is logged in but has `verified_journalist = false`.
</script>

<Tip>
<Unverified24 slot="icon" />
{#snippet icon()}<Unverified24 />{/snippet}
<p>{$_("unverified.verify")}</p>
<Flex class="buttons" gap={1}>
<Button mode="primary" href={SQUARELET_ORGS_URL} target="_blank">
Expand Down
32 changes: 20 additions & 12 deletions src/lib/components/accounts/UserMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,28 +36,36 @@
<Dropdown {position}>
{#snippet anchor()}
<NavItem title="Open Menu">
<Avatar {user} slot="start" />
{#snippet start()}
<Avatar {user} />
{/snippet}
{#if width && width > remToPx(48)}
<span class="name">{getUserName(user)}</span>
{/if}
<div class="dropdownArrow" slot="end">
{#if position.includes("bottom")}
<ChevronDown12 />
{:else}
<ChevronUp12 />
{/if}
</div>
{#snippet end()}
<div class="dropdownArrow">
{#if position.includes("bottom")}
<ChevronDown12 />
{:else}
<ChevronUp12 />
{/if}
</div>
{/snippet}
</NavItem>
{/snippet}
{#snippet inner(close)}
<Menu>
<NavItem href={SQUARELET_BASE} target="_blank" on:click={close}>
<Gear16 slot="start" />
<NavItem href={SQUARELET_BASE} target="_blank" onclick={close}>
{#snippet start()}
<Gear16 />
{/snippet}
{$_("authSection.user.acctSettings")}
</NavItem>

<NavItem href={SIGN_OUT_URL} on:click={close}>
<SignOut16 slot="start" />
<NavItem href={SIGN_OUT_URL} onclick={close}>
{#snippet start()}
<SignOut16 />
{/snippet}
{$_("authSection.user.signOut")}
</NavItem>
</Menu>
Expand Down
18 changes: 16 additions & 2 deletions src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ exports[`Mailkey 1`] = `
title=""
type="button"
>
<!---->
<svg
class="octicon octicon-x-circle"
height="24"
Expand All @@ -32,6 +33,7 @@ exports[`Mailkey 1`] = `
d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"
/>
</svg>

<!---->
</button>

Expand Down Expand Up @@ -75,7 +77,8 @@ exports[`Mailkey 1`] = `
<!---->

<div
style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
class="row align-stretch justify-center wrap svelte-vh2qhd"
style="--gap: 1rem;"
>
<!---->
<!---->
Expand All @@ -84,7 +87,9 @@ exports[`Mailkey 1`] = `
title=""
type="button"
>
<!---->
Create New Email Address

<!---->
</button>

Expand All @@ -96,7 +101,9 @@ exports[`Mailkey 1`] = `
title=""
type="button"
>
<!---->
Delete Existing Address

<!---->
</button>

Expand Down Expand Up @@ -129,6 +136,7 @@ exports[`Mailkey 2`] = `
title=""
type="button"
>
<!---->
<svg
class="octicon octicon-x-circle"
height="24"
Expand All @@ -144,6 +152,7 @@ exports[`Mailkey 2`] = `
d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"
/>
</svg>

<!---->
</button>

Expand Down Expand Up @@ -192,7 +201,8 @@ exports[`Mailkey 2`] = `
<!---->

<div
style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
class="row align-stretch justify-center wrap svelte-vh2qhd"
style="--gap: 1rem;"
>
<!---->
<!---->
Expand All @@ -201,7 +211,9 @@ exports[`Mailkey 2`] = `
title=""
type="button"
>
<!---->
Create New Email Address

<!---->
</button>

Expand All @@ -213,7 +225,9 @@ exports[`Mailkey 2`] = `
title=""
type="button"
>
<!---->
Delete Existing Address

<!---->
</button>

Expand Down
3 changes: 0 additions & 3 deletions src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ exports[`UserMenu 1`] = `

<div
class="dropdownArrow svelte-13wiold"
slot="end"
>
<svg
class="octicon octicon-chevron-down"
Expand Down Expand Up @@ -87,7 +86,6 @@ exports[`UserMenu 1`] = `
<svg
class="octicon octicon-gear"
height="16"
slot="start"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -120,7 +118,6 @@ exports[`UserMenu 1`] = `
<svg
class="octicon octicon-sign-out"
height="16"
slot="start"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down
6 changes: 2 additions & 4 deletions src/lib/components/addons/AddOnPin.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@

let endpoint = $derived(new URL(`/api/addons/${addon.id}/`, BASE_API_URL));

async function toggle(event) {
event.preventDefault();

async function toggle() {
const csrftoken = getCsrfToken();
if (!csrftoken) {
console.error("No CSRF token found");
Expand Down Expand Up @@ -62,7 +60,7 @@

<Pin
active={addon.active}
on:click={toggle}
onclick={toggle}
{size}
--fill={addon.active ? "var(--orange)" : "var(--gray-3)"}
/>
16 changes: 12 additions & 4 deletions src/lib/components/addons/AddOnsNavigation.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,31 +27,39 @@
href="/add-ons/"
--hover-background="var(--blue-2)"
>
<Infinity16 fill="var(--blue-3)" slot="start" />
{#snippet start()}
<Infinity16 fill="var(--blue-3)" />
{/snippet}
All
</NavItem>
<NavItem
active={active === "active"}
href="/add-ons/?active=true"
--hover-background="var(--orange-2)"
>
<Pin --fill="var(--orange-3)" slot="start" />
{#snippet start()}
<Pin --fill="var(--orange-3)" />
{/snippet}
Pinned
</NavItem>
<NavItem
active={active === "featured"}
href="/add-ons/?featured=true"
--hover-background="var(--yellow-2)"
>
<StarFill16 fill="var(--yellow-3)" slot="start" />
{#snippet start()}
<StarFill16 fill="var(--yellow-3)" />
{/snippet}
Featured
</NavItem>
<NavItem
active={active === "premium"}
href="/add-ons/?premium=true"
--hover-background="var(--green-2)"
>
<Premium --fill="var(--green-3)" slot="start" />
{#snippet start()}
<Premium --fill="var(--green-3)" />
{/snippet}
Premium
</NavItem>
</Flex>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/addons/DocumentList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
<Button
ghost
minW={false}
on:click={() => ($sidebars["navigation"] = true)}
onclick={() => ($sidebars["navigation"] = true)}
>
<span class="flipV">
<SidebarExpand16 />
Expand Down
4 changes: 3 additions & 1 deletion src/lib/components/addons/History.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,9 @@
<SidebarGroup>
{#snippet title()}
<NavItem>
<History16 slot="start" />
{#snippet start()}
<History16 />
{/snippet}
{$_("addonRuns.previous")}
</NavItem>
{/snippet}
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/addons/HistoryEvent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@
minW={false}
ghost
disabled={!csrftoken}
on:click={() => dismissRun()}
onclick={() => dismissRun()}
>
{$_("dialog.dismiss")}
</Button>
Expand All @@ -168,7 +168,7 @@
mode="danger"
ghost
disabled={!csrftoken}
on:click={() => cancelRun()}
onclick={() => cancelRun()}
title={$_("dialog.cancel")}
>
{$_("dialog.cancel")}
Expand Down
4 changes: 3 additions & 1 deletion src/lib/components/addons/Scheduled.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@
<SidebarGroup>
{#snippet title()}
<NavItem>
<Clock16 slot="start" />
{#snippet start()}
<Clock16 />
{/snippet}
{$_("addonRuns.scheduled")}
</NavItem>
{/snippet}
Expand Down
5 changes: 3 additions & 2 deletions src/lib/components/addons/ScheduledEvent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,10 @@

interface Props {
event: Event;
onclick?: () => void;
}

let { event }: Props = $props();
let { event, onclick }: Props = $props();

let addon = $derived(isAddon(event.addon) ? event.addon : undefined);
let disabled = $derived(event.event === 0);
Expand All @@ -44,7 +45,7 @@
}
</script>

<NavItem href={url(event)} on:click>
<NavItem href={url(event)} {onclick}>
<div class="info" class:disabled>
<p class="name">
{addon?.name}
Expand Down
11 changes: 6 additions & 5 deletions src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
exports[`AddOnsNavigation 1`] = `
<div>
<div
style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 1rem;"
class="column align-stretch justify-start nowrap svelte-vh2qhd"
style="--gap: 1rem;"
>
<header
class="header"
Expand All @@ -18,7 +19,8 @@ exports[`AddOnsNavigation 1`] = `
</header>

<div
style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0.5rem;"
class="column align-stretch justify-start nowrap svelte-vh2qhd"
style="--gap: 0.5rem;"
>
<svelte-css-wrapper
style="display: contents; --hover-background: var(--blue-2);"
Expand All @@ -33,7 +35,6 @@ exports[`AddOnsNavigation 1`] = `
class="octicon octicon-infinity"
fill="var(--blue-3)"
height="16"
slot="start"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -114,7 +115,6 @@ exports[`AddOnsNavigation 1`] = `
class="octicon octicon-star-fill"
fill="var(--yellow-3)"
height="16"
slot="start"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -192,7 +192,8 @@ exports[`AddOnsNavigation 1`] = `
<!---->

<div
style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0.5rem;"
class="column align-stretch justify-start nowrap svelte-vh2qhd"
style="--gap: 0.5rem;"
>
<svelte-css-wrapper
style="display: contents; --color: var(--gray-4);"
Expand Down
Loading
Loading