feat: rewrite component status page [SRED-404] (#497)

* feat: rewrite component status page [SRED-404] * chore: additional updates to docs * chore: updates to banners * chore: keep order the same * chore: keep order the same
washingtonpost · Sep 18, 2023 · 920361b · 920361b · vercel · Sep 18, 2023
1 parent c71efa2
commit 920361b
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 37 deletions.
diff --git a/build.washingtonpost.com/components/ComponentPage/ComponentStatus.jsx b/build.washingtonpost.com/components/ComponentPage/ComponentStatus.jsx
@@ -3,41 +3,39 @@ import { AlertBanner } from "@washingtonpost/wpds-ui-kit";
 import CustomLink from "../Markdown/Components/link";
 
 export const ComponentStatus = ({ type }) => {
-  const draftVariant = "warning";
+  const alphaVariant = "warning";
 
-  const draftContent = (
+  const alphaContent = (
     <>
-      <b>Draft: </b> The component is available via code, but its documentation
-      is still in refinement. That would mean that guidance can change, code
-      examples might change, and content can be corrected, rephrased, and/or
-      removed.
+      <b>Alpha: </b>This status indicates that the component is available via code, but BREAKING CHANGES 
+can be expected and the documentation is still in refinement. That would mean that guidance 
+can change, code examples might change and content can be corrected, rephrased and/or removed.
     </>
   );
 
   const betaVariant = "information";
 
   const betaContent = (
     <>
-      <b>Beta: </b>The component design + documentation is finalized and
-      available via code, but changes to the API of the component can still
-      occur. This may include but is not limited to component props, structure,
-      or implementation changes.
+      <b>Beta: </b>This status indicates that the component design + documentation is finalized and
+it is available via code. Additive changes may still occur but no breaking changes 
+will occur unless a security fix is needed.
     </>
   );
 
   function getVariant(type) {
     switch (type) {
-      case "Draft":
-        return draftVariant;
+      case "Alpha":
+        return alphaVariant;
       case "Beta":
         return betaVariant;
     }
   }
 
   function getContent(type) {
     switch (type) {
-      case "Draft":
-        return draftContent;
+      case "Alpha":
+        return alphaContent;
       case "Beta":
         return betaContent;
     }

diff --git a/build.washingtonpost.com/components/Layout/Components/Sidebar.js b/build.washingtonpost.com/components/Layout/Components/Sidebar.js
@@ -201,7 +201,7 @@ export default function Sidebar({ navigation, setMobileMenu }) {
                   <div>{item.frontMatter.data.title}</div>
                   <Change type="ComingSoon">Coming soon</Change>
                 </CustomLink>
-              ) : item.frontMatter.data.status == "Draft" ? (
+              ) : item.frontMatter.data.status == "Alpha" ? (
                 <Link href={item.frontMatter.slug} passHref>
                   <CustomLink
                     css={{
@@ -212,7 +212,7 @@ export default function Sidebar({ navigation, setMobileMenu }) {
                     }}
                   >
                     <div>{item.frontMatter.data.title}</div>
-                    <Change type="Draft">Draft</Change>
+                    <Change type="Alpha">Alpha</Change>
                   </CustomLink>
                 </Link>
               ) : (

diff --git a/build.washingtonpost.com/components/Markdown/Styling.js b/build.washingtonpost.com/components/Markdown/Styling.js
@@ -109,7 +109,7 @@ export const Change = styled("div", {
         backgroundColor: "$gray400",
         borderColor: "$gray400",
       },
-      Draft: {
+      Alpha: {
         fontSize: "$075",
         color: "$primary",
         backgroundColor: "$orange300",

diff --git a/build.washingtonpost.com/docs/components/action-menu.mdx b/build.washingtonpost.com/docs/components/action-menu.mdx
@@ -2,7 +2,7 @@
 title: Action Menu
 description: A temporary overlay containing a list of items (commands or actions) relevant to the user’s current context. An item in the menu is immediately executed upon selection. Action menus must be paired with a trigger (button or text link) that reveals the menu on click or tap.
 component: ActionMenu
-status: Draft
+status: Alpha
 ---
 
 ---

diff --git a/build.washingtonpost.com/docs/components/input-search.mdx b/build.washingtonpost.com/docs/components/input-search.mdx
@@ -2,7 +2,7 @@
 title: Input Search
 description: Input Search is a component that allows users to enter keywords and receive matching search results.
 component: InputSearch
-status: Draft
+status: Alpha
 openSourceLink: https://reach.tech/combobox/
 ---
 

diff --git a/build.washingtonpost.com/docs/components/navigation-menu.mdx b/build.washingtonpost.com/docs/components/navigation-menu.mdx
@@ -2,7 +2,7 @@
 title: Navigation Menu
 description: A list of navigation links opened from a trigger point.
 component: NavigationMenu
-status: Draft
+status: Alpha
 openSourceLink: https://www.radix-ui.com/docs/primitives/components/navigation-menu
 ---
 

diff --git a/build.washingtonpost.com/docs/components/tabs.mdx b/build.washingtonpost.com/docs/components/tabs.mdx
@@ -2,7 +2,7 @@
 title: Tabs
 description: Tabs are used to navigate between sections of content in the same area without reloading the page.
 component: tabs
-status: "Draft"
+status: "Alpha"
 ---
 
 ---

diff --git a/build.washingtonpost.com/docs/support/component-status.mdx b/build.washingtonpost.com/docs/support/component-status.mdx
@@ -5,8 +5,6 @@ kicker: Support
 publishDate: February 15, 2023
 ---
 
-## Status
-
 <Box css={{ marginBlockEnd: "$050" }}>
   <Change type="ComingSoon">Coming soon</Change>
 </Box>
@@ -17,15 +15,14 @@ is currently under development. This status only appears on the sidebar of our n
 ---
 
 <Box css={{ marginBlockEnd: "$050" }}>
-  <Change type="Draft">Draft</Change>
+  <Change type="Alpha">Alpha</Change>
 </Box>
 
-This status indicates that the component is available via code, but the documentation
-for it is still in refinement. That would mean that guidance can change, code examples
-might change and content can be corrected, rephrased and/or removed. This status
-will appear as a banner on the component documentation page as the following:
+This status indicates that the component is available via code, but BREAKING CHANGES 
+can be expected and the documentation is still in refinement. That would mean that guidance 
+can change, code examples might change and content can be corrected, rephrased and/or removed.
 
-<ComponentStatus type="Draft" />
+This status will appear as a banner on the component documentation page.
 
 ---
 
@@ -34,15 +31,15 @@ will appear as a banner on the component documentation page as the following:
 </Box>
 
 This status indicates that the component design + documentation is finalized and
-it is available via code, but changes to the api of the component can still occur.
-This may include but is not limited to changes to component props, structure, or
-implementation. This status will appear as a banner on the component documentation
-page as the following:
+it is available via code. Additive changes may still occur but no breaking changes 
+will occur unless a security fix is needed. 
 
-<ComponentStatus type="Beta" />
+This status will appear as a banner on the component documentation page.
 
 ---
 
 #### Stable
 
-If no status is shown on the component it indicates the component has reached a stable state where any changes that occur to the component will be communicated prior to the changes taking place.
+If no status is shown on the component it indicates the component has reached a stable state.
+Any changes that occur to the component will be communicated far ahead of their implementation.
+
diff --git a/build.washingtonpost.com/docs/support/release-cycles.mdx b/build.washingtonpost.com/docs/support/release-cycles.mdx
@@ -23,4 +23,4 @@ publishDate: January 1, 2022
 
 ##
 
-Components are released batches but only components with full documentation are fully supported. Any other components that are released in the batch without docs will be consider in draft and will be indicated on the doc site as draft. Those will not be fully supported until official release.
+Components are released batches but only components with full documentation are fully supported. Any other components that are released in the batch without docs will be consider in Alpha status and will be indicated on the doc site as Alpha status. Those will not be fully supported until official release.
diff --git a/build.washingtonpost.com/pages/components/[slug].js b/build.washingtonpost.com/pages/components/[slug].js
@@ -58,7 +58,7 @@ export default function Page({
           {source.scope.title}
         </Header>
 
-        {(source.scope.status == "Draft" || source.scope.status == "Beta") && (
+        {(source.scope.status == "Alpha" || source.scope.status == "Beta") && (
           <ComponentStatus type={source.scope.status} />
         )}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,4 +23,4 @@ publishDate: January 1, 2022

		##

		Components are released batches but only components with full documentation are fully supported. Any other components that are released in the batch without docs will be consider in draft and will be indicated on the doc site as draft. Those will not be fully supported until official release.
		Components are released batches but only components with full documentation are fully supported. Any other components that are released in the batch without docs will be consider in Alpha status and will be indicated on the doc site as Alpha status. Those will not be fully supported until official release.