feat: add list view subheader

.changeset/chatty-kings-tan.md

@@ -0,0 +1,6 @@
+---
+"@scouterna/ui-react": minor
+"@scouterna/ui-webc": minor
+---
+
+Added list view subheader

.github/workflows/code-quality.yml

@@ -0,0 +1,20 @@
+name: Code quality
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+        with:
+          persist-credentials: false
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+      - name: Run Biome
+        run: biome ci --error-on-warnings .

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "files.associations": {
     "*.css": "css" // Avoid CSS files being detected as Tailwind-flavored CSS
-  }
+  },
+  "editor.defaultFormatter": "biomejs.biome"
 }

biome.json

@@ -1,56 +1,60 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
-	"vcs": {
-		"enabled": false,
-		"clientKind": "git",
-		"useIgnoreFile": false
-	},
-	"files": {
-		"ignoreUnknown": false
-	},
-	"formatter": {
-		"enabled": true,
-		"indentStyle": "space"
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true,
-			"correctness": {
-				"noUnusedImports": "off"
-			}
-		}
-	},
-	"javascript": {
-		"formatter": {
-			"quoteStyle": "double"
-		}
-	},
-	"assist": {
-		"enabled": true,
-		"actions": {
-			"source": {
-				"organizeImports": "on"
-			}
-		}
-	},
-	"overrides": [
-		{
-			"includes": [
-				"**/*.astro"
-			],
-			"linter": {
-				"rules": {
-					"style": {
-						"useConst": "off",
-						"useImportType": "off"
-					},
-					"correctness": {
-						"noUnusedVariables": "off",
-						"noUnusedImports": "off"
-					}
-				}
-			}
-		}
-	]
-}
+  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": [
+      "**",
+      "!packages/design-tokens/tokens/**/*",
+      "!packages/ui-webc/src/components.d.ts",
+      "!packages/ui-react/lib/components/stencil-generated/**/*"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedImports": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  },
+  "overrides": [
+    {
+      "includes": ["**/*.astro"],
+      "linter": {
+        "rules": {
+          "style": {
+            "useConst": "off",
+            "useImportType": "off"
+          },
+          "correctness": {
+            "noUnusedVariables": "off",
+            "noUnusedImports": "off"
+          }
+        }
+      }
+    }
+  ]
+}

packages/storybook/.storybook/main.ts

@@ -29,8 +29,8 @@ export default defineMain({
       ],
       esbuild: {
         minifyIdentifiers: false,
-        keepNames: true
-      }
+        keepNames: true,
+      },
     } satisfies UserConfig);
   },
   staticDirs: ["../public"],

packages/storybook/.storybook/vitest.setup.ts

@@ -1,7 +1,7 @@
 import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
-import { setProjectAnnotations } from '@storybook/react-vite';
-import * as projectAnnotations from './preview';
+import { setProjectAnnotations } from "@storybook/react-vite";
+import * as projectAnnotations from "./preview";
 
 // This is an important step to apply the right configuration when testing your stories.
 // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

packages/storybook/src/stories/list-view-subheader.stories.tsx

@@ -0,0 +1,17 @@
+import { ScoutListViewSubheader } from "@scouterna/ui-react";
+import preview from "#.storybook/preview";
+
+const meta = preview.meta({
+  title: "Interaction/List View Subheader",
+  component: ScoutListViewSubheader,
+  parameters: {
+    layout: "centered",
+  },
+});
+
+export default meta;
+
+export const BasicExample = meta.story({
+  args: {},
+  render: (args) => <ScoutListViewSubheader {...args} />,
+});

packages/storybook/src/stories/list-view.stories.tsx

@@ -2,7 +2,9 @@ import {
   ScoutDivider,
   ScoutListView,
   ScoutListViewItem,
+  ScoutListViewSubheader,
 } from "@scouterna/ui-react";
+import BoxIcon from "@tabler/icons/outline/box.svg?raw";
 import ClipboardDataIcon from "@tabler/icons/outline/clipboard-data.svg?raw";
 import LogoutIcon from "@tabler/icons/outline/logout.svg?raw";
 import WorldIcon from "@tabler/icons/outline/world.svg?raw";
@@ -45,3 +47,23 @@ export const BasicExample = meta.story({
     </div>
   ),
 });
