feat(widget): adds option to use inherited font in the widget (#295)

* feat: configurable widget font * WIP --------- Co-authored-by: mortennordseth <[email protected]> Co-authored-by: Adrian Santana Berg <[email protected]>
AtB-AS · May 28, 2024 · e44df5e · e44df5e
1 parent 9c7d22e
commit e44df5e
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 4 deletions.
diff --git a/src/pages/widget/index.tsx b/src/pages/widget/index.tsx
@@ -38,6 +38,13 @@ const initializeCode = html`
     const widget = window.PlannerWeb.createWidget({
       urlBase: 'https://reiseplanlegger.example.no/',
       language: 'nn', // supports 'nb', 'nn' and 'en'
+
+      // Optional options
+      outputOverrideOptions: {
+        // Inherit font from page website.
+        // By default it uses Roboto as the hosted planner web solution.
+        inheritFont: false,
+      },
     });
 
     // After loading JS and CSS file it can be initialized
@@ -171,7 +178,10 @@ function WidgetContent({
       <h2>Demo</h2>
       <div dangerouslySetInnerHTML={{ __html: html }} />
 
-      <p>Note: Widget is without padding. Should be up to consumer to decide when integrating.</p>
+      <p>
+        Note: Widget is without padding. Should be up to consumer to decide when
+        integrating.
+      </p>
 
       <h2>Installation (latest version v{data.latest.version})</h2>
 
@@ -184,6 +194,22 @@ function WidgetContent({
       <h3>HTML output</h3>
       <CopyMarkupLarge content={html} />
 
+      <div>
+        <p style={{ marginTop: '2rem' }}>
+          <strong>Note</strong>: If using output override options when calling{' '}
+          <code>createWidget</code> and copy-paste the HTML code you would have
+          to add classes to the container (element with the class{' '}
+          <code>widget-module__wrapper</code>) manually.
+        </p>
+
+        <ul style={{ listStylePosition: 'inside', marginTop: '1rem' }}>
+          <li>
+            <code>.widget-inheritFont</code>: Inherit font family from the
+            website
+          </li>
+        </ul>
+      </div>
+
       <h3>Scripts (UMD / ESM)</h3>
 
       <CopyMarkup content={scripts(lib.urls?.URL_JS_UMD)} />

diff --git a/src/widget/widget.module.css b/src/widget/widget.module.css
@@ -321,3 +321,10 @@
 .messageBox[hidden] {
   display: none;
 }
+/**
+  * Configurable options for widget
+*/
+.inheritFont,
+.inheritFont * {
+  font-family: inherit !important;
+}
diff --git a/src/widget/widget.ts b/src/widget/widget.ts
@@ -39,9 +39,13 @@ function createSettingsConstants(urlBase: string) {
   };
 }
 
+type OutputOverrideOptions = {
+  inheritFont?: boolean;
+};
 export type WidgetOptions = {
   urlBase: string;
   language?: Languages;
+  outputOverrideOptions?: Partial<OutputOverrideOptions>;
 };
 export type PlannerWebOutput = {
   output: string;
@@ -51,10 +55,18 @@ export type PlannerWebOutput = {
 export function createWidget({
   urlBase,
   language = 'en',
+  outputOverrideOptions = {},
 }: WidgetOptions): PlannerWebOutput {
   const texts = translations(language);
   const settings = createSettingsConstants(urlBase);
-  const output = createOutput(settings, texts);
+
+  const defaultOutputOverrideOptions: OutputOverrideOptions = {
+    inheritFont: false,
+    ...outputOverrideOptions,
+  };
+
+  const output = createOutput(settings, texts, defaultOutputOverrideOptions);
+
   return {
     output,
     init,
@@ -225,7 +237,11 @@ class MessageBox extends HTMLElement {
   }
 }
 
-function createOutput({ URL_BASE }: SettingConstants, texts: Texts) {
+function createOutput(
+  { URL_BASE }: SettingConstants,
+  texts: Texts,
+  outputOverrideOptions: OutputOverrideOptions,
+) {
   function searchItem(item: GeocoderFeature) {
     const img = venueIcon(item);
     const title = el('span', [item.name]);
@@ -704,7 +720,11 @@ function createOutput({ URL_BASE }: SettingConstants, texts: Texts) {
   `;
 
   const output = html`
-    <div class="${style.wrapper} ${style.lightWrapper}">
+    <div
+      class="${style.wrapper} ${style.lightWrapper} ${outputOverrideOptions.inheritFont
+        ? style.inheritFont
+        : ''}"
+    >
       <nav class="${style.nav}">
         <ul class="${style.tabs} js-tablist">
           <li>