move vendored uk components to templates

app/templates/components/uk_components/details/README.md

@@ -0,0 +1,15 @@
+# Details
+
+## 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 details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/details).
+
+## 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/details/#options-example-default) for details.

app/templates/components/uk_components/details/_details.scss

@@ -0,0 +1,89 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/details") {
+
+  .govuk-details {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-responsive-margin(6, "bottom");
+
+    display: block;
+  }
+
+  .govuk-details__summary {
+    // Make the focus outline shrink-wrap the text content of the summary
+    display: inline-block;
+
+    // Absolutely position the marker against this element
+    position: relative;
+
+    margin-bottom: govuk-spacing(1);
+
+    // Allow for absolutely positioned marker and align with disclosed text
+    padding-left: govuk-spacing(4) + $govuk-border-width;
+
+    // Style the summary to look like a link...
+    color: $govuk-link-colour;
+    cursor: pointer;
+  }
+
+  // ...but only underline the text, not the arrow
+  .govuk-details__summary-text {
+    text-decoration: underline;
+  }
+
+  .govuk-details__summary:hover {
+    color: $govuk-link-hover-colour;
+  }
+
+  .govuk-details__summary:focus {
+    // -1px offset fixes gap between background and outline in Firefox
+    outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour;
+    outline-offset: -1px;
+    // When focussed, the text colour needs to be darker to ensure that colour
+    // contrast is still acceptable
+    color: $govuk-focus-text-colour;
+    background: $govuk-focus-colour;
+  }
+
+  // Remove the default details marker so we can style our own consistently and
+  // ensure it displays in Firefox (see implementation.md for details)
+  .govuk-details__summary::-webkit-details-marker {
+    display: none;
+  }
+
+  // Append our own open / closed marker using a pseudo-element
+  .govuk-details__summary:before {
+    content: "";
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    margin: auto;
+
+    @include govuk-shape-arrow($direction: right, $base: 14px);
+
+    .govuk-details[open] > & {
+      @include govuk-shape-arrow($direction: down, $base: 14px);
+    }
+  }
+
+  .govuk-details__text {
+    padding: govuk-spacing(3);
+    padding-left: govuk-spacing(4);
+    border-left: $govuk-border-width solid $govuk-border-colour;
+  }
+
+  .govuk-details__text p {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(4);
+  }
+
+  .govuk-details__text > :last-child {
+    margin-bottom: 0;
+  }
+}

app/templates/components/uk_components/details/macro-options.json

@@ -0,0 +1,50 @@
+[
+    {
+        "name": "summaryText",
+        "type": "string",
+        "required": true,
+        "description": "If `summmaryHtml` is set, this is not required. Text to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored."
+    },
+    {
+        "name": "summaryHtml",
+        "type": "string",
+        "required": true,
+        "description": "If `summmaryText` is set, this is not required. HTML to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored."
+    },
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the disclosed part of the details element. 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 disclosed part of the details element. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "id",
+        "type": "string",
+        "required": false,
+        "description": "Id to add to the details element."
+    },
+    {
+        "name": "open",
+        "type": "boolean",
+        "required": false,
+        "description": "If true, details element will be expanded."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the `<details>` element."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the `<details>` element."
+    }
+]

app/templates/components/uk_components/details/macro.njk

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

app/templates/components/uk_components/details/template.njk

@@ -0,0 +1,10 @@
+<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+  <summary class="govuk-details__summary">
+    <span class="govuk-details__summary-text">
+      {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}
+    </span>
+  </summary>
+  <div class="govuk-details__text">
+    {{ params.html | safe if params.html else params.text }}
+  </div>
+</details>