From a640703f2da8815dc26ad1600a6f206be1624379 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Wed, 1 Jun 2022 22:10:32 +0200
Subject: feat: Initial after clean slate

---
 apps/web-shared/src/components/button.svelte | 116 +++++++++++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 apps/web-shared/src/components/button.svelte

(limited to 'apps/web-shared/src/components/button.svelte')

diff --git a/apps/web-shared/src/components/button.svelte b/apps/web-shared/src/components/button.svelte
new file mode 100644
index 0000000..5eaf19f
--- /dev/null
+++ b/apps/web-shared/src/components/button.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+    import Icon from "$shared/components/icon.svelte";
+
+    export let text = "";
+    export let title = "";
+    export let href = "";
+    export let variant: "primary"|"secondary"|"subtle" = "primary";
+    export let type: "button"|"submit"|"reset" = "button";
+    export let disabled = false;
+    export let loading = false;
+    export let icon = "";
+    export let icon_right_aligned = false;
+    export let icon_width = false;
+    export let icon_height = false;
+    export let id;
+    export let tabindex;
+    export let style;
+    
+    $: shared_props = {
+        type: type,
+        id: id || null,
+        title: title || null,
+        disabled: disabled || null,
+        tabindex: tabindex || null,
+        style: style || null,
+        "aria-controls": ($$restProps["aria-controls"] ?? "") || null,
+        class: [variant === "reset" ? "reset" : `btn btn--${variant} btn--preserve-width  ${loading ? "btn--state-b" : ""}`, $$restProps.class ?? ""].filter(Boolean).join(" "),
+    };
+</script>
+
+<template>
+    {#if href && !disabled}
+        <a {href}
+           {...shared_props}
+           on:click>
+            <span class="btn__content-a">
+                {#if icon !== ""}
+                    {#if icon_right_aligned}
+                        {text}
+                        <Icon class="{text ? 'margin-left-xxxs': ''}"
+                              width={icon_width}
+                              height={icon_height}
+                              name={icon}/>
+                    {:else}
+                        <Icon class="{text ? 'margin-left-xxxs': ''}"
+                              width={icon_width}
+                              height={icon_height}
+                              name={icon}/>
+                        {text}
+                    {/if}
+                {:else}
+                    {text}
+                {/if}
+            </span>
+            {#if variant !== "reset" && loading}
+                <span class="btn__content-b">
+                    <svg class="icon icon--is-spinning"
+                         aria-hidden="true"
+                         viewBox="0 0 16 16">
+                        <title>Loading</title>
+                        <g stroke-width="1"
+                           fill="currentColor"
+                           stroke="currentColor">
+                            <path d="M.5,8a7.5,7.5,0,1,1,1.91,5"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"/>
+                        </g>
+                    </svg>
+                </span>
+            {/if}
+        </a>
+    {:else}
+        <button {...shared_props}
+                on:click>
+            <span class="btn__content-a">
+                {#if icon !== ""}
+                    {#if icon_right_aligned}
+                        {text}
+                        <Icon class="{text ? 'margin-left-xxxs': ''}"
+                              width={icon_width}
+                              height={icon_height}
+                              name={icon}/>
+                    {:else}
+                        <Icon class="{text ? 'margin-left-xxxs': ''}"
+                              width={icon_width}
+                              height={icon_height}
+                              name={icon}/>
+                        {text}
+                    {/if}
+                {:else}
+                    {text}
+                {/if}
+            </span>
+            {#if variant !== "reset" && loading}
+                <span class="btn__content-b">
+                    <svg class="icon icon--is-spinning"
+                         aria-hidden="true"
+                         viewBox="0 0 16 16">
+                        <title>Loading</title>
+                        <g stroke-width="1"
+                           fill="currentColor"
+                           stroke="currentColor">
+                            <path d="M.5,8a7.5,7.5,0,1,1,1.91,5"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"/>
+                        </g>
+                    </svg>
+                </span>
+            {/if}
+        </button>
+    {/if}
+</template>
-- 
cgit v1.3