From b6d6955b3914c73cdf0ebcf365f88b05629aacfb Mon Sep 17 00:00:00 2001
From: venashial <venashial.levo@aleeas.com>
Date: Sun, 20 Mar 2022 11:14:46 -0700
Subject: [PATCH] Add Chips component

---
 .github/workflows/release.yml                 |  2 +-
 src/lib/components/Button.svelte              |  8 +--
 src/lib/components/Chips.svelte               | 49 +++++++++++++
 .../_internal/components/Example.svelte       |  2 +
 .../_internal/components/Sidebar.svelte       |  2 +-
 src/routes/components/Chips.md                | 71 +++++++++++++++++++
 6 files changed, 128 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/Chips.svelte
 create mode 100644 src/routes/components/Chips.md

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 2c457c0cd..e88d3826c 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -46,5 +46,5 @@ jobs:
 
       - uses: EndBug/add-and-commit@v9
         with:
-          message: '(bot) Bump package version [skip ci]'
+          message: 'Bump package version [skip ci]'
           default_author: github_actions
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 5f222eba7..e5e17f737 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -22,19 +22,19 @@
 </script>
 
 {#if as === 'button'}
-    <button class={className} {disabled}>
+    <button class={className} {disabled} on:click>
         <slot/>
     </button>
 {:else if as === 'a'}
-    <a class={className} {href} {disabled}>
+    <a class={className} {href} {disabled} on:click>
         <slot/>
     </a>
 {:else if as === 'summary'}
-    <summary class={className} {disabled}>
+    <summary class={className} {disabled} on:click>
         <slot/>
     </summary>
 {:else if as === 'input'}
-    <input class={className} {value} {disabled}/>
+    <input class={className} {value} {disabled} on:click/>
 {/if}
 
 <style lang="postcss">
diff --git a/src/lib/components/Chips.svelte b/src/lib/components/Chips.svelte
new file mode 100644
index 000000000..4e8c1c2ab
--- /dev/null
+++ b/src/lib/components/Chips.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Button from "./Button.svelte";
+  import IconCheck from 'virtual:icons/heroicons-outline/check'
+
+  interface Option {
+    label: string;
+    value: string | number;
+  }
+
+  export let options: Option[] = [];
+  export let value: string | number;
+  // If set to true, one chip is always selected
+  export let neverEmpty = false;
+
+  let selected: Option | null = options.find((option) => option.value === (value || ''));
+
+  $: if (selected) {
+    value = selected.value;
+  } else {
+    value = ''
+  }
+</script>
+
+<div class="chips">
+  {#each options as option}
+    {@const isSelected = selected?.value === option.value}
+    <Button
+      color={isSelected ? 'primary-light' : undefined}
+      on:click={() => {
+        console.log(option)
+        isSelected && !neverEmpty
+          ? selected = null
+          : selected = option
+      }}
+    >
+      {#if isSelected}
+        <IconCheck />
+      {/if}
+      {option.label}
+    </Button>
+  {/each}
+</div>
+
+<style lang="postcss">
+  .chips {
+    display: flex;
+    grid-gap: 0.5rem;
+  }
+</style>
diff --git a/src/routes/_internal/components/Example.svelte b/src/routes/_internal/components/Example.svelte
index 3fb2bc177..1303fe1f4 100644
--- a/src/routes/_internal/components/Example.svelte
+++ b/src/routes/_internal/components/Example.svelte
@@ -17,6 +17,8 @@
 
 <style lang="postcss">
     .example {
+        margin-bottom: 32px;
+
         &__preview {
             padding: 16px;
             border-radius: var(--rounded-sm-top);
diff --git a/src/routes/_internal/components/Sidebar.svelte b/src/routes/_internal/components/Sidebar.svelte
index 93e4cc1fe..35e99299f 100644
--- a/src/routes/_internal/components/Sidebar.svelte
+++ b/src/routes/_internal/components/Sidebar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar'].sort()
+    const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar', 'Chips'].sort()
 </script>
 
 <nav class="sidebar">
diff --git a/src/routes/components/Chips.md b/src/routes/components/Chips.md
new file mode 100644
index 000000000..c4fdf9286
--- /dev/null
+++ b/src/routes/components/Chips.md
@@ -0,0 +1,71 @@
+<script lang="ts">
+    import Chips from "$lib/components/Chips.svelte";
+    import Example from "../_internal/components/Example.svelte"
+
+    let foo = 'modpack'
+</script>
+
+### Simple example
+
+<Example code={`
+<Chips options={[
+    {
+        label: 'One',
+        value: 'one'
+    },
+    {
+        label: 'Two',
+        value: 'two'
+    }]}
+/>
+`}>
+<Chips options={[
+{
+label: 'One',
+value: 'one'
+},
+{
+label: 'Two',
+value: 'two'
+}]}
+/>
+</Example>
+
+
+### Force an option to be selected with `neverEmpty`
+
+<Example code={`
+<script>
+    let foo = 'modpack';
+</script>
+
+<Chips neverEmpty bind:value={foo} options={[
+    {
+        label: 'Mod',
+        value: 'mod'
+    },
+    {
+        label: 'Modpack',
+        value: 'modpack'
+    },
+    {
+        label: 'World',
+        value: 'world'
+    }]}
+/>
+`}>
+<Chips neverEmpty bind:value={foo} options={[
+{
+label: 'Mod',
+value: 'mod'
+},
+{
+label: 'Modpack',
+value: 'modpack'
+},
+{
+label: 'World',
+value: 'world'
+}]}
+/>
+</Example>
\ No newline at end of file