@popsure/dirty-swan 0.41.18 → 0.42.0

package/src/lib/components/card/index.tsx

@@ -1,10 +1,14 @@
-import { ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import classNamesUtil from 'classnames';
 import { ChevronRightIcon } from '../icon';
 
 import styles from './style.module.scss';
 
-export interface CardProps {
+const CardDefault = 'section' as const
+type CardDefaultAsType = typeof CardDefault;
+
+type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
+  as?: E;
   children?: ReactNode;
   classNames?: {
     buttonWrapper?: string;
@@ -29,7 +33,11 @@ export interface CardProps {
   showActionIcon?: boolean;
 }
 
-const CardContent = ({
+export type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &
+  Omit<React.ComponentProps<E>, keyof CardOwnProps<E>>
+
+const Card = <E extends ElementType = CardDefaultAsType>({
+  as,
   children,
   classNames,
   density = 'balanced',
@@ -42,113 +50,111 @@ const CardContent = ({
   actionIcon,
   title,
   titleVariant = 'large',
-  showActionIcon
-}: CardProps) => {
+  showActionIcon,
+  ...rest
+}: CardProps<E>) => {
   const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
-
+  const propsWithActionIcon = onClick || rest?.href || rest.to; 
+  const cardDefaultTag = onClick ? 'button' : CardDefault;
+  const Tag = as || cardDefaultTag;
+  
   return (
-    <section
+    <Tag
       className={classNamesUtil(
-        'd-flex fd-column jc-center br8 bg-white w100 ta-left',
-        { 'bs-sm': dropShadow },
+        classNames?.buttonWrapper,
+        ' d-flex w100 br8 ai-stretch',
         {
-          compact: 'p16',
-          balanced: 'p24',
-          spacious: 'p32',
-        }[density],
-        classNames?.wrapper
+          'c-pointer': propsWithActionIcon,
+          [styles.button]: propsWithActionIcon
+        },
       )}
+      {...onClick && { 
+        onClick, 
+        type: "button"
+      }}
+      {...rest}
     >
-      <div className="d-flex w100">
-        {icon && (
-          <div
-            className={classNamesUtil(
-              `d-flex ai-center tc-primary-500`,
-              styles.icon,
-              styles[`icon${density}`],
-              classNames?.icon
-            )}
-          >
-            {icon}
-          </div>
+      <div
+        className={classNamesUtil(
+          'd-flex fd-column jc-center br8 bg-white w100 ta-left',
+          { 'bs-sm': dropShadow },
+          {
+            compact: 'p16',
+            balanced: 'p24',
+            spacious: 'p32',
+          }[density],
+          classNames?.wrapper
         )}
+      >
+        <div className="d-flex w100">
+          {icon && (
+            <div
+              className={classNamesUtil(
+                `d-flex ai-center tc-primary-500`,
+                styles.icon,
+                styles[`icon${density}`],
+                classNames?.icon
+              )}
+            >
+              {icon}
+            </div>
+          )}
 
-        <div className="d-flex jc-between w100">
-          <div className="d-flex jc-center gap8 fd-column tc-grey-900 w100">
-            {label && (
-              <h3 className={classNamesUtil('p-p--small', classNames?.label)}>
-                {label}
-              </h3>
-            )}
+          <div className="d-flex jc-between w100">
+            <div className="d-flex jc-center gap8 fd-column tc-grey-900 w100">
+              {label && (
+                <h3 className={classNamesUtil('p-p--small', classNames?.label)}>
+                  {label}
+                </h3>
+              )}
 
-            {title && (
-              <h2
-                className={classNamesUtil(
-                  classNames?.title,
-                  {
-                    large: 'p-h3',
-                    medium: 'p-h4',
-                    small: 'p-p',
-                  }[titleVariant]
-                )}
-              >
-                {title}
-              </h2>
-            )}
+              {title && (
+                <h2
+                  className={classNamesUtil(
+                    classNames?.title,
+                    {
+                      large: 'p-h3',
+                      medium: 'p-h4',
+                      small: 'p-p',
+                    }[titleVariant]
+                  )}
+                >
+                  {title}
+                </h2>
+              )}
 
-            {description && (
+              {description && (
+                <div
+                  className={classNamesUtil(
+                    'tc-grey-600',
+                    classNames?.description,
+                    descriptionVariant === 'small' ? 'p-p--small' : 'p-p'
+                  )}
+                >
+                  {description}
+                </div>
+              )}
+            </div>
+
+            {(showActionIcon || (propsWithActionIcon && !hideActionIcon)) && (
               <div
                 className={classNamesUtil(
-                  'tc-grey-600',
-                  classNames?.description,
-                  descriptionVariant === 'small' ? 'p-p--small' : 'p-p'
+                  styles.actionIcon,
+                  classNames?.actionIcon,
+                  styles[`actionIcon${density}`],
+                  'd-flex ai-center'
                 )}
               >
-                {description}
+                {actionIcon || <ChevronRightIcon size={24} />}
               </div>
             )}
           </div>
-
-          {(showActionIcon || (onClick && !hideActionIcon)) && (
-            <div
-              className={classNamesUtil(
-                styles.actionIcon,
-                classNames?.actionIcon,
-                styles[`actionIcon${density}`],
-                'd-flex ai-center'
-              )}
-            >
-              {actionIcon || <ChevronRightIcon size={24} />}
-            </div>
-          )}
         </div>
-      </div>
 
-      {children && <div className={classNames?.children}>{children}</div>}
-    </section>
+        {children && <div className={classNames?.children}>{children}</div>}
+      </div>
+    </Tag>
   );
 };
 
-const Card = (props: CardProps) => {
-  const { onClick } = props;
-
-  if (onClick) {
-    return (
-      <button
-        className={classNamesUtil(
-          'c-pointer d-flex w100 br8 ai-stretch',
-          styles.button,
-          props.classNames?.buttonWrapper
-        )}
-        onClick={onClick}
-        type="button"
-      >
-        <CardContent {...props} />
-      </button>
-    );
-  }
-
-  return <CardContent {...props} />;
-};
-
 export { Card };

package/src/lib/components/card/style.module.scss

@@ -5,6 +5,7 @@
   color: $ds-grey-900;
   outline: 1px solid transparent;
   transition: all 0.2s ease-in-out;
+  text-decoration: none;
 
   &:hover {
     outline: 1px solid $ds-primary-500;