feat: add support to circular button

lib/components/button/button.stories.mdx

@@ -12,7 +12,7 @@ Button is the component that you use, for get user taps and clicks.
 <Canvas>
   <Story
     name="Button Component"
-    args={{ label: 'Button Component', ...Button.defaultProps }}
+    args={{ ...Button.defaultProps, label: 'Button Component' }}
   >
     {(args) => <Button {...args} />}
   </Story>
@@ -38,3 +38,26 @@ Button is the component that you use, for get user taps and clicks.
     )}
   </Story>
 </Canvas>
+
+## With icon and label
+
+<Canvas>
+  <Story
+    name="Button Component with icon and label"
+    args={{ ...Button.defaultProps, label: 'Button Component', iconName: 'github' }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>
+</Canvas>
+
+
+## With icon only
+
+<Canvas>
+  <Story
+    name="Button Component with icon only"
+    args={{ ...Button.defaultProps, iconName: 'arrowRight' }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>
+</Canvas>

lib/components/button/button.tsx

@@ -5,6 +5,7 @@ import { BoxBase } from '@lib/components/box/box-base';
 import { TypographyVariants } from '@lib/core/typography/typography';
 import { Text } from '@lib/components/text/text';
 import { theme } from '@lib/core/theme/theme';
+import { Icon } from '@lib/components/icon/icon';
 import { useRipples } from './ripples/ripples';
 
 // TODO: Move it to the theme
@@ -102,6 +103,7 @@ const buttonSizes = {
 };
 
 interface ButtonProps {
+  iconName?: string;
   fullWidth?: boolean;
   variant?: 'primary' | 'secondary' | 'tertiary';
   buttonColors?: ButtonColorValues;
@@ -128,6 +130,7 @@ export function Button({
   buttonColors,
   fullWidth,
   onClick,
+  iconName,
   ...props
 }: ButtonProps): JSX.Element {
   const { onClickRipple, rippleStyle } = useRipples();
@@ -168,6 +171,8 @@ export function Button({
   const buttonStyle =
     buttonStyles[buttonVariantToStyle[props.variant]](colorSet);
 
+  const isCircularButton = iconName && !label;
+
   return (
     <BoxBase
       as="button"
@@ -198,6 +203,12 @@ export function Button({
           ...buttonStyle.focus,
           ...styleSheet.focus,
         },
+        ...(isCircularButton && {
+          borderRadius: '50%',
+          padding: '0',
+          width: '48px',
+          height: '48px',
+        }),
       }}
       onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         onClick(event);
@@ -213,12 +224,21 @@ export function Button({
       >
         {label}
       </Text>
+      {iconName && (
+        <Icon
+          name={iconName as unknown as never}
+          styleSheet={{
+            marginLeft: isCircularButton ? '0' : '16px',
+          }}
+        />
+      )}
       <s style={rippleStyle as unknown} />
     </BoxBase>
   );
 }
 
 Button.defaultProps = {
+  iconName: undefined,
   fullWidth: false,
   variant: 'primary',
   colorVariant: 'primary',

lib/components/button/ripples/ripples.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 export const useRipples = () => {
-  const during = 1000;
+  const during = 600;
   const color = 'rgba(255, 255, 255, 0.5)';
   const [rippleStyle, setRippleStyle] = React.useState({
     backgroundColor: color,

lib/components/icon/icon.tsx

@@ -21,7 +21,6 @@ export function Icon({ name, styleSheet, ...props }: IconProps): JSX.Element {
   return (
     <BoxBase
       styleSheet={{
-        color: 'red',
         width: size,
         height: size,
         ...styleSheet,
@@ -44,6 +43,6 @@ Icon.defaultProps = {
   className: '',
   size: '1.6ch',
   styleSheet: {
-    color: 'red',
+    color: 'currentColor',
   },
 };

lib/core/stylesheet/stylesheet.ts

@@ -18,7 +18,7 @@ export interface StyleSheet {
   color?: ResponsiveProperty<string> | string;
   border?: ResponsiveProperty<string> | string;
   backgroundColor?: ResponsiveProperty<string> | string;
-  padding?: ResponsiveProperty<number | string>;
+  padding?: ResponsiveProperty<number | string> | string;
   margin?: ResponsiveProperty<number | string> | string;
   marginLeft?: ResponsiveProperty<number | string> | string;
   marginRight?: ResponsiveProperty<number | string> | string;