Expand slide background support (#849)

* Remove lineHeight unit from notes text * Expand slide background support
FormidableLabs · Mar 2, 2020 · fd532ee · fd532ee
1 parent 99f939b
commit fd532ee
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## UNRELEASED
+
+- Expand custom background support by adding `Background` props to the `Slide` component, along with `backgroundOpacity`
+
 ## 6.0.0-alpha.8
 
 - Update `examples/one-page.html` to `examples/js/index.js` with new script helper.

diff --git a/docs/content/api-reference.md b/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>
 

diff --git a/docs/content/props.md b/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

diff --git a/examples/js/index.js b/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

diff --git a/examples/one-page.html b/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]]}>

diff --git a/index.d.ts b/index.d.ts
@@ -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;

diff --git a/src/components/deck/presenter-deck.js b/src/components/deck/presenter-deck.js
@@ -164,7 +164,7 @@ const PresenterDeck = props => {
           <Timer />
         </Box>
         <NotesContainer>
-          <Text fontFamily={SYSTEM_FONT} lineHeight="180%" fontSize="1.5vw">
+          <Text fontFamily={SYSTEM_FONT} lineHeight="1.2" fontSize="1.5vw">
             {currentNotes}
           </Text>
         </NotesContainer>

diff --git a/src/components/slide.js b/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;