feat(ui): SegmentedControl component (#377)

See: https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/

***

* Fix comment
* Update ui/DesignSystem/Component/SegmentedControl.svelte
Co-authored-by: Julien Donck <julien@monadic.xyz>

* Use event dispatcher
* Only show active when not hovered
Co-authored-by: Rūdolfs Ošiņš <rudolfs@osins.org>
Co-authored-by: Julien Donck <julien@monadic.xyz>

ui/DesignSystem/Component/SegmentedControl.svelte

@@ -0,0 +1,59 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  // Currently active option.
+  export let active = null;
+  // The available options.
+  export let options = null;
+
+  const onClick = (option) => {
+    dispatch("select", option);
+    currentlyActive = option.value;
+  };
+
+  $: currentlyActive = active;
+</script>
+
+<style>
+  .segmented-control {
+    display: flex;
+  }
+  .segmented-control:hover button.active:not(:hover) {
+    background: none;
+  }
+  .segmented-control button {
+    cursor: pointer;
+    padding: 8px 16px;
+    border-radius: 4px;
+    margin: 0;
+    background-color: var(--color-background);
+    color: var(--color-foreground-level-6);
+    font-family: var(--typeface-medium);
+  }
+  .segmented-control button:focus {
+    outline: none;
+  }
+  .segmented-control button.active {
+    background-color: var(--color-foreground-level-1);
+    color: var(--color-secondary);
+  }
+  .segmented-control button:hover {
+    background-color: var(--color-foreground-level-1);
+  }
+  .segmented-control button:active {
+    background-color: var(--color-foreground-level-1);
+    color: var(--color-secondary-level-2);
+  }
+</style>
+
+<div class="segmented-control">
+  {#each options as option}
+    <button
+      class:active={option.value === currentlyActive}
+      value={option.value}
+      on:click={() => onClick(option)}>
+      {option.title}
+    </button>
+  {/each}
+</div>

ui/DesignSystem/Component/index.js

@@ -13,6 +13,7 @@ import Rad from "./Rad.svelte";
 import RadioOption from "./RadioOption.svelte";
 import StepModalLayout from "./Registration/StepModalLayout.svelte";
 import Remote from "./Remote.svelte";
+import SegmentedControl from "./SegmentedControl.svelte";
 import Sidebar from "./Sidebar.svelte";
 import SidebarLayout from "./SidebarLayout.svelte";
 import Stats from "./Stats.svelte";
@@ -43,6 +44,7 @@ export {
   StepModalLayout,
   Remote,
   Row,
+  SegmentedControl,
   Sidebar,
   SidebarLayout,
   StepCounter,

ui/Screen/DesignSystemGuide.svelte

@@ -21,6 +21,7 @@
     ProjectCard,
     Rad,
     Row,
+    SegmentedControl,
     Stats,
     StepCounter,
     TrackToggle,
@@ -228,6 +229,21 @@
     },
   ];
 
+  const segmentedControlOptions = [
+    {
+      title: "Open",
+      value: 0,
+    },
+    {
+      title: "Closed",
+      value: 1,
+    },
+    {
+      title: "All",
+      value: 2,
+    },
+  ];
+
   const stats = [
     { icon: Icon.Commit, count: 12 },
     { icon: Icon.Branch, count: 1 },
@@ -855,6 +871,13 @@
         <TrackToggle peerCount="2.3k" />
       </Swatch>
 
+      <Swatch>
+        <SegmentedControl
+          active={1}
+          options={segmentedControlOptions}
+          on:select={() => console.log('event(select)')} />
+      </Swatch>
+
       <Swatch>
         <Stats {stats} />
       </Swatch>