From 124693bb0cad1eabf9c585ff1bdc05965b9153ad Mon Sep 17 00:00:00 2001 From: Andy Hill Date: Mon, 26 Aug 2024 13:34:22 -0400 Subject: [PATCH] feat: EPMDW-3476 - Allow node prop type for labels (#447) --- .../Accordion/AccordionPanelHeader.jsx | 27 ++++++++--------- src/components/Checkbox/Checkbox.jsx | 2 +- src/components/Dropdown/DropdownGroup.jsx | 2 +- src/components/File/File.jsx | 2 +- src/components/Footer/ResourceFooter.jsx | 4 +-- src/components/Input/common.jsx | 2 +- .../PageContent/StepIndicator/Step.jsx | 20 ++++++------- src/components/Sidenav/Sidenav.jsx | 30 +++++++------------ 8 files changed, 38 insertions(+), 51 deletions(-) diff --git a/src/components/Accordion/AccordionPanelHeader.jsx b/src/components/Accordion/AccordionPanelHeader.jsx index fce1f6be..7d25d29a 100644 --- a/src/components/Accordion/AccordionPanelHeader.jsx +++ b/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 (

- ) + ); }; 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); diff --git a/src/components/Checkbox/Checkbox.jsx b/src/components/Checkbox/Checkbox.jsx index 2f77824d..9d8a8f30 100644 --- a/src/components/Checkbox/Checkbox.jsx +++ b/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, }; diff --git a/src/components/Dropdown/DropdownGroup.jsx b/src/components/Dropdown/DropdownGroup.jsx index 479bee21..eb8252ff 100644 --- a/src/components/Dropdown/DropdownGroup.jsx +++ b/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; diff --git a/src/components/File/File.jsx b/src/components/File/File.jsx index cae666e9..9a7fb064 100644 --- a/src/components/File/File.jsx +++ b/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 */ diff --git a/src/components/Footer/ResourceFooter.jsx b/src/components/Footer/ResourceFooter.jsx index 96a7b2ce..ab128674 100644 --- a/src/components/Footer/ResourceFooter.jsx +++ b/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"]), }; diff --git a/src/components/Input/common.jsx b/src/components/Input/common.jsx index e2c52974..a22091c4 100644 --- a/src/components/Input/common.jsx +++ b/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 */ diff --git a/src/components/PageContent/StepIndicator/Step.jsx b/src/components/PageContent/StepIndicator/Step.jsx index 5e07359f..d4ff0dea 100644 --- a/src/components/PageContent/StepIndicator/Step.jsx +++ b/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 (
  • {indicator}
    • - ) + ); }; Step.displayName = "Step"; @@ -53,9 +50,10 @@ 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 */ @@ -63,7 +61,7 @@ Step.propTypes = { /** 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); diff --git a/src/components/Sidenav/Sidenav.jsx b/src/components/Sidenav/Sidenav.jsx index b9d20420..37d731ab 100644 --- a/src/components/Sidenav/Sidenav.jsx +++ b/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,14 +17,11 @@ 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 ( - ) + ); }; Sidenav.displayName = "Sidenav"; @@ -50,9 +42,9 @@ 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;