Moved preview toolbar to global preview component

refs. https://github.com/TryGhost/Team/issues/3354

ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.stories.tsx

@@ -4,6 +4,7 @@ import Heading from './Heading';
 import NiceModal from '@ebay/nice-modal-react';
 import PreviewModal from './PreviewModal';
 import PreviewModalContainer from './PreviewModalContainer';
+import {SelectOption} from './Select';
 
 const meta = {
     title: 'Global / Modal / Preview Modal',
@@ -19,6 +20,14 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof PreviewModal>;
 
+const selectOptions: SelectOption[] = [
+    {value: 'homepage', label: 'Homepage'},
+    {value: 'post', label: 'Post'},
+    {value: 'page', label: 'Page'},
+    {value: 'tag-archive', label: 'Tag archive'},
+    {value: 'author-archive', label: 'Author archive'}
+];
+
 export const Default: Story = {
     args: {
         title: 'Preview modal',
@@ -31,7 +40,25 @@ export const Default: Story = {
             <div className='flex h-full items-center justify-center text-sm text-grey-500'>
                 Sidebar area
             </div>
-        )
+        ),
+        previewToolbarURLs: selectOptions
+    }
+};
+
+export const NoPreviewToolbar: Story = {
+    args: {
+        title: 'Preview modal',
+        preview: (
+            <div className='flex h-full items-center justify-center text-sm text-grey-500'>
+                Preview area
+            </div>
+        ),
+        sidebar: (
+            <div className='flex h-full items-center justify-center text-sm text-grey-500'>
+                Sidebar area
+            </div>
+        ),
+        previewToolbar: false
     }
 };
 
@@ -44,10 +71,10 @@ export const CustomButtons: Story = {
     }
 };
 
