feat(note): add styled-system margin props

src/components/note/__internal__/note.component.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Editor } from "draft-js";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import invariant from "invariant";
 import {
   StyledNote,
@@ -12,6 +13,11 @@ import {
 } from "./note.style.js";
 import StatusWithTooltip from "./status-with-tooltip";
 import { ActionPopover } from "../../action-popover";
+import { filterStyledSystemMarginProps } from "../../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const Note = ({
   noteContent,
@@ -74,6 +80,7 @@ const Note = ({
 };
 
 Note.propTypes = {
+  ...marginPropTypes,
   /**  The rich text content to display in the Note */
   noteContent: PropTypes.object.isRequired,
   /** Set a percentage-based width for the whole Note component, relative to its parent. */

src/components/note/__internal__/note.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { MarginSpacingProps } from '../../../utils/helpers/options-helper';
 
-export interface NoteProps {
+export interface NoteProps extends MarginSpacingProps {
    noteContent: object;
    width?: number;
    inlineControl?: React.ReactNode;

src/components/note/__internal__/note.spec.js

@@ -13,7 +13,10 @@ import {
 } from "./note.style";
 import { ActionPopover, ActionPopoverItem } from "../../action-popover";
 import StyledStatusIconWrapper from "./status-with-tooltip/status.style";
-import { assertStyleMatch } from "../../../__spec_helper__/test-utils";
+import {
+  assertStyleMatch,
+  testStyledSystemMargin,
+} from "../../../__spec_helper__/test-utils";
 
 function render(props = {}) {
   const defaultProps = {
@@ -30,6 +33,17 @@ function render(props = {}) {
 }
 
 describe("Note", () => {
+  describe("styled-system", () => {
+    testStyledSystemMargin((props) => (
+      <Note
+        {...props}
+        name="Carbon"
+        createdDate="23 May 2020, 12:08 PM"
+        noteContent={EditorState.createEmpty()}
+      />
+    ));
+  });
+
   describe("Styling", () => {
     it("matches the expected", () => {
       const wrapper = render();

src/components/note/__internal__/note.stories.mdx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import StyledSystemProps from "../../../../.storybook/utils/styled-system-props";
 import Note from './note.component';
 import {
   ActionPopover,
@@ -204,4 +205,4 @@ An optional status can be provided using the `status` prop.
 ## Props
 
 ### Note
-<Props of={Note} />
+<StyledSystemProps of={Note} noHeader margin />

src/components/note/__internal__/note.style.js

@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
+import { margin } from "styled-system";
 import baseTheme from "../../../style/themes/base";
 
 const StyledNoteContent = styled.div`
@@ -95,6 +96,8 @@ const StyledNote = styled.div`
       width: auto;
     }
   `}
+
+  ${margin}
 `;
 
 StyledNoteContent.defaultProps = {