feat(loader): add styled-system

src/components/loader/loader.component.js

@@ -1,13 +1,24 @@
 import React from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import tagComponent from "../../utils/helpers/tags";
 import OptionsHelper from "../../utils/helpers/options-helper";
 import StyledLoader from "./loader.style";
 import StyledLoaderSquare from "./loader-square.style";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const Loader = (props) => {
+  const marginProps = filterStyledSystemMarginProps(props);
   return (
-    <StyledLoader {...props} {...tagComponent("loader", props)}>
+    <StyledLoader
+      {...props}
+      {...tagComponent("loader", props)}
+      {...marginProps}
+    >
       <StyledLoaderSquare {...props} />
       <StyledLoaderSquare {...props} />
       <StyledLoaderSquare {...props} />
@@ -22,6 +33,7 @@ Loader.defaultProps = {
 };
 
 Loader.propTypes = {
+  ...marginPropTypes,
   /** Size of the loader. */
   size: PropTypes.oneOf(OptionsHelper.sizesBinary),
   /** Applies white color. */

src/components/loader/loader.spec.js

@@ -1,7 +1,10 @@
 import React from "react";
 import TestRenderer from "react-test-renderer";
 import { shallow } from "enzyme";
-import { assertStyleMatch } from "../../__spec_helper__/test-utils";
+import {
+  assertStyleMatch,
+  testStyledSystemMargin,
+} from "../../__spec_helper__/test-utils";
 import "jest-styled-components";
 import Loader from "./loader.component";
 import StyledLoader from "./loader.style";
@@ -16,6 +19,9 @@ function renderStyles(props) {
 
 describe("Loader", () => {
   let wrapper;
+
+  testStyledSystemMargin((props) => <Loader {...props} />);
+
   it("renders as expected", () => {
     assertStyleMatch(
       {

src/components/loader/loader.stories.mdx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import Loader from '.';
 import Button from '../button';
+import StyledSystemProps from "../../../.storybook/utils/styled-system-props";
 
 <Meta title="Design System/Loader" parameters={{ info: { disable: true }, chromatic: { disable: true }}} />
 
@@ -69,4 +70,4 @@ please remember to pass the `isInsideButton` prop to the `Loader` component.
 ## Props
 
 ### Loader
-<Props of={Loader} />
+<StyledSystemProps of={Loader} noHeader margin />

src/components/loader/loader.style.js

@@ -1,8 +1,15 @@
 import styled from "styled-components";
+import { margin } from "styled-system";
+import { baseTheme } from "../../style/themes";
 
 const StyledLoader = styled.div`
+  ${margin}
   text-align: center;
   white-space: nowrap;
 `;
 
+StyledLoader.defaultProps = {
+  theme: baseTheme,
+};
+
 export default StyledLoader;