Adds Access Level control to DocumentUpload

src/lib/components/common/Flex.svelte

@@ -10,6 +10,7 @@
   export let justify: Justify = "start";
   export let reverse = false;
   export let gap: number = 0.5;
+  export let wrap: boolean = false;
 
   const alignMap: Record<Align, string> = {
     start: "flex-start",
@@ -35,6 +36,7 @@
   {...$$restProps}
   style:display="flex"
   style:flex-direction={directionWithReverse}
+  style:flex-wrap={wrap ? "wrap" : "nowrap"}
   style:align-items={alignMap[align]}
   style:justify-content={justifyMap[justify]}
   style:gap={`${gap}rem`}

src/lib/components/documents/AccessLevel.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import {
+    Globe24,
+    Lock24,
+    Organization24,
+    type SvgComponent,
+  } from "svelte-octicons";
+  import Flex from "../common/Flex.svelte";
+
+  interface Level {
+    value: "private" | "organization" | "public";
+    name: string;
+    description: string;
+    icon: typeof SvgComponent;
+  }
+
+  const levels: Level[] = [
+    {
+      value: "private",
+      name: "Private",
+      description: "Documents will only be visible to you",
+      icon: Lock24,
+    },
+    {
+      value: "organization",
+      name: "Organization",
+      description: "Documents will only be visible to your organization",
+      icon: Organization24,
+    },
+    {
+      value: "public",
+      name: "Public",
+      description: "Documents will be publicly visible to everyone",
+      icon: Globe24,
+    },
+  ];
+
+  export let name: string = null;
+  export let selected: "public" | "organization" | "private" = levels[0].value;
+</script>
+
+<Flex direction="column" gap={0.5}>
+  {#each levels as { value, name, description, icon }}
+    <div class="option" class:selected={value === selected}>
+      <input
+        class="sr-only"
+        type="radio"
+        {name}
+        id={value}
+        bind:group={selected}
+        {value}
+      />
+      <label for={value} class="detail">
+        <Flex gap={0.5}>
+          <svelte:component this={icon} />
+          <Flex direction="column" gap={0.125}>
+            <p class="name">{name}</p>
+            <p class="description">{description}</p>
+          </Flex>
+        </Flex>
+      </label>
+    </div>
+  {/each}
+</Flex>
+
+<style>
+  .option {
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    border: 1px solid var(--gray-2, #d8dee2);
+    background: var(--white);
+    color: var(--gray-5);
+    fill: var(--gray-5);
+    cursor: pointer;
+  }
+  .option.selected {
+    border: 1px solid var(--blue-2, #b5ceed);
+    background: var(--blue-1, #eef3f9);
+    color: var(--blue-5);
+    fill: var(--blue-5);
+  }
+  .detail {
+    cursor: pointer;
+  }
+  .name {
+    font-weight: var(--font-semibold);
+  }
+  .description {
+    font-size: var(--font-xs);
+    opacity: 0.7;
+  }
+  .sr-only {
+    position: absolute;
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 0;
+    border: 0;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+  }
+</style>

src/lib/components/documents/stories/AccessLevel.stories.svelte

@@ -0,0 +1,23 @@
+<script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import AccessLevel from "../AccessLevel.svelte";
+
+  export const meta = {
+    title: "Components / Documents / Access Level",
+    component: AccessLevel,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+
+  let args = {
+    level: "private",
+  };
+</script>
+
+<Template let:args>
+  <AccessLevel {...args} />
+</Template>
+
+<Story name="Private" {args} />
+<Story name="Organization" args={{ ...args, level: "organization" }} />
+<Story name="Public" args={{ ...args, level: "public" }} />

src/lib/components/forms/DocumentUpload.svelte

@@ -14,6 +14,7 @@
   import InputText from "../common/InputText.svelte";
   import InputFile from "../common/InputFile.svelte";
   import { removeUnsupportedTypes } from "@/lib/utils/validateFiles";
+  import AccessLevel from "../documents/AccessLevel.svelte";
 
   interface UploadFile {
     index: number;
@@ -25,6 +26,8 @@
 
   export let files: UploadFile[] = [];
 
+  let fileDropActive;
+
   function createUploadFile(file: File, index: number): UploadFile {
     return {
       index,
@@ -35,6 +38,22 @@
     };
   }
 
+  function addFiles(filesToAdd: FileList) {
+    const supportedFiles = removeUnsupportedTypes([...filesToAdd]);
+    files = files.concat(supportedFiles.map(createUploadFile));
+  }
+  function removeFile(fileToRemove: UploadFile) {
+    files = files.filter((file) => file.index !== fileToRemove.index);
+  }
+  function formatFileType(filetype: string) {
+    if (filetype && filetype.includes("/")) {
+      return filetype.split("/")[1];
+    }
+    return "unknown";
+  }
+
+  let accessLevel;
+
   const projectOptions = [
     { value: "1", label: "FBI Files" },
     { value: "2", label: "1033 Program" },
@@ -53,33 +72,10 @@
       help: $_("uploadOptions.textract"),
     },
   ];
-
-  let fileDropActive;
-  function addFiles(filesToAdd: FileList) {
-    const supportedFiles = removeUnsupportedTypes([...filesToAdd]);
-    files = files.concat(supportedFiles.map(createUploadFile));
-  }
-  function removeFile(fileToRemove: UploadFile) {
-    files = files.filter((file) => file.index !== fileToRemove.index);
-  }
-  function renameFile(index: number, name: string) {
-    files = files.map((file) => {
-      if (file.index === index) {
-        file.name = name;
-      }
-      return file;
-    });
-  }
-  function formatFileType(filetype: string) {
-    if (filetype && filetype.includes("/")) {
-      return filetype.split("/")[1];
-    }
-    return "unknown";
-  }
 </script>
 
 <form>
-  <Flex gap={1} align="stretch">
+  <Flex gap={1} align="stretch" wrap>
     <div class="files">
       <div class="fileList" class:empty={files.length === 0}>
         {#each files as file}
@@ -88,12 +84,7 @@
               {formatFileType(file.type)} / {filesize(file.size)}
             </p>
             <div class="fileName">
-              <InputText
-                bind:value={file.name}
-                on:change={() => {
-                  console.log(file);
-                }}
-              />
+              <InputText bind:value={file.name} />
             </div>
             <button
               class="fileRemove"
@@ -125,6 +116,10 @@
     </div>
     <div class="sidebar">
       <Flex gap={1} direction="column">
+        <Field>
+          <FieldLabel>Access Level</FieldLabel>
+          <AccessLevel bind:selected={accessLevel} />
+        </Field>
         <Field>
           <FieldLabel>Projects</FieldLabel>
           <InputSelect name="projects" multiple items={projectOptions} />
@@ -166,14 +161,12 @@
 
 <style>
   .files {
-    max-width: 32rem;
-    flex: 1 0 0;
+    flex: 2 0 20rem;
 
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 1rem;
-    flex: 1 0 0;
     align-self: stretch;
   }
 
@@ -268,8 +261,7 @@
   }
 
   .sidebar {
-    max-width: 18rem;
-    flex: 0 1 8rem;
+    flex: 1 1 8rem;
 
     display: flex;
     flex-direction: column;