feat: EPMDW-3476 - Allow node prop type for labels (#447)

src/components/Accordion/AccordionPanelHeader.jsx

@@ -9,7 +9,7 @@ import Icon, { IconNames } from "../util/RivetIcons.jsx";
 import * as Rivet from "../util/Rivet";
 import { TestUtils } from "../util/TestUtils";
 
-const testIds = TestUtils.Accordion
+const testIds = TestUtils.Accordion;
 
 const AccordionPanelHeader = (props) => {
   const {
@@ -23,20 +23,17 @@ const AccordionPanelHeader = (props) => {
     onClick,
     testMode = false,
     ...attrs
-  } = props
-  const classNameArr = [
-    "rvt-accordion__summary",
-    className
-  ]
+  } = props;
+  const classNameArr = ["rvt-accordion__summary", className];
   const handleClick = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-    onClick()
-  }
+    e.preventDefault();
+    e.stopPropagation();
+    onClick();
+  };
   return (
     <h3
-        className={classNames(classNameArr)}
-        {...(testMode && { "data-testid": `${testIds.header}-${controlId}` })}
+      className={classNames(classNameArr)}
+      {...(testMode && { "data-testid": `${testIds.header}-${controlId}` })}
     >
       <button
         aria-expanded={isOpen}
@@ -51,7 +48,7 @@ const AccordionPanelHeader = (props) => {
         </div>
       </button>
     </h3>
-  )
+  );
 };
 
 AccordionPanelHeader.displayName = "AccordionPanelHeader";
@@ -63,11 +60,11 @@ AccordionPanelHeader.propTypes = {
   /** Icon/Indicator for an open panel */
   iconOpened: PropTypes.element,
   /** Header label for the corresponding panel */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /** Handler for onClick event of the header */
   onClick: PropTypes.func.isRequired,
   /** [Developer] Adds data-testId attributes for component testing */
-  testMode: PropTypes.bool
+  testMode: PropTypes.bool,
 };
 
 export default Rivet.rivetize(AccordionPanelHeader);

src/components/Checkbox/Checkbox.jsx

@@ -46,7 +46,7 @@ Checkbox.propTypes = {
   /** A unique identifier for the alert */
   id: PropTypes.string,
   /** Label for the checkbox */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /** Whether to display the label in non-screen-reader contexts */
   labelVisibility: PropTypes.bool,
 };

src/components/Dropdown/DropdownGroup.jsx

@@ -23,7 +23,7 @@ DropdownGroup.propTypes = {
   /**
    * Optional header for a related group of menu items.
    */
-  label: PropTypes.string,
+  label: PropTypes.node,
 };
 
 export default DropdownGroup;

src/components/File/File.jsx

@@ -100,7 +100,7 @@ File.propTypes = {
     PropTypes.object,
   ]),
   /** The text to display on the file selection button, by default this is 'Upload multiple files' for multiple selection component or 'Upload a file' */
-  label: PropTypes.string,
+  label: PropTypes.node,
   /** Whether to allow multiple files to be selected */
   multiple: PropTypes.bool,
   /** custom behavior when the file selection changes */

src/components/Footer/ResourceFooter.jsx

@@ -44,8 +44,8 @@ ResourceFooter.propTypes = {
   containerClas: PropTypes.string,
   /** A unique identifier for the resource footer */
   id: PropTypes.string,
-  /** The label for the resource footer (screen reader only) */
-  label: PropTypes.string,
+  /** The label for the resource footer */
+  label: PropTypes.node,
   /** The grid container size for content */
   size: PropTypes.oneOf(["sm", "md", "lg", "xl"]),
 };

src/components/Input/common.jsx

@@ -39,7 +39,7 @@ export const propTypes = {
   /** Element to group at the end of the input */
   appendment: PropTypes.node,
   /** The label for the input */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /** Visibility modifier for the input's label */
   labelVisibility: PropTypes.oneOf(["screen-reader-only"]),
   /** An optional note that will be displayed below the input */

src/components/PageContent/StepIndicator/Step.jsx

@@ -8,7 +8,7 @@ import * as React from "react";
 import * as Rivet from "../../util/Rivet";
 import { TestUtils } from "../../util/TestUtils";
 
-const testIds = TestUtils.StepIndicator
+const testIds = TestUtils.StepIndicator;
 const Step = ({
   children,
   className,
@@ -21,14 +21,11 @@ const Step = ({
   variant,
   ...attrs
 }) => {
-  const classNameArr = [
-    "rvt-steps__item",
-    className
-  ]
+  const classNameArr = ["rvt-steps__item", className];
   const indicatorClassNameArr = [
     "rvt-steps__indicator",
-    variant ? `rvt-steps__indicator--${variant}` : ""
-  ]
+    variant ? `rvt-steps__indicator--${variant}` : "",
+  ];
   return (
     <li
       className={classNames(classNameArr)}
@@ -45,25 +42,26 @@ const Step = ({
         <span className={classNames(indicatorClassNameArr)}>{indicator}</span>
       </a>
     </li>
-  )
+  );
 };
 
 Step.displayName = "Step";
 Step.propTypes = {
   /** Indicates item is current step */
   current: PropTypes.bool,
   /** An brief indicator for the step */
-  indicator: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  indicator: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+    .isRequired,
   /** Label for the step */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /** A click event for step */
   onClick: PropTypes.func,
   /** [Developer] Adds data-testId attributes for component testing */
   testMode: PropTypes.bool,
   /** A url for step */
   url: PropTypes.string.isRequired,
   /** The variant type which determines how the step is styled */
-  variant: PropTypes.oneOf(["success", "warning", "danger"])
+  variant: PropTypes.oneOf(["success", "warning", "danger"]),
 };
 
 export default Rivet.rivetize(Step);

src/components/Sidenav/Sidenav.jsx

@@ -7,8 +7,8 @@ import * as PropTypes from "prop-types";
 import * as React from "react";
 import * as Rivet from "../util/Rivet";
 import { TestUtils } from "../util/TestUtils";
-import SidenavItem from "./SidenavItem"
-import SidenavMenu from "./SidenavMenu"
+import SidenavItem from "./SidenavItem";
+import SidenavMenu from "./SidenavMenu";
 /**
  * Create a vertical list of navigation links for use in a sidebar
  */
@@ -17,42 +17,34 @@ const Sidenav = ({
   children,
   id = Rivet.shortuid(),
   label,
-  testMode =  false,
+  testMode = false,
   ...attrs
-}) =>{
-  const classNameArr = [
-    "rvt-sidenav",
-    className
-  ]
-  const labelId = `${id}-sidenav-label`
+}) => {
+  const classNameArr = ["rvt-sidenav", className];
+  const labelId = `${id}-sidenav-label`;
   return (
     <nav
       aria-labelledby={labelId}
       className={classNames(classNameArr)}
       {...(testMode && { "data-testid": TestUtils.Sidenav.container })}
       {...attrs}
     >
-      <span
-        className="rvt-sidenav__label"
-        id={labelId}
-      >
+      <span className="rvt-sidenav__label" id={labelId}>
         {label}
       </span>
-      <ul className="rvt-sidenav__list">
-        {children}
-      </ul>
+      <ul className="rvt-sidenav__list">{children}</ul>
     </nav>
-  )
+  );
 };
 
 Sidenav.displayName = "Sidenav";
 Sidenav.propTypes = {
   /** A unique identifier for the component */
   id: PropTypes.string,
   /** The label for the navigation */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /** [Developer] Adds data-testId attributes for component testing */
-  testMode: PropTypes.bool
+  testMode: PropTypes.bool,
 };
 
 Sidenav.Item = SidenavItem;