docs(components): update footer readme

src/components/Footer/README.md

@@ -2,32 +2,49 @@
 
 ## 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 | `/`                                                         |
+| name              | required? | types                              | description                  | default |
+| ----------------- | --------- | ---------------------------------- | ---------------------------- | ------- |
+| `fundraisingData` | yes       | `{ raised: string; goal: string }` | data from donor box campaign |         |
 
 ## 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:
 
-```
+```vue
 export default {
   ...
   inject: {
     footerLinks: {
       default: [
           {
-              to: 'https://github.com/orgs/Police-Data-Accessibility-Project',
-              text: 'Github',
+            href: 'https://github.com/orgs/Police-Data-Accessibility-Project',
+            text: 'Github',
+            icon: FOOTER_LINK_ICONS.GITHUB,
+          },
+          {
+            href: 'https://discord.gg/wMqex8nKZJ',
+            text: 'Discord',
+            icon: FOOTER_LINK_ICONS.DISCORD,
+          },
+          {
+            href: 'https://www.linkedin.com/company/pdap',
+            text: 'LinkedIn',
+            icon: FOOTER_LINK_ICONS.LINKEDIN,
           },
           {
-              to: 'ttps://discord.gg/wMqex8nKZJ',
-              text: 'Discord',
+            href: 'https://pdap.io/jobs',
+            text: 'Jobs',
+            icon: FOOTER_LINK_ICONS.JOBS,
           },
           {
-              to: 'https://www.linkedin.com/company/pdap',
-              text: 'LinkedIn',
+            href: 'https://newsletter.pdap.io/',
+            text: 'Newsletter',
+            icon: FOOTER_LINK_ICONS.NEWSLETTER,
+          },
+          {
+            href: 'https://docs.pdap.io/',
+            text: 'Docs',
+            icon: FOOTER_LINK_ICONS.DOCS,
           },
       ]
     }
@@ -44,7 +61,7 @@ If we desire different links somewhere that `Footer` is rendered, simply `provid
 
 ## Example
 
-```
+```vue
 <template>
   <Header />
   <router-view />
@@ -54,7 +71,7 @@ If we desire different links somewhere that `Footer` is rendered, simply `provid
 ...
 
 <script>
-import { Header, Footer } from 'pdap-design-system';
+import { Header, Footer, FOOTER_LINK_ICONS } from 'pdap-design-system';
 import { RouterView } from 'vue-router'
 
 ...
@@ -64,8 +81,28 @@ export default {
   components: ['Header', 'Footer'],
   ...
   provide: {
-    navLinks: [...]
+    navLinks: [
+      // Type
+      {
+        href?: string;
+        path?: string;
+        text: string;
+        icon?: FooterIconName;
+      },
+      // Example
+      {
+        href: 'https://www.foo.com';
+        text: 'Foo';
+        icon: FOOTER_LINK_ICONS.GITHUB;
+      }
+    ]
   }
 }
 </script>
 ```
+
+If `href` is passed, a standard anchor tag. If `path` is passed, a `RouterLink` component is rendered.
+If neither are passed, it's a no-op.
+If both are passed, `path` takes precedence.
+
+`FOOTER_LINK_ICONS` is exposed from the package. `icon` must be a value contained on that object if it is passed.