feat: update component statuses (#1731)

- DataBar (deprecated)
- Drawer (deprecated)
- FieldNote (promoted to mature)
- FiltersDrawer (deprecated)
- PageHeader (deprecated)
- Panel (deprecated)
- Score (deprecated)
- Section (deprecated)
- TimelineNav (deprecated)

Also mark any bound sub-components to match

src/components/DataBar/DataBar.stories.tsx

@@ -1,3 +1,4 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
@@ -18,7 +19,7 @@ export default {
     ],
   },
   parameters: {
-    badges: ['1.0'],
+    badges: ['1.0', BADGE.DEPRECATED],
     backgrounds: {
       default: 'eds-color-neutral-white',
     },

src/components/DataBar/DataBar.tsx

@@ -79,6 +79,7 @@ export type DataBarProps = {
  *    { value: 15, text: 'Segment 3' },
  *  ]} />
  * ```
+ * @deprecated
  */
 export const DataBar = ({
   className,

src/components/Drawer/Drawer.stories.tsx

@@ -12,7 +12,7 @@ export default {
   title: 'Components/Drawer',
   component: Drawer,
   parameters: {
-    badges: ['1.0', BADGE.BETA],
+    badges: ['1.0', BADGE.DEPRECATED],
   },
   args: {
     'aria-describedby': 'drawer-description-1',

src/components/Drawer/Drawer.tsx

@@ -52,11 +52,11 @@ export type Props = {
 };
 
 /**
- * BETA: This component is still a work in progress and is subject to change.
- *
  * `import {Drawer} from "@chanzuckerberg/eds";`
  *
  * A window component that slides from and out of the right side of the screen.
+ *
+ * @deprecated
  */
 export const Drawer = ({
   'aria-describedby': ariaDescribedBy,

src/components/DrawerBody/DrawerBody.tsx

@@ -15,11 +15,10 @@ export type Props = {
 };
 
 /**
- * BETA: This component is still a work in progress and is subject to change.
- *
  * `import {DrawerBody} from "@chanzuckerberg/eds";`
  *
  * The main center content of the Drawer component.
+ * @deprecated
  */
 export const DrawerBody = React.forwardRef<HTMLDivElement, Props>(
   ({ children, className }, ref) => {

src/components/DrawerFooter/DrawerFooter.tsx

@@ -14,11 +14,10 @@ export type Props = {
 };
 
 /**
- * BETA: This component is still a work in progress and is subject to change.
- *
  * `import {DrawerFooter} from "@chanzuckerberg/eds";`
  *
  * The footer content of the Drawer component. Usually houses interactible component controlling the Drawer functionality.
+ * @deprecated
  */
 export const DrawerFooter = ({ children, className, ...other }: Props) => {
   const componentClassName = clsx('drawer__footer', className);

src/components/DrawerHeader/DrawerHeader.tsx

@@ -29,11 +29,10 @@ export type Props = {
 };
 
 /**
- * BETA: This component is still a work in progress and is subject to change.
- *
  * `import {DrawerHeader} from "@chanzuckerberg/eds";`
  *
  * The header content of the Drawer component. Usually houses the heading and the close button.
+ * @deprecated
  */
 export const DrawerHeader = ({
   className,

src/components/FieldNote/FieldNote.stories.tsx

@@ -1,4 +1,3 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
@@ -10,7 +9,7 @@ export default {
   title: 'Components/FieldNote',
   component: FieldNote,
   parameters: {
-    badges: ['1.0', BADGE.BETA],
+    badges: ['1.0'],
   },
 } as Meta<Args>;
 

src/components/FieldNote/FieldNote.tsx

@@ -28,8 +28,6 @@ export interface Props {
 }
 
 /**
- * BETA: This component is still a work in progress and is subject to change.
- *
  * `import {FieldNote} from "@chanzuckerberg/eds";`
  *
  * Fieldnote component wraps text to describe other components.

src/components/FiltersButton/FiltersButton.tsx

@@ -21,11 +21,10 @@ export type FiltersButtonProps = {
 } & Omit<ButtonProps, 'children' | 'variant' | 'status'>;
 
 /**
- * BETA: This component is still a work in progress and is subject to change.
- *
  * `import {FiltersButton} from "@chanzuckerberg/eds";`
  *
  * Default button for triggering Filters components.
+ * @deprecated
  */
 export const FiltersButton = forwardRef<HTMLButtonElement, FiltersButtonProps>(
   ({ className, hasSelectedFilters, triggerText, ...other }, ref) => {

src/components/FiltersCheckboxField/FiltersCheckboxField.tsx

@@ -19,15 +19,14 @@ export type Props = {
 };
 
 /**
- * BETA: This component is still a work in progress and is subject to change.
- *
  * ```tsx
  * import {Filters} from "@chanzuckerberg/eds";
  *
  * <Filters.CheckboxField>
  * ```
  *
  * Field of checkboxes that are placed within a FiltersDrawer component.
+ * @deprecated
  */
 export const FiltersCheckboxField = ({
   className,

src/components/FiltersDrawer/FiltersDrawer.stories.tsx

@@ -13,7 +13,7 @@ export default {
   title: 'Components/FiltersDrawer',
   component: FiltersDrawer,
   parameters: {
-    badges: ['1.1', BADGE.BETA],
+    badges: ['1.1', BADGE.DEPRECATED],
   },
   args: {
     triggerText: 'Filters',

src/components/FiltersDrawer/FiltersDrawer.tsx

@@ -54,11 +54,10 @@ export type FiltersDrawerProps = {
 };
 
 /**
- * BETA: This component is still a work in progress and is subject to change.
- *
  * `import {FiltersDrawer} from "@chanzuckerberg/eds";`
  *
  * A drawer component with fields of checkboxes to select filters.
+ * @deprecated
  */
 export const FiltersDrawer = ({
   children,

src/components/FiltersPopover/FiltersPopover.tsx

@@ -160,11 +160,10 @@ const FiltersPopoverRender = ({
 };
 
 /**
- * BETA: This component is still a work in progress and is subject to change.
- *
  * `import {FiltersPopover} from "@chanzuckerberg/eds";`
  *
  * A popover component with fields of form inputs to select filters.
+ * @deprecated
  */
 export const FiltersPopover = ({
   placement = 'bottom-start',

src/components/PageHeader/PageHeader.stories.tsx

@@ -1,3 +1,4 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
@@ -10,7 +11,7 @@ export default {
   title: 'Components/PageHeader',
   component: PageHeader,
   parameters: {
-    badges: ['1.0'],
+    badges: ['1.0', BADGE.DEPRECATED],
   },
 } as Meta<Args>;
 

src/components/PageHeader/PageHeader.tsx

@@ -70,6 +70,7 @@ export interface Props {
  * `import {PageHeader} from "@chanzuckerberg/eds";`
  *
  * Header to be used at the top of a page.
+ * @deprecated
  */
 export const PageHeader = ({
   align,

src/components/Panel/Panel.stories.ts

@@ -1,3 +1,4 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
@@ -7,7 +8,7 @@ export default {
   title: 'Components/Panel',
   component: Panel,
   parameters: {
-    badges: ['1.0'],
+    badges: ['1.0', BADGE.DEPRECATED],
   },
   args: {
     children: 'A Panel is a generic bordered container for content.',

src/components/Panel/Panel.tsx

@@ -33,6 +33,7 @@ export interface Props {
  * `import {Panel} from "@chanzuckerberg/eds";`
  *
  * Component Panel is the container to show the contents with props passed through for conditional styling of the panel based on variants props.
+ * @deprecated
  */
 export const Panel = ({
   className,

src/components/Score/Score.stories.tsx

@@ -8,7 +8,7 @@ export default {
   title: 'Components/Score',
   component: Score,
   parameters: {
-    badges: ['1.0', BADGE.BETA],
+    badges: ['1.0', BADGE.DEPRECATED],
   },
 } as Meta<Args>;
 

src/components/Score/Score.tsx

@@ -23,11 +23,10 @@ export interface Props {
 }
 
 /**
- * BETA: This component is still a work in progress and is subject to change.
- *
  * `import {Score} from "@chanzuckerberg/eds";`
  *
  * A (pill shaped badge) wrapper intended for use with scores.
+ * @deprecated
  */
 export const Score = ({ className, variant, ...other }: Props) => {
   const componentClassName = clsx(

src/components/Section/Section.stories.tsx

@@ -1,3 +1,4 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 import { Section } from './Section';
@@ -10,7 +11,7 @@ export default {
   title: 'Components/Section',
   component: Section,
   parameters: {
-    badges: ['1.0'],
+    badges: ['1.0', BADGE.DEPRECATED],
   },
   args: {
     children:

src/components/Section/Section.tsx

@@ -59,6 +59,7 @@ export interface Props {
  *
  * The Heading component requires a value for "size", so this headingAs prop is provided
  * a default value of "h2" to allow it to remain optional on Section component.
+ * @deprecated
  */
 export const Section = ({
   align,

src/components/TimelineNav/TimelineNav.stories.tsx

@@ -1,3 +1,4 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
@@ -16,7 +17,7 @@ export default {
   component: TimelineNav,
   subcomponents: { 'TimlineNav.Panel': TimelineNav.Panel },
   parameters: {
-    badges: ['1.0'],
+    badges: ['1.0', BADGE.DEPRECATED],
     backgrounds: {
       default: 'eds-color-neutral-white',
     },

src/components/TimelineNav/TimelineNav.tsx

@@ -127,6 +127,7 @@ const TimelineNavPanel = ({
  *
  * Provides a list-view pane for item labels/titles, and a details pane for each item's content.
  * When an item in the list is selected, the details pane is updated.
+ * @deprecated
  */
 export const TimelineNav = ({
   activeIndex = 0,