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>