+
+export const WithSections = meta.story({
+  args: {},
+  render: (args) => (
+    <div style={{ maxWidth: "20rem", width: "100vw" }}>
+      <ScoutListView {...args}>
+        <ScoutListViewSubheader text="First section" />
+        <ScoutListViewItem icon={BoxIcon} primary="First item" />
+        <ScoutListViewItem icon={BoxIcon} primary="Second item" />
+        <ScoutListViewSubheader text="Second section" />
+        <ScoutListViewItem icon={BoxIcon} primary="Third item" />
+        <ScoutListViewItem icon={BoxIcon} primary="Fourth item" />
+        <ScoutListViewItem icon={BoxIcon} primary="Fifth item" />
+        <ScoutListViewSubheader text="Third section" />
+        <ScoutListViewItem icon={BoxIcon} primary="Sixth item" />
+        <ScoutListViewItem icon={BoxIcon} primary="Seventh item" />
+      </ScoutListView>
+    </div>
+  ),
+});

packages/storybook/src/stories/loader.stories.tsx

@@ -10,9 +10,9 @@ const meta = preview.meta({
   argTypes: {
     size: {
       // Make sure the order makes sense
-      options: ['xs', 'sm', 'base', 'lg', 'xl'],
-    }
-  }
+      options: ["xs", "sm", "base", "lg", "xl"],
+    },
+  },
 });
 
 export default meta;

packages/storybook/src/stories/select.stories.tsx

@@ -53,4 +53,3 @@ export const Disabled = meta.story({
     </ScoutSelect>
   ),
 });
-

packages/storybook/vitest.shims.d.ts

@@ -1 +1 @@
-/// <reference types="@vitest/browser-playwright" />
+/// <reference types="@vitest/browser-playwright" />

packages/ui-react/lib/components/stencil-generated/components.ts

@@ -18,6 +18,7 @@ import { ScoutField as ScoutFieldElement, defineCustomElement as defineScoutFiel
 import { ScoutInput as ScoutInputElement, defineCustomElement as defineScoutInput } from "@scouterna/ui-webc/dist/components/scout-input.js";
 import { ScoutLink as ScoutLinkElement, defineCustomElement as defineScoutLink } from "@scouterna/ui-webc/dist/components/scout-link.js";
 import { ScoutListViewItem as ScoutListViewItemElement, defineCustomElement as defineScoutListViewItem } from "@scouterna/ui-webc/dist/components/scout-list-view-item.js";
+import { ScoutListViewSubheader as ScoutListViewSubheaderElement, defineCustomElement as defineScoutListViewSubheader } from "@scouterna/ui-webc/dist/components/scout-list-view-subheader.js";
 import { ScoutListView as ScoutListViewElement, defineCustomElement as defineScoutListView } from "@scouterna/ui-webc/dist/components/scout-list-view.js";
 import { ScoutLoader as ScoutLoaderElement, defineCustomElement as defineScoutLoader } from "@scouterna/ui-webc/dist/components/scout-loader.js";
 import { ScoutSelect as ScoutSelectElement, defineCustomElement as defineScoutSelect } from "@scouterna/ui-webc/dist/components/scout-select.js";
@@ -168,6 +169,17 @@ export const ScoutListViewItem: StencilReactComponent<ScoutListViewItemElement,
     defineCustomElement: defineScoutListViewItem
 });
 
