feat: i18n prop

Author: araujogui

packages/ui-components/src/Common/TableOfContents/index.stories.tsx

@@ -17,6 +17,8 @@ export const CustomDepth: Story = {
 export default {
   component: TableOfContents,
   args: {
+    ariaLabel: 'Table of Contents',
+    summaryTitle: 'On this page',
     headings: [
       {
         value: 'OpenSSL update assessment, and Node.js project plans',

packages/ui-components/src/Common/TableOfContents/index.tsx

@@ -9,13 +9,17 @@ import styles from './index.module.css';
 
 type TableOfContentsProps = {
   headings: Array<Heading>;
+  ariaLabel: string;
+  summaryTitle: string;
   minDepth?: number;
   maxDepth?: number;
   as?: LinkLike;
 };
 
 const TableOfContents: FC<TableOfContentsProps> = ({
   headings,
+  ariaLabel,
+  summaryTitle,
   minDepth = 2,
   maxDepth = 4,
   as: Component = 'a',
@@ -25,8 +29,8 @@ const TableOfContents: FC<TableOfContentsProps> = ({
   );
 
   return (
-    <details className={styles.details} aria-label="Table of Contents">
-      <summary className={styles.summary}>On this page</summary>
+    <details className={styles.details} aria-label={ariaLabel}>
+      <summary className={styles.summary}>{summaryTitle}</summary>
       <ul className={styles.list}>
         {filteredHeadings.map((head, index) => (
           <li key={head.data?.id ?? index}>