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

Created DesktopChrome component for previews

Browse source 
refs https://github.com/TryGhost/Product/issues/3349

Created a component for desktop chrome for previews (similar to what we
already have - `MobileChrome`) and its storybook
This commit is contained in:
Djordje Vlaisavljevic 2023-07-11 22:44:28 +01:00 • committed by GitHub
parent 9abcf9d3ed
commit 5f30e935b3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
apps/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChrome.stories.tsx Normal file
View file

@ -0,0 +1,27 @@
import type {Meta, StoryObj} from '@storybook/react';
import DesktopChrome from './DesktopChrome';
const meta = {
title: 'Global / Chrome / Desktop Chrome',
component: DesktopChrome,
tags: ['autodocs'],
decorators: [(_story: any) => (<div style={{padding: '40px', backgroundColor: '#efefef', display: 'flex', justifyContent: 'center'}}>{_story()}</div>)]
} satisfies Meta<typeof DesktopChrome>;
export default meta;
type Story = StoryObj<typeof DesktopChrome>;
export const Default: Story = {
args: {
children: (
<div className='bg-white p-4'>
<p className='mb-6'>This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. </p>
<img alt='Testimage' className='mb-6' src='https://images.unsplash.com/photo-1685374156924-5230519f4ab3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8YWxsfDI1fHx8fHx8Mnx8MTY4NTYzNzE3M3w&ixlib=rb-4.0.3&q=80&w=2000' />
<p className='mb-6'>This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. </p>
</div>
)
}
};

17
apps/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChrome.tsx Normal file
View file

@ -0,0 +1,17 @@
import React from 'react';
interface DesktopChromeProps {
children?: React.ReactNode;
}
const DesktopChrome: React.FC<DesktopChromeProps & React.HTMLAttributes<HTMLDivElement>> = ({children, ...props}) => {
return (
<div className='flex h-full w-full flex-col px-5 pb-5' {...props}>
<div className="h-full w-full overflow-hidden rounded-[4px] shadow-xl">
{children}
</div>
</div>
);
};
export default DesktopChrome;

7
apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx
View file

@ -1,4 +1,5 @@
import ButtonGroup from '../ButtonGroup';
import DesktopChrome from '../chrome/DesktopChrome';
import DesktopChromeHeader from '../chrome/DesktopChromeHeader';
import Heading from '../Heading';
import MobileChrome from '../chrome/MobileChrome';
@ -90,6 +91,12 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
{preview}
</MobileChrome>
);
} else if (view === 'desktop' && deviceSelector) {
preview = (
<DesktopChrome data-testid="preview-desktop">
{preview}
</DesktopChrome>
);
}
if (previewToolbar) {

2
apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailPreview.tsx
View file

@ -5,7 +5,7 @@ interface TierDetailPreviewProps {}
const TierDetailPreview: React.FC<TierDetailPreviewProps> = () => {
return (
<div>
<div className="-mt-[6px]">
<div className="flex items-baseline justify-between">
<h4 className="z-10 pb-3 text-2xs font-semibold uppercase tracking-wide text-grey-700">Tier preview</h4>
<div>