fix: button

cvzamannow · Jan 16, 2024 · 0faf30c · 0faf30c
1 parent b529add
commit 0faf30c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/src/stories/Button/Button.stories.tsx b/src/stories/Button/Button.stories.tsx
@@ -31,14 +31,14 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     type: "primary",
-    content: "Button",  
+    children: <>Button</>,  
   },
 };
 
 export const Secondary: Story = {
   args: {
     type: "secondary",
-    content: "Button",
+    children: <>Button</>,
   },
 };
 

diff --git a/src/stories/Button/Button.style.ts b/src/stories/Button/Button.style.ts
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
+import { ButtonProps } from './Button';
 
-export const StyledButton = styled.button`
-
-  &.button{
+export const StyledButton = styled.button<ButtonProps>`
+  &.button {
     font-family: 'Inter', sans-serif;
     backface-visibility: hidden;
     border: 0;
@@ -12,8 +12,8 @@ export const StyledButton = styled.button`
     cursor: ${({ disabled }) => (disabled ? 'auto' : 'pointer')};
     display: inline-block;
     font-size: 16px;
-    letter-spacing: -0.01em;
-    padding: 16px 32px 16px 32px;
+    letter-spacing: -0.16px;
+    padding: ${(props) => props.padding};
     position: relative;
     text-align: center;
     justify-content: center;
@@ -30,20 +30,20 @@ export const StyledButton = styled.button`
 
     &:hover:active {
       ${({ disabled }) =>
-        !disabled && 'transform: scale(1.05) translateY(.125rem);'}
+        !disabled && 'transform: scale(1.05) translateY(2px);'}
     }
 
     &:focus {
       outline: 0 solid transparent;
     }
 
     &:focus:before {
-      border-width: 0.125rem;
+      border-width: 2px;
       content: '';
-      left: calc(-1 * 0.375rem);
+      left: calc(-1 * 6px);
       pointer-events: none;
       position: absolute;
-      top: calc(-1 * 0.375rem);
+      top: calc(-1 * 6px);
       transition: border-radius;
       user-select: none;
     }
@@ -58,14 +58,15 @@ export const StyledButton = styled.button`
   }
 
   &.button--primary {
-    color: #FFFFFF;
+    color: #ffffff;
     background: #0041e8;
+    box-shadow: 0px 25px 30px 0px #0041e81a;
   }
 
   &.button--secondary {
     background: #ff000000;
-    color: #FFFFFF;
+    color: #ffffff;
     background-color: transparent;
-    box-shadow: #FFFFFF 0px 0px 0px 1px inset;
+    box-shadow: #ffffff 0px 0px 0px 1px inset;
   }
 `;
diff --git a/src/stories/Button/Button.tsx b/src/stories/Button/Button.tsx
@@ -2,6 +2,7 @@
 import Link from 'next/link';
 import { StyledButton } from './Button.style';
 import { useState } from 'react';
+import React from 'react';
 
 export interface ButtonProps {
   /**
@@ -11,7 +12,12 @@ export interface ButtonProps {
   /**
    * Enter content button
    */
-  content: string;
+  children: React.ReactNode;
+  /**
+   * Insert padding according to the existing design
+   * `"top right bottom left"`
+   */
+  padding?: string;
   /**
    * Leading to where
    */
@@ -28,7 +34,8 @@ export interface ButtonProps {
 
 export default function Button({
   type = 'primary',
-  content,
+  children,
+  padding= "16px 32px 16px 32px",
   href,
   style,
   ...props
@@ -40,12 +47,14 @@ export default function Button({
       <Link href={href || '/'}>
         <StyledButton
           data-testid={`button--${type}`}
+          padding={padding}
+          type={type}
           className={['button', mode].join(' ')}
           disabled={isDisabled}
           style={style}
           {...props}
         >
-          {content}
+          {children}
         </StyledButton>
       </Link>
     </>