From 95d9fcec7f317e4fbd053bbd6e203a511e1a26ca Mon Sep 17 00:00:00 2001
From: Joshua Graber <68428039+joshuagraber@users.noreply.github.com>
Date: Fri, 7 Jun 2024 10:24:39 -0400
Subject: [PATCH] docs(components): update component documentation (#83)

---
 .husky/pre-push                               |   2 +-
 README.md                                     |  37 +-
 docs/components.md                            | 546 +-----------------
 package.json                                  |   5 +-
 scripts/update-docs.sh                        |  30 +
 .../Breadcrumbs/PdapBreadcrumbs.vue           |  15 +
 src/components/Breadcrumbs/README.md          |  14 +
 src/components/Breadcrumbs/index.ts           |   4 +-
 src/components/Button/PdapButton.vue          |  15 +
 src/components/Button/README.md               |  31 +
 src/components/Button/index.ts                |   4 +-
 src/components/Dropdown/PdapDropdown.vue      |  16 +
 src/components/Dropdown/README.md             | 103 ++++
 .../ErrorBoundary/PdapErrorBoundary.vue       |  63 +-
 src/components/ErrorBoundary/README.md        |  40 ++
 .../ErrorBoundary/error-boundary.spec.ts      |   6 +-
 src/components/ErrorBoundary/types.ts         |  10 +-
 src/components/Footer/PdapFooter.vue          |  14 +
 src/components/Footer/README.md               |  71 +++
 src/components/Form/PdapForm.vue              | 114 +++-
 src/components/Form/README.md                 | 145 +++++
 src/components/Header/PdapHeader.vue          |  17 +
 src/components/Header/README.md               |  40 ++
 src/components/Input/README.md                |   3 +
 src/components/Nav/PdapNav.vue                |  43 ++
 src/components/Nav/README.md                  |  37 ++
 .../QuickSearchForm/QuickSearchForm.vue       |  20 +
 src/components/QuickSearchForm/README.md      |  18 +
 src/components/TileIcon/TileIcon.vue          |   9 +
 src/demo/pages/ComponentDemo.vue              |   6 +-
 30 files changed, 894 insertions(+), 584 deletions(-)
 create mode 100644 scripts/update-docs.sh
 create mode 100644 src/components/Breadcrumbs/README.md
 create mode 100644 src/components/Button/README.md
 create mode 100644 src/components/Dropdown/README.md
 create mode 100644 src/components/ErrorBoundary/README.md
 create mode 100644 src/components/Footer/README.md
 create mode 100644 src/components/Form/README.md
 create mode 100644 src/components/Header/README.md
 create mode 100644 src/components/Input/README.md
 create mode 100644 src/components/Nav/README.md
 create mode 100644 src/components/QuickSearchForm/README.md

diff --git a/.husky/pre-push b/.husky/pre-push
index 115cd65..858630c 100755
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run test:ci
+npm run docs && npm run test:ci
diff --git a/README.md b/README.md
index a7f4514..cf546fd 100644
--- a/README.md
+++ b/README.md
@@ -120,24 +120,25 @@ Use these [brand assets](https://docs.pdap.io/meta/about/staff/brand-assets). Us
 
 ## Scripts reference
 
-Script         | What it does
--------------- | -------------------------------------------------------
-`_commit`      | Create conventional commits
-`build`        | Builds the library
-`build:watch`  | Builds the library and watches for file changes
-`ci`           | Remove all generated files and re-installs deps
-`clean`        | Remove all generated files (except `package-lock.json`)
-`clean:deps`   | Remove node_modules directory
-`clean:build`  | Remove dist directory
-`clean:test`   | Remove testing coverage reports
-`lint`         | Lint everything
-`lint:es`      | Lint `ts` and `vue` with `eslint`
-`lint:css`     | Lint `css` and `vue` with `stylelint`
-`lint:ts`      | Lint `ts` with `tsc`
-`test`         | Run all test suites
-`test:changed` | Run only test suites affected by changed files
-`typecheck`    | Run type check on all `ts` and `vue` files
-`dev`          | Run demo app to check visual changes to components
+| Script         | What it does                                                            |
+| -------------- | ----------------------------------------------------------------------- |
+| `_commit`      | Create conventional commits                                             |
+| `build`        | Builds the library                                                      |
+| `build:watch`  | Builds the library and watches for file changes                         |
+| `ci`           | Remove all generated files and re-installs deps                         |
+| `clean`        | Remove all generated files (except `package-lock.json`)                 |
+| `clean:deps`   | Remove node_modules directory                                           |
+| `clean:build`  | Remove dist directory                                                   |
+| `clean:test`   | Remove testing coverage reports                                         |
+| `lint`         | Lint everything                                                         |
+| `lint:es`      | Lint `ts` and `vue` with `eslint`                                       |
+| `lint:css`     | Lint `css` and `vue` with `stylelint`                                   |
+| `lint:ts`      | Lint `ts` with `tsc`                                                    |
+| `test`         | Run all test suites                                                     |
+| `test:changed` | Run only test suites affected by changed files                          |
+| `typecheck`    | Run type check on all `ts` and `vue` files                              |
+| `dev`          | Run demo app to check visual changes to components                      |
+| `docs`         | Run script to automatically aggregate links to component `README` files |
 
 _n.b. There are some other scripts defined in the `package.json` `"scripts"` field, but they are mostly for CI or cleanup post-build, etc. You shouldn't need them._
 
diff --git a/docs/components.md b/docs/components.md
index f1d9cc8..460784c 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -1,533 +1,13 @@
-# PDAP Component Documentation
-
-Documentation for PDAP component usage
-
-## Table of Contents
-
-- [Breadcrumbs](#breadcrumbs)
-
-  - [Props](#props)
-  - [Example](#example)
-
-- [Button](#button)
-
-  - [Props](#props-1)
-
-  - [Example](#example-1)
-
-- [FlexContainer](#flexcontainer)
-
-- [Props](#props-2)
-
-- [Example](#example-2)
-
-- [Footer](#footer)
-
-- [Props](#props-3)
-
-- [Example](#example-3)
-
-- [Form](#form)
-
-- [Props](#props-4)
-
-- [Example](#example-4)
-
-- [GridContainer](#gridcontainer)
-
-- [Props](#props-5)
-
-- [Example](#example-5)
-
-- [GridItem](#griditem)
-
-- [Props](#props-6)
-
-- [Example](#example-6)
-
-- [Header](#header)
-
-  - [Props](#props-7)
-  - [Example](#example-7)
-
-- [Input](#input)
-
-- [Nav](#nav)
-
-- [Example](#example-8)
-
-- [QuickSearchForm](#quicksearchform)
-
-- [Props](#props-8)
-
-- [TileIcon](#tileicon)
-
-- [Props](#props-9)
-
-- [Example](#example-9)
-
-- [Dropdown](#dropdown)
-
-  - [Props](#props-9)
-
-  - [Example](#example-9)
-
-## Button
-
-### _Props_
-
-None
-
-### _Example_
-
-See the Demo application [page](../src/demo/pages/ComponentDemo.vue) and [router](../src/demo/router.js)
-
-...
-
-## Footer
-
-### _Props_
-
-name                  | required? | types    | description            | default
---------------------- | --------- | -------- | ---------------------- | -----------------------------------------------------------
-`logoImageSrc`        | no        | `string` | Source of logo image   | `'node_modules/pdap-design-system/dist/images/acronym.svg'`
-`logoImageAnchorPath` | no        | `string` | Flex alignment presets | `/`
-
-### _Notes_
-
-The `Footer` component provides support for overriding the default social links. The `links` variable is `inject`ed by the component, using the following defaults:
-
-```
-export default {
-  ...
-  inject: {
-    footerLinks: {
-      default: [
-          {
-              to: 'https://github.com/orgs/Police-Data-Accessibility-Project',
-              text: 'Github',
-          },
-          {
-              to: 'ttps://discord.gg/wMqex8nKZJ',
-              text: 'Discord',
-          },
-          {
-              to: 'https://www.linkedin.com/company/pdap',
-              text: 'LinkedIn',
-          },
-      ]
-    }
-  },
-  data() {
-    return {
-      links: this.footerLinks;
-    }
-  }
-}
-```
-
-If we desire different links somewhere that `Footer` is rendered, simply `provide` an overriding array from a parent component, like so:
-
-### _Example_
-
-```
-<template>
-  <Header />
-  <router-view />
-  <Footer />
-</template>
-
-...
-
-<script>
-import { Header, Footer } from 'pdap-design-system';
-import { RouterView } from 'vue-router'
-
-...
-
-export default {
-  name: 'Layout',
-  components: ['Header', 'Footer'],
-  ...
-  provide: {
-    navLinks: [...]
-  }
-}
-</script>
-```
-
-## Form
-
-The `Form` component is powerful. All you need to do is pass a few props, and the component will generate inputs and render them in the UI, complete with customizable form validation and both form-level and input-level error states.
-
-### _Props_
-
-name     | required? | types            | description                        | default
--------- | --------- | ---------------- | ---------------------------------- | -------
-`error`  | no        | `string` \       | `undefined` \                      | `null`  | Error state | `undefined`
-`id`     | yes       | `string`         | Form id                            | none
-`name`   | yes       | `string`         | Form name                          | none
-`schema` | yes       | `PdapFormSchema` | Array of schema entries for inputs | none
-
-### _Notes_
-
-- Form schema entries can look different depending on the type of input. We currently only use text inputs, so the example only displays these.
-- To properly submit the form, you must render a button with `type="submit"` _inside_ of the `Form` component.
-- `Form` emits a `submit` event and passes all values to the handler you pass to `on-submit`
-- Currently available form validations are defined by the `PdapFormValidators` interface:
-
-```
-PdapFormValidators {
-  maxLength: {
-    message?: string;
-    value: number;
-  };
-  minLength: {
-    message?: string;
-    value: number;
-  };
-  required: {
-    message?: string;
-    value: boolean;
-  };
-}
-```
-
-- The `message` property is optional. If it is not passed, Vuelidate will default to a generic error message. The `value` property is the value you want to validate against. (i.e. for a required field with a max length of 12 characters, we might pass:
-
-```
-// For a custom message
-{
-  ...,
-  validators: {
-    maxLength: {
-      message: 'No more than twelve characters, please!',
-      value: 12
-    },
-    required: {
-      message: 'Pretty please enter this field.',
-      value: true
-    }
-  }
-}
-
-// For the default Vuelidate message
-{
-  ...,
-  validators: {
-    maxLength: {
-      value: 12
-    },
-    required: {
-      value: true
-    }
-  }
-}
-```
-
-)
-
-### _Example_
-
-```
-<template>
-  <Form :schema="formSchema" :on-submit="handleSubmit" id="test-form" name="data-request-form">
-    <Button intent="primary" type="submit">Click me</Button>
-  </Form>
-</template>
-
-...
-
-<script>
-import { Button, Form, PdapInputTypes } from 'pdap-design-system';
-
-...
-
-export default {
-  components: ['Button', 'Form'],
-  data() {
-    return {
-      formSchema: [
-        {
-          id: 'testfirstname',
-          name: 'firstName',
-          label: 'First Name',
-          type: 'text',
-          placeholder: 'John',
-          value: '',
-          validators: {
-            minLength: {
-              value: 3
-            },
-            required: {
-              message: 'Please provide this information',
-              value: true
-            }
-          },
-        },
-        {
-          id: 'testlastname',
-          name: 'lastName',
-          label: 'Last Name',
-          type: 'text',
-          placeholder: 'Doe',
-          value: '',
-          validators: {
-            minLength: {
-              value: 3
-            },
-            maxLength: {
-              message: 'A thousand characters for your surname? Are you a bot?',
-              value: 999
-            },
-          },
-        {
-          id: 'ice-cream',
-          name: 'iceCream',
-          label: 'Do you like ice cream?',
-          type: 'checkbox',
-          defaultChecked: true,
-        }
-      ]
-    }
-  },
-  methods: {
-    handleSubmit: async function(data) {
-      await doRequestStuff(data);
-      this.$router.push('/')
-    }
-  }
-  ...
-}
-</script>
-```
-
-## GridContainer
-
-_DEPRECATED_ All container components are designed to be dynamic and take any `HTMLElement` tag as the component to be rendered. It also works with the `GridItem` component (see example below). `GridContainer` and `GridItem` could both be passed as the element type for `FlexContainer`, for example, or vice versa, allowing us to easily compose complex layouts.
-
-### _Props_
-
-name              | required? | types      | description                         | default
------------------ | --------- | ---------- | ----------------------------------- | ---------------------------------------------------
-`columns`         | no        | `1` \      | `2` \                               | `3` \                                               | `'auto'` | Number of grid columns | `'auto'`
-`component`       | no        | `string`   | HTML Element to render as container | `'div'`
-`rows`            | no        | `number` \ | `'auto'`                            | Number of grid rows                                 | `'auto'`
-`templateColumns` | no        | `string` \ | `undefined`                         | Custom `grid-template-columns` value, passed inline | `undefined` (no-op)
-`templateRows`    | no        | `string` \ | `undefined`                         | Custom `grid-template-rows` value, passed inline    | `undefined` (no-op)
-
-### _Notes_
-
-- Grid layouts max out at 3 columns, and responsiveness is baked in.
-
-  - i.e. When you render a 3-column grid layout, it automatically resizes to 2 columns, then 1 column, as screen widths decrease.
-  - In this case, it is a best practice to leave the `rows` prop as its default `'auto'` value, to ensure that the layout fills as many rows as are needed when the number of columns decreases
-
-### _Example_
-
-```
-<template>
-  <GridContainer :columns="3" component="section">
-    <GridItem component="FlexContainer">
-      <h2>Some content goes here</h2>
-      <p>More content goes here.</p>
-      <Button class="custom-button-class-name" :isLoading="isLoading" @click="() => console.log('hello world')">
-        Say hello with this button
-      </Button>
-    </GridItem>
-  </GridContainer>
-</template>
-
-...
-
-<script>
-import { Button, FlexContainer } from 'pdap-design-system';
-
-...
-
-export default {
-  components: ['Button', 'FlexContainer', 'GridContainer', 'GridItem'],
-  props: ['requestPending', ...],
-  data() {
-    return {
-      isLoading: this.requestPending
-    }
-  },
-  ...
-}
-</script>
-```
-
-## GridItem
-
-_DEPRECATED_
-
-### _Props_
-
-name         | required? | types    | description                         | default
------------- | --------- | -------- | ----------------------------------- | -------
-`component`  | no        | `string` | HTML Element to render as grid item | `'div'`
-`spanColumn` | no        | `1` \    | `2` \                               | `3`     | Columns grid item should span | `1`
-`spanRow`    | no        | `number` | Rows grid item should span          | `1`
-
-### _Notes_
-
-- Grid layouts max out at 3 columns, and responsiveness is baked in.
-
-  - i.e. When you render a 3-column grid layout, it automatically resizes to 2 columns, then 1 column, as screen widths decrease.
-  - In this case, it is a best practice to leave the `rows` prop as its default `'auto'` value, to ensure that the layout fills as many rows as are needed when the number of columns decreases
-
-### _Example_
-
-See `GridContainer` above.
-
-## Header
-
-### _Props_
-
-name                  | required? | types    | description            | default
---------------------- | --------- | -------- | ---------------------- | ----------------------------------------------------------
-`logoImageSrc`        | no        | `string` | Source of logo image   | `'node_modules/pdap-design-system/dist/images/lockup.svg'`
-`logoImageAnchorPath` | no        | `string` | Flex alignment presets | `/`
-
-### _Notes_
-
-The `Header` component does not require any props to be passed. But keep in mind that it is responsible for rendering the `Nav` component. Consuming applications will need to `provide` an array of nav links -- **there are no defaults for this**, you must `provide` these links either 1\. in a layout component (see example below), at the route level, or at the app level. This allows for flexibility in which links are rendered on which routes
-
-### _Example_
-
-```
-<template>
-  <Header />
-  <router-view />
-  <Footer />
-</template>
-
-...
-
-<script>
-import { Header, Footer } from 'pdap-design-system';
-import { RouterView } from 'vue-router'
-
-...
-
-export default {
-  name: 'Layout',
-  components: ['Header', 'Footer'],
-  ...
-  provide: {
-    navLinks: [...]
-  }
-}
-</script>
-```
-
-## Input
-
-Inputs are rendered by the `Form` component via a schema. Please see `Form` for more details
-
-## Nav
-
-You do not need to render `Nav` directly. `Header` takes care of that. But you do need to `provide` nav link data from a parent component. This allows for nav links to be dynamic depending on where `Header` is rendered.
-
-### _Example_
-
-```
-<template>
-  <Header />
-  <router-view />
-  <Footer />
-</template>
-
-...
-
-<script>
-import { Footer, Header } from 'pdap-design-system';
-import { RouterView } from 'vue-router';
-
-...
-
-export default {
-  name: 'Layout',
-  components: ['Footer', 'Header'],
-  provide: {
-    navLinks: [
-      { path: '/', text: 'Home', method: 'path' },
-      { path: '/a', text: 'a', method: 'path' },
-      { path: '/b', text: 'b', method: 'path' },
-      { path: '/c', text: 'c', method: 'path' },
-      { href: 'https://www.google.com', text: 'Go to Google', method: 'href' },
-    ]
-  }
-  ...
-```
-
-## QuickSearchForm
-
-### _Props_
-
-name   | required? | types    | description | default
------- | --------- | -------- | ----------- | --------------------------------------------------------------------------
-`mode` | no        | `'dev' \ | 'prod'`     | env. controls which url users are sent to when form is rendered on pdap.io | `'prod'`
-
-### _Notes_
-
-The different `mode` prop values result the following base url values in the eventual navigation | value | base url | |--|--| | `'dev'` | `'https://data-sources.pdap.dev'` | | `'prod'` | `'https://data-sources.pdap.io'` |
-
-## TileIcon
-
-### _Props_
-
-name         | required? | types    | description                   | default
------------- | --------- | -------- | ----------------------------- | -------
-`imgAltText` | yes       | `string` | Descriptive alt text for icon | none
-`imgSrc`     | yes       | `string` | Source of icon to render      | none
-
-### _Example_
-
-```
-<template>
-  <GridContainer :columns="3" component="section">
-    <GridItem>
-      <TileIcon :imgAltText="altText" :imgSrc="imagePath" >
-    </GridItem>
-  </GridContainer>
-</template>
-
-...
-
-<script>
-import { Header, Footer } from 'pdap-design-system';
-import { RouterView } from 'vue-router'
-
-...
-
-export default {
-  name: 'Layout',
-  components: ['GridContainer', 'GridItem', 'TileIcon'],
-  props: ['alt', 'src'],
-  data() {
-    return {
-      altText: this.alt,
-      imgSrc: this.src
-    }
-  }
-}
-</script>
-```
-
-## Dropdown
-
-The Dropdown component is an accessible dropdown menu that can be triggered by click or hover and positioned in various placements. It provides keyboard accessibility features such as toggling the dropdown on enter/space and closing on escape.
-
-### _Props_
-
-name          | required? | types                     | description                                        | default
-------------- | --------- | ------------------------- | -------------------------------------------------- | -------------------------------
-`defaultOpen` | no        | `boolean`                 | Whether the dropdown is initially open             | `false`
-`disabled`    | no        | `boolean`                 | Whether the dropdown should be disabled            | `false`
-`triggerType` | no        | `PdapDropdownTriggerType` | The type of event that should trigger the dropdown | `PdapDropdownTriggerType.PRESS`
-
-### _Example_
-
-See [Component demo](../src/demo/pages/ComponentDemo.vue)
+# Component Documentation
+<!-- This file is auto-generated from README.md files contained in the components directory, no need to edit this file directly. -->
+
+- [Breadcrumbs](../src/components/Breadcrumbs//README.md)
+- [Button](../src/components/Button//README.md)
+- [Dropdown](../src/components/Dropdown//README.md)
+- [ErrorBoundary](../src/components/ErrorBoundary//README.md)
+- [Footer](../src/components/Footer//README.md)
+- [Form](../src/components/Form//README.md)
+- [Header](../src/components/Header//README.md)
+- [Input](../src/components/Input//README.md)
+- [Nav](../src/components/Nav//README.md)
+- [QuickSearchForm](../src/components/QuickSearchForm//README.md)
diff --git a/package.json b/package.json
index 3d65af0..76dec75 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,8 @@
 		"test:badge": "vitest run --coverage.enabled --coverage.reporter='text-summary'",
 		"test:ci": "npm run test -- --silent",
 		"typecheck": "vue-tsc",
-		"dev": "vite"
+		"dev": "vite",
+		"docs": "bash ./scripts/update-docs.sh"
 	},
 	"workspaces": [
 		"eslint-config"
@@ -134,4 +135,4 @@
 			"path": "./node_modules/cz-conventional-changelog"
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/scripts/update-docs.sh b/scripts/update-docs.sh
new file mode 100644
index 0000000..b7331d3
--- /dev/null
+++ b/scripts/update-docs.sh
@@ -0,0 +1,30 @@
+#!/bin/bash
+
+# Edit these vars at your peril
+base_dir=./src/components
+output_file="components.md"
+
+echo "# Component Documentation" > "docs/$output_file"
+echo -e "<!-- This file is auto-generated from README.md files contained in the components directory, no need to edit this file directly. -->\n" >> "docs/$output_file"
+
+for dir in $base_dir/*/; do
+    dir_name=$(basename "$dir")
+    dir_normalized=.$dir
+
+    # Check if a README.md file exists in the directory
+    if [ -f "$dir/README.md" ]; then
+        # If so, write the link to the output file
+        echo "- [$dir_name]($dir_normalized/README.md)" >> "docs/$output_file"
+    fi
+done
+
+# create a commit, only if there are changes
+if git diff --quiet docs/$output_file; then
+    echo "No component documentation changes detected"
+    exit 0
+else
+    commit_msg="chore(docs): auto-update to component docs"
+
+    echo "Changes detected, committing updated docs/$output_file file..."
+    git add docs/$output_file && git commit -m "$commit_msg" --no-verify && echo "Commit finished, proceeding with push"
+fi
diff --git a/src/components/Breadcrumbs/PdapBreadcrumbs.vue b/src/components/Breadcrumbs/PdapBreadcrumbs.vue
index 955148d..e7e32e2 100644
--- a/src/components/Breadcrumbs/PdapBreadcrumbs.vue
+++ b/src/components/Breadcrumbs/PdapBreadcrumbs.vue
@@ -25,6 +25,21 @@ const route = useRoute();
 const breadcrumbs = computed(() => getBreadcrumbs(route));
 </script>
 
+<script lang="ts">
+/**
+ * # `Breadcrumbs`
+ *
+ * Renders a hierarchy of matching links for all paths matching the current path.
+ *
+ * The rendered text of each link will default to the `name` value in each matching route's object, unless `meta.breadcrumbText` is set.
+ *
+ *
+ */
+export default {
+	name: 'PdapBreadcrumbs',
+};
+</script>
+
 <style scoped>
 .pdap-breadcrumbs {
 	@apply flex items-center;
diff --git a/src/components/Breadcrumbs/README.md b/src/components/Breadcrumbs/README.md
new file mode 100644
index 0000000..b40bb9c
--- /dev/null
+++ b/src/components/Breadcrumbs/README.md
@@ -0,0 +1,14 @@
+# Breadcrumbs
+
+The Breadcrumbs component renders a hierarchy of matching links for all paths matching the current path.
+
+The rendered text of each link will default to the `name` value in each matching route's object, unless `meta.breadcrumbText` is set. See the demo page [router](../../demo/router.js) for details.
+
+
+## Props
+
+Non
+
+## Example
+
+See [Component demo](../../demo/pages/ComponentDemo.vue) and demo page [router](../../demo/router.js).
\ No newline at end of file
diff --git a/src/components/Breadcrumbs/index.ts b/src/components/Breadcrumbs/index.ts
index 38f8857..e6ce3bb 100644
--- a/src/components/Breadcrumbs/index.ts
+++ b/src/components/Breadcrumbs/index.ts
@@ -1,3 +1 @@
-import PdapBreadcrumbs from './PdapBreadcrumbs.vue';
-
-export { PdapBreadcrumbs as Breadcrumbs };
+export { default as Breadcrumbs } from './PdapBreadcrumbs.vue';
diff --git a/src/components/Button/PdapButton.vue b/src/components/Button/PdapButton.vue
index a7d4bb4..9422a3e 100644
--- a/src/components/Button/PdapButton.vue
+++ b/src/components/Button/PdapButton.vue
@@ -25,6 +25,21 @@ const classes = reactive({
 });
 </script>
 
+<script lang="ts">
+/**
+ * # `Button`
+ * Styled button with PDAP branding. DOM attributes are forwarded to the HTML element, and most functionality works well this way.
+ *
+ * ## Props
+ * @prop {'primary' | 'secondary' | 'tertiary'} intent controls the styling of the button
+ * @prop {boolean} isLoading loading state of button
+ *
+ */
+export default {
+	name: 'PdapButton',
+};
+</script>
+
 <style>
 @tailwind components;
 
diff --git a/src/components/Button/README.md b/src/components/Button/README.md
new file mode 100644
index 0000000..301858c
--- /dev/null
+++ b/src/components/Button/README.md
@@ -0,0 +1,31 @@
+# Button
+
+## Props
+
+| name        | required? | types                                    | description                | default   |
+| ----------- | --------- | ---------------------------------------- | -------------------------- | --------- |
+| `isLoading` | no        | `boolean`                                | Request state              | `false`   |
+| `intent`    | yes       | `"primary" \| "secondary" \| "tertiary"` | Determines style of button | `primary` |
+
+## Example
+
+```
+<template>
+  <Button intent="primary" @click="() => console.log('hello world')" type="button">Click me</Button>
+</template>
+
+...
+
+<script>
+import { Button } from 'pdap-design-system';
+
+...
+
+export default {
+  components: ['Button'],
+  ...
+}
+</script>
+
+...
+```
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 222ff69..e68dc5a 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,3 +1 @@
-import PdapButton from './PdapButton.vue';
-
-export { PdapButton as Button };
+export { default as Button } from './PdapButton.vue';
diff --git a/src/components/Dropdown/PdapDropdown.vue b/src/components/Dropdown/PdapDropdown.vue
index 951150e..92e7937 100644
--- a/src/components/Dropdown/PdapDropdown.vue
+++ b/src/components/Dropdown/PdapDropdown.vue
@@ -122,6 +122,22 @@ onMounted(() => {
 });
 </script>
 
+<script lang="ts">
+/**
+ * # `Dropdown`
+ * An accessible dropdown menu that can be triggered by click or hover and positioned in various placements. It provides keyboard accessibility features such as toggling the dropdown on enter/space and closing on escape.
+ *
+ * ## Props
+ * @prop {boolean} defaultOpen Controls the initial `isOpen` state
+ * @prop {boolean} disabled Disabled state (forwarded to trigger button)
+ * @prop {PdapDropdownTriggerType} triggerType `'press' | 'hover'`
+ *
+ */
+export default {
+	name: 'PdapButton',
+};
+</script>
+
 <style>
 @tailwind components;
 
diff --git a/src/components/Dropdown/README.md b/src/components/Dropdown/README.md
new file mode 100644
index 0000000..f4a52d0
--- /dev/null
+++ b/src/components/Dropdown/README.md
@@ -0,0 +1,103 @@
+# Dropdown
+
+The Dropdown component is an accessible dropdown menu that can be triggered by click or hover and positioned in various placements. It provides keyboard accessibility features such as toggling the dropdown on enter/space and closing on escape.
+
+## Props
+
+| name          | required? | types                | description                                        | default   |
+| ------------- | --------- | -------------------- | -------------------------------------------------- | --------- |
+| `defaultOpen` | no        | `boolean`            | Whether the dropdown is initially open             | `false`   |
+| `disabled`    | no        | `boolean`            | Whether the dropdown should be disabled            | `false`   |
+| `triggerType` | no        | `"press" \| "hover"` | The type of event that should trigger the dropdown | `"press"` |
+
+## Slots
+
+| name      | required? | description                                                | default |
+| --------- | --------- | ---------------------------------------------------------- | ------- |
+| `trigger` | yes       | Content to be rendered inside of the trigger button        | n/a     |
+| `content` | yes       | Content to be rendered inside the dropdown when it is open | n/a     |
+
+## Examples
+
+See [Component demo](../../demo/pages/ComponentDemo.vue)
+
+### Hover or focus to open
+
+```
+<Dropdown 
+  trigger-on="hover"
+  @update:open="(isOpen: boolean) => (dropdownIsOpen = isOpen)"
+  @press="() => console.log('Hello from top-level button')"
+>
+  <template #trigger>
+    <span
+      :class="{
+        'font-semibold': dropdownIsOpen,
+      }"
+    >
+        Press to toggle dropdown open/closed
+    </span>
+  </template>
+  <template #content>
+    <Button
+      intent="tertiary"
+      @click="buttonAlert('Apples dropdown button clicked')"
+    >
+      Apples
+    </Button>
+
+    <Button
+      intent="tertiary"
+      @click="buttonAlert('Oranges dropdown button clicked')"
+    >
+      Oranges
+    </Button>
+
+    <a href="https://pdap.io" target="_blank" rel="noreferrer">
+      Go to pdap.io
+    </a>
+
+    <a href="https://pdap.dev" target="_blank" rel="noreferrer">
+      Go to pdap.dev
+    </a>
+  </template>
+</Dropdown>
+```
+
+### Press to open
+```
+<Dropdown @update:open="(isOpen: boolean) => (dropdownIsOpen = isOpen)">
+  <template #trigger>
+    <span
+      :class="{
+        'font-semibold': dropdownIsOpen,
+      }"
+    >
+        Press to toggle dropdown open/closed
+    </span>
+  </template>
+  <template #content>
+    <Button
+      intent="tertiary"
+      @click="buttonAlert('Apples dropdown button clicked')"
+    >
+      Apples
+    </Button>
+
+    <Button
+      intent="tertiary"
+      @click="buttonAlert('Oranges dropdown button clicked')"
+    >
+      Oranges
+    </Button>
+
+    <a href="https://pdap.io" target="_blank" rel="noreferrer">
+      Go to pdap.io
+    </a>
+
+    <a href="https://pdap.dev" target="_blank" rel="noreferrer">
+      Go to pdap.dev
+    </a>
+  </template>
+</Dropdown>
+```
diff --git a/src/components/ErrorBoundary/PdapErrorBoundary.vue b/src/components/ErrorBoundary/PdapErrorBoundary.vue
index eee4ba5..afcd75b 100644
--- a/src/components/ErrorBoundary/PdapErrorBoundary.vue
+++ b/src/components/ErrorBoundary/PdapErrorBoundary.vue
@@ -16,23 +16,16 @@
 
 <script setup lang="ts">
 import { ComponentPublicInstance, onErrorCaptured, ref } from 'vue';
-import { PdapErrorBoundaryProps } from './types';
+import { PdapErrorBoundaryProps, PdapErrorEmitted } from './types';
 
 const props = withDefaults(defineProps<PdapErrorBoundaryProps>(), {
 	component: 'div',
 	onError: undefined,
 	params: undefined,
-	stopPropagation: false,
 });
 
-interface PdapErrorEmitted {
-	error: Error;
-	vm: ComponentPublicInstance | null;
-	info?: string;
-}
-
 const emits = defineEmits<{
-	(event: 'error', { error, vm, info }: PdapErrorEmitted): void;
+	(event: 'onError', { error, vm, info }: PdapErrorEmitted): void;
 }>();
 const error$ = ref<Error>();
 const info$ = ref<string | undefined>('');
@@ -45,10 +38,8 @@ function interceptError(
 	error$.value = error;
 	info$.value = info;
 
-	props.onError?.(error, vm);
-	emits('error', { error: error, vm, info });
-
-	if (props.stopPropagation) return false;
+	props.onError?.(error, vm, info);
+	emits('onError', { error, vm, info });
 }
 
 /* Impossible and unwise to try testing this, so we remove from the coverage report */
@@ -57,3 +48,49 @@ onErrorCaptured((err, vm, info) => {
 	interceptError(err, vm, info);
 });
 </script>
+
+<script lang="ts">
+/**
+ * # `ErrorBoundary`
+ * Intercepts uncaught errors from its children and renders an error UI in place of its children.
+ *
+ * ## Props
+ * @prop {string} component Optional: the component to render as a fallback, defaults to 'div'
+ * @prop {PdapErrorBoundaryProps['onError']} onError Optional: callback to run on error, accepts two arguments, the error and the element (optional)
+ * @prop {Record<string, string>} params Optional: parameters to be forwarded to fallback
+ *
+ * ## Emits
+ * @emits onError includes object with `error`, and optionally `info` and `vm
+ *
+ * @example Top level
+ *
+ * <template>
+ * 	<AuthWrapper>
+ * 		<Header :logo-image-src="lockup" />
+ * 		<ErrorBoundary component="main">
+ * 			<router-view />
+ * 		</ErrorBoundary>
+ * 		<Footer :logo-image-src="acronym" />
+ * 	</AuthWrapper>
+ * </template>
+ *
+ * @example Within a component
+		<ErrorBoundary
+			class="col-span-full items-start"
+			component="div"
+			@on-error="({ error, vm, info }) => console.debug({ error, vm, info })"
+		>
+			<div class="col-span-full">
+				<p>
+					This is the content that will render inside the error boundary if
+					there is no error
+				</p>
+				<Button @click="triggerError">Click here to trigger error</Button>
+			</div>
+		</ErrorBoundary>
+ *
+ */
+export default {
+	name: 'ErrorBoundary',
+};
+</script>
diff --git a/src/components/ErrorBoundary/README.md b/src/components/ErrorBoundary/README.md
new file mode 100644
index 0000000..6346f43
--- /dev/null
+++ b/src/components/ErrorBoundary/README.md
@@ -0,0 +1,40 @@
+# ErrorBoundary
+Intercepts uncaught errors from its children and renders an error UI in place of its children.
+
+## Props
+| name        | required? | types                                                                           | description                     | default     |
+| ----------- | --------- | ------------------------------------------------------------------------------- | ------------------------------- | ----------- |
+| `component` | no        | `string`                                                                        | component to render as fallback | `'div'`     |
+| `onError`   | no        | `(error: Error, target?: ComponentPublicInstance \| null \| undefined) => void` | callback to run on error        | `undefined` |
+| `params`    | no        | `Record<string,string>`                                                         | params to forward to fallback   | `undefined` |
+
+## Example
+_From data-sources `App.vue`: This will catch any uncaught error at the route level and render the error fallback_
+
+```
+<template>
+	<AuthWrapper>
+		<Header :logo-image-src="lockup" />
+		<ErrorBoundary component="main">
+			<router-view />
+		</ErrorBoundary>
+		<Footer :logo-image-src="acronym" />
+	</AuthWrapper>
+</template>
+```
+
+_From data-sources `SearchResultPage.vue`: For each of these results, the error boundary will catch any uncaught error only within its `SearchResultCard` component child and render the error fallback. In this case, the error will_ not _bubble any further up the DOM tree, allowing us to render the rest of the UI that did not error._
+
+```
+<div class="grid pdap-grid-container-column-3 gap-4">
+  <ErrorBoundary
+    v-for="result in [...getAllRecordsFromSection(section)]"
+    :key="result.type"
+  >
+    <SearchResultCard
+      data-test="search-results-cards"
+      :data-source="result"
+    />
+  </ErrorBoundary>
+</div>
+```
\ No newline at end of file
diff --git a/src/components/ErrorBoundary/error-boundary.spec.ts b/src/components/ErrorBoundary/error-boundary.spec.ts
index 1310328..e8cf676 100644
--- a/src/components/ErrorBoundary/error-boundary.spec.ts
+++ b/src/components/ErrorBoundary/error-boundary.spec.ts
@@ -45,10 +45,6 @@ describe('ErrorBoundary', () => {
 		wrapper.vm.interceptError(testError);
 		await nextTick();
 
-		expect(onErrorSpy).toHaveBeenCalledWith({
-			error: testError,
-			vm: undefined,
-			info: undefined,
-		});
+		expect(onErrorSpy).toHaveBeenCalledWith(testError, undefined, undefined);
 	});
 });
diff --git a/src/components/ErrorBoundary/types.ts b/src/components/ErrorBoundary/types.ts
index 90a13c8..6701e7b 100644
--- a/src/components/ErrorBoundary/types.ts
+++ b/src/components/ErrorBoundary/types.ts
@@ -1,11 +1,17 @@
 import { ComponentPublicInstance } from 'vue';
 
+export interface PdapErrorEmitted {
+	error: Error;
+	vm: ComponentPublicInstance | null;
+	info?: string;
+}
+
 export interface PdapErrorBoundaryProps {
 	component: string;
 	onError?: (
 		error: Error,
-		target?: ComponentPublicInstance | null | undefined
+		target?: ComponentPublicInstance | null | undefined,
+		info?: string
 	) => void;
 	params?: Record<string, string>;
-	stopPropagation?: boolean;
 }
diff --git a/src/components/Footer/PdapFooter.vue b/src/components/Footer/PdapFooter.vue
index 9b26add..6ef7c85 100644
--- a/src/components/Footer/PdapFooter.vue
+++ b/src/components/Footer/PdapFooter.vue
@@ -102,6 +102,20 @@ const links = inject<PdapFooterSocialLinks[]>('footerLinks', [
 const navLogoLinkIsPath = props.logoImageAnchorPath.startsWith('/');
 </script>
 
+<script lang="ts">
+/**
+ * # `Footer`
+ *
+ * ## Props
+ * @prop {string} logoImageSrc Src for the PDAP logo image to be displayed
+ * @prop {string } logoImageAnchorPath Path for the link that wraps the PDAP logo image
+ *
+ */
+export default {
+	name: 'PdapFooter',
+};
+</script>
+
 <style>
 @tailwind components;
 
diff --git a/src/components/Footer/README.md b/src/components/Footer/README.md
new file mode 100644
index 0000000..fd5bb54
--- /dev/null
+++ b/src/components/Footer/README.md
@@ -0,0 +1,71 @@
+# Footer
+
+## Props
+
+| name                  | required? | types    | description            | default                                                     |
+| --------------------- | --------- | -------- | ---------------------- | ----------------------------------------------------------- |
+| `logoImageSrc`        | no        | `string` | Source of logo image   | `'node_modules/pdap-design-system/dist/images/acronym.svg'` |
+| `logoImageAnchorPath` | no        | `string` | Flex alignment presets | `/`                                                         |
+
+## Notes
+
+The `Footer` component provides support for overriding the default social links. The `links` variable is `inject`ed by the component, using the following defaults:
+
+```
+export default {
+  ...
+  inject: {
+    footerLinks: {
+      default: [
+          {
+              to: 'https://github.com/orgs/Police-Data-Accessibility-Project',
+              text: 'Github',
+          },
+          {
+              to: 'ttps://discord.gg/wMqex8nKZJ',
+              text: 'Discord',
+          },
+          {
+              to: 'https://www.linkedin.com/company/pdap',
+              text: 'LinkedIn',
+          },
+      ]
+    }
+  },
+  data() {
+    return {
+      links: this.footerLinks;
+    }
+  }
+}
+```
+
+If we desire different links somewhere that `Footer` is rendered, simply `provide` an overriding array from a parent component, like so:
+
+## Example
+
+```
+<template>
+  <Header />
+  <router-view />
+  <Footer />
+</template>
+
+...
+
+<script>
+import { Header, Footer } from 'pdap-design-system';
+import { RouterView } from 'vue-router'
+
+...
+
+export default {
+  name: 'Layout',
+  components: ['Header', 'Footer'],
+  ...
+  provide: {
+    navLinks: [...]
+  }
+}
+</script>
+```
diff --git a/src/components/Form/PdapForm.vue b/src/components/Form/PdapForm.vue
index bead9fd..4771ff4 100644
--- a/src/components/Form/PdapForm.vue
+++ b/src/components/Form/PdapForm.vue
@@ -93,9 +93,6 @@ const rules = props.schema.reduce((acc, input) => {
 }, {});
 const v$ = useVuelidate(rules, values, { $autoDirty: false, $lazy: true });
 
-// Types
-export type VuelidateInstance = typeof v$.value;
-
 // Vars
 const errorMessage = ref(props.error);
 
@@ -163,6 +160,117 @@ async function submit(event: Event) {
 }
 </script>
 
+<script lang="ts">
+/**
+ * # `Form`
+ * The `Form` component is powerful. All you need to do is pass a few props, and the component will generate inputs and render them in the UI, complete with customizable form validation and both form-level and input-level error states.
+ *
+ *
+ * ## Props
+ * @prop {string | undefined | null} error Error state. Only a non-falsy string results in a form-level error being displayed
+ * @prop {string} id Passed through to the `form` element as its `id`
+ * @prop {string} name Passed through to the `form` element as its `name`
+ * @prop {PdapFormSchema} schema Array of `PdapFormInputProps` objects.
+ *
+ * ## Notes
+ *
+ * - Form schema entries can look different depending on the type of input. We currently only use text inputs, so the example only displays these.
+ * - To properly submit the form, you must render a button with `type="submit"` _inside_ of the `Form` component.
+ * - `Form` emits a `submit` event and passes all values to the handler you pass to `on-submit`
+ * - Currently available form validations are defined by the `PdapFormValidators` interface:
+ *
+ * ```
+ * PdapFormValidators {
+ *   maxLength: {
+ *     message?: string;
+ *     value: number;
+ *   };
+ *   minLength: {
+ *     message?: string;
+ *     value: number;
+ *   };
+ *   required: {
+ *     message?: string;
+ *     value: boolean;
+ *   };
+ * }
+ * ```
+ *
+ *
+ * @example
+ *
+ * <template>
+ *  <Form :schema="formSchema" :on-submit="handleSubmit" id="test-form" name="data-request-form">
+ *    <Button intent="primary" type="submit">Click me</Button>
+ *  </Form>
+ * </template>
+ *
+ *
+ * <st>
+ * import { Button, Form, PdapInputTypes } from 'pdap-design-system';
+ *
+ * export default {
+ *  components: ['Button', 'Form'],
+ *  data() {
+ *    return {
+ *      formSchema: [
+ *        {
+ *          id: 'testfirstname',
+ *          name: 'firstName',
+ *          label: 'First Name',
+ *          type: 'text',
+ *          placeholder: 'John',
+ *          value: '',
+ *          validators: {
+ *            minLength: {
+ *              value: 3
+ *            },
+ *            required: {
+ *              message: 'Please provide this information',
+ *              value: true
+ *            }
+ *          },
+ *        },
+ *        {
+ *          id: 'testlastname',
+ *          name: 'lastName',
+ *          label: 'Last Name',
+ *          type: 'text',
+ *          placeholder: 'Doe',
+ *          value: '',
+ *          validators: {
+ *            minLength: {
+ *              value: 3
+ *            },
+ *            maxLength: {
+ *              message: 'A thousand characters for your surname? Are you a bot?',
+ *              value: 999
+ *            },
+ *          },
+ *        {
+ *          id: 'ice-cream',
+ *          name: 'iceCream',
+ *          label: 'Do you like ice cream?',
+ *          type: 'checkbox',
+ *          defaultChecked: true,
+ *        }
+ *      ]
+ *    }
+ *  },
+ *  methods: {
+ *    handleSubmit: async function(data) {
+ *      await doRequestStuff(data);
+ *      this.$router.push('/')
+ *    }
+ *  }
+ *}
+ * </scriptt>
+ */
+export default {
+	name: 'PdapForm',
+};
+</script>
+
 <style>
 @tailwind components;
 
diff --git a/src/components/Form/README.md b/src/components/Form/README.md
new file mode 100644
index 0000000..6fb85d8
--- /dev/null
+++ b/src/components/Form/README.md
@@ -0,0 +1,145 @@
+# Form
+
+The `Form` component is powerful. All you need to do is pass a few props, and the component will generate inputs and render them in the UI, complete with customizable form validation and both form-level and input-level error states.
+
+## Props
+
+| name     | required? | types                                                    | description                        | default     |
+| -------- | --------- | -------------------------------------------------------- | ---------------------------------- | ----------- |
+| `error`  | no        | `string` \| `undefined` \| `null`                        | Error state                        | `undefined` |
+| `id`     | yes       | `string`                                                 | Form id                            | none        |
+| `name`   | yes       | `string`                                                 | Form name                          | none        |
+| `schema` | yes       | `PdapFormSchema` (array of `PdapFormInputProps` objects) | Array of schema entries for inputs | none        |
+
+
+
+## Notes
+
+- Form schema entries can look different depending on the type of input. We currently only use text inputs, so the example only displays these.
+- To properly submit the form, you must render a button with `type="submit"` _inside_ of the `Form` component.
+- `Form` emits a `submit` event and passes all values to the handler you pass to `on-submit`
+- Currently available form validations are defined by the `PdapFormValidators` interface:
+
+```
+PdapFormValidators {
+  maxLength: {
+    message?: string;
+    value: number;
+  };
+  minLength: {
+    message?: string;
+    value: number;
+  };
+  required: {
+    message?: string;
+    value: boolean;
+  };
+}
+```
+
+- The `message` property is optional. If it is not passed, Vuelidate will default to a generic error message. The `value` property is the value you want to validate against. (i.e. for a required field with a max length of 12 characters, we might pass:
+
+```
+// For a custom message
+{
+  ...,
+  validators: {
+    maxLength: {
+      message: 'No more than twelve characters, please!',
+      value: 12
+    },
+    required: {
+      message: 'Pretty please enter this field.',
+      value: true
+    }
+  }
+}
+
+// For the default Vuelidate message
+{
+  ...,
+  validators: {
+    maxLength: {
+      value: 12
+    },
+    required: {
+      value: true
+    }
+  }
+}
+```
+
+## Example
+
+```
+<template>
+  <Form :schema="formSchema" :on-submit="handleSubmit" id="test-form" name="data-request-form">
+    <Button intent="primary" type="submit">Click me</Button>
+  </Form>
+</template>
+
+...
+
+<script>
+import { Button, Form, PdapInputTypes } from 'pdap-design-system';
+
+...
+
+export default {
+  components: ['Button', 'Form'],
+  data() {
+    return {
+      formSchema: [
+        {
+          id: 'testfirstname',
+          name: 'firstName',
+          label: 'First Name',
+          type: 'text',
+          placeholder: 'John',
+          value: '',
+          validators: {
+            minLength: {
+              value: 3
+            },
+            required: {
+              message: 'Please provide this information',
+              value: true
+            }
+          },
+        },
+        {
+          id: 'testlastname',
+          name: 'lastName',
+          label: 'Last Name',
+          type: 'text',
+          placeholder: 'Doe',
+          value: '',
+          validators: {
+            minLength: {
+              value: 3
+            },
+            maxLength: {
+              message: 'A thousand characters for your surname? Are you a bot?',
+              value: 999
+            },
+          },
+        {
+          id: 'ice-cream',
+          name: 'iceCream',
+          label: 'Do you like ice cream?',
+          type: 'checkbox',
+          defaultChecked: true,
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSubmit: async function(data) {
+      await doRequestStuff(data);
+      this.$router.push('/')
+    }
+  }
+  ...
+}
+</script>
+```
diff --git a/src/components/Header/PdapHeader.vue b/src/components/Header/PdapHeader.vue
index b6d4247..0dcae55 100644
--- a/src/components/Header/PdapHeader.vue
+++ b/src/components/Header/PdapHeader.vue
@@ -56,6 +56,23 @@ function getHeight() {
 }
 </script>
 
+<script lang="ts">
+/**
+ * # `Header`
+ *
+ * ## Props
+ * @prop {string} logoImageSrc Src for the PDAP logo image to be displayed
+ * @prop {string } logoImageAnchorPath Path for the link that wraps the PDAP logo image
+ *
+ * ## Notes
+ * The `Header` component does not require any props to be passed. But keep in mind that it is responsible for rendering the `Nav` component. Consuming applications will need to `provide` an array of nav links -- **there are no defaults for this**, you must `provide` these links either 1\. in a layout component (see example below), at the route level, or at the app level. This allows for flexibility in which links are rendered on which routes
+ *
+ */
+export default {
+	name: 'PdapHeader',
+};
+</script>
+
 <style>
 .pdap-header {
 	@apply dark:bg-neutral-300 relative bg-neutral-50 flex justify-between p-4 md:p-6 w-full z-50;
diff --git a/src/components/Header/README.md b/src/components/Header/README.md
new file mode 100644
index 0000000..f648cd1
--- /dev/null
+++ b/src/components/Header/README.md
@@ -0,0 +1,40 @@
+# Header
+
+## Props
+
+| name                  | required? | types    | description            | default                                                    |
+| --------------------- | --------- | -------- | ---------------------- | ---------------------------------------------------------- |
+| `logoImageSrc`        | no        | `string` | Source of logo image   | `'node_modules/pdap-design-system/dist/images/lockup.svg'` |
+| `logoImageAnchorPath` | no        | `string` | Flex alignment presets | `/`                                                        |
+
+## Notes
+
+The `Header` component does not require any props to be passed. But keep in mind that it is responsible for rendering the `Nav` component. Consuming applications will need to `provide` an array of nav links -- **there are no defaults for this**, you must `provide` these links either 1\. in a layout component (see example below), at the route level, or at the app level. This allows for flexibility in which links are rendered on which routes
+
+### _Example_
+
+```
+<template>
+  <Header />
+  <router-view />
+  <Footer />
+</template>
+
+...
+
+<script>
+import { Header, Footer } from 'pdap-design-system';
+import { RouterView } from 'vue-router'
+
+...
+
+export default {
+  name: 'Layout',
+  components: ['Header', 'Footer'],
+  ...
+  provide: {
+    navLinks: [...]
+  }
+}
+</script>
+```
diff --git a/src/components/Input/README.md b/src/components/Input/README.md
new file mode 100644
index 0000000..8e4ebd4
--- /dev/null
+++ b/src/components/Input/README.md
@@ -0,0 +1,3 @@
+# Input
+
+Inputs are rendered by the `Form` component via a schema. Please see `Form` for more details
\ No newline at end of file
diff --git a/src/components/Nav/PdapNav.vue b/src/components/Nav/PdapNav.vue
index 193d513..b70d231 100644
--- a/src/components/Nav/PdapNav.vue
+++ b/src/components/Nav/PdapNav.vue
@@ -116,6 +116,49 @@ async function toggleIsExpanded() {
 }
 </script>
 
+<script lang="ts">
+/**
+ * # `Nav`
+ *
+ * ## Notes
+ * You do not need to render `Nav` directly. `Header` takes care of that. But you do need to `provide` nav link data from a parent component. This allows for nav links to be dynamic depending on where `Header` is rendered.
+ *
+ * @example
+ *
+ *<template>
+ *  <Header />
+ *  <router-view />
+ *  <Footer />
+ *</template>
+ *
+ *
+ *<scriptt>
+ *import { Footer, Header } from 'pdap-design-system';
+ *import { RouterView } from 'vue-router';
+ *
+ *...
+ *
+ *export default {
+ *  name: 'Layout',
+ *  components: ['Footer', 'Header'],
+ *  provide: {
+ *    navLinks: [
+ *      { path: '/', text: 'Home', method: 'path' },
+ *      { path: '/a', text: 'a', method: 'path' },
+ *      { path: '/b', text: 'b', method: 'path' },
+ *      { path: '/c', text: 'c', method: 'path' },
+ *      { href: 'https://www.google.com', text: 'Go to Google', method: 'href' },
+ *    ]
+ *  }
+ *  ...
+ *}
+ *</scriptt>
+ */
+export default {
+	name: 'PdapHeader',
+};
+</script>
+
 <style>
 @tailwind components;
 
diff --git a/src/components/Nav/README.md b/src/components/Nav/README.md
new file mode 100644
index 0000000..d4234cb
--- /dev/null
+++ b/src/components/Nav/README.md
@@ -0,0 +1,37 @@
+# Nav
+
+You do not need to render `Nav` directly. `Header` takes care of that. But you do need to `provide` nav link data from a parent component. This allows for nav links to be dynamic depending on where `Header` is rendered.
+
+## Example
+
+```
+<template>
+  <Header />
+  <router-view />
+  <Footer />
+</template>
+
+...
+
+<script>
+import { Footer, Header } from 'pdap-design-system';
+import { RouterView } from 'vue-router';
+
+...
+
+export default {
+  name: 'Layout',
+  components: ['Footer', 'Header'],
+  provide: {
+    navLinks: [
+      { path: '/', text: 'Home', method: 'path' },
+      { path: '/a', text: 'a', method: 'path' },
+      { path: '/b', text: 'b', method: 'path' },
+      { path: '/c', text: 'c', method: 'path' },
+      { href: 'https://www.google.com', text: 'Go to Google', method: 'href' },
+    ]
+  }
+  ...
+}
+</script>
+```
diff --git a/src/components/QuickSearchForm/QuickSearchForm.vue b/src/components/QuickSearchForm/QuickSearchForm.vue
index dbb94e7..b50340b 100644
--- a/src/components/QuickSearchForm/QuickSearchForm.vue
+++ b/src/components/QuickSearchForm/QuickSearchForm.vue
@@ -130,6 +130,26 @@ function handleSubmit(values: { location: string; searchTerm: string }) {
 }
 </script>
 
+<script lang="ts">
+/**
+ * # QuickSearchForm
+ * Renders a form to search the API `/search` endpoint with a search term and a location.
+ *
+ * ## Notes
+ *
+ * The different `mode` prop values result the following base url values in the eventual navigation
+ *
+ * | value    | base url                          |
+ * | -------- | --------------------------------- |
+ * | `'dev'`  | `'https://data-sources.pdap.dev'` |
+ * | `'prod'` | `'https://data-sources.pdap.io'`  |
+ *
+ */
+export default {
+	name: 'QuickSearchForm',
+};
+</script>
+
 <style>
 @tailwind components;
 
diff --git a/src/components/QuickSearchForm/README.md b/src/components/QuickSearchForm/README.md
new file mode 100644
index 0000000..bcc3127
--- /dev/null
+++ b/src/components/QuickSearchForm/README.md
@@ -0,0 +1,18 @@
+# QuickSearchForm
+Renders a form to search the API `/search` endpoint with a search term and a location.
+
+## Props
+
+| name   | required? | types             | description                                                                  | default  |
+| ------ | --------- | ----------------- | ---------------------------------------------------------------------------- | -------- |
+| `mode` | no        | `'dev' \| 'prod'` | env —— controls which url users are sent to when form is rendered on pdap.io | `'prod'` |
+
+## Notes
+
+The different `mode` prop values result the following base url values in the eventual navigation 
+
+| value    | base url                          |
+| -------- | --------------------------------- |
+| `'dev'`  | `'https://data-sources.pdap.dev'` |
+| `'prod'` | `'https://data-sources.pdap.io'`  |
+
diff --git a/src/components/TileIcon/TileIcon.vue b/src/components/TileIcon/TileIcon.vue
index fb04b97..feb18fc 100644
--- a/src/components/TileIcon/TileIcon.vue
+++ b/src/components/TileIcon/TileIcon.vue
@@ -8,6 +8,15 @@ import { PdapTileIconProps } from './types';
 defineProps<PdapTileIconProps>();
 </script>
 
+<script lang="ts">
+/**
+ * @deprecated unused
+ */
+export default {
+	name: 'TileIcon',
+};
+</script>
+
 <style>
 .pdap-tile-icon {
 	@apply h-auto max-w-[7.5rem];
diff --git a/src/demo/pages/ComponentDemo.vue b/src/demo/pages/ComponentDemo.vue
index c45219c..3e4935d 100644
--- a/src/demo/pages/ComponentDemo.vue
+++ b/src/demo/pages/ComponentDemo.vue
@@ -159,7 +159,11 @@
 		<QuickSearchForm />
 
 		<h2>Error Boundary</h2>
-		<ErrorBoundary class="col-span-full items-start" component="div">
+		<ErrorBoundary
+			class="col-span-full items-start"
+			component="div"
+			@on-error="({ error, vm, info }) => console.debug({ error, vm, info })"
+		>
 			<div class="col-span-full">
 				<p>
 					This is the content that will render inside the error boundary if