feat: add simple animations to button icons

src/components/common/Button/cmp.stories.tsx

@@ -4,6 +4,7 @@ import { StoryFn } from '@storybook/react'
 import Button from './cmp'
 import { ButtonProps, ButtonSize } from './types'
 import { useTheme } from 'styled-components'
+import Icon from '../Icon'
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -60,6 +61,28 @@ Forwarded.parameters = {
 
 // ---
 
+export const WithIcon = Template.bind({})
+WithIcon.args = {
+  ...defaultArgs,
+  hover: false,
+  active: false,
+  focus: false,
+  disabled: false,
+  as: 'a',
+  variant: 'textOnly',
+  children: (
+    <>
+      Text
+      <Icon name="square-up-right" size="md" />
+    </>
+  ),
+}
+WithIcon.parameters = {
+  ...defaultParams,
+}
+
+// ---
+
 function Cell({ children, gc, gr, bg = false }: any) {
   return (
     <div

src/components/common/Button/cmp.tsx

@@ -14,12 +14,12 @@ export const Button = forwardRef(
       hover,
       active,
       focus,
+      animation,
       className,
       ...rest
     }: ButtonProps,
     ref: ForwardedRef<HTMLButtonElement>,
   ) => {
-    // @note: Storybook testing purposes
     const classes = useMemo(() => {
       return (
         [
@@ -41,6 +41,7 @@ export const Button = forwardRef(
           ref,
           as,
           className: classes,
+          $animation: animation,
           ...rest,
         }}
       >

src/components/common/Button/styles.tsx

@@ -65,7 +65,6 @@ const defaultVariants = (props: StyledButtonProps) => {
     width: auto;
     min-width: 0;
     max-width: 100%;
-    overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     border: none;
@@ -223,13 +222,63 @@ const disableVariants = (props: StyledButtonProps) => {
   `
 }
 
+const animationVariants = (props: StyledButtonProps) => {
+  switch (props.$animation) {
+    case 'icon-to-right-on-hover':
+      return css`
+        > svg,
+        > img {
+          transition: transform 0.3s ease;
+        }
+
+        &:hover > svg,
+        &._hover > svg,
+        &:hover > img,
+        &._hover > img {
+          transform: translateX(2px);
+        }
+      `
+    case 'icon-to-top-on-hover':
+      return css`
+        > svg,
+        > img {
+          transition: transform 0.3s ease;
+        }
+
+        &:hover > svg,
+        &._hover > svg,
+        &:hover > img,
+        &._hover > img {
+          transform: translateY(-2px);
+        }
+      `
+    case 'icon-to-top-right-on-hover':
+      return css`
+        > svg,
+        > img {
+          transition: transform 0.3s ease;
+        }
+
+        &:hover > svg,
+        &._hover > svg,
+        &:hover > img,
+        &._hover > img {
+          transform: translate(2px, -2px);
+        }
+      `
+    default:
+      return ''
+  }
+}
+
 export const StyledButton = styled.button<StyledButtonProps>`
   ${(props) => {
     const defaultVariantsCss = defaultVariants(props)
     const focusVariantsCss = focusVariants(props)
     const hoverVariantsCss = hoverVariants(props)
     const activeVariantsCss = activeVariants(props, defaultVariantsCss)
     const disableVariantsCss = disableVariants(props)
+    const animationVariantsCss = animationVariants(props)
 
     return css`
       && {
@@ -255,6 +304,8 @@ export const StyledButton = styled.button<StyledButtonProps>`
         &._disabled {
           ${disableVariantsCss}
         }
+
+        ${animationVariantsCss}
     `
   }}
 `

src/components/common/Button/types.ts

@@ -20,11 +20,17 @@ export type ButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> &
 
     as?: ButtonTag
     className?: string
+
+    animation?:
+      | 'icon-to-right-on-hover'
+      | 'icon-to-top-right-on-hover'
+      | 'icon-to-top-on-hover'
   }
 
 export type StyledButtonProps = {
   $kind: string
   $variant: string
   $size: ButtonSize
   $color: string
+  $animation?: ButtonProps['animation']
 } & { theme: DefaultTheme }