From 6a71fa7effaaa605052507cac0bc0231db52d645 Mon Sep 17 00:00:00 2001
From: "jennifer.mullen" <jennifer.mullen@kajabi.com>
Date: Tue, 7 Jan 2025 14:06:45 -0800
Subject: [PATCH 1/3] feat: aadd test IDs, round 1

---
 .../sage-react/lib/Accordion/Accordion.jsx    |  5 +++-
 .../lib/Accordion/Accordion.story.jsx         | 19 +++++++++++----
 packages/sage-react/lib/Alert/Alert.jsx       | 14 +++++++----
 packages/sage-react/lib/Alert/Alert.story.jsx | 10 ++++++++
 packages/sage-react/lib/Badge/Badge.jsx       |  4 ++++
 packages/sage-react/lib/Badge/Badge.story.jsx |  9 +++++---
 packages/sage-react/lib/Banner/Banner.jsx     |  3 +++
 .../lib/Breadcrumbs/Breadcrumbs.jsx           |  5 ++++
 packages/sage-react/lib/Button/Button.jsx     |  5 ++++
 .../lib/Button/ButtonGroup.story.jsx          |  4 ++--
 packages/sage-react/lib/Card/Card.jsx         |  3 +++
 .../sage-react/lib/CopyButton/CopyButton.jsx  |  6 ++++-
 .../lib/CopyButton/CopyButton.story.jsx       |  2 ++
 packages/sage-react/lib/DataCard/DataCard.jsx |  5 +++-
 .../lib/DataCard/DataCardHeader.jsx           |  3 ++-
 .../lib/ExpandableCard/ExpandableCard.jsx     | 10 +++++---
 packages/sage-react/lib/Hint/Hint.jsx         |  5 +++-
 packages/sage-react/lib/Hint/Hint.story.jsx   |  1 +
 packages/sage-react/lib/Icon/Icon.jsx         |  6 +++++
 packages/sage-react/lib/Input/Input.jsx       |  5 +++-
 packages/sage-react/lib/Input/Input.story.jsx |  2 ++
 packages/sage-react/lib/Link/Link.jsx         |  5 ++++
 packages/sage-react/lib/Link/Link.story.jsx   |  4 ++--
 .../sage-react/lib/MediaTile/MediaTile.jsx    |  5 +++-
 .../lib/MediaTile/MediaTile.story.jsx         |  1 +
 packages/sage-react/lib/Modal/Modal.jsx       |  6 ++++-
 .../lib/NextBestAction/NextBestAction.jsx     |  7 +++++-
 .../NextBestAction/NextBestAction.story.jsx   |  2 ++
 .../lib/PageHeading/PageHeading.jsx           | 10 ++++----
 packages/sage-react/lib/Panel/Panel.jsx       |  5 +++-
 .../lib/ProgressBar/ProgressBar.jsx           |  5 +++-
 .../lib/ProgressBar/ProgressBar.story.jsx     |  2 ++
 packages/sage-react/lib/Property/Property.jsx |  5 +++-
 .../lib/Property/Property.story.jsx           |  3 ++-
 packages/sage-react/lib/Search/Search.jsx     |  5 +++-
 packages/sage-react/lib/Select/Select.jsx     |  5 +++-
 .../sage-react/lib/Select/Select.story.jsx    | 13 +++++++----
 packages/sage-react/lib/StatBox/StatBox.jsx   |  4 ++++
 .../sage-react/lib/StatBox/StatBox.story.jsx  |  6 +++++
 packages/sage-react/lib/Table/Table.jsx       |  8 ++++++-
 packages/sage-react/lib/Table/TableRow.jsx    | 23 ++++++++++++++++---
 packages/sage-react/lib/Table/configs.js      |  1 +
 packages/sage-react/lib/Textarea/Textarea.jsx |  5 +++-
 .../lib/Textarea/Textarea.story.jsx           |  1 +
 packages/sage-react/lib/Toast/Toast.jsx       |  6 ++++-
 packages/sage-react/lib/Toast/Toast.story.jsx |  2 ++
 packages/sage-react/lib/Toggle/Checkbox.jsx   |  3 +++
 packages/sage-react/lib/Tooltip/Tooltip.jsx   |  4 ++++
 .../sage-react/lib/Tooltip/TooltipElement.jsx |  4 ++++
 .../automationTestIds/automationTestIds.js    | 20 ++++++++++++++++
 .../lib/configs/automationTestIds/index.js    |  1 +
 packages/sage-react/lib/configs/index.js      |  1 +
 52 files changed, 249 insertions(+), 49 deletions(-)
 create mode 100644 packages/sage-react/lib/configs/automationTestIds/automationTestIds.js
 create mode 100644 packages/sage-react/lib/configs/automationTestIds/index.js

