feat: add v2 button variants

src/components/core/button/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import PrimaryButton from './primary-button';
 import SecondaryButton from './secondary-button';
+import TertiaryButton from './tertiary-button';
 
 const Button = ({ variant, ...props } = { variant: 'primary' }) => {
   if (variant === 'primary') {
@@ -13,11 +14,15 @@ const Button = ({ variant, ...props } = { variant: 'primary' }) => {
     return <SecondaryButton {...props} />;
   }
 
+  if (variant === 'tertiary') {
+    return <TertiaryButton {...props} />;
+  }
+
   return <PrimaryButton {...props} />;
 };
 
 Button.propTypes = {
-  variant: PropTypes.oneOf(['primary', 'secondary']),
+  variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
 };
 
 export default Button;

src/components/core/button/primary-button.js

@@ -2,34 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 
-const PrimaryButton = ({
-  size = 'md',
-  className,
-  children,
-  onClick = () => {},
-  disabled = false,
-  'aria-label': ariaLabel,
-  ...props
-}) => {
-  const sizeClasses = {
-    xs: 'px-2 py-1 text-xs',
-    sm: 'px-2 py-1 text-sm',
-    md: 'px-2.5 py-1.5 text-sm',
-    l: 'px-3 py-2 text-sm',
-    xl: 'px-3.5 py-2.5 text-sm',
-  };
+const sizeClasses = {
+  sm: 'px-3 py-2 text-sm leading-[1.4]',
+  l: 'px-4 py-3 text-base leading-[1.5]',
+};
 
+const PrimaryButton = ({ size = 'sm', className, children, ...props }) => {
   return (
     <button
       type="button"
-      onClick={onClick}
-      disabled={disabled}
-      aria-label={ariaLabel}
       className={cn(
-        'rounded-md bg-cyan font-semibold text-white shadow-sm',
-        'focus-visible:outline focus-visible:outline-2',
-        'focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
-        'disabled:opacity-50 disabled:cursor-not-allowed',
+        'flex items-center justify-center bg-primary text-white rounded-lg',
+        'hover:bg-blue-800',
+        'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
+        'disabled:bg-bg-disabled disabled:text-text-disabled disabled:border disabled:border-text-secondary disabled:cursor-not-allowed',
         sizeClasses[size],
         className
       )}
@@ -41,12 +27,9 @@ const PrimaryButton = ({
 };
 
 PrimaryButton.propTypes = {
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'l', 'xl']),
+  size: PropTypes.oneOf(['sm', 'l']),
   className: PropTypes.string,
   children: PropTypes.node,
-  onClick: PropTypes.func,
-  disabled: PropTypes.bool,
-  'aria-label': PropTypes.string,
 };
 
 export default PrimaryButton;

src/components/core/button/secondary-button.js

@@ -2,77 +2,34 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 
-const SecondaryButton = (
-  { size, className, ...props } = {
-    size: 'md',
-  }
-) => {
-  if (size === 'xs') {
-    return (
-      <button
-        type="button"
-        className={cn(
-          'rounded bg-white px-2 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50',
-          className
-        )}
-        {...props}
-      />
-    );
-  }
-
-  if (size === 'sm') {
-    return (
-      <button
-        type="button"
-        className={cn(
-          'rounded bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50',
-          className
-        )}
-        {...props}
-      />
-    );
-  }
-
-  if (size === 'l') {
-    return (
-      <button
-        type="button"
-        className={cn(
-          'rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50',
-          className
-        )}
-        {...props}
-      />
-    );
-  }
-
-  if (size === 'xl') {
-    return (
-      <button
-        type="button"
-        className={cn(
-          'rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50',
-          className
-        )}
-        {...props}
-      />
-    );
-  }
+const sizeClasses = {
+  sm: 'px-3 py-2 text-sm leading-[1.4]',
+  l: 'px-4 py-3 text-base leading-[1.5]',
+};
 
+const SecondaryButton = ({ size = 'sm', className, children, ...props }) => {
   return (
     <button
       type="button"
       className={cn(
-        'rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50',
+        'flex items-center justify-center text-text-primary border border-border-main rounded-lg',
+        'hover:bg-gray-50',
+        'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
+        'disabled:bg-bg-disabled disabled:text-text-disabled disabled:border disabled:border-text-secondary disabled:cursor-not-allowed',
+        sizeClasses[size],
         className
       )}
       {...props}
-    />
+    >
+      {children}
+    </button>
   );
 };
 
 SecondaryButton.propTypes = {
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'l', 'xl']),
+  size: PropTypes.oneOf(['sm', 'l']),
+  className: PropTypes.string,
+  children: PropTypes.node,
 };
 
 export default SecondaryButton;

src/components/core/button/tertiary-button.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+
+const sizeClasses = {
+  sm: 'px-3 py-2 text-sm leading-[1.4]',
+  l: 'px-4 py-3 text-base leading-[1.5]',
+};
+
+const TertiaryButton = ({ size = 'sm', className, children, ...props }) => {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'flex items-center justify-center text-primary rounded-lg',
+        'hover:text-blue-800',
+        'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
+        'disabled:bg-bg-disabled disabled:text-text-disabled disabled:border disabled:border-text-secondary disabled:cursor-not-allowed',
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+TertiaryButton.propTypes = {
+  size: PropTypes.oneOf(['sm', 'l']),
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default TertiaryButton;

tailwind.config.js

@@ -74,6 +74,7 @@ module.exports = {
         error: v2ColorTokens.red[600],
         bg: {
           main: '#F8FCFF',
+          disabled: v2ColorTokens.gray[100],
         },
         border: {
           main: v2ColorTokens.gray[400],
@@ -83,6 +84,7 @@ module.exports = {
           primary: v2ColorTokens.gray[800],
           secondary: v2ColorTokens.gray[500],
           placeholder: v2ColorTokens.gray[400],
+          disabled: v2ColorTokens.gray[400],
         },
       },
     },