Expand slide background support

Author: treyhoover

docs/content/api-reference.md

@@ -31,11 +31,21 @@ Wraps the entire presentation and carries most of the overarching slide logic, l
 
 ### Slide
 
-Wraps a single slide within your presentation; identifies what is contained to a single view. The only prop available for Slide is a transition effect specific to this slide. It will override the Deck-specified transition.
-
-| Props            | Type                                                                       |
-| ---------------- | -------------------------------------------------------------------------- |
-| transitionEffect | "fade", "slide", "none", or [custom transition object](#transition-object) |
+Wraps a single slide within your presentation; identifies what is contained to a single view. If a transition effect is applied to this slide, it will override the Deck-specified transition.
+
+| Props              | Type                                                                       |
+| -------------------| -------------------------------------------------------------------------- |
+| backgroundColor    | PropTypes.string                                                           |
+| backgroundImage    | PropTypes.string                                                           |
+| backgroundOpacity  | PropTypes.number                                                           |
+| backgroundPosition | PropTypes.string                                                           |
+| backgroundRepeat   | PropTypes.string                                                           |
+| backgroundSize     | PropTypes.string                                                           |
+| scaleRatio         | PropTypes.number                                                           |
+| slideNum           | PropTypes.number                                                           |
+| template           | PropTypes.func                                                             |
+| textColor          | PropTypes.string                                                           |
+| transitionEffect   | "fade", "slide", "none", or [custom transition object](#transition-object) |
 
 <a name="typography-tags"></a>
 

docs/content/props.md

@@ -34,6 +34,19 @@ const transition = {
 };
 ```
 
+<a name="background"></a>
+
+## Background
+
+**Background** props used by [`Slide`](/docs/api-reference#slide).
+
+| Name                      | PropType         | Description                                             | Example                          |
+| ------------------------- | ---------------- | ------------------------------------------------------- | -------------------------------- |
+| `backgroundImage`         | PropTypes.string | Set CSS `backgroundImage`                               | `url('...')` or `require(...)`   |
+| `backgroundSize`          | PropTypes.string | Set CSS `backgroundSize`                                | `cover`
+| `backgroundPosition`      | PropTypes.string | Set CSS `backgroundPosition`                            | `center`
+| `backgroundRepeat`        | PropTypes.string | Set CSS `backgroundRepeat`                              | `no-repeat`
+
 <a name="color"></a>
 
 ## Color

examples/js/index.js

@@ -21,6 +21,7 @@ import {
   SpectacleLogo,
   Stepper,
   Text,
+  UnorderedList,
   indentNormalizer
 } from 'spectacle';
 
@@ -128,6 +129,34 @@ const Presentation = () => (
         </p>
       </Notes>
     </Slide>
+    <Slide
+      backgroundColor="tertiary"
+      backgroundImage="url(https://github.com/FormidableLabs/dogs/blob/master/beau.jpg?raw=true)"
+      backgroundOpacity={0.5}
+    >
+      <Heading>Custom Backgrounds</Heading>
+
+      <UnorderedList>
+        <ListItem>
+          <CodeSpan>backgroundColor</CodeSpan>
+        </ListItem>
+        <ListItem>
+          <CodeSpan>backgroundImage</CodeSpan>
+        </ListItem>
+        <ListItem>
+          <CodeSpan>backgroundOpacity</CodeSpan>
+        </ListItem>
+        <ListItem>
+          <CodeSpan>backgroundSize</CodeSpan>
+        </ListItem>
+        <ListItem>
+          <CodeSpan>backgroundPosition</CodeSpan>
+        </ListItem>
+        <ListItem>
+          <CodeSpan>backgroundRepeat</CodeSpan>
+        </ListItem>
+      </UnorderedList>
+    </Slide>
     <Slide transitionEffect="slide">
       <Heading>Code Blocks</Heading>
       <Stepper

examples/one-page.html

@@ -37,6 +37,7 @@
         SpectacleLogo,
         Stepper,
         Text,
+        UnorderedList,
         indentNormalizer
       } = Spectacle;
 
@@ -131,6 +132,29 @@
               <p>Notes are shown in presenter mode. Open up localhost:3000/?presenterMode=true to see them.</p>
             </${Notes}>
           </${Slide}>
+          <${Slide} backgroundColor="tertiary" backgroundImage="url(https://github.com/FormidableLabs/dogs/blob/master/beau.jpg?raw=true)" backgroundOpacity=${0.5}>
+            <${Heading}>Custom Backgrounds</${Heading}>
+            <${UnorderedList}>
+              <${ListItem}>
+                <${CodeSpan}>backgroundColor</${CodeSpan}>
+              </${ListItem}>
+              <${ListItem}>
+                <${CodeSpan}>backgroundImage</${CodeSpan}>
+              </${ListItem}>
+              <${ListItem}>
+                <${CodeSpan}>backgroundOpacity</${CodeSpan}>
+              </${ListItem}>
+              <${ListItem}>
+                <${CodeSpan}>backgroundSize</${CodeSpan}>
+              </${ListItem}>
+              <${ListItem}>
+                <${CodeSpan}>backgroundPosition</${CodeSpan}>
+              </${ListItem}>
+              <${ListItem}>
+                <${CodeSpan}>backgroundRepeat</${CodeSpan}>
+              </${ListItem}>
+            </${UnorderedList}>
+          </${Slide}>
           <${Slide} transitionEffect="slide">
             <${Heading}>Code Blocks</${Heading}>
             <${Stepper} defaultValue=${[]} values=${[[1, 1], [23, 25], [40, 42]]}>

index.d.ts

@@ -13,11 +13,11 @@ declare module 'spectacle' {
 
   export type TransitionEffect =
     | {
-        enter: Record<string, number | string>;
-        from: Record<string, number | string>;
-        leave: Record<string, number | string>;
-        config: Record<string, number | string>;
-      }
+      enter: Record<string, number | string>;
+      from: Record<string, number | string>;
+      leave: Record<string, number | string>;
+      config: Record<string, number | string>;
+    }
     | 'fade'
     | 'slide'
     | 'none';
@@ -35,7 +35,12 @@ declare module 'spectacle' {
   }>;
 
   export const Slide: React.FC<{
-    backgroundColor?: string;
+    backgroundColor?: PropTypes.string,
+    backgroundImage?: PropTypes.string,
+    backgroundOpacity?: PropTypes.number,
+    backgroundPosition?: PropTypes.string,
+    backgroundRepeat?: PropTypes.string,
+    backgroundSize?: PropTypes.string,
     children: React.ReactNode;
     scaleRatio?: number;
     textColor?: string;

src/components/slide.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import useSlide, { SlideContext } from '../hooks/use-slide';
 import styled, { ThemeContext, css } from 'styled-components';
-import { color, space } from 'styled-system';
+import { background, color, space } from 'styled-system';
 import useAutofillHeight from '../hooks/use-autofill-height';
 import { DeckContext } from '../hooks/use-deck';
 
@@ -17,6 +17,17 @@ const SlideContainer = styled('div')`
     height: 100vh;
     width: 100vw;
   }
+  &:before {
+    ${background};
+    content: ' ';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    opacity: ${({ backgroundOpacity }) => backgroundOpacity};
+  }
 `;
 
 const SlideWrapper = styled('div')(
@@ -67,6 +78,11 @@ const Slide = props => {
     children,
     slideNum,
     backgroundColor,
+    backgroundImage,
+    backgroundOpacity,
+    backgroundPosition,
+    backgroundRepeat,
+    backgroundSize,
     textColor,
     template,
     scaleRatio
@@ -161,6 +177,11 @@ const Slide = props => {
     <SlideContainer
       ref={slideRef}
       backgroundColor={state.printMode ? '#ffffff' : backgroundColor}
+      backgroundImage={state.printMode ? undefined : backgroundImage}
+      backgroundOpacity={backgroundOpacity}
+      backgroundPosition={backgroundPosition}
+      backgroundRepeat={backgroundRepeat}
+      backgroundSize={backgroundSize}
       style={transforms}
     >
       <TemplateWrapper ref={templateRef}>
@@ -181,6 +202,11 @@ const Slide = props => {
 
 Slide.propTypes = {
   backgroundColor: PropTypes.string,
+  backgroundImage: PropTypes.string,
+  backgroundOpacity: PropTypes.number,
+  backgroundPosition: PropTypes.string,
+  backgroundRepeat: PropTypes.string,
+  backgroundSize: PropTypes.string,
   children: PropTypes.node.isRequired,
   scaleRatio: PropTypes.number,
   slideNum: PropTypes.number,
@@ -198,7 +224,11 @@ Slide.propTypes = {
 
 Slide.defaultProps = {
   textColor: 'primary',
-  backgroundColor: 'tertiary'
+  backgroundColor: 'tertiary',
+  backgroundOpacity: 1,
+  backgroundPosition: 'center',
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: 'cover'
 };
 
 export default Slide;