feat: improve ButtonCard style and props

Synthetixio · Jul 12, 2022 · 78e9f4f · 78e9f4f
1 parent a70ef06
commit 78e9f4f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 21 deletions.
diff --git a/src/components/ButtonCard/ButtonCard.stories.tsx b/src/components/ButtonCard/ButtonCard.stories.tsx
@@ -13,6 +13,6 @@ const Template: ComponentStory<typeof ButtonCard> = (args) => <ButtonCard {...ar
 export const Primary = Template.bind({});
 
 Primary.args = {
-  subline: 'subline',
-  headline: 'headline'
+  subline: 'headline',
+  headline: 'headline headline headlineheadlineheadlineheadlineheadline'
 };
diff --git a/src/components/ButtonCard/ButtonCard.tsx b/src/components/ButtonCard/ButtonCard.tsx
@@ -1,18 +1,22 @@
 import clsx from 'clsx';
-import { Icon } from 'components/Icon/Icon';
+import { Icon, SynthetixIcon } from 'components/Icon/Icon';
 import { ButtonHTMLAttributes } from 'react';
 
 export interface ButtonCardProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string;
   onClick?: () => void;
   direction?: 'left' | 'right';
-  headline: string;
-  subline?: string;
+  iconDirection?: 'top' | 'middle' | 'bottom';
+  icon?: SynthetixIcon;
+  headline: React.ReactNode;
+  subline?: React.ReactNode;
   sublineFirst?: boolean;
 }
 
 export const ButtonCard: React.FC<ButtonCardProps> = ({
-  direction = 'right',
+  direction = 'left',
+  iconDirection = 'top',
+  icon = 'Link-off',
   headline,
   subline,
   onClick,
@@ -24,24 +28,35 @@ export const ButtonCard: React.FC<ButtonCardProps> = ({
     <button
       className={clsx(
         className,
-        'ui-gradient-rainbow ui-rounded ui-w-full ui-cursor-pointer ui-p-[1px]'
+        'ui-from-pink ui-to-primary ui-rounded ui-w-full ui-cursor-pointer ui-p-[1px]',
+        {
+          'ui-bg-gradient-to-r': direction === 'left',
+          'ui-bg-gradient-to-l': direction === 'right'
+        }
       )}
       onClick={onClick}
       {...rest}
     >
       <div className='ui-bg-dark-blue ui-relative ui-rounded ui-p-6 ui-h-full'>
-        <div className='ui-flex ui-flex-col'>
-          <h4
-            className={clsx('ui-tg-main ui-text-gray-650 ui-w-full', {
-              'ui-text-left': direction === 'left',
-              'ui-text-right': direction === 'right',
-              'ui-order-2': !sublineFirst
-            })}
-          >
-            {subline}
-          </h4>
+        <div
+          className={clsx('ui-flex ui-flex-col', {
+            'ui-mr-5': direction === 'left',
+            'ui-ml-5': direction === 'right'
+          })}
+        >
+          {subline && (
+            <h4
+              className={clsx('ui-tg-main ui-text-gray-650 ui-w-full ui-break-words', {
+                'ui-text-left': direction === 'left',
+                'ui-text-right': direction === 'right',
+                'ui-order-2': !sublineFirst
+              })}
+            >
+              {subline}
+            </h4>
+          )}
           <h3
-            className={clsx('ui-tg-title-h5 ui-text-white ui-w-full', {
+            className={clsx('ui-tg-title-h5 ui-text-white ui-w-full ui-break-words', {
               'ui-text-left': direction === 'left',
               'ui-text-right': direction === 'right',
               'ui-order-1': !sublineFirst
@@ -52,12 +67,15 @@ export const ButtonCard: React.FC<ButtonCardProps> = ({
         </div>
 
         <div
-          className={clsx('ui-absolute ui-top-1/2 ui--translate-y-1/2', {
+          className={clsx('ui-absolute', {
             'ui-left-4 -ui-rotate-90': direction === 'right',
-            'ui-right-4': direction === 'left'
+            'ui-right-4': direction === 'left',
+            'ui-top-1/2 ui--translate-y-1/2': iconDirection === 'middle',
+            'ui-top-5': iconDirection === 'top',
+            'ui-bottom-5': iconDirection === 'bottom'
           })}
         >
-          <Icon className='ui-text-2xl dark:ui-text-primary' name='Link-off' />
+          <Icon className='ui-text-2xl ui-text-primary' name={icon} />
         </div>
       </div>
     </button>