refactor: update Button to always use a size, determine tag from url

apps/website/src/components/atoms/Button.svelte

@@ -6,22 +6,23 @@
     import { cx } from 'classix'
     import SplitText from '$components/SplitText.svelte'
 
-    export let tag = 'a'
     export let text: string
     export let url: string = undefined
     export let color: string = undefined
-    export let size: string = undefined
+    export let size: 'xsmall' | 'small' | 'medium' | 'large'
     export let effect = 'link-3d'
     export let disabled: boolean = undefined
     export let slotPosition = 'before'
 
-    const className = 'button'
+    let tag: 'a' | 'button'
+    $: tag = url ? 'a' : 'button'
+
     $: classes = cx(
-        className,
+        'button',
         effect ? effect : undefined,
-        ...[color, size].map(variant => variant && `${className}--${variant}`),
+        ...[color, size].map(variant => variant && `button--${variant}`),
         Object.keys($$slots).length !== 0 ? `has-icon-${slotPosition}` : undefined,
-        $$props.class
+        $$props.class,
     )
 
     // Define external links

apps/website/src/components/layouts/PosterLayout.svelte

@@ -78,7 +78,7 @@
                 <dd class="text-info">{shopProduct.name} – {shopProduct.price}€</dd>
             </dl>
             <Button
-                tag="button"
+                size="medium"
                 text={hasStock ? 'Add to cart' : 'Sold out'}
                 color="pinklight"
                 disabled={!hasStock}

apps/website/src/components/molecules/Poster.svelte

@@ -40,7 +40,6 @@
             on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
         />
         <Button
-            tag="button"
             size="xsmall"
             text="Add to cart"
             color="pink"

apps/website/src/components/organisms/Cart.svelte

@@ -136,10 +136,10 @@
                 {#if $cartData && $cartAmount > 0 && $cartData.checkout_url}
                     <div transition:fly={{ y: 8, duration: 600, easing: quartOut }}>
                         <Button
+                            size="small"
                             url={$cartData && $cartData.checkout_url}
                             text="Checkout"
                             color="pink"
-                            size="small"
                             on:click={() => sendEvent('cartCheckout', { props: { amount: $cartAmount } })}
                         />
                     </div>

apps/website/src/components/organisms/Locations.svelte

@@ -49,7 +49,8 @@
         {#each continents as { name, slug }}
             <li class:is-active={currentContinent === slug}>
                 <Button
-                    tag="button" text={name} size="small"
+                    size="small"
+                    text={name}
                     slotPosition="after"
                     class={'is-disabled'}
                     on:click={() => {

apps/website/src/components/organisms/ShopModule.svelte

@@ -83,7 +83,7 @@
             <h2 class="title-medium">{title}</h2>
             <p class="text-small">{text}</p>
             {#if enabled}
-                <Button {url} text={buttonText} color="pinklight" />
+                <Button size="medium" {url} text={buttonText} color="pinklight" />
             {/if}
             {#if textBottom}
                 <p class="detail">{textBottom}</p>

apps/website/src/routes/(site)/[country]/[location]/+page.svelte

@@ -258,12 +258,12 @@
                 </div>
 
                 <div class="ctas">
-                    <Button url="/locations" text="Change location" class="shadow-small">
+                    <Button size="medium" url="/locations" text="Change location" class="shadow-small">
                         <IconEarth />
                     </Button>
 
                     {#if location.has_poster}
-                        <Button url="/shop/poster-{location.slug}" text="Buy the poster" color="pinklight" class="shadow-small">
+                        <Button size="medium" url="/shop/poster-{location.slug}" text="Buy the poster" color="pinklight" class="shadow-small">
                             <!-- <IconEarth /> -->
                         </Button>
                     {/if}

apps/website/src/routes/(site)/photos/+page.svelte

@@ -464,9 +464,9 @@
                     </p>
 
                     <Button
-                        tag="button"
+                        size="large"
+                        color="beige"
                         text={!ended ? 'See more photos' : "You've seen it all!"}
-                        size="large" color="beige"
                         on:click={loadMorePhotos}
                         disabled={ended}
                     />

apps/website/src/routes/+page.svelte

@@ -104,7 +104,12 @@
                 {settings.description}
             </p>
 
-            <Button url="#locations" text="Explore locations" on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}>
+            <Button
+                size="medium"
+                url="#locations"
+                text="Explore locations"
+                on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}
+            >
                 <IconEarth animate={true} />
             </Button>
         </div>

apps/website/src/style/atoms/_button.scss

@@ -1,10 +1,10 @@
 .button {
     display: inline-flex;
     align-items: center;
-    height: 40px;
-    padding: 0 16px;
     background: #fff;
-    font: 900 #{rem(16px)}/1 $font-sans;
+    font-weight: 900;
+    line-height: 1;
+    font-family: $font-sans;
     color: $color-text;
     cursor: pointer;
     border-radius: 100vh;
@@ -12,12 +12,6 @@
     text-decoration: none;
     transition: background-color 0.55s var(--ease-quart), color 0.55s var(--ease-quart);
 
-    @include bp (md) {
-        height: 48px;
-        padding: 1px 24px 0;
-        font-size: rem(18px);
-    }
-
     // Icon
     :global(img), :global(svg) {
         display: block;
@@ -68,6 +62,18 @@
         }
     }
 
+    // Medium
+    &--medium {
+        height: 40px;
+        padding: 0 16px;
+        font-size: rem(16px);
+
+        @include bp (md) {
+            height: 48px;
+            font-size: rem(18px);
+        }
+    }
+
     // Large
     &--large {
         height: 56px;