Police-Data-Accessibility-Project · joshuagraber · May 2, 2024 · May 2, 2024
@@ -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._

@@ -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 |

@@ -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>
@@ -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"

@@ -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> -->
@@ -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: '/',
 });
 

@@ -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>

@@ -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', () => {

@@ -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> -->
@@ -29,6 +29,13 @@ const styles = reactive({
 });
 </script>
 
+<script lang="ts">
+/** @deprecated */
+export default {
+	name: 'GridItem',
+};
+</script>
+
 <style>
 @tailwind components;
 

@@ -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: '/',
 });
 

@@ -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', () => {

@@ -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 {