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

package/src/client/components/availability/availability.scss

@@ -1,4 +1,3 @@
-
 .wc-availability__inner {
   max-width: 960px;
   margin-left: auto;
@@ -27,42 +26,21 @@
 }
 
 .wc-availability__link {
+  @extend %govuk-link;
+  display: inline-block;
   @include govuk-font($size: 19);
-  position:relative;
-  display:inline-block;
   margin-right: 5px;
-  margin-bottom: 0;
-  fill: govuk-colour('black');
-
-  .govuk-visually-hidden, .wc-availability__unseen {
-    pointer-events: none;
-  }
-
-  &:hover {
-    color: $govuk-link-hover-colour;
-  }
-
-  &:active {
-    color: govuk-colour('black');
-  }
 
-  &:visited {
-    color: $govuk-link-colour;
+  &:visited:not(:hover):not(:focus) {
+    color: govuk-colour('blue');
   }
 
-  &:focus {
-    box-shadow: none;
-    background-color: transparent;
-    text-decoration: underline;
-    color: $govuk-focus-colour;
+  .govuk-visually-hidden, .wc-availability__unseen {
+    pointer-events: none;
   }
 
-  &:hover:not(:focus):not(:active) {
-    color: $govuk-link-hover-colour;
-
-    .wc-availability__unseen {
-      background-color: govuk-colour('dark-blue');
-    }
+  &:hover:not(:focus):not(:active) .wc-availability__unseen {
+    background-color: govuk-colour('dark-blue');
   }
 }
 
@@ -83,107 +61,3 @@
     padding-right: 7px;
   }
 }
-
-// Define a mixin for the common styles
-@mixin link-icon-styles {
-  position: relative;
-  display: inline-block;
-  margin-right: 5px;
-  fill: govuk-colour('black');
-  @include govuk-font($size: 19);
-
-  &:last-of-type {
-    margin-right: 0;
-  }
-
-  @include mq ($from: tablet) {
-    margin-right: 10px;
-  }
-
-  &__icon {
-    color: govuk-colour('black');
-  }
-
-  svg {
-    position: relative;
-    display: inline-block;
-    color: currentcolor;
-    vertical-align: top;
-    margin-right: 7px;
-    top: 1px;
-
-    @include mq ($from: tablet) {
-      margin-right: 8px;
-      top: 4px;
-    }
-  }
-
-  &:hover {
-    color: $govuk-link-hover-colour;
-  }
-
-  &:active {
-    color: govuk-colour('black');
-  }
-}
-
-.defra-link-icon {
-  @include link-icon-styles;
-}
-
-.wc-open-btn {
-  @include link-icon-styles;
-  margin-bottom: 0;
-
-  &:visited {
-    color: $govuk-link-colour;
-  }
-
-  span {
-    pointer-events: none;
-  }
-
-  svg {
-    @include mq ($from: 'tablet') {
-      top: 3px;
-    }
-    color: govuk-colour('black');
-    pointer-events: none;
-  }
-
-  &:focus {
-    box-shadow: none;
-    background-color: transparent;
-    text-decoration: underline;
-    color: $govuk-focus-colour;
-  }
-
-  &:hover:not(:focus):not(:active) {
-    color: $govuk-link-hover-colour;
-
-    svg {
-      color: govuk-colour('dark-blue');
-    }
-
-    .wc-open-btn__unseen {
-      background-color: govuk-colour('dark-blue');
-    }
-  }
-
-  &__unseen {
-    display: inline-block;
-    position: relative;
-    border-radius: 10px;
-    background-color: govuk-colour('black');
-    color: #ffffff;
-    font-weight: bold;
-    font-size: 14px;
-    padding: 0 6px;
-    margin-left: 5px;
-    @include mq ($from: tablet) {
-      top: -1px;
-      padding-left: 7px;
-      padding-right: 7px;
-    }
-  }
-}

package/src/client/components/chat/chat.jsx

@@ -9,9 +9,10 @@ import { useTextareaAutosize } from '../../hooks/useTextareaAutosize.js'
 import { formatTranscript } from '../../lib/transform-messages.js'
 
 export function Chat ({ onEndChatScreen, onSettingsScreen }) {
-  const { availability, thread, messages, agent, agentStatus, isAgentTyping, settings } = useApp()
+  const { availability, thread, messages, agent, agentStatus, isAgentTyping, settings, isKeyboard } = useApp()
 
   const [userMessage, setUserMessage] = useState('')
+  const [focusVisibleWithin, setFocusVisibleWithin] = useState(false)
 
   const messageRef = useRef()
 
@@ -94,61 +95,59 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
       <PanelHeader />
 
       <div className='wc-status'>
-        <p className='wc-status__availability govuk-body-s'>{connectionHeadlineText}</p>
-        <a className='wc-status__link govuk-!-font-size-16' href='#' data-module='govuk-button' onClick={onEndChatScreen}>End chat</a>
+        <p className='wc-status__availability'>{connectionHeadlineText}</p>
+        <a className='wc-status__link' href='#' data-module='govuk-button' onClick={onEndChatScreen}>End chat</a>
       </div>
 
-      <div className='wc-body'>
-        <div className='wc-chat__body'>
-          <ul className='wc-chat__messages'>
-            {messages.length
-              ? messages.map((msg, index) => <Message key={msg.id} message={msg} previousMessage={messages[index - 1]} />)
-              : null}
-            {isAgentTyping
-              ? (
-                <li className='wc-chat__message govuk-body outbound'>
-                  <div className='wc-chat__from govuk-!-font-size-14'>{agentName} is typing</div>
-                  <div className='wc-chat__text outbound'>
-                    <svg width='28' height='16' x='0px' y='0px' viewBox='0 0 28 16'>
-                      <circle stroke='none' cx='3' cy='8' r='3' fill='currentColor' />
-                      <circle stroke='none' cx='14' cy='8' r='3' fill='currentColor' />
-                      <circle stroke='none' cx='25' cy='8' r='3' fill='currentColor' />
-                    </svg>
-                  </div>
-                </li>
-                )
-              : null}
-          </ul>
-        </div>
+      <div className='wc-body' tabIndex='0'>
+        <ul className='wc-chat'>
+          {messages.length
+            ? messages.map((msg, index) => <Message key={msg.id} message={msg} previousMessage={messages[index - 1]} />)
+            : null}
+          {isAgentTyping
+            ? (
+              <li className='wc-chat__message outbound'>
+                <div className='wc-chat__from'>{agentName} is typing</div>
+                <div className='wc-chat__text outbound'>
+                  <svg width='28' height='16' x='0px' y='0px' viewBox='0 0 28 16'>
+                    <circle stroke='none' cx='3' cy='8' r='3' fill='currentColor' />
+                    <circle stroke='none' cx='14' cy='8' r='3' fill='currentColor' />
+                    <circle stroke='none' cx='25' cy='8' r='3' fill='currentColor' />
+                  </svg>
+                </div>
+              </li>
+              )
+            : null}
+        </ul>
       </div>
 
       <PanelFooter>
-        <div className='wc-footer__input'>
-          <form className='wc-form' noValidate onSubmit={handleSubmit}>
-            <label className='govuk-label wc-form__label govuk-!-font-size-16' htmlFor='wc-form-textarea'>
-              Your message<span className='govuk-visually-hidden'> (enter key submits)</span>
-            </label>
-
-            <textarea
-              ref={messageRef}
-              rows='1'
-              aria-required='true'
-              className='wc-form__textarea govuk-textarea govuk-!-font-size-16'
-              id='wc-form-textarea'
-              name='message'
-              onChange={onChange}
-              onKeyDown={handleKeyPress}
-              value={userMessage}
-            />
-
-            <input
-              type='submit'
-              className='wc-form__button govuk-button govuk-!-font-size-16'
-              value='Send'
-              data-prevent-double-click='true'
-            />
-          </form>
-        </div>
+        <form className={`wc-form${focusVisibleWithin ? ' wc-focus-within' : ''}`} noValidate onSubmit={handleSubmit}>
+          <label className='govuk-label wc-form__label' htmlFor='wc-form-textarea'>
+            Your message<span className='govuk-visually-hidden'> (enter key submits)</span>
+          </label>
+
+          <textarea
+            ref={messageRef}
+            rows='1'
+            aria-required='true'
+            className='wc-form__textarea'
+            id='wc-form-textarea'
+            name='message'
+            onChange={onChange}
+            onKeyDown={handleKeyPress}
+            onFocus={() => { setFocusVisibleWithin(isKeyboard) }}
+            onBlur={() => { setFocusVisibleWithin(false) }}
+            value={userMessage}
+          />
+
+          <input
+            type='submit'
+            className='wc-form__button govuk-button'
+            value='Send'
+            data-prevent-double-click='true'
+          />
+        </form>
 
         <div className='wc-footer__settings'>
           <a

package/src/client/components/chat/chat.scss

@@ -6,37 +6,64 @@
 
 .wc-status {
   display: flex;
-  border-bottom: 1px solid $govuk-border-colour;
-  padding: govuk-spacing(2);
+  position: relative;
+  padding: 15px;
+  @include mq ($from: tablet) {
+    padding: 10px;
+  }
+
+  &::after {
+    position: absolute;
+    content: "";
+    bottom: 0;
+    left: 15px;
+    right: 15px;
+    height: 0;
+    border-bottom: 1px solid $govuk-border-colour;
+    @include mq ($from: tablet) {
+      left: 10px;
+      right: 10px;
+    }
+  }
 
   &__availability {
+    font-size: 16px;
     margin-bottom: 0;
   }
 
   &__link {
+    @extend %wc-link-button;
     margin-left: auto;
   }
 }
 
-.defra-context-footer {
-  border-top:2px solid govuk-colour('blue');
-  margin-top: 30px;
-  padding-top: 10px;
-  @include mq ($from: tablet) {
-      margin-top: 40px;
-  }
+.wc-body[tabindex="0"]:focus-visible {
+  outline: 3px solid transparent;
+  outline-offset: -2px;
+  box-shadow:
+    inset 0 0 0 2px $govuk-focus-colour,
+    inset 0 0 0 4px govuk-colour('black'), 
+    0 0 0 1px $govuk-focus-colour;
 }
 
 .wc-chat {
-  &__messages {
-    overflow: auto;
-    list-style: none;
-    padding: 0;
-    margin: govuk-spacing(2) 0;
-  }
+  @extend %govuk-body-s;
+  line-height: 1.25;
+  font-size: 14px;
+  overflow: auto;
+  list-style: none;
+  padding: 0;
 
   &__message {
-    margin-bottom: govuk-spacing(1);
+    margin: 5px 15px 0;
+    @include mq ($from: tablet) {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+
+    &:first-child {
+      padding-top: 15px;
+    }
 
     &.inbound {
       text-align: right;
@@ -44,24 +71,27 @@
   }
 
   &__from {
+    line-height: 1.25;
     color: govuk-colour('dark-grey');
-    margin-bottom: 0;
+    margin-top: 2px;
+    margin-bottom: 2px;
   }
 
   &__text {
-    padding: govuk-spacing(2);
+    font-size: 16px;
+    padding: 10px 12.5px;
     margin-bottom: 0;
     display: inline-block;
 
     &.inbound {
       color: govuk-colour('white');
       background-color: govuk-colour('blue');
-      border-radius: 8px 0 8px 8px;
+      border-radius: 10px 0 10px 10px;
     }
 
     &.outbound {
       background-color: govuk-colour('light-grey');
-      border-radius: 0 8px 8px;
+      border-radius: 0 10px 10px;
     }
 
     svg {
@@ -87,48 +117,96 @@
 .wc-form {
   position: relative;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  border-top: 1px solid govuk-colour('black');
+  border-bottom: 1px solid govuk-colour('black');
 
   &__label {
     position: absolute;
-    top: 9px;
-    left: 5px;
+    pointer-events: none;
+    font-size: 16px;
+    line-height: 20px;
+    margin: 20px;
+    @include mq ($from: tablet) {
+      margin: 18px 18px 19px;
+    }
+    left: 0;
+    bottom: 0;
+    color: $govuk-secondary-text-colour;
     z-index: 3;
-    margin-bottom: 0;
-    color: govuk-colour('dark-grey');
   }
 
   &__textarea {
-    position: relative;
-    width: 100%;
-    margin-bottom: 0;
+    @extend %govuk-body-s;
+    box-sizing: border-box;
     min-height: auto;
+    font-size: 16px;
+    line-height: 20px;
     max-height: 120px;
+    flex: 1 1 auto;
+    align-self: flex-end;
+    margin: 20px;
+    @include mq ($from: tablet) {
+      margin: 18px 18px 19px;
+    }
+    padding: 0;
+    border: 0;
+    height: 20px;
     resize: none;
-    border: none;
     overflow-x: hidden;
     overscroll-behavior: contain;
-    z-index: 4;
-    background-color: transparent;
+
+    &:focus {
+      outline: none;
+      box-shadow: none;
+      z-index: 2;
+    }
   }
 
   &__button {
-    margin: auto 0 0 govuk-spacing(3);
+    margin: 10px 15px 12px 0;
+    @include mq ($from: tablet) {
+      margin-right: 10px;
+    }
+    font-size: 16px;
+    position: relative;
+    flex: 0 0 auto;
+    align-self: flex-end;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
     width: auto;
+    cursor: pointer;
+  }
+
+  &.wc-focus-within::after {
+    @include focus($glow: 5px, $strong: 2px, $background: 0, $inset: 0);
+    left: 4px;
+    right: 4px;
+    top: 4px;
+    bottom: 4px;
   }
 }
 
+.wc-body:focus-visible + .wc-footer .wc-form {
+  border-top: 1px solid transparent;
+}
+
 .wc-footer {
+  position: relative;
+  flex: 0 0 0;
+
   &__settings {
     @include govuk-responsive-padding(2);
 
     display: flex;
     flex-direction: row;
-    border-top: 1px solid govuk-colour('black');
 
     &-link {
+      @extend %wc-link-button;
+
       &:first-child {
         margin-right: govuk-spacing(3);
       }

package/src/client/components/errorSummary/error-summary.jsx

@@ -16,11 +16,11 @@ export const ErrorSummary = ({ errors }) => {
   return (
     <div className='govuk-error-summary govuk-!-static-margin-bottom-7' data-module='govuk-error-summary' tabIndex='-1'>
       <div role='alert'>
-        <h2 id='wc-error' className='govuk-error-summary__title'>
+        <h2 id='wc-error' className='wc-error-summary__title govuk-error-summary__title'>
           There is a problem
         </h2>
         <div className='govuk-error-summary__body'>
-          <ul className='govuk-list govuk-error-summary__list'>
+          <ul className='govuk-list govuk-error-summary__list wc-error-summary__list'>
             {errs.map(key => (
               <li key={key}>
                 <a href='#' data-key={key} onClick={goToInput}>{errors[key]}</a>

package/src/client/components/message/message.jsx

@@ -7,14 +7,14 @@ export function Message ({ message, previousMessage }) {
   const messageOwnerSameAsPrevious = message?.direction === previousMessage?.direction
 
   return (
-    <li className={classnames('wc-chat__message govuk-body', outbound ? 'outbound' : 'inbound')}>
-      <div className='wc-chat__from govuk-!-font-size-14'>
+    <li className={classnames('wc-chat__message', outbound ? 'outbound' : 'inbound')}>
+      <div className='wc-chat__from'>
         {messageOwnerSameAsPrevious ? null : <span>{outbound ? message.assignee : 'You'}</span>}
         <span className='govuk-visually-hidden'>:</span>
       </div>
-      <p className={classnames('wc-chat__text', 'govuk-body-s', outbound ? 'outbound' : 'inbound')}>
+      <div className={classnames('wc-chat__text', outbound ? 'outbound' : 'inbound')}>
         {message.text}
-      </p>
+      </div>
     </li>
   )
 }

package/src/client/components/panel/panel-header.jsx

@@ -1,19 +1,30 @@
 import React from 'react'
 import { useApp } from '../../store/useApp.js'
+import { historyReplaceState } from '../../lib/history.js'
 
 export function PanelHeader () {
-  const { thread, setChatVisibility, setUnseenCount, threadId } = useApp()
+  const { thread, threadId, setChatVisibility, setUnseenCount, isMobile } = useApp()
 
   const onClose = e => {
     e.preventDefault()
     setChatVisibility(false)
+    historyReplaceState()
+
     if (threadId) {
       thread?.lastMessageSeen()
       setUnseenCount(0)
     }
   }
 
-  let ButtonComponent = (
+  const BackButtonComponent = (
+    <button className='wc-header__back' aria-label='Close the webchat' onClick={onClose}>
+      <svg aria-hidden='true' focusable='false' width='20' height='20' viewBox='0 0 20 20'>
+        <path d='M4.828,11L12.314,18.485L10.899,19.899L1,10L10.899,0.101L12.314,1.515L4.828,9L19,9L19,11L4.828,11Z' fill='currentColor' />
+      </svg>
+    </button>
+  )
+
+  const CloseButtonComponent = (
     <button className='wc-header__close' aria-label='Close the webchat' onClick={onClose}>
       <svg aria-hidden='true' focusable='false' width='20' height='20' viewBox='0 0 20 20'>
         <path d='M10,8.6L15.6,3L17,4.4L11.4,10L17,15.6L15.6,17L10,11.4L4.4,17L3,15.6L8.6,10L3,4.4L4.4,3L10,8.6Z' fill='currentColor' />
@@ -21,23 +32,41 @@ export function PanelHeader () {
     </button>
   )
 
+  const MinimiseButtonComponent = (
+    <button className='wc-header__hide' aria-label='Minimise the webchat' onClick={onClose}>
+      <svg aria-hidden='true' focusable='false' width='20' height='20' viewBox='0 0 20 20'>
+        <path d='M10 14.4l-7-7L4.4 6l5.6 5.6L15.6 6 17 7.4l-7 7z' fill='currentColor' />
+      </svg>
+    </button>
+  )
+
+  let RightButtonComponent = CloseButtonComponent
+
   if (thread) {
-    ButtonComponent = (
-      <button className='wc-header__hide' aria-label='Minimise the webchat' onClick={onClose}>
-        <svg aria-hidden='true' focusable='false' width='20' height='20' viewBox='0 0 20 20'>
-          <path d='M10 14.4l-7-7L4.4 6l5.6 5.6L15.6 6 17 7.4l-7 7z' fill='currentColor' />
-        </svg>
-      </button>
-    )
+    RightButtonComponent = MinimiseButtonComponent
+
+    if (isMobile && !window.history.state) {
+      RightButtonComponent = MinimiseButtonComponent
+    }
+  }
+
+  if (!thread && isMobile && !window.history.state) {
+    RightButtonComponent = CloseButtonComponent
+  }
+
+  if (isMobile && window.history.state) {
+    RightButtonComponent = null
   }
 
   return (
     <div className='wc-header'>
-      <h2 id='wc-header-title' className='wc-header__title govuk-heading-s'>
+      {window.history.state ? BackButtonComponent : null}
+
+      <h2 id='wc-header-title' className='wc-header__title'>
         Floodline Webchat
       </h2>
 
-      {ButtonComponent}
+      {RightButtonComponent}
     </div>
   )
 }

package/src/client/components/panel/panel.jsx

@@ -12,9 +12,10 @@ import { Feedback } from '../screens/feedback.jsx'
 import { useApp } from '../../store/useApp.js'
 import { useChatSdk } from '../../store/useChatSdk.js'
 import { useFocusedElements } from '../../hooks/useFocusedElements.js'
+import { historyReplaceState } from '../../lib/history.js'
 
 export function Panel () {
-  const { sdk, availability, thread, threadId, setThread, setThreadId, setChatVisibility, setMessages, setUnseenCount } = useApp()
+  const { sdk, availability, thread, threadId, setThread, setThreadId, setChatVisibility, setMessages, setUnseenCount, isMobile } = useApp()
   const { fetchThread, fetchMessages } = useChatSdk(sdk)
 
   const [screen, setScreen] = useState(threadId ? 2 : 0)
@@ -28,17 +29,31 @@ export function Panel () {
         setUnseenCount(0)
       }
       setChatVisibility(false)
+      historyReplaceState()
     }
   }, [thread, threadId, setUnseenCount, setChatVisibility])
 
+  /**
+  * We need ammend classes on the body element to handle mobile behaviour
+  */
+  useEffect(() => {
+    document.body.classList.remove('wc-u-hidden')
+    document.getElementsByTagName('html')[0].classList.add('wc-u-html')
+    document.body.classList.add('wc-u-body')
+    return () => {
+      document.getElementsByTagName('html')[0].classList.remove('wc-u-html')
+      document.body.classList.remove('wc-u-body')
+    }
+  }, [isMobile])
+
   /**
    * Initializes the eventListener for pressing the escape key
    */
   useEffect(() => {
-    const escapeKeyEvent = document.addEventListener('keydown', onEscapeKey)
+    document.addEventListener('keydown', onEscapeKey)
 
     return () => {
-      document.removeEventListener('keydown', escapeKeyEvent)
+      document.removeEventListener('keydown', onEscapeKey)
     }
   }, [onEscapeKey, setChatVisibility])
 
@@ -115,7 +130,9 @@ export function Panel () {
 
   const Component = (
     <div id='wc-panel' role='dialog' className='wc-panel' tabIndex='-1' aria-modal='true' aria-labelledby='wc-header-title'>
-      {ScreenComponent}
+      <div className='wc-panel__inner'>
+        {ScreenComponent}
+      </div>
     </div>
   )