configurable size and position of chatbox

src/components/dock.jsx

@@ -1,8 +1,7 @@
-import React from "react"
+import React, { Fragment } from "react"
 import PropTypes from "prop-types"
 
-const Dock = ({ handleToggleOpen }) => {
-
+const Dock = ({ handleToggleOpen, size }) => {
   return(
     <button
       type="button"
@@ -11,10 +10,19 @@ const Dock = ({ handleToggleOpen }) => {
       onKeyPress={handleToggleOpen}
       aria-labelledby="open-chatbox-label"
     >
-      <div id="open-chatbox-label">Start a new chat</div>
-      <div className="label-icon">
-        <div className={`btn-icon`} aria-label={`Open support chat window`}>+</div>
-      </div>
+      {
+        size === 'small' ?
+          <div id="open-chatbox-label">
+            <span>Chat</span><span className="icon">+</span>
+          </div>
+        :
+        <Fragment>
+          <div id="open-chatbox-label">Start a new chat</div>
+          <div className="label-icon">
+            <div className={`btn-icon`} aria-label={`Open support chat window`}>+</div>
+          </div>
+        </Fragment>
+      }
     </button>
   )
 }