feat(Drawer): make padding size configurable via prop

narmi · May 31, 2024 · fbfa3a9 · fbfa3a9
1 parent a95f9e0
commit fbfa3a9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 19 deletions.
diff --git a/src/Drawer/index.js b/src/Drawer/index.js
@@ -26,6 +26,7 @@ const Drawer = ({
   children,
   position = "right",
   depth = "70%",
+  paddingSize = "xxl",
   testId,
 }) => {
   const shimRef = useRef(null);
@@ -34,7 +35,7 @@ const Drawer = ({
   const isTransitioning = useMountTransition(isOpen, 300);
   const { m } = useBreakpoints();
   const isHorizontal = position === "bottom" || position === "top";
-  const isVerticalMobileDrawer = (!m) && !isHorizontal;
+  const isVerticalMobileDrawer = !m && !isHorizontal;
 
   // The depth is how far the drawer opens out, but the CSS prop depends
   // on whether the Drawer is vertical or not
@@ -90,7 +91,7 @@ const Drawer = ({
       ref={navRef}
       onClick={handleShimClick}
       style={depthStyle}
-      className={`drawer drawer--${position} navigation  ${
+      className={`drawer padding--all--xxl drawer--${position} navigation  ${
         isOpen && isTransitioning ? `navigation--open--${position}` : ""
       }`}
       data-testid={testId}
@@ -161,6 +162,7 @@ const Drawer = ({
       style={depthStyle}
       className={cc([
         "drawer",
+        `padding--all--${paddingSize}`,
         `drawer--${position}`,
         {
           [`drawer--open--${position}`]: isOpen && isTransitioning,
@@ -174,25 +176,15 @@ const Drawer = ({
         <>
           {showControls && (
             <>
-              <div
-                onClick={onPrev}
-              >
-                <span
-                  className="narmi-icon-chevron-left fontSize--heading3"
-                />
+              <div onClick={onPrev}>
+                <span className="narmi-icon-chevron-left fontSize--heading3" />
               </div>
-              <div
-                onClick={onNext}
-              >
-                <span
-                  className="narmi-icon-chevron-right fontSize--heading3"
-                />
+              <div onClick={onNext}>
+                <span className="narmi-icon-chevron-right fontSize--heading3" />
               </div>
             </>
           )}
-          <div
-            onClick={onUserDismiss}
-          >
+          <div onClick={onUserDismiss}>
             <span className="narmi-icon-x clickable fontSize--heading3" />
           </div>
         </>
@@ -264,6 +256,10 @@ Drawer.propTypes = {
    * Valid values are `right`, `left`, `bottom`, `top`.
    */
   position: PropTypes.oneOf(["right", "left", "top", "bottom"]),
+  /**
+   * Sets the padding amount, or disable padding by passing "none"
+   */
+  paddingSize: PropTypes.oneOf(["none", "xs", "s", "m", "l", "xl", "xxl"]),
   /** Optional value for `data-testid` attribute */
   testId: PropTypes.string,
 };

diff --git a/src/Drawer/index.scss b/src/Drawer/index.scss
@@ -12,7 +12,6 @@
   transition: transform var(--transition-speed-fast) ease;
   border: var(--border-size-s);
   border-color: var(--border-color-light);
-  padding: var(--space-xxl);
   z-index: 3;
 }
 .drawer--left {
@@ -74,7 +73,8 @@ because we need to replace the left/right controls with controls that are inside
   visibility: hidden;
   opacity: 0;
   background: rgba(0, 0, 0, 0.5);
-  transition: opacity var(--transition-speed-slow) ease,
+  transition:
+    opacity var(--transition-speed-slow) ease,
     visibility var(--transition-speed-slow) ease;
   width: 100%;
   height: 100%;