review feedback and update package.json changeset and api-report as a result of feedback changes

Signed-off-by: nikolar <reyna.nikolayev@autodesk.com>

.changeset/wet-cats-allow.md

@@ -5,19 +5,17 @@
 Added a new Featured Docs component to `plugin-home`, which can display any entity given a filter.
 
 ```
-import { FeaturedDocs } from '@backstage/plugin-home';
+import { FeaturedDocsCard } from '@backstage/plugin-home';
 
-<FeaturedDocs
+<FeaturedDocsCard
   filter={{
     'spec.type': 'documentation',
     'metadata.name': 'getting-started-with-backstage',
   }}
   title={cardTitleReactNode}
-  customStyles={styles}
   subLinkText="More Details"
-  color="secondary"
   emptyState={emptyStateReactNode}
-  path={'/customPath'}
+  linkDestination={'/customPath'}
   responseLimit={5}
 />
 ```

plugins/home/api-report.md

@@ -11,7 +11,6 @@ import { CardConfig as CardConfig_2 } from '@backstage/plugin-home-react';
 import { CardExtensionProps as CardExtensionProps_2 } from '@backstage/plugin-home-react';
 import { CardLayout as CardLayout_2 } from '@backstage/plugin-home-react';
 import { CardSettings as CardSettings_2 } from '@backstage/plugin-home-react';
-import { ClassNameMap } from '@material-ui/styles';
 import { ComponentParts as ComponentParts_2 } from '@backstage/plugin-home-react';
 import { ComponentRenderer as ComponentRenderer_2 } from '@backstage/plugin-home-react';
 import { createCardExtension as createCardExtension_2 } from '@backstage/plugin-home-react';
@@ -104,18 +103,16 @@ export type CustomHomepageGridProps = {
 };
 
 // @public
-export const FeaturedDocs: (props: FeaturedDocsProps) => JSX_2.Element;
+export const FeaturedDocsCard: (props: FeaturedDocsCardProps) => JSX_2.Element;
 
 // @public
