refactor(design-system): migrate collapsible components

commercetools · Dec 17, 2024 · 5ee5798 · 5ee5798
1 parent ab1f11d
commit 5ee5798
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 51 deletions.
diff --git a/packages/components/collapsible-motion/src/collapsible-motion.tsx b/packages/components/collapsible-motion/src/collapsible-motion.tsx
@@ -53,10 +53,6 @@ export type TCollapsibleMotionProps = {
   isDefaultClosed?: boolean;
 };
 
-const defaultProps: Pick<TCollapsibleMotionProps, 'minHeight'> = {
-  minHeight: 0,
-};
-
 const getMinHeight = (minHeight: number) =>
   minHeight !== 0 ? `${minHeight}px` : minHeight;
 
@@ -174,11 +170,14 @@ const ControlledCollapsibleMotion = (props: TCollapsibleMotionProps) => {
 };
 ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
 
-const UncontrolledCollapsibleMotion = (props: TCollapsibleMotionProps) => {
+const UncontrolledCollapsibleMotion = ({
+  minHeight = 0,
+  ...props
+}: TCollapsibleMotionProps) => {
   const [isOpen, toggle] = useToggleState(!props.isDefaultClosed);
 
   const [animation, containerStyles, animationToggle, registerContentNode] =
-    useToggleAnimation(isOpen, toggle, props.minHeight);
+    useToggleAnimation(isOpen, toggle, minHeight);
 
   return (
     <ClassNames>
@@ -213,9 +212,8 @@ const UncontrolledCollapsibleMotion = (props: TCollapsibleMotionProps) => {
   );
 };
 UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
-UncontrolledCollapsibleMotion.defaultProps = defaultProps;
 
-const CollapsibleMotion = (props: TCollapsibleMotionProps) => {
+const CollapsibleMotion = ({ ...props }: TCollapsibleMotionProps) => {
   const isControlledComponent = !isNil(props.isClosed);
 
   if (isControlledComponent) {
@@ -225,6 +223,5 @@ const CollapsibleMotion = (props: TCollapsibleMotionProps) => {
   return <UncontrolledCollapsibleMotion {...props} />;
 };
 CollapsibleMotion.displayName = 'CollapsibleMotion';
-CollapsibleMotion.defaultProps = defaultProps;
 
 export default CollapsibleMotion;
diff --git a/packages/components/collapsible-panel/src/collapsible-panel.tsx b/packages/components/collapsible-panel/src/collapsible-panel.tsx
@@ -130,21 +130,6 @@ export type TCollapsiblePanel = {
     | 'auto';
 };
 
-const defaultProps: Pick<
-  TCollapsiblePanel,
-  | 'theme'
-  | 'condensed'
-  | 'isDisabled'
-  | 'headerControlsAlignment'
-  | 'horizontalConstraint'
-> = {
-  theme: 'dark',
-  condensed: false,
-  isDisabled: false,
-  headerControlsAlignment: 'right',
-  horizontalConstraint: 'scale',
-};
-
 const HeadLineText = (
   props: Pick<TCollapsiblePanel, 'condensed' | 'header'>
 ) => {
@@ -166,12 +151,26 @@ const HeadLineText = (
 
 // When `isClosed` is provided the component behaves as a controlled component,
 // otherwise it will behave like an uncontrolled component.
-const CollapsiblePanel = (props: TCollapsiblePanel) => {
+const CollapsiblePanel = ({
+  theme = 'dark',
+  condensed = false,
+  isDisabled = false,
+  headerControlsAlignment = 'right',
+  horizontalConstraint = 'scale',
+  ...props
+}: TCollapsiblePanel) => {
   const panelButtonId = useFieldId(props.id, panelButtonSequentialId);
   const panelContentId = useFieldId(undefined, panelContentSequentialId);
   // Pass only `data-*` props
-  const dataProps = filterDataAttributes(props);
-  const scale = props.condensed ? 's' : 'm';
+  const dataProps = filterDataAttributes({
+    theme,
+    condensed,
+    isDisabled,
+    headerControlsAlignment,
+    horizontalConstraint,
+    ...props,
+  });
+  const scale = condensed ? 's' : 'm';
 
   const isClosedAndIsDefaultClosed =
     !isNil(props.isClosed) && !isNil(props.isDefaultClosed);
@@ -206,7 +205,7 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => {
       isDefaultClosed={props.isDefaultClosed}
     >
       {({ isOpen, toggle, containerStyles, registerContentNode }) => (
-        <Constraints.Horizontal max={props.horizontalConstraint}>
+        <Constraints.Horizontal max={horizontalConstraint}>
           <div
             css={[baseContainerStyles, getThemeStyle('light')]}
             // Allow to override the styles by passing a `className` prop.
@@ -217,13 +216,21 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => {
             <HeaderContainer
               as="div"
               css={[
-                getHeaderContainerStyles(props, isOpen),
+                getHeaderContainerStyles(
+                  {
+                    condensed,
+                    isDisabled,
+                    headerControlsAlignment,
+                    ...props,
+                  },
+                  isOpen
+                ),
                 getThemeStyle('light'),
               ]}
               id={panelButtonId}
               label=""
-              onClick={props.isDisabled ? undefined : toggle}
-              isDisabled={props.isDisabled}
+              onClick={isDisabled ? undefined : toggle}
+              isDisabled={isDisabled}
               buttonAttributes={dataProps}
               aria-controls={panelContentId}
               aria-expanded={isOpen ? 'true' : 'false'}
@@ -232,16 +239,13 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => {
                 {!props.hideExpansionControls && (
                   <HeaderIcon
                     isClosed={!isOpen}
-                    isDisabled={props.isDisabled || false}
+                    isDisabled={isDisabled || false}
                     tone={props.tone}
                     size={'medium'}
                   />
                 )}
                 <Spacings.Inline alignItems="baseline" scale={scale}>
-                  <HeadLineText
-                    header={props.header}
-                    condensed={props.condensed}
-                  />
+                  <HeadLineText header={props.header} condensed={condensed} />
                   {props.secondaryHeader && (
                     <Text.Detail tone="secondary" truncate={true}>
                       {props.secondaryHeader}
@@ -261,7 +265,7 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => {
               <SectionWrapper
                 // @ts-ignore
                 ref={registerContentNode}
-                condensed={props.condensed}
+                condensed={condensed}
                 isExpandControlHidden={props.hideExpansionControls}
               >
                 {props.description && (
@@ -295,7 +299,6 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => {
  */
 CollapsiblePanel.getPanelContentId = () => '';
 CollapsiblePanel.displayName = 'CollapsiblePanel';
-CollapsiblePanel.defaultProps = defaultProps;
 CollapsiblePanel.Header = CollapsiblePanelHeader;
 
 export default CollapsiblePanel;
diff --git a/packages/components/collapsible-panel/src/header-icon.tsx b/packages/components/collapsible-panel/src/header-icon.tsx
@@ -19,7 +19,7 @@ type THeaderIcon = {
   size: 'small' | 'medium' | 'big' | 'scale';
 };
 
-const HeaderIcon = (props: THeaderIcon) => {
+const HeaderIcon = ({ tone = 'primary', ...props }: THeaderIcon) => {
   return (
     <div
       css={[
@@ -39,15 +39,15 @@ const HeaderIcon = (props: THeaderIcon) => {
       {props.isClosed ? (
         <AngleRightIcon
           color={getArrowColor({
-            tone: props.tone,
+            tone: tone,
             isDisabled: props.isDisabled,
           })}
           size={props.size}
         />
       ) : (
         <AngleDownIcon
           color={getArrowColor({
-            tone: props.tone,
+            tone: tone,
             isDisabled: props.isDisabled,
           })}
           size={props.size}
@@ -58,8 +58,5 @@ const HeaderIcon = (props: THeaderIcon) => {
 };
 
 HeaderIcon.displayName = 'HeaderIcon';
-HeaderIcon.defaultProps = {
-  tone: 'primary',
-};
 
 export default HeaderIcon;
diff --git a/packages/components/collapsible/src/collapsible.tsx b/packages/components/collapsible/src/collapsible.tsx
@@ -61,7 +61,10 @@ const UncontrolledCollapsible = (
 };
 UncontrolledCollapsible.displayName = 'UncontrolledCollapsible';
 
-const Collapsible = (props: TCollapsibleProps) => {
+const Collapsible = ({
+  isDefaultClosed = false,
+  ...props
+}: TCollapsibleProps) => {
   const isControlledComponent = !isNil(props.isClosed);
   const hasOnToggle = !isNil(props.onToggle);
 
@@ -77,14 +80,11 @@ const Collapsible = (props: TCollapsibleProps) => {
     !hasOnToggle,
     `ui-kit/Collapsible: the prop "onToggle" does not have any effect (uncontrolled component). Please remove it.`
   );
-  return <UncontrolledCollapsible {...props} />;
+  return (
+    <UncontrolledCollapsible isDefaultClosed={isDefaultClosed} {...props} />
+  );
 };
 
 Collapsible.displayName = 'Collapsible';
 
-const collapsibleDefaultProps: Pick<TCollapsibleProps, 'isDefaultClosed'> = {
-  isDefaultClosed: false,
-};
-Collapsible.defaultProps = collapsibleDefaultProps;
-
 export default Collapsible;