Merge pull request #8534 from lukzerom/core-components-docs-update

Core-components descriptions docs update

.changeset/fast-peaches-drop.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added description to components: BottomLink, Breadcrumbs, BrokenImageIcon, CardTab, Content, ContentHeader, EmptyState, ErrorPage, FeatureCalloutCircular, Gauge, GaugeCard, Header, HeaderIconLinkRow, HeaderLabel, HeaderTabs, HorizontalScrollGrid, InfoCard, IntroCard

packages/core-components/api-report.md

@@ -89,7 +89,7 @@ export type BackstageOverrides = Overrides & {
 // @public (undocumented)
 export type BoldHeaderClassKey = 'root' | 'title' | 'subheader';
 
-// @public (undocumented)
+// @public
 export function BottomLink(props: BottomLinkProps): JSX.Element;
 
 // @public (undocumented)
@@ -104,7 +104,7 @@ export type BottomLinkProps = {
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function Breadcrumbs(props: Props_20): JSX.Element;
 
 // @public (undocumented)
@@ -115,7 +115,7 @@ export type BreadcrumbsStyledBoxClassKey = 'root';
 
 // Warning: (ae-forgotten-export) The symbol "IconComponentProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function BrokenImageIcon(props: IconComponentProps): JSX.Element;
 
 // @public
@@ -129,7 +129,7 @@ export type CardActionsTopRightClassKey = 'root';
 
 // Warning: (ae-forgotten-export) The symbol "CardTabProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function CardTab(props: PropsWithChildren<CardTabProps>): JSX.Element;
 
 // @public (undocumented)
@@ -159,14 +159,13 @@ export interface CodeSnippetProps {
 }
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "Content" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
-// @public (undocumented)
+// @public
 export function Content(props: PropsWithChildren<Props_13>): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "ContentHeaderProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function ContentHeader(
   props: PropsWithChildren<ContentHeaderProps>,
 ): JSX.Element;
@@ -310,7 +309,7 @@ export function EmailIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function EmptyState(props: Props_2): JSX.Element;
 
 // @public (undocumented)
@@ -332,7 +331,7 @@ export type ErrorBoundaryProps = {
 
 // Warning: (ae-forgotten-export) The symbol "IErrorPageProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function ErrorPage(props: IErrorPageProps): JSX.Element;
 
 // @public (undocumented)
@@ -365,7 +364,7 @@ export type FeatureCalloutCircleClassKey =
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function FeatureCalloutCircular(
   props: PropsWithChildren<Props_4>,
 ): JSX.Element;
@@ -373,12 +372,12 @@ export function FeatureCalloutCircular(
 // @public (undocumented)
 export type FiltersContainerClassKey = 'root' | 'title';
 
-// @public (undocumented)
+// @public
 export function Gauge(props: GaugeProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function GaugeCard(props: Props_10): JSX.Element;
 
 // @public (undocumented)
@@ -416,7 +415,7 @@ export function GroupIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function Header(props: PropsWithChildren<Props_14>): JSX.Element;
 
 // @public (undocumented)
@@ -433,7 +432,7 @@ export type HeaderClassKey =
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function HeaderIconLinkRow(props: Props_5): JSX.Element;
 
 // @public (undocumented)
@@ -441,7 +440,7 @@ export type HeaderIconLinkRowClassKey = 'links';
 
 // Warning: (ae-forgotten-export) The symbol "HeaderLabelProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function HeaderLabel(props: HeaderLabelProps): JSX.Element;
 
 // @public (undocumented)
@@ -449,7 +448,7 @@ export type HeaderLabelClassKey = 'root' | 'label' | 'value';
 
 // Warning: (ae-forgotten-export) The symbol "HeaderTabsProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function HeaderTabs(props: HeaderTabsProps): JSX.Element;
 
 // @public (undocumented)
@@ -467,7 +466,7 @@ export function HomepageTimer(_props: {}): JSX.Element | null;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function HorizontalScrollGrid(
   props: PropsWithChildren<Props_6>,
 ): JSX.Element;
@@ -507,7 +506,7 @@ export type IconLinkVerticalProps = {
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function InfoCard(props: Props_15): JSX.Element;
 
 // @public (undocumented)
@@ -525,7 +524,7 @@ export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
 
 // Warning: (ae-forgotten-export) The symbol "IntroCardProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function IntroCard(props: IntroCardProps): JSX.Element;
 
 // Warning: (tsdoc-malformed-html-name) Invalid HTML element: Expecting an HTML name

packages/core-components/src/components/EmptyState/EmptyState.tsx

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
+import React from 'react';
 import { EmptyStateImage } from './EmptyStateImage';
 
 /** @public */
@@ -46,7 +46,12 @@ type Props = {
   action?: JSX.Element;
 };
 
-/** @public */
+/**
+ * Various placeholder views for empty state pages
+ *
+ * @public
+ *
+ */
 export function EmptyState(props: Props) {
   const { title, description, missing, action } = props;
   const classes = useStyles();

packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core/styles';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React, {
   PropsWithChildren,
@@ -108,7 +108,12 @@ type Placement = {
   textWidth: number;
 };
 
-/** @public */
+/**
+ * One-time, round 'telescope' animation showing new feature.
+ *
+ * @public
+ *
+ */
 export function FeatureCalloutCircular(props: PropsWithChildren<Props>) {
   const { featureId, title, description, children } = props;
   const { show, hide } = useShowCallout(featureId);

packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { IconLinkVertical, IconLinkVerticalProps } from './IconLinkVertical';
-import { makeStyles } from '@material-ui/core/styles';
 
 /** @public */
 export type HeaderIconLinkRowClassKey = 'links';
@@ -37,7 +37,12 @@ type Props = {
   links: IconLinkVerticalProps[];
 };
 
-/** @public */
+/**
+ * HTML nav tag with links mapped inside
+ *
+ * @public
+ *
+ */
 export function HeaderIconLinkRow(props: Props) {
   const { links } = props;
   const classes = useStyles();

packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren } from 'react';
-import classNames from 'classnames';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
 
 const generateGradientStops = (themeType: 'dark' | 'light') => {
   // 97% corresponds to the theme.palette.background.default for the light theme
@@ -198,7 +198,12 @@ function useSmoothScroll(
   return setScrollTarget;
 }
 
-/** @public */
+/**
+ * Horizontal scrollable component with arrows to navigate
+ *
+ * @public
+ *
+ */
 export function HorizontalScrollGrid(props: PropsWithChildren<Props>) {
   const {
     scrollStep = 100,

packages/core-components/src/components/ProgressBars/Gauge.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { BackstagePalette, BackstageTheme } from '@backstage/theme';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Circle } from 'rc-progress';
 import React from 'react';
 
@@ -96,7 +96,13 @@ export const getProgressColor: GaugePropsGetColor = ({
   return palette.status.ok;
 };
 
-/** @public */
+/**
+ * Circular Progress Bar
+ *
+ * @public
+ *
+ */
+
 export function Gauge(props: GaugeProps) {
   const { getColor = getProgressColor } = props;
   const classes = useStyles(props);

packages/core-components/src/components/ProgressBars/GaugeCard.tsx

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { InfoCard, InfoCardVariants } from '../../layout/InfoCard';
+import React from 'react';
 import { BottomLinkProps } from '../../layout/BottomLink';
+import { InfoCard, InfoCardVariants } from '../../layout/InfoCard';
 import { Gauge, GaugePropsGetColor } from './Gauge';
 
 type Props = {
@@ -44,7 +44,12 @@ const useStyles = makeStyles(
   { name: 'BackstageGaugeCard' },
 );
 
-/** @public */
+/**
+ * {@link Gauge} with header, subheader and footer
+ *
+ * @public
+ *
+ */
 export function GaugeCard(props: Props) {
   const classes = useStyles(props);
   const { title, subheader, progress, inverse, deepLink, variant, getColor } =

packages/core-components/src/icons/icons.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
+import { IconComponent, useApp } from '@backstage/core-plugin-api';
 import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
 import React, { ComponentProps } from 'react';
-import { useApp, IconComponent } from '@backstage/core-plugin-api';
 
 type IconComponentProps = ComponentProps<IconComponent>;
 
@@ -27,7 +27,12 @@ function useSystemIcon(key: string, props: IconComponentProps) {
 }
 
 // Should match the list of overridable system icon keys in @backstage/core-app-api
-/** @public */
+/**
+ * Broken Image Icon
+ *
+ * @public
+ *
+ */
 export function BrokenImageIcon(props: IconComponentProps) {
   return useSystemIcon('brokenImage', props);
 }

packages/core-components/src/layout/BottomLink/BottomLink.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Divider from '@material-ui/core/Divider';
-import Typography from '@material-ui/core/Typography';
-import ArrowIcon from '@material-ui/icons/ArrowForward';
 import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
+import Divider from '@material-ui/core/Divider';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import ArrowIcon from '@material-ui/icons/ArrowForward';
+import React from 'react';
 import { Link } from '../../components/Link';
 
 /** @public */
@@ -50,7 +50,12 @@ export type BottomLinkProps = {
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
 };
 
-/** @public */
+/**
+ * Footer with link used in  {@link InfoCard } and {@link TabbedCard}
+ *
+ * @public
+ *
+ */
 export function BottomLink(props: BottomLinkProps) {
   const { link, title, onClick } = props;
   const classes = useStyles();

packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { withStyles } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
+import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import Popover from '@material-ui/core/Popover';
+import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import React, { ComponentProps, Fragment } from 'react';
 
 type Props = ComponentProps<typeof MaterialBreadcrumbs>;
@@ -51,7 +51,12 @@ const StyledBox = withStyles(
   { name: 'BackstageBreadcrumbsStyledBox' },
 )(Box);
 
-/** @public */
+/**
+ * Breadcrumbs component to show navigation hierarchical structure
+ *
+ * @public
+ *
+ */
 export function Breadcrumbs(props: Props) {
   const { children, ...restProps } = props;
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(

packages/core-components/src/layout/Content/Content.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren } from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import classNames from 'classnames';
-import { Theme, makeStyles } from '@material-ui/core/styles';
+import React, { PropsWithChildren } from 'react';
 
 /** @public */
 export type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding';
@@ -53,6 +53,13 @@ type Props = {
   className?: string;
 };
 
+/**
+ * The main content part inside a {@link Page}.
+ *
+ * @public
+ *
+ */
+
 export function Content(props: PropsWithChildren<Props>) {
   const { className, stretch, noPadding, children, ...restProps } = props;
   const classes = useStyles();

packages/core-components/src/layout/ContentHeader/ContentHeader.tsx

@@ -18,9 +18,9 @@
  * TODO favoriteable capability
  */
 
-import React, { PropsWithChildren, ReactNode } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 
 /** @public */
@@ -94,7 +94,13 @@ type ContentHeaderProps = {
   textAlign?: 'left' | 'right' | 'center';
 };
 
-/** @public */
+/**
+ *  A header at the top inside a {@link Content}.
+ *
+ * @public
+ *
+ */
+
 export function ContentHeader(props: PropsWithChildren<ContentHeaderProps>) {
   const {
     description,

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import Typography from '@material-ui/core/Typography';
+import { BackstageTheme } from '@backstage/theme';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
-import { MicDrop } from './MicDrop';
+import Typography from '@material-ui/core/Typography';
+import React from 'react';
 import { useNavigate } from 'react-router';
-import { useSupportConfig } from '../../hooks';
 import { Link } from '../../components/Link';
+import { useSupportConfig } from '../../hooks';
+import { MicDrop } from './MicDrop';
 
 interface IErrorPageProps {
   status: string;
@@ -55,7 +55,12 @@ const useStyles = makeStyles<BackstageTheme>(
   { name: 'BackstageErrorPage' },
 );
 
-/** @public */
+/**
+ * Error page with status and description
+ *
+ * @public
+ *
+ */
 export function ErrorPage(props: IErrorPageProps) {
   const { status, statusMessage, additionalInfo } = props;
   const classes = useStyles();

packages/core-components/src/layout/Header/Header.tsx

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
@@ -189,8 +189,12 @@ const SubtitleFragment = ({ classes, subtitle }: SubtitleFragmentProps) => {
     </Typography>
   );
 };
-
-/** @public */
+/**
+ * Backstage main header with abstract color background in multiple variants
+ *
+ * @public
+ *
+ */
 export function Header(props: PropsWithChildren<Props>) {
   const {
     children,

packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
+import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
 import React from 'react';
 import { Link } from '../../components/Link';
 
@@ -60,7 +60,12 @@ type HeaderLabelProps = {
   url?: string;
 };
 
-/** @public */
+/**
+ * Additional label to main {@link Header}
+ *
+ * @public
+ *
+ */
 export function HeaderLabel(props: HeaderLabelProps) {
   const { label, value, url } = props;
   const classes = useStyles();

packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx

@@ -17,10 +17,10 @@
 // TODO(blam): Remove this implementation when the Tabs are ready
 // This is just a temporary solution to implementing tabs for now
 
-import React, { useState, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import TabUI, { TabProps } from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
+import React, { useEffect, useState } from 'react';
 
 /** @public */
 export type HeaderTabsClassKey =
@@ -68,7 +68,12 @@ type HeaderTabsProps = {
   selectedIndex?: number;
 };
 
-/** @public */
+/**
+ * Horizontal Tabs component
+ *
+ * @public
+ *
+ */
 export function HeaderTabs(props: HeaderTabsProps) {
   const { tabs, onChange, selectedIndex } = props;
   const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);

packages/core-components/src/layout/InfoCard/InfoCard.tsx

@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import React, { ReactNode } from 'react';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import CardHeader, { CardHeaderProps } from '@material-ui/core/CardHeader';
 import Divider from '@material-ui/core/Divider';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
-import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
+import React, { ReactNode } from 'react';
 import { BottomLink, BottomLinkProps } from '../BottomLink';
+import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
 
 /** @public */
 export type InfoCardClassKey =
@@ -144,7 +144,12 @@ type Props = {
   titleTypographyProps?: object;
 };
 
-/** @public */
+/**
+ * Material-ui card with header , content and actions footer
+ *
+ * @public
+ *
+ */
 export function InfoCard(props: Props): JSX.Element {
   const {
     title,

packages/core-components/src/layout/Sidebar/Intro.tsx

@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
+import { BackstageTheme } from '@backstage/theme';
+import Collapse from '@material-ui/core/Collapse';
+import Link from '@material-ui/core/Link';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import CloseIcon from '@material-ui/icons/Close';
 import React, { useContext, useState } from 'react';
 import { useLocalStorage } from 'react-use';
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
-import Collapse from '@material-ui/core/Collapse';
-import CloseIcon from '@material-ui/icons/Close';
-import { BackstageTheme } from '@backstage/theme';
 import {
-  SIDEBAR_INTRO_LOCAL_STORAGE,
-  SidebarContext,
   sidebarConfig,
+  SidebarContext,
+  SIDEBAR_INTRO_LOCAL_STORAGE,
 } from './config';
 import { SidebarDivider } from './Items';
 
@@ -88,7 +88,13 @@ type IntroCardProps = {
   onClose: () => void;
 };
 
-/** @public */
+/**
+ * Closable card with information from Navigation Sidebar
+ *
+ * @public
+ *
+ */
+
 export function IntroCard(props: IntroCardProps) {
   const classes = useStyles();
   const { text, onClose } = props;

packages/core-components/src/layout/TabbedCard/TabbedCard.tsx

@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-import React, {
-  useState,
-  ReactElement,
-  ReactNode,
-  PropsWithChildren,
-} from 'react';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardHeader from '@material-ui/core/CardHeader';
 import Divider from '@material-ui/core/Divider';
-import Tabs from '@material-ui/core/Tabs';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import Tab, { TabProps } from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import React, {
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+  useState,
+} from 'react';
 import { BottomLink, BottomLinkProps } from '../BottomLink';
 import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
 
@@ -149,7 +149,12 @@ type CardTabProps = TabProps & {
   children: ReactNode;
 };
 
-/** @public */
+/**
+ * Card tab component used in {@link TabbedCard}
+ *
+ * @public
+ *
+ */
 export function CardTab(props: PropsWithChildren<CardTabProps>) {
   const { children, ...restProps } = props;
   const classes = useCardTabStyles();