@defra/flood-webchat 0.0.1-beta.26 → 0.0.1-beta.28

package/src/client/components/panel/panel.scss

@@ -1,27 +1,51 @@
 .wc-panel {
   display: flex;
-  flex-direction: column;
   position: fixed;
-  bottom: 0;
-  right: 0;
+  flex-wrap: nowrap;
+  z-index: 999;
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: govuk-colour('white');
-  border: 1px solid govuk-colour('black');
-  z-index: 999;
-  outline: none;
-
-  @include mq ($from: 'tablet') {
-    bottom: 0;
-    right: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-x pan-y;
+  background-color: #ffffff;
+  @include mq ($from: tablet) {
     top: auto;
     left: auto;
     width: 400px;
     height: 540px;
-    margin-bottom: 10px;
     margin-right: 10px;
+    margin-bottom: 10px;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus.wc-focus-visible::after {
+    @include focus($glow: 5px, $strong: 2px, $background: 0, $inset: 0);
+    left: 4px;
+    right: 4px;
+    top: 4px;
+    bottom: 4px;
+  }
+
+  &__inner {
+    position: relative;
+    flex: 0 0 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    @include mq ($from: tablet) {
+      border: 1px solid govuk-colour('black');
+    }
+    box-sizing: border-box;
   }
 }
 
@@ -30,43 +54,59 @@
   flex-direction: row;
   align-items: center;
   background-color: govuk-colour('black');
+  border-bottom: 1px solid govuk-colour('black');
+  padding: 3px;
 
   &__link {
     margin: 0 govuk-spacing(2);
   }
 
   &__title {
-    padding: 0 0 0 govuk-spacing(2);
+    @extend %govuk-heading-s;
+    font-size: 19px;
+    padding: 0 0 0 10px;
+    @include mq ($from: tablet) {
+      padding-left: 7px;
+    }
     color: govuk-colour('white');
     margin-bottom: 0;
   }
 
   &__close,
-  &__hide {
+  &__hide,
+  &__back {
     display: flex;
     justify-content: center;
     color: govuk-colour('white');
     background: none;
     border: 0;
-    padding: govuk-spacing(2);
+    padding: 7px;
     margin: 0 0 0 auto;
     cursor: pointer;
 
     &:focus {
-      @include govuk-focused-text;
+      outline: 3px solid $govuk-focus-colour;
+    }
+  }
+
+  &__back {
+    margin: 0;
+    display: flex;
+
+    @include mq ($from: 'tablet') {
+      display: none
     }
   }
 }
 
 .wc-body {
-  @include govuk-responsive-padding(3);
-
+  font-size: 16px;
   flex: 1;
   position: relative;
   overflow-y: auto;
   overscroll-behavior: contain;
 }
 
-.wc-back-link {
-  margin: govuk-spacing(1) 0 govuk-spacing(6) 0;
+.wc-content {
+  padding: 20px 15px;
 }

package/src/client/components/screens/end-chat.jsx

@@ -26,10 +26,12 @@ export function EndChat ({ onChatScreen, onEndChatConfirm }) {
     <>
       <PanelHeader />
       <div className='wc-body'>
-        <h3 className='govuk-heading-s' aria-live='polite'>Are you sure you want to end the chat?</h3>
-        <div className='govuk-button-group'>
-          <a href='#endChat' className='govuk-button govuk-!-font-size-16' data-module='govuk-button' id='confirmEndChat' onClick={confirmEndChat}>Yes, end chat</a>
-          <a href='#resumeChat' className='govuk-link govuk-!-font-size-16' onClick={onChatScreen}>No, resume chat</a>
+        <div className='wc-content'>
+          <h3 className='wc-heading' aria-live='polite'>Are you sure you want to end the chat?</h3>
+          <div className='govuk-button-group'>
+            <a href='#endChat' role='button' className='wc-button govuk-button' data-module='govuk-button' id='confirmEndChat' onClick={confirmEndChat}>Yes, end chat</a>
+            <a href='#resumeChat' role='button' className='wc-link govuk-link' onClick={onChatScreen}>No, resume chat</a>
+          </div>
         </div>
       </div>
     </>

package/src/client/components/screens/feedback.jsx

@@ -11,11 +11,11 @@ export function Feedback ({ onCancel }) {
       <PanelHeader />
 
       <div className='wc-body'>
-        <h3 id='wc-subtitle' className='govuk-heading-s'>Give Feedback on Floodline webchat</h3>
-        <p>Please note we’re unable to respond to feedback.</p>
-        <a className='govuk-link' href='#' target='_blank' rel='noreferrer'>Feedback Link</a>
-        <div className='govuk-button-group'>
-          <a id='feedback-cancel' href='#' data-module='govuk-button' role='button' onClick={feedbackCancel}>Close</a>
+        <div className='wc-content'>
+          <h3 id='wc-subtitle' className='wc-heading'>Give Feedback on Floodline webchat</h3>
+          <p>Please note we’re unable to respond to feedback.</p>
+          <p><a className='govuk-link' href='#' target='_blank' rel='noreferrer'>Feedback Link</a></p>
+          <p><a id='feedback-cancel' className='wc-link govuk-link' href='#' data-module='govuk-button' role='button' onClick={feedbackCancel}>Close</a></p>
         </div>
       </div>
     </>

package/src/client/components/screens/pre-chat.jsx

@@ -7,54 +7,55 @@ export function PreChat ({ onContinue }) {
       <PanelHeader />
 
       <div className='wc-body'>
-        <h3 className='govuk-heading-s' aria-live='polite'>What you can use webchat for</h3>
-        <p className='govuk-body-s'>Webchat lets you talk directly to a Floodline adviser.</p>
+        <div className='wc-content'>
+          <h3 className='wc-heading' aria-live='polite'>What you can use webchat for</h3>
+          <p>Webchat lets you talk directly to a Floodline adviser.</p>
 
-        <p className='govuk-body-s'>You can use webchat to get:</p>
-        <ul className='govuk-list govuk-list--bullet govuk-body-s'>
-          <li>current flood warnings and alerts in your area</li>
-          <li>information on the flood warning service</li>
-          <li>advice on what to do before, during and after a flood</li>
-        </ul>
+          <p>You can use webchat to get:</p>
+          <ul className='wc-list'>
+            <li>current flood warnings and alerts in your area</li>
+            <li>information on the flood warning service</li>
+            <li>advice on what to do before, during and after a flood</li>
+          </ul>
+          <p>
+            There are other ways to&nbsp;
+            <a className='govuk-link' href='https://www.gov.uk/sign-up-for-flood-warnings' target='_blank' rel='noreferrer'>
+              sign up for flood warnings
+            </a>
+            &nbsp;and&nbsp;
+            <a className='govuk-link' href='https://www.fws.environment-agency.gov.uk/app/olr/login' target='_blank' rel='noreferrer'>
+              manage your flood warnings account
+            </a>.
+          </p>
+          <p>
+            Do not use webchat to&nbsp;
+            <a
+              className='govuk-link'
+              href='https://www.gov.uk/report-flood-cause'
+              target='_blank'
+              rel='noreferrer'
+            >
+              report a flood
+            </a>.
+          </p>
 
-        <p className='govuk-body-s'>
-          There are other ways to&nbsp;
-          <a className='govuk-link' href='https://www.gov.uk/sign-up-for-flood-warnings' target='_blank' rel='noreferrer'>
-            sign up for flood warnings
-          </a>
-          &nbsp;and&nbsp;
-          <a className='govuk-link' href='https://www.fws.environment-agency.gov.uk/app/olr/login' target='_blank' rel='noreferrer'>
-            manage your flood warnings account
-          </a>.
-        </p>
-        <p className='govuk-body-s'>
-          Do not use webchat to&nbsp;
-          <a
-            className='govuk-link'
-            href='https://www.gov.uk/report-flood-cause'
-            target='_blank'
-            rel='noreferrer'
-          >
-            report a flood
-          </a>.
-        </p>
+          <button className='govuk-button wc-button govuk-!-margin-top-1' data-module='govuk-button' onClick={onContinue}>Continue</button>
 
-        <button className='govuk-button govuk-!-font-size-16' data-module='govuk-button' onClick={onContinue}>Continue</button>
+          <h3 className='wc-heading'>Other flood information</h3>
 
-        <h3 className='govuk-heading-s'>Other flood information</h3>
-
-        <p className='govuk-body-s'>Call Floodline for all other flood and flood warning information.</p>
-        <p className='govuk-body-s'>
-          <strong>Floodline helpline</strong>
-          <br />
-          Telephone: 0345 988 1188
-          <br />
-          Textphone: 0345 602 6340
-          <br />
-          Open 24 hours a day, 7 days a week
-          <br />
-          <a className='govuk-link' href='https://gov.uk/call-charges' target='_blank' rel='noreferrer'>Find out more about call charges</a>
-        </p>
+          <p>Call Floodline for all other flood and flood warning information.</p>
+          <p>
+            <strong>Floodline helpline</strong>
+            <br />
+            Telephone: 0345 988 1188
+            <br />
+            Textphone: 0345 602 6340
+            <br />
+            Open 24 hours a day, 7 days a week
+            <br />
+            <a className='govuk-link' href='https://gov.uk/call-charges' target='_blank' rel='noreferrer'>Find out more about call charges</a>
+          </p>
+        </div>
       </div>
     </>
   )

package/src/client/components/screens/request-chat.jsx

@@ -86,80 +86,87 @@ export function RequestChat ({ onPreChatScreen }) {
       <PanelHeader />
 
       <div className='wc-body'>
-        <a href='#' className='wc-back-link govuk-back-link' onClick={onPreChatScreen}>
-          What you can use webchat for
-        </a>
-
-        <ErrorSummary errors={errors} />
-
-        <h3 className='govuk-heading-s' aria-live='polite'>
-          Your name and question
-        </h3>
-
-        <form>
-          <div className={classnames('govuk-form-group', errors.name && 'govuk-form-group--error')}>
-            <label className='govuk-label' htmlFor='wc-name'>
-              Your name
-            </label>
-            {errors.name && (
-              <p className='govuk-error-message'>
-                <span className='govuk-visually-hidden'>Error:</span> {errors.name}
-              </p>
-            )}
-            <input
-              ref={nameRef}
-              className={classnames('govuk-input', errors.name && 'govuk-input--error')}
-              id='wc-name'
-              name='name'
-              type='text'
-              data-testid='request-chat-user-name'
-            />
-          </div>
-
-          <div className='govuk-character-count' data-module='govuk-character-count' data-maxlength='500'>
-            <div className={classnames('govuk-form-group', errors.question && 'govuk-form-group--error')}>
-              <label className='govuk-label' htmlFor='wc-question'>
-                Your question
+        <div className='wc-content'>
+          <a href='#' className='wc-back-link govuk-back-link' onClick={onPreChatScreen}>
+            What you can use webchat for
+          </a>
+
+          <ErrorSummary errors={errors} />
+
+          <h3 className='wc-heading' aria-live='polite'>
+            Your name and question
+          </h3>
+
+          <form>
+            <div className={classnames('wc-form-group', 'govuk-form-group', errors.name && 'govuk-form-group--error')}>
+              <label className='wc-label govuk-label' htmlFor='wc-name'>
+                Your name
               </label>
-              {errors.question && (
+              {errors.name && (
                 <p className='govuk-error-message'>
-                  <span className='govuk-visually-hidden'>Error:</span>
-                  {errors.question}
+                  <span className='govuk-visually-hidden'>Error:</span> {errors.name}
                 </p>
               )}
-              <textarea
-                ref={questionRef}
-                id='wc-question'
-                name='question'
-                rows='5'
-                aria-describedby='wc-question-info'
-                onChange={onQuestionChange}
-                className={classnames('govuk-textarea', 'govuk-js-character-count', !isQuestionLengthValid || errors.question ? 'govuk-textarea--error' : '')}
-                data-testid='request-chat-user-question'
+              <input
+                ref={nameRef}
+                className={classnames('wc-input', 'govuk-input', errors.name && 'govuk-input--error')}
+                id='wc-name'
+                name='name'
+                type='text'
+                data-testid='request-chat-user-name'
               />
-              <div id='wc-question-info' className='govuk-hint govuk-character-count__message' style={{ color: `${!isQuestionLengthValid ? '#d4351c' : ''}` }} aria-hidden='true'>
-                {questionHint}
-              </div>
-              <div className='govuk-character-count__sr-status govuk-visually-hidden' aria-live='polite'>
-                {questionHint}
+            </div>
+
+            <div className='wc-form-group govuk-character-count' data-module='govuk-character-count' data-maxlength='500'>
+              <div className={classnames('govuk-form-group', errors.question && 'govuk-form-group--error')}>
+                <label className='wc-label govuk-label' htmlFor='wc-question'>
+                  Your question
+                </label>
+                {errors.question && (
+                  <p className='govuk-error-message'>
+                    <span className='govuk-visually-hidden'>Error:</span>
+                    {errors.question}
+                  </p>
+                )}
+                <textarea
+                  ref={questionRef}
+                  id='wc-question'
+                  name='question'
+                  rows='5'
+                  aria-describedby='wc-question-info'
+                  onChange={onQuestionChange}
+                  className={classnames('wc-textarea', 'govuk-textarea', 'govuk-js-character-count', !isQuestionLengthValid || errors.question ? 'govuk-textarea--error' : '')}
+                  data-testid='request-chat-user-question'
+                />
+                <div
+                  id='wc-question-info'
+                  className='wc-hint govuk-hint govuk-char-count__msg'
+                  style={{ color: `${!isQuestionLengthValid ? '#d4351c' : ''}` }}
+                  aria-hidden='true'
+                >
+                  {questionHint}
+                </div>
+                <div className='govuk-character-count__sr-status govuk-visually-hidden' aria-live='polite'>
+                  {questionHint}
+                </div>
               </div>
             </div>
-          </div>
-
-          <div className='govuk-inset-text govuk-!-font-size-16'>
-            By selecting 'Request chat' you agree to the terms of our&nbsp;
-            <a href='https://check-for-flooding.service.gov.uk/privacy-notice' target='_blank' rel='noreferrer' className='govuk-link'>privacy notice</a>.
-          </div>
-
-          <button
-            className='govuk-button govuk-!-margin-top-1 govuk-!-font-size-16'
-            data-module='govuk-button'
-            onClick={onRequestChat}
-            disabled={isButtonDisabled}
-          >
-            {buttonLabel}
-          </button>
-        </form>
+
+            <div className='wc-inset-text govuk-inset-text'>
+              By selecting 'Request chat' you agree to the terms of our&nbsp;
+              <a href='https://check-for-flooding.service.gov.uk/privacy-notice' target='_blank' rel='noreferrer' className='govuk-link'>privacy notice</a>.
+            </div>
+
+            <button
+              className='wc-button govuk-button govuk-!-margin-top-1'
+              data-module='govuk-button'
+              onClick={onRequestChat}
+              disabled={isButtonDisabled}
+            >
+              {buttonLabel}
+            </button>
+          </form>
+        </div>
       </div>
     </>
   )

package/src/client/components/screens/settings.jsx

@@ -21,45 +21,47 @@ export function Settings ({ onCancel }) {
       <PanelHeader />
 
       <div className='wc-body'>
-        <fieldset className='govuk-fieldset govuk-!-margin-bottom-4'>
-          <legend className='govuk-fieldset__legend govuk-fieldset__legend'>
-            <h3 id='wc-subtitle' className='govuk-heading-s'>Change settings</h3>
-          </legend>
-          <div className='govuk-checkboxes govuk-checkboxes--small' data-module='govuk-checkboxes'>
-            <div className='govuk-checkboxes__item'>
-              <input
-                id='audio'
-                name='audio'
-                type='checkbox'
-                value='audio'
-                className='govuk-checkboxes__input'
-                defaultChecked={optionAudio}
-                onChange={() => setOptionAudio(!optionAudio)}
-              />
-              <label className='govuk-label govuk-checkboxes__label govuk-!-font-size-16' htmlFor='audio'>
-                Play a sound when receiving a new message
-              </label>
+        <div className='wc-content'>
+          <fieldset className='govuk-fieldset govuk-!-margin-bottom-4'>
+            <legend className='govuk-fieldset__legend govuk-fieldset__legend'>
+              <h3 id='wc-subtitle' className='wc-heading'>Change settings</h3>
+            </legend>
+            <div className='govuk-checkboxes govuk-checkboxes--small' data-module='govuk-checkboxes'>
+              <div className='govuk-checkboxes__item'>
+                <input
+                  id='audio'
+                  name='audio'
+                  type='checkbox'
+                  value='audio'
+                  className='govuk-checkboxes__input'
+                  defaultChecked={optionAudio}
+                  onChange={() => setOptionAudio(!optionAudio)}
+                />
+                <label className='wc-label govuk-label govuk-checkboxes__label' htmlFor='audio'>
+                  Play a sound when receiving a new message
+                </label>
+              </div>
+              <div className='govuk-checkboxes__item'>
+                <input
+                  id='scroll'
+                  name='scroll'
+                  type='checkbox'
+                  value='scroll'
+                  className='govuk-checkboxes__input'
+                  defaultChecked={optionScroll}
+                  onChange={() => setOptionScroll(!optionScroll)}
+                />
+                <label className='wc-label govuk-label govuk-checkboxes__label' htmlFor='scroll'>
+                  Scroll automatically to a new message
+                </label>
+              </div>
             </div>
-            <div className='govuk-checkboxes__item'>
-              <input
-                id='scroll'
-                name='scroll'
-                type='checkbox'
-                value='scroll'
-                className='govuk-checkboxes__input'
-                defaultChecked={optionScroll}
-                onChange={() => setOptionScroll(!optionScroll)}
-              />
-              <label className='govuk-label govuk-checkboxes__label govuk-!-font-size-16' htmlFor='scroll'>
-                Scroll automatically to a new message
-              </label>
-            </div>
-          </div>
-        </fieldset>
+          </fieldset>
 
-        <div className='govuk-button-group'>
-          <a id='settings-save' href='#' className='govuk-button govuk-!-font-size-16' data-module='govuk-button' onClick={onSave}>Save</a>
-          <a id='settings-cancel' href='#' className='govuk-link govuk-!-font-size-16' data-module='govuk-button' onClick={onCancel}>Cancel</a>
+          <div className='govuk-button-group'>
+            <a id='settings-save' href='#' className='wc-button govuk-button' data-module='govuk-button' onClick={onSave}>Save</a>
+            <a id='settings-cancel' href='#' className='wc-link govuk-link' data-module='govuk-button' onClick={onCancel}>Cancel</a>
+          </div>
         </div>
       </div>
     </>

package/src/client/hooks/useFocusedElements.js

@@ -1,9 +1,19 @@
 import { useState, useEffect, useCallback } from 'react'
 
-const setAriaHidden = bool => {
+const ariaHidden = 'aria-hidden'
+const dataWcInert = 'data-wc-inert'
+
+const setAriaHidden = isInert => {
   for (const node of document.body.children) {
     if (node.id !== 'wc-panel') {
-      (bool) ? node.setAttribute('aria-hidden', 'true') : node.removeAttribute('aria-hidden')
+      // We only want to toggle elements that aren't already inert
+      if (isInert && !node.getAttribute(ariaHidden)) {
+        node.setAttribute(ariaHidden, 'true')
+        node.setAttribute(dataWcInert, '')
+      } else if (node.hasAttribute(dataWcInert)) {
+        node.removeAttribute(ariaHidden)
+        node.removeAttribute(dataWcInert)
+      }
     }
   }
 }

package/src/client/lib/history.js

@@ -0,0 +1,13 @@
+export const historyPushState = () => {
+  const url = window.location.href.split('#')[0]
+  window.history.pushState({ history: true }, null, `${url}#webchat`)
+}
+
+export const historyReplaceState = () => {
+  if (window.history.state?.history) {
+    window.history.back()
+  }
+
+  const url = window.location.href.split('#')[0]
+  window.history.replaceState(null, null, url)
+}

package/src/client/scss/_objects.scss

@@ -0,0 +1,33 @@
+%wc-link-button {
+    @extend %govuk-link;
+    position: relative;
+    display: inline-block;
+    font-size: 16px;
+    color: govuk-colour('black');
+
+    &:hover {
+        color: govuk-colour('black');
+    }
+
+    &:visited:not(:hover):not(:focus) {
+        color: govuk-colour('black');
+    }
+
+    &:active {
+        color: govuk-colour('black');
+    }
+
+    &:focus {
+        box-shadow: none;
+        background-color: transparent;
+        text-decoration: underline;
+        color: govuk-colour('black');
+    }
+
+    &:focus-visible {
+        background-color: $govuk-focus-colour;
+        box-shadow: 0 -2px $govuk-focus-colour, 0 4px govuk-colour('black');
+        text-decoration: none;
+        color: govuk-colour('black');
+    }
+}

package/src/client/scss/_settings.scss

@@ -0,0 +1,75 @@
+.wc-heading {
+    @extend %govuk-heading-m;
+    font-size: 19px;
+    margin-bottom: 15px;
+}
+
+.wc-list {
+    @extend %govuk-list;
+    @extend %govuk-list--bullet;
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-body p {
+    font-size: 16px;
+    line-height: 1.25;
+    margin-bottom: 15px;
+    @extend %govuk-body-s;
+}
+
+.wc-body .govuk-error-message {
+    color: govuk-colour('red');
+    font-weight: 700;
+}
+
+.wc-link,
+.wc-button,
+.govuk-button-group .wc-button,
+.govuk-button-group .wc-link {
+    font-size: 16px;
+}
+
+.wc-label {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-form-group {
+    margin-bottom: 15px;
+}
+
+.wc-hint {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-inset-text {
+    margin: 0 0 20px;
+    padding: 5px 5px 5px 15px;
+    font-size: 16px;
+    border-left-width: 5px;
+}
+
+.wc-error-summary__title {
+    font-size: 19px;
+    line-height: 1.25;
+    margin-bottom: 15px;
+}
+
+.wc-error-summary__list,
+.wc-error-message {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-input, .wc-textarea {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-back-link {
+    font-size: 16px;
+    line-height: 1.25;
+    margin: 0 0 25px;
+}