chore: address comments from review

Sage · Nov 28, 2024 · 0621841 · 0621841
1 parent a95b78a
commit 0621841
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/src/components/draggable/draggable-item/draggable-item.component.tsx b/src/components/draggable/draggable-item/draggable-item.component.tsx
@@ -3,7 +3,8 @@ import { useDrop, useDrag } from "react-dnd";
 import { PaddingProps } from "styled-system";
 
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
-import { StyledDraggableItem, StyledIcon } from "./draggable-item.style";
+import { StyledDraggableItem } from "./draggable-item.style";
+import Icon from "../../icon";
 
 export interface DraggableItemProps extends PaddingProps {
   /**
@@ -98,7 +99,7 @@ const DraggableItem = ({
       {...paddingProps}
     >
       {children}
-      <StyledIcon type="drag" />
+      <Icon type="drag" />
     </StyledDraggableItem>
   );
 };

diff --git a/src/components/draggable/draggable-item/draggable-item.style.ts b/src/components/draggable/draggable-item/draggable-item.style.ts
@@ -2,7 +2,6 @@ import styled from "styled-components";
 import { padding, margin, PaddingProps } from "styled-system";
 
 import { baseTheme } from "../../../style/themes";
-import Icon from "../../icon";
 
 const StyledDraggableContainer = styled.div`
   ${margin}
@@ -24,8 +23,6 @@ const StyledDraggableItem = styled.div<StyledDraggableItemProps>`
   opacity: ${({ isDragging }) => (isDragging ? "0" : "1")};
 `;
 
-const StyledIcon = styled(Icon)``;
-
 StyledDraggableContainer.defaultProps = {
   theme: baseTheme,
 };
@@ -34,4 +31,4 @@ StyledDraggableItem.defaultProps = {
   theme: baseTheme,
 };
 
-export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };
+export { StyledDraggableContainer, StyledDraggableItem };
diff --git a/src/components/draggable/draggable.stories.tsx b/src/components/draggable/draggable.stories.tsx
@@ -49,16 +49,16 @@ DefaultStory.storyName = "Default";
 export const FlexDirectionStory: Story = () => (
   <DraggableContainer flexDirection="row-reverse">
     <DraggableItem key="1" id={1}>
-      Some content goes here
+      Some first content goes here
     </DraggableItem>
     <DraggableItem key="2" id={2}>
-      Some content goes here
+      Some second content goes here
     </DraggableItem>
     <DraggableItem key="3" id={3}>
-      Some content goes here
+      Some third content goes here
     </DraggableItem>
     <DraggableItem key="4" id={4}>
-      Some content goes here
+      Some fourth content goes here
     </DraggableItem>
   </DraggableContainer>
 );