feat: Added default container size (#427)

indiana-university · May 15, 2024 · cca9c3b · cca9c3b
1 parent dbf2a8b
commit cca9c3b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/src/components/Footer/BaseFooter.jsx b/src/components/Footer/BaseFooter.jsx
@@ -8,7 +8,7 @@ import * as PropTypes from "prop-types";
 
 import Icon from "../util/RivetIcons";
 import * as Rivet from "../util/Rivet";
-import { parseRivetMultiListUtility }from "../util/RivetizeAux";
+import { parseRivetMultiListUtility } from "../util/RivetizeAux";
 
 /**
  * Use the Base Footer component at the bottom of all pages
@@ -28,40 +28,41 @@ const BaseFooter = ({
     variant ? `rvt-footer-base--${variant}` : "",
     className
   );
-  const year = !copyrightYear ? (new Date()).getFullYear() : copyrightYear
+  const year = !copyrightYear ? new Date().getFullYear() : copyrightYear;
   return (
     <footer className={classes} {...attrs}>
       <div className={parseRivetMultiListUtility(size, SIZES, "rvt-container")}>
         <div className="rvt-footer-base__inner">
           <div className="rvt-footer-base__logo">
             <Icon height="24" name="logo" viewBox="0 0 24 24" width="24" />
           </div>
-          <ul className={`rvt-footer-base__list ${"full" === size ? "rvt-m-lr-sm" : ''}`}>
+          <ul
+            className={`rvt-footer-base__list ${
+              "full" === size ? "rvt-m-lr-sm" : ""
+            }`}
+          >
             <BaseFooterLink
               openInNewWindow={openInNewWindow}
               url="https://accessibility.iu.edu/assistance/"
             >
               Accessibility
             </BaseFooterLink>
-            <BaseFooterLink
-              openInNewWindow={openInNewWindow}
-              url={privacyUrl}
-            >
+            <BaseFooterLink openInNewWindow={openInNewWindow} url={privacyUrl}>
               Privacy Notice
             </BaseFooterLink>
             <li className="rvt-footer-base__item">
               <a
                 className="rvt-footer-base__link"
                 href="https://www.iu.edu/copyright/index.html"
-                {...(openInNewWindow && {target: "_blank" })}
+                {...(openInNewWindow && { target: "_blank" })}
               >
                 Copyright
               </a>{" "}
               © {year} The Trustees of{" "}
               <a
                 className="rvt-footer-base__link"
                 href="https://www.iu.edu"
-                {...(openInNewWindow && {target: "_blank" })}
+                {...(openInNewWindow && { target: "_blank" })}
               >
                 Indiana University
               </a>
@@ -82,24 +83,24 @@ const BaseFooterLink = ({ children, openInNewWindow, url }) => {
       <a
         className="rvt-footer-base__link"
         href={url}
-        {...(openInNewWindow && {target: "_blank" })}
+        {...(openInNewWindow && { target: "_blank" })}
       >
         {children}
       </a>
     </li>
   );
 };
 
-const SIZES = ["sm", "md", "lg", "xl"]
+const SIZES = ["sm", "md", "lg", "xl"];
 
 BaseFooter.displayName = "BaseFooter";
 BaseFooter.propTypes = {
   /** The year of the page copyright */
   copyrightYear: PropTypes.string,
-  /** The url for privay link, if no provided url link will not display*/
+  /** The url for privacy link, if no provided url link will not display*/
   privacyUrl: PropTypes.string,
   /** The container size for content */
-  size:PropTypes.oneOf([...SIZES, "full"]),
+  size: PropTypes.oneOf([...SIZES, "full"]),
   /** The variant type which determines how the footer is styled */
   variant: PropTypes.oneOf(["light"]),
 };

diff --git a/src/components/Grid/Container.jsx b/src/components/Grid/Container.jsx
@@ -22,7 +22,7 @@ const Container = ({
   className,
   children,
   id = Rivet.shortuid(),
-  size,
+  size = "md",
   ...attrs
 }) => (
   <div

diff --git a/src/components/Grid/Container.test.jsx b/src/components/Grid/Container.test.jsx
@@ -11,8 +11,9 @@ describe("<Container />", () => {
   describe("Rendering and text", () => {
     const content = "content";
 
+
     it("should render without throwing an error", async () => {
-      render(<Container size="md">{content}</Container>);
+      render(<Container>{content}</Container>);
 
       const container = await screen.findByText(content);
       expect(container).toHaveClass("rvt-container-md");
@@ -25,6 +26,7 @@ describe("<Container />", () => {
       const container = await screen.findByText(content);
       expect(container).toHaveClass(`rvt-container-${size}`);
     });
+
 
     it("should render the md class if size is md", async () => {
       const size = "md";