✨ 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',
+        className,
-        effect ?? null,
+        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>
+<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
+                <Button url="/shop" text="Shop" color="pink" />
-                    url="/shop"
-                    text="Shop"
-                    class="button--pink"
-                />
             {/if}
             <p class="detail">
                 Posters available for {locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.

src/routes/[country]/[location]/[photo].svelte

@@ -60,15 +60,10 @@ import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
             <div class="viewer-photo__controls">
                 <ButtonCircle on:click={goToPrevious}>
-                    <IconArrow
+                    <IconArrow color="pink" flip={true} />
-                        color="pink"
-                        flip={true}
-                    />
                 </ButtonCircle>
                 <ButtonCircle on:click={goToPrevious}>
-                    <IconArrow
+                    <IconArrow color="pink" />
-                        color="pink"
-                    />
                 </ButtonCircle>
             </div>
 

src/routes/[country]/[location]/index.svelte

@@ -143,7 +143,7 @@
                     <Button url="/locations" text="Change location" class="shadow-small">
                         <IconEarth />
                     </Button>
-                    <Button url="/shop" text="Buy the poster" class="button--pink shadow-small">
+                    <Button url="/shop" text="Buy the poster" color="pink" class="shadow-small">
                         <!-- <IconEarth /> -->
                     </Button>
                 </div>

src/routes/photos.svelte

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

src/style/molecules/_newsletter-form.scss

@@ -37,19 +37,12 @@
             }
         }
         button {
-            display: flex;
-            justify-content: center;
-            align-items: center;
             position: absolute;
             right: 16px;
             top: 50%;
             transform: translateY(-50%);
             margin-left: 32px;
-            background-color: $color-secondary;
-            height: 32px;
-            width: 32px;
             flex-shrink: 0;
-            border-radius: 100vh;
         }
 
         // States