[DOCS] Updates for Tonic UI v2 (#862)

* docs: correct the prefix key for the notification example in custom color style * docs: show Tonic UI version in the heading * docs: update Tonic UI version variables * docs: use `sup` element to show the Tonic UI version text
trendmicro-frontend · May 24, 2024 · 2194bd5 · 2194bd5
1 parent b2377df
commit 2194bd5
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 56 deletions.
diff --git a/packages/react-docs/components/Header.js b/packages/react-docs/components/Header.js
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   ButtonBase,
+  Flex,
   Image,
   Link,
   Menu,
@@ -35,21 +36,23 @@ const BASE_PATH = ensureString(process.env.BASE_PATH);
 
 const GITHUB_REPO_URL = 'https://github.com/trendmicro-frontend/tonic-ui';
 
+const TONIC_UI_REACT_DOCS_ROOT = ensureString(process.env.TONIC_UI_REACT_DOCS_ROOT);
+
 // The TONIC_UI_REACT_DOCS_VERSION environment variable might be one of: latest, pr-<number>, or version (e.g. 0.1.0) for a tag release
 const TONIC_UI_REACT_DOCS_VERSION = ensureString(process.env.TONIC_UI_REACT_DOCS_VERSION);
 
 const versionMap = {
-  [ensureString(process.env.TONIC_UI_V1_RELEASE_VERSION)]: {
-    label: `v${ensureString(process.env.TONIC_UI_V1_RELEASE_VERSION)}`,
-    url: ensureString(process.env.TONIC_UI_V1_RELEASE_DOCUMENTATION),
+  'v2': {
+    label: 'v2',
+    url: `${TONIC_UI_REACT_DOCS_ROOT}/v2`,
   },
-  [ensureString(process.env.TONIC_UI_V0_RELEASE_VERSION)]: {
-    label: `v${ensureString(process.env.TONIC_UI_V0_RELEASE_VERSION)}`,
-    url: ensureString(process.env.TONIC_UI_V0_RELEASE_DOCUMENTATION),
+  'v1': {
+    label: 'v1',
+    url: `${TONIC_UI_REACT_DOCS_ROOT}/v1`,
   },
-  'latest': {
-    label: `${ensureString(process.env.TONIC_UI_DEFAULT_BRANCH)} branch`,
-    url: ensureString(process.env.TONIC_UI_DEFAULT_DOCUMENTATION),
+  'v0': {
+    label: 'v0',
+    url: `${TONIC_UI_REACT_DOCS_ROOT}/v0`,
   },
 };
 
@@ -177,13 +180,15 @@ const Header = forwardRef((
                   color: colorStyle.color.primary,
                 }}
               >
-                <Image
-                  alt=""
-                  src={`${BASE_PATH}/images/${logo}`}
-                  height="8x"
-                  marginRight="2x"
-              />
-                <Text>Tonic UI</Text>
+                <Flex alignItems="center" columnGap="2x">
+                  <Image
+                    alt=""
+                    src={`${BASE_PATH}/images/${logo}`}
+                    height="8x"
+                  />
+                  <Text>Tonic UI</Text>
+                  <sup>{TONIC_UI_REACT_DOCS_VERSION}</sup>
+                </Flex>
               </Link>
             </NextLink>
           </Box>
@@ -214,7 +219,10 @@ const Header = forwardRef((
                 track('Header', 'close_version_menu');
               }}
             >
-              <MenuButton>
+              <MenuButton
+                variant="secondary"
+                minWidth={100}
+              >
                 {versionMap[version]?.label ?? version}
               </MenuButton>
               <MenuList>

diff --git a/packages/react-docs/next.config.mjs b/packages/react-docs/next.config.mjs
@@ -307,8 +307,10 @@ const initialNextConfig = {
     ALGOLIA_APPLICATION_ID: '7V00GBK8V8',
     ALGOLIA_SEARCH_API_KEY: 'c87cfe40f6ec7c43d4caf4316afd1816',
     ALGOLIA_INDEX_NAME: 'tonic-ui-v2',
-    // see `.circleci/config.yml`
-    TONIC_UI_REACT_DOCS_VERSION: process.env.TONIC_UI_REACT_DOCS_VERSION,
+    // common
+    TONIC_UI_REPO_ROOT: process.env.TONIC_UI_REPO_ROOT,
+    TONIC_UI_REACT_DOCS_ROOT: process.env.TONIC_UI_REACT_DOCS_ROOT,
+    TONIC_UI_REACT_DOCS_VERSION: process.env.TONIC_UI_REACT_DOCS_VERSION, // see `.circleci/config.yml`
     TONIC_UI_REACT_PACKAGE_VERSION: process.env.TONIC_UI_REACT_PACKAGE_VERSION,
     // v2
     TONIC_UI_V2_BRANCH: process.env.TONIC_UI_V2_BRANCH,
@@ -334,10 +336,6 @@ const initialNextConfig = {
     TONIC_UI_V0_RELEASE_VERSION: process.env.TONIC_UI_V0_RELEASE_VERSION,
     TONIC_UI_V0_RELEASE_DOCUMENTATION: process.env.TONIC_UI_V0_RELEASE_DOCUMENTATION,
     TONIC_UI_V0_RELEASE_NOTES: process.env.TONIC_UI_V0_RELEASE_NOTES,
-    // default
-    TONIC_UI_DEFAULT_BRANCH: process.env.TONIC_UI_DEFAULT_BRANCH,
-    TONIC_UI_DEFAULT_DOCUMENTATION: process.env.TONIC_UI_DEFAULT_DOCUMENTATION,
-    TONIC_UI_DEFAULT_SOURCE_CODE: process.env.TONIC_UI_DEFAULT_SOURCE_CODE,
   },
   basePath: process.env.BASE_PATH,
   distDir: process.env.NODE_ENV === 'production' ? 'dist/react' : 'build',

diff --git a/packages/react-docs/pages/components/color-style/index.page.mdx b/packages/react-docs/pages/components/color-style/index.page.mdx
@@ -411,14 +411,14 @@ See the example configuration below:
       </ColorStyleHeader>
       <ColorStyleBody
         colorStyle={{
-          function: {
+          notification: {
             success: 'green:40',
             info: 'blue:50',
             warning: 'yellow:50',
             error: 'red:50',
           },
         }}
-        colorType="function"
+        colorType="notification"
       />
     </ColorStyleContent>
   </DarkMode>
@@ -433,14 +433,14 @@ See the example configuration below:
       </ColorStyleHeader>
       <ColorStyleBody
         colorStyle={{
-          function: {
+          notification: {
             success: 'green:50',
             info: 'blue:60',
             warning: 'yellow:50',
             error: 'red:60',
           },
         }}
-        colorType="function"
+        colorType="notification"
       />
     </ColorStyleContent>
   </LightMode>

diff --git a/packages/react-docs/pages/getting-started/versions/index.page.mdx.template b/packages/react-docs/pages/getting-started/versions/index.page.mdx.template
@@ -107,13 +107,13 @@ The most recent stable version (✓) is recommended for use in production.
   <TableBody>
     <TableRow>
       <TableCell>
-        <Text>__TONIC_UI_DEFAULT_BRANCH__ branch</Text>
+        <Text>__TONIC_UI_V2_BRANCH__ branch</Text>
       </TableCell>
       <TableCell>
-        <Link href="__TONIC_UI_DEFAULT_DOCUMENTATION__">Documentation</Link>
+        <Link href="__TONIC_UI_V2_DOCUMENTATION__">Documentation</Link>
       </TableCell>
       <TableCell>
-        <Link href="__TONIC_UI_DEFAULT_SOURCE_CODE__">Source code</Link>
+        <Link href="__TONIC_UI_V2_SOURCE_CODE__">Source code</Link>
       </TableCell>
     </TableRow>
     <TableRow>
@@ -160,7 +160,7 @@ To make these transitions as easy as possible:
 * The number of breaking changes is minimized, and migration tools provided when possible.
 * The deprecation policy described below is followed, so that you have time to update your apps to the latest APIs and best practices.
 
-### Deprecation policy
+## Deprecation policy
 
 * Deprecated features are announced in the changelog, and when possible, with warnings at runtime.
 * When a deprecation is announced, recommended update path is provided.

diff --git a/packages/react-docs/pages/index.page.js b/packages/react-docs/pages/index.page.js
@@ -67,6 +67,9 @@ const BASE_PATH = ensureString(process.env.BASE_PATH);
 
 const GITHUB_REPO_URL = 'https://github.com/trendmicro-frontend/tonic-ui';
 
+// The TONIC_UI_REACT_DOCS_VERSION environment variable might be one of: latest, pr-<number>, or version (e.g. 0.1.0) for a tag release
+const TONIC_UI_REACT_DOCS_VERSION = ensureString(process.env.TONIC_UI_REACT_DOCS_VERSION);
+
 const DefaultPage = (props) => {
   const [colorMode] = useColorMode();
   const [colorStyle] = useColorStyle({ colorMode });
@@ -453,13 +456,15 @@ const DefaultPageHeader = forwardRef((props, ref) => {
                 color: colorStyle.color.primary,
               }}
             >
-              <Image
-                alt=""
-                src={`${BASE_PATH}/images/${logo}`}
-                height="8x"
-                marginRight="2x"
-              />
-              <Text>Tonic UI</Text>
+              <Flex alignItems="center" columnGap="2x">
+                <Image
+                  alt=""
+                  src={`${BASE_PATH}/images/${logo}`}
+                  height="8x"
+                />
+                <Text>Tonic UI</Text>
+                <sup>{TONIC_UI_REACT_DOCS_VERSION}</sup>
+              </Flex>
             </Link>
           </NextLink>
         </Box>

diff --git a/packages/react-docs/tonic-ui.env b/packages/react-docs/tonic-ui.env
@@ -1,36 +1,33 @@
 #!/usr/bin/env bash
 
+export TONIC_UI_REPO_ROOT=https://github.com/trendmicro-frontend/tonic-ui
+export TONIC_UI_REACT_DOCS_ROOT=https://trendmicro-frontend.github.io/tonic-ui/react
+export TONIC_UI_REACT_DOCS_VERSION=${TONIC_UI_REACT_DOCS_VERSION:-v2-dev}
 export TONIC_UI_REACT_PACKAGE_VERSION=$(node -p "require('../react/package.json').version")
-export TONIC_UI_REACT_DOCS_VERSION=${TONIC_UI_REACT_DOCS_VERSION:-latest}
 
 # v2
 export TONIC_UI_V2_BRANCH=master
-export TONIC_UI_V2_DOCUMENTATION=https://trendmicro-frontend.github.io/tonic-ui/react/latest
-export TONIC_UI_V2_SOURCE_CODE=https://github.com/trendmicro-frontend/tonic-ui/tree/master
+export TONIC_UI_V2_DOCUMENTATION=${TONIC_UI_REACT_DOCS_ROOT}/v2
+export TONIC_UI_V2_SOURCE_CODE=${TONIC_UI_REPO_ROOT}/tree/${TONIC_UI_V2_BRANCH}
 export TONIC_UI_V2_TAGNAME=$(git -c 'versionsort.suffix=-' tag --list '@tonic-ui/react@2.*' --sort="-version:refname" | head -n 1)
 export TONIC_UI_V2_RELEASE_VERSION=$(echo $TONIC_UI_V2_TAGNAME | awk -F@ '{ print $3 }')
-export TONIC_UI_V2_RELEASE_DOCUMENTATION=https://trendmicro-frontend.github.io/tonic-ui/react/${TONIC_UI_V2_RELEASE_VERSION}
-export TONIC_UI_V2_RELEASE_NOTES=https://github.com/trendmicro-frontend/tonic-ui/releases/tag/${TONIC_UI_V2_TAGNAME}
+export TONIC_UI_V2_RELEASE_DOCUMENTATION=${TONIC_UI_REACT_DOCS_ROOT}/${TONIC_UI_V2_RELEASE_VERSION}
+export TONIC_UI_V2_RELEASE_NOTES=${TONIC_UI_REPO_ROOT}/releases/tag/${TONIC_UI_V2_TAGNAME}
 
 # v1
 export TONIC_UI_V1_BRANCH=v1
-export TONIC_UI_V1_DOCUMENTATION=https://trendmicro-frontend.github.io/tonic-ui/react/v1
-export TONIC_UI_V1_SOURCE_CODE=https://github.com/trendmicro-frontend/tonic-ui/tree/v1
+export TONIC_UI_V1_DOCUMENTATION=${TONIC_UI_REACT_DOCS_ROOT}/v1
+export TONIC_UI_V1_SOURCE_CODE=${TONIC_UI_REPO_ROOT}/tree/${TONIC_UI_V1_BRANCH}
 export TONIC_UI_V1_TAGNAME=$(git -c 'versionsort.suffix=-' tag --list '@tonic-ui/react@1.*' --sort="-version:refname" | head -n 1)
 export TONIC_UI_V1_RELEASE_VERSION=$(echo $TONIC_UI_V1_TAGNAME | awk -F@ '{ print $3 }')
-export TONIC_UI_V1_RELEASE_DOCUMENTATION=https://trendmicro-frontend.github.io/tonic-ui/react/${TONIC_UI_V1_RELEASE_VERSION}
-export TONIC_UI_V1_RELEASE_NOTES=https://github.com/trendmicro-frontend/tonic-ui/releases/tag/${TONIC_UI_V1_TAGNAME}
+export TONIC_UI_V1_RELEASE_DOCUMENTATION=${TONIC_UI_REACT_DOCS_ROOT}/${TONIC_UI_V1_RELEASE_VERSION}
+export TONIC_UI_V1_RELEASE_NOTES=${TONIC_UI_REPO_ROOT}/releases/tag/${TONIC_UI_V1_TAGNAME}
 
 # v0
 export TONIC_UI_V0_BRANCH=v0
-export TONIC_UI_V0_DOCUMENTATION=https://trendmicro-frontend.github.io/tonic-ui/react/v0
-export TONIC_UI_V0_SOURCE_CODE=https://github.com/trendmicro-frontend/tonic-ui/tree/v0
+export TONIC_UI_V0_DOCUMENTATION=${TONIC_UI_REACT_DOCS_ROOT}/v0
+export TONIC_UI_V0_SOURCE_CODE=${TONIC_UI_REPO_ROOT}/tree/${TONIC_UI_V0_BRANCH}
 export TONIC_UI_V0_TAGNAME=$(git -c 'versionsort.suffix=-' tag --list '@trendmicro/react-styled-ui@0.*' --sort="-version:refname" | head -n 1)
 export TONIC_UI_V0_RELEASE_VERSION=$(echo $TONIC_UI_V0_TAGNAME | awk -F@ '{ print $3 }')
-export TONIC_UI_V0_RELEASE_DOCUMENTATION=https://trendmicro-frontend.github.io/tonic-ui/react/${TONIC_UI_V0_RELEASE_VERSION}
-export TONIC_UI_V0_RELEASE_NOTES=https://github.com/trendmicro-frontend/tonic-ui/releases/tag/${TONIC_UI_V0_TAGNAME}
-
-# default
-export TONIC_UI_DEFAULT_BRANCH=master
-export TONIC_UI_DEFAULT_DOCUMENTATION=https://trendmicro-frontend.github.io/tonic-ui/react/latest
-export TONIC_UI_DEFAULT_SOURCE_CODE=https://github.com/trendmicro-frontend/tonic-ui/tree/master
+export TONIC_UI_V0_RELEASE_DOCUMENTATION=${TONIC_UI_REACT_DOCS_ROOT}/${TONIC_UI_V0_RELEASE_VERSION}
+export TONIC_UI_V0_RELEASE_NOTES=${TONIC_UI_REPO_ROOT}/releases/tag/${TONIC_UI_V0_TAGNAME}