feat(component): add link button component

docs/_includes/arguments/link-button.md

@@ -0,0 +1,21 @@
+### csrfToken
+
+| Name | Type   | Required | Description |
+| ---- | ------ | -------- | ----------- |
+|      | object | Yes      |             |
+
+Setup
+
+`const csrf = csurf()`
+
+`res.locals.csrfToken = req.csrfToken()`
+
+- [csurf](https://www.npmjs.com/package/csurf)
+
+### container
+
+| Name   | Type   | Required | Description       |
+| ------ | ------ | -------- | ----------------- |
+| id     | string | Yes      | id of the control |
+| text   | string | Yes      | Button text       |
+| action | string | Yes      | POST URL          |

docs/components/link-button.md

@@ -0,0 +1,31 @@
+---
+layout: layouts/component.njk
+title: Link Button
+---
+
+{% lastUpdated "link-button" %}
+
+{% example "/examples/link-button", 300 %}
+
+## When to use
+
+Use the _link button_ component to ....
+
+## When not to use
+
+...
+
+## How to use
+
+...
+
+- id: The button Id
+- text: The button text
+- action: the URL of the POST
+- csrfToken: Cross Site Request Forgery Token
+
+## Research
+
+This component has been used successfully in the following services:
+
+- HMPPS Manage Users

docs/examples/link-button/index.njk

@@ -0,0 +1,16 @@
+---
+layout: layouts/example.njk
+title: Link Button (example)
+arguments: link-button
+---
+
+{%- from "moj/components/link-button/macro.njk" import mojLinkButton -%}
+
+{% set csrfToken = "ABC123" %}
+{% set baseUrl = "http://localhost" %}
+
+{{ mojLinkButton(csrfToken, {
+  text: "Activate",
+  action: baseUrl + "/activate",
+  id: "activate-button"
+})}}

package/README.md

@@ -1,6 +1,10 @@
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-[![moj-frontend](https://circleci.com/gh/ministryofjustice/moj-frontend.svg?style=shield)](https://circleci.com/gh/ministryofjustice/moj-frontend)
+![NPM License](https://img.shields.io/npm/l/@ministryofjustice/frontend)
+
+![GitHub Workflow Status](https://img.shields.io/github/workflow/status/ministryofjustice/moj-frontend/Build%20and%20deploy%20docs)
+![NPM Downloads](https://img.shields.io/npm/v/@ministryofjustice/frontend)
+![NPM Downloads](https://img.shields.io/npm/dw/@ministryofjustice/frontend)
 
 # Ministry of Justice Frontend
 

src/moj/components/link-button/README.md

@@ -0,0 +1,13 @@
+# Link Button
+
+- [Guidance](https://design-patterns.service.justice.gov.uk/components/link-button)
+
+## Examples
+
+```
+{{ mojLinkButton(csrfToken, {
+  text: "Activate",
+  action: baseUrl + "/activate",
+  id: "activate-button"
+})}}
+```

src/moj/components/link-button/_link-button.scss

@@ -0,0 +1,13 @@
+/* ==========================================================================
+   # LINK BUTTON
+   ========================================================================== */
+
+.moj-link-button {
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  text-decoration: underline;
+  cursor: pointer;
+  color: $govuk-link-colour;
+}

src/moj/components/link-button/macro.njk

@@ -0,0 +1,3 @@
+{% macro mojLinkButton(csrfToken, params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

src/moj/components/link-button/template.njk

@@ -0,0 +1,12 @@
+<form method="post" action="{{ params.action }}">
+  <input type="hidden" name="_csrf" value="{{ csrfToken }}" />
+  <button type="submit"
+          name="{{ params.id }}"
+          class="moj-link-button govuk-body-m govuk-link"
+          data-qa="{{ params.id }}"
+          data-prevent-double-click="true"
+          data-module="govuk-button"
+  >
+    {{ params.text }}
+  </button>
+</form>