feat: rename ActionIncomplet to CheckoutActionInComplete

package/src/components/ActionIncomplete/v1/ActionIncomplete.js → package/src/components/CheckoutActionIncomplete/v1/CheckoutActionIncomplete.js

@@ -3,12 +3,13 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { applyTheme } from "../../../utils";
 
-const ActionIncompleteContainer = styled.div`
+const CheckoutActionIncompleteContainer = styled.div`
   color: ${applyTheme("color_black35")};
   font-family: ${applyTheme("font_family")};
+  font-size: ${applyTheme("font_size_small")}
 `;
 
-class ActionIncomplete extends Component {
+class CheckoutActionIncomplete extends Component {
   static propTypes = {
     /**
      * The incomplete action name
@@ -24,12 +25,12 @@ class ActionIncomplete extends Component {
     const { label, stepNumber } = this.props;
 
     return (
-      <ActionIncompleteContainer>
+      <CheckoutActionIncompleteContainer>
         <span>{stepNumber}.&nbsp;</span>
         <span>{label}</span>
-      </ActionIncompleteContainer>
+      </CheckoutActionIncompleteContainer>
     );
   }
 }
 
-export default ActionIncomplete;
+export default CheckoutActionIncomplete;

package/src/components/CheckoutActionIncomplete/v1/CheckoutActionIncomplete.md

@@ -0,0 +1,9 @@
+### CheckoutActionIncomplete
+
+#### Overview
+The `CheckoutActionIncomplete` component will be used to display an incomplete step in the checkout process.
+
+#### Basic usage
+```jsx
+<CheckoutActionIncomplete label="Shipping information" stepNumber={2}/>
+```

package/src/components/ActionIncomplete/v1/ActionIncomplete.test.js → package/src/components/CheckoutActionIncomplete/v1/CheckoutActionIncomplete.test.js

@@ -1,10 +1,10 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import ActionIncomplete from "./ActionIncomplete";
+import CheckoutActionIncomplete from "./CheckoutActionIncomplete";
 
 test("basic snapshot", () => {
   const component = renderer.create((
-    <ActionIncomplete label="Shipping information" stepNumber={2} />
+    <CheckoutActionIncomplete label="Shipping information" stepNumber={2} />
   ));
 
   const tree = component.toJSON();

package/src/components/CheckoutActionIncomplete/v1/index.js

@@ -0,0 +1 @@
+export { default } from "./CheckoutActionIncomplete";

styleguide.config.js

@@ -284,7 +284,7 @@ module.exports = {
           name: "Cart"
         }),
         generateSection({
-          componentNames: ["ActionIncomplete"],
+          componentNames: ["CheckoutActionIncomplete"],
           content: "styleguide/src/sections/Checkout.md",
           name: "Checkout"
         }),