feat: 🎸 [Button] Added rotate icon property

melfore · Jun 24, 2021 · a74a2d0 · a74a2d0
1 parent 8f3e612
commit a74a2d0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx
@@ -84,3 +84,10 @@ export const CustomIcon = () => (
     />
   </StoriesWrapper>
 );
+
+export const RotateIcon = () => (
+  <StoriesWrapper>
+    <Button icon={{ name: Icons.refresh, rotate: true }} label="Refresh" onClick={action("Click on Button")} />
+    <Button disabled icon={{ name: Icons.refresh, rotate: true }} label="Refresh" onClick={action("Click on Button")} />
+  </StoriesWrapper>
+);
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -23,8 +23,10 @@ const getIcons = (dataCy: string, iconConfig?: IButtonIcon): IMUIButtonIcon => {
     return muiIcon;
   }
 
-  const { component, name, position } = iconConfig;
-  const icon = <IconWrapper dataCy={getComposedDataCy(dataCy, SUBPARTS_MAP.icon)} icon={name || component} />;
+  const { component, name, position, rotate } = iconConfig;
+  const icon = (
+    <IconWrapper dataCy={getComposedDataCy(dataCy, SUBPARTS_MAP.icon)} icon={name || component} rotate={rotate} />
+  );
 
   switch (position) {
     case ButtonIconPosition.left:

diff --git a/src/types/Button.ts b/src/types/Button.ts
@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 
 import { IClickable, ILocalizable } from "./Base";
-import { Icons } from "./Icon";
+import { Icons, IIcon } from "./Icon";
 
 export enum ButtonIconPosition {
   left = "left",
@@ -17,12 +17,11 @@ export interface IBaseButton extends IClickable {
   label: string;
 }
 
-// TODO: add rotate reusing IIcon props
-export interface IButtonIcon {
+export type IButtonIcon = Pick<IIcon, "rotate"> & {
   component?: ReactElement;
   name?: Icons;
   position?: ButtonIconPosition;
-}
+};
 
 export interface IButton extends IBaseButton, ILocalizable {
   disabled?: boolean;