flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make newsletter form a reusable component

Browse Source
This commit is contained in:
Shelby Kay
2021-10-16 13:24:16 +02:00
parent e9e838ae1a
commit 8b07352431
7 changed files with 197 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/organisms/Newsletter.svelte
View File

@@ -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')
let inputInFocus = false
// Toggle input focus
const toggleFocus = () => inputInFocus = !inputInFocus
const { settings: { newsletter_text, newsletter_subtitle }}: any = getContext('global')
</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">
<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>
<EmailForm past={true} />
</div>
</div>