diff --git a/docs/_components/example/_example.scss b/docs/_components/example/_example.scss deleted file mode 100644 index 954bebe..0000000 --- a/docs/_components/example/_example.scss +++ /dev/null @@ -1,33 +0,0 @@ -.app-example__frame { - background: govuk-colour("white"); - border: 0; - border-right: 1px solid $govuk-border-colour; - display: block; - max-width: calc(100% - govuk-spacing(4) * 2); - padding: govuk-spacing(4); - resize: both; - width: 100%; -} - -.app-example__new-window { - @include govuk-font($size: 16); -} - -.app-example__tabs { - .govuk-tabs__panel[id$="-preview"] { - background: govuk-colour("light-grey"); - padding: 0; - } - - .x-govuk-code { - margin: 0; - } -} - -// stylelint-disable declaration-no-important -.app-example__toolbar { - background: $govuk-body-background-colour; - border-top: 1px solid $govuk-border-colour; - max-width: initial !important; - padding: govuk-spacing(2); -} diff --git a/docs/_components/example/template.njk b/docs/_components/example/template.njk deleted file mode 100644 index 7881e64..0000000 --- a/docs/_components/example/template.njk +++ /dev/null @@ -1,38 +0,0 @@ -{%- from "govuk/components/tabs/macro.njk" import govukTabs -%} - -{%- set examplePath = "/examples/" + params.example -%} - -
-

- Contents -

- -
- -

- Open this example in a new tab -

-
-
- {{ getHtmlCode(params.example) }} -
-
- {{ getNunjucksCode(params.example) }} -
-
\ No newline at end of file diff --git a/docs/_layouts/sub-navigation.njk b/docs/_layouts/sub-navigation.njk index c693411..169dccc 100644 --- a/docs/_layouts/sub-navigation.njk +++ b/docs/_layouts/sub-navigation.njk @@ -3,6 +3,10 @@ {% block scripts %} + + {% endblock %} diff --git a/docs/assets/application.scss b/docs/assets/application.scss index ea5026b..c665484 100644 --- a/docs/assets/application.scss +++ b/docs/assets/application.scss @@ -1,5 +1,4 @@ @import "govuk-frontend/dist/govuk/base"; -@import "../_components/example/example"; @media screen and (min-width: 800px) { .app-prose-scope .govuk-table:not([tabindex]) { diff --git a/docs/autocomplete.md b/docs/autocomplete.md index 48faadc..9f76ff4 100644 --- a/docs/autocomplete.md +++ b/docs/autocomplete.md @@ -4,11 +4,29 @@ order: 3 title: Autocomplete description: Help users find and select from a number of options. --- +{% from "example/macro.njk" import xGovukExample %} -{% from "example/macro.njk" import appExample %} - -{{ appExample({ - example: "autocomplete" +{{ xGovukExample({ + idPrefix: "autocomplete", + previewPath: "/examples/autocomplete", + codeSamples: [ + { + label: { + text: "HTML" + }, + content: { + html: getHtmlCode("autocomplete") + } + }, + { + label: { + text: "Nunjucks" + }, + content: { + html: getNunjucksCode("autocomplete") + } + } + ] }) }} This component implements the [Accessible autocomplete pattern](https://github.com/alphagov/accessible-autocomplete) to enhance a fixed list of options provided by a `