Admin X Design System docs (#19120)

refs. https://github.com/TryGhost/Product/issues/4169

- Added Layout documentation to design system
- Added note about usage of Toast component

apps/admin-x-design-system/.storybook/preview.tsx

@@ -59,7 +59,7 @@ const preview: Preview = {
 		options: {
 			storySort: {
 				method: 'alphabetical',
-				order: ['Welcome', 'Foundations', ['Style Guide', 'Colors', 'Icons', 'ErrorHandling'], 'Global', ['Form', 'Chrome', 'Modal', 'Layout', 'List', 'Table', '*'], 'Settings', ['Setting Section', 'Setting Group', '*'], 'Experimental'],
+				order: ['Welcome', 'Foundations', ['Style Guide', 'Colors', 'Icons', 'ErrorHandling'], 'Global', ['Form', 'Chrome', 'Modal', 'Layout', ['View Container', 'Page Header', 'Page'], 'List', 'Table', '*'], 'Settings', ['Setting Section', 'Setting Group', '*'], 'Experimental'],
 			},
 		},
 		docs: {

apps/admin-x-design-system/src/docs/Layout.mdx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/blocks';
+import SBPageViewContainer from './assets/page-viewcontainer.png';
+
+<Meta title="Foundations / Layout" />
+
+<div className="sb-doc">
+
+# Layout
+
+<p className='excerpt'>The goal of the layout system is to give a simple and flexible framework for pages in the Admin. It allows designs to be focused on primary functions yet stay consistent across the whole app.</p>
+
+### Structure
+
+Below you can see a the most common Admin screen structure: it consists of a [Page component](/docs/global-layout-page--docs) as the main container of a screen and a `ViewContainer` that sets the typical view boundaries and patterns for consistency.
+
+#### Page
+The purpose of this component is to set up the main container of a page. It defines/restricts scrolling and adds app/page level elements such as search, navigation or the main menu. And ofc. it also holds the contents of a screen.
+
+
+#### ViewContainer
+There's no restriction on what [component] should be used as the main contents of a page. However most pages would need similar constraints: setting a maximum width, a streamlined sticky header or the positioning of the primary action and so on. This is the main role of the [ViewContainer component](/docs/global-layout-view-container--docs).
+
+### Customisation
+
+It's not mandatory but it's advised to use this structure to maintain consistency as much as possible. The components have a bunch of documented parameters which allows customisation to be used in the current Admin and in future developments.
+
+</div>
+
+<div className="sb-wide">
+<img src={SBPageViewContainer} />
+</div>

apps/admin-x-design-system/src/global/Toast.stories.tsx

@@ -5,6 +5,10 @@ import {Toaster} from 'react-hot-toast';
 import Button from './Button';
 import {ShowToastProps, showToast} from './Toast';
 
+/**
+ * This component uses `react-hot-toast` which requires the `<Toaster />` component to be included in the app.
+ * The design system already does this so you don't have to — just call `showToast()` in any event and it'll work.
+ */
 const ToastContainer: React.FC<ShowToastProps> = ({...props}) => {
     return (
         <>

apps/admin-x-design-system/src/global/Toast.tsx

@@ -22,6 +22,10 @@ export interface ToastProps {
     props?: ShowToastProps;
 }
 
+/**
+ * This component uses `react-hot-toast` which requires the `<Toaster />` component to be included in the app.
+ * The design system already does this so you don't have to — just call `showToast()` in any event and it'll work.
+ */
 const Toast: React.FC<ToastProps> = ({
     t,
     children,