Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

Added window chrome comp. to AdminX Design System

Browse source 
refs. https://github.com/TryGhost/Team/issues/3328
This commit is contained in:
Peter Zimon 2023-05-31 09:36:50 +02:00
parent 35f7b7058c
commit f2f3e2a22d
3 changed files with 126 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
ghost/admin-x-settings/src/admin-x-ds/global/DesktopChrome.stories.tsx Normal file
View file

@ -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>
)
}
};

55
ghost/admin-x-settings/src/admin-x-ds/global/DesktopChrome.tsx Normal file
View file

@ -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;

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

@ -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'>