+export type ScoutListViewSubheaderEvents = NonNullable<unknown>;
+
+export const ScoutListViewSubheader: StencilReactComponent<ScoutListViewSubheaderElement, ScoutListViewSubheaderEvents> = /*@__PURE__*/ createComponent<ScoutListViewSubheaderElement, ScoutListViewSubheaderEvents>({
+    tagName: 'scout-list-view-subheader',
+    elementClass: ScoutListViewSubheaderElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as ScoutListViewSubheaderEvents,
+    defineCustomElement: defineScoutListViewSubheader
+});
+
 export type ScoutLoaderEvents = NonNullable<unknown>;
 
 export const ScoutLoader: StencilReactComponent<ScoutLoaderElement, ScoutLoaderEvents> = /*@__PURE__*/ createComponent<ScoutLoaderElement, ScoutLoaderEvents>({

packages/ui-webc/src/components.d.ts

@@ -172,6 +172,13 @@ export namespace Components {
          */
         "type": ItemType1;
     }
+    interface ScoutListViewSubheader {
+        /**
+          * @default "h2"
+         */
+        "headingLevel": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+        "text": string;
+    }
     interface ScoutLoader {
         /**
           * @default "base"
@@ -412,6 +419,12 @@ declare global {
         prototype: HTMLScoutListViewItemElement;
         new (): HTMLScoutListViewItemElement;
     };
+    interface HTMLScoutListViewSubheaderElement extends Components.ScoutListViewSubheader, HTMLStencilElement {
+    }
+    var HTMLScoutListViewSubheaderElement: {
+        prototype: HTMLScoutListViewSubheaderElement;
+        new (): HTMLScoutListViewSubheaderElement;
+    };
     interface HTMLScoutLoaderElement extends Components.ScoutLoader, HTMLStencilElement {
     }
     var HTMLScoutLoaderElement: {
@@ -479,6 +492,7 @@ declare global {
         "scout-link": HTMLScoutLinkElement;
         "scout-list-view": HTMLScoutListViewElement;
         "scout-list-view-item": HTMLScoutListViewItemElement;
+        "scout-list-view-subheader": HTMLScoutListViewSubheaderElement;
         "scout-loader": HTMLScoutLoaderElement;
         "scout-select": HTMLScoutSelectElement;
         "scout-stack": HTMLScoutStackElement;
@@ -666,6 +680,13 @@ declare namespace LocalJSX {
          */
         "type"?: ItemType1;
     }
+    interface ScoutListViewSubheader {
+        /**
+          * @default "h2"
+         */
+        "headingLevel"?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+        "text"?: string;
+    }
     interface ScoutLoader {
         /**
           * @default "base"
@@ -746,6 +767,7 @@ declare namespace LocalJSX {
         "scout-link": ScoutLink;
         "scout-list-view": ScoutListView;
         "scout-list-view-item": ScoutListViewItem;
+        "scout-list-view-subheader": ScoutListViewSubheader;
         "scout-loader": ScoutLoader;
         "scout-select": ScoutSelect;
         "scout-stack": ScoutStack;
@@ -781,6 +803,7 @@ declare module "@stencil/core" {
             "scout-link": LocalJSX.ScoutLink & JSXBase.HTMLAttributes<HTMLScoutLinkElement>;
             "scout-list-view": LocalJSX.ScoutListView & JSXBase.HTMLAttributes<HTMLScoutListViewElement>;
             "scout-list-view-item": LocalJSX.ScoutListViewItem & JSXBase.HTMLAttributes<HTMLScoutListViewItemElement>;
+            "scout-list-view-subheader": LocalJSX.ScoutListViewSubheader & JSXBase.HTMLAttributes<HTMLScoutListViewSubheaderElement>;
             "scout-loader": LocalJSX.ScoutLoader & JSXBase.HTMLAttributes<HTMLScoutLoaderElement>;
             "scout-select": LocalJSX.ScoutSelect & JSXBase.HTMLAttributes<HTMLScoutSelectElement>;
             "scout-stack": LocalJSX.ScoutStack & JSXBase.HTMLAttributes<HTMLScoutStackElement>;

packages/ui-webc/src/components/bottom-bar-item/bottom-bar-item.css

@@ -35,4 +35,4 @@
 
 a {
   text-decoration: none;
-}
+}

packages/ui-webc/src/components/bottom-bar/bottom-bar.css

@@ -8,4 +8,4 @@
   flex: 1;
   height: var(--spacing-14);
   border-top: 1px solid var(--color-neutral-100);
-}
+}

packages/ui-webc/src/components/button/button.css

@@ -92,4 +92,4 @@
   &:active {
     background-color: var(--color-background-danger-bold-pressed);
   }
-}
+}

packages/ui-webc/src/components/card/card.css

@@ -4,5 +4,7 @@
   border: 1px solid var(--color-gray-100);
   padding: var(--spacing-2);
   /* TODO: We don't have tokens for shadows yet */
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-}
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
+}

packages/ui-webc/src/components/checkbox/checkbox.tsx

@@ -57,7 +57,7 @@ export class ScoutCheckbox {
   */
 
   render() {
-    const Tag = this.label && this.label.length ? "label" : "div";
+    const Tag = this.label?.length ? "label" : "div";
     return (
       <Tag>
         {this.label}

packages/ui-webc/src/components/divider/divider.css

@@ -2,4 +2,4 @@
   display: block;
   height: 1px;
   background-color: var(--color-gray-200);
-}
+}

packages/ui-webc/src/components/field/field.css

@@ -23,4 +23,4 @@
   font: var(--type-label-sm);
   color: var(--color-gray-600);
   margin: var(--spacing-1) 0 0 0;
-}
+}