Merge pull request #5 from x-govuk/rebuild

Update design and review code

.editorconfig

@@ -0,0 +1,14 @@
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": ["standard", "prettier"],
+  "ignorePatterns": ["_site"],
+  "parserOptions": {
+    "ecmaVersion": "latest"
+  },
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": ["error"]
+  }
+}

.github/workflows/deploy.yml

@@ -20,16 +20,16 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-    - name: Setup Pages
-      uses: actions/configure-pages@v5
-    - name: Install dependencies
-      run: npm ci
-    - name: Build with Eleventy
-      run: npm run-script build
-    - name: Upload artifact
-      uses: actions/upload-pages-artifact@v3
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Install dependencies
+        run: npm ci
+      - name: Build with Eleventy
+        run: npm run-script build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
 
   deploy:
     environment:

.gitignore

@@ -1,8 +1,4 @@
-# Folders to ignore
-
-node_modules
 node_modules/
-npm-debug.log
 _site
-_site/
+npm-debug.log
 .DS_Store

.nvmrc

@@ -0,0 +1 @@
+20

.prettierrc.json

@@ -0,0 +1,21 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "overrides": [
+    {
+      "files": "*.md",
+      "options": {
+        "embeddedLanguageFormatting": "off"
+      }
+    },
+    {
+      "files": "*.scss",
+      "options": {
+        "printWidth": 120,
+        "singleQuote": false
+      }
+    }
+  ]
+}

.stylelintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "stylelint-config-gds/scss",
+  "ignoreFiles": ["_site/**/*.{css,scss}"],
+  "plugins": ["stylelint-order"],
+  "rules": {
+    "order/properties-alphabetical-order": true
+  }
+}

README.md

@@ -1,8 +1,9 @@
-## Fix common accessibility issues in forms
+# Fix Common Accessibility Mistakes
 
-This is a project to show common mistakes and improvements for forms designed using GOV.UK Frontend.
+This is a project to show common mistakes and improvements for forms and other interactions designed using GOV.UK Frontend.
 
-http://x-govuk.github.io/govuk-accessibility-mistakes-forms
+<http://x-govuk.github.io/govuk-accessibility-mistakes-forms>
 
 ## Contribute
+
 This is available under a CC-4.0 International licence. You can create examples, or contact Vicky Teinaki for more information.

app/_components/example/_example.scss

@@ -28,6 +28,7 @@
 .app-example__toolbar {
   background: $govuk-body-background-colour;
   border-top: 1px solid $govuk-border-colour;
+  margin: 0;
   max-width: initial !important;
   padding: govuk-spacing(2);
 }

app/_components/example/macro.njk

@@ -1,3 +1,3 @@
-{% macro example(link) %}
+{% macro appExample(example) %}
   {%- include "./template.njk" -%}
 {% endmacro %}

app/_components/example/template.njk

@@ -1,34 +1,44 @@
+{%- set examplePath = "/examples/" + example -%}
+
 <div class="govuk-tabs app-example__tabs" data-module="govuk-tabs">
   <h2 class="govuk-tabs__title">
     Contents
   </h2>
   <ul class="govuk-tabs__list">
     <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
-      <a class="govuk-tabs__tab" href="#{{ link | replace("/", "-") }}-preview">
+      <a class="govuk-tabs__tab" href="#{{ example | replace("/", "-") }}-preview">
         Example
       </a>
     </li>
     <li class="govuk-tabs__list-item">
-      <a class="govuk-tabs__tab" href="#{{ link | replace("/", "-") }}-html">
+      <a class="govuk-tabs__tab" href="#{{ example | replace("/", "-") }}-html">
         HTML
       </a>
     </li>
     <li class="govuk-tabs__list-item">
-      <a class="govuk-tabs__tab" href="#{{ link | replace("/", "-") }}-nunjucks">
+      <a class="govuk-tabs__tab" href="#{{ example | replace("/", "-") }}-nunjucks">
         Nunjucks
       </a>
     </li>
   </ul>
