Add footer docs

Author: matteason

README.md

@@ -27,7 +27,7 @@ Documentation is generated by running `npm run generate`. This generates static
 | Exit this page      |       |                        |
 | Fieldset            | Yes   |                        |
 | File upload         | Yes   |                        |
-| Footer              |       |                        |
+| Footer              | Yes   |                        |
 | Header              | Yes   |                        |
 | Inset text          | Yes   |                        |
 | Notification banner | Yes   |                        |

components/GvdPageWrapper.vue

@@ -10,18 +10,18 @@
         </main>
       </div>
     </slot>
-    <gv-footer copyright="Copyright © Matt Eason" copyright-href="http://github.com/matteason" :include-coat-of-arms="false" container-class="gvd-width-container">
+    <gv-footer container-class="gvd-width-container">
       <template #meta>
         <gv-footer-meta>
-          <template #items>
-            <gv-footer-meta-item text="GOV.UK Vue on GitHub" href="https://github.com/govuk-vue/govuk-vue"/>
-          </template>
+          <gv-footer-meta-item text="GOV.UK Vue on GitHub" href="https://github.com/govuk-vue/govuk-vue"/>
         </gv-footer-meta>
       </template>
-      <template #licence-logo/>
       <template #content-licence>
         Released under the <a href="https://opensource.org/license/mit/" class="govuk-footer__link">MIT License</a>.
       </template>
+      <template #copyright>
+        <a href="https://github.com/matteason" class="govuk-footer__link">Copyright © Matt Eason</a>
+      </template>
     </gv-footer>
 </template>
 

content/2.components/footer.md

@@ -0,0 +1,125 @@
+---
+layout: component
+---
+
+# Footer
+
+The footer provides copyright, licensing and other information about your service.
+
+See the [GOV.UK Design System documentation on the footer](https://design-system.service.gov.uk/components/footer/)
+for more information on when to use this component.
+
+```vue
+<gv-footer />
+```
+
+## Meta links
+
+To add meta links to the footer, use the `meta` slot and pass one or more `GvFooterMeta`s, each with one or more 
+`GvFooterMetaItem`s. If you pass multiple `GvFooterMeta`s, they will be shown on top of each other.
+
+Use meta links to add links to your:
+
+- privacy notice
+- accessibility statement
+- cookies page
+- terms and conditions
+- other language options
+
+You can [use router-link or nuxt-link](/get-started/using-router-link-or-nuxt-link) for your meta links if needed.
+
+```vue
+<gv-footer>
+  <template #meta>
+    <gv-footer-meta>
+      <gv-footer-meta-item href="#">Item 1</gv-footer-meta-item>
+      <gv-footer-meta-item href="#">Item 2</gv-footer-meta-item>
+      <gv-footer-meta-item href="#">Item 3</gv-footer-meta-item>
+    </gv-footer-meta>
+  </template>
+</gv-footer>
+```
+
+## Secondary navigation
+
+To add secondary navigation links footer, use the `navigation` slot and pass one or more `GvFooterNavigation`s, each 
+with one or more `GvFooterNavigationItem`s.
+
+Each group of navigation links can be split into multiple columns by passing a number to the `columns` prop, and
+groups can be shown side-by-side on larger screens by using the `width` prop. You can pass any GOV.UK Design System 
+grid width here, for example, `one-third`; `two-thirds`; `one-half`.
+
+You can [use router-link or nuxt-link](/get-started/using-router-link-or-nuxt-link) for your navigation links if needed.
+
+```vue
+<gv-footer>
+  <template #navigation>
+    <gv-footer-navigation 
+      title="Two column list" 
+      width="two-thirds" 
+      :columns="2"
+    >
+      <gv-footer-navigation-item v-for="index in 6" :key="index" href="#">
+        Navigation item {{ index }}
+      </gv-footer-navigation-item>
+    </gv-footer-navigation>
+    <gv-footer-navigation 
+      title="Single column list" 
+      width="one-third"
+    >
+      <gv-footer-navigation-item v-for="index in 3" :key="index" href="#">
+        Navigation item {{ index }}
+      </gv-footer-navigation-item>
+    </gv-footer-navigation>
+  </template>
+</gv-footer>
+```
+
+## Licence and copyright information.
+
+By default, the footer will show that your content is Crown Copyright and licenced under the Open Government Licence.
+If either of these do not apply to your service, you can override them with the `content-licence` and `copyright` slots 
+and props. For example, your content may use the MIT licence but still be under Crown Copyright.
+
+```vue
+<gv-footer>
+  <template #content-licence>
+    Released under the <a href="https://opensource.org/license/mit/" class="govuk-footer__link">MIT License</a>.
+  </template>
+</gv-footer>
+```
+
+You can exclude the content licence or copyright by passing empty content to the slot.
+
+```vue
+<gv-footer>
+  <template #content-licence />
+  <template #copyright>
+    Copyright © Organisation Name
+  </template>
+</gv-footer>
+```
+
+```vue
+<gv-footer>
+  <template #content-licence>
+    All content freely available under <a href="https://creativecommons.org/publicdomain/zero/1.0/" class="govuk-footer__link">CC0</a>.
+  </template>
+  <template #copyright/>
+</gv-footer>
+```
+
+::gvd-options{component="Footer" :showName=true}
+::
+
+::gvd-options{component="FooterMeta" :showName=true}
+::
+
+::gvd-options{component="FooterMetaItem" :showName=true}
+::
+
+::gvd-options{component="FooterNavigation" :showName=true}
+::
+
+::gvd-options{component="FooterNavigationItem" :showName=true}
+::

package-lock.json

@@ -14,6 +14,6 @@
     "vite-plugin-static-copy": "^0.16.0"
   },
   "dependencies": {
-    "govuk-vue": "1.0.0-alpha.18"
+    "govuk-vue": "1.0.0-alpha.20"
   }
 }