frontend/src/studentportalen/ComponentLibrary/ChoiceboxSection.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import Choicebox from "../../components/Choicebox/Choicebox";
+
+export default function ChoiceboxSection() {
+  const [selectedTime, setSelectedTime] = useState<string>("");
+
+  return (
+    <>
+      <section className="mt-lg">
+        <h2 className="mb-md">States</h2>
+        <div className="flex flex-col gap-md">
+          <Choicebox
+            primaryText="09:00"
+            secondaryText="Ledigt"
+            name="time-states"
+            value="09:00"
+          />
+          <Choicebox
+            primaryText="10:00"
+            secondaryText="Ledigt"
+            name="time-states"
+            value="10:00"
+            defaultChecked
+          />
+          <Choicebox
+            primaryText="11:00"
+            secondaryText="Upptaget"
+            name="time-states"
+            value="11:00"
+            unavailable
+          />
+        </div>
+      </section>
+
+      <section className="mt-lg">
+        <h2 className="mb-md">Interactive</h2>
+        <div className="flex flex-col gap-md">
+          <Choicebox
+            primaryText="09:00"
+            secondaryText="Ledigt"
+            name="time-interactive"
+            value="09:00"
+            checked={selectedTime === "09:00"}
+            onChange={(e) => setSelectedTime(e.target.value)}
+          />
+          <Choicebox
+            primaryText="10:00"
+            secondaryText="Ledigt"
+            name="time-interactive"
+            value="10:00"
+            checked={selectedTime === "10:00"}
+            onChange={(e) => setSelectedTime(e.target.value)}
+          />
+          <Choicebox
+            primaryText="11:00"
+            secondaryText="Ledigt"
+            name="time-interactive"
+            value="11:00"
+            checked={selectedTime === "11:00"}
+            onChange={(e) => setSelectedTime(e.target.value)}
+          />
+          <Choicebox
+            primaryText="12:00"
+            secondaryText="Upptaget"
+            name="time-interactive"
+            value="12:00"
+            unavailable
+          />
+        </div>
+        <p className="body-light-sm text-base-ink-placeholder mt-sm">
+          Vald tid: {selectedTime || "Ingen"}
+        </p>
+      </section>
+
+      <section className="mt-lg">
+        <h2 className="mb-md">Fit Content</h2>
+        <div className="flex flex-wrap gap-md">
+          <Choicebox
+            primaryText="09:00"
+            secondaryText="Ledigt"
+            name="time-fit"
+            value="09:00"
+            fitContent
+          />
+          <Choicebox
+            primaryText="10:00"
+            secondaryText="Ledigt"
+            name="time-fit"
+            value="10:00"
+            fitContent
+          />
+          <Choicebox
+            primaryText="11:00"
+            secondaryText="Upptaget"
+            name="time-fit"
+            value="11:00"
+            fitContent
+            unavailable
+          />
+        </div>
+      </section>
+    </>
+  );
+}

frontend/src/studentportalen/ComponentLibrary/ComponentLibrary.tsx

@@ -8,6 +8,9 @@ import SearchResultListSection from "./SearchResultListSection";
 import ComboboxSection from "./ComboboxSection";
 import ListCardSection from "./ListCardSection";
 import ParticipantPickerSection from "./ParticipantPickerSection";
