feat(shared): Add kiosk mode to tabbed examples

sites/shared/components/mdx/tabbed-example.mjs

@@ -141,7 +141,9 @@ export const TabbedExample = ({
 
   return (
     <div className="my-8">
-      <Tabs tabs={tabNames.join(', ')}>{tabs}</Tabs>
+      <Tabs tabs={tabNames.join(', ')} withModal>
+        {tabs}
+      </Tabs>
       {caption && (
         <div className="text-center italic -mt-4">
           <Md>{caption}</Md>

sites/shared/components/tabs.mjs

@@ -1,6 +1,11 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
+import { ModalContext } from 'shared/context/modal-context.mjs'
+import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
+import { KioskIcon } from 'shared/components/icons.mjs'
+
+export const Tabs = ({ tabs = '', active = 0, children, withModal = false }) => {
+  const { setModal } = useContext(ModalContext)
 
-export const Tabs = ({ tabs = '', active = 0, children }) => {
   // Keep active tab in state
   const [activeTab, setActiveTab] = useState(active)
 
@@ -20,17 +25,40 @@ export const Tabs = ({ tabs = '', active = 0, children }) => {
   return (
     <div className="my-4">
       <div className="tabs">
-        {tablist.map((title, tabId) => (
-          <button
-            key={tabId}
-            className={`text-lg font-bold capitalize tab h-auto tab-bordered grow py-2 ${
+        {tablist.map((title, tabId) => {
+          const btnClasses = `text-lg font-bold capitalize tab h-auto tab-bordered grow py-2 ${
             activeTab === tabId ? 'tab-active' : ''
-            }`}
-            onClick={() => setActiveTab(tabId)}
-          >
+          }`
+
+          return withModal && activeTab === tabId ? (
+            <div className={`flex flex-row justify-between w-1/${tablist.length}`}>
+              <button key={tabId} className={btnClasses} onClick={() => setActiveTab(tabId)}>
                 {title}
               </button>
-        ))}
+              <button
+                className={`${btnClasses} px-0`}
+                onClick={() =>
+                  setModal(
+                    <ModalWrapper
+                      flex="col"
+                      justify="top lg:justify-center"
+                      slideFrom="right"
+                      fullWidth
+                    >
+                      {childrenWithTabSetter}
+                    </ModalWrapper>
+                  )
+                }
+              >
+                <KioskIcon className="w-6 h-6 hover:text-secondary" />
+              </button>
+            </div>
+          ) : (
+            <button key={tabId} className={btnClasses} onClick={() => setActiveTab(tabId)}>
+              {title}
+            </button>
+          )
+        })}
       </div>
       <div>{childrenWithTabSetter}</div>
     </div>