add carrier switch to Identification

src/lib/components/ShipEdit/Identification.story.svelte

@@ -8,10 +8,18 @@
       mass: 13,
       usedMass: 9,
     }}
+    {api}
   />
 </Hst.Story>
 
 <script lang="ts">
   export let Hst;
+  import { logEvent } from "histoire/client";
   import Identification from "./Identification.svelte";
+
+  const api = {
+    dispatch: {
+      setCarrier: (isCarrier) => logEvent("isCarrier", { isCarrier }),
+    },
+  };
 </script>

src/lib/components/ShipEdit/Identification.svelte

@@ -10,6 +10,14 @@
       <label class="active">ship type</label>
       <i>arrow_drop_down</i>
     </Field>
+    <label class="switch icon">
+      <div>carrier</div>
+      <input type="checkbox" bind:checked={isCarrier} />
+      <span>
+        <i>airplanemode_inactive</i>
+        <i>airplanemode_active</i>
+      </span>
+    </label>
   </div>
   <ShipCost {...reqs} />
 </div>
@@ -36,6 +44,9 @@
     shipType = shipTypes[0];
 
   $: api?.dispatch?.updateIdentification?.({ shipType, shipClass });
+
+  $: console.log(isCarrier);
+  $: api?.dispatch.setCarrier?.(isCarrier);
 </script>
 
 <style>
@@ -48,8 +59,18 @@
     display: flex;
     align-items: start;
   }
+  select {
+    min-width: 10em;
+  }
 
   .identification-row :global(> *:first-child) {
     flex: 1;
   }
+  label div {
+    font-size: var(--font-scale-10);
+    margin-right: 1em;
+  }
+  label.switch {
+    margin-left: 2em;
+  }
 </style>

src/lib/components/ShipEdit/Identification.test.js

@@ -0,0 +1,10 @@
+import { render, fireEvent } from "@testing-library/svelte";
+import "@testing-library/jest-dom";
+import { tick } from "svelte";
+
+import Identification from "./Identification.svelte";
+
+test("carrier", () => {
+  const { getByLabelText } = render(Identification);
+  expect(getByLabelText("carrier")).toBeInTheDocument();
+});

src/lib/components/ShipEdit/Propulsion.story.svelte

@@ -1,8 +1,9 @@
 <Hst.Story>
-  <Propulsion />
+  <Propulsion {api} />
 </Hst.Story>
 
 <script>
   export let Hst;
+
   import Propulsion from "./Propulsion.svelte";
 </script>