Make newsletter form a reusable component

src/components/molecules/EmailForm.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    // Components
+    import IconArrow from '$components/atoms/IconArrow.svelte'
+
+    export let past: boolean = false
+
+    const { settings: { newsletter_url }}: any = getContext('global')
+
+    let inputInFocus = false
+
+    // Toggle input focus
+    const toggleFocus = () => inputInFocus = !inputInFocus
+</script>
+
+<div class="newsletter-form">
+    <form method="POST" action={newsletter_url} id="sib-form" target="_blank">
+        <div class="newsletter-form__email" class:is-focused={inputInFocus}>
+            <input type="email" placeholder="Your email address" name="EMAIL" id="SUB_EMAIL" required
+                on:focus={toggleFocus}
+                on:blur={toggleFocus}
+            >
+            <button type="submit" form="sib-form">
+                <IconArrow color="white" />
+            </button>
+        </div>
+
+        <input type="text" name="email_address_check" value="" style="display: none;">
+        <input type="hidden" name="locale" value="en">
+        <input type="hidden" name="html_type" value="simple">
+    </form>
+
+    <div class="newsletter-form__bottom">
+        {#if past}
+            <a href="/subscribe" class="past-issues">
+                <svg width="20" height="16" viewBox="0 0 20 16" fill="#333" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
+                </svg>
+                <span>See past issues</span>
+            </a>
+        {/if}
+        <p>No spam, we promise!</p>
+    </div>
+</div>

src/components/organisms/Newsletter.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components
-    import IconArrow from '$components/atoms/IconArrow.svelte'
+    import EmailForm from '$components/molecules/EmailForm.svelte'
 
     export let theme: string = 'default'
 
-    const { settings: { newsletter_url, newsletter_text, newsletter_subtitle }}: any = getContext('global')
+    const { settings: { newsletter_text, newsletter_subtitle }}: any = getContext('global')
-
-    let inputInFocus = false
-
-    // Toggle input focus
-    const toggleFocus = () => inputInFocus = !inputInFocus
 </script>
 
 <div class="newsletter newsletter--{theme} shadow-box-dark">
@@ -20,30 +15,6 @@
         </h3>
         <p class="text-small">{newsletter_text}</p>
 
-        <form method="POST" action={newsletter_url} id="sib-form" target="_blank">
+        <EmailForm past={true} />
-            <div class="newsletter__email" class:is-focused={inputInFocus}>
-                <input type="email" placeholder="Your email address" name="EMAIL" id="SUB_EMAIL" required
-                    on:focus={toggleFocus}
-                    on:blur={toggleFocus}
-                >
-                <button type="submit" form="sib-form">
-                    <IconArrow color="white" />
-                </button>
-            </div>
-
-            <input type="text" name="email_address_check" value="" style="display: none;">
-            <input type="hidden" name="locale" value="en">
-            <input type="hidden" name="html_type" value="simple">
-        </form>
-
-        <div class="past-issues">
-            <a href="/subscribe">
-                <svg width="20" height="16" viewBox="0 0 20 16" fill="#333" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
-                </svg>
-                <span>See past issues</span>
-            </a>
-            <p>No spam, we promise!</p>
-        </div>
     </div>
 </div>

src/routes/subscribe.svelte

@@ -4,6 +4,8 @@
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
     import Heading from '$components/molecules/Heading.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte';
+    import EmailForm from '$components/molecules/EmailForm.svelte';
 
     export let issues: any
 </script>
@@ -19,6 +21,8 @@
         text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below."
     />
 
+    <EmailForm />
+
     <section class="subscribe__issues">
         <h2 class="title-small">Past Issues</h2>
         <ul>
@@ -38,6 +42,8 @@
             {/each}
         </ul>
     </section>
+
+    <InteractiveGlobe type="cropped" />
 </main>
 
 

src/style/molecules/_newsletter-form.scss

@@ -0,0 +1,107 @@
+// Email Form
+.newsletter-form {
+    &__email {
+        position: relative;
+        width: 100%;
+        max-width: 600px;
+        height: 56px;
+        margin-bottom: 20px;
+        padding: 0 24px;
+        border-radius: 100vh;
+        box-shadow: inset 0 0 0 2px $color-secondary;
+        transition: box-shadow 0.6s var(--ease-quart);
+
+        @include bp (sm) {
+            height: 64px;
+            padding: 0 30px;
+        }
+
+        input {
+            display: block;
+            width: 100%;
+            height: 100%;
+            font-size: rem(16px);
+            font-family: $font-sans;
+            font-weight: 300;
+            color: #333;
+            background: none;
+            border: none;
+
+            @include bp (sm) {
+                font-size: rem(18px);
+            }
+
+            &::placeholder {
+                color: $color-gray;
+                opacity: 1;
+            }
+        }
+        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
+        &.is-focused {
+            box-shadow: inset 0 0 0 4px $color-secondary;
+        }
+    }
+
+    // Bottom details
+    &__bottom {
+        display: block;
+        text-align: center;
+        font-size: rem(14px);
+        max-width: 600px;
+
+        @include bp (sm) {
+            display: flex;
+            justify-content: center;
+            font-size: rem(16px);
+        }
+
+        .past-issues {
+            display: inline-flex;
+            align-items: center;
+            margin: 0 auto auto 0;
+            text-decoration: none;
+            color: $color-text;
+
+            span {
+                display: block;
+                padding-bottom: 2px;
+                font-size: rem(14px);
+                color: $color-text;
+                margin-left: 8px;
+                border-bottom: 1px solid $color-text;
+
+                @include bp (sm) {
+                    margin-left: 12px;
+                    padding-bottom: 0;
+                    font-size: rem(16px);
+                }
+            }
+        }
+        p {
+            color: $color-gray;
+            line-height: 1.3;
+            margin-top: 16px;
+            margin-bottom: 0;
+
+            @include bp (sm) {
+                margin-top: 0;
+            }
+        }
+    }
+}

src/style/organisms/_newsletter.scss

@@ -35,106 +35,6 @@
         }
     }
 
