From 28b39e0e0e33e4ec31f81970a20362fb6cb6a22e Mon Sep 17 00:00:00 2001 From: Frida Jacobsson Date: Wed, 19 Oct 2022 11:00:14 +0200 Subject: [PATCH] Changed style of BazaarOverviewCard Change-Id: I3e4e62c35015a7f0c39c521e985652a44e4b9047 Signed-off-by: Frida Jacobsson --- .changeset/sixty-singers-push.md | 5 +++++ plugins/bazaar/README.md | 8 ++++---- plugins/bazaar/api-report.md | 2 +- .../BazaarOverviewCard/BazaarOverviewCard.tsx | 10 +++++----- .../src/components/ProjectCard/ProjectCard.tsx | 8 ++------ .../components/ProjectPreview/ProjectPreview.tsx | 16 ++++------------ 6 files changed, 21 insertions(+), 28 deletions(-) create mode 100644 .changeset/sixty-singers-push.md diff --git a/.changeset/sixty-singers-push.md b/.changeset/sixty-singers-push.md new file mode 100644 index 0000000000..b5b50ae077 --- /dev/null +++ b/.changeset/sixty-singers-push.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-bazaar': minor +--- + +The limit prop of BazaarOverviewCard has been removed entirely, and instead replaced with a new optional boolean prop `fullWidth`. The BazaarOverviewCard now always use full height without fixed width. Also fixed problem with link to Bazaar. diff --git a/plugins/bazaar/README.md b/plugins/bazaar/README.md index 6168b0c4ba..40b2a8afbe 100644 --- a/plugins/bazaar/README.md +++ b/plugins/bazaar/README.md @@ -76,17 +76,17 @@ export const homePage = ( + -+ ++ + -+ -+ ++ ++ + {/* ...other homepage items */} ``` -Specify how many projects you want through the "limit" props. In the example above 4 cards is specified. +The property `fullWidth` is optional and can be used to adjust the card to fit a grid with column width 12. ## How does the Bazaar work? diff --git a/plugins/bazaar/api-report.md b/plugins/bazaar/api-report.md index 2e6ebe6746..c12c95a1f7 100644 --- a/plugins/bazaar/api-report.md +++ b/plugins/bazaar/api-report.md @@ -16,7 +16,7 @@ export const BazaarOverviewCard: ( // @public (undocumented) export type BazaarOverviewCardProps = { order: 'latest' | 'random'; - limit: number; + fullWidth?: boolean; }; // @public (undocumented) diff --git a/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx b/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx index 83358c0a05..d64e36baeb 100644 --- a/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx +++ b/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx @@ -30,7 +30,7 @@ import { bazaarPlugin } from '../../plugin'; /** @public */ export type BazaarOverviewCardProps = { order: 'latest' | 'random'; - limit: number; + fullWidth?: boolean; }; const getUnlinkedCatalogEntities = ( @@ -48,14 +48,14 @@ const getUnlinkedCatalogEntities = ( /** @public */ export const BazaarOverviewCard = (props: BazaarOverviewCardProps) => { - const { order, limit } = props; + const { order, fullWidth = false } = props; const bazaarApi = useApi(bazaarApiRef); const catalogApi = useApi(catalogApiRef); const root = useRouteRef(bazaarPlugin.routes.root); const bazaarLink = { title: 'Go to Bazaar', - link: root.toString(), + link: `${root()}`, }; const [unlinkedCatalogEntities, setUnlinkedCatalogEntities] = @@ -66,6 +66,7 @@ export const BazaarOverviewCard = (props: BazaarOverviewCardProps) => { }); const [bazaarProjects, fetchBazaarProjects] = useAsyncFn(async () => { + const limit = fullWidth ? 6 : 3; const response = await bazaarApi.getProjects(limit, order); return response.data.map(parseBazaarProject) as BazaarProject[]; }); @@ -133,8 +134,7 @@ export const BazaarOverviewCard = (props: BazaarOverviewCardProps) => { fetchBazaarProjects={fetchBazaarProjects} catalogEntities={unlinkedCatalogEntities || []} useTablePagination={false} - fullHeight={false} - fixedWidth + gridSize={fullWidth ? 2 : 4} /> ); diff --git a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx index dace9b8185..fcae411519 100644 --- a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx +++ b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx @@ -54,7 +54,7 @@ const useStyles = makeStyles({ float: 'right', }, content: { - overflow: 'scroll', + height: '13rem', }, header: { whiteSpace: 'nowrap', @@ -67,7 +67,6 @@ export const ProjectCard = ({ project, fetchBazaarProjects, catalogEntities, - fullHeight, }: Props) => { const classes = useStyles(); const [openCard, setOpenCard] = useState(false); @@ -103,10 +102,7 @@ export const ProjectCard = ({ base: DateTime.now(), })}`} /> - + {Number(membersCount) === Number(1) diff --git a/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx b/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx index 77c16ef306..7dd82edf94 100644 --- a/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx +++ b/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx @@ -17,7 +17,7 @@ import React, { ChangeEvent, useState } from 'react'; import { Content } from '@backstage/core-components'; import { ProjectCard } from '../ProjectCard/ProjectCard'; -import { makeStyles, Grid, TablePagination } from '@material-ui/core'; +import { makeStyles, Grid, TablePagination, GridSize } from '@material-ui/core'; import { BazaarProject } from '../../types'; import { Entity } from '@backstage/catalog-model'; @@ -26,8 +26,7 @@ type Props = { fetchBazaarProjects: () => Promise; catalogEntities: Entity[]; useTablePagination?: boolean; - fullHeight?: boolean; - fixedWidth?: boolean; + gridSize?: GridSize; }; const useStyles = makeStyles({ @@ -55,8 +54,7 @@ export const ProjectPreview = ({ fetchBazaarProjects, catalogEntities, useTablePagination = true, - fullHeight = true, - fixedWidth = false, + gridSize = 2, }: Props) => { const classes = useStyles(); const [page, setPage] = useState(1); @@ -86,18 +84,12 @@ export const ProjectPreview = ({ .slice((page - 1) * rows, rows * page) .map((bazaarProject: BazaarProject, i: number) => { return ( - + );