chore: update tabs & accordions ui (#961)

[![PR App][icn]][demo] | Fix RM-10694
:-------------------:|:----------:

## 🧰 Changes
- Add `icon` and `iconColor` props to <Tab>
- Replace default marker with icon in <Accordion>

<img width="500" alt="image"
src="https://github.com/user-attachments/assets/c4cd8fb6-776d-4e74-91fd-dd39f590256e">

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].


[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

Author: trishaprile

components/Accordion/index.tsx

@@ -3,9 +3,12 @@ import React, { useState } from 'react';
 import './style.scss';
 
 const Accordion = ({ children, icon, iconColor, title }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <details className="Accordion">
+    <details className="Accordion" onToggle={() => setIsOpen(!isOpen)}>
       <summary className="Accordion-title">
+       <i className={`Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-chevron-right`}></i>
        {icon && <i className={`Accordion-icon fa ${icon}`} style={{ color: `${iconColor}` }}></i>}
        {title}
       </summary>

components/Accordion/style.scss

@@ -26,11 +26,31 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
+
+    &::marker {
+      content: "";
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    } 
+  }
+
+  &-toggleIcon,
+  &-toggleIcon_opened {
+    color: var(--color-text-default, #384248);
+    font-size: 14px;
+    margin-left: 5px;
+    margin-right: 10px;
+    transition: transform 0.1s;
+
+    &_opened {
+      transform: rotate(90deg);
+    }
   }
 
   &-icon {
     color: var(--project-color-primary, inherit);
-    margin-left: 10px;
     margin-right: 10px;
   }
 

components/Tabs/index.tsx

@@ -19,6 +19,7 @@ const Tabs = ({ children }) => {
         <nav className="TabGroup-nav">
           {children?.map((tab, index: number) => 
             <button className={`TabGroup-tab${activeTab === index ? '_active' : ''}`} key={tab.props.title} onClick={() => setActiveTab(index)}>
+              {tab.props.icon && <i className={`TabGroup-icon fa ${tab.props.icon}`} style={{ color: `${tab.props.iconColor}` }}></i>}
               {tab.props.title}
             </button>
           )}

components/Tabs/style.scss

@@ -33,6 +33,11 @@
     }
   }
 
+  &-icon {
+    color: var(--project-color-primary, inherit);
+    margin-right: 10px;
+  }
+
   .TabContent {
     color: var(--color-text-muted, #4f5a66);
   }