Merge pull request #566 from devtron-labs/feat/template-create

fix: GenericInfoCard stylings

Author: eshankvaish

src/Shared/Components/GenericInfoCard/GenericInfoCard.component.tsx

@@ -1,7 +1,10 @@
 import { cloneElement } from 'react'
 import { Link } from 'react-router-dom'
+import { ReactComponent as ICCaretSmall } from '@Icons/ic-caret-left-small.svg'
+import { Tooltip } from '@Common/Tooltip'
 import { GenericInfoCardProps } from './types'
 import { getClassNameForBorderVariant } from './utils'
+import './styles.scss'
 
 const GenericInfoCard = ({
     title,
@@ -22,7 +25,7 @@ const GenericInfoCard = ({
             </div>
 
             <div className="flexbox-col dc__gap-8 flex-grow-1">
-                <div className="flexbox-col dc__gap-2">
+                <div className="flexbox-col dc__gap-4">
                     <span className={isLoading ? 'shimmer w-300' : ''} />
                     <span className={isLoading ? 'shimmer w-150 pt-2' : ''} />
                 </div>
@@ -33,7 +36,9 @@ const GenericInfoCard = ({
     )
 
     const renderContent = () => (
-        <div className={`flexbox dc__gap-16 p-12 bg__primary ${getClassNameForBorderVariant(borderVariant)}`}>
+        <div
+            className={`flexbox dc__gap-16 p-12 bg__primary generic-info-card br-8 ${getClassNameForBorderVariant(borderVariant)}`}
+        >
             {isLoading ? (
                 renderShimmerContent()
             ) : (
@@ -44,11 +49,24 @@ const GenericInfoCard = ({
 
                     <div className="flexbox-col dc__gap-8 flex-grow-1">
                         <div className="flexbox-col">
-                            <h3 className="fw-6 fs-13 lh-20 cn-9 m-0">{title}</h3>
-                            <h4 className="fw-4 fs-12 lh-16 cn-7 m-0">By {author}</h4>
+                            <div className="flexbox dc__align-items-center">
+                                <Tooltip content={title}>
+                                    <h3 className="fw-6 fs-13 lh-20 cn-9 m-0 generic-info-card__title dc__truncate dc__mxw-600">
+                                        {title}
+                                    </h3>
+                                </Tooltip>
+
+                                <div className="generic-info-card__arrow dc__no-shrink flex">
+                                    <ICCaretSmall className="icon-dim-16 dc__flip-180 scb-5" />
+                                </div>
+                            </div>
+
+                            <Tooltip content={author}>
+                                <h4 className="fw-4 fs-12 lh-16 cn-7 m-0 dc__truncate w-300">By {author}</h4>
+                            </Tooltip>
                         </div>
 
-                        <p className="fw-4 fs-12 lh-16 cn-7 m-0">{description}</p>
+                        <p className="fw-4 fs-12 lh-16 cn-7 m-0 dc__truncate--clamp-3">{description}</p>
                     </div>
                 </>
             )}
@@ -64,9 +82,9 @@ const GenericInfoCard = ({
     }
 
     return (
-        <button type="button" onClick={onClick} className="dc__unset-button-styles">
+        <div role="button" tabIndex={0} onClick={onClick} className="dc__unset-button-styles dc__align-unset">
             {renderContent()}
-        </button>
+        </div>
     )
 }
 

src/Shared/Components/GenericInfoCard/styles.scss

@@ -0,0 +1,29 @@
+.generic-info-card {
+    transition: box-shadow 0.2s ease-out;
+    
+    &__title {
+        transition: color 0.2s ease-out;
+    }
+    
+    &__arrow {
+        transition: all 0.2s ease-out;
+        transform: translateX(-20%);
+        visibility: hidden;
+    }
+    
+    &:hover {
+        position: relative;
+        z-index: 1;
+        box-shadow: var(--shadow-card-secondary);
+        
+        // NOTE: &__title was not working here
+        .generic-info-card__title {
+            color: var(--B500);
+        }
+
+        .generic-info-card__arrow {
+            transform: translateX(30%);
+            visibility: visible;
+        }
+    }
+}

src/Shared/Components/GenericInfoCard/types.ts

@@ -12,7 +12,7 @@ type BaseGenericInfoCardProps = {
           linkProps?: Pick<LinkProps, 'to' | 'target' | 'rel'>
       }
     | {
-          onClick?: MouseEventHandler<HTMLButtonElement>
+          onClick?: MouseEventHandler<HTMLDivElement>
           linkProps?: never
       }
 )
@@ -25,7 +25,7 @@ export enum GenericInfoCardBorderVariant {
 export type GenericInfoCardProps = { borderVariant: GenericInfoCardBorderVariant } & (
     | ({
           isLoading: true
-      } & Partial<BaseGenericInfoCardProps>)
+      } & Partial<Record<keyof BaseGenericInfoCardProps, never>>)
     | ({
           isLoading?: boolean
       } & BaseGenericInfoCardProps)

src/Shared/Components/GenericInfoCard/utils.ts

@@ -5,5 +5,5 @@ export const getClassNameForBorderVariant = (variant: GenericInfoCardBorderVaria
         return ''
     }
 
-    return 'br-4 dc__border-n1'
+    return 'dc__border-n1'
 }