Merge branch 'master' into no_skip_ci

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [68.22.0](https://github.com/Sage/carbon/compare/v68.21.0...v68.22.0) (2021-04-15)
+
+
+### Features
+
+* **step-sequence:** add styled system margin props to StepSequence ([8415302](https://github.com/Sage/carbon/commit/84153020d27f9ae28c1dba4f0a49ce5015696c9a))
+
 ## [68.21.0](https://github.com/Sage/carbon/compare/v68.20.1...v68.21.0) (2021-04-15)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "68.21.0",
+  "version": "68.22.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {

src/components/step-sequence/step-sequence.component.js

@@ -1,7 +1,14 @@
 import PropTypes from "prop-types";
 import React from "react";
+import styledSystemPropTypes from "@styled-system/prop-types";
+
 import StepSequenceStyle from "./step-sequence.style";
 import OptionsHelper from "../../utils/helpers/options-helper";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const StepSequence = (props) => {
   return (
@@ -21,6 +28,7 @@ const StepSequence = (props) => {
 };
 
 StepSequence.propTypes = {
+  ...marginPropTypes,
   /** Step sequence items to be rendered */
   children: PropTypes.node,
   /** The direction that step sequence items should be rendered */

src/components/step-sequence/step-sequence.spec.js

@@ -1,9 +1,9 @@
 import React from "react";
-// import { shallow } from 'enzyme';
 import TestRenderer from "react-test-renderer";
 import StepSequence from "./step-sequence.component";
 import StepSequenceItem from "./step-sequence-item/step-sequence-item.component";
 import mintTheme from "../../style/themes/mint";
+import { testStyledSystemMargin } from "../../__spec_helper__/test-utils";
 
 describe("StepSequence", () => {
   const wrapper = (props) =>
@@ -30,4 +30,12 @@ describe("StepSequence", () => {
       wrapper({ theme: mintTheme, orientation: "vertical" })
     ).toMatchSnapshot();
   });
+
+  describe("styled system", () => {
+    testStyledSystemMargin((props) => (
+      <StepSequence {...props}>
+        <div>test</div>
+      </StepSequence>
+    ));
+  });
 });

src/components/step-sequence/step-sequence.stories.mdx

@@ -1,10 +1,8 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
-import { StepSequence, StepSequenceItem } from './';
+import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import { StepSequence, StepSequenceItem } from "./";
+import StyledSystemProps from "../../../.storybook/utils/styled-system-props";
 
-<Meta
-  title="Step Sequence"
-  parameters={{ info: { disable: true }}}
-/>
+<Meta title="Step Sequence" parameters={{ info: { disable: true } }} />
 
 # StepSequence
 
@@ -17,15 +15,20 @@ Try to keep label text for each step as short as possible.
 For users on small screens or instances where horizontal space is limited, use the vertical version of this component.
 
 ## Contents
+
 - [Quick Start](#quick-start)
 - [Examples](#examples)
 - [Props](#props)
 
 ## Quick Start
 
 ```javascript
-import { StepSequence, StepSequenceItem } from "carbon-react/lib/components/step-sequence";
+import {
+  StepSequence,
+  StepSequenceItem,
+} from "carbon-react/lib/components/step-sequence";
 ```
+
 ## Examples
 
 ### Default
@@ -34,47 +37,47 @@ import { StepSequence, StepSequenceItem } from "carbon-react/lib/components/step
   <Story name="default">
     <StepSequence>
       <StepSequenceItem
-        aria-label='Step 1 of 5'
-        hiddenCompleteLabel='Complete'
-        hiddenCurrentLabel='Current'
-        indicator='1'
-        status='complete'
+        aria-label="Step 1 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="1"
+        status="complete"
       >
         Name
       </StepSequenceItem>
       <StepSequenceItem
-        aria-label='Step 2 of 5'
-        hiddenCompleteLabel='Complete'
-        hiddenCurrentLabel='Current'
-        indicator='2'
-        status='complete'
+        aria-label="Step 2 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="2"
+        status="complete"
       >
         Delivery Address
       </StepSequenceItem>
       <StepSequenceItem
-        aria-label='Step 3 of 5'
-        hiddenCompleteLabel='Complete'
-        hiddenCurrentLabel='Current'
-        indicator='3'
-        status='current'
+        aria-label="Step 3 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="3"
+        status="current"
       >
         Delivery Details
       </StepSequenceItem>
       <StepSequenceItem
-        aria-label='Step 4 of 5'
-        hiddenCompleteLabel='Complete'
-        hiddenCurrentLabel='Current'
-        indicator='4'
-        status='incomplete'
+        aria-label="Step 4 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="4"
+        status="incomplete"
       >
         Payment
       </StepSequenceItem>
       <StepSequenceItem
-        aria-label='Step 5 of 5'
-        hiddenCompleteLabel='Complete'
-        hiddenCurrentLabel='Current'
-        indicator='5'
-        status='incomplete'
+        aria-label="Step 5 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="5"
+        status="incomplete"
       >
         Confirm
       </StepSequenceItem>
@@ -88,47 +91,47 @@ import { StepSequence, StepSequenceItem } from "carbon-react/lib/components/step
   <Story name="vertical">
     <StepSequence orientation="vertical">
       <StepSequenceItem
-        aria-label='Step 1 of 5'
-        hiddenCompleteLabel='Complete'
-        hiddenCurrentLabel='Current'
-        indicator='1'
-        status='complete'
+        aria-label="Step 1 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="1"
+        status="complete"
       >
         Name
       </StepSequenceItem>
       <StepSequenceItem
-        aria-label='Step 2 of 5'
-        hiddenCompleteLabel='Complete'
-        hiddenCurrentLabel='Current'
-        indicator='2'
-        status='complete'
+        aria-label="Step 2 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="2"
+        status="complete"
       >
         Delivery Address
       </StepSequenceItem>
       <StepSequenceItem
-        aria-label='Step 3 of 5'
-        hiddenCompleteLabel='Complete'
-        hiddenCurrentLabel='Current'
-        indicator='3'
-        status='current'
+        aria-label="Step 3 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="3"
+        status="current"
       >
         Delivery Details
       </StepSequenceItem>
       <StepSequenceItem
-        aria-label='Step 4 of 5'
-        hiddenCompleteLabel='Complete'
-        hiddenCurrentLabel='Current'
-        indicator='4'
-        status='incomplete'
+        aria-label="Step 4 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="4"
+        status="incomplete"
       >
         Payment
       </StepSequenceItem>
       <StepSequenceItem
-        aria-label='Step 5 of 5'
-        hiddenCompleteLabel='Complete'
-        hiddenCurrentLabel='Current'
-        indicator='5'
-        status='incomplete'
+        aria-label="Step 5 of 5"
+        hiddenCompleteLabel="Complete"
+        hiddenCurrentLabel="Current"
+        indicator="5"
+        status="incomplete"
       >
         Confirm
       </StepSequenceItem>
@@ -139,7 +142,9 @@ import { StepSequence, StepSequenceItem } from "carbon-react/lib/components/step
 ## Props
 
 ### StepSequence
-<Props of={StepSequence} />
+
+<StyledSystemProps of={StepSequence} margin noHeader />
 
 ### StepSequenceItem
-<Props of={StepSequenceItem} />
+
+<Props of={StepSequenceItem} />

src/components/step-sequence/step-sequence.style.js

@@ -1,4 +1,6 @@
 import styled, { css } from "styled-components";
+import { margin } from "styled-system";
+import { baseTheme } from "../../style/themes";
 
 const StepSequenceStyle = styled.ol`
   display: flex;
@@ -12,6 +14,11 @@ const StepSequenceStyle = styled.ol`
       flex-direction: column;
       padding: 0;
     `};
+  ${margin}
 `;
 
+StepSequenceStyle.defaultProps = {
+  theme: baseTheme,
+};
+
 export default StepSequenceStyle;