feat(demo): add demo components page [no ci] (#69)

Police-Data-Accessibility-Project · May 2, 2024 · c7fa873 · c7fa873
1 parent bbcee84
commit c7fa873
Show file tree

Hide file tree

Showing 27 changed files with 402 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -145,6 +145,7 @@ Use this [terminology](https://docs.pdap.io/activities/terms-and-definitions).
 | `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 |
 
 
 _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
@@ -73,7 +73,7 @@ export default {
 ```
 
 ## FlexContainer
-
+_DEPRECATED_
 All container components are designed to be dynamic and take any `HTMLElement` tag as the component to be rendered. `FlexContainer` can itself be passed as the element type for `GridItem`, for example, or vice versa, allowing us to easily compose complex layouts (more on this later with the `GridContainer` and `GridItem` documentation).
 
 ### _Props_
@@ -336,7 +336,7 @@ export default {
 ```
 
 ## 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_
@@ -391,7 +391,7 @@ export default {
 ```
 
 ## GridItem
-
+_DEPRECATED_
 ### _Props_
 
 | name | required? | types | description | default |

diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite + Vue + TS</title>
+</head>
+
+<body>
+ <div id="app"></div>
+ <script type="module" src="/src/demo/main.ts"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -112,7 +112,8 @@
  "test:changed": "npm run test -- --changed",
  "test:badge": "vitest run --coverage.enabled --coverage.reporter='text-summary'",
  "test:ci": "npm run test -- --silent",
- "typecheck": "vue-tsc"
+ "typecheck": "vue-tsc",
+ "dev": "vite"
  },
  "workspaces": [
  "eslint-config"

diff --git a/src/assets/acronym.svg b/src/assets/acronym.svg
diff --git a/src/assets/lockup.svg b/src/assets/lockup.svg
diff --git a/src/components/FlexContainer/FlexContainer.vue b/src/components/FlexContainer/FlexContainer.vue
@@ -24,7 +24,14 @@ const classes = reactive({
 });
 </script>
 
-<style>
+<script lang="ts">
+/** @deprecated Please use TailwindCSS class instead */
+export default {
+ name: 'FlexContainer',
+};
+</script>
+
+<!-- <style>
 @tailwind components;
 
 @layer components {
@@ -54,4 +61,4 @@ const classes = reactive({
  @apply p-0;
  }
 }
-</style>
+</style> -->
diff --git a/src/components/Footer/PdapFooter.vue b/src/components/Footer/PdapFooter.vue
@@ -1,6 +1,6 @@
 <template>
  <footer class="pdap-footer">
- <FlexContainer alignment="center">
+ <div class="pdap-flex-container-center">
  <ul class="pdap-footer-social-links">
  <li
  v-for="link in links"
@@ -66,19 +66,17 @@
  alt="Police Data Accessibility Project Logo"
  /></router-link>
  </div>
- </FlexContainer>
+ </div>
  </footer>
 </template>
 
 <script setup lang="ts">
 import { inject } from 'vue';
-import FlexContainer from '../FlexContainer/FlexContainer.vue';
-
-// Types
 import { PdapFooterProps, PdapFooterSocialLinks } from './types';
+import acronym from '../../assets/acronym.svg';
 
 const props = withDefaults(defineProps<PdapFooterProps>(), {
- logoImageSrc: 'node_modules/pdap-design-system/dist/images/acronym.svg',
+ logoImageSrc: acronym,
  logoImageAnchorPath: '/',
 });
 

diff --git a/src/components/Footer/__snapshots__/footer.spec.ts.snap b/src/components/Footer/__snapshots__/footer.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Footer component > Renders a footer 1`] = `
 <footer class="pdap-footer">
- <div class="pdap-flex-container pdap-flex-container-center">
+ <div class="pdap-flex-container-center">
  <ul class="pdap-footer-social-links">
  <li class="pdap-footer-link-container">
  <a class="pdap-footer-social-link" href="https://github.com/orgs/Police-Data-Accessibility-Project" referrerpolicy="no-referrer" target="_blank">Github</a>
@@ -35,7 +35,7 @@ exports[`Footer component > Renders a footer 1`] = `
  <img src="https://widgets.guidestar.org/gximage2?o=9973356&amp;l=v4">
  </a>
  <router-link class="pdap-footer-logo" to="/">
- <img alt="Police Data Accessibility Project Logo" src="node_modules/pdap-design-system/dist/images/acronym.svg" width="250">
+ <img alt="Police Data Accessibility Project Logo" src="/src/assets/acronym.svg" width="250">
  </router-link>
  </div>
  </div>

diff --git a/src/components/Footer/footer.spec.ts b/src/components/Footer/footer.spec.ts
@@ -27,9 +27,7 @@ describe('Footer component', () => {
  // Props - logo src
  test('Renders footer with default logo src', () => {
  const wrapper = mount(PdapFooter, base);
- expect(wrapper.props().logoImageSrc).toBe(
- 'node_modules/pdap-design-system/dist/images/acronym.svg'
- );
+ expect(wrapper.props().logoImageSrc).toBe('/src/assets/acronym.svg');
  });
 
  test('Renders footer with custom logo src', () => {

diff --git a/src/components/GridContainer/GridContainer.vue b/src/components/GridContainer/GridContainer.vue
@@ -33,23 +33,34 @@ const styles = reactive({
 });
 </script>
 
-<style>
-.pdap-grid-container {
- @apply grid grid-cols-[auto] grid-rows-[auto] h-full gap-4 mx-auto p-8 w-full;
- @apply md:gap-8 xs:max-w-3xl lg:max-w-4xl;
-}
+<script lang="ts">
+/** @deprecated use TailwindCSS class instead */
+export default {
+ name: 'GridContainer',
+};
+</script>
 
-.pdap-grid-container-column-1 {
- @apply grid-cols-1;
-}
+<!-- <style>
+@tailwind components;
 
-.pdap-grid-container-column-2 {
- @apply items-start grid-cols-1;
- @apply md:grid-cols-2;
-}
+@layer components {
+ .pdap-grid-container {
+ @apply grid grid-cols-[auto] grid-rows-[auto] h-full gap-4 mx-auto p-8 w-full;
+ @apply md:gap-8 xs:max-w-3xl lg:max-w-4xl;
+ }
+
+ .pdap-grid-container-column-1 {
+ @apply grid-cols-1;
+ }
+
+ .pdap-grid-container-column-2 {
+ @apply items-start grid-cols-1;
+ @apply md:grid-cols-2;
+ }
 
-.pdap-grid-container-column-3 {
- @apply grid-cols-1;
- @apply md:grid-cols-2 lg:grid-cols-3;
+ .pdap-grid-container-column-3 {
+ @apply grid-cols-1;
+ @apply md:grid-cols-2 lg:grid-cols-3;
+ }
 }
-</style>
+</style> -->
diff --git a/src/components/GridItem/GridItem.vue b/src/components/GridItem/GridItem.vue
@@ -29,6 +29,13 @@ const styles = reactive({
 });
 </script>
 
+<script lang="ts">
+/** @deprecated */
+export default {
+ name: 'GridItem',
+};
+</script>
+
 <style>
 @tailwind components;
 

diff --git a/src/components/Header/PdapHeader.vue b/src/components/Header/PdapHeader.vue
@@ -21,14 +21,13 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue';
 import { RouterLink } from 'vue-router';
-
 import PdapNav from '../Nav/PdapNav.vue';
-
 import { PdapHeaderProps } from './types';
+import lockup from '../../assets/lockup.svg';
 
 // Props
 const props = withDefaults(defineProps<PdapHeaderProps>(), {
- logoImageSrc: 'node_modules/pdap-design-system/dist/images/lockup.svg',
+ logoImageSrc: lockup,
  logoImageAnchorPath: '/',
 });
 

diff --git a/src/components/Header/header.spec.ts b/src/components/Header/header.spec.ts
@@ -54,9 +54,7 @@ describe('Header component', () => {
  // Props - logo src
  test('Renders header with default logo src', () => {
  const wrapper = mount(PdapHeader, base);
- expect(wrapper.props().logoImageSrc).toBe(
- 'node_modules/pdap-design-system/dist/images/lockup.svg'
- );
+ expect(wrapper.props().logoImageSrc).toBe('/src/assets/lockup.svg');
  });
 
  test('Renders header with custom logo src', () => {

diff --git a/src/components/Input/PdapInput.vue b/src/components/Input/PdapInput.vue
@@ -1,6 +1,7 @@
 <template>
- <GridContainer
+ <div
  :class="{
+ 'pdap-grid-container': true,
  'pdap-input': true,
  'pdap-input-error': Number(error?.length) >= 1,
  }"
@@ -47,13 +48,12 @@
  </div>
 
  <label class="pdap-input-label" :for="id">{{ label }}</label>
- </GridContainer>
+ </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { PdapInputBaseProps, PdapInputTypes } from './types';
-import { GridContainer } from '..';
 
 const props = withDefaults(defineProps<PdapInputBaseProps>(), {});
 
@@ -83,7 +83,7 @@ const errorMessageId = computed(() => `pdap-${props.name}-input-error`);
 @layer components {
  /* General input styles */
  .pdap-input {
- @apply h-[max-content] gap-4 leading-normal mb-3 w-full;
+ @apply h-[max-content] gap-4 leading-normal mb-3 w-full flex flex-col;
  }
 
  .pdap-grid-container.pdap-input {