Support fullWidth link Buttons. Add footer prop to Card.

vectara · Nov 23, 2023 · 2115d34 · 2115d34
1 parent b4e17da
commit 2115d34
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 15 deletions.
diff --git a/src/lib/components/button/BaseButton.tsx b/src/lib/components/button/BaseButton.tsx
@@ -74,9 +74,13 @@ export const BaseButton = forwardRef<HTMLButtonElement | null, Props>(
     }
 
     if (href) {
+      const wrapperClasses = classNames("vuiBaseButtonLinkWrapper", {
+        "vuiBaseButtonLinkWrapper--fullWidth": fullWidth
+      });
+
       return (
         <Link
-          className="vuiBaseButtonLinkWrapper"
+          className={wrapperClasses}
           to={href}
           onClick={onClick}
           target={target}

diff --git a/src/lib/components/button/baseButton.scss b/src/lib/components/button/baseButton.scss
@@ -11,6 +11,10 @@
   }
 }
 
+.vuiBaseButtonLinkWrapper--fullWidth {
+  width: 100%;
+}
+
 .vuiBaseButton {
   white-space: nowrap;
   border-radius: $sizeXxs;

diff --git a/src/lib/components/card/Card.tsx b/src/lib/components/card/Card.tsx
@@ -3,6 +3,7 @@ import classNames from "classnames";
 type Props = {
   header?: React.ReactNode;
   body?: React.ReactNode;
+  footer?: React.ReactNode;
   align?: "center" | "left" | "right";
   className?: string;
   interactive?: boolean;
@@ -15,6 +16,7 @@ type Props = {
 export const VuiCard = ({
   header,
   body,
+  footer,
   align = "left",
   interactive,
   href,
@@ -37,14 +39,16 @@ export const VuiCard = ({
     className
   );
 
-  const headerContent = header && <div className="vuiCard__content">{header}</div>;
-  const bodyContent = body && <div className="vuiCard__footer">{body}</div>;
+  const headerContent = header && <div className="vuiCard__header">{header}</div>;
+  const bodyContent = body && <div className="vuiCard__body">{body}</div>;
+  const footerContent = footer && <div className="vuiCard__footer">{footer}</div>;
 
   if (href) {
     return (
       <a className={classes} href={href} {...rest}>
         {headerContent}
         {bodyContent}
+        {footerContent}
       </a>
     );
   }
@@ -53,6 +57,7 @@ export const VuiCard = ({
     <div className={classes} {...rest}>
       {headerContent}
       {bodyContent}
+      {footerContent}
     </div>
   );
 };
diff --git a/src/lib/components/card/_index.scss b/src/lib/components/card/_index.scss
@@ -25,7 +25,8 @@
   align-items: center;
   text-align: center;
 
-  .vuiCard__content,
+  .vuiCard__header,
+  .vuiCard__body,
   .vuiCard__footer {
     align-items: center;
     text-align: center;
@@ -36,57 +37,78 @@
   align-items: flex-start;
   text-align: left;
 
-  .vuiCard__content,
+  .vuiCard__header,
+  .vuiCard__body,
   .vuiCard__footer {
     align-items: flex-start;
     text-align: left;
   }
 }
 
-.vuiCard__content {
+.vuiCard__header {
   display: flex;
   flex-direction: column;
   width: 100%;
   padding: $sizeM $sizeL;
 }
 
-.vuiCard__footer {
+.vuiCard__body {
   display: flex;
   flex-direction: column;
   width: 100%;
   border-top: 1px solid $borderColorLight;
   padding: $sizeM $sizeL;
+  flex-grow: 1;
+}
+
+.vuiCard__footer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 $sizeL $sizeM;
 }
 
 .vuiCard--s {
-  .vuiCard__content,
-  .vuiCard__footer {
+  .vuiCard__header,
+  .vuiCard__body {
     padding: $sizeM $sizeL;
   }
+
+  .vuiCard__footer {
+    padding: 0 $sizeL $sizeM;
+  }
 }
 
 .vuiCard--m {
-  .vuiCard__content,
-  .vuiCard__footer {
+  .vuiCard__header,
+  .vuiCard__body {
     padding: $sizeL $sizeXl;
   }
+
+  .vuiCard__footer {
+    padding: 0 $sizeXl $sizeL;
+  }
 }
 
 .vuiCard--l {
-  .vuiCard__content,
-  .vuiCard__footer {
+  .vuiCard__header,
+  .vuiCard__body {
     padding: $sizeXl $sizeXxl;
   }
+
+  .vuiCard__footer {
+    padding: 0 $sizeXxl $sizeXl;
+  }
 }
 
 .vuiCard--highlight {
   border: 2px solid $colorAccent;
 
-  .vuiCard__content {
+  .vuiCard__header {
     background-color: $colorAccentLightShade;
   }
 
-  .vuiCard__footer {
+  .vuiCard__body {
     border-top: $colorAccentLightShade;
   }
 }