Ag 11161 show version number (#1975)

* AG-11161 - Added version number to all pages * AG-11161 - update darkmode colors * AG-11161 Small visual tweak to version pill * AG-11161 - Tweak lightmode version number color --------- Co-authored-by: Kyler Phillips <kylerphillips@hotmail.co.uk>
ag-grid · Jul 4, 2024 · 024113c · 024113c
1 parent 1d97122
commit 024113c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/packages/ag-charts-website/src/features/docs/components/Header.module.scss b/packages/ag-charts-website/src/features/docs/components/Header.module.scss
@@ -52,6 +52,29 @@
     }
 }
 
+.headerVersion {
+    padding: $spacing-size-1 $spacing-size-2;
+    border-radius: var(--radius-2xl);
+    background-color: var(--color-util-brand-50);
+    font-size: var(--text-fs-xs);
+    font-weight: var(--text-bold);
+    color: color-mix(in srgb, var(--color-text-brand-primary) 90%, var(--color-util-gray-300));
+    transition: background-color $transition-default-timing;
+
+    &:hover {
+        background-color: var(--color-util-brand-100);
+    }
+
+    #{$selector-darkmode} & {
+        color: color-mix(in srgb, var(--color-text-brand-primary), var(--color-util-gray-400));
+        background-color: color-mix(in srgb, var(--color-util-gray-200), var(--color-util-gray-300));
+
+        &:hover {
+            background-color: var(--color-util-gray-300);
+        }
+    }
+}
+
 .enterpriseLabel {
     display: inline-block;
     position: relative;

diff --git a/packages/ag-charts-website/src/features/docs/components/Header.tsx b/packages/ag-charts-website/src/features/docs/components/Header.tsx
@@ -23,6 +23,7 @@ export const Header: FunctionComponent<Props> = ({
     suppressFrameworkHeader,
     path,
     menuItems,
+    version,
 }) => {
     // Update framework store so it is in sync with the page
     // Done here, because it's run on all docs pages
@@ -35,7 +36,12 @@ export const Header: FunctionComponent<Props> = ({
                     <h1 id="top" className={styles.docsPageTitle}>
                         {!suppressFrameworkHeader && (
                             <span className={styles.headerFramework}>
-                                {`${getFrameworkDisplayText(framework)} Charts`}
+                                {`${getFrameworkDisplayText(framework)} Charts`}{' '}
+                                {version && (
+                                    <a className={styles.headerVersion} href="/documentation-archive">
+                                        v{version}
+                                    </a>
+                                )}
                             </span>
                         )}
                         <span>{title}</span>

diff --git a/packages/ag-charts-website/src/pages/[framework]/[pageName].astro b/packages/ag-charts-website/src/pages/[framework]/[pageName].astro
@@ -76,6 +76,7 @@ const descriptionWithSeoTagline = `${description} ${seoTagline}`;
                 isEnterprise={enterprise}
                 path={path}
                 menuItems={menuItems}
+                version={version}
             />
 
             {/* Wrapping div is a hack to target "intro" section of docs page */}