From f2f3e2a22d1cfa408c9cdab8c34e1d8f8929d641 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 31 May 2023 09:36:50 +0200
Subject: [PATCH] Added window chrome comp. to AdminX Design System

refs. https://github.com/TryGhost/Team/issues/3328
---
 .../global/DesktopChrome.stories.tsx          | 70 +++++++++++++++++++
 .../src/admin-x-ds/global/DesktopChrome.tsx   | 55 +++++++++++++++
 .../src/admin-x-ds/global/PreviewModal.tsx    |  2 +-
 3 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 ghost/admin-x-settings/src/admin-x-ds/global/DesktopChrome.stories.tsx
 create mode 100644 ghost/admin-x-settings/src/admin-x-ds/global/DesktopChrome.tsx

diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/DesktopChrome.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/DesktopChrome.stories.tsx
new file mode 100644
index 0000000000..27489f5595
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/DesktopChrome.stories.tsx
@@ -0,0 +1,70 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import DesktopChrome from './DesktopChrome';
+
+const meta = {
+    title: 'Global / Chrome / Desktop',
+    component: DesktopChrome,
+    tags: ['autodocs']
+} satisfies Meta<typeof DesktopChrome>;
+
+export default meta;
+type Story = StoryObj<typeof DesktopChrome>;
+
+export const Default: Story = {
+    args: {
+        children: (
+            <div className='flex items-center justify-center p-10 text-sm text-grey-500'>
+                Window contents
+            </div>
+        )
+    }
+};
+
+export const Small: Story = {
+    args: {
+        children: (
+            <div className='flex items-center justify-center p-10 text-sm text-grey-500'>
+                Window contents
+            </div>
+        ),
+        size: 'sm'
+    }
+};
+
+export const WithBorder: Story = {
+    args: {
+        children: (
+            <div className='flex items-center justify-center p-10 text-sm text-grey-500'>
+                Window contents
+            </div>
+        ),
+        border: true
+    }
+};
+
+export const NoTrafficLights: Story = {
+    args: {
+        children: (
+            <div className='flex items-center justify-center p-10 text-sm text-grey-500'>
+                Window contents
+            </div>
+        ),
+        trafficLights: false
+    }
+};
+
+export const WithHeaderContents: Story = {
+    args: {
+        children: (
+            <div className='flex items-center justify-center p-10 text-sm text-grey-500'>
+                Window contents
+            </div>
+        ),
+        header: (
+            <div className='flex grow justify-center text-sm font-semibold text-grey-900'>
+                Window header
+            </div>
+        )
+    }
+};
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/DesktopChrome.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/DesktopChrome.tsx
new file mode 100644
index 0000000000..fff95831ac
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/DesktopChrome.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+export type DesktopChromeSize = 'sm' | 'md';
+
+interface DesktopChromeProps {
+    size?: DesktopChromeSize;
+    trafficLights?: boolean;
+    children?: React.ReactNode;
+    chromeClasses?: string;
+    headerClasses?: string;
+    contentClasses?: string;
+    header?: React.ReactNode;
+    headerCenter?: boolean;
+    border?: boolean;
+}
+
+const DesktopChrome: React.FC<DesktopChromeProps> = ({
+    size = 'md', 
+    trafficLights = true, 
+    children, 
+    chromeClasses = '',
+    headerClasses = '', 
+    contentClasses = '', 
+    header,
+    headerCenter = true,
+    border = false
+}) => {
+    let containerSize = size === 'sm' ? 'h-6 p-2' : 'h-10 p-3';
+    const trafficLightSize = size === 'sm' ? 'w-[6px] h-[6px]' : 'w-[10px] h-[10px]';
+    const trafficLightContainerStyle = size === 'sm' ? 'gap-[5px] w-[36px] ' : 'gap-2 w-[56px] ';
+
+    if (headerCenter) {
+        containerSize += size === 'sm' ? ' pr-[48px]' : ' pr-[68px]';
+    }
+
+    return (
+        <div className={`h-full ${border ? 'rounded-sm border border-grey-100' : ''} ${chromeClasses}`}>
+            <header className={`flex items-center justify-between bg-grey-50 ${containerSize} ${headerClasses}`}>
+                {trafficLights && 
+                    <div className={`flex items-center ${trafficLightContainerStyle}`}>
+                        <div className={`rounded-full bg-grey-500 ${trafficLightSize}`}></div>
+                        <div className={`rounded-full bg-grey-500 ${trafficLightSize}`}></div>
+                        <div className={`rounded-full bg-grey-500 ${trafficLightSize}`}></div>
+                    </div>
+                }
+                {header && header}
+            </header>
+            <section className={contentClasses}>
+                {children}
+            </section>
+        </div>
+    );
+};
+
+export default DesktopChrome;
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
index f0c733d524..6cb8fffa70 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
@@ -61,7 +61,7 @@ const PreviewModal: React.FC<PreviewModalProps> = ({
             title=''
         >
             <div className='flex h-full grow'>
-                <div className='grow'>
+                <div className='flex grow flex-col'>
                     {preview}
                 </div>
                 <div className='flex h-full basis-[400px] flex-col gap-3 border-l border-grey-100'>