From ecacc0c1a14a6f93c26bc440014c429442d66d65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 19 Oct 2021 17:19:05 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Rework=20buttons=20classes=20and=20?=
 =?UTF-8?q?variants?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a conditional class and list props as BEM class modifiers
---
 src/components/atoms/Button.svelte            | 12 ++++++----
 src/components/atoms/ButtonCircle.svelte      | 23 +++++++++++++++++--
 src/components/molecules/EmailForm.svelte     |  9 ++++++--
 src/components/organisms/Locations.svelte     |  2 +-
 src/components/organisms/Shop.svelte          |  6 +----
 .../[country]/[location]/[photo].svelte       |  9 ++------
 src/routes/[country]/[location]/index.svelte  |  2 +-
 src/routes/photos.svelte                      |  2 +-
 src/style/molecules/_newsletter-form.scss     |  7 ------
 9 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte
index 89c51ca..15355ba 100644
--- a/src/components/atoms/Button.svelte
+++ b/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>
diff --git a/src/components/atoms/ButtonCircle.svelte b/src/components/atoms/ButtonCircle.svelte
index 63e06ae..b02f2ef 100644
--- a/src/components/atoms/ButtonCircle.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/components/molecules/EmailForm.svelte b/src/components/molecules/EmailForm.svelte
index e22b15d..4c9f91e 100644
--- a/src/components/molecules/EmailForm.svelte
+++ b/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;">
diff --git a/src/components/organisms/Locations.svelte b/src/components/organisms/Locations.svelte
index 270e21a..140dfe6 100644
--- a/src/components/organisms/Locations.svelte
+++ b/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>
diff --git a/src/components/organisms/Shop.svelte b/src/components/organisms/Shop.svelte
index 046bba5..9befffd 100644
--- a/src/components/organisms/Shop.svelte
+++ b/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')}.
diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
index c0d8683..52d0185 100644
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/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
-                        color="pink"
-                        flip={true}
-                    />
+                    <IconArrow color="pink" flip={true} />
                 </ButtonCircle>
                 <ButtonCircle on:click={goToPrevious}>
-                    <IconArrow
-                        color="pink"
-                    />
+                    <IconArrow color="pink" />
                 </ButtonCircle>
             </div>
 
diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index 5dd8ddd..4718407 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/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>
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index ecda213..2ee4e29 100644
--- a/src/routes/photos.svelte
+++ b/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}
                     />
 
diff --git a/src/style/molecules/_newsletter-form.scss b/src/style/molecules/_newsletter-form.scss
index 19fff99..3d9c475 100644
--- a/src/style/molecules/_newsletter-form.scss
+++ b/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