From 10d31dc4a979e54744d4ca7b5ff714ed13fcb860 Mon Sep 17 00:00:00 2001
From: Yuliia Horbenko <31223054+yuliiiah@users.noreply.github.com>
Date: Thu, 7 Mar 2024 21:24:45 +0100
Subject: [PATCH] Update the TechPreview component to also accept custom text
 (#2377)

* chore: Update the TechPreview component to also accept custom text

* chore: Fix the linter warning and clean up CSS a bit
---
 src/css/custom.scss                      | 6 +++---
 src/css/dark-mode.scss                   | 4 ++--
 src/css/light-mode.scss                  | 4 ++--
 src/theme/Admonition/Icon/TechPreview.js | 2 +-
 src/theme/Admonition/Type/TechPreview.js | 9 ++++++---
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/css/custom.scss b/src/css/custom.scss
index 4271f4928d..ae1ab6c863 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -209,7 +209,7 @@ p img.markdown-image {
   border-radius: 1vw;
 }
 
-.custom-admonition {
-  border: 1px solid var(--custom-important-color);
-  background-color: var(--custom-alert-bg-color);
+.admonition-tech-preview {
+  border: 1px solid var(--custom-purple-important-color);
+  background-color: var(--custom-purple-alert-bg-color);
 }
diff --git a/src/css/dark-mode.scss b/src/css/dark-mode.scss
index b53020f348..6ea2bd9e1c 100644
--- a/src/css/dark-mode.scss
+++ b/src/css/dark-mode.scss
@@ -29,8 +29,8 @@ html[data-theme="dark"] {
   --ifm-color-warning-dark: #ffc832;
   --ifm-alert-padding-horizontal: 1.5rem;
   --custom-table-header-color: #1c202b;
-  --custom-important-color: #7d77ca;
-  --custom-alert-bg-color: #1a173b;
+  --custom-purple-important-color: #7d77ca;
+  --custom-purple-alert-bg-color: #1a173b;
 
   .theme-last-updated {
     color: var(--ifm-font-color-base);
diff --git a/src/css/light-mode.scss b/src/css/light-mode.scss
index e06694b123..8b2c37bbbb 100644
--- a/src/css/light-mode.scss
+++ b/src/css/light-mode.scss
@@ -26,8 +26,8 @@ html[data-theme="light"] {
   --ifm-color-warning-dark: #a8882f;
   --ifm-alert-padding-horizontal: 1.5rem;
   --custom-table-header-color: #f7f7f7;
-  --custom-important-color: #7d77ca;
-  --custom-alert-bg-color: #dcdaf9;
+  --custom-purple-important-color: #7d77ca;
+  --custom-purple-alert-bg-color: #dcdaf9;
 
   .theme-doc-sidebar-item-category-level-1 .menu__list-item {
     .menu__link:hover {
diff --git a/src/theme/Admonition/Icon/TechPreview.js b/src/theme/Admonition/Icon/TechPreview.js
index 37968ffd82..61a8758089 100644
--- a/src/theme/Admonition/Icon/TechPreview.js
+++ b/src/theme/Admonition/Icon/TechPreview.js
@@ -2,6 +2,6 @@ import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFlag } from "@fortawesome/free-solid-svg-icons";
 
-export default function IconTechPreview(props) {
+export default function IconTechPreview() {
   return <FontAwesomeIcon icon={faFlag} />;
 }
diff --git a/src/theme/Admonition/Type/TechPreview.js b/src/theme/Admonition/Type/TechPreview.js
index b65e5cc192..fe88c15fed 100644
--- a/src/theme/Admonition/Type/TechPreview.js
+++ b/src/theme/Admonition/Type/TechPreview.js
@@ -4,7 +4,7 @@ import Translate from "@docusaurus/Translate";
 import AdmonitionLayout from "@theme/Admonition/Layout";
 import IconTechPreview from "../Icon/TechPreview";
 
-const infimaClassName = "alert custom-admonition";
+const infimaClassName = "alert admonition-tech-preview";
 
 const defaultProps = {
   icon: <IconTechPreview />,
@@ -16,12 +16,15 @@ const defaultProps = {
       tech preview
     </Translate>
   ),
+  defaultText:
+    "This is a Tech Preview feature and is subject to change. Do not use this feature in production workloads.",
 };
 
 export default function AdmonitionTypeTechPreview(props) {
+  const text = props.children || defaultProps.defaultText;
   return (
-    <AdmonitionLayout {...defaultProps} {...props} className={clsx(infimaClassName, props.className)}>
-      {"This is a Tech Preview feature and is subject to change. Do not use this feature in production workloads."}
+    <AdmonitionLayout {...defaultProps} className={clsx(infimaClassName, props.className)}>
+      {text}
     </AdmonitionLayout>
   );
 }