feat: extend widget with optional single column layout (#296)

* Add optional single column layout to widget

Co-authored-by: Adrian Santana Berg <adriansberg@users.noreply.github.com>

* include comments.

* extend logic to use andIf() to set css classes.

Co-authored-by: Adrian Santana Berg <adriansberg@users.noreply.github.com>

* Include single column option in script documentation.

---------

Co-authored-by: Adrian Santana Berg <adriansberg@users.noreply.github.com>

src/pages/widget/index.tsx

@@ -44,6 +44,8 @@ const initializeCode = html`
         // Inherit font from page website.
         // By default it uses Roboto as the hosted planner web solution.
         inheritFont: false,
+        // Use single column design of widget layout
+        singleColumnLayout: false,
       },
     });
 
@@ -204,8 +206,12 @@ function WidgetContent({
 
         <ul style={{ listStylePosition: 'inside', marginTop: '1rem' }}>
           <li>
-            <code>.widget-inheritFont</code>: Inherit font family from the
-            website
+            <code>.widget-module__inheritFont</code>: Inherit font family from
+            the website
+          </li>
+          <li>
+            <code>.widget-module__singleColumnLayout</code>: Use single column
+            design of widget layout
           </li>
         </ul>
       </div>

src/widget/widget.module.css

@@ -321,10 +321,24 @@
 .messageBox[hidden] {
   display: none;
 }
+
 /**
   * Configurable options for widget
 */
+
+/* Inherit the font from the web page using the widget. */
 .inheritFont,
 .inheritFont * {
   font-family: inherit !important;
 }
+
+/* Change the layout to a single column layout instead of the default layout. */
+.singleColumnLayout .main {
+  grid-template-columns: 1fr;
+}
+.singleColumnLayout .search_container {
+  max-width: unset;
+}
+.singleColumnLayout .selector_options {
+  width: 100%;
+}

src/widget/widget.ts

@@ -5,6 +5,7 @@ import type { SearchTime } from '@atb/modules/search-time/types';
 import Combobox from '@github/combobox-nav';
 
 import style from './widget.module.css';
+import { andIf } from '../utils/css';
 
 const DEFAULT_DEBOUNCE_TIME = 300;
 
@@ -41,6 +42,7 @@ function createSettingsConstants(urlBase: string) {
 
 type OutputOverrideOptions = {
   inheritFont?: boolean;
+  singleColumnLayout?: boolean;
 };
 export type WidgetOptions = {
   urlBase: string;
@@ -62,6 +64,7 @@ export function createWidget({
 
   const defaultOutputOverrideOptions: OutputOverrideOptions = {
     inheritFont: false,
+    singleColumnLayout: false,
     ...outputOverrideOptions,
   };
 
@@ -721,9 +724,13 @@ function createOutput(
 
   const output = html`
     <div
-      class="${style.wrapper} ${style.lightWrapper} ${outputOverrideOptions.inheritFont
-        ? style.inheritFont
-        : ''}"
+      class="${andIf({
+        [style.wrapper]: true,
+        [style.lightWrapper]: true,
+        [style.inheritFont]: outputOverrideOptions.inheritFont ?? false,
+        [style.singleColumnLayout]:
+          outputOverrideOptions.singleColumnLayout ?? false,
+      })}"
     >
       <nav class="${style.nav}">
         <ul class="${style.tabs} js-tablist">