refactor(design-system): migrate spacings components

commercetools · Dec 17, 2024 · 45288e9 · 45288e9
1 parent 4a1cf34
commit 45288e9
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 45 deletions.
diff --git a/packages/components/spacings/spacings-inline/src/inline.tsx b/packages/components/spacings/spacings-inline/src/inline.tsx
@@ -29,32 +29,41 @@ export type TScale = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 
 export type TInlineProps = {
   /** sets the amount of spacing between individual items */
-  scale: TScale;
+  scale?: TScale;
   /**
    * sets the `align-self` value on all direct children.
    * https://developer.mozilla.org/en-US/docs/Web/CSS/align-items */
-  alignItems: TAlignItem;
+  alignItems?: TAlignItem;
   /**
    * defines how the browser distributes space between and around content items along the main-axis.
    * https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content */
-  justifyContent: TJustifyContent;
+  justifyContent?: TJustifyContent;
   children: ReactNode;
 };
 
-const Inline = (props: TInlineProps) => (
-  <span css={getStyles(props)} {...filterDataAttributes(props)}>
+const Inline = ({
+  scale = 's',
+  alignItems = 'flex-start',
+  justifyContent = 'flex-start',
+  ...props
+}: TInlineProps) => (
+  <span
+    css={getStyles({
+      scale,
+      alignItems,
+      justifyContent,
+      ...props,
+    })}
+    {...filterDataAttributes({
+      scale,
+      alignItems,
+      justifyContent,
+      ...props,
+    })}
+  >
     {props.children}
   </span>
 );
-const defaultProps: Pick<
-  TInlineProps,
-  'scale' | 'alignItems' | 'justifyContent'
-> = {
-  scale: 's',
-  alignItems: 'flex-start',
-  justifyContent: 'flex-start',
-};
-Inline.defaultProps = defaultProps;
 Inline.displayName = 'Inline';
 
 export default Inline;
diff --git a/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx b/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx
@@ -6,9 +6,9 @@ import { filterDataAttributes } from '@commercetools-uikit/utils';
 export type TScale = 's' | 'm' | 'l';
 export type TInsetSquishProps = {
   /** sets the amount of `padding` applied around the children */
-  scale: TScale;
+  scale?: TScale;
   /** sets the height of the component to 100% of the available width ('expanded') or 'auto' */
-  height: 'collapsed' | 'expanded';
+  height?: 'collapsed' | 'expanded';
   children: ReactNode;
 };
 
@@ -25,22 +25,25 @@ const getPadding = (scale?: TScale) => {
   }
 };
 
-const InsetSquish = (props: TInsetSquishProps) => (
+const InsetSquish = ({
+  scale = 'm',
+  height = 'collapsed',
+  ...props
+}: TInsetSquishProps) => (
   <div
     css={css`
-      padding: ${getPadding(props.scale)};
-      height: ${props.height === 'expanded' ? '100%' : 'auto'};
+      padding: ${getPadding(scale)};
+      height: ${height === 'expanded' ? '100%' : 'auto'};
     `}
-    {...filterDataAttributes(props)}
+    {...filterDataAttributes({
+      scale,
+      height,
+      ...props,
+    })}
   >
     {props.children}
   </div>
 );
-const defaultProps: Pick<TInsetSquishProps, 'scale' | 'height'> = {
-  scale: 'm',
-  height: 'collapsed',
-};
 InsetSquish.displayName = 'InsetSquish';
-InsetSquish.defaultProps = defaultProps;
 
 export default InsetSquish;
diff --git a/packages/components/spacings/spacings-inset/src/inset.tsx b/packages/components/spacings/spacings-inset/src/inset.tsx
@@ -24,28 +24,31 @@ const getPadding = (scale?: TScale) => {
 
 export type TInsetProps = {
   /** sets the amount of `padding` applied around the children */
-  scale: TScale;
+  scale?: TScale;
   /** sets the height of the component to 100% of the available width ('expanded') or 'auto' */
-  height: 'collapsed' | 'expanded';
+  height?: 'collapsed' | 'expanded';
   children?: ReactNode;
 };
 
-const Inset = (props: TInsetProps) => (
+const Inset = ({
+  scale = 'm',
+  height = 'collapsed',
+  ...props
+}: TInsetProps) => (
   <div
     css={css`
-      padding: ${getPadding(props.scale)};
-      height: ${props.height === 'expanded' ? '100%' : 'auto'};
+      padding: ${getPadding(scale)};
+      height: ${height === 'expanded' ? '100%' : 'auto'};
     `}
-    {...filterDataAttributes(props)}
+    {...filterDataAttributes({
+      scale,
+      height,
+      ...props,
+    })}
   >
     {props.children}
   </div>
 );
-const defaultProps: Pick<TInsetProps, 'scale' | 'height'> = {
-  scale: 'm',
-  height: 'collapsed',
-};
 Inset.displayName = 'Inset';
-Inset.defaultProps = defaultProps;
 
 export default Inset;
diff --git a/packages/components/spacings/spacings-stack/src/stack.tsx b/packages/components/spacings/spacings-stack/src/stack.tsx
@@ -21,24 +21,34 @@ export type TScale = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 
 export type TStackProps = {
   /** specifies the spacing between individual items */
-  scale: TScale;
+  scale?: TScale;
   /**
    * sets the `align-self` value on all direct children.
    * https://developer.mozilla.org/en-US/docs/Web/CSS/align-items */
-  alignItems: TAlignItem;
+  alignItems?: TAlignItem;
   children: ReactNode;
 };
 
-const Stack = (props: TStackProps) => (
-  <div css={getStyles(props)} {...filterDataAttributes(props)}>
+const Stack = ({
+  scale = 's',
+  alignItems = 'stretch',
+  ...props
+}: TStackProps) => (
+  <div
+    css={getStyles({
+      scale,
+      alignItems,
+      ...props,
+    })}
+    {...filterDataAttributes({
+      scale,
+      alignItems,
+      ...props,
+    })}
+  >
     {props.children}
   </div>
 );
-const defaultProps: Pick<TStackProps, 'scale' | 'alignItems'> = {
-  scale: 's',
-  alignItems: 'stretch',
-};
 Stack.displayName = 'Stack';
-Stack.defaultProps = defaultProps;
 
 export default Stack;