@onsvisual/svelte-components 0.0.7 → 0.0.9

package/dist/layout/BackLink/Backlink.svelte

@@ -0,0 +1,32 @@
+<script>
+  /**
+   * URL for previous page
+   * @type {string}
+   */
+  export let href = "#0";
+</script>
+
+<nav class="ons-breadcrumb" aria-label="Back">
+  <ol class="ons-breadcrumb__items ons-u-fs-s">
+    <li class="ons-breadcrumb__item" id="breadcrumb-1">
+      <a class="ons-breadcrumb__link" href="{href}" id="back">Back</a>
+      <svg
+        class="ons-svg-icon"
+        viewBox="0 0 8 13"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        fill="currentColor"
+      >
+        <path
+          d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
+          transform="translate(-5.02 -1.59)"></path>
+      </svg>
+    </li>
+  </ol>
+</nav>
+
+<style>
+  .ons-svg-icon {
+    color: currentColor;
+    fill: currentColor;
+  }</style>

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,39 @@
+<script>
+  /**
+   * An array of links in the format {label, href}
+   * @type {array}
+   */
+  export let links = [];
+</script>
+
+<div class="ons-page__container ons-container">
+  <nav class="ons-breadcrumb print--hide" aria-label="Breadcrumbs">
+    <ol class="ons-breadcrumb__items ons-u-fs-s">
+      {#each links as link}
+        <li class="ons-breadcrumb__item ons-u-p-no">
+          {#if link.href}
+            <a class="ons-breadcrumb__link" href="{link.href}">{link.label}</a>
+          {:else}
+            {link.label}
+          {/if}
+          <svg
+            class="ons-svg-icon"
+            viewBox="0 0 8 13"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+          >
+            <path
+              d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
+              transform="translate(-5.02 -1.59)"></path>
+          </svg>
+        </li>
+      {/each}
+    </ol>
+  </nav>
+</div>
+
+<style>
+  .ons-svg-icon {
+    color: currentColor;
+    fill: currentColor;
+  }</style>

package/dist/layout/Contents/Contents.svelte

@@ -0,0 +1,44 @@
+<script>
+  /**
+   * Sets the title of the contents block
+   * @type {string}
+   */
+  export let title = "Contents";
+  /**
+   * Visually hides the title of the block
+   * @type {boolean}
+   */
+  export let hideTitle = false;
+  /**
+   * An array of links for the contentents block in the form {label, href?}. Excluding href renders an item as plain text.
+   * @type {array}
+   */
+  export let links = [];
+  /**
+   * An anchor link URL to the main content of the page (to skip contents)
+   * @type {string}
+   */
+  export let skipHref = "";
+</script>
+
+<aside class="ons-toc-container" role="complementary">
+  {#if skipHref}
+    <a class="ons-skip-link" href="{skipHref}">Skip to content</a>
+  {/if}
+  <nav class="ons-toc" aria-label="{title}">
+    {#if title}
+      <h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s" class:ons-u-vh="{hideTitle}">{title}</h2>
+    {/if}
+    <ol class="ons-list ons-u-mb-m ons-list--dashed">
+      {#each links as link}
+        {#if link.href}
+          <li class="ons-list__item">
+            <a href="{link.href}" class="ons-list__link">{link.label}</a>
+          </li>
+        {:else}
+          <li class="ons-list__item" aria-current="true">{link.label}</li>
+        {/if}
+      {/each}
+    </ol>
+  </nav>
+</aside>

package/dist/layout/ErrorPage/ErrorPage.svelte

@@ -0,0 +1,39 @@
+<script>
+  /**
+   * Pass the "page" store from "$app/stores" in any Svelte Kit project
+   * @type {any}
+   */
+  export let page = null;
+  /**
+   * (Optional) Explicitly pass a page status number, eg. 404 or 500.
+   * @type {number}
+   */
+  export let status = $page ? $page.status : null;
+</script>
+
+<div class="ons-page__container ons-container">
+  <div class="ons-grid">
+    <div class="ons-grid__col ons-col-12@m">
+      <main id="main-content" class="ons-page__main">
+        {#if status === 404}
+          <h1>Page not found</h1>
+          <p>If you entered a web address, check it is correct.</p>
+          <p>If you pasted the web address, check you copied the whole address.</p>
+          <p>
+            If the web address is correct or you selected a link or button, <a href="/feedback"
+              >contact us</a
+            > for more help.
+          </p>
+        {:else}
+          <h1>Sorry, there is a problem with the service</h1>
+          <p>Try again later.</p>
+          <p>
+            If you continue to experience problems with this service, please <a href="/feedback"
+              >contact us</a
+            >.
+          </p>
+        {/if}
+      </main>
+    </div>
+  </div>
+</div>

package/dist/layout/Header/Header.svelte

@@ -469,7 +469,7 @@
                 class="search__button col--md-3 col--lg-3"
                 id="nav-search-submit"
               >
-                <span class="visuallyhidden">{i18n("Search")}</span>
+                <span class="hidden">{i18n("Search")}</span>
                 <span class="icon-search--light">
                   <svg
                     class="ons-svg-icon ons-svg-icon--m"

package/dist/layout/NavSections/NavSection.svelte

@@ -41,8 +41,8 @@
 </script>
 
 <section id="{id}" aria-label="{title}" bind:this="{section}">
-  {#if title && !hideTitle}
-    <h2 class="ons-u-mt-xl ons-u-pb-no ons-u-pt-no">{title}</h2>
+  {#if title}
+    <h2 class="ons-u-mt-xl ons-u-pb-no ons-u-pt-no" class:ons-u-vh="{hideTitle}">{title}</h2>
   {/if}
   <slot />
   {#if tocId}

package/dist/layout/Notice/Notice.svelte

@@ -0,0 +1,54 @@
+<script>
+  /**
+   * (Optional) Notice title
+   * @type {string}
+   */
+  export let title = null;
+  /**
+   * Adds an exclamation mark icon
+   * @type {boolean}
+   */
+  export let important = false;
+  /**
+   * Sets the mode/colour of the notice
+   * @type {"info"|"success"|"pending"|"error"}
+   */
+  export let mode = "info";
+
+  $: style =
+    mode === "success"
+      ? "background: var(--ons-color-success-tint); border-color: var(--ons-color-success);"
+      : mode === "pending"
+      ? "background: var(--ons-color-pending-tint); border-color: var(--ons-color-pending);"
+      : mode === "error"
+      ? "background: var(--ons-color-errors-tint); border-color: var(--ons-color-errors);"
+      : null;
+</script>
+
+<div class="ons-panel ons-panel--info ons-panel--no-title ons-u-mt-m ons-u-mb-l" style="{style}">
+  <div class="ons-u-bg--tr" class:ons-panel--warn="{important}">
+    {#if important}<div class="ons-panel__icon" aria-hidden="true">!</div>{/if}
+    <span class="ons-panel__assistive-text ons-u-vh">Important information:</span>
+    <div class="ons-panel__body">
+      <div class="ons-u-fs-r default-line-height">
+        {#if title}<p><strong>{title}</strong></p>{/if}
+        <p class="ons-u-mb-no">
+          <slot />
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .ons-panel {
+    color: rgb(34, 34, 34);
+  }
+  :global(.ons-panel__body a) {
+    color: #206095 !important;
+  }
+  :global(.ons-panel__body a:hover) {
+    color: rgb(0, 60, 87) !important;
+    -webkit-text-decoration: underline solid rgb(0, 60, 87) 2px !important;
+            text-decoration: underline solid rgb(0, 60, 87) 2px !important;
+  }</style>

package/dist/layout/PhaseBanner/PhaseBanner.svelte

@@ -0,0 +1,40 @@
+<script>
+  /**
+   * Phase of project (alpha, beta, prototype etc.)
+   * @type {string}
+   */
+  export let phase = "Beta";
+  /**
+   * URL of feedback form (relative or absolute)
+   * @type {string}
+   */
+  export let href = "/feedback";
+</script>
+
+<div class="ons-phase-banner">
+  <div class="ons-container">
+    <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--no-wrap">
+      <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
+        <strong class="ons-phase-banner__badge">{phase}</strong>
+      </div>
+      <div class="ons-col-auto ons-grid--flex ons-grid--no-wrap@l ons-grid--vertical-center">
+        <span class="ons-u-fs-s ons-u-m-no">
+          {#if phase.toLowerCase() === "prototype"}
+            This is a prototype – your <a href="{href}">feedback</a> will help us improve it.
+          {:else}
+            This is a new service – your <a href="{href}">feedback</a> will help us improve it.
+          {/if}
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .ons-phase-banner {
+    background: var(--pale, rgb(245, 245, 246)) !important;
+  }
+  .ons-phase-banner__badge {
+    background: var(--text, rgb(34, 34, 34)) !important;
+    color: var(--background, white) !important;
+  }</style>

package/dist/layout/Scroller/ScrollerSection.svelte

@@ -35,8 +35,8 @@
 <section data-id="{id}" bind:this="{section}">
   <Container theme="{theme}" width="narrow" background="none">
     <div class="ons-scroller-section" style:--background="{background}">
-      {#if title && !hideTitle}
-        <h2 class="section-title">{title}</h2>
+      {#if title}
+        <h2 class="section-title" class:ons-u-vh="{hideTitle}">{title}</h2>
       {/if}
       <slot />
     </div>

package/dist/layout/Section/Section.svelte

@@ -52,8 +52,8 @@
   marginBottom="{marginBottom}"
 >
   <section id="{id ? id : slugify(title)}" aria-label="{title}" class="ons-feature__section">
-    {#if title && !hideTitle}
-      <h2 class="section-title">{title}</h2>
+    {#if title}
+      <h2 class="section-title" class:ons-u-vh="{hideTitle}">{title}</h2>
     {/if}
     <slot />
   </section>

package/dist/layout/ShareButtons/ShareButtons.svelte

@@ -0,0 +1,177 @@
+<script>
+  import { onMount } from "svelte";
+  import Container from "../../wrappers/Container/Container.svelte";
+
+  /**
+   * Set the title/call to action
+   * @type {string}
+   */
+  export let title = "Share this page";
+  /**
+   * Sets the width of the container
+   * @type {"narrow"|"medium"|"wide"|"full"}
+   */
+  export let width = "narrow";
+  /**
+   * Sets a predefined theme
+   * @type {"light"|"dark"|"lightblue"}
+   */
+  export let theme = null;
+  /**
+   * Define additional props to override the base theme
+   * @type {object}
+   */
+  export let themeOverrides = null;
+  /**
+   * Optional margin above section
+   * @type {boolean}
+   */
+  export let marginTop = false;
+  /**
+   * Optional margin below section
+   * @type {boolean}
+   */
+  export let marginBottom = true;
+
+  let href = "";
+  let pageTitle = "";
+
+  onMount(() => {
+    href = document.location.href;
+    pageTitle = document.title;
+  });
+</script>
+
+<Container
+  theme="{theme}"
+  themeOverrides="{themeOverrides}"
+  width="{width}"
+  marginTop="{marginTop}"
+  marginBottom="{marginBottom}"
+>
+  <section class="ons-grid ons-u-ml-no" aria-label="Share this dataset">
+    <h2 class="ons-u-fs-r--b ons-u-mb-xs">{title}</h2>
+    <ul class="ons-list ons-list--inline ons-list--bare ons-list--icons">
+      <li class="ons-list__item ons-u-pl-no ons-u-pr-xs">
+        <span class="ons-list__prefix">
+          <svg
+            class="ons-svg-icon ons-svg-icon--xxl"
+            id="icon-facebook"
+            viewBox="0 0 32 32"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path
+              d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013
+      0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281
+      L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267
+      C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423
+      23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643
+      18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951
+      L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z"
+            ></path>
+          </svg>
+        </span>
+        <a
+          href="https://www.facebook.com/sharer/sharer.php?u={href}"
+          class="ons-list__link ons-u-fs-r ons-u-pt-xxs"
+          target="_blank"
+          rel="noreferrer external"
+          >Facebook<span class="ons-u-vh">this link will open in a new tab</span>
+        </a>
+      </li>
+      <li class="ons-list__item ons-u-pl-no ons-u-pr-xs">
+        <span class="ons-list__prefix">
+          <svg
+            class="ons-svg-icon ons-svg-icon--xxl"
+            id="icon-twitter"
+            viewBox="0 0 32 32"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path
+              d="M24.04,12.95c0,0.17,0,0.33,0,0.5c0.01,4.01-2.17,7.71-5.69,9.64c-3.52,1.93-7.81,1.78-11.19-0.38c0.31,0.04,0.61,0.05,0.92,0.05c1.73,0,3.42-0.58,4.78-1.65c-1.65-0.04-3.09-1.11-3.6-2.68c0.25,0.05,0.51,0.07,0.76,0.07c0.34,0,0.68-0.05,1.01-0.14C9.23,18,7.93,16.4,7.95,14.55v-0.05c0.54,0.29,1.13,0.46,1.74,0.48c-1.66-1.12-2.2-3.33-1.23-5.08c1.96,2.41,4.85,3.87,7.95,4.03c-0.07-0.29-0.1-0.58-0.1-0.88c0-1.58,0.97-3,2.44-3.59c1.47-0.58,3.15-0.21,4.23,0.94c0.86-0.17,1.69-0.49,2.45-0.94c-0.28,0.9-0.88,1.65-1.69,2.13c0.76-0.09,1.51-0.29,2.21-0.6C25.43,11.76,24.79,12.42,24.04,12.95zM16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z"
+            ></path>
+          </svg>
+        </span>
+        <a
+          href="https://twitter.com/intent/tweet?original_referer&amp;text={pageTitle}&amp;url={href}"
+          class="ons-list__link ons-u-fs-r ons-u-pt-xxs"
+          target="_blank"
+          rel="noreferrer external"
+          >Twitter<span class="ons-u-vh">this link will open in a new tab</span>
+        </a>
+      </li>
+      <li class="ons-list__item ons-u-pl-no ons-u-pr-xs">
+        <span class="ons-list__prefix">
+          <svg
+            class="ons-svg-icon ons-svg-icon--xxl"
+            id="icon-linkedin"
+            viewBox="0 0 32 32"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path
+              d="M16,-3.41060513e-13 C20.2434638,-3.41060513e-13 24.3131264,1.68570945 27.3137085,4.6862915 C30.3142906,7.68687356
+          32,11.7565362 32,16 C32,24.836556 24.836556,32 16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,-3.41060513e-13
+          16,-3.41060513e-13 Z M11.3505859,12.4641113 L7.45385744,12.4641113 L7.45385744,24.1875 L11.3505859,24.1875
+          L11.3505859,12.4641113 Z M20.9152832,12.1889649 C18.8479004,12.1889649 17.9213867,13.3251953 17.4035644,14.1240234
+          L17.4035644,14.1240234 L17.4035644,12.4641113 L13.5070801,12.4641113 C13.5212538,12.7696262 13.5275532,13.809993
+          13.5292593,15.1533871 L13.5293118,16.8832762 C13.5292156,16.9843911 13.5291048,17.0860852 13.5289803,17.1882303
+          L13.5280782,17.8054916 L13.5280782,17.8054916 L13.5268961,18.427439 C13.5216699,20.9164121 13.5108442,23.3704557
+          13.5078578,24.0208157 L13.5070801,24.1875 L17.4035644,24.1875 L17.4035644,17.640625 C17.4035644,17.2902832
+          17.4287109,16.9401856 17.5317382,16.6896972 C17.8134766,15.9897461 18.4545899,15.2646484 19.5310059,15.2646484
+          C20.940918,15.2646484 21.5051269,16.3395996 21.5051269,17.9157715 L21.5051269,17.9157715 L21.5051269,24.1875
+          L25.4013672,24.1875 L25.4013672,17.465332 C25.4013672,13.8645019 23.4790039,12.1889649 20.9152832,12.1889649 Z
+          M9.42822263,6.8125 C8.09521488,6.8125 7.22363281,7.68774412 7.22363281,8.83813475 C7.22363281,9.96313475
+          8.06933594,10.8632812 9.37695313,10.8632812 L9.37695313,10.8632812 L9.40234375,10.8632812 C10.7612305,10.8632812
+          11.6069336,9.96313475 11.6069336,8.83813475 C11.581543,7.68774412 10.7612305,6.8125 9.42822263,6.8125 Z"
+            ></path>
+          </svg>
+        </span>
+        <a
+          href="https://www.linkedin.com/sharing/share-offsite/?url={href}"
+          class="ons-list__link ons-u-fs-r ons-u-pt-xxs"
+          target="_blank"
+          rel="noreferrer external"
+          >LinkedIn<span class="ons-u-vh">this link will open in a new tab</span>
+        </a>
+      </li>
+      <li class="ons-list__item ons-u-pl-no ons-u-pr-xs">
+        <span class="ons-list__prefix">
+          <svg
+            class="ons-svg-icon ons-svg-icon--xxl"
+            id="icon-email"
+            viewBox="0 0 36 36"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M30.7279 5.27208C27.3523 1.89642 22.7739 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36C27.9411 36 36
+              27.9411 36 18C36 13.2261 34.1036 8.64773 30.7279 5.27208ZM18 19L26 14V12L18 17L10 12V14L18 19ZM8 10H28V26H8V10Z"
+            ></path>
+          </svg>
+        </span>
+        <a
+          href="mailto:?subject={pageTitle}&amp;body={pageTitle}%0A{href}"
+          class="ons-list__link ons-u-fs-r ons-u-pt-xxs"
+          target="_blank"
+          rel="noreferrer external"
+          >Email<span class="ons-u-vh">this link will open in a new tab</span>
+        </a>
+      </li>
+    </ul>
+  </section>
+</Container>
+
+<style>
+  .ons-svg-icon {
+    color: currentColor;
+    fill: currentColor;
+  }</style>

package/dist/layout/Summary/Summary.svelte

@@ -0,0 +1,51 @@
+<script>
+  /**
+   * Title for summary table
+   * @type {string}
+   */
+  export let title = null;
+  /**
+   * Array of items in format {key, value, href?}
+   * @type {array}
+   */
+  export let items = [];
+</script>
+
+<div class="ons-summary">
+  <div id="turnover" class="ons-summary__group">
+    {#if title}<h2 class="ons-summary__group-title">{title}</h2>{/if}
+    <div class="ons-summary__items ons-u-mb-s ons-u-bt ons-u-bb">
+      {#each items as item}
+        <div class="ons-summary__item">
+          <dl class="ons-summary__row ons-summary__row--has-values" id="sales-dates">
+            <dt
+              class="ons-summary__item-title ons-u-pt-s ons-u-pb-s ons-u-pr-m ons-u-order--1@xxs@m ons-u-flex--2@xxs@m ons-col-4@m"
+            >
+              <div class="ons-summary__item--text ons-u-fw-b">{item.key}</div>
+            </dt>
+            <dd
+              class="ons-summary__values ons-u-pt-s ons-u-pb-s ons-u-pr-m ons-u-pl-no@xxs@m ons-u-order--3@xxs@m ons-u-fw@xxs@m
+          ons-u-pt-no@xxs@m ons-u-pt-no@xxs@m ons-u-bb-no@xxs@m ons-u-d-b@xxs@m"
+            >
+              <div>{item.value}</div>
+            </dd>
+            {#if item.href}
+              <dd
+                class="ons-summary__actions ons-u-flex-ai-fs ons-u-pt-s ons-u-pb-s ons-u-pl-no@xxs ons-u-ml-xs@xxs ons-u-order--2@xxs@m ons-col-2@m"
+              >
+                <a href="{item.href}" class="ons-summary__button"
+                  >Change<span class="ons-u-vh"> value for {item.key}</span></a
+                >
+              </dd>
+            {/if}
+          </dl>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .ons-summary__values {
+    font-weight: normal !important;
+  }</style>

package/dist/layout/Survey/Survey.svelte

@@ -0,0 +1,96 @@
+<script>
+  import { onMount } from "svelte";
+  import initSurvey from "./init-survey.js";
+
+  onMount(initSurvey);
+</script>
+
+<div class="wrapper link-adjust">
+  <div class="improve-this-page" data-module="improve-this-page">
+    <div
+      class="improve-this-page__prompt clearfix"
+      id="feedback-form-header"
+      role="status"
+      aria-live="assertive"
+      tabindex="-1"
+    >
+      <div class="improve-this-page__prompt_left">
+        <h3 class="improve-this-page__is-useful-question margin-right--1">Is this page useful?</h3>
+        <a
+          id="feedback-form-yes"
+          class="improve-this-page__page-is-useful-button"
+          href="/feedback/thanks"
+          aria-label="Yes I found this page useful">Yes</a
+        >
+        <span>|</span>
+        <a
+          id="feedback-form-no"
+          class="js-toggle"
+          href="/feedback"
+          aria-label="No I didn't find this page useful">No</a
+        >
+      </div>
+      <div class="improve-this-page__prompt_right">
+        <a
+          id="feedback-form-anything-wrong"
+          class="js-toggle improve-this-page__anything-wrong"
+          href="/feedback">Can't find what you're looking for?</a
+        >
+      </div>
+    </div>
+    <div id="feedback-form" class="improve-this-page__form js-hidden font-size--18">
+      <form id="feedback-form-container">
+        <input type="hidden" name="url" id="feedback-api-enabled" value="false" />
+        <input type="hidden" name="url" id="feedback-api-url" value="" />
+        <input type="hidden" name="feedback-form-type" value="footer" />
+        <input
+          type="hidden"
+          name="url"
+          id="feedback-form-url"
+          value="https://www.ons.gov.uk/datasets/RM169/editions/2021/versions/4"
+        />
+        <div class="form-group">
+          <label class="form-label-bold" id="description-field-label" for="description-field"
+            >How should we improve this page?</label
+          >
+          <textarea
+            id="description-field"
+            class="form-control"
+            name="description"
+            rows="5"
+            style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea>
+        </div>
+        <div class="form-group">
+          <p class="font-size--24 font-weight-700 margin-bottom--0">Do you want a reply?</p>
+          <p class="font-size--18 margin-top--0">
+            If you'd like us to get back to you, please add your name and email address below.
+          </p>
+          <label class="form-label-bold" for="name-field">Name (optional)</label>
+          <input id="name-field" class="form-control" type="text" name="name" />
+        </div>
+        <div class="form-group">
+          <label class="form-label-bold" id="email-field-label" for="email-field"
+            >Email (optional)</label
+          >
+          <input id="email-field" class="form-control" type="text" name="email" />
+        </div>
+        <div>
+          <input
+            id="feedback-form-submit"
+            class="btn btn--primary font-weight-700 margin-bottom--2"
+            type="submit"
+            value="Send feedback"
+          />
+        </div>
+        <div>
+          <a
+            href="javascript:void(0)"
+            id="feedback-form-close"
+            class="improve-this-page__close js-toggle btn btn--secondary font-weight-700"
+            >I don't want to provide feedback</a
+          >
+        </div>
+      </form>
+    </div>
+  </div>
+</div>