feat(profile): add styled-system margin props

src/components/profile/profile.component.js

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import classNames from "classnames";
 import { acronymize } from "../../utils/ether/ether";
 import tagComponent from "../../utils/helpers/tags/tags";
@@ -10,6 +11,11 @@ import {
   ProfileAvatarStyle,
   ProfileEmailStyle,
 } from "./profile.style";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 class Profile extends React.Component {
   /** Determines whether a `src` prop has been supplied */
@@ -28,6 +34,10 @@ class Profile extends React.Component {
     return acronymize(this.props.name);
   }
 
+  get marginProps() {
+    return filterStyledSystemMarginProps(this.props);
+  }
+
   /** Returns the avatar portion of the profile. */
   get avatar() {
     if (this.hasSrc) {
@@ -72,6 +82,7 @@ class Profile extends React.Component {
         className={this.classes}
         hasSrc={this.hasSrc}
         {...tagComponent("profile", this.props)}
+        {...this.marginProps}
       >
         {this.avatar}
         {this.text}
@@ -81,6 +92,7 @@ class Profile extends React.Component {
 }
 
 Profile.propTypes = {
+  ...marginPropTypes,
   /** [Legacy] A custom class name for the component */
   className: PropTypes.string,
   /** Custom source URL */

src/components/profile/profile.spec.js

@@ -15,7 +15,10 @@ import {
   ProfileAvatarStyle,
 } from "./profile.style";
 
-import { assertStyleMatch } from "../../__spec_helper__/test-utils";
+import {
+  assertStyleMatch,
+  testStyledSystemMargin,
+} from "../../__spec_helper__/test-utils";
 
 describe("Profile", () => {
   let instance;
@@ -141,3 +144,9 @@ describe("ProfileDetailStyle", () => {
     });
   });
 });
+
+describe("styled-system", () => {
+  testStyledSystemMargin((props) => (
+    <Profile name="profile" email="foo" {...props} />
+  ));
+});

src/components/profile/profile.stories.mdx

@@ -1,4 +1,5 @@
 import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import StyledSystemProps from "../../../.storybook/utils/styled-system-props";
 
 import Profile from ".";
 
@@ -70,4 +71,4 @@ To use an image, simply pass any valid image URL as a `src` prop.
 ## Props
 
 ### Profile
-<Props of={Profile} />
+<StyledSystemProps of={Profile} noHeader margin />

src/components/profile/profile.style.js

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { margin } from "styled-system";
 import Portrait from "../portrait";
 import baseTheme from "../../style/themes/base";
 import profileConfigSizes from "./profile.config";
@@ -21,6 +22,8 @@ const ProfileStyle = styled.div`
     `};
 
   display: ${({ hasSrc }) => (hasSrc ? "flex" : "")};
+
+  ${margin}
 `;
 
 const ProfileDetailsStyle = styled.div`