+import InlineModalSection from "./InlineModalSection";
+import ChoiceboxSection from "./ChoiceboxSection";
+import StartTimeGridSection from "./StartTimeGridSection";
 
 export default function ComponentLibrary() {
   const [darkMode, setDarkMode] = useState(() => {
@@ -42,6 +45,12 @@ export default function ComponentLibrary() {
         return <ListCardSection />;
       case "ParticipantPicker":
         return <ParticipantPickerSection />;
+      case "InlineModal":
+        return <InlineModalSection />;
+      case "Choicebox":
+        return <ChoiceboxSection />;
+      case "StartTimeGrid":
+        return <StartTimeGridSection />;
       default:
         return null;
     }
@@ -55,10 +64,10 @@ export default function ComponentLibrary() {
         darkMode={darkMode}
         onToggleDarkMode={() => setDarkMode(!darkMode)}
       />
-      <main className="flex-1 overflow-y-auto p-lg">
+      <div className="flex-1 overflow-y-auto p-lg">
         <h1 className="mb-lg">{selectedCategory}</h1>
         {renderContent()}
-      </main>
+      </div>
     </div>
   );
 }

frontend/src/studentportalen/ComponentLibrary/DropdownSection.tsx

@@ -3,7 +3,17 @@ import Dropdown from "../../components/Dropdown/Dropdown";
 import { peopleOptions, getPersonValue, getPersonLabel } from "./data";
 
 export default function DropdownSection() {
-  const [selectedPerson, setSelectedPerson] = useState<string>("");
+  const [sizeSmall, setSizeSmall] = useState("");
+  const [sizeMedium, setSizeMedium] = useState("");
+  const [sizeLarge, setSizeLarge] = useState("");
+  const [stateDefault, setStateDefault] = useState("");
+  const [stateError, setStateError] = useState("");
+  const [withLabel, setWithLabel] = useState("");
+  const [withLabelError, setWithLabelError] = useState("");
+  const [withMessage, setWithMessage] = useState("");
+  const [withMessageError, setWithMessageError] = useState("");
+  const [fullWidth, setFullWidth] = useState("");
+  const [customWidth, setCustomWidth] = useState("");
 
   return (
     <>
@@ -18,6 +28,8 @@ export default function DropdownSection() {
             size="sm"
             label="Small dropdown"
             hideLabel
+            value={sizeSmall}
+            onChange={(v) => setSizeSmall(v)}
           />
           <Dropdown
             options={peopleOptions}
@@ -27,6 +39,8 @@ export default function DropdownSection() {
             size="md"
             label="Medium dropdown"
             hideLabel
+            value={sizeMedium}
+            onChange={(v) => setSizeMedium(v)}
           />
           <Dropdown
             options={peopleOptions}
@@ -36,6 +50,8 @@ export default function DropdownSection() {
             size="lg"
             label="Large dropdown"
             hideLabel
+            value={sizeLarge}
+            onChange={(v) => setSizeLarge(v)}
           />
         </div>
       </section>
@@ -50,6 +66,8 @@ export default function DropdownSection() {
             placeholder="Default"
             label="Default state"
             hideLabel
+            value={stateDefault}
+            onChange={(v) => setStateDefault(v)}
           />
           <Dropdown
             options={peopleOptions}
@@ -59,6 +77,8 @@ export default function DropdownSection() {
             error
             label="Error state"
             hideLabel
+            value={stateError}
+            onChange={(v) => setStateError(v)}
           />
         </div>
       </section>
@@ -72,8 +92,8 @@ export default function DropdownSection() {
             getOptionLabel={getPersonLabel}
             placeholder="Select person"
             label="Person"
-            value={selectedPerson}
+            value={withLabel}
-            onChange={(value) => setSelectedPerson(value)}
+            onChange={(v) => setWithLabel(v)}
           />
           <Dropdown
             options={peopleOptions}
@@ -82,6 +102,8 @@ export default function DropdownSection() {
             placeholder="Select person"
             label="Person (error)"
             error
+            value={withLabelError}
+            onChange={(v) => setWithLabelError(v)}
           />
         </div>
       </section>
@@ -96,6 +118,8 @@ export default function DropdownSection() {
             placeholder="Select person"
             label="Person"
             message="Please select a person"
+            value={withMessage}
+            onChange={(v) => setWithMessage(v)}
           />
           <Dropdown
             options={peopleOptions}
@@ -105,6 +129,8 @@ export default function DropdownSection() {
             label="Person"
             error
             message="This field is required"
+            value={withMessageError}
+            onChange={(v) => setWithMessageError(v)}
           />
         </div>
       </section>
@@ -120,6 +146,8 @@ export default function DropdownSection() {
             fullWidth
             label="Full width dropdown"
             hideLabel
+            value={fullWidth}
+            onChange={(v) => setFullWidth(v)}
           />
           <Dropdown
             options={peopleOptions}
@@ -129,6 +157,8 @@ export default function DropdownSection() {
             customWidth="300px"
             label="Custom width dropdown"
             hideLabel
+            value={customWidth}
+            onChange={(v) => setCustomWidth(v)}
           />
         </div>
       </section>

frontend/src/studentportalen/ComponentLibrary/InlineModalSection.tsx

@@ -0,0 +1,51 @@
+import InlineModal, {
+  InlineModalDivider,
+} from "../../components/InlineModal/InlineModal";
+import TextInput from "../../components/TextInput/TextInput";
+import Button from "../../components/Button/Button";
+
+export default function InlineModalSection() {
+  return (
+    <>
+      <section className="mt-lg">
+        <h2 className="mb-md">Arrow Left</h2>
+        <InlineModal arrowPosition="left">
+          <TextInput
+            label="Beskrivning"
+            placeholder="Ange beskrivning..."
+            fullWidth
+          />
+          <InlineModalDivider />
+          <div className="flex justify-between">
+            <Button variant="secondary" size="md">
+              Avbryt
+            </Button>
+            <Button variant="primary" size="md">
+              Boka
+            </Button>
+          </div>
+        </InlineModal>
+      </section>
+
+      <section className="mt-lg">
+        <h2 className="mb-md">Arrow Right</h2>
+        <InlineModal arrowPosition="right">
+          <TextInput
+            label="Beskrivning"
+            placeholder="Ange beskrivning..."
+            fullWidth
+          />
+          <InlineModalDivider />
+          <div className="flex justify-between">
+            <Button variant="secondary" size="md">
+              Avbryt
+            </Button>
+            <Button variant="primary" size="md">
+              Boka
+            </Button>
+          </div>
+        </InlineModal>
+      </section>
+    </>
+  );
+}

frontend/src/studentportalen/ComponentLibrary/Sidebar.tsx

@@ -10,6 +10,9 @@ export const componentCategories = [
   "Combobox",
   "ListCard",
   "ParticipantPicker",
+  "InlineModal",
+  "Choicebox",
+  "StartTimeGrid",
 ] as const;
 
 export type ComponentCategory = (typeof componentCategories)[number];