-  <div class="govuk-tabs__panel" id="{{ link | replace("/", "-") }}-preview">
-    <iframe class="app-example__frame" data-module="app-example-frame" src="../{{ link }}"></iframe>
+  <div class="govuk-tabs__panel" id="{{ example | replace("/", "-") }}-preview">
+    <iframe class="app-example__frame" data-module="app-example-frame" src="{{ examplePath }}"></iframe>
     <p class="app-example__toolbar">
-      <a class="app-example__new-window" href="../{{ link }}" target="_blank">Open this example in a new tab</a>
+      <a class="app-example__new-window" href="{{ examplePath }}" target="_blank">Open this example in a new tab</a>
     </p>
   </div>
-  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="{{ link | replace("/", "-") }}-html">
-    {{ getHtmlCode(link) }}
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="{{ example | replace("/", "-") }}-html">
+
+```html
+{{ getHtmlCode(example) | safe }}
+```
+
   </div>
-  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="{{ link | replace("/", "-") }}-nunjucks">
-    {{ getNunjucksCode(link) }}
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="{{ example | replace("/", "-") }}-nunjucks">
+
+```njk
+{{ getNunjucksCode(example) | safe }}
+```
+
   </div>
 </div>

app/_layouts/example.njk

@@ -1,175 +1,20 @@
-{% extends "layouts/sub-navigation.njk" %}
-{% from "example/macro.njk" import example %}
+{% extends "govuk/template.njk" %}
 
-{% block beforeContent %}
-  {{ govukBreadcrumbs({
-    classes: "govuk-!-display-none-print",
-    items: breadcrumbItems
-  }) if showBreadcrumbs }}
+{% block head %}
+  <link rel="stylesheet" href="/assets/example.css">
 {% endblock %}
 
