enhancing lifecycle component

website/src/components/lifeCycle/index.js

@@ -1,11 +1,33 @@
 import React from 'react'
 import styles from './styles.module.css';
 
+const statusColors = {
+  enterprise: '#727d91',
+  team: '#727d91',
+  developer: '#727d91',
+  new: '#047377',
+  beta: '#047377',
+  ga: '#047377',
+  'public preview': '#047377',
+};
+
 export default function Lifecycle(props) {
-    if (!props.status) {
-        return null;
-    }
-    return (
-        <span className={styles.lifecycle}>{props.status}</span>
-    );
+  // Check if props.status is an array or a single value
+  const statuses = Array.isArray(props.status) ? props.status : [props.status];
+
+  return (
+    <>
+      {statuses.map((status, index) => {
+        const style = {
+          backgroundColor: props.backgroundColor || statusColors[status] || '#047377' // Default to teal if no match
+        };
+
+        return (
+          <span key={index} className={styles.lifecycle} style={style}>
+            {status}
+          </span>
+        );
+      })}
+    </>
+  );
 }

website/src/components/lifeCycle/styles.module.css

@@ -1,5 +1,5 @@
 .lifecycle {
-    background-color: #047377; /* Teal background to align with dbt Labs' color */
+    background-color: #047377; /* Default teal background */
     color: #fff; /* Light text color for contrast */
     font-size: 0.78rem; /* Using rem so font size is relative to root */
     padding: 1px 8px; /* Adjust padding for a more pill-like shape */
@@ -11,3 +11,4 @@
     text-transform: capitalize; /* Uppercase text */
     line-height: 1.6; /* Adjust line height for vertical alignment */
 }
+

website/src/theme/DocItem/Layout/index.js

@@ -46,6 +46,9 @@ function useDocTOC() {
   async function fetchElements() {
     // get html elements
     const headings = await getElements(".markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6")
+
+    // filter out the Lifecycle badge from the headings
+    const filteredHeadings = headings.filter(heading => !heading.classList.contains('lifecycle'));
 
     // if headings exist on page
     // compare against toc