Spike: Support widget at full width

_widget/src/components/app/component.vue

@@ -1,10 +1,13 @@
 <template>
     <div id="dnsimple-support">
-        <div v-if="isOpen" class="relative animated fadeInUp faster">
-            <Header :app="app" ref="header"/>
-            <Component :is="currentRoute[0]" :app="app" :article="currentRoute[1]"></Component>
+        <div v-if="isOpen">
+            <div class="overlay" @click="close"></div>
+            <div class="modal animated fadeInUp faster">
+              <Header :app="app" ref="header"/>
+              <Component :is="currentRoute[0]" :app="app" :article="currentRoute[1]"></Component>
+            </div>
         </div>
-        <Prompt v-else :app="app"/>
+        <Prompt v-else-if="showPrompt" :app="app"/>
     </div>
 </template>
 
@@ -38,6 +41,9 @@ export default {
   props: {
     query: {
       default: ''
+    },
+    showPrompt: {
+      default: true
     }
   },
   data () {

_widget/src/components/app/style.scss

@@ -1,31 +1,50 @@
 #dnsimple-support {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: 480px;
   font-size: var(--dnsimple-support-widget-rem);
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   line-height: 1.6;
   color: #222;
-  z-index: 999;
 
   @media (var(--dnsimple-support-widget-desktop-only)) {
     display: none;
   }
 }
 
 #dnsimple-support {
+    .modal {
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        margin-top: 5vh;
+        z-index: 999;
+        max-width: 45rem;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .overlay {
+        position: fixed;
+        z-index: 998;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.8);
+    }
+
     .relative {
       position: relative;
       box-shadow: var(--dnsimple-support-widget-box-shadow);
     }
 
     .route {
-      height: 475px;
-      border-left: 1px solid var(--dnsimple-support-widget-line-color);
+      border: 1px solid var(--dnsimple-support-widget-line-color);
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
       padding: var(--dnsimple-support-widget-padding);
       background: var(--dnsimple-support-widget-white);
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      height: 75vh;
     }
 }

_widget/src/components/header/style.scss

