refactor(POC): make changes requested in POC comments - tbs

Author: DipperTheDan

docs/styled-system-replacement-poc.mdx

@@ -18,7 +18,7 @@ By creating custom style functions using just plain old JavaScript, we can tailo
 
 ## Implementation
 
-The implementation involves creating utility functions that mimic the behavior of `styled-system` for common use cases, such as spacing, layout, and flexbox.
+The implementation involves creating utility functions that mimic the behaviour of `styled-system` for common use cases, such as spacing, layout, and flexbox.
 These functions will parse props and apply styles directly to components without the overhead of a full library.
 
 For now, we have created utilities for spacing props (margin, padding), layout and flexbox as a starting point. These have been selected as

src/__spec_helper__/__internal__/test-utils.ts

@@ -280,10 +280,14 @@ const testStyledPadding = (
     'when a custom spacing is specified using the "%s" styled props',
     (styledProp, propName) => {
       it(`should set ${propName} styling correctly`, () => {
-        const props = { [styledProp]: 3 };
+        const props = { [styledProp]: 2 };
         render(component({ ...props }));
 
-        assertStyleMatch({ [propName]: "24px" }, elementQuery(), assertOpts);
+        assertStyleMatch(
+          { [propName]: "var(--spacing200)" },
+          elementQuery(),
+          assertOpts,
+        );
       });
     },
   );
@@ -299,10 +303,14 @@ const testStyledMargin = (
     'when a custom spacing is specified using the "%s" styled props',
     (styledProp, propName) => {
       it(`should set ${propName} styling correctly`, () => {
-        const props = { [styledProp]: 3 };
+        const props = { [styledProp]: 2 };
         render(component({ ...props }));
 
-        assertStyleMatch({ [propName]: "24px" }, elementQuery(), assertOpts);
+        assertStyleMatch(
+          { [propName]: "var(--spacing200)" },
+          elementQuery(),
+          assertOpts,
+        );
       });
     },
   );

src/components/dips-box/dips-box.stories.tsx

@@ -30,7 +30,7 @@ export const Spacing: Story = () => {
         Margin Left and Padding Top String
       </DipsBox>
 
-      <DipsBox ml="XS" pt="L">
+      <DipsBox ml="var(--spacing300)" pt="var(--spacing600)">
         Margin Left and Padding Top String
       </DipsBox>
     </>

src/components/dips-box/dips-box.test.tsx

@@ -7,6 +7,7 @@ import {
   testStyledPadding,
 } from "../../__spec_helper__/__internal__/test-utils";
 import DipsBox from "./dips-box.component";
+import CarbonProvider from "../carbon-provider";
 
 describe("DipsBox", () => {
   it("renders without crashing", () => {
@@ -24,23 +25,39 @@ describe("DipsBox", () => {
   });
 
   testStyledPadding(
-    (props) => <DipsBox data-role="box" {...props} />,
+    (props) => (
+      <CarbonProvider>
+        <DipsBox data-role="box" {...props} />
+      </CarbonProvider>
+    ),
     () => screen.getByTestId("box"),
   );
 
   testStyledMargin(
-    (props) => <DipsBox data-role="box" {...props} />,
+    (props) => (
+      <CarbonProvider>
+        <DipsBox data-role="box" {...props} />
+      </CarbonProvider>
+    ),
     () => screen.getByTestId("box"),
   );
 
   testStyledFlexBox(
-    (props) => <DipsBox data-role="box" {...props} />,
+    (props) => (
+      <CarbonProvider>
+        <DipsBox data-role="box" {...props} />
+      </CarbonProvider>
+    ),
     () => screen.getByTestId("box"),
   );
 
   // Layout props are not fully supported so only test those that are.
   testStyledLayout(
-    (props) => <DipsBox data-role="box" {...props} />,
+    (props) => (
+      <CarbonProvider>
+        <DipsBox data-role="box" {...props} />
+      </CarbonProvider>
+    ),
     () => screen.getByTestId("box"),
   );
 });

src/components/dips-box/utils/spacing-types.ts

@@ -52,36 +52,6 @@ export interface MarginProps {
   marginLeft?: string | number;
 }
 
-// Size range from 3XS to 4XL. "none" added to allow zero spacing.
-export type SpacingSize =
-  | "none"
-  | "3XS"
-  | "2XS"
-  | "XS"
-  | "S"
-  | "M"
-  | "L"
-  | "XL"
-  | "2XL"
-  | "3XL"
-  | "4XL";
-
-// Mapping of size to multiplier value for spacing calculations
-// 3XS would be 1 * base spacing unit, 2XS would be 2 * base spacing unit, etc.
-export const spacingSizeMap: Record<SpacingSize, number> = {
-  none: 0,
-  "3XS": 1,
-  "2XS": 2,
-  XS: 3,
-  S: 4,
-  M: 5,
-  L: 6,
-  XL: 7,
-  "2XL": 8,
-  "3XL": 9,
-  "4XL": 10,
-};
-
 export interface FlexboxProps {
   /** Short hand `align-content` property */
   alignContent?: string;
@@ -141,7 +111,3 @@ export interface LayoutProps {
   /** Short hand `aspect-ratio` property */
   aspectRatio?: string;
 }
-
-export interface MaxWidthProps {
-  maxWidth?: string;
-}