-{% block content %}
-<!--
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-one-quarter-from-desktop">
-      {{ xGovukSubNavigation({
-        items: collections.ordered | eleventyNavigation(sectionKey or options.homeKey) | itemsFromNavigation(page.url, { pathPrefix: options.pathPrefix })
-      }) }}
-    </div>
-    <div class="govuk-grid-column-three-quarters-from-desktop">
-
-    {# overwrite appDocumentHeader #}
-    {#
-      {{ appDocumentHeader({
-        title: title | noOrphans,
-        description: description | noOrphans,
-        tags: tags
-      }) }}
-#}
--->
-
-<header class="app-document-header">
-  <h1 class="app-document-header__title govuk-heading-xl">
-    {{ title | smart | noOrphans }}
-    {%- if tags | length > 0 -%}
-    <br>
-        {%- for tag in tags %}
-        <span class="govuk-tag govuk-tag--grey">
-             {{tag}}
-           </span>
-          {%- if not loop.last %}  {% endif %}
-        {%- endfor -%}
-      {%- endif -%}
-  </h1>
-
-  {% if description %}
-    <p class="app-document-header__description govuk-body-l">
-      {{ description | markdown("inline") | noOrphans }}
-    </p>
-  {% endif %}
-{% if wcag %}
-
-
-
-  <div class="govuk-inset-text">
-
-    <p class="govuk-body">This mistake can mean a failure of
-
-      {% for i in wcag %}
-    <a class="govuk-link" href="{{i.link}}">{{ i.text}}</a>
-
-{% endfor %}
-    </p>
-  </div>
-  {% endif %}
-
-
-
-
-{#
-  {% if date or modified or authors or author or tags %}
-    <p class="app-document-header__metadata">
-      {%- if authors -%}
-        <span class="govuk-visually-hidden">Posted by</span>
-        {%- for author in authors -%}
-          {{- " and " if loop.last else (", " if not loop.first) -}}
-          {{- _authorLink(author) -}}
-        {%- endfor -%}
-        <span aria-hidden="true">&ensp;•&ensp;</span>
-      {%- elif author -%}
-        {{- _authorLink(author) -}}
-        <span aria-hidden="true">&ensp;•&ensp;</span>
-      {%- endif -%}
-      {%- if date -%}
-        <span class="govuk-visually-hidden">Posted on </span><time datetime="{{ date | date }}">{{ date | date("d LLLL y") }}</time>
-      {%- endif -%}
-      {%- if modified -%}
-        <span aria-hidden="true">&ensp;•&ensp;</span>Last updated <time datetime="{{ modified | date }}">{{ modified | date("d LLLL y") }}</time>
-      {%- endif -%}
-      {%- if tags | length > 0 -%}
-        <span aria-hidden="true">&ensp;•&ensp;</span>Tags:
-        {%- for tag in tags %}
-          <a href="/tags/{{ tag | slug }}" class="govuk-link">{{ tag }}</a>
-          {%- if not loop.last %}, {% endif %}
-        {%- endfor -%}
-      {%- endif -%}
-    </p>
-  {% endif %}
-
-#}
-</header>
-
-<div class="app-prose-scope">
-
-<ol class="govuk-list govuk-list--number">
-<li><a href="#typical-example" class="govuk-link">Typical example{%- if mistake | length > 1 -%}s{% endif %} that cause{%- if mistake | length == 1 -%}s{% endif %} barriers</a></li>
-<li><a href="#improved-version" class="govuk-link">Improved version{%- if improvement | length > 1 -%}s{% endif %}</a></li>
-<li><a href="#links" class="govuk-link">Links</a></li>
-</ol>
-
-
-{% for i in mistake %}
-
-{% if loop.index0 == 0 %}
-<h2 id="typical-example" class="govuk-heading-l"><a class="app-link--heading govuk-link" href="#typical-example"><span>Typical example{% if loop.length > 1%}s{% endif %} that cause{% if loop.length == 1%}s{% endif %} barriers </span></a></h2>
-{% endif %}
-
-{% if loop.length > 1%}<h3 id="example-{{loop.index}}" class="govuk-heading-m">Example {{loop.index}}</h3>{% endif %}
-
-{% if i.description %}<p class="govuk-body">{{i.description}}</p>{% endif %}
-
+{% block skipLink %}{% endblock %}
 
-{{ example(i.link) }}
+{% block header %}{% endblock %}
 
-
-<p class="govuk-body">{{i.reason}}</p>
-{% endfor %}
-
-
-<h2 id="improved-version" class="govuk-heading-l"><a class="app-link--heading govuk-link" href="#improved-version"><span>Improved version{%- if improvement | length > 1 -%}s{% endif %}</span></a></h2>
-
-
-{% for i in improvement %}
-
-{% if loop.length > 1%}<h3 id="example-{{loop.index}}" class="govuk-heading-m">Improvement {{loop.index}}</h3>{% endif %}
-{% if i.description %}<p class="govuk-body">{{i.description}}</p>{% endif %}
-
-{{ example(i.link) }}
-
-<p class="govuk-body">{{i.reason}}</p>
-{% endfor %}
-
-
-
-
-{% if links %}
-
-<h2 id="links" class="govuk-heading-l"><a class="app-link--heading govuk-link" href="#links"><span>Links</span></a></h2>
-
-<ul class="govuk-list govuk-list--bullet">
-
-
-{% for link in links %}
-<li><a href="{{link.href}}" class="govuk-link">{{link.text}}</a></li>
-
-{% endfor %}
-</ul>
-{% else %}
-<p class='govuk-body'>No links given.</p>
-{% endif %}
-</div>
-
-      {{ appProseScope(content) if content }}
-
-      {% include "layouts/shared/related.njk" %}
-    </div>
-  </div>
+{% block content %}
+  {{ content }}
 {% endblock %}
 
-
-{% block scripts %}
-  <script src="/assets/iframeResizer.js"></script>
-  <script>
-    iFrameResize({}, `[data-module="app-example-frame"]`)
-  </script>
+{% block bodyEnd %}
+  <script src="/assets/iframeResizer.contentWindow.js"></script>
+  <script src="/assets/govuk.js" type="module"></script>
 {% endblock %}
+
+{% block footer %}{% endblock %}