-    // Form
-    &__email {
-        position: relative;
-        display: flex;
-        width: 100%;
-        max-width: 600px;
-        height: 64px;
-        margin-bottom: 20px;
-        padding: 0 30px;
-        border-radius: 100vh;
-        box-shadow: inset 0 0 0 2px $color-secondary;
-        transition: box-shadow 0.6s var(--ease-quart);
-
-        input {
-            display: block;
-            width: 100%;
-            font-size: rem(18px);
-            font-family: $font-sans;
-            font-weight: 300;
-            color: #333;
-            background: none;
-            border: none;
-
-            &::placeholder {
-                color: $color-gray;
-                opacity: 1;
-            }
-        }
-        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
-        &.is-focused {
-            box-shadow: inset 0 0 0 4px $color-secondary;
-        }
-    }
-
-    // Past Issues
-    .past-issues {
-        display: block;
-        text-align: center;
-        font-size: rem(14px);
-        max-width: 600px;
-
-        @include bp (sm) {
-            display: flex;
-            justify-content: space-between;
-            font-size: rem(16px);
-        }
-
-        a {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-decoration: none;
-            color: $color-text;
-
-            @include bp (sm) {
-                justify-content: start;
-            }
-        }
-        span {
-            display: block;
-            padding-bottom: 2px;
-            font-size: rem(14px);
-            color: $color-text;
-            margin-left: 8px;
-            border-bottom: 1px solid $color-text;
-
-            @include bp (sm) {
-                margin-left: 12px;
-                padding-bottom: 0;
-                font-size: rem(16px);
-            }
-        }
-        p {
-            color: $color-gray;
-            line-height: 1.3;
-            margin-top: 16px;
-            margin-bottom: 0;
-
-            @include bp (sm) {
-                margin-top: 0;
-            }
-        }
-    }
-
     // Variants
     // Default color
     &--default {

src/style/pages/_subscribe.scss

@@ -12,6 +12,34 @@
         }
     }
 
+    // Email Form
+    .newsletter-form {
+        margin: 42px auto 70px;
+        padding: 0 20px;
+        max-width: max(432px, 70%);
+
+        @include bp (sm) {
+            max-width: 560px;
+            margin-top: 0;
+            margin-bottom: 120px;
+        }
+
+        &__email {
+            input {
+                color: #fff;
+
+                &::placeholder {
+                    color: rgba($color-tertiary, 0.6);
+                }
+            }
+        }
+        &__bottom {
+            p {
+                color: rgba($color-tertiary, 0.6);
+            }
+        }
+    }
+
     // Past Issues
     &__issues {
         margin: 64px auto 0;
@@ -46,4 +74,12 @@
             }
         }
     }
+
+    .globe--cropped {
+        margin-top: 96px;
+
+        @include bp (sm) {
+            margin-top: 156px;
+        }
+    }
 }

src/style/style.scss

@@ -47,6 +47,7 @@
 @import "molecules/switcher";
 @import "molecules/heading";
 @import "molecules/issue";
+@import "molecules/newsletter-form";
 
 // Organisms
 @import "organisms/locations";