Added image to top-level design settings

REF DES-829

apps/admin-x-settings/src/components/TopLevelGroup.tsx

@@ -4,7 +4,11 @@ import {useRouting} from '@tryghost/admin-x-framework/routing';
 import {useScrollSection} from '../hooks/useScrollSection';
 import {useSearch} from './providers/SettingsAppProvider';
 
-const TopLevelGroup: React.FC<Omit<SettingGroupProps, 'isVisible' | 'highlight'> & {keywords: string[]}> = ({keywords, navid, ...props}) => {
+interface TopLevelGroupProps extends Omit<SettingGroupProps, 'isVisible' | 'highlight'> {
+    keywords: string[];
+}
+
+const TopLevelGroup: React.FC<TopLevelGroupProps> = ({keywords, navid, children, ...props}) => {
     const {checkVisible, noResult} = useSearch();
     const {route} = useRouting();
     const [highlight, setHighlight] = useState(false);
@@ -12,17 +16,38 @@ const TopLevelGroup: React.FC<Omit<SettingGroupProps, 'isVisible' | 'highlight'>
 
     useEffect(() => {
         setHighlight(route === navid);
+        if (route === navid) {
+            const timer = setTimeout(() => setHighlight(false), 2000);
+            return () => clearTimeout(timer);
+        }
     }, [route, navid]);
 
-    useEffect(() => {
-        if (highlight) {
-            setTimeout(() => {
-                setHighlight(false);
-            }, 2000);
-        }
-    }, [highlight]);
+    const hasImageChild = React.Children.toArray(children).some(
+        child => React.isValidElement(child) && child.type === 'img'
+    );
 
-    return <Base ref={ref} highlight={highlight} isVisible={checkVisible(keywords) || noResult} navid={navid} {...props} />;
+    const wrappedChildren = hasImageChild ? (
+        <div className="-mx-5 -mb-5 overflow-hidden rounded-b-xl bg-grey-50 md:-mx-7 md:-mb-7">
+            {React.Children.map(children, child => (React.isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(child) && child.type === 'img'
+                ? React.cloneElement(child, {
+                    className: `${child.props.className || ''} h-full w-full rounded-b-xl`.trim()
+                })
+                : child)
+            )}
+        </div>
+    ) : children;
+
+    return (
+        <Base 
+            ref={ref} 
+            highlight={highlight} 
+            isVisible={checkVisible(keywords) || noResult} 
+            navid={navid} 
+            {...props}
+        >
+            {wrappedChildren}
+        </Base>
+    );
 };
 
 export default TopLevelGroup;

apps/admin-x-settings/src/components/settings/site/DesignSetting.tsx

@@ -1,3 +1,4 @@
+import DesignSettingsImg from '../../../assets/images/design-settings.png';
 import React from 'react';
 import TopLevelGroup from '../../TopLevelGroup';
 import {Button, withErrorBoundary} from '@tryghost/admin-x-design-system';
@@ -16,8 +17,9 @@ const DesignSetting: React.FC<{ keywords: string[] }> = ({keywords}) => {
             keywords={keywords}
             navid='design'
             testId='design'
-            title="Design & branding"
-        />
+            title="Design & branding">
+            <img src={DesignSettingsImg} />
+        </TopLevelGroup>
     );
 };