chore: change testId to kjbElementId

Kajabi · Jan 7, 2025 · 0be85e2 · 0be85e2
1 parent 94949df
commit 0be85e2
Show file tree

Hide file tree

Showing 52 changed files with 202 additions and 202 deletions.
diff --git 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,13 +30,13 @@ Accordion.defaultProps = {
   className: '',
   id: '',
   onlyOnePanelExpanded: false,
-  testId: null,
+  kjbElementId: null,
 };
 
 Accordion.propTypes = {
   children: PropTypes.node,
   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
@@ -16,16 +16,16 @@ 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}
           hasError={false}
           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,18 +43,18 @@ 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}
           hasError={false}
           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,18 +72,18 @@ 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}
           hasError={false}
           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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)),
 };