Add additional customizations for Card prop

- Change image visibility default
- Removable info panel
- Removable modal overlay button

src/components/card/Card.tsx

@@ -47,6 +47,9 @@ const Card = ({
   cacheImages,
   cachePath,
   handleFavorite,
+  notVisibleByDefault,
+  noInfoPanel,
+  noModalButton,
   ...rest
 }: any) => {
   const history = useHistory();
@@ -190,18 +193,16 @@ const Card = ({
 
   return (
     <>
-      <CardPanel
+      <CardPanel cardsize={size} style={rest.style}>
-        tabIndex={0}
-        cardsize={size}
-        onKeyDown={(e: any) => {
-          if (e.key === ' ' || e.key === 'Enter') {
-            handleClick();
-          }
-        }}
-        style={rest.style}
-      >
         <Overlay cardsize={size}>
-          <ImgPanel>
+          <ImgPanel
+            tabIndex={0}
+            onKeyDown={(e: any) => {
+              if (e.key === ' ' || e.key === 'Enter') {
+                handleClick();
+              }
+            }}
+          >
             {rest.coverArt.match('placeholder') ? (
               <CardImgWrapper
                 id="placeholder-wrapper"
@@ -234,7 +235,7 @@ const Card = ({
                     alt="img"
                     effect="opacity"
                     cardsize={size}
-                    visibleByDefault={cacheImages}
+                    visibleByDefault={notVisibleByDefault ? false : cacheImages}
                     afterLoad={() => {
                       if (cacheImages) {
                         cacheImage(
@@ -285,7 +286,7 @@ const Card = ({
                     />
                   </CustomTooltip>
                 )}
-                {!rest.isModal && (
+                {!rest.isModal && !noModalButton && (
                   <CustomTooltip text="View in modal" delay={1000}>
                     <ModalViewOverlayButton
                       size={size <= 160 ? 'xs' : 'sm'}
@@ -299,44 +300,46 @@ const Card = ({
           </ImgPanel>
         </Overlay>
 
-        <InfoPanel cardsize={size}>
+        {!noInfoPanel && (
-          <InfoSpan>
+          <InfoPanel cardsize={size}>
-            <CardTitleWrapper>
+            <InfoSpan>
-              <CustomTooltip text={rest.title}>
-                <CardTitleButton
-                  appearance="link"
-                  tabIndex={-1}
-                  size="sm"
-                  onClick={handleClick}
-                  cardsize={size}
-                >
-                  {rest.title}
-                </CardTitleButton>
-              </CustomTooltip>
-            </CardTitleWrapper>
-          </InfoSpan>
-          <InfoSpan>
-            {subUrl ? (
               <CardTitleWrapper>
-                <CustomTooltip text={rest.subtitle}>
+                <CustomTooltip text={rest.title}>
-                  <CardSubtitleButton
+                  <CardTitleButton
                     appearance="link"
                     tabIndex={-1}
-                    size="xs"
+                    size="sm"
-                    onClick={handleSubClick}
+                    onClick={handleClick}
                     cardsize={size}
                   >
-                    {rest.subtitle}
+                    {rest.title}
-                  </CardSubtitleButton>
+                  </CardTitleButton>
                 </CustomTooltip>
               </CardTitleWrapper>
-            ) : (
+            </InfoSpan>
-              <CardSubtitle cardsize={size}>
+            <InfoSpan>
-                {rest.subtitle !== 'undefined' ? rest.subtitle : <span>&#8203;</span>}
+              {subUrl ? (
-              </CardSubtitle>
+                <CardTitleWrapper>
-            )}
+                  <CustomTooltip text={rest.subtitle}>
-          </InfoSpan>
+                    <CardSubtitleButton
-        </InfoPanel>
+                      appearance="link"
+                      tabIndex={-1}
+                      size="xs"
+                      onClick={handleSubClick}
+                      cardsize={size}
+                    >
+                      {rest.subtitle}
+                    </CardSubtitleButton>
+                  </CustomTooltip>
+                </CardTitleWrapper>
+              ) : (
+                <CardSubtitle cardsize={size}>
+                  {rest.subtitle !== 'undefined' ? rest.subtitle : <span>&#8203;</span>}
+                </CardSubtitle>
+              )}
+            </InfoSpan>
+          </InfoPanel>
+        )}
       </CardPanel>
     </>
   );

src/components/card/styled.tsx

@@ -59,10 +59,6 @@ export const CardPanel = styled(Panel)<Card>`
     filter: ${(props) => props.theme.other.card.hover.filter};
     transition: ${(props) => props.theme.other.card.hover.transition};
   }
-
-  &:focus-visible {
-    outline: 2px ${(props) => props.theme.colors.primary} solid;
-  }
 `;
 
 export const InfoPanel = styled(Panel)<Card>`
@@ -82,6 +78,11 @@ export const ImgPanel = styled(Panel)<Card>`
   border-left: ${(props) => props.theme.other.card.image.borderLeft} !important;
   border-radius: ${(props) => props.theme.other.card.image.borderRadius} !important;
 
+  &:focus-visible {
+    border-color: ${(props) => props.theme.colors.primary} !important;
+    outline: none !important;
+  }
+
   &:hover {
     border-color: ${(props) => props.theme.colors.primary} !important;
 
@@ -109,6 +110,7 @@ export const CardButton = styled(Button)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition: 0s;
 `;
 
 export const CardTitleWrapper = styled.span`
@@ -156,7 +158,6 @@ export const CardSubtitle = styled.div<Card>`
 
 export const CardImg = styled.img<Card>`
   height: ${(props) => `${props.cardsize}px`};
-  width: ${(props) => `${props.cardsize}px`};
 `;
 
 export const LazyCardImg = styled(LazyLoadImage)<Card>`