-export type FeaturedDocsProps = {
+export type FeaturedDocsCardProps = {
   filter: EntityFilterQuery;
-  color?: 'inherit' | 'primary' | 'secondary';
-  customStyles?: ClassNameMap<string>;
   emptyState?: React_2.ReactNode;
-  path?: string;
+  linkDestination?: string;
   responseLimit?: number;
   subLinkText?: string;
-  title?: React_2.ReactNode | string;
+  title?: React_2.ReactNode;
 };
 
 // @public

plugins/home/package.json

@@ -61,7 +61,6 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "@material-ui/styles": "^4.11.5",
     "@rjsf/core": "5.13.0",
     "@rjsf/material-ui": "5.13.0",
     "@rjsf/utils": "5.13.0",

plugins/home/src/homePageComponents/FeaturedDocsCard/FeaturedDocsCard.stories.tsx

@@ -14,12 +14,11 @@
  * limitations under the License.
  */
 
-import { FeaturedDocs } from '../../plugin';
+import { FeaturedDocsCard } from '../../plugin';
 import React, { ComponentType, PropsWithChildren } from 'react';
 import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
-import { Grid, makeStyles, Theme } from '@material-ui/core';
-import WarningIcon from '@material-ui/icons/Warning';
+import { Grid } from '@material-ui/core';
 
 const docsEntities = [
   {
@@ -41,29 +40,8 @@ const mockCatalogApi = {
   getEntities: async () => ({ items: docsEntities }),
 };
 
-const useStyles = makeStyles<Theme>(() => ({
-  cardTitleIcon: {
-    verticalAlign: 'bottom',
-    marginLeft: '-4px',
-  },
-  docDescription: {
-    marginBottom: '16px',
-    marginTop: '12px',
-  },
-  docSubLink: {
-    fontSize: 10,
-    fontWeight: 500,
-    lineHeight: 2,
-  },
-  docsTitleLink: {
-    fontSize: 18,
-    fontWeight: 600,
-    lineHeight: 3,
-  },
-}));
-
 export default {
-  title: 'Plugins/Home/Components/FeaturedDocs',
+  title: 'Plugins/Home/Components/FeaturedDocsCard',
   decorators: [
     (Story: ComponentType<PropsWithChildren<{}>>) =>
       wrapInTestApp(
@@ -82,7 +60,7 @@ export default {
 export const Default = () => {
   return (
     <Grid item xs={12} md={6}>
-      <FeaturedDocs
+      <FeaturedDocsCard
         filter={{
           'spec.type': 'documentation',
           'metadata.name': 'getting-started-with-backstage',
@@ -92,27 +70,3 @@ export const Default = () => {
     </Grid>
   );
 };
-
-export const ExampleCustomized = () => {
-  const styles = useStyles();
-  const cardTitle = (
-    <>
-      <WarningIcon fontSize="large" className={styles.cardTitleIcon} />
-      &nbsp; Important
-    </>
-  );
-  return (
-    <Grid item xs={12} md={6}>
-      <FeaturedDocs
-        filter={{
-          'spec.type': 'documentation',
-          'metadata.name': 'getting-started-with-backstage',
-        }}
-        title={cardTitle}
-        customStyles={styles}
-        subLinkText="More Details"
-        color="secondary"
-      />
-    </Grid>
-  );
-};

plugins/home/src/homePageComponents/FeaturedDocsCard/FeaturedDocsCard.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { FeaturedDocs } from './FeaturedDocs';
+import { FeaturedDocsCard } from './FeaturedDocsCard';
 import React from 'react';
 import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
@@ -33,7 +33,7 @@ const docsEntities = [
   },
 ];
 
-describe('<FeaturedDocs />', () => {
+describe('<FeaturedDocsCard />', () => {
   const mockCatalogApi = {
     getEntities: jest
       .fn()
@@ -51,8 +51,7 @@ describe('<FeaturedDocs />', () => {
   it('should show expected featured doc and title', async () => {
     const { getByTestId, getByText } = await renderInTestApp(
       <Wrapper>
-        <FeaturedDocs
-          data-testid="docs-card-content"
+        <FeaturedDocsCard
           filter={{
             'spec.type': 'documentation',
             'metadata.name': 'getting-started-with-idp',

plugins/home/src/homePageComponents/FeaturedDocsCard/FeaturedDocsCard.tsx

@@ -27,32 +27,27 @@ import {
 import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog-react';
 import { useApi } from '@backstage/core-plugin-api';
 import { EntityFilterQuery } from '@backstage/catalog-client';
-import { ClassNameMap } from '@material-ui/styles';
 
 import { makeStyles, Theme, Typography } from '@material-ui/core';
 
 /**
- * Props customizing the <FeaturedDocs/> component.
+ * Props customizing the <FeaturedDocsCard/> component.
  *
  * @public
  */
-export type FeaturedDocsProps = {
+export type FeaturedDocsCardProps = {
   /** The entity filter used to display only the intended item/s */
   filter: EntityFilterQuery;
-  /** An optional color which can be customized through themes */
-  color?: 'inherit' | 'primary' | 'secondary';
-  /** An optional ClassNameMap created with makeStyles */
-  customStyles?: ClassNameMap<string>;
   /** An optional ReactNode for empty states */
   emptyState?: React.ReactNode;
-  /** An optional path to set for entity entry  */
-  path?: string;
+  /** An optional linkDestination to set for the Featured Doc  */
+  linkDestination?: string;
   /** An optional limit to set for link destination  */
   responseLimit?: number;
   /** An optional string to customize sublink text */
   subLinkText?: string;
   /** An optional string or ReactNode to customize the card title */
-  title?: React.ReactNode | string;
+  title?: React.ReactNode;
 };
 
 const useStyles = makeStyles<Theme>(
@@ -74,7 +69,7 @@ const useStyles = makeStyles<Theme>(
       lineHeight: theme.typography.h6.lineHeight,
     },
   }),
-  { name: 'BackstageFeaturedDocs' },
+  { name: 'HomeFeaturedDocsCard' },
 );
 
 /**
@@ -82,20 +77,17 @@ const useStyles = makeStyles<Theme>(
  *
  * @public
  */
-export const FeaturedDocs = (props: FeaturedDocsProps) => {
+export const FeaturedDocsCard = (props: FeaturedDocsCardProps) => {
   const {
-    color,
-    customStyles,
     emptyState,
     filter,
-    path,
+    linkDestination,
     responseLimit,
     subLinkText,
     title,
   } = props;
   const linkText = subLinkText || 'LEARN MORE';
-  const defaultStyles = useStyles();
-  const styles = customStyles || defaultStyles;
+  const styles = useStyles();
   const catalogApi: CatalogApi = useApi(catalogApiRef);
   const {
     value: entities,
@@ -124,9 +116,8 @@ export const FeaturedDocs = (props: FeaturedDocsProps) => {
               <Link
                 className={styles.docsTitleLink}
                 data-testid="docs-card-title"
-                color={color}
                 to={
-                  path ||
+                  linkDestination ||
                   `/docs/${d.metadata.namespace || 'default'}/${d.kind}/${
                     d.metadata.name
                   }/`
@@ -134,15 +125,16 @@ export const FeaturedDocs = (props: FeaturedDocsProps) => {
               >
                 {d.metadata.title}
               </Link>
-              <Typography className={styles.docDescription}>
-                {d.metadata.description}
-              </Typography>
+              {d.metadata.description && (
+                <Typography className={styles.docDescription}>
+                  {d.metadata.description}
+                </Typography>
+              )}
               <Link
                 className={styles.docSubLink}
                 data-testid="docs-card-sub-link"
-                color={color}
                 to={
-                  path ||
+                  linkDestination ||
                   `/docs/${d.metadata.namespace || 'default'}/${d.kind}/${
                     d.metadata.name
                   }/`
@@ -159,7 +151,6 @@ export const FeaturedDocs = (props: FeaturedDocsProps) => {
               description="Create your own document. Check out our Getting Started Information"
               action={
                 <LinkButton
-                  color={color || 'primary'}
                   to="https://backstage.io/docs/features/techdocs/getting-started"
                   variant="contained"
                 >

plugins/home/src/homePageComponents/FeaturedDocsCard/index.ts

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export { FeaturedDocs } from './FeaturedDocs';
-export type { FeaturedDocsProps } from './FeaturedDocs';
+export { FeaturedDocsCard } from './FeaturedDocsCard';
+export type { FeaturedDocsCardProps } from './FeaturedDocsCard';

plugins/home/src/homePageComponents/index.ts

@@ -18,4 +18,4 @@ export type { ToolkitContentProps, Tool } from './Toolkit';
 export type { ClockConfig } from './HeaderWorldClock';
 export type { WelcomeTitleLanguageProps } from './WelcomeTitle';
 export type { VisitedByTypeProps, VisitedByTypeKind } from './VisitedByType';
-export type { FeaturedDocsProps } from './FeaturedDocs';
+export type { FeaturedDocsCardProps } from './FeaturedDocsCard';

plugins/home/src/index.ts

@@ -34,7 +34,7 @@ export {
   HeaderWorldClock,
   HomePageTopVisited,
   HomePageRecentlyVisited,
-  FeaturedDocs,
+  FeaturedDocsCard,
 } from './plugin';
 export * from './components';
 export * from './assets';

plugins/home/src/plugin.ts

@@ -217,12 +217,14 @@ export const HomePageRecentlyVisited = homePlugin.provide(
  *
  * @public
  */
-export const FeaturedDocs = homePlugin.provide(
+export const FeaturedDocsCard = homePlugin.provide(
   createReactExtension({
     name: 'FeaturedDocs',
     component: {
       lazy: () =>
-        import('./homePageComponents/FeaturedDocs').then(m => m.FeaturedDocs),
+        import('./homePageComponents/FeaturedDocsCard').then(
+          m => m.FeaturedDocsCard,
+        ),
     },
   }),
 );

yarn.lock

@@ -7263,7 +7263,6 @@ __metadata:
     "@material-ui/core": ^4.12.2
     "@material-ui/icons": ^4.9.1
     "@material-ui/lab": 4.0.0-alpha.61
-    "@material-ui/styles": ^4.11.5
     "@rjsf/core": 5.13.0
     "@rjsf/material-ui": 5.13.0
     "@rjsf/utils": 5.13.0