Merge pull request #3881 from Sage/FE-3567-add-styled-system-to-preview

feat(preview): add styled system margin props to Preview - FE-3567

src/components/preview/__snapshots__/preview.spec.js.snap

@@ -15,16 +15,20 @@ exports[`Preview when given a width and height renders with the given width and
   margin-top: 3px;
 }
 
-<span
-  className="c0 c1"
-  data-component="preview"
-  style={
-    Object {
-      "height": "20px",
-      "width": "10px",
+<div
+  className=""
+>
+  <span
+    className="c0 c1"
+    data-component="preview"
+    style={
+      Object {
+        "height": "20px",
+        "width": "10px",
+      }
     }
-  }
-/>
+  />
+</div>
 `;
 
 exports[`Preview when given children but a truthy loading prop will render the placeholder 1`] = `
@@ -42,21 +46,35 @@ exports[`Preview when given children but a truthy loading prop will render the p
   margin-top: 3px;
 }
 
-<span
-  className="c0 c1"
-  data-component="preview"
-  style={
-    Object {
-      "height": undefined,
-      "width": undefined,
+<div
+  className=""
+>
+  <span
+    className="c0 c1"
+    data-component="preview"
+    style={
+      Object {
+        "height": undefined,
+        "width": undefined,
+      }
     }
-  }
-/>
+  />
+</div>
 `;
 
-exports[`Preview when given children will render the children 1`] = `"This is some text"`;
+exports[`Preview when given children will render the children 1`] = `
+<div
+  className=""
+>
+  This is some text
+</div>
+`;
 
-exports[`Preview when given no children and a falsy loading prop will render nothing 1`] = `null`;
+exports[`Preview when given no children and a falsy loading prop will render nothing 1`] = `
+<div
+  className=""
+/>
+`;
 
 exports[`Preview when given no children will render the placeholder 1`] = `
 .c1 {
@@ -73,21 +91,24 @@ exports[`Preview when given no children will render the placeholder 1`] = `
   margin-top: 3px;
 }
 
-<span
-  className="c0 c1"
-  data-component="preview"
-  style={
-    Object {
-      "height": undefined,
-      "width": undefined,
+<div
+  className=""
+>
+  <span
+    className="c0 c1"
+    data-component="preview"
+    style={
+      Object {
+        "height": undefined,
+        "width": undefined,
+      }
     }
-  }
-/>
+  />
+</div>
 `;
 
 exports[`Preview when multi line renders multi previews, the last being 80% width 1`] = `
-Array [
-  .c1 {
+.c1 {
   -webkit-animation: blNbyL 2s ease infinite;
   animation: blNbyL 2s ease infinite;
   background: #BFCCD2;
@@ -101,7 +122,10 @@ Array [
   margin-top: 3px;
 }
 
-<span
+<div
+  className=""
+>
+  <span
     className="c0 c1"
     data-component="preview"
     style={
@@ -110,22 +134,8 @@ Array [
         "width": undefined,
       }
     }
-  />,
-  .c1 {
-  -webkit-animation: blNbyL 2s ease infinite;
-  animation: blNbyL 2s ease infinite;
-  background: #BFCCD2;
-  display: block;
-  height: 15px;
-  opacity: 0.6;
-  width: 100%;
-}
-
-.c1 + .c0 {
-  margin-top: 3px;
-}
-
-<span
+  />
+  <span
     className="c0 c1"
     data-component="preview"
     style={
@@ -134,22 +144,8 @@ Array [
         "width": undefined,
       }
     }
-  />,
-  .c1 {
-  -webkit-animation: blNbyL 2s ease infinite;
-  animation: blNbyL 2s ease infinite;
-  background: #BFCCD2;
-  display: block;
-  height: 15px;
-  opacity: 0.6;
-  width: 100%;
-}
-
-.c1 + .c0 {
-  margin-top: 3px;
-}
-
-<span
+  />
+  <span
     className="c0 c1"
     data-component="preview"
     style={
@@ -158,6 +154,6 @@ Array [
         "width": "80%",
       }
     }
-  />,
-]
+  />
+</div>
 `;

src/components/preview/preview.component.js

@@ -1,18 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+
 import tagComponent from "../../utils/helpers/tags";
-import PreviewStyle from "./preview.style";
+import PreviewStyle, { StyledPreview } from "./preview.style";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const Preview = (props) => {
+  const marginProps = filterStyledSystemMarginProps(props);
+
   if (isLoading(props.loading, props.children)) {
     const previews = [];
     for (let i = 1; i <= props.lines; i++) {
       previews.push(createPreview(props, i));
     }
-    return previews;
+    return <StyledPreview {...marginProps}>{previews}</StyledPreview>;
   }
 
-  return props.children;
+  return <StyledPreview {...marginProps}>{props.children}</StyledPreview>;
 };
 
 function isLoading(loading, children) {
@@ -41,6 +50,7 @@ function createPreview(allProps, index) {
 }
 
 Preview.propTypes = {
+  ...marginPropTypes,
   /** Children content to render in the component. */
   children: PropTypes.node,
   /** A custom height to be applied to the component. */

src/components/preview/preview.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { MarginSpacingProps } from "../../utils/helpers/options-helper";
+
+export interface PreviewProps extends MarginSpacingProps {
+  children?: React.ReactNode;
+  height?: string;
+  lines?: number;
+  loading?: boolean;
+  width?: string;
+}
+
+declare const Preview: React.FunctionComponent<PreviewProps>;
+
+export default Preview;

src/components/preview/preview.spec.js

@@ -2,6 +2,7 @@ import React from "react";
 import TestRenderer from "react-test-renderer";
 import "jest-styled-components";
 import Preview from "./preview.component";
+import { testStyledSystemMargin } from "../../__spec_helper__/test-utils";
 
 const render = (children, props) => {
   return TestRenderer.create(<Preview {...props}>{children}</Preview>);
@@ -49,4 +50,9 @@ describe("Preview", () => {
       expect(wrapper).toMatchSnapshot();
     });
   });
+
+  describe("styled system", () => {
+    testStyledSystemMargin((props) => <Preview {...props} />);
+    testStyledSystemMargin((props) => <Preview {...props} loading />);
+  });
 });

src/components/preview/preview.stories.mdx

@@ -1,6 +1,7 @@
 import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
 import { ArgsTable } from "@storybook/components";
 import PreviewComponent from "./preview.component";
+import StyledSystemProps from "../../../.storybook/utils/styled-system-props";
 
 <Meta title="Preview" parameters={{ info: { disable: true } }} />
 
@@ -9,6 +10,7 @@ import PreviewComponent from "./preview.component";
 Applies a preview loading state animation.
 
 ## Contents
+
 - [Quick Start](#quick-start)
 - [Examples](#examples)
 - [Props](#props)
@@ -19,7 +21,7 @@ Applies a preview loading state animation.
 import Preview from "carbon-react/lib/components/preview";
 ```
 
-## Examples 
+## Examples
 
 ### Default
 
@@ -67,6 +69,8 @@ import Preview from "carbon-react/lib/components/preview";
 
 ### Preview
 
+<StyledSystemProps margin noHeader />
+
 <ArgsTable
   rows={[
     {

src/components/preview/preview.style.js

@@ -1,4 +1,5 @@
 import styled, { keyframes } from "styled-components";
+import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 
 const shimmer = keyframes`
@@ -20,6 +21,14 @@ const PreviewStyle = styled.span`
   }
 `;
 
+export const StyledPreview = styled.div`
+  ${margin}
+`;
+
+StyledPreview.defaultProps = {
+  theme: baseTheme,
+};
+
 PreviewStyle.defaultProps = {
   theme: baseTheme,
 };