fix: update website with the component statuses [BAU-903] (#2152)

contentful · Aug 5, 2022 · b6c2cc7 · b6c2cc7 · vercel · Aug 5, 2022
1 parent fe934ff
commit b6c2cc7
Show file tree

Hide file tree

Showing 20 changed files with 517 additions and 30 deletions.
diff --git a/packages/components/datepicker/README.mdx b/packages/components/datepicker/README.mdx
@@ -1,7 +1,7 @@
 ---
 title: 'Datepicker'
-status: 'alpha'
-isNew: true
+status: 'beta'
+isBeta: true
 slug: /components/datepicker/
 github: 'https://github.com/contentful/forma-36/tree/main/packages/components/datepicker'
 storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-datepicker'

diff --git a/packages/components/datepicker/src/Calendar/README.mdx b/packages/components/datepicker/src/Calendar/README.mdx
@@ -1,7 +1,7 @@
 ---
 title: 'Calendar'
-status: 'alpha'
-isNew: true
+status: 'beta'
+isBeta: true
 slug: /components/calendar/
 github: 'https://github.com/contentful/forma-36/tree/main/packages/components/datepicker/src/Calendar'
 storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-datepicker-calendar--default'

diff --git a/packages/website/components/LiveEditor/ComponentSource.tsx b/packages/website/components/LiveEditor/ComponentSource.tsx
@@ -14,10 +14,9 @@ import * as datepickerComponents from '@contentful/f36-datepicker';
 import * as f36utils from '@contentful/f36-utils';
 import { useForm, useController } from 'react-hook-form';
 import { MdAccessAlarm } from 'react-icons/md';
-import { Card, Button, CopyButton } from '@contentful/f36-components';
+import { Card, Button, CopyButton, Flex } from '@contentful/f36-components';
 import * as f36icons from '@contentful/f36-icons';
 import { ExternalLinkIcon } from '@contentful/f36-icons';
-import { Flex } from '@contentful/f36-core';
 import { theme } from './theme';
 import { formatSourceCode } from './utils';
 import * as coder from '../../utils/coder';

diff --git a/packages/website/components/PageContent/PageContentHeader.tsx b/packages/website/components/PageContent/PageContentHeader.tsx
@@ -60,6 +60,7 @@ export function PageContentHeader({
   const gridStyles = getGridStyles();
   const isDeprecated = status === 'deprecated';
   const isAlpha = status === 'alpha';
+  const isBeta = status === 'beta';
   const showNote = isAlpha || isDeprecated;
 
   return (
@@ -89,16 +90,21 @@ export function PageContentHeader({
       {isDeprecated && (
         <Flex flexDirection="column" marginBottom="spacingXl">
           <Note variant="negative" title="Deprecated component">
-            {title} was deprecated in v4. It will be deleted from the repository
-            on 12th July 2022.
+            {title} component has been deprecated and is not supported or
+            recommended for use.
           </Note>
         </Flex>
       )}
 
-      {isAlpha && (
+      {(isAlpha || isBeta) && (
         <Flex flexDirection="column" marginBottom="spacingXl">
-          <Note variant="positive" title="Alpha component">
-            {title} is not ready to be used in production. Use at your own risk.
+          <Note variant="neutral" title="Alpha component">
+            {isAlpha
+              ? `${title} component is ready to use but may have some bugs. Use in
+              production software with caution.`
+              : `${title} component is subject to major changes and is for
+              experimentation purposes only. Not recommended for use in production
+              software.`}
           </Note>
         </Flex>
       )}

diff --git a/packages/website/components/SidebarLink.tsx b/packages/website/components/SidebarLink.tsx
@@ -9,6 +9,7 @@ import { ExternalLinkTrimmedIcon } from '@contentful/f36-icons';
 const styles = {
   link: css({
     display: 'flex',
+    alignItems: 'center',
     gap: tokens.spacing2Xs,
     fontSize: tokens.fontSizeM,
     lineHeight: tokens.lineHeightM,
@@ -102,6 +103,9 @@ interface SidebarLinkProps {
   isExternal?: boolean;
   paddingLeft?: 'spacingXl' | 'spacing2Xl';
   isNew?: boolean;
+  isBeta?: boolean;
+  isAlpha?: boolean;
+  isDeprecated?: boolean;
 }
 
 export function SidebarLink({
@@ -111,6 +115,9 @@ export function SidebarLink({
   isActive = false,
   paddingLeft = 'spacingXl',
   isNew = false,
+  isBeta = false,
+  isAlpha = false,
+  isDeprecated = false,
 }: SidebarLinkProps) {
   const titleStyles = getSectionTitleStyles(isActive, paddingLeft);
   const linksProps = isExternal
@@ -129,9 +136,21 @@ export function SidebarLink({
             {children}
             {isExternal && <ExternalLinkTrimmedIcon variant="muted" />}
           </span>
-          {isNew && (
-            <Badge className={styles.badge} variant="primary">
-              new
+          {(isNew || isDeprecated || isBeta || isAlpha) && (
+            <Badge
+              className={styles.badge}
+              size="small"
+              variant={
+                isDeprecated ? 'negative' : isNew ? 'primary' : 'secondary'
+              }
+            >
+              {isDeprecated
+                ? 'deprecated'
+                : isNew
+                ? 'new'
+                : isBeta
+                ? 'beta'
+                : 'alpha'}
             </Badge>
           )}
         </a>

diff --git a/packages/website/components/SidebarSection.tsx b/packages/website/components/SidebarSection.tsx
@@ -32,6 +32,9 @@ export type SidebarLinkType = {
   slug: string;
   type: 'link';
   isNew?: boolean;
+  isBeta?: boolean;
+  isAlpha?: boolean;
+  isDeprecated?: boolean;
 };
 export type SidebarSectionType = {
   title: string;
@@ -73,6 +76,9 @@ function SidebarSubsection({
                 isActive={isLinkActive(link.slug, currentPage)}
                 href={link.slug}
                 isNew={link.isNew}
+                isBeta={link.isBeta}
+                isAlpha={link.isAlpha}
+                isDeprecated={link.isDeprecated}
                 paddingLeft="spacing2Xl"
               >
                 {link.title}
@@ -127,6 +133,9 @@ export function SidebarSection({
             href={link.slug}
             isExternal={link.slug.includes('https://')}
             isNew={link.isNew}
+            isBeta={link.isBeta}
+            isAlpha={link.isAlpha}
+            isDeprecated={link.isDeprecated}
           >
             {link.title}
           </SidebarLink>

diff --git a/packages/website/content/deprecated-components/dropdown.mdx b/packages/website/content/deprecated-components/dropdown.mdx
@@ -3,6 +3,7 @@ title: 'Dropdown'
 status: 'deprecated'
 slug: '/deprecated-components/dropdown/'
 section: 'deprecatedComponents'
+isDeprecated: true
 ---
 
 # Dropdown

diff --git a/packages/website/content/deprecated-components/editor-toolbar.mdx b/packages/website/content/deprecated-components/editor-toolbar.mdx
@@ -3,6 +3,7 @@ title: 'EditorToolbar'
 status: 'deprecated'
 slug: '/deprecated-components/editor-toolbar/'
 section: 'deprecatedComponents'
+isDeprecated: true
 ---
 
 ## How it was used in v3

diff --git a/packages/website/content/deprecated-components/empty-state.mdx b/packages/website/content/deprecated-components/empty-state.mdx
@@ -3,6 +3,7 @@ title: 'EmptyState'
 status: 'deprecated'
 slug: '/deprecated-components/empty-state/'
 section: 'deprecatedComponents'
+isDeprecated: true
 ---
 
 ## Empty State component was removed in version 4

diff --git a/packages/website/content/deprecated-components/illustration.mdx b/packages/website/content/deprecated-components/illustration.mdx
@@ -3,6 +3,7 @@ title: 'Illustration'
 status: 'deprecated'
 slug: '/deprecated-components/illustration/'
 section: 'deprecatedComponents'
+isDeprecated: true
 ---
 
 # Illustration

diff --git a/packages/website/content/deprecated-components/in-viewport.mdx b/packages/website/content/deprecated-components/in-viewport.mdx
@@ -3,6 +3,7 @@ title: 'InViewport'
 status: 'deprecated'
 slug: '/deprecated-components/in-viewport/'
 section: 'deprecatedComponents'
+isDeprecated: true
 ---
 
 # InViewport

diff --git a/packages/website/content/deprecated-components/tab-focus-trap.mdx b/packages/website/content/deprecated-components/tab-focus-trap.mdx
@@ -3,6 +3,7 @@ title: 'TabFocusTrap'
 status: 'deprecated'
 slug: '/deprecated-components/tab-focus-trap/'
 section: 'deprecatedComponents'
+isDeprecated: true
 ---
 
 # TabFocusTrap

diff --git a/packages/website/content/deprecated-components/tag.mdx b/packages/website/content/deprecated-components/tag.mdx
@@ -3,6 +3,7 @@ title: 'Tag'
 status: 'deprecated'
 section: 'deprecatedComponents'
 slug: '/deprecated-components/tag/'
+isDeprecated: true
 ---
 
 # Tag

diff --git a/packages/website/content/deprecated-components/typography.mdx b/packages/website/content/deprecated-components/typography.mdx
@@ -3,6 +3,7 @@ title: 'Typography Component'
 status: 'deprecated'
 section: 'deprecatedComponents'
 slug: '/deprecated-components/typography/'
+isDeprecated: true
 ---
 
 # Typography

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -10,8 +10,7 @@
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "0.18.1",
-    "@contentful/f36-components": "^4.11.0",
-    "@contentful/f36-core": "^4.11.0",
+    "@contentful/f36-components": "^4.14.0",
     "@contentful/f36-datepicker": "beta",
     "@contentful/f36-docs-utils": "^4.0.1",
     "@contentful/f36-icon": "^4.11.0",

diff --git a/packages/website/types.ts b/packages/website/types.ts
@@ -2,7 +2,7 @@ export interface FrontMatter {
   github?: string;
   section?: string;
   slug?: string;
-  status?: 'stable' | 'deprecated' | 'alpha';
+  status?: 'stable' | 'deprecated' | 'alpha' | 'beta';
   title: string;
   type?: string;
   typescript?: string;

diff --git a/packages/website/utils/content.ts b/packages/website/utils/content.ts
@@ -83,11 +83,19 @@ async function getMdxPaths() {
 
   // creates a json with a list of links grouped into sections
   const sidebarLinks = pages.reduce((acc, page) => {
-    const { title, slug, section, isNew = undefined } = page.frontMatter.data;
+    const {
+      title,
+      slug,
+      section,
+      isNew = undefined,
+      isBeta = undefined,
+      isAlpha = undefined,
+      isDeprecated = undefined,
+    } = page.frontMatter.data;
     if (!section) {
       const unassigned = sortByTitle([
         ...(acc['unassigned'] || []),
-        { title, slug, isNew },
+        { title, slug, isNew, isBeta, isAlpha, isDeprecated },
       ]);
 
       return {
@@ -98,7 +106,7 @@ async function getMdxPaths() {
 
     const sectionContent = sortByTitle([
       ...(acc[section] || []),
-      { title, slug, isNew },
+      { title, slug, isNew, isBeta, isAlpha, isDeprecated },
     ]);
 
     return { ...acc, [section]: sectionContent };

diff --git a/packages/website/utils/contentfulSidebarLinks.json b/packages/website/utils/contentfulSidebarLinks.json
@@ -8,6 +8,10 @@
       "title": "Adding icons",
       "slug": "/guidelines/adding-icons"
     },
+    {
+      "title": "Component release statuses",
+      "slug": "/guidelines/component-statuses"
+    },
     {
       "title": "Grammar and rules",
       "slug": "/guidelines/grammar-and-rules"

diff --git a/packages/website/utils/sidebarLinks.json b/packages/website/utils/sidebarLinks.json
@@ -122,7 +122,7 @@
     {
       "title": "Calendar",
       "slug": "/components/calendar/",
-      "isNew": true
+      "isBeta": true
     },
     {
       "title": "Date utilities",
@@ -135,7 +135,7 @@
     {
       "title": "Datepicker",
       "slug": "/components/datepicker/",
-      "isNew": true
+      "isBeta": true
     },
     {
       "title": "RelativeDateTime",
@@ -301,35 +301,43 @@
   "deprecatedComponents": [
     {
       "title": "Dropdown",
-      "slug": "/deprecated-components/dropdown/"
+      "slug": "/deprecated-components/dropdown/",
+      "isDeprecated": true
     },
     {
       "title": "EditorToolbar",
-      "slug": "/deprecated-components/editor-toolbar/"
+      "slug": "/deprecated-components/editor-toolbar/",
+      "isDeprecated": true
     },
     {
       "title": "EmptyState",
-      "slug": "/deprecated-components/empty-state/"
+      "slug": "/deprecated-components/empty-state/",
+      "isDeprecated": true
     },
     {
       "title": "Illustration",
-      "slug": "/deprecated-components/illustration/"
+      "slug": "/deprecated-components/illustration/",
+      "isDeprecated": true
     },
     {
       "title": "InViewport",
-      "slug": "/deprecated-components/in-viewport/"
+      "slug": "/deprecated-components/in-viewport/",
+      "isDeprecated": true
     },
     {
       "title": "TabFocusTrap",
-      "slug": "/deprecated-components/tab-focus-trap/"
+      "slug": "/deprecated-components/tab-focus-trap/",
+      "isDeprecated": true
     },
     {
       "title": "Tag",
-      "slug": "/deprecated-components/tag/"
+      "slug": "/deprecated-components/tag/",
+      "isDeprecated": true
     },
     {
       "title": "Typography Component",
-      "slug": "/deprecated-components/typography/"
+      "slug": "/deprecated-components/typography/",
+      "isDeprecated": true
     }
   ],
   "integrations": [