Slide layout docs (#1128)

* Add SlideLayout to examples * Add docs for SlideLayout * Update one-page.html * Update api-reference.md
FormidableLabs · Jun 13, 2022 · ab67e54 · ab67e54
1 parent f9e1d41
commit ab67e54
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 3 deletions.
diff --git a/docs/content/api-reference.md b/docs/content/api-reference.md
@@ -360,3 +360,46 @@ AnimatedProgress is similar to the Progress component, with an additional Pacman
 | `color`                            | PropTypes.string | `#abc123` |
 | `pacmanColor`                      | PropTypes.string | `#abc123` |
 | [**`Position`**](./props#position) |                  |           |
+
+## SlideLayout
+
+`SlideLayout` is a set of helper components used to create slides from a set of pre-defined layouts, so you can avoid dealing with things like layout primitives.
+
+### `SlideLayout.Full`
+
+A full-slide layout for if you need basic slide with nothing in your way.
+
+| Props           | Type                  | Example |
+|-----------------|-----------------------|---------|
+| `...slideProps` | [Slide Props](#slide) |         |
+
+### `SlideLayout.Center`
+
+A centered-content layout for if you want to display your slide content as a piece of content centered on the slide.
+
+| Props           | Type                  | Example |
+|-----------------|-----------------------|---------|
+| `...slideProps` | [Slide Props](#slide) |         |
+
+### `SlideLayout.TwoColumn`
+
+A two-column layout for if you want to easily split your slide content into two equal-sized columns.
+
+| Props           | Type                  | Example                          |
+|-----------------|-----------------------|----------------------------------|
+| `...slideProps` | [Slide Props](#slide) |                                  |
+| `left`          | `ReactNode`           | `<Heading>Hello world</Heading>` |
+| `right`         | `ReactNode`           | `<Heading>Hello world</Heading>` |
+
+### `SlideLayout.List`
+
+A layout with a list and an optional title for if you want to quickly display a list of items.
+
+| Props              | Type                                | Required | Example                         |
+|--------------------|-------------------------------------|----------|---------------------------------|
+| `...slideProps`    | [Slide Props](#slide)               | ❌        |                                 |
+| `title`            | `string`                            | ❌        | `My list slide`                 |
+| `titleProps`       | [Heading Props](./props/#typograph) | ❌        | `{ color: 'red' }`              |
+| `items`            | `ReactNode[]`                       | ✅        | `['Hello', <Text>World</Text>]` |
+| `animateListItems` | `boolean`                           | ❌        | `true`                          |
+| `listProps`        | [List Props](#typography-tags)      | ❌        | `{ backgroundColor: 'purple' }` |
diff --git a/examples/js/index.js b/examples/js/index.js
@@ -19,7 +19,8 @@ import {
   CodePane,
   MarkdownSlide,
   MarkdownSlideSet,
-  Notes
+  Notes,
+  SlideLayout
 } from 'spectacle';
 import ReactDOM from 'react-dom';
 
@@ -261,6 +262,11 @@ const Presentation = () => (
         # This is the second slide of a Markdown Slide Set
         `}
     </MarkdownSlideSet>
+    <SlideLayout.List
+      title="Slide layouts!"
+      items={['Two-column', 'Lists', 'And more!']}
+      animateListItems
+    />
   </Deck>
 );
 

diff --git a/examples/one-page.html b/examples/one-page.html
@@ -37,7 +37,8 @@
         CodePane,
         MarkdownSlide,
         MarkdownSlideSet,
-        Notes
+        Notes,
+        SlideLayout
       } = Spectacle;
 
       import htm from 'https://unpkg.com/htm@^3?module';
@@ -250,6 +251,7 @@
                 # This is the second slide of a Markdown Slide Set
                 `}
           </${MarkdownSlideSet}>
+          <${SlideLayout.List} title="Slide layouts!" items=${['Two-column', 'Lists' , 'And more!' ]} animateListItems />
         </${Deck}>
       `;
 

diff --git a/examples/typescript/index.tsx b/examples/typescript/index.tsx
@@ -19,7 +19,8 @@ import {
   CodePane,
   MarkdownSlide,
   MarkdownSlideSet,
-  Notes
+  Notes,
+  SlideLayout
 } from '../../src/index';
 import { createRoot } from 'react-dom/client';
 
@@ -261,6 +262,11 @@ const Presentation = () => (
         # This is the second slide of a Markdown Slide Set
         `}
     </MarkdownSlideSet>
+    <SlideLayout.List
+      title="Slide layouts!"
+      items={['Two-column', 'Lists', 'And more!']}
+      animateListItems
+    />
   </Deck>
 );