Merge branch 'main' into feat/NDS-266-details-table

narmi · Aug 1, 2024 · c83010b · c83010b
2 parents e131590 + f7d31f2
commit c83010b
Show file tree

Hide file tree

Showing 18 changed files with 1,850 additions and 1,609 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [3.45.2](https://github.com/narmi/design_system/compare/v3.45.1...v3.45.2) (2024-07-30)
+
+
+### Bug Fixes
+
+* **MenuButton:** prevent react-aria scrolljacking ([378f971](https://github.com/narmi/design_system/commit/378f97190d4bc55a094a588b50beabadbc945446))
+
+### [3.45.1](https://github.com/narmi/design_system/compare/v3.45.0...v3.45.1) (2024-07-30)
+
+
+### Bug Fixes
+
+* **Drawer:** add classname to navigation icons in mobile drawer ([ecc04f6](https://github.com/narmi/design_system/commit/ecc04f6c75407a0e9812ed9617233e3a1d850684))
+
+## [3.45.0](https://github.com/narmi/design_system/compare/v3.44.0...v3.45.0) (2024-07-25)
+
+
+### Features
+
+* **icons:** update 'bank' icon shape ([ee9c4fb](https://github.com/narmi/design_system/commit/ee9c4fbe6b008a97c7c0e251799d68ab2192365b))
+
+## [3.44.0](https://github.com/narmi/design_system/compare/v3.43.0...v3.44.0) (2024-07-19)
+
+
+### Features
+
+* **IconButton:** support configuring the icon button element tag ([1bc8201](https://github.com/narmi/design_system/commit/1bc82013c8467876ce3b8e46fc4cb69f0c4f0081))
+
+## [3.43.0](https://github.com/narmi/design_system/compare/v3.42.0...v3.43.0) (2024-07-19)
+
+
+### Features
+
+* **CollapsibleCard:** add option for caret trigger ([3348d24](https://github.com/narmi/design_system/commit/3348d247495e92cf07bba97e5d0bcc50f3c02dda))
+
 ## [3.42.0](https://github.com/narmi/design_system/compare/v3.41.4...v3.42.0) (2024-06-28)
 
 

diff --git a/contributing/naming-conventions.md b/contributing/naming-conventions.md
@@ -42,7 +42,7 @@ Use auxillary verb prefixes for boolean props:
 -selected
 -portal
 +isSelected
-+usePortal
++hasPortal
 ```
 
 Props that accept more than one thing should be pluralized:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@narmi/design_system",
-  "version": "3.42.0",
+  "version": "3.45.2",
   "description": "⚡ A consistent look-and-feel and extensible interface for Narmi experiences 🔥",
   "main": "dist/index.js",
   "files": [

diff --git a/src/CollapsibleCard/index.js b/src/CollapsibleCard/index.js
@@ -1,12 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
 import cc from "classcat";
+import Row from "../Row";
+import IconButton from "../IconButton";
 
 const CollapsibleCard = ({
   title,
   subtitle,
   statusText,
   isOpen,
+  trigger = "header",
   onOpen = () => {},
   onClose = () => {},
   isDisabled = false,
@@ -32,42 +35,84 @@ const CollapsibleCard = ({
     }
   };
 
+  const onCaretClick = () => {
+    setHover(false);
+    if (isOpen) {
+      onClose();
+    } else {
+      onOpen();
+    }
+  };
+
+  const caretTriggerJsx = (
+    <div
+      className={cc([
+        "collapsible-card-trigger",
+        "alignChild--center--center",
+        {
+          "padding--left": trigger == "caret-start",
+          "padding--right--l": trigger == "caret-end",
+        },
+      ])}
+    >
+      <IconButton
+        kind="action"
+        label={isOpen ? "Close" : "Open"}
+        onClick={onCaretClick}
+        name={`chevron-${isOpen ? "up" : "down"}`}
+        textSize="l"
+        onKeyUp={({ key }) => {
+          if (key === "Enter") onCaretClick();
+        }}
+      />
+    </div>
+  );
+
   const titleContainerJSX = (
     <div className="collapsible-card--title-container">
-      <div>
-        <h4
-          className={cc([
-            !isDisabled ? "title" : "title--disabled",
-            "fontWeight--bold",
-            "fontSize--l",
-            "padding--top--l",
-            "padding--left--l",
-            "fontFamily--body",
-          ])}
-        >
-          {title}
-        </h4>
-        <div
-          className={cc([
-            !isDisabled ? "subtitle" : "subtitle--disabled",
-            "padding--left--l",
-            "padding--bottom--l",
-            "margin--top--xxs",
-          ])}
-        >
-          {subtitle}
-        </div>
-      </div>
-      {statusText && (
-        <div style={{ display: "flex" }}>
+      <Row alignItems="center" gapSize="s">
+        {trigger === "caret-start" && (
+          <Row.Item shrink>{caretTriggerJsx}</Row.Item>
+        )}
+        <Row.Item>
+          <h4
+            className={cc([
+              !isDisabled ? "title" : "title--disabled",
+              "fontWeight--bold",
+              "fontSize--l",
+              "padding--top--l",
+              "fontFamily--body",
+              {
+                "padding--left--l": trigger !== "caret-start",
+              },
+            ])}
+          >
+            {title}
+          </h4>
           <div
-            className="collapsible-card--statusText padding--right--l fontSize--s"
-            style={{ alignSelf: "center" }}
+            className={cc([
+              !isDisabled ? "subtitle" : "subtitle--disabled",
+              "padding--bottom--l",
+              "margin--top--xxs",
+              {
+                "padding--left--l": trigger !== "caret-start",
+              },
+            ])}
           >
-            {statusText}
+            {subtitle}
           </div>
-        </div>
-      )}
+        </Row.Item>
+        {trigger === "caret-end" && (
+          <Row.Item shrink>{caretTriggerJsx}</Row.Item>
+        )}
+        {statusText && (
+          <Row.Item shrink>
+            <div className="collapsible-card--statusText padding--right--l fontSize--s alignChild--right--center">
+              <span>{statusText}</span>
+            </div>
+          </Row.Item>
+        )}
+      </Row>
     </div>
   );
 
@@ -76,23 +121,30 @@ const CollapsibleCard = ({
       className={cc([
         "collapsible-card--content-card",
         {
+          "content-card--hasCaretTrigger": trigger.includes("caret"),
           "content-card--error": hasError,
-          "content-card--hover": !disableHover && hover,
-          "collapsible-card--no-user-select": !disableHover,
+          "content-card--hover": trigger === "header" && !disableHover && hover,
+          "collapsible-card--no-user-select":
+            !disableHover || trigger === "header",
         },
         "rounded--bottom",
         "bgColor--white",
       ])}
     >
       <div
         className="collapsible-card--title-expanded"
-        role="button"
-        tabIndex={0}
+      role={trigger === "header" ? "button" : undefined}
+      tabIndex={trigger === "header" ? 0 : undefined}
         onKeyUp={({ key }) => {
-          if (key === "Enter") onTitleContainerClick(false, "close");
+          if (key === "Enter" && trigger === "header")
+            onTitleContainerClick(false, "close");
         }}
         aria-expanded="true"
-        onClick={() => onTitleContainerClick(false, "close")}
+        onClick={() => {
+          if (trigger === "header") {
+            onTitleContainerClick(false, "close");
+          }
+        }}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
       >
@@ -105,23 +157,30 @@ const CollapsibleCard = ({
       className={cc([
         "collapsible-card--content-card",
         {
+          "content-card--hasCaretTrigger": trigger.includes("caret"),
           "content-card--error": hasError,
           "content-card--disabled": isDisabled,
-          "content-card--hover": !disableHover && hover,
-          "collapsible-card--no-user-select": !disableHover,
+          "content-card--hover": trigger === "header" && !disableHover && hover,
+          "collapsible-card--no-user-select":
+            !disableHover || trigger === "header",
         },
         "content-card--closed",
         "rounded--all",
         "bgColor--white",
       ])}
-      role="button"
-      tabIndex={0}
+      role={trigger === "header" ? "button" : undefined}
+      tabIndex={trigger === "header" ? 0 : undefined}
       onKeyUp={({ key }) => {
-        if (key === "Enter") onTitleContainerClick(isDisabled, "open");
+        if (key === "Enter" && trigger === "header")
+          onTitleContainerClick(isDisabled, "open");
       }}
       aria-expanded="false"
       aria-disabled={isDisabled ? "true" : "false"}
-      onClick={() => onTitleContainerClick(isDisabled, "open")}
+      onClick={() => {
+        if (trigger === "header") {
+          onTitleContainerClick(isDisabled, "open");
+        }
+      }}
     >
       {titleContainerJSX}
     </div>
@@ -154,6 +213,8 @@ CollapsibleCard.propTypes = {
   hasError: PropTypes.bool,
   /** Disable hover. Useful for cards that are always open */
   disableHover: PropTypes.bool,
+  /** Controls which element is used as the open/close trigger */
+  trigger: PropTypes.oneOf(["header", "caret-start", "caret-end"]),
 };
 
 export default CollapsibleCard;
diff --git a/src/CollapsibleCard/index.scss b/src/CollapsibleCard/index.scss
@@ -8,6 +8,10 @@
   border-radius: rem(8px);
 }
 
+.collapsible-card-trigger {
+  height: 100%;
+}
+
 .collapsible-card--content-card.content-card--disabled {
   background-color: var(--bgColor-smokeGrey) !important;
   border: 1px solid var(--color-lightGrey) !important;
@@ -27,6 +31,10 @@
   border: 1px solid var(--theme-primary);
   cursor: pointer;
 }
+.collapsible-card--content-card.content-card--hasCaretTrigger.content-card--closed:hover {
+  border: 1px solid var(--color-lightGrey) !important;
+  cursor: unset !important;
+}
 .collapsible-card--title-container {
   display: flex;
   justify-content: space-between;
@@ -54,4 +62,5 @@
 
 .collapsible-card--statusText {
   color: var(--color-mediumGrey);
+  height: 100%;
 }
diff --git a/src/CollapsibleCard/index.stories.js b/src/CollapsibleCard/index.stories.js
@@ -108,6 +108,21 @@ Overview.args = {
   ),
 };
 
+export const CaretAsTrigger = Template.bind({});
+CaretAsTrigger.args = {
+  title: "Your title here",
+  trigger: "caret-end",
+  subtitle:
+    "Only the caret opens the card. Start and End positions are both supported.",
+  onOpen: () => {},
+  onClose: () => {},
+  children: (
+    <>
+      <div>Any content can go in here!</div>
+    </>
+  ),
+};
+
 export const WithStatusText = ChangingHelperText.bind({});
 WithStatusText.args = {
   title: "Your title here",

diff --git a/src/Drawer/index.js b/src/Drawer/index.js
@@ -176,15 +176,15 @@ const Drawer = ({
         <>
           {showControls && (
             <>
-              <div onClick={onPrev}>
+              <div className="mobile-navigation-button" onClick={onPrev}>
                 <span className="narmi-icon-chevron-left fontSize--heading3" />
               </div>
-              <div onClick={onNext}>
+              <div className="mobile-navigation-button" onClick={onNext}>
                 <span className="narmi-icon-chevron-right fontSize--heading3" />
               </div>
             </>
           )}
-          <div onClick={onUserDismiss}>
+          <div className="mobile-navigation-button" onClick={onUserDismiss}>
             <span className="narmi-icon-x clickable fontSize--heading3" />
           </div>
         </>

diff --git a/src/Drawer/index.scss b/src/Drawer/index.scss
@@ -52,20 +52,22 @@ because we need to replace the left/right controls with controls that are inside
 */
 .drawer--vertical--mobile {
   padding: 48px var(--space-l);
-  .narmi-icon-x,
-  .narmi-icon-chevron-left,
-  .narmi-icon-chevron-right {
-    position: absolute;
-    top: var(--space-s);
-  }
-  .narmi-icon-x {
-    right: var(--space-s);
-  }
-  .narmi-icon-chevron-left {
-    left: var(--space-s);
-  }
-  .narmi-icon-chevron-right {
-    left: 45px;
+  .mobile-navigation-button {
+    .narmi-icon-x,
+    .narmi-icon-chevron-left,
+    .narmi-icon-chevron-right {
+      position: absolute;
+      top: var(--space-s);
+    }
+    .narmi-icon-x {
+      right: var(--space-s);
+    }
+    .narmi-icon-chevron-left {
+      left: var(--space-s);
+    }
+    .narmi-icon-chevron-right {
+      left: 45px;
+    }
   }
 }