adding more usecases to lifecycle component

website/docs/docs/introduction.md

@@ -5,7 +5,6 @@ pagination_next: null
 pagination_prev: null
 ---
 
-
 <Snippet path="what-is-dbt-intro" />
 
 dbt compiles and runs your analytics code against your data platform, enabling you and your team to collaborate on a single source of truth for metrics, insights, and business definitions. This single source of truth, combined with the ability to define tests for your data, reduces errors when logic changes, and alerts you when issues arise.

website/docs/docs/use-dbt-semantic-layer/dbt-sl.md

@@ -15,7 +15,7 @@ import DeprecationNotice from '/snippets/_sl-deprecation-notice.md';
 
 <DeprecationNotice />
 
- </VersionBlock>
+</VersionBlock>
 
 The dbt Semantic Layer, powered by [MetricFlow](/docs/build/about-metricflow), simplifies the process of defining and using critical business metrics, like `revenue` in the modeling layer (your dbt project). By centralizing metric definitions, data teams can ensure consistent self-service access to these metrics in downstream data tools and applications. The dbt Semantic Layer eliminates duplicate coding by allowing data teams to define metrics on top of existing models and automatically handles data joins. 
 

website/src/components/lifeCycle/index.js

@@ -1,11 +1,44 @@
 import React from 'react'
 import styles from './styles.module.css';
 
+const statusColors = {
+  enterprise: '#EBEDF0',
+  team: '#EBEDF0',
+  developer: '#EBEDF0',
+  new: '#047377',
+  beta: '#047377',
+  ga: '#047377',
+  'public preview': '#047377',
+};
+
+const fontColors = {
+    enterprise: '#262A38',
+    team: '#262A38', 
+    developer: '#262A38', 
+    // lifecycle statuses use the css determined font color (white)
+  };
+
 export default function Lifecycle(props) {
-    if (!props.status) {
-        return null;
-    }
-    return (
-        <span className={styles.lifecycle}>{props.status}</span>
-    );
+  if (!props.status || (Array.isArray(props.status) && props.status.length === 0)) {
+    return null;
+  }
+  // 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
+          color: fontColors[status] || '#fff' // default font color if no matc
+        };
+
+        return (
+          <span key={index} className={`${styles.lifecycle} lifecycle-badge`} style={style}>
+            {status}
+          </span>
+        );
+      })}
+    </>
+  );
 }

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

@@ -1,13 +1,15 @@
 .lifecycle {
-    background-color: #047377; /* Teal background to align with dbt Labs' color */
-    color: #fff; /* Light text color for contrast */
-    font-size: 0.78rem; /* Using rem so font size is relative to root */
+    background-color: #047377; /* Default teal background */
+    color: #262A38; /* Light text color for contrast */
+    font-size: 0.8rem; /* Using rem so font size is relative to root */
+    font-weight: 600;  /* Normal font weight */
     padding: 1px 8px; /* Adjust padding for a more pill-like shape */
     border-radius: 16px; /* Larger border-radius for rounded edges */
     margin-left: 8px; /* Margin to separate from the header text */
     vertical-align: middle; /* Align with the title */
     display: inline-block; /* Use inline-block for better control */
-    font-weight: bold; /* Bold text */
     text-transform: capitalize; /* Uppercase text */
     line-height: 1.6; /* Adjust line height for vertical alignment */
 }
+
+

website/src/css/custom.css

@@ -2086,6 +2086,10 @@ h2.anchor.clicked a.hash-link:before {
   color: #fff; /* Change color on hover if desired */
 }
 
+.table-of-contents .lifecycle-badge {
+  display: none;
+}
+
 @media (max-width: 996px) {
   .quickstart-container {
     flex-direction: column;

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

@@ -46,6 +46,7 @@ function useDocTOC() {
   async function fetchElements() {
     // get html elements
     const headings = await getElements(".markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6")
+
 
     // if headings exist on page
     // compare against toc