TextPage.svelte story. Highlights don't work.

src/common/stories/AccessIcon.stories.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
 
   import AccessIcon from "../AccessIcon.svelte";
@@ -11,21 +11,20 @@
   };
 
   const handleClick = action("click");
-</script>
 
-<Meta
-  title="Common / Access Icon"
-  component={AccessIcon}
-  parameters={{
-    layout: "centered",
-  }}
-  argTypes={{
-    access: {
-      control: "select",
-      options: ["public", "private", "organization"],
+  export const meta = {
+    title: "Common / Access Icon",
+    component: AccessIcon,
+    parameters: { layout: "centered" },
+    tags: ["autodocs"],
+    argTypes: {
+      access: {
+        control: "select",
+        options: ["public", "private", "organization"],
+      },
     },
-  }}
-/>
+  };
+</script>
 
 <Template let:args>
   <AccessIcon {...args} on:click={handleClick} />

src/pages/viewer/AllText.svelte

@@ -1,13 +1,15 @@
 <script>
-  import TextPage from "@/common/TextPage.svelte";
-  import session from "@/api/session.js";
+  import { _ } from "svelte-i18n";
   import { tick } from "svelte";
+
+  import TextPage from "./TextPage.svelte";
+
+  import session from "@/api/session.js";
   import { jsonUrl } from "@/api/viewer.js";
   import { doc } from "@/viewer/document.js";
   import { layout } from "@/viewer/layout.js";
   import { viewer } from "@/viewer/viewer.js";
   import { showIfFullyVisible } from "@/util/visibility.js";
-  import { _ } from "svelte-i18n";
 
   let textDoc = null;
   let loading = false;

src/common/TextPage.svelte → src/pages/viewer/TextPage.svelte

@@ -18,7 +18,7 @@
   {/each}
 </div>
 
-<style lang="scss">
+<style>
   .text {
     display: block;
     background: white;
@@ -30,15 +30,15 @@
     line-height: 1.4;
     user-select: text;
     padding: 16px 20px;
+  }
 
-    .highlight {
-      background: #f3e94d;
-      background: linear-gradient(#f3e94d, #f5dd01);
-      border: 1px solid #f5e800;
-      padding: 1px;
-      color: #000;
-      border-radius: $radius;
-      box-shadow: 0 0 5px #666;
-    }
+  .text .highlight {
+    background: #f3e94d;
+    background: linear-gradient(#f3e94d, #f5dd01);
+    border: 1px solid #f5e800;
+    padding: 1px;
+    color: #000;
+    border-radius: var(--radius);
+    box-shadow: 0 0 5px #666;
   }
 </style>

src/pages/viewer/Viewer.svelte

@@ -86,6 +86,9 @@
       await initOrgsAndUsers();
 
       window.plausible && plausible("pageview", { u: obscureURL() });
+
+      // debug
+      window.layout = layout;
     }
   });
 

src/pages/viewer/stories/TextPage.stories.svelte

@@ -0,0 +1,50 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import TextPage from "../TextPage.svelte";
+
+  export const meta = {
+    title: "Viewer / Text / Text page",
+    component: TextPage,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+
+  const text = `First, Second, and Single COVID-19 Vaccine Doses Administered, 
+Boston Residents Age 16+, Dec. 15, 2020 - May 4, 2021 * The Boston Total population count (581,209 
+residents) includes residents ages 16+, the population 
+for which a COVID-19 vaccine is currently approved. 
+`;
+
+  const highlights = [
+    [
+      {
+        text: "First, Second, and Single COVID-19 Vaccine Doses Administered, \n",
+        type: "normal",
+      },
+      {
+        text: "Boston",
+        type: "highlight",
+      },
+      {
+        text: " Residents Age 16+, Dec. 15, 2020 - May 4, 2021 * The ",
+        type: "normal",
+      },
+      {
+        text: "Boston",
+        type: "highlight",
+      },
+      {
+        text: " Total population count (581,209 \nresidents) includes residents ages 16+, the population \nfor which a COVID-19 vaccine is currently approved. \n1\n At Least 1 Dose refers to individuals who have \nreceived one or more doses of the Moderna or Pfizer \nvaccine, or a single dose of the Johnson & Johnson \nvaccine. 2\n Partially Vaccinated refers to individuals who \nhave received only a first dose of the Moderna or Pfizer \nvaccine. 3\n Fully Vaccinated refers to individuals who \nhave received both first and second doses of the \nModerna or Pfizer vaccine, or a single dose of the \nJohnson & Johnson vaccine. \n",
+        type: "normal",
+      },
+    ],
+  ];
+</script>
+
+<Template let:args>
+  <TextPage {...args} />
+</Template>
+
+<Story name="default" args={{ text }} />
+
+<Story name="highlighted" args={{ text, highlights }} />