Email updates v2

src/lib/components/EmailUpdates/EmailUpdatesForm.svelte

@@ -0,0 +1,239 @@
+<script>
+  import Grid from '$lib/components/Grid.svelte';
+  import { EMAIL_CATEGORIES, createEmailUpdatesForm } from '$lib/email-updates.js';
+
+  export let defaultCategory;
+  export let title;
+  export let margin;
+  export let askForCar = false;
+
+  const { email, car, selectedCategories, status, errorMessage, submit } = createEmailUpdatesForm();
+
+  let everything = true;
+
+  $: primaryCategory = EMAIL_CATEGORIES.find(({ key }) => key === defaultCategory);
+  $: $selectedCategories = everything ? EMAIL_CATEGORIES.map(({ key }) => key) : [defaultCategory];
+</script>
+
+<aside class="updates-card" style:margin>
+  <Grid
+    columnGap="4rem"
+    templateColumns="minmax(0, 1fr) minmax(22rem, 0.8fr)"
+    size="large"
+    wrapMode="single"
+  >
+    <div>
+      <h2>{title}</h2>
+      <div class="updates-subtitle"><slot /></div>
+    </div>
+
+    {#if $status === 'success'}
+      <div class="success" role="status">
+        <strong>Thanks for signing up!</strong>
+        <span>We only send emails we would want to receive.</span>
+      </div>
+    {:else}
+      <form on:submit|preventDefault={submit}>
+        <input
+          name="email"
+          type="email"
+          autocomplete="email"
+          placeholder="Enter your email"
+          maxlength="256"
+          required
+          bind:value={$email}
+        >
+
+        {#if askForCar}
+          <div class="car-field">
+            <input
+              name="car"
+              type="text"
+              data-1p-ignore
+              placeholder="What do you drive? (optional)"
+              maxlength="120"
+              bind:value={$car}
+            >
+            <small>Add the make, model, and year and we'll email you when it's supported.</small>
+          </div>
+        {/if}
+
+        <fieldset class="category-options">
+          <label>
+            <input type="radio" name="email-categories" value={true} bind:group={everything}>
+            <span>
+              <strong>All comma updates</strong>
+              <small>New products, openpilot releases, car support, blog posts, and more</small>
+            </span>
+          </label>
+          <label>
+            <input type="radio" name="email-categories" value={false} bind:group={everything}>
+            <span>
+              <strong>Only {primaryCategory.label.toLowerCase()}</strong>
+              <small>{primaryCategory.description}</small>
+            </span>
+          </label>
+        </fieldset>
+
+        {#if $status === 'error'}
+          <p class="error" role="alert">{$errorMessage}</p>
+        {/if}
+
+        <button
+          class="submit-button"
+          type="submit"
+          disabled={$status === 'submitting' || !$email}
+        >
+          {$status === 'submitting' ? 'signing up...' : 'notify me'}
+        </button>
+      </form>
+    {/if}
+  </Grid>
+</aside>
+
+<style>
+  .updates-card {
+    margin: 3rem 0;
+    padding: 3rem;
+    background: var(--color-card-background);
+    border: 1px solid rgba(0, 0, 0, 0.4);
+  }
+
+  h2 {
+    margin: 0 0 0.75rem;
+    font-weight: 600;
+    line-height: 1.05;
+    letter-spacing: -0.06em;
+  }
+
+  .updates-subtitle :global(p) {
+    max-width: 30rem;
+    margin: 0;
+    font-size: 1.125rem;
+    line-height: 1.35;
+  }
+
+  .updates-subtitle :global(p + p) {
+    margin-top: 1.35em;
+  }
+
+  form {
+    display: grid;
+    gap: 0.75rem;
+    margin: 0;
+  }
+
+  input[type='email'],
+  .car-field input {
+    min-width: 0;
+    box-sizing: border-box;
+    padding: 1rem;
+    color: #000;
+    font: inherit;
+    background: #fff;
+    border: 1px solid #000;
+  }
+
+  input[type='email']:focus-visible,
+  .car-field input:focus-visible {
+    outline: 2px solid #000;
+    outline-offset: -3px;
+  }
+
+  .car-field {
+    display: grid;
+    gap: 0.4rem;
+  }
+
+  .car-field small {
+    font-size: 0.8125rem;
+    line-height: 1.35;
+    letter-spacing: 0;
+    opacity: 0.7;
+  }
+
+  .submit-button {
+    padding: 1rem;
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+    background: var(--color-accent);
+    border: none;
+    transition: background-color 0.2s;
+  }
+
+  .submit-button:hover,
+  .submit-button:focus-visible {
+    background: var(--color-accent-hover);
+  }
+
+  .submit-button:disabled {
+    color: #fff;
+    cursor: not-allowed;
+    background: var(--color-muted);
+  }
+
+  .category-options {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    background: #fff;
+    border: 1px solid #000;
+  }
+
+  .category-options label {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.75rem;
+    align-items: center;
+    padding: 1rem;
+    cursor: pointer;
+  }
+
+  .category-options label + label {
+    border-top: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
+  .category-options input {
+    width: 1.1rem;
+    height: 1.1rem;
+    margin: 0;
+    accent-color: #000;
+  }
+
+  .category-options label > span {
+    display: grid;
+    gap: 0.15rem;
+    justify-items: start;
+  }
+
+  .category-options small {
+    font-size: 0.875rem;
+    letter-spacing: 0;
+  }
+
+  .success {
+    display: grid;
+    gap: 0.25rem;
+    padding: 2rem;
+    font-size: 1.125rem;
+    line-height: 1.35;
+    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+    border: 1px solid rgba(48, 153, 0, 0.5);
+  }
+
+  .error {
+    margin: 0;
+    padding: 0.75rem;
+    color: #8a0d05;
+    font-size: 0.875rem;
+    background: color-mix(in srgb, var(--color-red) 10%, transparent);
+    border: 1px solid var(--color-red);
+  }
+
+  @media screen and (max-width: 768px) {
+    .updates-card {
+      padding: 2rem 1rem;
+    }
+  }
+</style>