4.3 Release Notes

README.md

@@ -498,6 +498,30 @@ To add a video, use the following syntax. Ensure you capitalize the letter "V":
 <Video title="vsphere-pcg-creation" src="/cluster-creation-videos/vmware.mp4"></Video>
 ```
 
+### Badges
+
+The following badges are available for use:
+
+> [!NOTE]
+>
+> All badges are globally available. No need to import them.
+
+- Technical Preview Badge ![Technical Preview Badge](static/img/tech-preview-light.svg)
+  ![Technical Preview Badge](static/img/tech-preview-dark.svg)
+
+#### Technical Preview Badge
+
+The technical preview badge is used to indicate that a feature is in technical preview. The badge is intended for
+release notes in the context of a list. The following is an example of how to use the technical preview badge. The
+component will automatically display the badge in the correct color based on the light theme (dark/light).
+
+```markdown
+- <TpBadge /> Cluster Profile variables, a new feature that allows you to define variables in a cluster profile. This
+  feature is in Tech Preview and is available only for Edge clusters. Profile variables allow you to define variable
+  types, apply validation, and more. Refer to the Cluster Profile Variables documentation to learn more about profile
+  variables.
+```
+
 ### Simple Card Grid
 
 This is a custom component that creates a grid of simple text cards with two columns, styled according to our color
@@ -742,3 +766,7 @@ make clean-versions
 >
 > The `docusaurus.config.js` file is updated by the [`update_docusaurus_config.js`](./docusaurus.config.js) script. DO
 > NOT commit this file with the updated changes.
+
+```
+
+```

docusaurus.config.js

@@ -31,7 +31,7 @@ const config = {
     defaultLocale: "en",
     locales: ["en"],
   },
-  staticDirectories: ["static", "static/assets/docs/images", "static/assets"],
+  staticDirectories: ["static", "static/assets/docs/images", "static/assets", "static/img/"],
   headTags: [
     {
       tagName: "script",

src/components/Badges/TechnicalPreviewReleaseNote/TechnicalPreviewReleaseNote.module.scss

@@ -0,0 +1,6 @@
+.customTpReleaseNoteBadge {
+  display: initial;
+  height: auto;
+  max-width: 100%;
+  margin-bottom: -5px;
+}

src/components/Badges/TechnicalPreviewReleaseNote/TechnicalPreviewReleaseNote.test

@@ -0,0 +1,13 @@
+// THIS TEST IS BREAKING DUE TO JEST NOT FINDING THE @theme/ThemedImage
+
+// import React from "react";
+// import { render } from "@testing-library/react";
+// import TechnicalPreviewReleaseNoteBadge from "./TechnicalPreviewReleaseNote";
+
+// describe("TechnicalPreviewReleaseNoteBadge", () => {
+//   test("renders correctly", () => {
+//     const { container } = render(<TechnicalPreviewReleaseNoteBadge />);
+//     const badge = container.querySelector("img");
+//     expect(badge).toBeInTheDocument();
+//   });
+// });

src/components/Badges/TechnicalPreviewReleaseNote/TechnicalPreviewReleaseNote.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import ThemedImage from "@theme/ThemedImage";
+import styles from "./TechnicalPreviewReleaseNote.module.scss";
+
+// define type for TechnicalPreviewReleaseNote
+
+export default function TechnicalPreviewReleaseNote() {
+  return (
+    <ThemedImage
+      alt="Technical preview feature badge"
+      sources={{
+        light: "/img/tech-preview-dark.svg",
+        dark: "/img/tech-preview-light.svg",
+      }}
+      className={styles.customTpReleaseNoteBadge}
+    />
+  );
+}

src/components/Badges/TechnicalPreviewReleaseNote/index.tsx

@@ -0,0 +1,3 @@
+import TechnicalPreviewReleaseNote from "./TechnicalPreviewReleaseNote";
+
+export default TechnicalPreviewReleaseNote;

src/components/Badges/index.ts

@@ -0,0 +1,3 @@
+import TechnicalPreviewReleaseNote from "./TechnicalPreviewReleaseNote";
+
+export { TechnicalPreviewReleaseNote };

src/theme/MDXComponents/MDXComponents.ts

@@ -9,6 +9,7 @@ import Packs from "@site/src/components/Integrations/Packs/Packs";
 import AppTiers from "@site/src/components/Integrations/AppTiers/AppTiers";
 import PacksTable from "@site/src/components/PacksTable/PacksTable";
 import TOCInline from "@theme/TOCInline";
+import { TechnicalPreviewReleaseNote as TpBadge } from "@site/src/components/Badges";
 import SimpleCardGrid from "@site/src/components/SimpleCardGrid/index";
 
 export default {
@@ -23,5 +24,6 @@ export default {
   AppTiers,
   PacksTable,
   TOCInline,
+  TpBadge,
   SimpleCardGrid,
 };