From dca47cd45aed8e75bb0ebd253ae218f6b68b0e35 Mon Sep 17 00:00:00 2001
From: Daniel Dipper <daniel.dipper@sage.com>
Date: Fri, 9 Apr 2021 10:27:34 +0100
Subject: [PATCH] feat(note): add styled-system margin props

---
 .../note/__internal__/note.component.js          |  7 +++++++
 src/components/note/__internal__/note.d.ts       |  3 ++-
 src/components/note/__internal__/note.spec.js    | 16 +++++++++++++++-
 .../note/__internal__/note.stories.mdx           |  3 ++-
 src/components/note/__internal__/note.style.js   |  3 +++
 5 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/note/__internal__/note.component.js b/src/components/note/__internal__/note.component.js
index cf99f1988c..6452ab39ff 100644
--- a/src/components/note/__internal__/note.component.js
+++ b/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. */
diff --git a/src/components/note/__internal__/note.d.ts b/src/components/note/__internal__/note.d.ts
index 27fdf67ad3..09fa90e602 100644
--- a/src/components/note/__internal__/note.d.ts
+++ b/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;
diff --git a/src/components/note/__internal__/note.spec.js b/src/components/note/__internal__/note.spec.js
index 487a94cdf3..253c9571be 100644
--- a/src/components/note/__internal__/note.spec.js
+++ b/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();
diff --git a/src/components/note/__internal__/note.stories.mdx b/src/components/note/__internal__/note.stories.mdx
index a947263721..983a4754e0 100644
--- a/src/components/note/__internal__/note.stories.mdx
+++ b/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 />
diff --git a/src/components/note/__internal__/note.style.js b/src/components/note/__internal__/note.style.js
index f7e8e09d20..94fbf63b2c 100644
--- a/src/components/note/__internal__/note.style.js
+++ b/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 = {