From d23ca8f2ad0bfb39537ce11c31436b546adb725d Mon Sep 17 00:00:00 2001
From: James Ronald <7976511+jronald01@users.noreply.github.com>
Date: Mon, 22 Apr 2024 13:40:14 +0100
Subject: [PATCH] LOOM-1367 BpkList Class 2 Overrides (#3377)

---
 .eslintrc                                  | 1 +
 packages/bpk-component-list/src/BpkList.js | 8 +++-----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 9a2a1a48e3..7be60635c1 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -138,6 +138,7 @@
               "Prop {{prop}} is forbidden. See https://github.com/Skyscanner/eslint-plugin-rules?tab=readme-ov-file#forbid-component-props",
             "allowedFor": [
               "InnerContainer", // allowed for a prop that is passed down in the BpkMobileScrollContainer to a generated element
+              "ListElements",  // allowed for a prop that is passed down in BpkList to the conditional list elements
               "ScrimBpkModalInner", // allowed for a prop that is passed in BpkModal down to a scrim wrapped BpkModalInner component.
               "Slider" // allowed for a prop that is passed in BpkSlider down to the react-slider component.
             ]
diff --git a/packages/bpk-component-list/src/BpkList.js b/packages/bpk-component-list/src/BpkList.js
index dfb3f75e15..0914092849 100644
--- a/packages/bpk-component-list/src/BpkList.js
+++ b/packages/bpk-component-list/src/BpkList.js
@@ -40,20 +40,18 @@ const BpkList = (props: Props) => {
   const { ariaLabel, ariaLabelledby, children, className, ordered, title } =
     props;
 
-  const TagName: any = ordered ? 'ol' : 'ul';
+  const ListElements: any = ordered ? 'ol' : 'ul';
   const classNames: string = getClassName('bpk-list', className);
 
   return (
-    <TagName
+    <ListElements
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
       title={title}
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
       className={classNames}
     >
       {children}
-    </TagName>
+    </ListElements>
   );
 };