@@ -4,6 +4,7 @@
     text-align: center;
     padding: var(--dnsimple-support-widget-padding);
     border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
 
     h1 {
       color: var(--dnsimple-support-widget-white);

_widget/src/main.js

@@ -1,4 +1,14 @@
 import { createApp } from 'vue';
 import App from './components/app/component.vue';
 
-createApp(App).mount('#support-widget');
+const $openers = [...document.querySelectorAll('[data-open-support-widget]')];
+const app = createApp(App, {
+  showPrompt: $openers.length === 0
+}).mount('#support-widget');
+
+$openers.forEach(($el) => {
+  $el.addEventListener('click', () => {
+    app.open();
+    app.focus();
+  });
+});

layouts/default.html

@@ -30,7 +30,7 @@
               <svg class="logo v-mid" width="180px" viewBox="0 0 177 23" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path style="fill:none" d="M4788 512.359h1413V756H4788z" transform="matrix(.12456 0 0 .09293 -595.51 -47.61)"/><path d="M11.75 1.01c-.476 0-.95.024-1.4.124v4.65c-.65-.25-1.4-.375-2.4-.375-3.55 0-6.45 2.425-6.45 6.325 0 4 2.65 6.2 6.55 6.2 1.924 0 3.9-.525 5.124-1.175V1.134a7.026 7.026 0 0 0-1.425-.125ZM8 15.46c-2.15 0-3.626-1.45-3.626-3.776 0-2.3 1.575-3.775 3.675-3.775.85 0 1.625.1 2.3.525v6.65c-.75.275-1.525.4-2.35.375Zm13.973-10.1c-2.55 0-4.625 1-5.675 1.874V17.56c.475.1.95.125 1.4.125.475 0 .975-.025 1.425-.125V8.61c.55-.325 1.525-.65 2.625-.65 1.825 0 2.875.825 2.875 3v6.6c.5.1.95.125 1.425.125.45 0 .95-.025 1.425-.125v-7.275c0-2.725-1.675-4.925-5.5-4.925Zm12.675 12.6c3.25 0 5.15-1.5 5.15-3.976 0-2.35-1.875-3.225-4.45-3.625-2.025-.325-2.55-.7-2.55-1.475 0-.75.65-1.225 2.15-1.225 1.425 0 2.65.425 3.475.9.575-.45.95-1.15 1.075-2.025-.775-.55-2.3-1.15-4.45-1.15-3 0-4.975 1.5-4.975 3.7 0 2.5 2 3.275 4.1 3.6 2.125.325 2.8.775 2.8 1.575 0 .8-.6 1.425-2.275 1.425-1.875 0-2.925-.65-3.65-1.175-.6.375-1.075 1.05-1.3 1.95.675.575 2.25 1.5 4.9 1.5Zm9.1-14.026c.975 0 1.8-.8 1.8-1.8s-.825-1.8-1.8-1.8c-1.025 0-1.85.8-1.85 1.8s.825 1.8 1.85 1.8Zm0 13.75c.475 0 .95-.025 1.4-.125V5.734c-.45-.1-.95-.125-1.4-.125-.475 0-.95.025-1.425.125V17.56c.475.1.975.125 1.425.125ZM61.823 5.36c-1.6 0-3.05.625-4.025 1.375-.875-.85-2.175-1.375-3.875-1.375-2.475 0-4.625 1.05-5.575 1.875V17.56c.475.1.95.125 1.4.125.475 0 .975-.025 1.425-.125V8.61c.625-.375 1.5-.65 2.425-.65 1.925 0 2.65 1.225 2.65 2.925v6.675c.475.1.95.125 1.45.125.45 0 .95-.025 1.4-.125v-7.525c0-.375-.05-.75-.125-1.1.575-.475 1.375-.975 2.525-.975 1.925 0 2.675 1.225 2.675 2.925v6.675c.45.1.925.125 1.425.125.45 0 .95-.025 1.4-.125v-7.525c0-2.575-1.75-4.675-5.175-4.675Zm13.5.025c-2.25 0-4.125.875-5.275 1.825v14.975c.5.1.95.125 1.425.125.475 0 .95-.025 1.4-.125v-4.6c.75.25 1.55.35 2.55.35 3.3 0 6.275-2.325 6.275-6.325 0-4.1-2.75-6.225-6.375-6.225Zm-.1 10.025c-.925 0-1.675-.15-2.35-.475V8.56c.725-.4 1.5-.575 2.325-.575 2.175 0 3.65 1.375 3.65 3.65 0 2.35-1.475 3.775-3.625 3.775Zm10.475 2.275c.475 0 .975-.025 1.425-.125V1.16a7.127 7.127 0 0 0-1.45-.125c-.475 0-.95.025-1.4.125v16.4c.5.1.975.125 1.425.125Zm15.375-6.95c0-3.175-2.25-5.35-5.425-5.35-3.375 0-5.95 2.65-5.95 6.325 0 3.875 2.55 6.225 6.1 6.225 2.375 0 3.925-.875 4.925-1.675-.1-.725-.6-1.525-1.225-1.925-.775.55-1.775 1.225-3.5 1.225-1.975 0-3.175-1.2-3.4-3.15h8.375c.075-.65.1-1.05.1-1.675Zm-8.45-.2c.2-1.625 1.275-2.85 3.025-2.85 1.925.025 2.65 1.45 2.65 2.85h-5.675Z"/><path d="M112.304 19.446c-1.254 0-2.253-.325-2.999-.975-.745-.651-1.117-1.52-1.117-2.608h1.596c0 .65.231 1.174.692 1.57.462.396 1.071.594 1.828.594.733 0 1.318-.198 1.756-.594.438-.396.656-.92.656-1.57 0-.509-.133-.955-.399-1.34a2.005 2.005 0 0 0-1.091-.789l-1.916-.603c-.863-.272-1.54-.722-2.031-1.349-.491-.627-.736-1.354-.736-2.182 0-1.053.346-1.892 1.037-2.519.692-.627 1.612-.94 2.759-.94 1.147 0 2.064.313 2.75.94.686.627 1.029 1.466 1.029 2.519h-1.597c0-.627-.198-1.123-.594-1.49-.396-.367-.926-.55-1.588-.55-.674 0-1.215.183-1.623.55-.408.367-.612.851-.612 1.455 0 .473.136.881.408 1.224.272.343.644.591 1.118.745l1.986.639c.817.26 1.464.721 1.943 1.383.479.663.719 1.431.719 2.307 0 1.088-.361 1.957-1.083 2.608-.721.65-1.685.975-2.891.975ZM123.232 19.446c-1.206 0-2.129-.334-2.768-1.002-.638-.668-.958-1.576-.958-2.723V6.318h1.597v9.403c0 .709.175 1.271.524 1.685.348.414.884.621 1.605.621.71 0 1.242-.207 1.597-.621.355-.414.532-.976.532-1.685V6.318h1.597v9.403c0 1.159-.317 2.07-.949 2.732-.633.662-1.559.993-2.777.993ZM130.541 19.269V6.318h4.169c1.207 0 2.168.346 2.883 1.038.716.692 1.074 1.617 1.074 2.776 0 1.159-.358 2.085-1.074 2.777-.715.692-1.676 1.038-2.883 1.038h-2.572v5.322h-1.597Zm1.597-6.759h2.572c.698 0 1.257-.216 1.677-.648.42-.432.63-1.008.63-1.73 0-.733-.21-1.312-.63-1.738-.42-.426-.979-.639-1.677-.639h-2.572v4.755ZM141.541 19.269V6.318h4.169c1.206 0 2.167.346 2.883 1.038.715.692 1.073 1.617 1.073 2.776 0 1.159-.358 2.085-1.073 2.777-.716.692-1.677 1.038-2.883 1.038h-2.573v5.322h-1.596Zm1.596-6.759h2.573c.698 0 1.256-.216 1.676-.648.42-.432.63-1.008.63-1.73 0-.733-.21-1.312-.63-1.738-.42-.426-.978-.639-1.676-.639h-2.573v4.755ZM156.23 19.446c-1.159 0-2.075-.331-2.75-.993-.674-.662-1.011-1.573-1.011-2.732V9.866c0-1.159.337-2.07 1.011-2.732.675-.662 1.591-.993 2.75-.993s2.076.328 2.75.984c.674.657 1.011 1.564 1.011 2.723v5.873c0 1.159-.337 2.07-1.011 2.732-.674.662-1.591.993-2.75.993Zm0-1.437c.698 0 1.233-.198 1.606-.594.372-.396.559-.961.559-1.694V9.866c0-.733-.187-1.298-.559-1.694-.373-.396-.908-.594-1.606-.594-.686 0-1.218.198-1.596.594-.379.396-.568.961-.568 1.694v5.855c0 .733.189 1.298.568 1.694.378.396.91.594 1.596.594ZM163.539 19.269V6.318h4.01c.769 0 1.443.157 2.022.47.58.314 1.029.748 1.349 1.304.319.556.479 1.207.479 1.952 0 .875-.228 1.626-.683 2.253-.456.627-1.074 1.058-1.854 1.295l2.714 5.677h-1.88l-2.484-5.5h-2.076v5.5h-1.597Zm1.597-6.937h2.413c.662 0 1.194-.21 1.597-.63.402-.419.603-.972.603-1.658 0-.698-.201-1.254-.603-1.668-.403-.414-.935-.621-1.597-.621h-2.413v4.577ZM177.431 19.269V7.773h-3.549V6.318h8.693v1.455h-3.548v11.496h-1.596Z" style="fill:#929292;fill-rule:nonzero" transform="matrix(.9308 0 0 .9308 6.301 -.709)"/></svg>
             </a>
             <form action="/search/" class="relative w-100 w-70-ns js-search-form pl3-ns pt2 pt0-ns" method="get">
-              <input type="search" name="q" value="" id="input-search" class="input-search input-reset outline-0 w-100 ba br-pill b--black-20 pv2 ph3" placeholder="Search anything in our support docs" autocomplete="off">
+              <input type="search" name="q" value="" id="input-search" class="input-search input-reset outline-0 w-100 ba br-pill b--black-20 pv2 ph3" placeholder="Search anything in our support docs" autocomplete="off" data-open-support-widget>
               <button type="submit" class="button-reset pv2 mt2 mt0-ns btn-input-search">
                 <i class="fa fa-search v-mid surface1-color"></i>
               </button>
@@ -121,6 +121,9 @@ <h2 class="ma0 pt2 pb3 b">Get Help From Developers</h2>
     </div>
   </footer>
 
+  <div id="support-widget"></div>
+  <script src="/support/widget.umd.js" type="text/javascript" charset="utf-8"></script>
+
   <script type="text/javascript">
     document
       .getElementById('main')