diff --git a/packages/sage-react/lib/Accordion/Accordion.jsx b/packages/sage-react/lib/Accordion/Accordion.jsx
index 138f6e73bb..a0e61abb84 100644
--- a/packages/sage-react/lib/Accordion/Accordion.jsx
+++ b/packages/sage-react/lib/Accordion/Accordion.jsx
@@ -7,6 +7,7 @@ export const Accordion = ({
   children,
   id,
   onlyOnePanelExpanded,
+  testId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -18,7 +19,7 @@ export const Accordion = ({
   );
 
   return (
-    <div className={classNames} {...rest}>
+    <div className={classNames} {...rest} data-kjb-element={testId}>
       {children}
     </div>
   );
@@ -29,6 +30,7 @@ Accordion.defaultProps = {
   className: '',
   id: '',
   onlyOnePanelExpanded: false,
+  testId: null,
 };
 
 Accordion.propTypes = {
@@ -36,4 +38,5 @@ Accordion.propTypes = {
   className: PropTypes.string,
   id: PropTypes.string,
   onlyOnePanelExpanded: PropTypes.bool,
+  testId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Accordion/Accordion.story.jsx b/packages/sage-react/lib/Accordion/Accordion.story.jsx
index 632f31c70f..5daada7d4d 100644
--- a/packages/sage-react/lib/Accordion/Accordion.story.jsx
+++ b/packages/sage-react/lib/Accordion/Accordion.story.jsx
@@ -16,8 +16,8 @@ const MultipleTemplate = () => {
   };
 
   return (
-    <Accordion>
-      <ExpandableCard name="panel-1" expanded={activePanel === 'panel-1'} onClick={handleChange('panel-1')} alignArrowRight={true} triggerLabel="Expand">
+    <Accordion testId="exampleSingleAccordion">
+      <ExpandableCard name="panel-1" expanded={activePanel === 'panel-1'} onClick={handleChange('panel-1')} alignArrowRight={true} testId="firstExamplePanel" triggerLabel="Expand">
         <Checkbox
           checked={false}
           disabled={false}
@@ -25,6 +25,7 @@ const MultipleTemplate = () => {
           id="checkbox1-demo"
           label="Grant offers"
           name="checkbox1-demo"
+          testId="grantOffers"
         />
         <Checkbox
           checked={false}
@@ -33,6 +34,7 @@ const MultipleTemplate = () => {
           id="checkbox2-demo"
           label="Add tags"
           name="checkbox2-demo"
+          testId="addTags"
         />
         <Checkbox
           checked={false}
@@ -41,9 +43,10 @@ const MultipleTemplate = () => {
           id="checkbox3-demo"
           label="Subscribe to emails"
           name="checkbox3-demo"
+          testId="subscribeToEmails"
         />
       </ExpandableCard>
-      <ExpandableCard name="panel-2" alignArrowRight={true} expanded={activePanel === 'panel-2'} onClick={handleChange('panel-2')} triggerLabel="Expand">
+      <ExpandableCard name="panel-2" alignArrowRight={true} expanded={activePanel === 'panel-2'} onClick={handleChange('panel-2')} testId="secondExpandablePanel" triggerLabel="Expand">
         <Checkbox
           checked={false}
           disabled={false}
@@ -51,6 +54,7 @@ const MultipleTemplate = () => {
           id="checkbox1-demo"
           label="Grant offers"
           name="checkbox1-demo"
+          testId="grantOffers"
         />
         <Checkbox
           checked={false}
@@ -59,6 +63,7 @@ const MultipleTemplate = () => {
           id="checkbox2-demo"
           label="Add tags"
           name="checkbox2-demo"
+          testId="addTags"
         />
         <Checkbox
           checked={false}
@@ -67,9 +72,10 @@ const MultipleTemplate = () => {
           id="checkbox3-demo"
           label="Subscribe to emails"
           name="checkbox3-demo"
+          testId="subscribeToEmails"
         />
       </ExpandableCard>
-      <ExpandableCard name="panel-3" alignArrowRight={true} expanded={activePanel === 'panel-3'} onClick={handleChange('panel-3')} triggerLabel="Expand">
+      <ExpandableCard name="panel-3" alignArrowRight={true} expanded={activePanel === 'panel-3'} onClick={handleChange('panel-3')} testId="thirdExpandablePanel" triggerLabel="Expand">
         <Checkbox
           checked={false}
           disabled={false}
@@ -77,6 +83,7 @@ const MultipleTemplate = () => {
           id="checkbox1-demo"
           label="Grant offers"
           name="checkbox1-demo"
+          testId="grantOffers"
         />
         <Checkbox
           checked={false}
@@ -85,6 +92,7 @@ const MultipleTemplate = () => {
           id="checkbox2-demo"
           label="Add tags"
           name="checkbox2-demo"
+          testId="addTags"
         />
         <Checkbox
           checked={false}
@@ -93,6 +101,7 @@ const MultipleTemplate = () => {
           id="checkbox3-demo"
           label="Subscribe to emails"
           name="checkbox3-demo"
+          testId="subscribeToEmails"
         />
       </ExpandableCard>
     </Accordion>
@@ -101,7 +110,7 @@ const MultipleTemplate = () => {
 
 const DefaultTemplate = () => (
   <Accordion>
-    <ExpandableCard name="panel-1" alignArrowRight={true} triggerLabel="Expand">
+    <ExpandableCard name="panel-1" alignArrowRight={true} triggerLabel="Expand" testId="">
       <Checkbox
         checked={false}
         disabled={false}
diff --git a/packages/sage-react/lib/Alert/Alert.jsx b/packages/sage-react/lib/Alert/Alert.jsx
index 6a0648cb3c..d130fdfd7f 100644
--- a/packages/sage-react/lib/Alert/Alert.jsx
+++ b/packages/sage-react/lib/Alert/Alert.jsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 import { ALERT_COLORS, ALERT_PRIMARY_ACTION_CLASSNAME } from './configs';
-import { SageTokens } from '../configs';
+import { SageTokens, TestIds } from '../configs';
 
 export const Alert = ({
   actions,
@@ -15,6 +15,7 @@ export const Alert = ({
   icon,
   onDismiss,
   small,
+  testId,
   title,
   titleAddon,
   ...rest
@@ -58,17 +59,17 @@ export const Alert = ({
   };
 
   return !selfDismissed ? (
-    <div className={classNames} {...rest}>
-      <Icon icon={icon || getDefaultIcon()} className="sage-alert__icon" />
+    <div className={classNames} {...rest} data-kjb-element={testId}>
+      <Icon icon={icon || getDefaultIcon()} className="sage-alert__icon" testId={TestIds.al} />
       <div className="sage-alert__copy">
         {title && (
-          <h3 className="sage-alert__title">
+          <h3 className="sage-alert__title" data-kjb-element={TestIds.alertTitle}>
             {title}
             <span className="sage-alert__title--add-on"> {titleAddon}</span>
           </h3>
         )}
         {description && (
-          <p className="sage-alert__desc">{description}</p>
+          <p className="sage-alert__desc" data-kjb-element={TestIds.alertDescripton}>{description}</p>
         )}
       </div>
       {actions && (
@@ -87,6 +88,7 @@ export const Alert = ({
             value="Close"
             onClick={handleDismiss}
             aria-label="Close Alert"
+            testId="closeButton"
           />
         </div>
       )}
@@ -105,6 +107,7 @@ Alert.defaultProps = {
   icon: null,
   onDismiss: null,
   small: false,
+  testId: null,
   title: null,
   titleAddon: null,
 };
@@ -118,6 +121,7 @@ Alert.propTypes = {
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
   onDismiss: PropTypes.func,
   small: PropTypes.bool,
+  testId: PropTypes.string,
   title: PropTypes.string,
   titleAddon: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Alert/Alert.story.jsx b/packages/sage-react/lib/Alert/Alert.story.jsx
index 009f36681e..9455d3ad98 100644
--- a/packages/sage-react/lib/Alert/Alert.story.jsx
+++ b/packages/sage-react/lib/Alert/Alert.story.jsx
@@ -48,12 +48,14 @@ DefaultWithActions.args = {
       <Button
         className={Alert.PRIMARY_ACTION_CLASSNAME}
         color={Button.COLORS.PRIMARY}
+        testId="getUnlimitedPagesButton"
       >
         Get unlimited pages
       </Button>
       <Link
         href="//example.com"
         suppressDefaultClass
+        testId="checkUsageLink"
       >
         Check Usage
       </Link>
@@ -66,6 +68,7 @@ DismissableAlert.args = {
   description: 'Body duis rhoncus neque, sed nulla sed quis fames. Eu eu ut at odio ultrices orci varius habitant. Tempor vulputate in nisl massa eget id.',
   color: Alert.COLORS.DEFAULT,
   dismissable: true,
+  testId: 'exampleAlert',
   onClickDismiss: () => console.log('clicked to dismiss'), // eslint-disable-line
 };
 
@@ -80,11 +83,13 @@ DismissableAlertWithActions.args = {
       <Button
         className={Alert.PRIMARY_ACTION_CLASSNAME}
         color={Button.COLORS.PRIMARY}
+        testId="checkUsageButton"
       >
         Get unlimited pages
       </Button>
       <Link
         href="//example.com"
+        testId="checkUsage"
         suppressDefaultClass
       >
         Check Usage
@@ -97,17 +102,20 @@ export const NonDismissableAlert = Template.bind({});
 NonDismissableAlert.args = {
   color: Alert.COLORS.APPROACHING,
   description: 'Body duis rhoncus neque, sed nulla sed quis fames. Eu eu ut at odio ultrices orci varius habitant. Tempor vulputate in nisl massa eget id.',
+  testId: 'nonDismissableAlert',
   actions: (
     <>
       <Button
         className={Alert.PRIMARY_ACTION_CLASSNAME}
         color={Button.COLORS.PRIMARY}
+        testId="getUnlimitedPages"
       >
         Get unlimited pages
       </Button>
       <Link
         href="//example.com"
         suppressDefaultClass
+        testId="checkUsage"
       >
         Check Usage
       </Link>
@@ -121,11 +129,13 @@ SmallAlert.args = {
   dismissable: true,
   title: null,
   description: 'Body duis rhoncus neque, sed nulla sed quis fames et tu odio.',
+  testId: 'smallAlert',
   actions: (
     <>
       <Link
         href="//example.com"
         suppressDefaultClass
+        testId="checkUsage"
       >
         Check Usage
       </Link>
diff --git a/packages/sage-react/lib/Badge/Badge.jsx b/packages/sage-react/lib/Badge/Badge.jsx
index 6f5b95422f..471049f7a2 100644
--- a/packages/sage-react/lib/Badge/Badge.jsx
+++ b/packages/sage-react/lib/Badge/Badge.jsx
@@ -14,6 +14,7 @@ export const Badge = React.forwardRef(({
   isInteractive,
   isStatus,
   large,
+  testId,
   value,
   ...rest
 }, ref) => {
@@ -32,6 +33,7 @@ export const Badge = React.forwardRef(({
   return (
     <span
       className={classNames}
+      data-kjb-element={testId}
       ref={ref}
       {...containerAttributes}
     >
@@ -67,6 +69,7 @@ Badge.defaultProps = {
   isDropdown: false,
   isStatus: false,
   large: false,
+  testId: null,
 };
 
 Badge.propTypes = {
@@ -78,5 +81,6 @@ Badge.propTypes = {
   isDropdown: PropTypes.bool,
   isStatus: PropTypes.bool,
   large: PropTypes.bool,
+  testId: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
 };
diff --git a/packages/sage-react/lib/Badge/Badge.story.jsx b/packages/sage-react/lib/Badge/Badge.story.jsx
index 610eca92e0..ff19fd45dd 100644
--- a/packages/sage-react/lib/Badge/Badge.story.jsx
+++ b/packages/sage-react/lib/Badge/Badge.story.jsx
@@ -34,7 +34,8 @@ export const IndicatorBadge = Template.bind({});
 IndicatorBadge.args = {
   dot: (
     <Dot />
-  )
+  ),
+  testId: 'indicatorBadge',
 };
 
 export const InteractiveBadge = Template.bind({});
@@ -43,7 +44,8 @@ InteractiveBadge.args = {
   isInteractive: true,
   dot: (
     <Dot />
-  )
+  ),
+  testId: 'interactiveBadge',
 };
 
 export const LargeBadge = Template.bind({});
@@ -52,5 +54,6 @@ LargeBadge.args = {
   large: true,
   dot: (
     <Dot />
-  )
+  ),
+  testId: 'largeBadge',
 };
diff --git a/packages/sage-react/lib/Banner/Banner.jsx b/packages/sage-react/lib/Banner/Banner.jsx
index f16400852d..863470e54d 100644
--- a/packages/sage-react/lib/Banner/Banner.jsx
+++ b/packages/sage-react/lib/Banner/Banner.jsx
@@ -8,6 +8,7 @@ import { BANNER_TYPES } from './configs';
 export const Banner = ({
   active,
   bannerContext,
+  testId,
   ...rest
 }) => (
   (bannerContext !== null)
@@ -24,6 +25,7 @@ Banner.defaultProps = {
   dismissable: true,
   link: null,
   onDismiss: null,
+  testId: null,
   text: null,
   type: Banner.TYPES.DEFAULT,
 };
@@ -39,6 +41,7 @@ Banner.propTypes = {
     target: PropTypes.string
   }),
   onDismiss: PropTypes.func,
+  testId: PropTypes.string,
   text: PropTypes.string,
   type: PropTypes.oneOf(Object.values(BANNER_TYPES)),
 };
diff --git a/packages/sage-react/lib/Breadcrumbs/Breadcrumbs.jsx b/packages/sage-react/lib/Breadcrumbs/Breadcrumbs.jsx
index 15c00e0125..fcf9fcd94f 100644
--- a/packages/sage-react/lib/Breadcrumbs/Breadcrumbs.jsx
+++ b/packages/sage-react/lib/Breadcrumbs/Breadcrumbs.jsx
@@ -11,6 +11,7 @@ export const Breadcrumbs = ({
   icon,
   isProgressbar,
   items,
+  testId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -38,6 +39,7 @@ export const Breadcrumbs = ({
         className={`sage-breadcrumbs__link ${isCurrent && 'sage-breadcrumbs__link--current'}`}
         suppressDefaultClass={true}
         tag={linkTag}
+        testId="breadcrumbListItem"
         {...otherProps}
       >
         {(icon && items.length === 1 && i === 0) && (
@@ -59,6 +61,7 @@ export const Breadcrumbs = ({
     <nav
       aria-label="Breadcrumbs"
       className={classNames}
+      data-kjb-element={testId}
       {...rest}
     >
       {items.length > 1 ? (
@@ -81,6 +84,7 @@ Breadcrumbs.defaultProps = {
   icon: SageTokens.ICONS.CARET_LEFT,
   isProgressbar: false,
   items: [],
+  testId: null,
 };
 
 Breadcrumbs.propTypes = {
@@ -88,4 +92,5 @@ Breadcrumbs.propTypes = {
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
   isProgressbar: PropTypes.bool,
   items: PropTypes.arrayOf(breadcrumbItemPropTypes),
+  testId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Button/Button.jsx b/packages/sage-react/lib/Button/Button.jsx
index e7a256120d..90488c2aa1 100644
--- a/packages/sage-react/lib/Button/Button.jsx
+++ b/packages/sage-react/lib/Button/Button.jsx
@@ -30,6 +30,7 @@ export const Button = React.forwardRef(({
   selected,
   small,
   subtle,
+  testId,
   ...rest
 }, ref) => {
   const { to, href } = rest;
@@ -82,8 +83,10 @@ export const Button = React.forwardRef(({
       ref={ref}
       className={classNames}
       aria-disabled={isLink && disabled}
+      data-kjb-element={testId}
       disabled={!isLink && disabled}
       tag={isLink ? linkTag : null}
+      testId={testId}
       {...(isLink ? { suppressDefaultClass: isLink } : {})}
       onClick={onClick}
       {...rest}
@@ -138,6 +141,7 @@ Button.defaultProps = {
   selected: false,
   small: false,
   subtle: false,
+  testId: null,
   type: 'button',
 };
 
@@ -160,5 +164,6 @@ Button.propTypes = {
   selected: PropTypes.bool,
   small: PropTypes.bool,
   subtle: PropTypes.bool,
+  testId: PropTypes.string,
   type: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Button/ButtonGroup.story.jsx b/packages/sage-react/lib/Button/ButtonGroup.story.jsx
index 5f1ed23ee8..76ce50fa7e 100644
--- a/packages/sage-react/lib/Button/ButtonGroup.story.jsx
+++ b/packages/sage-react/lib/Button/ButtonGroup.story.jsx
@@ -39,8 +39,8 @@ export const WithLink = () => (
   <ButtonGroup align="space-between">
     <Link href="http://example.com" removeUnderline style={Link.COLORS.SECONDARY}>Link</Link>
     <ButtonGroup gap="md">
-      <Button color={Button.COLORS.PRIMARY}>Foo</Button>
-      <Button color={Button.COLORS.SECONDARY}>Bar</Button>
+      <Button color={Button.COLORS.PRIMARY} testId="examplePrimaryButton">Foo</Button>
+      <Button color={Button.COLORS.SECONDARY} testId="exampleSecondaryButton">Bar</Button>
     </ButtonGroup>
   </ButtonGroup>
 );
diff --git a/packages/sage-react/lib/Card/Card.jsx b/packages/sage-react/lib/Card/Card.jsx
index 5b19857f57..5281436bc9 100644
--- a/packages/sage-react/lib/Card/Card.jsx
+++ b/packages/sage-react/lib/Card/Card.jsx
@@ -25,6 +25,7 @@ export const Card = ({
   interactive,
   loading,
   borderDashed,
+  testId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -73,6 +74,7 @@ Card.defaultProps = {
   interactive: false,
   loading: false,
   borderDashed: false,
+  testId: null,
 };
 
 Card.propTypes = {
@@ -86,4 +88,5 @@ Card.propTypes = {
   interactive: PropTypes.bool,
   loading: PropTypes.bool,
   borderDashed: PropTypes.bool,
+  testId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/CopyButton/CopyButton.jsx b/packages/sage-react/lib/CopyButton/CopyButton.jsx
index cdc9c9ea82..779d7aa35d 100644
--- a/packages/sage-react/lib/CopyButton/CopyButton.jsx
+++ b/packages/sage-react/lib/CopyButton/CopyButton.jsx
@@ -10,7 +10,8 @@ export const CopyButton = ({
   children,
   className,
   fillContainer,
-  semibold
+  semibold,
+  testId,
 }) => {
   const classNames = classnames(
     'sage-copy-btn',
@@ -36,6 +37,7 @@ export const CopyButton = ({
         icon={borderless ? SageTokens.ICONS.COPY : null}
         iconPosition={Button.ICON_POSITIONS.RIGHT}
         subtle={true}
+        testId={testId}
         type="button"
         onClick={onClick}
       >
@@ -57,6 +59,7 @@ CopyButton.defaultProps = {
   className: null,
   fillContainer: false,
   semibold: true,
+  testId: null,
 };
 
 CopyButton.propTypes = {
@@ -65,4 +68,5 @@ CopyButton.propTypes = {
   className: PropTypes.string,
   fillContainer: PropTypes.bool,
   semibold: PropTypes.bool,
+  testId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/CopyButton/CopyButton.story.jsx b/packages/sage-react/lib/CopyButton/CopyButton.story.jsx
index bbf7fbdfe2..a3b09c5c87 100644
--- a/packages/sage-react/lib/CopyButton/CopyButton.story.jsx
+++ b/packages/sage-react/lib/CopyButton/CopyButton.story.jsx
@@ -14,6 +14,7 @@ export default {
   },
   args: {
     children: 'https://www.example.com',
+    testId: 'exampleCopyButton',
   }
 };
 
@@ -24,4 +25,5 @@ export const Borderless = Template.bind({});
 Borderless.args = {
   borderless: true,
   children: 'example@example.com',
+  testId: 'exampleBorderlessCopyButton',
 };
diff --git a/packages/sage-react/lib/DataCard/DataCard.jsx b/packages/sage-react/lib/DataCard/DataCard.jsx
index 2f8c561739..9c96956d41 100644
--- a/packages/sage-react/lib/DataCard/DataCard.jsx
+++ b/packages/sage-react/lib/DataCard/DataCard.jsx
@@ -11,6 +11,7 @@ export const DataCard = ({
   children,
   className,
   color,
+  testId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -22,7 +23,7 @@ export const DataCard = ({
   );
 
   return (
-    <div className={classNames} {...rest}>
+    <div className={classNames} {...rest} data-kjb-element={testId}>
       {children}
     </div>
   );
@@ -38,10 +39,12 @@ DataCard.defaultProps = {
   children: null,
   className: '',
   color: DATA_CARD_COLORS.DEFAULT,
+  testId: null,
 };
 
 DataCard.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   color: PropTypes.oneOf(Object.values(DATA_CARD_COLORS)),
+  testId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/DataCard/DataCardHeader.jsx b/packages/sage-react/lib/DataCard/DataCardHeader.jsx
index 8eec2456dd..396e06c51d 100644
--- a/packages/sage-react/lib/DataCard/DataCardHeader.jsx
+++ b/packages/sage-react/lib/DataCard/DataCardHeader.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { TestIds } from '../configs';
 
 export const DataCardHeader = ({
   children,
@@ -12,7 +13,7 @@ export const DataCardHeader = ({
     {...rest}
   >
     {title && (
-      <h4 className="sage-data-card__title t-sage--truncate">{title}</h4>
+      <h4 className="sage-data-card__title t-sage--truncate" data-kjb-element={TestIds.dataCardHeader}>{title}</h4>
     )}
     {children}
   </div>
diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx
index ab109b1fc6..584af858b2 100644
--- a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx
+++ b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import uuid from 'react-uuid';
 import { Button } from '../Button';
-import { SageClassnames, SageTokens } from '../configs';
+import { SageClassnames, SageTokens, TestIds } from '../configs';
 
 export const ExpandableCard = ({
   alignArrowRight,
@@ -17,6 +17,7 @@ export const ExpandableCard = ({
   name,
   onClick,
   sageType,
+  testId,
   triggerLabel,
   ...rest
 }) => {
@@ -61,6 +62,7 @@ export const ExpandableCard = ({
         icon={SageTokens.ICONS.CARET_RIGHT}
         onClick={handleChange}
         subtle={true}
+        testId={TestIds.expandableCardButton}
         {...rest}
       >
         {triggerLabel}
@@ -83,10 +85,10 @@ export const ExpandableCard = ({
   };
 
   return (
-    <div className={`${containerClassnames} ${className || ''}`} {...rest}>
+    <div className={`${containerClassnames} ${className || ''}`} data-kjb-element={testId} {...rest}>
       {determineAlignment()}
 
-      <div id={id} className={bodyClassnames}>
+      <div id={id} className={bodyClassnames} data-kjb-element={TestIds.expandableCardBody}>
         {children}
       </div>
     </div>
@@ -105,6 +107,7 @@ ExpandableCard.defaultProps = {
   name: null,
   onClick: null,
   sageType: false,
+  testId: null,
   triggerLabel: null,
 };
 
@@ -120,5 +123,6 @@ ExpandableCard.propTypes = {
   name: PropTypes.string,
   onClick: PropTypes.func,
   sageType: PropTypes.bool,
+  testId: PropTypes.string,
   triggerLabel: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Hint/Hint.jsx b/packages/sage-react/lib/Hint/Hint.jsx
index 502a8bddd7..1505af7250 100644
--- a/packages/sage-react/lib/Hint/Hint.jsx
+++ b/packages/sage-react/lib/Hint/Hint.jsx
@@ -8,6 +8,7 @@ export const Hint = ({
   className,
   content,
   icon,
+  testId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -15,7 +16,7 @@ export const Hint = ({
     className,
   );
   return (
-    <div className={classNames} {...rest}>
+    <div className={classNames} {...rest} data-kjb-element={testId}>
       {icon && (
         <Icon
           className="sage-hint__icon"
@@ -30,10 +31,12 @@ export const Hint = ({
 Hint.defaultProps = {
   className: '',
   icon: null,
+  testId: null,
 };
 
 Hint.propTypes = {
   className: PropTypes.string,
   content: PropTypes.string.isRequired,
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
+  testId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Hint/Hint.story.jsx b/packages/sage-react/lib/Hint/Hint.story.jsx
index 39c087d2b4..79ac47be47 100644
--- a/packages/sage-react/lib/Hint/Hint.story.jsx
+++ b/packages/sage-react/lib/Hint/Hint.story.jsx
@@ -22,6 +22,7 @@ export default {
   args: {
     content: 'Hello, world!',
     icon: SageTokens.ICONS.INFO_CIRCLE,
+    testId: 'exampleHint',
   }
 };
 
diff --git a/packages/sage-react/lib/Icon/Icon.jsx b/packages/sage-react/lib/Icon/Icon.jsx
index c1f8b23892..199c4cd485 100644
--- a/packages/sage-react/lib/Icon/Icon.jsx
+++ b/packages/sage-react/lib/Icon/Icon.jsx
@@ -15,6 +15,7 @@ export const Icon = ({
   icon,
   label,
   size,
+  testId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -103,6 +104,7 @@ Icon.defaultProps = {
   color: SageTokens.COLOR_SLIDERS.INHERIT,
   label: '',
   size: null,
+  testId: null,
 };
 
 Icon.propTypes = {
@@ -148,4 +150,8 @@ Icon.propTypes = {
    * Adjusts the size of the icon.
    */
   size: PropTypes.oneOf(Object.values(Icon.SIZES)),
+  /**
+   * Specifies the value of the data-kjb-element attribute for test automation
+   */
+  testId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Input/Input.jsx b/packages/sage-react/lib/Input/Input.jsx
index ac235bbdc7..38885f57b3 100644
--- a/packages/sage-react/lib/Input/Input.jsx
+++ b/packages/sage-react/lib/Input/Input.jsx
@@ -38,6 +38,7 @@ export const Input = React.forwardRef(({
   standalone,
   step,
   suffix,
+  testId,
   value,
   ...rest
 }, ref) => {
@@ -108,7 +109,7 @@ export const Input = React.forwardRef(({
   }, [prefix, suffix]);
 
   return (
-    <div className={classNames}>
+    <div className={classNames} data-kjb-element={testId}>
       <input
         autoComplete={autocomplete}
         className="sage-form-field sage-input__field"
@@ -199,6 +200,7 @@ Input.defaultProps = {
   standalone: false,
   step: null,
   suffix: null,
+  testId: null,
   value: '',
 };
 
@@ -230,5 +232,6 @@ Input.propTypes = {
   standalone: PropTypes.bool,
   step: PropTypes.string,
   suffix: PropTypes.string,
+  testId: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
diff --git a/packages/sage-react/lib/Input/Input.story.jsx b/packages/sage-react/lib/Input/Input.story.jsx
index b08f1d74e2..731979e364 100644
--- a/packages/sage-react/lib/Input/Input.story.jsx
+++ b/packages/sage-react/lib/Input/Input.story.jsx
@@ -27,6 +27,7 @@ export default {
   args: {
     id: 'field-2',
     label: 'First name',
+    testId: 'exampleInput',
   }
 };
 
@@ -51,6 +52,7 @@ export const Default = (args) => {
       required={false}
       standalone={args.standalone}
       suffix={args.suffix}
+      testId={args.test}
       type={args.inputType}
       value={value}
     />
diff --git a/packages/sage-react/lib/Link/Link.jsx b/packages/sage-react/lib/Link/Link.jsx
index f591ff470e..3aa2c3d220 100644
--- a/packages/sage-react/lib/Link/Link.jsx
+++ b/packages/sage-react/lib/Link/Link.jsx
@@ -20,6 +20,7 @@ export const Link = ({
   style,
   suppressDefaultClass,
   tag,
+  testId,
   tooltip,
   truncate,
   ...rest
@@ -44,6 +45,7 @@ export const Link = ({
         <Tooltip {...tooltip}>
           <SelfTag
             className={classNames}
+            data-kjb-element={testId}
             {...rest}
           >
             {icon && (
@@ -59,6 +61,7 @@ export const Link = ({
       ) : (
         <SelfTag
           className={classNames}
+          data-kjb-element={testId}
           {...rest}
         >
           {icon && (
@@ -89,6 +92,7 @@ Link.defaultProps = {
   style: Link.COLORS.PRIMARY,
   suppressDefaultClass: false,
   tag: null,
+  testId: null,
   tooltip: null,
   truncate: false,
 };
@@ -105,6 +109,7 @@ Link.propTypes = {
   style: PropTypes.oneOf(Object.values(Link.COLORS)),
   suppressDefaultClass: PropTypes.bool,
   tag: tagPropTypes,
+  testId: PropTypes.string,
   tooltip: PropTypes.shape({
     position: PropTypes.oneOf(Object.values(Tooltip.POSITIONS)),
   }),
diff --git a/packages/sage-react/lib/Link/Link.story.jsx b/packages/sage-react/lib/Link/Link.story.jsx
index 5894d8a7c9..66379155bb 100644
--- a/packages/sage-react/lib/Link/Link.story.jsx
+++ b/packages/sage-react/lib/Link/Link.story.jsx
@@ -18,7 +18,7 @@ export default {
     ...selectArgs({
       icon: SageTokens.ICONS,
       iconPosition: Link.ICON_POSITIONS,
-      style: Link.COLORS
+      style: Link.COLORS,
     })
   }
 };
@@ -27,7 +27,7 @@ const Template = (args) => <Link {...args} />;
 export const Primary = Template.bind({});
 Primary.args = {
   children: 'Standard link',
-  href: '#',
+  href: '#'
 };
 
 export const Plain = Template.bind({});
diff --git a/packages/sage-react/lib/MediaTile/MediaTile.jsx b/packages/sage-react/lib/MediaTile/MediaTile.jsx
index f006dca11c..ee50d5fc27 100644
--- a/packages/sage-react/lib/MediaTile/MediaTile.jsx
+++ b/packages/sage-react/lib/MediaTile/MediaTile.jsx
@@ -15,6 +15,7 @@ export const MediaTile = ({
   footer,
   media,
   mediaConfigs,
+  testId,
   tileLink,
   title,
   titleTag,
@@ -31,7 +32,7 @@ export const MediaTile = ({
   const TitleTag = titleTag;
 
   return (
-    <Panel className={classNames} {...rest}>
+    <Panel className={classNames} data-kjb-element={testId} {...rest}>
       {media && (
         <Panel.Figure
           bleed={Panel.Figure.BLEED_OPTIONS.TOP}
@@ -94,6 +95,7 @@ MediaTile.defaultProps = {
   footer: null,
   media: null,
   mediaConfigs: null,
+  testId: null,
   tileLink: null,
   title: null,
   titleTag: 'h3',
@@ -108,6 +110,7 @@ MediaTile.propTypes = {
   footer: PropTypes.node,
   media: PropTypes.node,
   mediaConfigs: PropTypes.shape(Panel.Figure.propTypes), // TODO: panel figure configs
+  testId: PropTypes.string,
   tileLink: PropTypes.shape(Link.propTypes),
   title: PropTypes.string,
   titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
diff --git a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
index f37175394c..598069e53b 100644
--- a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
+++ b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
@@ -88,5 +88,6 @@ KitchenSink.args = {
     backgroundColor: SageTokens.COLOR_PALETTE.GREEN_150,
     padded: true,
   },
+  testId: 'kitchenSinkTile',
   tileLink: null,
 };
diff --git a/packages/sage-react/lib/Modal/Modal.jsx b/packages/sage-react/lib/Modal/Modal.jsx
index 795fcd97fb..bc44adba6d 100644
--- a/packages/sage-react/lib/Modal/Modal.jsx
+++ b/packages/sage-react/lib/Modal/Modal.jsx
@@ -23,6 +23,7 @@ export const Modal = ({
   large,
   onExit,
   size,
+  testId,
   ...rest
 }) => {
   const [mouseDownSrc, setMouseDownSrc] = useState(null);
@@ -95,6 +96,7 @@ export const Modal = ({
       <div
         className={`sage-modal__container ${containerClassName || ''}`}
         aria-modal="true"
+        data-kjb-element={testId}
         {...rest}
       >
         {children}
@@ -127,6 +129,7 @@ Modal.defaultProps = {
   disableBackgroundDismiss: false,
   onExit: (val) => val,
   size: null,
+  testId: null,
 };
 
 Modal.propTypes = {
@@ -148,5 +151,6 @@ Modal.propTypes = {
   isClosing: PropTypes.bool,
   large: PropTypes.bool,
   onExit: PropTypes.func,
-  size: PropTypes.oneOf(Object.values(Modal.SIZES))
+  size: PropTypes.oneOf(Object.values(Modal.SIZES)),
+  testId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/NextBestAction/NextBestAction.jsx b/packages/sage-react/lib/NextBestAction/NextBestAction.jsx
index f24209cb05..20d490bb88 100644
--- a/packages/sage-react/lib/NextBestAction/NextBestAction.jsx
+++ b/packages/sage-react/lib/NextBestAction/NextBestAction.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Button } from '../Button';
 import { NEXT_BEST_ACTION_COLORS } from './configs';
+import { TestIds } from '../configs';
 
 export const NextBestAction = ({
   actions,
@@ -12,6 +13,7 @@ export const NextBestAction = ({
   dismissable,
   graphic,
   onClickDismiss,
+  testId,
   title,
 }) => {
   const baseClass = 'sage-next-best-action';
@@ -26,7 +28,7 @@ export const NextBestAction = ({
   );
 
   return (
-    <div className={classNames}>
+    <div className={classNames} data-kjb-element={testId}>
       {graphic.element && (
         <div className="sage-next-best-action__graphic">
           {graphic.element}
@@ -51,6 +53,7 @@ export const NextBestAction = ({
           onClick={onClickDismiss}
           subtle={true}
           small={true}
+          testId={TestIds.closeButton}
         >
           Close
         </Button>
@@ -71,6 +74,7 @@ NextBestAction.defaultProps = {
     onRight: false,
   },
   onClickDismiss: null,
+  testId: null,
   title: '',
 };
 
@@ -85,5 +89,6 @@ NextBestAction.propTypes = {
     onRight: PropTypes.bool,
   }),
   onClickDismiss: PropTypes.func,
+  testId: PropTypes.string,
   title: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx b/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx
index 48619f744e..57c8a44e4d 100644
--- a/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx
+++ b/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx
@@ -19,6 +19,7 @@ export default {
     actions: (
       <Button
         color={Button.COLORS.PRIMARY}
+        testId="upsellButton"
       >
         Add an Upsell
       </Button>
@@ -39,6 +40,7 @@ export default {
     },
     // eslint-disable-next-line no-console
     onClickDismiss: () => { console.log('Add your own dismiss functionality here!'); },
+    testId: 'exampleNextAction',
     title: 'Offer an additional buy with Upsell',
   },
   argTypes: {
diff --git a/packages/sage-react/lib/PageHeading/PageHeading.jsx b/packages/sage-react/lib/PageHeading/PageHeading.jsx
index a16e135ed4..72eaa80dc3 100644
--- a/packages/sage-react/lib/PageHeading/PageHeading.jsx
+++ b/packages/sage-react/lib/PageHeading/PageHeading.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Breadcrumbs } from '../Breadcrumbs';
+import { TestIds } from '../configs';
 
 export const PageHeading = ({
   actions,
@@ -24,11 +25,12 @@ export const PageHeading = ({
         'sage-page-heading--has-image': image.src,
       }
     )}
+    data-kjb-element={TestIds.pageHeadingHeading}
     {...rest}
   >
     {breadcrumbs && (
       <div className="sage-page-heading__crumbs">
-        <Breadcrumbs items={breadcrumbs} className="sage-page-heading__back" />
+        <Breadcrumbs items={breadcrumbs} className="sage-page-heading__back" testId={TestIds.pageHeadingBreadcrumbs} />
       </div>
     )}
     {introText && (
@@ -37,7 +39,7 @@ export const PageHeading = ({
       </div>
     )}
     <div className="sage-page-heading__title-wrapper">
-      <h1 className="sage-page-heading__title">
+      <h1 className="sage-page-heading__title" data-kjb-element={TestIds.pageHeadingTitle}>
         {children}
       </h1>
       {help && (
@@ -47,7 +49,7 @@ export const PageHeading = ({
       )}
     </div>
     {image.src && (
-      <div className="sage-page-heading__image">
+      <div className="sage-page-heading__image" data-kjb-element={TestIds.pageHeadingImage}>
         <img alt={image.alt || ''} src={image.src} />
       </div>
     )}
@@ -64,7 +66,7 @@ export const PageHeading = ({
       </div>
     )}
     {secondaryText && (
-      <div className="sage-page-heading__secondary">
+      <div className="sage-page-heading__secondary" data-kjb-element={TestIds.pageHeadingSubTitle}>
         {secondaryText}
       </div>
     )}
diff --git a/packages/sage-react/lib/Panel/Panel.jsx b/packages/sage-react/lib/Panel/Panel.jsx
index 50ab032354..61a9f08df3 100644
--- a/packages/sage-react/lib/Panel/Panel.jsx
+++ b/packages/sage-react/lib/Panel/Panel.jsx
@@ -38,7 +38,7 @@ export const Panel = ({
   );
 
   return (
-    <div className={classNames} {...rest}>
+    <div className={classNames} data-kjb-element={testId} {...rest}>
       {loading ? (
         <Loader loading={true} fillSpace={true} type={Loader.TYPES.SPINNER} />
       ) : children}
@@ -69,6 +69,7 @@ Panel.defaultProps = {
   clearPaddingBottom: false,
   clearPaddingTop: false,
   loading: false,
+  testId: null,
 };
 
 Panel.propTypes = {
@@ -84,4 +85,6 @@ Panel.propTypes = {
   clearPaddingTop: PropTypes.bool,
   /** Setting this to true will display a loading spinner within the Panel. */
   loading: PropTypes.bool,
+  /** The value of data-kjb-element for automated tests */
+  testId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
index 2fce8af65e..6a63da9866 100644
--- a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
+++ b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
@@ -14,6 +14,7 @@ export const ProgressBar = ({
   displayPercent,
   label,
   percent,
+  testId,
   tooltipPosition,
   ...rest
 }) => {
@@ -33,7 +34,7 @@ export const ProgressBar = ({
     }
 
     return (
-      <div className="sage-progress-bar__background" style={bgStyles}>
+      <div className="sage-progress-bar__background" data-kjb-element={testId} style={bgStyles}>
         <progress
           className="sage-progress-bar__element"
           aria-valuemax="100"
@@ -86,6 +87,7 @@ ProgressBar.defaultProps = {
   displayPercent: false,
   label: null,
   percent: null,
+  testId: null,
   tooltipPosition: null,
 };
 
@@ -98,5 +100,6 @@ ProgressBar.propTypes = {
   displayPercent: PropTypes.bool,
   label: PropTypes.string,
   percent: PropTypes.string,
+  testId: PropTypes.string,
   tooltipPosition: PropTypes.oneOf(Object.values(ProgressBar.TOOLTIP_POSITIONS)),
 };
diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx
index e67031c00a..704502fcdb 100644
--- a/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx
+++ b/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx
@@ -16,6 +16,7 @@ export default {
   args: {
     label: 'Cloning product',
     percent: '44',
+    testId: 'exampleProgressBar',
   },
   argTypes: {
     ...selectArgs({
@@ -33,4 +34,5 @@ CustomColor.args = {
   backgroundColor: ProgressBar.COLORS.ORANGE_100,
   label: 'Cloning product',
   percent: '44',
+  testId: 'exampleColorProgressBar',
 };
diff --git a/packages/sage-react/lib/Property/Property.jsx b/packages/sage-react/lib/Property/Property.jsx
index fc9301af0e..55593a7d0a 100644
--- a/packages/sage-react/lib/Property/Property.jsx
+++ b/packages/sage-react/lib/Property/Property.jsx
@@ -9,6 +9,7 @@ export const Property = ({
   children,
   className,
   icon,
+  testId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -17,7 +18,7 @@ export const Property = ({
   );
 
   return (
-    <span className={classNames} {...rest}>
+    <span className={classNames} data-kjb-element={testId} {...rest}>
       {icon && (
         <Icon icon={icon} className="sage-property__icon" />
       )}
@@ -36,10 +37,12 @@ Property.defaultProps = {
   className: null,
   children: null,
   icon: null,
+  testId: null,
 };
 
 Property.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
+  testId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Property/Property.story.jsx b/packages/sage-react/lib/Property/Property.story.jsx
index 2eaaeee9d7..8368fbba4c 100644
--- a/packages/sage-react/lib/Property/Property.story.jsx
+++ b/packages/sage-react/lib/Property/Property.story.jsx
@@ -16,7 +16,8 @@ export default {
   },
   args: {
     icon: SageTokens.ICONS.USERS,
-    children: 'Property'
+    children: 'Property',
+    testId: 'exampleProperty',
   },
   argTypes: {
     ...selectArgs({
diff --git a/packages/sage-react/lib/Search/Search.jsx b/packages/sage-react/lib/Search/Search.jsx
index 092ba90848..b7d9205f54 100644
--- a/packages/sage-react/lib/Search/Search.jsx
+++ b/packages/sage-react/lib/Search/Search.jsx
@@ -14,6 +14,7 @@ export const Search = React.forwardRef(({
   onClear,
   onChange,
   placeholder,
+  testId,
   value,
   ...rest
 }, ref) => {
@@ -34,7 +35,7 @@ export const Search = React.forwardRef(({
     });
 
   return (
-    <div className={classNames}>
+    <div data-kjb-element={testId} className={classNames}>
       {label && (
         <label htmlFor={id} className={labelClassnames}>
           {label}
@@ -84,6 +85,7 @@ Search.defaultProps = {
   hideLabel: false,
   onClear: null,
   placeholder: 'Search',
+  testId: null,
 };
 
 Search.propTypes = {
@@ -96,5 +98,6 @@ Search.propTypes = {
   onChange: PropTypes.func.isRequired,
   onClear: PropTypes.func,
   placeholder: PropTypes.string,
+  testId: PropTypes.string,
   value: PropTypes.string.isRequired,
 };
diff --git a/packages/sage-react/lib/Select/Select.jsx b/packages/sage-react/lib/Select/Select.jsx
index 3a920693bc..011b0bb5fc 100644
--- a/packages/sage-react/lib/Select/Select.jsx
+++ b/packages/sage-react/lib/Select/Select.jsx
@@ -16,6 +16,7 @@ export const Select = ({
   options,
   placeholder,
   required,
+  testId,
   value,
   ...rest
 }) => {
@@ -63,7 +64,7 @@ export const Select = ({
   );
 
   return (
-    <div className={classNames}>
+    <div className={classNames} data-kjb-element={testId}>
       <select
         className="sage-select__field"
         id={id}
@@ -116,6 +117,7 @@ Select.defaultProps = {
   options: [],
   placeholder: null,
   required: false,
+  testId: null,
   value: '',
 };
 
@@ -157,5 +159,6 @@ Select.propTypes = {
   ),
   placeholder: PropTypes.string,
   required: PropTypes.bool,
+  testId: PropTypes.string,
   value: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Select/Select.story.jsx b/packages/sage-react/lib/Select/Select.story.jsx
index 2f117cdd60..f4cec4b455 100644
--- a/packages/sage-react/lib/Select/Select.story.jsx
+++ b/packages/sage-react/lib/Select/Select.story.jsx
@@ -55,7 +55,8 @@ SelectWithState.args = {
     'Option 3',
     'Option 4',
   ],
-  placeholder: 'Choose...'
+  placeholder: 'Choose...',
+  testId: 'exampleSelectWithState',
 };
 
 export const DisabledSelectFieldWithOptionPreselected = (args) => <Select {...args} />;
@@ -70,6 +71,7 @@ DisabledSelectFieldWithOptionPreselected.args = {
     'Option 4',
   ],
   disabled: true,
+  testId: 'exampleDisabledWithPreselectedOption',
   value: 'Option 3',
 };
 
@@ -98,7 +100,8 @@ SelectWithOptionDisabled.args = {
     'Fourth option',
     'Fifth option',
   ],
-  placeholder: 'Pick an option:'
+  placeholder: 'Pick an option:',
+  testId: 'exampleSelectWithOptionDisabled',
 };
 
 export const SelectWithHelpContentLink = (args) => {
@@ -125,7 +128,8 @@ SelectWithHelpContentLink.args = {
       What&rsquo;s this?
     </Link>
   ),
-  placeholder: 'Choose an option:'
+  placeholder: 'Choose an option:',
+  testId: 'exampleSelectWithHelpContentLink',
 };
 
 export const SelectWithHelpContentPopover = (args) => {
@@ -204,5 +208,6 @@ SelectWithOptgroups.args = {
       ],
     },
   ],
-  placeholder: 'Choose wisely…'
+  placeholder: 'Choose wisely…',
+  testId: 'exampleSelectWithOptgroups',
 };
diff --git a/packages/sage-react/lib/StatBox/StatBox.jsx b/packages/sage-react/lib/StatBox/StatBox.jsx
index 2ee90feb6c..6a2b3e11e1 100644
--- a/packages/sage-react/lib/StatBox/StatBox.jsx
+++ b/packages/sage-react/lib/StatBox/StatBox.jsx
@@ -20,6 +20,7 @@ export const StatBox = ({
   link,
   popover,
   raised,
+  testId,
   timeframe,
   title,
 }) => {
@@ -67,6 +68,7 @@ export const StatBox = ({
   return (
     <article
       className={statBoxContainer}
+      data-kjb-element={testId}
     >
       {icon && (
         <div className="sage-stat-box__icon">
@@ -138,6 +140,7 @@ StatBox.defaultProps = {
   link: null,
   popover: null,
   raised: false,
+  testId: null,
   timeframe: null,
 };
 
@@ -166,6 +169,7 @@ StatBox.propTypes = {
   }),
   popover: PropTypes.node,
   raised: PropTypes.bool,
+  testId: PropTypes.string,
   timeframe: PropTypes.string,
   title: PropTypes.string.isRequired,
 };
diff --git a/packages/sage-react/lib/StatBox/StatBox.story.jsx b/packages/sage-react/lib/StatBox/StatBox.story.jsx
index 4609a64c20..2fd8401640 100644
--- a/packages/sage-react/lib/StatBox/StatBox.story.jsx
+++ b/packages/sage-react/lib/StatBox/StatBox.story.jsx
@@ -50,6 +50,7 @@ DefaultWithSageColorLegendDot.args = {
     value: 'View More',
     href: '#'
   },
+  testId: 'exampleStatBox',
   timeframe: 'in last 30 days',
   title: 'In Progress'
 };
@@ -66,6 +67,7 @@ DefaultWithSageCustomColorLegendDot.args = {
     value: 'View More',
     href: '#'
   },
+  testId: 'exampleDefaultWithColorLegend',
   timeframe: 'in last 30 days',
   title: 'In Progress'
 };
@@ -82,6 +84,7 @@ DefaultRaised.args = {
     href: '#'
   },
   raised: true,
+  testId: 'exampleDefaultRaised',
   timeframe: 'in last 30 days',
   title: 'In Progress'
 };
@@ -94,6 +97,7 @@ SimpleWithImage.args = {
     alt: 'Example',
     src: 'https://via.placeholder.com/150'
   },
+  testId: 'exampleSimpleWithImage',
   title: 'Title'
 };
 
@@ -105,6 +109,7 @@ SimpleWithIcon.args = {
     cardColor: Icon.CARD_COLORS.PUBLISHED,
     name: Icon.ICONS.CHECK
   },
+  testId: 'exampleSimpleWithIcon',
   title: 'Title'
 };
 
@@ -113,5 +118,6 @@ NullView.args = {
   change: null,
   data: 'No insights to show',
   hasData: false,
+  testId: 'exampleNullView',
   title: 'In Progress'
 };
diff --git a/packages/sage-react/lib/Table/Table.jsx b/packages/sage-react/lib/Table/Table.jsx
index 72d4d3e756..36d3a842b8 100644
--- a/packages/sage-react/lib/Table/Table.jsx
+++ b/packages/sage-react/lib/Table/Table.jsx
@@ -52,6 +52,7 @@ export const Table = ({
   selectedRows,
   showSelectAll,
   tableAttributes,
+  testId,
 }) => {
   const [selfSelectedRows, setSelfSelectedRows] = useState([]);
   const [selfHeaders, setSelfHeaders] = useState([]);
@@ -282,13 +283,14 @@ export const Table = ({
         selected={selfSelectedRows === SELECTION_TYPES.ALL || selfSelectedRows.includes(rowId)}
         selectable={selectable}
         onSelect={onSelectRow}
+        testId="tableRowListItem"
       />
     );
   };
 
   // Renders the table itself
   const renderTable = () => (
-    <table className={tableClassNames} {...tableAttributes}>
+    <table className={tableClassNames} data-kjb-element={testId} {...tableAttributes}>
       {caption && (
         <caption className={`sage-table__caption--${captionSide || CAPTION_SIDE.BOTTOM}`}>
           {caption}
@@ -352,6 +354,7 @@ Table.defaultProps = {
   selectedRows: [],
   showSelectAll: false,
   tableAttributes: null,
+  testId: null,
 };
 
 Table.propTypes = {
@@ -446,4 +449,7 @@ Table.propTypes = {
 
   /** Allows you to provide additional HTML attributes. */
   tableAttributes: PropTypes.shape({}),
+
+  /** * Adds a data-kjb-element that uniquely idenfies the table */
+  testId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Table/TableRow.jsx b/packages/sage-react/lib/Table/TableRow.jsx
index 9fca73574c..3d9b6c7f26 100644
--- a/packages/sage-react/lib/Table/TableRow.jsx
+++ b/packages/sage-react/lib/Table/TableRow.jsx
@@ -6,6 +6,7 @@ import { parseRowData, parseCellData } from './helpers';
 import { cellPropTypes } from './configs';
 import { TableHelpers } from '../helpers';
 import { Checkbox } from '../Toggle';
+import { TestIds } from '../configs';
 
 /* eslint-disable react-hooks/exhaustive-deps */
 
@@ -18,6 +19,7 @@ export const TableRow = ({
   schema,
   selectable,
   selected,
+  testId,
   typeRenderers,
 }) => {
   const [selfSelected, setSelfSelected] = useState(false);
@@ -86,7 +88,7 @@ export const TableRow = ({
   };
 
   return (
-    <tr className={classNames} data-table-row-id={id}>
+    <tr className={classNames} data-kjb-element={testId} data-table-row-id={id}>
       {selectable && (
         <td className={selectableClassNames}>
           <Checkbox
@@ -96,6 +98,7 @@ export const TableRow = ({
             name="sage-table-selections"
             onChange={onChangeSelector}
             standalone={true}
+            testId={TestIds.tableRowCheckbox}
             value={id.toString()}
           />
         </td>
@@ -104,10 +107,16 @@ export const TableRow = ({
         if (!configs) {
           return;
         }
-        const { key, classNames, style, attributes, contents } = configs;
+        const { key, classNames, style, attributes, contents, testId } = configs;
         // eslint-disable-next-line consistent-return
         return (
-          <td key={key} className={classNames} style={style} {...attributes}>
+          <td
+            data-kjb-element={testId}
+            key={key}
+            className={classNames}
+            style={style}
+            {...attributes}
+          >
             {contents}
           </td>
         );
@@ -124,6 +133,7 @@ TableRow.defaultProps = {
   onSelect: (ev) => ev,
   selectable: false,
   selected: false,
+  testId: null,
   typeRenderers: {},
   schema: {}
 };
@@ -158,6 +168,13 @@ TableRow.propTypes = {
    */
   schema: PropTypes.shape({}),
 
+  /**
+   * Adds a data-kjb-element to each table row. The value should be in the form
+   * `descriptionListItem`. For example, a list of contacts should have a value
+   * like `contactListItem`.
+   */
+  testId: PropTypes.string,
+
   /** The data types that could be renedered in a Table Cell. */
   typeRenderers: PropTypes.shape({}),
 };
diff --git a/packages/sage-react/lib/Table/configs.js b/packages/sage-react/lib/Table/configs.js
index c64ce3071f..ad72c04009 100644
--- a/packages/sage-react/lib/Table/configs.js
+++ b/packages/sage-react/lib/Table/configs.js
@@ -21,5 +21,6 @@ export const cellPropTypes = {
   field: PropTypes.string,
   id: PropTypes.string,
   style: PropTypes.shape({}),
+  testId: PropTypes.string,
   value: dataPropTypes,
 };
diff --git a/packages/sage-react/lib/Textarea/Textarea.jsx b/packages/sage-react/lib/Textarea/Textarea.jsx
index c5bd9c916c..97483dd1c5 100644
--- a/packages/sage-react/lib/Textarea/Textarea.jsx
+++ b/packages/sage-react/lib/Textarea/Textarea.jsx
@@ -10,6 +10,7 @@ export const Textarea = ({
   label,
   message,
   onChange,
+  testId,
   value,
   ...rest
 }) => {
@@ -31,7 +32,7 @@ export const Textarea = ({
   };
 
   return (
-    <div className={classNames}>
+    <div className={classNames} data-kjb-element={testId}>
       <textarea
         className="sage-textarea__field"
         disabled={disabled}
@@ -62,6 +63,7 @@ Textarea.defaultProps = {
   label: null,
   message: null,
   onChange: null,
+  testId: null,
   value: '',
 };
 
@@ -73,5 +75,6 @@ Textarea.propTypes = {
   label: PropTypes.string,
   message: PropTypes.string,
   onChange: PropTypes.func,
+  testId: PropTypes.string,
   value: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Textarea/Textarea.story.jsx b/packages/sage-react/lib/Textarea/Textarea.story.jsx
index 528726936a..2d3c8a55c5 100644
--- a/packages/sage-react/lib/Textarea/Textarea.story.jsx
+++ b/packages/sage-react/lib/Textarea/Textarea.story.jsx
@@ -39,6 +39,7 @@ export const TextareaWithState = (args) => {
     <Textarea
       {...args}
       value={value}
+      testId="exampleTextArea"
       onChange={onChange}
     />
   );
diff --git a/packages/sage-react/lib/Toast/Toast.jsx b/packages/sage-react/lib/Toast/Toast.jsx
index 7e7f4e2a6e..6364cca443 100644
--- a/packages/sage-react/lib/Toast/Toast.jsx
+++ b/packages/sage-react/lib/Toast/Toast.jsx
@@ -16,6 +16,7 @@ export const Toast = ({
   onDismiss,
   timeout,
   link,
+  testId,
   type,
   title,
 }) => {
@@ -78,7 +79,7 @@ export const Toast = ({
   };
 
   return !isDismissed && (
-    <div className="sage-toast-container">
+    <div className="sage-toast-container" data-kjb-element={testId}>
       <dialog open className={classNames} aria-labelledby={`sage-toast-label-${id}`}>
         {renderAsset()}
 
@@ -104,6 +105,7 @@ export const Toast = ({
           type="button"
           className="sage-toast__button sage-toast__button--close sage-btn sage-btn--subtle sage-btn--secondary sage-btn--icon-only-remove"
           onClick={onClickDismiss}
+          testId="closeButton"
         >
           <pds-icon name="remove" />
           <span className="visually-hidden">
@@ -125,6 +127,7 @@ Toast.defaultProps = {
   onDismiss: (evt) => evt,
   timeout: 4500,
   link: null,
+  testId: null,
   title: null,
   type: Toast.TYPES.DEFAULT,
 };
@@ -143,6 +146,7 @@ Toast.propTypes = {
     text: PropTypes.string,
     href: PropTypes.string,
   }),
+  testId: PropTypes.string,
   type: PropTypes.oneOf(Object.values(Toast.TYPES)),
   title: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Toast/Toast.story.jsx b/packages/sage-react/lib/Toast/Toast.story.jsx
index 9e44f868bc..b1771b7444 100644
--- a/packages/sage-react/lib/Toast/Toast.story.jsx
+++ b/packages/sage-react/lib/Toast/Toast.story.jsx
@@ -39,6 +39,7 @@ Default.args = {
   icon: SageTokens.ICONS.INFO_CIRCLE,
   title: 'Hello',
   description: 'How are you?',
+  testId: 'exampleToast',
   timeout: 3500,
   type: Toast.TYPES.DEFAULT
 };
@@ -48,6 +49,7 @@ WithLink.args = {
   icon: SageTokens.ICONS.INFO_CIRCLE,
   title: 'Congratulations on your success',
   link: { href: 'http://kajabi.com', text: 'Go to next step' },
+  testId: 'exampleWithLink',
   type: Toast.TYPES.LOADING,
   timeout: false
 };
diff --git a/packages/sage-react/lib/Toggle/Checkbox.jsx b/packages/sage-react/lib/Toggle/Checkbox.jsx
index 54ca2c4ce9..57185e18a6 100644
--- a/packages/sage-react/lib/Toggle/Checkbox.jsx
+++ b/packages/sage-react/lib/Toggle/Checkbox.jsx
@@ -17,6 +17,7 @@ export const Checkbox = ({
   partialSelection,
   required,
   standalone,
+  testId,
   value,
   ...rest
 }) => (
@@ -57,6 +58,7 @@ Checkbox.defaultProps = {
   itemInList: false,
   required: false,
   standalone: false,
+  testId: null,
   value: '',
 };
 
@@ -75,5 +77,6 @@ Checkbox.propTypes = {
   partialSelection: PropTypes.bool,
   required: PropTypes.bool,
   standalone: PropTypes.bool,
+  testId: PropTypes.string,
   value: PropTypes.string
 };
diff --git a/packages/sage-react/lib/Tooltip/Tooltip.jsx b/packages/sage-react/lib/Tooltip/Tooltip.jsx
index a23e6cd609..8bfe3546fc 100644
--- a/packages/sage-react/lib/Tooltip/Tooltip.jsx
+++ b/packages/sage-react/lib/Tooltip/Tooltip.jsx
@@ -8,6 +8,7 @@ export const Tooltip = ({
   children,
   content,
   position,
+  testId,
   tooltipCustomClass,
   ...rest
 }) => {
@@ -37,6 +38,7 @@ export const Tooltip = ({
           content={content}
           parentDomRect={parentDomRect}
           position={position}
+          testId={testId}
           tooltipCustomClass={tooltipCustomClass}
         />,
         document.body
@@ -50,6 +52,7 @@ Tooltip.POSITIONS = TOOLTIP_POSITIONS;
 
 Tooltip.defaultProps = {
   position: TOOLTIP_POSITIONS.DEFAULT,
+  testId: null,
   tooltipCustomClass: '',
 };
 
@@ -57,5 +60,6 @@ Tooltip.propTypes = {
   children: PropTypes.node.isRequired,
   content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
   position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+  testId: PropTypes.string,
   tooltipCustomClass: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Tooltip/TooltipElement.jsx b/packages/sage-react/lib/Tooltip/TooltipElement.jsx
index 2bd467d402..ec7b737c3d 100644
--- a/packages/sage-react/lib/Tooltip/TooltipElement.jsx
+++ b/packages/sage-react/lib/Tooltip/TooltipElement.jsx
@@ -11,6 +11,7 @@ export const TooltipElement = ({
   content,
   parentDomRect,
   position,
+  testId,
   tooltipCustomClass,
 }) => {
   const tooltipRef = useRef(null);
@@ -75,6 +76,7 @@ export const TooltipElement = ({
       ref={tooltipRef}
       className={classNames}
       style={parentDomRect ? coordinates : {}}
+      data-kjb-element={testId}
     >
       {content}
     </div>
@@ -86,6 +88,7 @@ TooltipElement.POSITIONS = TOOLTIP_POSITIONS;
 TooltipElement.defaultProps = {
   parentDomRect: null,
   position: TOOLTIP_POSITIONS.DEFAULT,
+  testId: null,
   tooltipCustomClass: '',
 };
 
@@ -99,5 +102,6 @@ TooltipElement.propTypes = {
     width: PropTypes.number,
   }),
   position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+  testId: PropTypes.string,
   tooltipCustomClass: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/configs/automationTestIds/automationTestIds.js b/packages/sage-react/lib/configs/automationTestIds/automationTestIds.js
new file mode 100644
index 0000000000..646c3f9ead
--- /dev/null
+++ b/packages/sage-react/lib/configs/automationTestIds/automationTestIds.js
@@ -0,0 +1,20 @@
+/**
+ * The list of automation test ids used in the components.
+ */
+export const TestIds = {
+  alertDescripton: 'alertDescription',
+  alertIcon: 'alertIcon',
+  alertTitle: 'alertTitle',
+  closeButton: 'closeButton',
+  dataCardHeader: 'dataCardHeader',
+  expandableCardBody: 'cardBody',
+  expandableCardButton: 'expandCollapseButton',
+  avatarContainer: 'avatarContainer',
+  nextBestActionButtion: 'nextBestActionButton',git 
+  pageHeadingBreadcrumbs: 'pageHeadingBreadcrumbs',
+  pageHeadingHeading: 'pageHeading',
+  pageHeadingImage: 'pageHeadingImage',
+  pageHeadingSubTitle: 'pageHeadingSubTitle',
+  pageHeadingTitle: 'pageHeadingTitle',
+  tableRowCheckbox: 'checkbox',
+};
diff --git a/packages/sage-react/lib/configs/automationTestIds/index.js b/packages/sage-react/lib/configs/automationTestIds/index.js
new file mode 100644
index 0000000000..9abdaab5b5
--- /dev/null
+++ b/packages/sage-react/lib/configs/automationTestIds/index.js
@@ -0,0 +1 @@
+export { TestIds } from './automationTestIds';
diff --git a/packages/sage-react/lib/configs/index.js b/packages/sage-react/lib/configs/index.js
index 6fb2b235e5..0d050da50a 100644
--- a/packages/sage-react/lib/configs/index.js
+++ b/packages/sage-react/lib/configs/index.js
@@ -1,3 +1,4 @@
 export { SageClassnames } from './classnames';
 export { SageDictionary } from './dictionary';
 export { SageTokens } from './tokens';
+export { TestIds } from './automationTestIds';

From 94949df093b3779156b6620388289888102b18bb Mon Sep 17 00:00:00 2001
From: "jennifer.mullen" <jennifer.mullen@kajabi.com>
Date: Tue, 7 Jan 2025 14:23:31 -0800
Subject: [PATCH 2/3] fix: fix text

---
 .../lib/configs/automationTestIds/automationTestIds.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sage-react/lib/configs/automationTestIds/automationTestIds.js b/packages/sage-react/lib/configs/automationTestIds/automationTestIds.js
index 646c3f9ead..421c65b14f 100644
--- a/packages/sage-react/lib/configs/automationTestIds/automationTestIds.js
+++ b/packages/sage-react/lib/configs/automationTestIds/automationTestIds.js
@@ -10,7 +10,7 @@ export const TestIds = {
   expandableCardBody: 'cardBody',
   expandableCardButton: 'expandCollapseButton',
   avatarContainer: 'avatarContainer',
-  nextBestActionButtion: 'nextBestActionButton',git 
+  nextBestActionButtion: 'nextBestActionButton',
   pageHeadingBreadcrumbs: 'pageHeadingBreadcrumbs',
   pageHeadingHeading: 'pageHeading',
   pageHeadingImage: 'pageHeadingImage',

From 0be85e258a966bb951cc1ac30a68c773e66bf059 Mon Sep 17 00:00:00 2001
From: "jennifer.mullen" <jennifer.mullen@kajabi.com>
Date: Tue, 7 Jan 2025 15:08:59 -0800
Subject: [PATCH 3/3] chore: change testId to kjbElementId

---
 .../sage-react/lib/Accordion/Accordion.jsx    |  8 +++---
 .../lib/Accordion/Accordion.story.jsx         | 28 +++++++++----------
 packages/sage-react/lib/Alert/Alert.jsx       | 18 ++++++------
 packages/sage-react/lib/Alert/Alert.story.jsx | 20 ++++++-------
 packages/sage-react/lib/Badge/Badge.jsx       |  8 +++---
 packages/sage-react/lib/Badge/Badge.story.jsx |  6 ++--
 packages/sage-react/lib/Banner/Banner.jsx     |  6 ++--
 .../lib/Breadcrumbs/Breadcrumbs.jsx           | 10 +++----
 packages/sage-react/lib/Button/Button.jsx     | 10 +++----
 .../lib/Button/ButtonGroup.story.jsx          |  4 +--
 packages/sage-react/lib/Card/Card.jsx         |  6 ++--
 .../sage-react/lib/CopyButton/CopyButton.jsx  |  8 +++---
 .../lib/CopyButton/CopyButton.story.jsx       |  4 +--
 packages/sage-react/lib/DataCard/DataCard.jsx |  8 +++---
 .../lib/DataCard/DataCardHeader.jsx           |  4 +--
 .../lib/ExpandableCard/ExpandableCard.jsx     | 14 +++++-----
 packages/sage-react/lib/Hint/Hint.jsx         |  8 +++---
 packages/sage-react/lib/Hint/Hint.story.jsx   |  2 +-
 packages/sage-react/lib/Icon/Icon.jsx         |  6 ++--
 packages/sage-react/lib/Input/Input.jsx       |  8 +++---
 packages/sage-react/lib/Input/Input.story.jsx |  4 +--
 packages/sage-react/lib/Link/Link.jsx         | 10 +++----
 .../sage-react/lib/MediaTile/MediaTile.jsx    |  8 +++---
 .../lib/MediaTile/MediaTile.story.jsx         |  2 +-
 packages/sage-react/lib/Modal/Modal.jsx       |  8 +++---
 .../lib/NextBestAction/NextBestAction.jsx     | 12 ++++----
 .../NextBestAction/NextBestAction.story.jsx   |  4 +--
 .../lib/PageHeading/PageHeading.jsx           | 12 ++++----
 packages/sage-react/lib/Panel/Panel.jsx       |  6 ++--
 .../lib/ProgressBar/ProgressBar.jsx           |  8 +++---
 .../lib/ProgressBar/ProgressBar.story.jsx     |  4 +--
 packages/sage-react/lib/Property/Property.jsx |  8 +++---
 .../lib/Property/Property.story.jsx           |  2 +-
 packages/sage-react/lib/Search/Search.jsx     |  8 +++---
 packages/sage-react/lib/Select/Select.jsx     |  8 +++---
 .../sage-react/lib/Select/Select.story.jsx    | 10 +++----
 packages/sage-react/lib/StatBox/StatBox.jsx   |  8 +++---
 .../sage-react/lib/StatBox/StatBox.story.jsx  | 12 ++++----
 packages/sage-react/lib/Table/Table.jsx       | 10 +++----
 packages/sage-react/lib/Table/TableRow.jsx    | 16 +++++------
 packages/sage-react/lib/Table/configs.js      |  2 +-
 packages/sage-react/lib/Textarea/Textarea.jsx |  8 +++---
 .../lib/Textarea/Textarea.story.jsx           |  2 +-
 packages/sage-react/lib/Toast/Toast.jsx       | 10 +++----
 packages/sage-react/lib/Toast/Toast.story.jsx |  4 +--
 packages/sage-react/lib/Toggle/Checkbox.jsx   |  6 ++--
 packages/sage-react/lib/Tooltip/Tooltip.jsx   |  8 +++---
 .../sage-react/lib/Tooltip/TooltipElement.jsx |  8 +++---
 .../lib/configs/automationTestIds/index.js    |  1 -
 packages/sage-react/lib/configs/index.js      |  2 +-
 .../lib/configs/kjbElementIds/index.js        |  1 +
 .../kjbElementIds.js}                         |  6 ++--
 52 files changed, 202 insertions(+), 202 deletions(-)
 delete mode 100644 packages/sage-react/lib/configs/automationTestIds/index.js
 create mode 100644 packages/sage-react/lib/configs/kjbElementIds/index.js
 rename packages/sage-react/lib/configs/{automationTestIds/automationTestIds.js => kjbElementIds/kjbElementIds.js} (82%)

diff --git a/packages/sage-react/lib/Accordion/Accordion.jsx b/packages/sage-react/lib/Accordion/Accordion.jsx
index a0e61abb84..4b0baedb4c 100644
--- a/packages/sage-react/lib/Accordion/Accordion.jsx
+++ b/packages/sage-react/lib/Accordion/Accordion.jsx
@@ -7,7 +7,7 @@ export const Accordion = ({
   children,
   id,
   onlyOnePanelExpanded,
-  testId,
+  kjbElementId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -19,7 +19,7 @@ export const Accordion = ({
   );
 
   return (
-    <div className={classNames} {...rest} data-kjb-element={testId}>
+    <div className={classNames} {...rest} data-kjb-element={kjbElementId}>
       {children}
     </div>
   );
@@ -30,7 +30,7 @@ Accordion.defaultProps = {
   className: '',
   id: '',
   onlyOnePanelExpanded: false,
-  testId: null,
+  kjbElementId: null,
 };
 
 Accordion.propTypes = {
@@ -38,5 +38,5 @@ Accordion.propTypes = {
   className: PropTypes.string,
   id: PropTypes.string,
   onlyOnePanelExpanded: PropTypes.bool,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Accordion/Accordion.story.jsx b/packages/sage-react/lib/Accordion/Accordion.story.jsx
index 5daada7d4d..138dd01c35 100644
--- a/packages/sage-react/lib/Accordion/Accordion.story.jsx
+++ b/packages/sage-react/lib/Accordion/Accordion.story.jsx
@@ -16,8 +16,8 @@ const MultipleTemplate = () => {
   };
 
   return (
-    <Accordion testId="exampleSingleAccordion">
-      <ExpandableCard name="panel-1" expanded={activePanel === 'panel-1'} onClick={handleChange('panel-1')} alignArrowRight={true} testId="firstExamplePanel" triggerLabel="Expand">
+    <Accordion kjbElementId="exampleSingleAccordion">
+      <ExpandableCard name="panel-1" expanded={activePanel === 'panel-1'} onClick={handleChange('panel-1')} alignArrowRight={true} kjbElementId="firstExamplePanel" triggerLabel="Expand">
         <Checkbox
           checked={false}
           disabled={false}
@@ -25,7 +25,7 @@ const MultipleTemplate = () => {
           id="checkbox1-demo"
           label="Grant offers"
           name="checkbox1-demo"
-          testId="grantOffers"
+          kjbElementId="grantOffers"
         />
         <Checkbox
           checked={false}
@@ -34,7 +34,7 @@ const MultipleTemplate = () => {
           id="checkbox2-demo"
           label="Add tags"
           name="checkbox2-demo"
-          testId="addTags"
+          kjbElementId="addTags"
         />
         <Checkbox
           checked={false}
@@ -43,10 +43,10 @@ const MultipleTemplate = () => {
           id="checkbox3-demo"
           label="Subscribe to emails"
           name="checkbox3-demo"
-          testId="subscribeToEmails"
+          kjbElementId="subscribeToEmails"
         />
       </ExpandableCard>
-      <ExpandableCard name="panel-2" alignArrowRight={true} expanded={activePanel === 'panel-2'} onClick={handleChange('panel-2')} testId="secondExpandablePanel" triggerLabel="Expand">
+      <ExpandableCard name="panel-2" alignArrowRight={true} expanded={activePanel === 'panel-2'} onClick={handleChange('panel-2')} kjbElementId="secondExpandablePanel" triggerLabel="Expand">
         <Checkbox
           checked={false}
           disabled={false}
@@ -54,7 +54,7 @@ const MultipleTemplate = () => {
           id="checkbox1-demo"
           label="Grant offers"
           name="checkbox1-demo"
-          testId="grantOffers"
+          kjbElementId="grantOffers"
         />
         <Checkbox
           checked={false}
@@ -63,7 +63,7 @@ const MultipleTemplate = () => {
           id="checkbox2-demo"
           label="Add tags"
           name="checkbox2-demo"
-          testId="addTags"
+          kjbElementId="addTags"
         />
         <Checkbox
           checked={false}
@@ -72,10 +72,10 @@ const MultipleTemplate = () => {
           id="checkbox3-demo"
           label="Subscribe to emails"
           name="checkbox3-demo"
-          testId="subscribeToEmails"
+          kjbElementId="subscribeToEmails"
         />
       </ExpandableCard>
-      <ExpandableCard name="panel-3" alignArrowRight={true} expanded={activePanel === 'panel-3'} onClick={handleChange('panel-3')} testId="thirdExpandablePanel" triggerLabel="Expand">
+      <ExpandableCard name="panel-3" alignArrowRight={true} expanded={activePanel === 'panel-3'} onClick={handleChange('panel-3')} kjbElementId="thirdExpandablePanel" triggerLabel="Expand">
         <Checkbox
           checked={false}
           disabled={false}
@@ -83,7 +83,7 @@ const MultipleTemplate = () => {
           id="checkbox1-demo"
           label="Grant offers"
           name="checkbox1-demo"
-          testId="grantOffers"
+          kjbElementId="grantOffers"
         />
         <Checkbox
           checked={false}
@@ -92,7 +92,7 @@ const MultipleTemplate = () => {
           id="checkbox2-demo"
           label="Add tags"
           name="checkbox2-demo"
-          testId="addTags"
+          kjbElementId="addTags"
         />
         <Checkbox
           checked={false}
@@ -101,7 +101,7 @@ const MultipleTemplate = () => {
           id="checkbox3-demo"
           label="Subscribe to emails"
           name="checkbox3-demo"
-          testId="subscribeToEmails"
+          kjbElementId="subscribeToEmails"
         />
       </ExpandableCard>
     </Accordion>
@@ -110,7 +110,7 @@ const MultipleTemplate = () => {
 
 const DefaultTemplate = () => (
   <Accordion>
-    <ExpandableCard name="panel-1" alignArrowRight={true} triggerLabel="Expand" testId="">
+    <ExpandableCard name="panel-1" alignArrowRight={true} triggerLabel="Expand" kjbElementId="">
       <Checkbox
         checked={false}
         disabled={false}
diff --git a/packages/sage-react/lib/Alert/Alert.jsx b/packages/sage-react/lib/Alert/Alert.jsx
index d130fdfd7f..a67b9a5f64 100644
--- a/packages/sage-react/lib/Alert/Alert.jsx
+++ b/packages/sage-react/lib/Alert/Alert.jsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 import { ALERT_COLORS, ALERT_PRIMARY_ACTION_CLASSNAME } from './configs';
-import { SageTokens, TestIds } from '../configs';
+import { SageTokens, KjbElementIds } from '../configs';
 
 export const Alert = ({
   actions,
@@ -15,7 +15,7 @@ export const Alert = ({
   icon,
   onDismiss,
   small,
-  testId,
+  kjbElementId,
   title,
   titleAddon,
   ...rest
@@ -59,17 +59,17 @@ export const Alert = ({
   };
 
   return !selfDismissed ? (
-    <div className={classNames} {...rest} data-kjb-element={testId}>
-      <Icon icon={icon || getDefaultIcon()} className="sage-alert__icon" testId={TestIds.al} />
+    <div className={classNames} {...rest} data-kjb-element={kjbElementId}>
+      <Icon icon={icon || getDefaultIcon()} className="sage-alert__icon" kjbElementId={KjbElementIds.al} />
       <div className="sage-alert__copy">
         {title && (
-          <h3 className="sage-alert__title" data-kjb-element={TestIds.alertTitle}>
+          <h3 className="sage-alert__title" data-kjb-element={KjbElementIds.alertTitle}>
             {title}
             <span className="sage-alert__title--add-on"> {titleAddon}</span>
           </h3>
         )}
         {description && (
-          <p className="sage-alert__desc" data-kjb-element={TestIds.alertDescripton}>{description}</p>
+          <p className="sage-alert__desc" data-kjb-element={KjbElementIds.alertDescription}>{description}</p>
         )}
       </div>
       {actions && (
@@ -88,7 +88,7 @@ export const Alert = ({
             value="Close"
             onClick={handleDismiss}
             aria-label="Close Alert"
-            testId="closeButton"
+            kjbElementId="closeButton"
           />
         </div>
       )}
@@ -107,7 +107,7 @@ Alert.defaultProps = {
   icon: null,
   onDismiss: null,
   small: false,
-  testId: null,
+  kjbElementId: null,
   title: null,
   titleAddon: null,
 };
@@ -121,7 +121,7 @@ Alert.propTypes = {
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
   onDismiss: PropTypes.func,
   small: PropTypes.bool,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   title: PropTypes.string,
   titleAddon: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Alert/Alert.story.jsx b/packages/sage-react/lib/Alert/Alert.story.jsx
index 9455d3ad98..6cae72d91d 100644
--- a/packages/sage-react/lib/Alert/Alert.story.jsx
+++ b/packages/sage-react/lib/Alert/Alert.story.jsx
@@ -48,14 +48,14 @@ DefaultWithActions.args = {
       <Button
         className={Alert.PRIMARY_ACTION_CLASSNAME}
         color={Button.COLORS.PRIMARY}
-        testId="getUnlimitedPagesButton"
+        kjbElementId="getUnlimitedPagesButton"
       >
         Get unlimited pages
       </Button>
       <Link
         href="//example.com"
         suppressDefaultClass
-        testId="checkUsageLink"
+        kjbElementId="checkUsageLink"
       >
         Check Usage
       </Link>
@@ -68,7 +68,7 @@ DismissableAlert.args = {
   description: 'Body duis rhoncus neque, sed nulla sed quis fames. Eu eu ut at odio ultrices orci varius habitant. Tempor vulputate in nisl massa eget id.',
   color: Alert.COLORS.DEFAULT,
   dismissable: true,
-  testId: 'exampleAlert',
+  kjbElementId: 'exampleAlert',
   onClickDismiss: () => console.log('clicked to dismiss'), // eslint-disable-line
 };
 
@@ -83,13 +83,13 @@ DismissableAlertWithActions.args = {
       <Button
         className={Alert.PRIMARY_ACTION_CLASSNAME}
         color={Button.COLORS.PRIMARY}
-        testId="checkUsageButton"
+        kjbElementId="checkUsageButton"
       >
         Get unlimited pages
       </Button>
       <Link
         href="//example.com"
-        testId="checkUsage"
+        kjbElementId="checkUsage"
         suppressDefaultClass
       >
         Check Usage
@@ -102,20 +102,20 @@ export const NonDismissableAlert = Template.bind({});
 NonDismissableAlert.args = {
   color: Alert.COLORS.APPROACHING,
   description: 'Body duis rhoncus neque, sed nulla sed quis fames. Eu eu ut at odio ultrices orci varius habitant. Tempor vulputate in nisl massa eget id.',
-  testId: 'nonDismissableAlert',
+  kjbElementId: 'nonDismissableAlert',
   actions: (
     <>
       <Button
         className={Alert.PRIMARY_ACTION_CLASSNAME}
         color={Button.COLORS.PRIMARY}
-        testId="getUnlimitedPages"
+        kjbElementId="getUnlimitedPages"
       >
         Get unlimited pages
       </Button>
       <Link
         href="//example.com"
         suppressDefaultClass
-        testId="checkUsage"
+        kjbElementId="checkUsage"
       >
         Check Usage
       </Link>
@@ -129,13 +129,13 @@ SmallAlert.args = {
   dismissable: true,
   title: null,
   description: 'Body duis rhoncus neque, sed nulla sed quis fames et tu odio.',
-  testId: 'smallAlert',
+  kjbElementId: 'smallAlert',
   actions: (
     <>
       <Link
         href="//example.com"
         suppressDefaultClass
-        testId="checkUsage"
+        kjbElementId="checkUsage"
       >
         Check Usage
       </Link>
diff --git a/packages/sage-react/lib/Badge/Badge.jsx b/packages/sage-react/lib/Badge/Badge.jsx
index 471049f7a2..dca5131d79 100644
--- a/packages/sage-react/lib/Badge/Badge.jsx
+++ b/packages/sage-react/lib/Badge/Badge.jsx
@@ -14,7 +14,7 @@ export const Badge = React.forwardRef(({
   isInteractive,
   isStatus,
   large,
-  testId,
+  kjbElementId,
   value,
   ...rest
 }, ref) => {
@@ -33,7 +33,7 @@ export const Badge = React.forwardRef(({
   return (
     <span
       className={classNames}
-      data-kjb-element={testId}
+      data-kjb-element={kjbElementId}
       ref={ref}
       {...containerAttributes}
     >
@@ -69,7 +69,7 @@ Badge.defaultProps = {
   isDropdown: false,
   isStatus: false,
   large: false,
-  testId: null,
+  kjbElementId: null,
 };
 
 Badge.propTypes = {
@@ -81,6 +81,6 @@ Badge.propTypes = {
   isDropdown: PropTypes.bool,
   isStatus: PropTypes.bool,
   large: PropTypes.bool,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
 };
diff --git a/packages/sage-react/lib/Badge/Badge.story.jsx b/packages/sage-react/lib/Badge/Badge.story.jsx
index ff19fd45dd..d5a4f289a6 100644
--- a/packages/sage-react/lib/Badge/Badge.story.jsx
+++ b/packages/sage-react/lib/Badge/Badge.story.jsx
@@ -35,7 +35,7 @@ IndicatorBadge.args = {
   dot: (
     <Dot />
   ),
-  testId: 'indicatorBadge',
+  kjbElementId: 'indicatorBadge',
 };
 
 export const InteractiveBadge = Template.bind({});
@@ -45,7 +45,7 @@ InteractiveBadge.args = {
   dot: (
     <Dot />
   ),
-  testId: 'interactiveBadge',
+  kjbElementId: 'interactiveBadge',
 };
 
 export const LargeBadge = Template.bind({});
@@ -55,5 +55,5 @@ LargeBadge.args = {
   dot: (
     <Dot />
   ),
-  testId: 'largeBadge',
+  kjbElementId: 'largeBadge',
 };
diff --git a/packages/sage-react/lib/Banner/Banner.jsx b/packages/sage-react/lib/Banner/Banner.jsx
index 863470e54d..eead68719f 100644
--- a/packages/sage-react/lib/Banner/Banner.jsx
+++ b/packages/sage-react/lib/Banner/Banner.jsx
@@ -8,7 +8,7 @@ import { BANNER_TYPES } from './configs';
 export const Banner = ({
   active,
   bannerContext,
-  testId,
+  kjbElementId,
   ...rest
 }) => (
   (bannerContext !== null)
@@ -25,7 +25,7 @@ Banner.defaultProps = {
   dismissable: true,
   link: null,
   onDismiss: null,
-  testId: null,
+  kjbElementId: null,
   text: null,
   type: Banner.TYPES.DEFAULT,
 };
@@ -41,7 +41,7 @@ Banner.propTypes = {
     target: PropTypes.string
   }),
   onDismiss: PropTypes.func,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   text: PropTypes.string,
   type: PropTypes.oneOf(Object.values(BANNER_TYPES)),
 };
diff --git a/packages/sage-react/lib/Breadcrumbs/Breadcrumbs.jsx b/packages/sage-react/lib/Breadcrumbs/Breadcrumbs.jsx
index fcf9fcd94f..bfc3d9963c 100644
--- a/packages/sage-react/lib/Breadcrumbs/Breadcrumbs.jsx
+++ b/packages/sage-react/lib/Breadcrumbs/Breadcrumbs.jsx
@@ -11,7 +11,7 @@ export const Breadcrumbs = ({
   icon,
   isProgressbar,
   items,
-  testId,
+  kjbElementId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -39,7 +39,7 @@ export const Breadcrumbs = ({
         className={`sage-breadcrumbs__link ${isCurrent && 'sage-breadcrumbs__link--current'}`}
         suppressDefaultClass={true}
         tag={linkTag}
-        testId="breadcrumbListItem"
+        kjbElementId="breadcrumbListItem"
         {...otherProps}
       >
         {(icon && items.length === 1 && i === 0) && (
@@ -61,7 +61,7 @@ export const Breadcrumbs = ({
     <nav
       aria-label="Breadcrumbs"
       className={classNames}
-      data-kjb-element={testId}
+      data-kjb-element={kjbElementId}
       {...rest}
     >
       {items.length > 1 ? (
@@ -84,7 +84,7 @@ Breadcrumbs.defaultProps = {
   icon: SageTokens.ICONS.CARET_LEFT,
   isProgressbar: false,
   items: [],
-  testId: null,
+  kjbElementId: null,
 };
 
 Breadcrumbs.propTypes = {
@@ -92,5 +92,5 @@ Breadcrumbs.propTypes = {
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
   isProgressbar: PropTypes.bool,
   items: PropTypes.arrayOf(breadcrumbItemPropTypes),
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Button/Button.jsx b/packages/sage-react/lib/Button/Button.jsx
index 90488c2aa1..34e7fc3157 100644
--- a/packages/sage-react/lib/Button/Button.jsx
+++ b/packages/sage-react/lib/Button/Button.jsx
@@ -30,7 +30,7 @@ export const Button = React.forwardRef(({
   selected,
   small,
   subtle,
-  testId,
+  kjbElementId,
   ...rest
 }, ref) => {
   const { to, href } = rest;
@@ -83,10 +83,10 @@ export const Button = React.forwardRef(({
       ref={ref}
       className={classNames}
       aria-disabled={isLink && disabled}
-      data-kjb-element={testId}
+      data-kjb-element={kjbElementId}
       disabled={!isLink && disabled}
       tag={isLink ? linkTag : null}
-      testId={testId}
+      kjbElementId={kjbElementId}
       {...(isLink ? { suppressDefaultClass: isLink } : {})}
       onClick={onClick}
       {...rest}
@@ -141,7 +141,7 @@ Button.defaultProps = {
   selected: false,
   small: false,
   subtle: false,
-  testId: null,
+  kjbElementId: null,
   type: 'button',
 };
 
@@ -164,6 +164,6 @@ Button.propTypes = {
   selected: PropTypes.bool,
   small: PropTypes.bool,
   subtle: PropTypes.bool,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   type: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Button/ButtonGroup.story.jsx b/packages/sage-react/lib/Button/ButtonGroup.story.jsx
index 76ce50fa7e..faae79e6db 100644
--- a/packages/sage-react/lib/Button/ButtonGroup.story.jsx
+++ b/packages/sage-react/lib/Button/ButtonGroup.story.jsx
@@ -39,8 +39,8 @@ export const WithLink = () => (
   <ButtonGroup align="space-between">
     <Link href="http://example.com" removeUnderline style={Link.COLORS.SECONDARY}>Link</Link>
     <ButtonGroup gap="md">
-      <Button color={Button.COLORS.PRIMARY} testId="examplePrimaryButton">Foo</Button>
-      <Button color={Button.COLORS.SECONDARY} testId="exampleSecondaryButton">Bar</Button>
+      <Button color={Button.COLORS.PRIMARY} kjbElementId="examplePrimaryButton">Foo</Button>
+      <Button color={Button.COLORS.SECONDARY} kjbElementId="exampleSecondaryButton">Bar</Button>
     </ButtonGroup>
   </ButtonGroup>
 );
diff --git a/packages/sage-react/lib/Card/Card.jsx b/packages/sage-react/lib/Card/Card.jsx
index 5281436bc9..a78e6ec8c8 100644
--- a/packages/sage-react/lib/Card/Card.jsx
+++ b/packages/sage-react/lib/Card/Card.jsx
@@ -25,7 +25,7 @@ export const Card = ({
   interactive,
   loading,
   borderDashed,
-  testId,
+  kjbElementId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -74,7 +74,7 @@ Card.defaultProps = {
   interactive: false,
   loading: false,
   borderDashed: false,
-  testId: null,
+  kjbElementId: null,
 };
 
 Card.propTypes = {
@@ -88,5 +88,5 @@ Card.propTypes = {
   interactive: PropTypes.bool,
   loading: PropTypes.bool,
   borderDashed: PropTypes.bool,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/CopyButton/CopyButton.jsx b/packages/sage-react/lib/CopyButton/CopyButton.jsx
index 779d7aa35d..f0567b79ed 100644
--- a/packages/sage-react/lib/CopyButton/CopyButton.jsx
+++ b/packages/sage-react/lib/CopyButton/CopyButton.jsx
@@ -11,7 +11,7 @@ export const CopyButton = ({
   className,
   fillContainer,
   semibold,
-  testId,
+  kjbElementId,
 }) => {
   const classNames = classnames(
     'sage-copy-btn',
@@ -37,7 +37,7 @@ export const CopyButton = ({
         icon={borderless ? SageTokens.ICONS.COPY : null}
         iconPosition={Button.ICON_POSITIONS.RIGHT}
         subtle={true}
-        testId={testId}
+        kjbElementId={kjbElementId}
         type="button"
         onClick={onClick}
       >
@@ -59,7 +59,7 @@ CopyButton.defaultProps = {
   className: null,
   fillContainer: false,
   semibold: true,
-  testId: null,
+  kjbElementId: null,
 };
 
 CopyButton.propTypes = {
@@ -68,5 +68,5 @@ CopyButton.propTypes = {
   className: PropTypes.string,
   fillContainer: PropTypes.bool,
   semibold: PropTypes.bool,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/CopyButton/CopyButton.story.jsx b/packages/sage-react/lib/CopyButton/CopyButton.story.jsx
index a3b09c5c87..196bae50a2 100644
--- a/packages/sage-react/lib/CopyButton/CopyButton.story.jsx
+++ b/packages/sage-react/lib/CopyButton/CopyButton.story.jsx
@@ -14,7 +14,7 @@ export default {
   },
   args: {
     children: 'https://www.example.com',
-    testId: 'exampleCopyButton',
+    kjbElementId: 'exampleCopyButton',
   }
 };
 
@@ -25,5 +25,5 @@ export const Borderless = Template.bind({});
 Borderless.args = {
   borderless: true,
   children: 'example@example.com',
-  testId: 'exampleBorderlessCopyButton',
+  kjbElementId: 'exampleBorderlessCopyButton',
 };
diff --git a/packages/sage-react/lib/DataCard/DataCard.jsx b/packages/sage-react/lib/DataCard/DataCard.jsx
index 9c96956d41..eb656ccf3f 100644
--- a/packages/sage-react/lib/DataCard/DataCard.jsx
+++ b/packages/sage-react/lib/DataCard/DataCard.jsx
@@ -11,7 +11,7 @@ export const DataCard = ({
   children,
   className,
   color,
-  testId,
+  kjbElementId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -23,7 +23,7 @@ export const DataCard = ({
   );
 
   return (
-    <div className={classNames} {...rest} data-kjb-element={testId}>
+    <div className={classNames} {...rest} data-kjb-element={kjbElementId}>
       {children}
     </div>
   );
@@ -39,12 +39,12 @@ DataCard.defaultProps = {
   children: null,
   className: '',
   color: DATA_CARD_COLORS.DEFAULT,
-  testId: null,
+  kjbElementId: null,
 };
 
 DataCard.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   color: PropTypes.oneOf(Object.values(DATA_CARD_COLORS)),
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/DataCard/DataCardHeader.jsx b/packages/sage-react/lib/DataCard/DataCardHeader.jsx
index 396e06c51d..69a6b6efb0 100644
--- a/packages/sage-react/lib/DataCard/DataCardHeader.jsx
+++ b/packages/sage-react/lib/DataCard/DataCardHeader.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TestIds } from '../configs';
+import { KjbElementIds } from '../configs';
 
 export const DataCardHeader = ({
   children,
@@ -13,7 +13,7 @@ export const DataCardHeader = ({
     {...rest}
   >
     {title && (
-      <h4 className="sage-data-card__title t-sage--truncate" data-kjb-element={TestIds.dataCardHeader}>{title}</h4>
+      <h4 className="sage-data-card__title t-sage--truncate" data-kjb-element={KjbElementIds.dataCardHeader}>{title}</h4>
     )}
     {children}
   </div>
diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx
index 584af858b2..c939c34ae9 100644
--- a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx
+++ b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import uuid from 'react-uuid';
 import { Button } from '../Button';
-import { SageClassnames, SageTokens, TestIds } from '../configs';
+import { SageClassnames, SageTokens, KjbElementIds } from '../configs';
 
 export const ExpandableCard = ({
   alignArrowRight,
@@ -17,7 +17,7 @@ export const ExpandableCard = ({
   name,
   onClick,
   sageType,
-  testId,
+  kjbElementId,
   triggerLabel,
   ...rest
 }) => {
@@ -62,7 +62,7 @@ export const ExpandableCard = ({
         icon={SageTokens.ICONS.CARET_RIGHT}
         onClick={handleChange}
         subtle={true}
-        testId={TestIds.expandableCardButton}
+        kjbElementId={KjbElementIds.expandableCardButton}
         {...rest}
       >
         {triggerLabel}
@@ -85,10 +85,10 @@ export const ExpandableCard = ({
   };
 
   return (
-    <div className={`${containerClassnames} ${className || ''}`} data-kjb-element={testId} {...rest}>
+    <div className={`${containerClassnames} ${className || ''}`} data-kjb-element={kjbElementId} {...rest}>
       {determineAlignment()}
 
-      <div id={id} className={bodyClassnames} data-kjb-element={TestIds.expandableCardBody}>
+      <div id={id} className={bodyClassnames} data-kjb-element={KjbElementIds.expandableCardBody}>
         {children}
       </div>
     </div>
@@ -107,7 +107,7 @@ ExpandableCard.defaultProps = {
   name: null,
   onClick: null,
   sageType: false,
-  testId: null,
+  kjbElementId: null,
   triggerLabel: null,
 };
 
@@ -123,6 +123,6 @@ ExpandableCard.propTypes = {
   name: PropTypes.string,
   onClick: PropTypes.func,
   sageType: PropTypes.bool,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   triggerLabel: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Hint/Hint.jsx b/packages/sage-react/lib/Hint/Hint.jsx
index 1505af7250..7719269f76 100644
--- a/packages/sage-react/lib/Hint/Hint.jsx
+++ b/packages/sage-react/lib/Hint/Hint.jsx
@@ -8,7 +8,7 @@ export const Hint = ({
   className,
   content,
   icon,
-  testId,
+  kjbElementId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -16,7 +16,7 @@ export const Hint = ({
     className,
   );
   return (
-    <div className={classNames} {...rest} data-kjb-element={testId}>
+    <div className={classNames} {...rest} data-kjb-element={kjbElementId}>
       {icon && (
         <Icon
           className="sage-hint__icon"
@@ -31,12 +31,12 @@ export const Hint = ({
 Hint.defaultProps = {
   className: '',
   icon: null,
-  testId: null,
+  kjbElementId: null,
 };
 
 Hint.propTypes = {
   className: PropTypes.string,
   content: PropTypes.string.isRequired,
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Hint/Hint.story.jsx b/packages/sage-react/lib/Hint/Hint.story.jsx
index 79ac47be47..2f360382c4 100644
--- a/packages/sage-react/lib/Hint/Hint.story.jsx
+++ b/packages/sage-react/lib/Hint/Hint.story.jsx
@@ -22,7 +22,7 @@ export default {
   args: {
     content: 'Hello, world!',
     icon: SageTokens.ICONS.INFO_CIRCLE,
-    testId: 'exampleHint',
+    kjbElementId: 'exampleHint',
   }
 };
 
diff --git a/packages/sage-react/lib/Icon/Icon.jsx b/packages/sage-react/lib/Icon/Icon.jsx
index 199c4cd485..2199f1866e 100644
--- a/packages/sage-react/lib/Icon/Icon.jsx
+++ b/packages/sage-react/lib/Icon/Icon.jsx
@@ -15,7 +15,7 @@ export const Icon = ({
   icon,
   label,
   size,
-  testId,
+  kjbElementId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -104,7 +104,7 @@ Icon.defaultProps = {
   color: SageTokens.COLOR_SLIDERS.INHERIT,
   label: '',
   size: null,
-  testId: null,
+  kjbElementId: null,
 };
 
 Icon.propTypes = {
@@ -153,5 +153,5 @@ Icon.propTypes = {
   /**
    * Specifies the value of the data-kjb-element attribute for test automation
    */
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Input/Input.jsx b/packages/sage-react/lib/Input/Input.jsx
index 38885f57b3..71ade3a340 100644
--- a/packages/sage-react/lib/Input/Input.jsx
+++ b/packages/sage-react/lib/Input/Input.jsx
@@ -38,7 +38,7 @@ export const Input = React.forwardRef(({
   standalone,
   step,
   suffix,
-  testId,
+  kjbElementId,
   value,
   ...rest
 }, ref) => {
@@ -109,7 +109,7 @@ export const Input = React.forwardRef(({
   }, [prefix, suffix]);
 
   return (
-    <div className={classNames} data-kjb-element={testId}>
+    <div className={classNames} data-kjb-element={kjbElementId}>
       <input
         autoComplete={autocomplete}
         className="sage-form-field sage-input__field"
@@ -200,7 +200,7 @@ Input.defaultProps = {
   standalone: false,
   step: null,
   suffix: null,
-  testId: null,
+  kjbElementId: null,
   value: '',
 };
 
@@ -232,6 +232,6 @@ Input.propTypes = {
   standalone: PropTypes.bool,
   step: PropTypes.string,
   suffix: PropTypes.string,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
diff --git a/packages/sage-react/lib/Input/Input.story.jsx b/packages/sage-react/lib/Input/Input.story.jsx
index 731979e364..5f1e8a6500 100644
--- a/packages/sage-react/lib/Input/Input.story.jsx
+++ b/packages/sage-react/lib/Input/Input.story.jsx
@@ -27,7 +27,7 @@ export default {
   args: {
     id: 'field-2',
     label: 'First name',
-    testId: 'exampleInput',
+    kjbElementId: 'exampleInput',
   }
 };
 
@@ -52,7 +52,7 @@ export const Default = (args) => {
       required={false}
       standalone={args.standalone}
       suffix={args.suffix}
-      testId={args.test}
+      kjbElementId={args.test}
       type={args.inputType}
       value={value}
     />
diff --git a/packages/sage-react/lib/Link/Link.jsx b/packages/sage-react/lib/Link/Link.jsx
index 3aa2c3d220..e8fcae0f75 100644
--- a/packages/sage-react/lib/Link/Link.jsx
+++ b/packages/sage-react/lib/Link/Link.jsx
@@ -20,7 +20,7 @@ export const Link = ({
   style,
   suppressDefaultClass,
   tag,
-  testId,
+  kjbElementId,
   tooltip,
   truncate,
   ...rest
@@ -45,7 +45,7 @@ export const Link = ({
         <Tooltip {...tooltip}>
           <SelfTag
             className={classNames}
-            data-kjb-element={testId}
+            data-kjb-element={kjbElementId}
             {...rest}
           >
             {icon && (
@@ -61,7 +61,7 @@ export const Link = ({
       ) : (
         <SelfTag
           className={classNames}
-          data-kjb-element={testId}
+          data-kjb-element={kjbElementId}
           {...rest}
         >
           {icon && (
@@ -92,7 +92,7 @@ Link.defaultProps = {
   style: Link.COLORS.PRIMARY,
   suppressDefaultClass: false,
   tag: null,
-  testId: null,
+  kjbElementId: null,
   tooltip: null,
   truncate: false,
 };
@@ -109,7 +109,7 @@ Link.propTypes = {
   style: PropTypes.oneOf(Object.values(Link.COLORS)),
   suppressDefaultClass: PropTypes.bool,
   tag: tagPropTypes,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   tooltip: PropTypes.shape({
     position: PropTypes.oneOf(Object.values(Tooltip.POSITIONS)),
   }),
diff --git a/packages/sage-react/lib/MediaTile/MediaTile.jsx b/packages/sage-react/lib/MediaTile/MediaTile.jsx
index ee50d5fc27..c0d724ef83 100644
--- a/packages/sage-react/lib/MediaTile/MediaTile.jsx
+++ b/packages/sage-react/lib/MediaTile/MediaTile.jsx
@@ -15,7 +15,7 @@ export const MediaTile = ({
   footer,
   media,
   mediaConfigs,
-  testId,
+  kjbElementId,
   tileLink,
   title,
   titleTag,
@@ -32,7 +32,7 @@ export const MediaTile = ({
   const TitleTag = titleTag;
 
   return (
-    <Panel className={classNames} data-kjb-element={testId} {...rest}>
+    <Panel className={classNames} data-kjb-element={kjbElementId} {...rest}>
       {media && (
         <Panel.Figure
           bleed={Panel.Figure.BLEED_OPTIONS.TOP}
@@ -95,7 +95,7 @@ MediaTile.defaultProps = {
   footer: null,
   media: null,
   mediaConfigs: null,
-  testId: null,
+  kjbElementId: null,
   tileLink: null,
   title: null,
   titleTag: 'h3',
@@ -110,7 +110,7 @@ MediaTile.propTypes = {
   footer: PropTypes.node,
   media: PropTypes.node,
   mediaConfigs: PropTypes.shape(Panel.Figure.propTypes), // TODO: panel figure configs
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   tileLink: PropTypes.shape(Link.propTypes),
   title: PropTypes.string,
   titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
diff --git a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
index 598069e53b..88e4618665 100644
--- a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
+++ b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
@@ -88,6 +88,6 @@ KitchenSink.args = {
     backgroundColor: SageTokens.COLOR_PALETTE.GREEN_150,
     padded: true,
   },
-  testId: 'kitchenSinkTile',
+  kjbElementId: 'kitchenSinkTile',
   tileLink: null,
 };
diff --git a/packages/sage-react/lib/Modal/Modal.jsx b/packages/sage-react/lib/Modal/Modal.jsx
index bc44adba6d..18f9a05542 100644
--- a/packages/sage-react/lib/Modal/Modal.jsx
+++ b/packages/sage-react/lib/Modal/Modal.jsx
@@ -23,7 +23,7 @@ export const Modal = ({
   large,
   onExit,
   size,
-  testId,
+  kjbElementId,
   ...rest
 }) => {
   const [mouseDownSrc, setMouseDownSrc] = useState(null);
@@ -96,7 +96,7 @@ export const Modal = ({
       <div
         className={`sage-modal__container ${containerClassName || ''}`}
         aria-modal="true"
-        data-kjb-element={testId}
+        data-kjb-element={kjbElementId}
         {...rest}
       >
         {children}
@@ -129,7 +129,7 @@ Modal.defaultProps = {
   disableBackgroundDismiss: false,
   onExit: (val) => val,
   size: null,
-  testId: null,
+  kjbElementId: null,
 };
 
 Modal.propTypes = {
@@ -152,5 +152,5 @@ Modal.propTypes = {
   large: PropTypes.bool,
   onExit: PropTypes.func,
   size: PropTypes.oneOf(Object.values(Modal.SIZES)),
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/NextBestAction/NextBestAction.jsx b/packages/sage-react/lib/NextBestAction/NextBestAction.jsx
index 20d490bb88..5d9a791e1d 100644
--- a/packages/sage-react/lib/NextBestAction/NextBestAction.jsx
+++ b/packages/sage-react/lib/NextBestAction/NextBestAction.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Button } from '../Button';
 import { NEXT_BEST_ACTION_COLORS } from './configs';
-import { TestIds } from '../configs';
+import { KjbElementIds } from '../configs';
 
 export const NextBestAction = ({
   actions,
@@ -13,7 +13,7 @@ export const NextBestAction = ({
   dismissable,
   graphic,
   onClickDismiss,
-  testId,
+  kjbElementId,
   title,
 }) => {
   const baseClass = 'sage-next-best-action';
@@ -28,7 +28,7 @@ export const NextBestAction = ({
   );
 
   return (
-    <div className={classNames} data-kjb-element={testId}>
+    <div className={classNames} data-kjb-element={kjbElementId}>
       {graphic.element && (
         <div className="sage-next-best-action__graphic">
           {graphic.element}
@@ -53,7 +53,7 @@ export const NextBestAction = ({
           onClick={onClickDismiss}
           subtle={true}
           small={true}
-          testId={TestIds.closeButton}
+          kjbElementId={KjbElementIds.closeButton}
         >
           Close
         </Button>
@@ -74,7 +74,7 @@ NextBestAction.defaultProps = {
     onRight: false,
   },
   onClickDismiss: null,
-  testId: null,
+  kjbElementId: null,
   title: '',
 };
 
@@ -89,6 +89,6 @@ NextBestAction.propTypes = {
     onRight: PropTypes.bool,
   }),
   onClickDismiss: PropTypes.func,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   title: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx b/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx
index 57c8a44e4d..9e42f4a866 100644
--- a/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx
+++ b/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx
@@ -19,7 +19,7 @@ export default {
     actions: (
       <Button
         color={Button.COLORS.PRIMARY}
-        testId="upsellButton"
+        kjbElementId="upsellButton"
       >
         Add an Upsell
       </Button>
@@ -40,7 +40,7 @@ export default {
     },
     // eslint-disable-next-line no-console
     onClickDismiss: () => { console.log('Add your own dismiss functionality here!'); },
-    testId: 'exampleNextAction',
+    kjbElementId: 'exampleNextAction',
     title: 'Offer an additional buy with Upsell',
   },
   argTypes: {
diff --git a/packages/sage-react/lib/PageHeading/PageHeading.jsx b/packages/sage-react/lib/PageHeading/PageHeading.jsx
index 72eaa80dc3..dac34f6e6c 100644
--- a/packages/sage-react/lib/PageHeading/PageHeading.jsx
+++ b/packages/sage-react/lib/PageHeading/PageHeading.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Breadcrumbs } from '../Breadcrumbs';
-import { TestIds } from '../configs';
+import { KjbElementIds } from '../configs';
 
 export const PageHeading = ({
   actions,
@@ -25,12 +25,12 @@ export const PageHeading = ({
         'sage-page-heading--has-image': image.src,
       }
     )}
-    data-kjb-element={TestIds.pageHeadingHeading}
+    data-kjb-element={KjbElementIds.pageHeadingHeading}
     {...rest}
   >
     {breadcrumbs && (
       <div className="sage-page-heading__crumbs">
-        <Breadcrumbs items={breadcrumbs} className="sage-page-heading__back" testId={TestIds.pageHeadingBreadcrumbs} />
+        <Breadcrumbs items={breadcrumbs} className="sage-page-heading__back" kjbElementId={KjbElementIds.pageHeadingBreadcrumbs} />
       </div>
     )}
     {introText && (
@@ -39,7 +39,7 @@ export const PageHeading = ({
       </div>
     )}
     <div className="sage-page-heading__title-wrapper">
-      <h1 className="sage-page-heading__title" data-kjb-element={TestIds.pageHeadingTitle}>
+      <h1 className="sage-page-heading__title" data-kjb-element={KjbElementIds.pageHeadingTitle}>
         {children}
       </h1>
       {help && (
@@ -49,7 +49,7 @@ export const PageHeading = ({
       )}
     </div>
     {image.src && (
-      <div className="sage-page-heading__image" data-kjb-element={TestIds.pageHeadingImage}>
+      <div className="sage-page-heading__image" data-kjb-element={KjbElementIds.pageHeadingImage}>
         <img alt={image.alt || ''} src={image.src} />
       </div>
     )}
@@ -66,7 +66,7 @@ export const PageHeading = ({
       </div>
     )}
     {secondaryText && (
-      <div className="sage-page-heading__secondary" data-kjb-element={TestIds.pageHeadingSubTitle}>
+      <div className="sage-page-heading__secondary" data-kjb-element={KjbElementIds.pageHeadingSubTitle}>
         {secondaryText}
       </div>
     )}
diff --git a/packages/sage-react/lib/Panel/Panel.jsx b/packages/sage-react/lib/Panel/Panel.jsx
index 61a9f08df3..ae6508eb8d 100644
--- a/packages/sage-react/lib/Panel/Panel.jsx
+++ b/packages/sage-react/lib/Panel/Panel.jsx
@@ -38,7 +38,7 @@ export const Panel = ({
   );
 
   return (
-    <div className={classNames} data-kjb-element={testId} {...rest}>
+    <div className={classNames} data-kjb-element={kjbElementId} {...rest}>
       {loading ? (
         <Loader loading={true} fillSpace={true} type={Loader.TYPES.SPINNER} />
       ) : children}
@@ -69,7 +69,7 @@ Panel.defaultProps = {
   clearPaddingBottom: false,
   clearPaddingTop: false,
   loading: false,
-  testId: null,
+  kjbElementId: null,
 };
 
 Panel.propTypes = {
@@ -86,5 +86,5 @@ Panel.propTypes = {
   /** Setting this to true will display a loading spinner within the Panel. */
   loading: PropTypes.bool,
   /** The value of data-kjb-element for automated tests */
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
index 6a63da9866..6b83710e30 100644
--- a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
+++ b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
@@ -14,7 +14,7 @@ export const ProgressBar = ({
   displayPercent,
   label,
   percent,
-  testId,
+  kjbElementId,
   tooltipPosition,
   ...rest
 }) => {
@@ -34,7 +34,7 @@ export const ProgressBar = ({
     }
 
     return (
-      <div className="sage-progress-bar__background" data-kjb-element={testId} style={bgStyles}>
+      <div className="sage-progress-bar__background" data-kjb-element={kjbElementId} style={bgStyles}>
         <progress
           className="sage-progress-bar__element"
           aria-valuemax="100"
@@ -87,7 +87,7 @@ ProgressBar.defaultProps = {
   displayPercent: false,
   label: null,
   percent: null,
-  testId: null,
+  kjbElementId: null,
   tooltipPosition: null,
 };
 
@@ -100,6 +100,6 @@ ProgressBar.propTypes = {
   displayPercent: PropTypes.bool,
   label: PropTypes.string,
   percent: PropTypes.string,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   tooltipPosition: PropTypes.oneOf(Object.values(ProgressBar.TOOLTIP_POSITIONS)),
 };
diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx
index 704502fcdb..6d44e23a42 100644
--- a/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx
+++ b/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx
@@ -16,7 +16,7 @@ export default {
   args: {
     label: 'Cloning product',
     percent: '44',
-    testId: 'exampleProgressBar',
+    kjbElementId: 'exampleProgressBar',
   },
   argTypes: {
     ...selectArgs({
@@ -34,5 +34,5 @@ CustomColor.args = {
   backgroundColor: ProgressBar.COLORS.ORANGE_100,
   label: 'Cloning product',
   percent: '44',
-  testId: 'exampleColorProgressBar',
+  kjbElementId: 'exampleColorProgressBar',
 };
diff --git a/packages/sage-react/lib/Property/Property.jsx b/packages/sage-react/lib/Property/Property.jsx
index 55593a7d0a..fc607442ea 100644
--- a/packages/sage-react/lib/Property/Property.jsx
+++ b/packages/sage-react/lib/Property/Property.jsx
@@ -9,7 +9,7 @@ export const Property = ({
   children,
   className,
   icon,
-  testId,
+  kjbElementId,
   ...rest
 }) => {
   const classNames = classnames(
@@ -18,7 +18,7 @@ export const Property = ({
   );
 
   return (
-    <span className={classNames} data-kjb-element={testId} {...rest}>
+    <span className={classNames} data-kjb-element={kjbElementId} {...rest}>
       {icon && (
         <Icon icon={icon} className="sage-property__icon" />
       )}
@@ -37,12 +37,12 @@ Property.defaultProps = {
   className: null,
   children: null,
   icon: null,
-  testId: null,
+  kjbElementId: null,
 };
 
 Property.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Property/Property.story.jsx b/packages/sage-react/lib/Property/Property.story.jsx
index 8368fbba4c..d73ce71f42 100644
--- a/packages/sage-react/lib/Property/Property.story.jsx
+++ b/packages/sage-react/lib/Property/Property.story.jsx
@@ -17,7 +17,7 @@ export default {
   args: {
     icon: SageTokens.ICONS.USERS,
     children: 'Property',
-    testId: 'exampleProperty',
+    kjbElementId: 'exampleProperty',
   },
   argTypes: {
     ...selectArgs({
diff --git a/packages/sage-react/lib/Search/Search.jsx b/packages/sage-react/lib/Search/Search.jsx
index b7d9205f54..0c524372ed 100644
--- a/packages/sage-react/lib/Search/Search.jsx
+++ b/packages/sage-react/lib/Search/Search.jsx
@@ -14,7 +14,7 @@ export const Search = React.forwardRef(({
   onClear,
   onChange,
   placeholder,
-  testId,
+  kjbElementId,
   value,
   ...rest
 }, ref) => {
@@ -35,7 +35,7 @@ export const Search = React.forwardRef(({
     });
 
   return (
-    <div data-kjb-element={testId} className={classNames}>
+    <div data-kjb-element={kjbElementId} className={classNames}>
       {label && (
         <label htmlFor={id} className={labelClassnames}>
           {label}
@@ -85,7 +85,7 @@ Search.defaultProps = {
   hideLabel: false,
   onClear: null,
   placeholder: 'Search',
-  testId: null,
+  kjbElementId: null,
 };
 
 Search.propTypes = {
@@ -98,6 +98,6 @@ Search.propTypes = {
   onChange: PropTypes.func.isRequired,
   onClear: PropTypes.func,
   placeholder: PropTypes.string,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   value: PropTypes.string.isRequired,
 };
diff --git a/packages/sage-react/lib/Select/Select.jsx b/packages/sage-react/lib/Select/Select.jsx
index 011b0bb5fc..4dfab40ccb 100644
--- a/packages/sage-react/lib/Select/Select.jsx
+++ b/packages/sage-react/lib/Select/Select.jsx
@@ -16,7 +16,7 @@ export const Select = ({
   options,
   placeholder,
   required,
-  testId,
+  kjbElementId,
   value,
   ...rest
 }) => {
@@ -64,7 +64,7 @@ export const Select = ({
   );
 
   return (
-    <div className={classNames} data-kjb-element={testId}>
+    <div className={classNames} data-kjb-element={kjbElementId}>
       <select
         className="sage-select__field"
         id={id}
@@ -117,7 +117,7 @@ Select.defaultProps = {
   options: [],
   placeholder: null,
   required: false,
-  testId: null,
+  kjbElementId: null,
   value: '',
 };
 
@@ -159,6 +159,6 @@ Select.propTypes = {
   ),
   placeholder: PropTypes.string,
   required: PropTypes.bool,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   value: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Select/Select.story.jsx b/packages/sage-react/lib/Select/Select.story.jsx
index f4cec4b455..626dcdd586 100644
--- a/packages/sage-react/lib/Select/Select.story.jsx
+++ b/packages/sage-react/lib/Select/Select.story.jsx
@@ -56,7 +56,7 @@ SelectWithState.args = {
     'Option 4',
   ],
   placeholder: 'Choose...',
-  testId: 'exampleSelectWithState',
+  kjbElementId: 'exampleSelectWithState',
 };
 
 export const DisabledSelectFieldWithOptionPreselected = (args) => <Select {...args} />;
@@ -71,7 +71,7 @@ DisabledSelectFieldWithOptionPreselected.args = {
     'Option 4',
   ],
   disabled: true,
-  testId: 'exampleDisabledWithPreselectedOption',
+  kjbElementId: 'exampleDisabledWithPreselectedOption',
   value: 'Option 3',
 };
 
@@ -101,7 +101,7 @@ SelectWithOptionDisabled.args = {
     'Fifth option',
   ],
   placeholder: 'Pick an option:',
-  testId: 'exampleSelectWithOptionDisabled',
+  kjbElementId: 'exampleSelectWithOptionDisabled',
 };
 
 export const SelectWithHelpContentLink = (args) => {
@@ -129,7 +129,7 @@ SelectWithHelpContentLink.args = {
     </Link>
   ),
   placeholder: 'Choose an option:',
-  testId: 'exampleSelectWithHelpContentLink',
+  kjbElementId: 'exampleSelectWithHelpContentLink',
 };
 
 export const SelectWithHelpContentPopover = (args) => {
@@ -209,5 +209,5 @@ SelectWithOptgroups.args = {
     },
   ],
   placeholder: 'Choose wisely…',
-  testId: 'exampleSelectWithOptgroups',
+  kjbElementId: 'exampleSelectWithOptgroups',
 };
diff --git a/packages/sage-react/lib/StatBox/StatBox.jsx b/packages/sage-react/lib/StatBox/StatBox.jsx
index 6a2b3e11e1..5cbda88fac 100644
--- a/packages/sage-react/lib/StatBox/StatBox.jsx
+++ b/packages/sage-react/lib/StatBox/StatBox.jsx
@@ -20,7 +20,7 @@ export const StatBox = ({
   link,
   popover,
   raised,
-  testId,
+  kjbElementId,
   timeframe,
   title,
 }) => {
@@ -68,7 +68,7 @@ export const StatBox = ({
   return (
     <article
       className={statBoxContainer}
-      data-kjb-element={testId}
+      data-kjb-element={kjbElementId}
     >
       {icon && (
         <div className="sage-stat-box__icon">
@@ -140,7 +140,7 @@ StatBox.defaultProps = {
   link: null,
   popover: null,
   raised: false,
-  testId: null,
+  kjbElementId: null,
   timeframe: null,
 };
 
@@ -169,7 +169,7 @@ StatBox.propTypes = {
   }),
   popover: PropTypes.node,
   raised: PropTypes.bool,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   timeframe: PropTypes.string,
   title: PropTypes.string.isRequired,
 };
diff --git a/packages/sage-react/lib/StatBox/StatBox.story.jsx b/packages/sage-react/lib/StatBox/StatBox.story.jsx
index 2fd8401640..3dc336dbc1 100644
--- a/packages/sage-react/lib/StatBox/StatBox.story.jsx
+++ b/packages/sage-react/lib/StatBox/StatBox.story.jsx
@@ -50,7 +50,7 @@ DefaultWithSageColorLegendDot.args = {
     value: 'View More',
     href: '#'
   },
-  testId: 'exampleStatBox',
+  kjbElementId: 'exampleStatBox',
   timeframe: 'in last 30 days',
   title: 'In Progress'
 };
@@ -67,7 +67,7 @@ DefaultWithSageCustomColorLegendDot.args = {
     value: 'View More',
     href: '#'
   },
-  testId: 'exampleDefaultWithColorLegend',
+  kjbElementId: 'exampleDefaultWithColorLegend',
   timeframe: 'in last 30 days',
   title: 'In Progress'
 };
@@ -84,7 +84,7 @@ DefaultRaised.args = {
     href: '#'
   },
   raised: true,
-  testId: 'exampleDefaultRaised',
+  kjbElementId: 'exampleDefaultRaised',
   timeframe: 'in last 30 days',
   title: 'In Progress'
 };
@@ -97,7 +97,7 @@ SimpleWithImage.args = {
     alt: 'Example',
     src: 'https://via.placeholder.com/150'
   },
-  testId: 'exampleSimpleWithImage',
+  kjbElementId: 'exampleSimpleWithImage',
   title: 'Title'
 };
 
@@ -109,7 +109,7 @@ SimpleWithIcon.args = {
     cardColor: Icon.CARD_COLORS.PUBLISHED,
     name: Icon.ICONS.CHECK
   },
-  testId: 'exampleSimpleWithIcon',
+  kjbElementId: 'exampleSimpleWithIcon',
   title: 'Title'
 };
 
@@ -118,6 +118,6 @@ NullView.args = {
   change: null,
   data: 'No insights to show',
   hasData: false,
-  testId: 'exampleNullView',
+  kjbElementId: 'exampleNullView',
   title: 'In Progress'
 };
diff --git a/packages/sage-react/lib/Table/Table.jsx b/packages/sage-react/lib/Table/Table.jsx
index 36d3a842b8..f84b851672 100644
--- a/packages/sage-react/lib/Table/Table.jsx
+++ b/packages/sage-react/lib/Table/Table.jsx
@@ -52,7 +52,7 @@ export const Table = ({
   selectedRows,
   showSelectAll,
   tableAttributes,
-  testId,
+  kjbElementId,
 }) => {
   const [selfSelectedRows, setSelfSelectedRows] = useState([]);
   const [selfHeaders, setSelfHeaders] = useState([]);
@@ -283,14 +283,14 @@ export const Table = ({
         selected={selfSelectedRows === SELECTION_TYPES.ALL || selfSelectedRows.includes(rowId)}
         selectable={selectable}
         onSelect={onSelectRow}
-        testId="tableRowListItem"
+        kjbElementId="tableRowListItem"
       />
     );
   };
 
   // Renders the table itself
   const renderTable = () => (
-    <table className={tableClassNames} data-kjb-element={testId} {...tableAttributes}>
+    <table className={tableClassNames} data-kjb-element={kjbElementId} {...tableAttributes}>
       {caption && (
         <caption className={`sage-table__caption--${captionSide || CAPTION_SIDE.BOTTOM}`}>
           {caption}
@@ -354,7 +354,7 @@ Table.defaultProps = {
   selectedRows: [],
   showSelectAll: false,
   tableAttributes: null,
-  testId: null,
+  kjbElementId: null,
 };
 
 Table.propTypes = {
@@ -451,5 +451,5 @@ Table.propTypes = {
   tableAttributes: PropTypes.shape({}),
 
   /** * Adds a data-kjb-element that uniquely idenfies the table */
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Table/TableRow.jsx b/packages/sage-react/lib/Table/TableRow.jsx
index 3d9b6c7f26..c980882260 100644
--- a/packages/sage-react/lib/Table/TableRow.jsx
+++ b/packages/sage-react/lib/Table/TableRow.jsx
@@ -6,7 +6,7 @@ import { parseRowData, parseCellData } from './helpers';
 import { cellPropTypes } from './configs';
 import { TableHelpers } from '../helpers';
 import { Checkbox } from '../Toggle';
-import { TestIds } from '../configs';
+import { KjbElementIds } from '../configs';
 
 /* eslint-disable react-hooks/exhaustive-deps */
 
@@ -19,7 +19,7 @@ export const TableRow = ({
   schema,
   selectable,
   selected,
-  testId,
+  kjbElementId,
   typeRenderers,
 }) => {
   const [selfSelected, setSelfSelected] = useState(false);
@@ -88,7 +88,7 @@ export const TableRow = ({
   };
 
   return (
-    <tr className={classNames} data-kjb-element={testId} data-table-row-id={id}>
+    <tr className={classNames} data-kjb-element={kjbElementId} data-table-row-id={id}>
       {selectable && (
         <td className={selectableClassNames}>
           <Checkbox
@@ -98,7 +98,7 @@ export const TableRow = ({
             name="sage-table-selections"
             onChange={onChangeSelector}
             standalone={true}
-            testId={TestIds.tableRowCheckbox}
+            kjbElementId={KjbElementIds.tableRowCheckbox}
             value={id.toString()}
           />
         </td>
@@ -107,11 +107,11 @@ export const TableRow = ({
         if (!configs) {
           return;
         }
-        const { key, classNames, style, attributes, contents, testId } = configs;
+        const { key, classNames, style, attributes, contents, kjbElementId } = configs;
         // eslint-disable-next-line consistent-return
         return (
           <td
-            data-kjb-element={testId}
+            data-kjb-element={kjbElementId}
             key={key}
             className={classNames}
             style={style}
@@ -133,7 +133,7 @@ TableRow.defaultProps = {
   onSelect: (ev) => ev,
   selectable: false,
   selected: false,
-  testId: null,
+  kjbElementId: null,
   typeRenderers: {},
   schema: {}
 };
@@ -173,7 +173,7 @@ TableRow.propTypes = {
    * `descriptionListItem`. For example, a list of contacts should have a value
    * like `contactListItem`.
    */
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
 
   /** The data types that could be renedered in a Table Cell. */
   typeRenderers: PropTypes.shape({}),
diff --git a/packages/sage-react/lib/Table/configs.js b/packages/sage-react/lib/Table/configs.js
index ad72c04009..3bbee2b20d 100644
--- a/packages/sage-react/lib/Table/configs.js
+++ b/packages/sage-react/lib/Table/configs.js
@@ -21,6 +21,6 @@ export const cellPropTypes = {
   field: PropTypes.string,
   id: PropTypes.string,
   style: PropTypes.shape({}),
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   value: dataPropTypes,
 };
diff --git a/packages/sage-react/lib/Textarea/Textarea.jsx b/packages/sage-react/lib/Textarea/Textarea.jsx
index 97483dd1c5..4fba1e87e9 100644
--- a/packages/sage-react/lib/Textarea/Textarea.jsx
+++ b/packages/sage-react/lib/Textarea/Textarea.jsx
@@ -10,7 +10,7 @@ export const Textarea = ({
   label,
   message,
   onChange,
-  testId,
+  kjbElementId,
   value,
   ...rest
 }) => {
@@ -32,7 +32,7 @@ export const Textarea = ({
   };
 
   return (
-    <div className={classNames} data-kjb-element={testId}>
+    <div className={classNames} data-kjb-element={kjbElementId}>
       <textarea
         className="sage-textarea__field"
         disabled={disabled}
@@ -63,7 +63,7 @@ Textarea.defaultProps = {
   label: null,
   message: null,
   onChange: null,
-  testId: null,
+  kjbElementId: null,
   value: '',
 };
 
@@ -75,6 +75,6 @@ Textarea.propTypes = {
   label: PropTypes.string,
   message: PropTypes.string,
   onChange: PropTypes.func,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   value: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Textarea/Textarea.story.jsx b/packages/sage-react/lib/Textarea/Textarea.story.jsx
index 2d3c8a55c5..112a978aa6 100644
--- a/packages/sage-react/lib/Textarea/Textarea.story.jsx
+++ b/packages/sage-react/lib/Textarea/Textarea.story.jsx
@@ -39,7 +39,7 @@ export const TextareaWithState = (args) => {
     <Textarea
       {...args}
       value={value}
-      testId="exampleTextArea"
+      kjbElementId="exampleTextArea"
       onChange={onChange}
     />
   );
diff --git a/packages/sage-react/lib/Toast/Toast.jsx b/packages/sage-react/lib/Toast/Toast.jsx
index 6364cca443..c83e1c551c 100644
--- a/packages/sage-react/lib/Toast/Toast.jsx
+++ b/packages/sage-react/lib/Toast/Toast.jsx
@@ -16,7 +16,7 @@ export const Toast = ({
   onDismiss,
   timeout,
   link,
-  testId,
+  kjbElementId,
   type,
   title,
 }) => {
@@ -79,7 +79,7 @@ export const Toast = ({
   };
 
   return !isDismissed && (
-    <div className="sage-toast-container" data-kjb-element={testId}>
+    <div className="sage-toast-container" data-kjb-element={kjbElementId}>
       <dialog open className={classNames} aria-labelledby={`sage-toast-label-${id}`}>
         {renderAsset()}
 
@@ -105,7 +105,7 @@ export const Toast = ({
           type="button"
           className="sage-toast__button sage-toast__button--close sage-btn sage-btn--subtle sage-btn--secondary sage-btn--icon-only-remove"
           onClick={onClickDismiss}
-          testId="closeButton"
+          kjbElementId="closeButton"
         >
           <pds-icon name="remove" />
           <span className="visually-hidden">
@@ -127,7 +127,7 @@ Toast.defaultProps = {
   onDismiss: (evt) => evt,
   timeout: 4500,
   link: null,
-  testId: null,
+  kjbElementId: null,
   title: null,
   type: Toast.TYPES.DEFAULT,
 };
@@ -146,7 +146,7 @@ Toast.propTypes = {
     text: PropTypes.string,
     href: PropTypes.string,
   }),
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   type: PropTypes.oneOf(Object.values(Toast.TYPES)),
   title: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Toast/Toast.story.jsx b/packages/sage-react/lib/Toast/Toast.story.jsx
index b1771b7444..3b1d0a9d64 100644
--- a/packages/sage-react/lib/Toast/Toast.story.jsx
+++ b/packages/sage-react/lib/Toast/Toast.story.jsx
@@ -39,7 +39,7 @@ Default.args = {
   icon: SageTokens.ICONS.INFO_CIRCLE,
   title: 'Hello',
   description: 'How are you?',
-  testId: 'exampleToast',
+  kjbElementId: 'exampleToast',
   timeout: 3500,
   type: Toast.TYPES.DEFAULT
 };
@@ -49,7 +49,7 @@ WithLink.args = {
   icon: SageTokens.ICONS.INFO_CIRCLE,
   title: 'Congratulations on your success',
   link: { href: 'http://kajabi.com', text: 'Go to next step' },
-  testId: 'exampleWithLink',
+  kjbElementId: 'exampleWithLink',
   type: Toast.TYPES.LOADING,
   timeout: false
 };
diff --git a/packages/sage-react/lib/Toggle/Checkbox.jsx b/packages/sage-react/lib/Toggle/Checkbox.jsx
index 57185e18a6..ebf8846327 100644
--- a/packages/sage-react/lib/Toggle/Checkbox.jsx
+++ b/packages/sage-react/lib/Toggle/Checkbox.jsx
@@ -17,7 +17,7 @@ export const Checkbox = ({
   partialSelection,
   required,
   standalone,
-  testId,
+  kjbElementId,
   value,
   ...rest
 }) => (
@@ -58,7 +58,7 @@ Checkbox.defaultProps = {
   itemInList: false,
   required: false,
   standalone: false,
-  testId: null,
+  kjbElementId: null,
   value: '',
 };
 
@@ -77,6 +77,6 @@ Checkbox.propTypes = {
   partialSelection: PropTypes.bool,
   required: PropTypes.bool,
   standalone: PropTypes.bool,
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   value: PropTypes.string
 };
diff --git a/packages/sage-react/lib/Tooltip/Tooltip.jsx b/packages/sage-react/lib/Tooltip/Tooltip.jsx
index 8bfe3546fc..983312dbcf 100644
--- a/packages/sage-react/lib/Tooltip/Tooltip.jsx
+++ b/packages/sage-react/lib/Tooltip/Tooltip.jsx
@@ -8,7 +8,7 @@ export const Tooltip = ({
   children,
   content,
   position,
-  testId,
+  kjbElementId,
   tooltipCustomClass,
   ...rest
 }) => {
@@ -38,7 +38,7 @@ export const Tooltip = ({
           content={content}
           parentDomRect={parentDomRect}
           position={position}
-          testId={testId}
+          kjbElementId={kjbElementId}
           tooltipCustomClass={tooltipCustomClass}
         />,
         document.body
@@ -52,7 +52,7 @@ Tooltip.POSITIONS = TOOLTIP_POSITIONS;
 
 Tooltip.defaultProps = {
   position: TOOLTIP_POSITIONS.DEFAULT,
-  testId: null,
+  kjbElementId: null,
   tooltipCustomClass: '',
 };
 
@@ -60,6 +60,6 @@ Tooltip.propTypes = {
   children: PropTypes.node.isRequired,
   content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
   position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   tooltipCustomClass: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Tooltip/TooltipElement.jsx b/packages/sage-react/lib/Tooltip/TooltipElement.jsx
index ec7b737c3d..5a98a06f17 100644
--- a/packages/sage-react/lib/Tooltip/TooltipElement.jsx
+++ b/packages/sage-react/lib/Tooltip/TooltipElement.jsx
@@ -11,7 +11,7 @@ export const TooltipElement = ({
   content,
   parentDomRect,
   position,
-  testId,
+  kjbElementId,
   tooltipCustomClass,
 }) => {
   const tooltipRef = useRef(null);
@@ -76,7 +76,7 @@ export const TooltipElement = ({
       ref={tooltipRef}
       className={classNames}
       style={parentDomRect ? coordinates : {}}
-      data-kjb-element={testId}
+      data-kjb-element={kjbElementId}
     >
       {content}
     </div>
@@ -88,7 +88,7 @@ TooltipElement.POSITIONS = TOOLTIP_POSITIONS;
 TooltipElement.defaultProps = {
   parentDomRect: null,
   position: TOOLTIP_POSITIONS.DEFAULT,
-  testId: null,
+  kjbElementId: null,
   tooltipCustomClass: '',
 };
 
@@ -102,6 +102,6 @@ TooltipElement.propTypes = {
     width: PropTypes.number,
   }),
   position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
-  testId: PropTypes.string,
+  kjbElementId: PropTypes.string,
   tooltipCustomClass: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/configs/automationTestIds/index.js b/packages/sage-react/lib/configs/automationTestIds/index.js
deleted file mode 100644
index 9abdaab5b5..0000000000
--- a/packages/sage-react/lib/configs/automationTestIds/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { TestIds } from './automationTestIds';
diff --git a/packages/sage-react/lib/configs/index.js b/packages/sage-react/lib/configs/index.js
index 0d050da50a..f454f3430b 100644
--- a/packages/sage-react/lib/configs/index.js
+++ b/packages/sage-react/lib/configs/index.js
@@ -1,4 +1,4 @@
 export { SageClassnames } from './classnames';
 export { SageDictionary } from './dictionary';
 export { SageTokens } from './tokens';
-export { TestIds } from './automationTestIds';
+export { KjbElementIds } from './kjbElementIds';
diff --git a/packages/sage-react/lib/configs/kjbElementIds/index.js b/packages/sage-react/lib/configs/kjbElementIds/index.js
new file mode 100644
index 0000000000..fe3e51c566
--- /dev/null
+++ b/packages/sage-react/lib/configs/kjbElementIds/index.js
@@ -0,0 +1 @@
+export { KjbElementIds } from './kjbElementIds';
diff --git a/packages/sage-react/lib/configs/automationTestIds/automationTestIds.js b/packages/sage-react/lib/configs/kjbElementIds/kjbElementIds.js
similarity index 82%
rename from packages/sage-react/lib/configs/automationTestIds/automationTestIds.js
rename to packages/sage-react/lib/configs/kjbElementIds/kjbElementIds.js
index 421c65b14f..4931289544 100644
--- a/packages/sage-react/lib/configs/automationTestIds/automationTestIds.js
+++ b/packages/sage-react/lib/configs/kjbElementIds/kjbElementIds.js
@@ -1,8 +1,8 @@
 /**
  * The list of automation test ids used in the components.
  */
-export const TestIds = {
-  alertDescripton: 'alertDescription',
+export const KjbElementIds = {
+  alertDescription: 'alertDescription',
   alertIcon: 'alertIcon',
   alertTitle: 'alertTitle',
   closeButton: 'closeButton',
@@ -10,7 +10,7 @@ export const TestIds = {
   expandableCardBody: 'cardBody',
   expandableCardButton: 'expandCollapseButton',
   avatarContainer: 'avatarContainer',
-  nextBestActionButtion: 'nextBestActionButton',
+  nextBestActionButton: 'nextBestActionButton',
   pageHeadingBreadcrumbs: 'pageHeadingBreadcrumbs',
   pageHeadingHeading: 'pageHeading',
   pageHeadingImage: 'pageHeadingImage',