pdap-design-system 2.7.0-beta.3 → 2.7.0-beta.5

package/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)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pdap-design-system",
-	"version": "2.7.0-beta.3",
+	"version": "2.7.0-beta.5",
 	"description": "Global styles for PDAP apps",
 	"author": "Police Data Accessibility Project, Inc.",
 	"license": "ISC",
@@ -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"

package/dist/components/FlexContainer/index.d.ts

@@ -1,2 +0,0 @@
-import FlexContainer from './FlexContainer.vue';
-export { FlexContainer };

package/dist/components/FlexContainer/types.d.ts

@@ -1,4 +0,0 @@
-export interface PdapFlexContainerProps {
-    alignment?: 'center' | 'start';
-    component?: string;
-}

package/dist/components/GridContainer/GridContainer.vue.d.ts

@@ -1,40 +0,0 @@
-import { PdapGridContainerProps } from './types';
-/** @deprecated use TailwindCSS class instead */
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PdapGridContainerProps>, {
-    columns: string;
-    component: string;
-    rows: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PdapGridContainerProps>, {
-    columns: string;
-    component: string;
-    rows: string;
-}>>>, {
-    component: string;
-    columns: 1 | 2 | 3 | "auto";
-    rows: number | "auto";
-}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/GridContainer/index.d.ts

@@ -1,2 +0,0 @@
-import GridContainer from './GridContainer.vue';
-export { GridContainer };

package/dist/components/GridContainer/types.d.ts

@@ -1,7 +0,0 @@
-export interface PdapGridContainerProps {
-    columns?: 1 | 2 | 3 | 'auto';
-    component?: string;
-    rows?: number | 'auto';
-    templateColumns?: string;
-    templateRows?: string;
-}

package/dist/components/GridItem/GridItem.vue.d.ts

@@ -1,40 +0,0 @@
-import { PdapGridItemProps } from './types';
-/** @deprecated */
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PdapGridItemProps>, {
-    component: string;
-    spanColumn: number;
-    spanRow: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PdapGridItemProps>, {
-    component: string;
-    spanColumn: number;
-    spanRow: number;
-}>>>, {
-    component: string;
-    spanColumn: 1 | 2 | 3;
-    spanRow: number;
-}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/GridItem/index.d.ts

@@ -1,2 +0,0 @@
-import GridItem from './GridItem.vue';
-export { GridItem };

package/dist/components/GridItem/types.d.ts

@@ -1,5 +0,0 @@
-export interface PdapGridItemProps {
-    component?: string;
-    spanColumn?: 1 | 2 | 3;
-    spanRow?: number;
-}