Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook: Fix warnings in Layout document #67865

Merged
merged 1 commit into from
Dec 13, 2024
Merged

Storybook: Fix warnings in Layout document #67865

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 31 additions & 29 deletions storybook/stories/foundations/layout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Meta } from '@storybook/addon-docs/blocks';
import { Meta } from '@storybook/blocks';
import areas from './static/areas.svg';
import pageLayoutExample1 from './static/page-layout-example-1.svg';
import pageLayoutExample2 from './static/page-layout-example-2.svg';
Expand Down Expand Up @@ -27,32 +27,34 @@ At the highest level admin pages are comprised of _areas_, that can be arranged
Areas can be combined in different ways depending on the use case. Here are some examples.

<table>
<tr>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar, Content Frame and Preview Frame
<img src={ pageLayoutExample1 } alt="Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
</td>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and Preview Frame
<img src={ pageLayoutExample2 } alt="Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Design section.
</td>
</tr>
<tr>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and Content Frame
<img src={ pageLayoutExample3 } alt="Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
</td>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and multiple Content Frames
<img src={ pageLayoutExample4 } alt="Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement" width="100%" />

Multiple content frames can be utilised as required.
</td>
</tr>
<tbody>
<tr>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar, Content Frame and Preview Frame
<img src={ pageLayoutExample1 } alt="Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
</td>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and Preview Frame
<img src={ pageLayoutExample2 } alt="Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Design section.
</td>
</tr>
<tr>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and Content Frame
<img src={ pageLayoutExample3 } alt="Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
</td>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and multiple Content Frames
<img src={ pageLayoutExample4 } alt="Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement" width="100%" />

Multiple content frames can be utilised as required.
</td>
</tr>
</tbody>
</table>
Loading