Merge pull request #212 from starboardcoop/ui/donate

ui/donate
pvdthings · Jan 9, 2023 · b372f05 · b372f05
2 parents 4c87f80 + c1cf993
commit b372f05
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 20 deletions.
diff --git a/src/lib/Foundation.svelte b/src/lib/Foundation.svelte
@@ -1,7 +1,5 @@
 <script context="module">
     export { default as Button } from "./foundation/Button.svelte";
-    export { default as ButtonTheme } from "./foundation/buttonTheme";
-
     export { default as Card } from "./foundation/Card.svelte";
     export { default as Column } from "./foundation/Column.svelte";
     export { default as Image } from "./foundation/Image.svelte";

diff --git a/src/lib/foundation/Button.svelte b/src/lib/foundation/Button.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
-    import ButtonTheme from './buttonTheme';
+    import { ButtonSize, ButtonTheme } from './button';
 
     export let text: string = 'Button';
     export let icon: string = null;
     export let selectedIcon: string = null;
     export let selected: boolean = false;
     export let theme: ButtonTheme = ButtonTheme.default;
+    export let size: ButtonSize = ButtonSize.normal;
+    export let flat: boolean = false;
+
+    const padding = size === ButtonSize.normal ? 'px-3 py-1' : 'px-2';
 
     const isToggled = (providedTheme: ButtonTheme) => theme === providedTheme && selected;
 
@@ -21,16 +25,16 @@
     on:click={onClick}
     class:default={theme === ButtonTheme.default}
     class:defaultToggled={isToggled(ButtonTheme.default)}
-    class:alert={theme === ButtonTheme.alert}
-    class:alertToggled={isToggled(ButtonTheme.alert)}
-    class="px-3 py-1 rounded brutal hovers font-bold font-display outline-none">
+    class:primary={theme === ButtonTheme.primary}
+    class:primaryToggled={isToggled(ButtonTheme.primary)}
+    class="{padding} rounded brutal {!flat && 'hovers'} font-bold font-display outline-none">
         {#if icon && !selected}
             <img class="icon" src={icon} alt={text} />
         {/if}
         {#if selectedIcon && selected}
             <img class="icon" src={selectedIcon} alt={text} />
         {/if}
-        {text}
+        <slot />
 </button>
 
 <style lang="postcss">
@@ -42,12 +46,12 @@
         @apply bg-primary !important;
     }
 
-    button.alert {
-        @apply bg-red-100;
+    button.primary {
+        @apply bg-primary;
     }
 
-    button.alertToggled {
-        @apply bg-red-300 !important;
+    button.primaryToggled {
+        @apply bg-primary;
     }
 
     img.icon {

diff --git a/src/lib/foundation/button.ts b/src/lib/foundation/button.ts
@@ -0,0 +1,9 @@
+export enum ButtonTheme {
+    default,
+    primary
+}
+
+export enum ButtonSize {
+    normal,
+    small
+}
diff --git a/src/lib/foundation/buttonTheme.ts b/src/lib/foundation/buttonTheme.ts
diff --git a/src/lib/things/Thing.svelte b/src/lib/things/Thing.svelte
@@ -5,6 +5,8 @@
 
     let className = "";
     export { className as class };
+
+    const donateURL = `https://airtable.com/shrwMSrzvSLpQgQWC?prefill_Description=${encodeURIComponent(thing.name)}`;
 </script>
 
 <div class="flex flex-col {className}">
@@ -17,7 +19,7 @@
             {#if thing.stock > 0}
                 <div class="px-2 py-1 rounded bg-green-300 w-max font-medium text-sm">Available</div>
             {:else}
-                <div class="px-2 py-1 rounded bg-yellow-300 w-max font-medium text-sm">Wish List</div>
+                <a class="px-2 py-1 rounded brutal hover:hovers-static bg-primary w-max font-bold font-display text-sm" href={donateURL} target="_blank" rel="noreferrer">Donate</a>
             {/if}
         </div>
     </div>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -2,7 +2,8 @@
 	import { onMount } from "svelte";
     import { filter } from "$lib/filters";
     import Things from "$lib/things/Things.svelte";
-    import { Button, ButtonTheme, TextInput } from "$lib/Foundation.svelte";
+    import { Button, TextInput } from "$lib/Foundation.svelte";
+    import { ButtonTheme } from "$lib/foundation/button";
     import LoadingIndicator from "$lib/LoadingIndicator.svelte";
 	import Chooser from "$lib/foundation/Chooser.svelte";
     import EyeOffIcon from "$lib/icons/eye-off.svg";
@@ -44,7 +45,15 @@
             <div class="flex flex-row gap-4 justify-between md:justify-start">
                 <Chooser on:chosen={filterThingsByCategory} options={data.categories} />
                 {#key showingOnlyWishList}
-                    <Button icon={EyeOffIcon} selectedIcon={EyeIcon} on:click={toggleWishList} theme={ButtonTheme.default} text="Wish List" selected={showingOnlyWishList} />
+                    <Button
+                        icon={EyeOffIcon} 
+                        selectedIcon={EyeIcon} 
+                        on:click={toggleWishList} 
+                        theme={ButtonTheme.default} 
+                        text="Wish List" 
+                        selected={showingOnlyWishList}>
+                        Wish List
+                    </Button>
                 {/key}
             </div>
             <TextInput