feat(grouped-character): add styled-system margin support

Sage · May 18, 2021 · 04c5055 · 04c5055
1 parent 37d6ad0
commit 04c5055
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/src/__experimental__/components/grouped-character/grouped-character.component.js b/src/__experimental__/components/grouped-character/grouped-character.component.js
@@ -1,8 +1,15 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+
+import { filterStyledSystemMarginProps } from "../../../style/utils";
 import Textbox from "../textbox";
 import { generateGroups, toSum } from "./grouped-character.utils";
 
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
+
 const buildCustomTarget = ({ target }, value) => {
   const { name, id } = target;
   return {
@@ -107,6 +114,7 @@ const GroupedCharacter = ({
 };
 
 GroupedCharacter.propTypes = {
+  ...marginPropTypes,
   /** character to be used as separator - has to be a 1 character string */
   separator: (props, propName, componentName) => {
     if (typeof props[propName] !== "string" || props[propName].length > 1) {

diff --git a/src/__experimental__/components/grouped-character/grouped-character.spec.js b/src/__experimental__/components/grouped-character/grouped-character.spec.js
@@ -1,6 +1,9 @@
 import React from "react";
 import { mount } from "enzyme";
+
+import { testStyledSystemMargin } from "../../../__spec_helper__/test-utils";
 import GroupedCharacter from "./grouped-character.component";
+import FormFieldStyle from "../form-field/form-field.style";
 import Label from "../label";
 
 const mountComponent = (props) => mount(<GroupedCharacter {...props} />);
@@ -11,6 +14,13 @@ describe("GroupedCharacter", () => {
   const separator = "-";
   const valueString = "12345678";
 
+  testStyledSystemMargin(
+    (props) => <GroupedCharacter groups={[2, 2, 3]} separator="-" {...props} />,
+    undefined,
+    (wrapper) => wrapper.find(FormFieldStyle),
+    { modifier: "&&&" }
+  );
+
   describe("uncontrolled behaviour", () => {
     let instance, input, onChange;
     beforeEach(() => {

diff --git a/src/__experimental__/components/grouped-character/grouped-character.stories.mdx b/src/__experimental__/components/grouped-character/grouped-character.stories.mdx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
 
+import StyledSystemProps from "../../../../.storybook/utils/styled-system-props";
 import GroupedCharacter from ".";
 import { OriginalTextbox } from "../textbox";
 import Button from "../../../components/button";
@@ -18,6 +19,7 @@ Capture data with punctuation inside the field.
 Fields can have punctuation within them (most commonly characters like - or /). This gives the user a clue about the format accepted.
 
 ## Contents
+
 - [Quick Start](#quick-start)
 - [Examples](#examples)
 - [Props](#props)
@@ -27,6 +29,7 @@ Fields can have punctuation within them (most commonly characters like - or /).
 ```javascript
 import GroupedCharacter from "carbon-react/lib/__experimental__/components/grouped-character";
 ```
+
 ## Examples
 
 ### Default
@@ -75,7 +78,7 @@ import GroupedCharacter from "carbon-react/lib/__experimental__/components/group
 ### AutoFocus
 
 <Preview>
-  <Story name="autoFocus" parameters={{ chromatic: { disable: true }}}>
+  <Story name="autoFocus" parameters={{ chromatic: { disable: true } }}>
     <GroupedCharacter
       label="GroupedCharacter"
       value="1231231"
@@ -90,16 +93,16 @@ import GroupedCharacter from "carbon-react/lib/__experimental__/components/group
 
 <Preview>
   <Story name="labelAlign">
-     {() => 
-      ['right', 'left'].map((alignment) => (
+    {() =>
+      ["right", "left"].map((alignment) => (
         <GroupedCharacter
           label="GroupedCharacter"
           value="1231231"
           groups={[2, 2, 3]}
           separator="-"
           labelInline
           inputWidth={50}
-          key={alignment} 
+          key={alignment}
           labelAlign={alignment}
         />
       ))
@@ -163,7 +166,7 @@ import GroupedCharacter from "carbon-react/lib/__experimental__/components/group
 ### With labelInline
 
 <Preview>
-  <Story name="with labelInline" parameters={{ chromatic: { disable: true }}}>
+  <Story name="with labelInline" parameters={{ chromatic: { disable: true } }}>
     <GroupedCharacter
       label="GroupedCharacter"
       value="1231231"
@@ -340,7 +343,7 @@ For more information check our [Validations](?path=/docs/documentation-validatio
 
 ### GroupedCharacter
 
-<Props of={GroupedCharacter} />
+<StyledSystemProps of={GroupedCharacter} noHeader margin />
 
 ### Textbox