-export const CustomHeader: Story = {
+export const CustomSidebarHeader: Story = {
     args: {
         ...Default.args,
-        customHeader: (
+        sidebarHeader: (
             <div className='border-b border-grey-100 bg-black p-10 text-center text-white'>
                 <Heading level={3}>A custom header here</Heading>
             </div>

ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx

@@ -1,9 +1,12 @@
 import ButtonGroup from './ButtonGroup';
+import DesktopChrome from './DesktopChrome';
 import Heading from './Heading';
 import Modal from './Modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
+import URLSelect from './URLSelect';
 import {IButton} from './Button';
+import {SelectOption} from './Select';
 
 export interface PreviewModalProps {
     title?: string;
@@ -12,12 +15,18 @@ export interface PreviewModalProps {
     cancelLabel?: string;
     okLabel?: string;
     okColor?: string;
+    buttonsDisabled?: boolean
+    previewToolbar?: boolean;
+    previewToolbarURLs?: SelectOption[];
+    sidebarButtons?: React.ReactNode;
+    sidebarHeader?: React.ReactNode;
+    sidebarPadding?: boolean;
+
     onCancel?: () => void;
     onOk?: () => void;
-    buttonsDisabled?: boolean
-    customButtons?: React.ReactNode;
-    customHeader?: React.ReactNode;
-    sidebarPadding?: boolean;
+    onSelectURL?: (url: string) => void;
+    onSelectDesktopView?: () => void;
+    onSelectMobileView?: () => void;
 }
 
 export const PreviewModalContent: React.FC<PreviewModalProps> = ({
@@ -27,17 +36,65 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
     cancelLabel = 'Cancel',
     okLabel = 'OK',
     okColor = 'black',
+    previewToolbarURLs,
+    previewToolbar = true,
+    buttonsDisabled,
+    sidebarButtons,
+    sidebarHeader,
+    sidebarPadding = true,
+
     onCancel,
     onOk,
-    buttonsDisabled,
-    customButtons,
-    customHeader,
-    sidebarPadding = true
+    onSelectURL,
+    onSelectDesktopView,
+    onSelectMobileView
 }) => {
     const modal = useModal();
     let buttons: IButton[] = [];
 
-    if (!customButtons) {
+    if (previewToolbar) {
+        let toolbarCenter = (<></>);
+        if (previewToolbarURLs) {
+            toolbarCenter = (
+                <URLSelect options={previewToolbarURLs!} onSelect={onSelectURL ? onSelectURL : () => {}} />
+            );
+        }
+
+        const toolbarRight = (
+            <ButtonGroup
+                buttons={[
+                    {
+                        icon: 'laptop',
+                        link: true,
+                        size: 'sm',
+                        onClick: onSelectDesktopView
+                    },
+                    {
+                        icon: 'mobile',
+                        link: true,
+                        size: 'sm',
+                        iconColorClass: 'text-grey-500',
+                        onClick: onSelectMobileView
+                    }
+                ]}
+            />
+        );
+
+        preview = (
+            <DesktopChrome
+                chromeClasses='bg-grey-50'
+                toolbarCenter={toolbarCenter}
+                toolbarClasses='m-2'
+                toolbarRight={toolbarRight}
+            >
+                <div className='flex h-full items-center justify-center bg-grey-50 text-sm text-grey-400'>
+                    {preview}
+                </div>
+            </DesktopChrome>
+        );
+    }
+
+    if (!sidebarButtons) {
         buttons.push({
             key: 'cancel-modal',
             label: cancelLabel,
@@ -69,11 +126,11 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
                     {preview}
                 </div>
                 <div className='flex h-full basis-[400px] flex-col gap-3 border-l border-grey-100'>
-                    {customHeader ? customHeader : (
+                    {sidebarHeader ? sidebarHeader : (
                         <div className='flex justify-between gap-3 px-7 pt-5'>
                             <>
                                 <Heading className='mt-1' level={4}>{title}</Heading>
-                                {customButtons ? customButtons : <ButtonGroup buttons={buttons} /> }
+                                {sidebarButtons ? sidebarButtons : <ButtonGroup buttons={buttons} /> }
                             </>
                         </div>
                     )}

ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx

@@ -9,6 +9,7 @@ import ThemeSettings from './designAndBranding/ThemeSettings';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {CustomThemeSetting, SettingValue} from '../../../types/api';
 import {PreviewModalContent} from '../../../admin-x-ds/global/PreviewModal';
+import {SelectOption} from '../../../admin-x-ds/global/Select';
 import {ServicesContext} from '../../providers/ServiceProvider';
 
 const Sidebar: React.FC<{
@@ -94,10 +95,28 @@ const DesignModal: React.FC = () => {
         )));
     };
 
+    const urlOptions: SelectOption[] = [
+        {value: 'homepage', label: 'Homepage'},
+        {value: 'post', label: 'Post'}
+    ];
+
+    const onSelectURL = (url: string) => {
+        alert(url);
+    };
+
+    const onSelectDesktopView = () => {
+        alert('Desktop selected');
+    };
+
+    const onSelectMobileView = () => {
+        alert('Mobile selected');
+    };
+
     return <PreviewModalContent
         buttonsDisabled={saveState === 'saving'}
         okLabel='Save'
         preview={<ThemePreview />}
+        previewToolbarURLs={urlOptions}
         sidebar={<Sidebar
             brandSettings={{description, accentColor, icon, logo, coverImage}}
             themeSettingSections={themeSettingSections}
@@ -132,6 +151,9 @@ const DesignModal: React.FC = () => {
             await handleSave();
             modal.remove();
         }}
+        onSelectDesktopView={onSelectDesktopView}
+        onSelectMobileView={onSelectMobileView}
+        onSelectURL={onSelectURL}
     />;
 };
 

ghost/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreivew.tsx

@@ -1,42 +1,9 @@
-import ButtonGroup from '../../../../admin-x-ds/global/ButtonGroup';
-import DesktopChrome from '../../../../admin-x-ds/global/DesktopChrome';
 import React from 'react';
-import URLSelect from '../../../../admin-x-ds/global/URLSelect';
-import {SelectOption} from '../../../../admin-x-ds/global/Select';
 
 const ThemePreview: React.FC = () => {
-    const urlOptions: SelectOption[] = [
-        {value: 'homepage', label: 'Homepage'},
-        {value: 'post', label: 'Post'}
-    ];
-
-    const toolbarCenter = (
-        <URLSelect options={urlOptions} onSelect={(value: string) => {
-            alert(value);
-        }} />
-    );
-
-    const toolbarRight = (
-        <ButtonGroup
-            buttons={[
-                {icon: 'laptop', link: true, size: 'sm'},
-                {icon: 'mobile', link: true, size: 'sm', iconColorClass: 'text-grey-500'}
-            ]}
-        />
-    );
-
     return (
         <>
-            <DesktopChrome
-                chromeClasses='bg-grey-50'
-                toolbarCenter={toolbarCenter}
-                toolbarClasses='m-2'
-                toolbarRight={toolbarRight}
-            >
-                <div className='flex h-full items-center justify-center bg-grey-50 text-sm text-grey-400'>
-                    Preview iframe
-                </div>
-            </DesktopChrome>
+            preview iframe
         </>
     );
 };