feat(layouts): portrait

.github/workflows/publish.yml

@@ -1,9 +1,7 @@
 name: Publish to npm
 
 on:
-  push:
-    branches:
-      - main
+  workflow_dispatch:
 
 permissions:
   id-token: write

docs/LAYOUTS.md

@@ -3,6 +3,7 @@
 The following responsive layouts are available:
 
 * **Centered** - Simple layout that centers its content.
+* **Portrait** - Simple vertical layout with an optional header and footer.
 * **Sidebar** - Two panel layout with a sidebar on the left and the main content on the right.
 
 All details are described per component below.
@@ -33,9 +34,37 @@ Customization options (selector: `.layout-centered`):
 
 - `--content-max-width` (default: `696px`)
 
+## Portrait
+
+Simple horizontally centered, vertical oriented layout.
+
+Properties:
+
+- **children** - ReactNode (required)
+- **header** - ReactNode (optional)
+- **footer** - ReactNode (optional)
+
+Example:
+
+```tsx
+import { PortraitLayout } from '@maskingtech/designsystem';
+
+<PortraitLayout header={<>Header</>} footer={<>Footer</>}>
+    This is centered.
+</PortraitLayout>
+```
+
+Responsive behavior:
+
+- **width < 500px** - The side padding gets halved.
+
+Customization options (selector: `.layout-portrait`):
+
+- `--content-width` (default: `900px`)
+
 ## Sidebar
 
-Horizontally centerred, two panel layout with a sidebar on the left and the main content on the right, and an optional header and footer for the response view.
+Horizontally centered, two panel layout with a sidebar on the left and the main content on the right, and an optional header and footer for the response view.
 
 Properties:
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maskingtech/designsystem",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "repository": {
     "url": "https://github.com/MaskingTechnology/designsystem"

src/index.ts

@@ -33,6 +33,7 @@ export { Menu } from './components/menu/Menu';
 export { Tabs } from './components/tabs/Tabs';
 
 export { CenteredLayout } from './layouts/centered/Centered';
+export { PortraitLayout } from './layouts/portrait/Portrait';
 export { SidebarLayout } from './layouts/sidebar/Sidebar';
 
 export { DesignSystem } from './DesignSystem';

src/layouts/centered/Centered.css

@@ -11,7 +11,7 @@
         width: 100vw;
         min-height: 100vh;
 
-        & > .content
+        & > main
         {
             box-sizing: border-box;
             padding: 1rem;
@@ -22,7 +22,7 @@
 
         @container (max-width: 499px)
         {
-            & > .content
+            & > main
             {
                 padding: 0.5rem;
             }

src/layouts/centered/Centered.tsx

@@ -9,9 +9,9 @@ type Props = {
 
 export function CenteredLayout({ children }: Props)
 {
-    return <main className='layout-centered'>
-        <div className='content'>
+    return <div className='layout-centered'>
+        <main>
             {children}
-        </div>
-    </main>;
+        </main>
+    </div>;
 }

src/layouts/portrait/Portrait.css

@@ -0,0 +1,58 @@
+.mtds
+{
+    .layout-portrait
+    {
+        --content-width: 900px;
+
+        container-type: inline-size;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+        flex-grow: 1;
+        min-height: 100vh;
+
+        & > .content
+        {
+            display: flex;
+            flex-direction: column;
+            box-sizing: border-box;
+            padding: 1rem;
+            width: var(--content-width);
+            max-width: 100%;
+
+            header
+            {
+                border-bottom: 0.1em solid var(--border-color);
+                margin-bottom: 1em;
+
+                flex-grow: 0;
+                flex-shrink: 0;
+            }
+
+            main
+            {
+                flex-grow: 1;
+                flex-shrink: 1;
+            }
+
+            footer
+            {
+                border-top: 0.1em solid var(--border-color);
+                margin-top: 1em;
+
+                flex-grow: 0;
+                flex-shrink: 0;
+            }
+        }
+
+        @container (max-width: 499px)
+        {
+            & > .content
+            {
+                padding: 0.5rem;
+            }
+        }
+    }
+}

src/layouts/portrait/Portrait.tsx

@@ -0,0 +1,23 @@
+
+import type { ReactNode } from 'react';
+
+import './Portrait.css';
+
+type Props = {
+    readonly header?: ReactNode;
+    readonly footer?: ReactNode;
+    readonly children: ReactNode;
+};
+
+export function PortraitLayout({ header, footer, children }: Props)
+{
+    return <div className='layout-portrait'>
+        <div className='content'>
+            { header && <header>{header}</header> }
+            <main>
+                {children}
+            </main>
+            { footer && <footer>{footer}</footer> }
+        </div>
+    </div>;
+}