✨ Rework buttons classes and variants

Add a conditional class and list props as BEM class modifiers

src/components/atoms/Button.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
     import SplitText from '$components/SplitText.svelte'
 
-    export let text: string
     export let tag: string = 'a'
-    export let effect: string = 'link-3d'
+    export let text: string
     export let url: string = undefined
+    export let color: string = undefined
+    export let size: string = undefined
+    export let effect: string = 'link-3d'
     export let disabled: boolean = undefined
 
+    const className = 'button'
     const classes = [
-        'button',
-        effect ?? null,
+        className,
+        effect ? effect : undefined,
+        ...[color, size].map(variant => variant && `${className}--${variant}`),
         $$props.class
     ].join(' ').trim()
 </script>

src/components/atoms/ButtonCircle.svelte

@@ -1,7 +1,26 @@
 <script lang="ts">
+    export let color: string = undefined
+    export let size: string = undefined
+    export let type: string = undefined
+    export let form: string = undefined
+    export let clone: boolean = false
 
+    const className = 'button-circle'
+    const classes = [
+        className,
+        ...[color, size].map(variant => variant && `${className}--${variant}`),
+        $$props.class
+    ].join(' ').trim()
 </script>
 
-<button class="button-circle" on:click>
-    <slot />
+<button {type} {form} class={classes} on:click>
+    {#if clone}
+        {#each Array(2) as _}
+            <span class="clone">
+                <slot />
+            </span>
+        {/each}
+    {:else}
+        <slot />
+    {/if}
 </button>

src/components/molecules/EmailForm.svelte

@@ -2,6 +2,7 @@
     import { getContext } from 'svelte'
     // Components
     import IconArrow from '$components/atoms/IconArrow.svelte'
+    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
     export let past: boolean = false
 
@@ -20,9 +21,13 @@
                 on:focus={toggleFocus}
                 on:blur={toggleFocus}
             >
-            <button type="submit" form="sib-form">
+            <ButtonCircle
+                type="submit" form="sib-form"
+                color="pink" size="small"
+                clone={true}
+            >
                 <IconArrow color="white" />
-            </button>
+            </ButtonCircle>
         </div>
 
         <input type="text" name="email_address_check" value="" style="display: none;">

src/components/organisms/Locations.svelte

@@ -47,7 +47,7 @@
         {#each continents as { name, slug }}
             <li class:is-disabled={currentContinent && currentContinent !== slug}>
                 <Button
-                    tag="button" text={name} class="button--small"
+                    tag="button" text={name} size="small"
                     on:click={() => filterLocation(slug)}
                 />
             </li>

src/components/organisms/Shop.svelte

@@ -29,11 +29,7 @@
             <h3 class="title-medium">{shop.module_title}</h3>
             <p class="text-small">{shop.module_text}</p>
             {#if shop.enabled}
-                <Button
-                    url="/shop"
-                    text="Shop"
-                    class="button--pink"
-                />
+                <Button url="/shop" text="Shop" color="pink" />
             {/if}
             <p class="detail">
                 Posters available for {locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.