move vendored uk components to templates

app/templates/components/uk_components/skip-link/README.md

@@ -0,0 +1,15 @@
+# Skip link
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the skip link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/skip-link).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/skip-link/#options-example-default) for details.

app/templates/components/uk_components/skip-link/_skip-link.scss

@@ -0,0 +1,26 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/skip-link") {
+  .govuk-skip-link {
+    @include govuk-visually-hidden-focusable;
+    @include govuk-link-common;
+    @include govuk-link-style-text;
+    @include govuk-typography-responsive($size: 16);
+
+    display: block;
+    padding: govuk-spacing(2) govuk-spacing(3);
+
+    // Respect 'display cutout' safe area (avoids notches and rounded corners)
+    @supports (padding: unquote("max(calc(0px))")) {
+      $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
+      $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
+
+      // Use max() to pick largest padding, default or with safe area
+      // Escaped due to Sass max() vs. CSS native max()
+      padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
+      padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
+    }
+  }
+}

app/templates/components/uk_components/skip-link/macro-options.json

@@ -0,0 +1,32 @@
+[
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the skip link component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML to use within the skip link component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": "The value of the skip link href attribute. Defaults to"
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the skip link."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the skip link."
+    }
+]

app/templates/components/uk_components/skip-link/macro.njk

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

app/templates/components/uk_components/skip-link/template.njk

@@ -0,0 +1,3 @@
+<a href="{{ params.href | default('#content') }}" class="govuk-skip-link{%- if params.classes %} {{ params.classes }}{% endif -%}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- params.html | safe if params.html else params.text -}}
+</a>