From c891b694c4a7cfa2cc20ca825b68eb27b8134acb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl-Erik=20Bergstr=C3=B6m?= Date: Thu, 5 Sep 2024 15:28:56 +0200 Subject: [PATCH 1/4] feat: add overrideable FavoriteToggle to core-components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Carl-Erik Bergström --- .changeset/afraid-boxes-rhyme.md | 9 ++ packages/core-components/api-report.md | 27 ++++++ .../FavoriteToggle/FavoriteToggle.stories.tsx | 68 ++++++++++++++ .../FavoriteToggle/FavoriteToggle.test.tsx | 55 +++++++++++ .../FavoriteToggle/FavoriteToggle.tsx | 92 +++++++++++++++++++ .../src/components/FavoriteToggle/index.ts | 18 ++++ .../core-components/src/components/index.ts | 1 + .../src/overridableComponents.ts | 2 + .../FavoriteEntity/FavoriteEntity.tsx | 25 ++--- .../components/CatalogTable/CatalogTable.tsx | 17 +--- .../StarredEntityListItem.tsx | 19 ++-- .../src/home/components/Tables/actions.tsx | 12 +-- 12 files changed, 289 insertions(+), 56 deletions(-) create mode 100644 .changeset/afraid-boxes-rhyme.md create mode 100644 packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx create mode 100644 packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx create mode 100644 packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx create mode 100644 packages/core-components/src/components/FavoriteToggle/index.ts diff --git a/.changeset/afraid-boxes-rhyme.md b/.changeset/afraid-boxes-rhyme.md new file mode 100644 index 0000000000..328a589f7e --- /dev/null +++ b/.changeset/afraid-boxes-rhyme.md @@ -0,0 +1,9 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-catalog-react': patch +'@backstage/plugin-techdocs': patch +'@backstage/plugin-catalog': patch +'@backstage/plugin-home': patch +--- + +Add `FavoriteToggle` in `core-components` to standardise favorite marking diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 597b1a9abf..d04df69af4 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -19,6 +19,7 @@ import { default as CSS_2 } from 'csstype'; import { CSSProperties } from 'react'; import { ElementType } from 'react'; import { ErrorInfo } from 'react'; +import IconButton from '@material-ui/core/IconButton'; import { IconComponent } from '@backstage/core-plugin-api'; import { Icons } from '@material-table/core'; import { IdentityApi } from '@backstage/core-plugin-api'; @@ -401,6 +402,32 @@ export type ErrorPanelProps = { title?: string; }; +// @public +export function FavoriteToggle({ + id, + title, + isFavorite: value, + onToggle: onChange, + ...iconButtonProps +}: FavoriteToggleProps): React_2.JSX.Element; + +// @public +export function FavoriteToggleIcon({ + isFavorite, +}: { + isFavorite: boolean; +}): React_2.JSX.Element; + +// Warning: (ae-missing-release-tag) "FavoriteToggleProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export type FavoriteToggleProps = ComponentProps & { + id: string; + title: string; + isFavorite: boolean; + onToggle: (value: boolean) => void; +}; + // @public (undocumented) export type FeatureCalloutCircleClassKey = | '@keyframes pulsateSlightly' diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx new file mode 100644 index 0000000000..cfe44b8728 --- /dev/null +++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx @@ -0,0 +1,68 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { FavoriteToggle } from './FavoriteToggle'; +import { + UnifiedThemeProvider, + createBaseThemeOptions, + createUnifiedTheme, + palettes, +} from '@backstage/theme'; + +export default { + title: 'Core/FavoriteToggle', + component: FavoriteToggle, +}; + +export const Default = () => { + const [isFavorite, setFavorite] = React.useState(false); + return ( + + ); +}; + +const theme = createUnifiedTheme({ + ...createBaseThemeOptions({ + palette: palettes.dark, + }), + components: { + BackstageFavoriteToggleIcon: { + styleOverrides: { + icon: () => ({ color: 'aqua' }), + iconBorder: () => ({ color: 'white' }), + }, + }, + }, +}); + +export const WithThemeOverride = () => { + const [isFavorite, setFavorite] = React.useState(false); + return ( + + + + ); +}; diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx new file mode 100644 index 0000000000..d40e3c99b3 --- /dev/null +++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx @@ -0,0 +1,55 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { render } from '@testing-library/react'; +import { FavoriteToggle, FavoriteToggleProps } from './FavoriteToggle'; +import React from 'react'; +import userEvent from '@testing-library/user-event'; + +describe('', () => { + const onToggle = jest.fn(); + + const props: FavoriteToggleProps = { + title: 'Favorite this thing', + id: 'some-thing-favorite', + onToggle, + isFavorite: true, + }; + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('renders with valid props', async () => { + const { getByRole } = render(); + + expect(getByRole('button', { name: props.title })).toBeInTheDocument(); + }); + + it('should return inverted value on toggle', async () => { + const { getByRole } = render(); + + await userEvent.click(getByRole('button', { name: props.title })); + expect(onToggle).toHaveBeenCalledWith(!props.isFavorite); + }); + + it('should show accessible tooltip', async () => { + const { findByRole, getByRole } = render(); + + await userEvent.hover(getByRole('button', { name: props.title })); + + expect(await findByRole('tooltip')).toHaveTextContent(props.title); + }); +}); diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx new file mode 100644 index 0000000000..b3b319fddf --- /dev/null +++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx @@ -0,0 +1,92 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React, { ComponentProps } from 'react'; +import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@material-ui/core/Tooltip'; +import { Theme, makeStyles } from '@material-ui/core/styles'; +import Star from '@material-ui/icons/Star'; +import StarBorder from '@material-ui/icons/StarBorder'; + +const useStyles = makeStyles( + theme => ({ + icon: { + color: '#f3ba37', + cursor: 'pointer', + }, + iconBorder: { + color: theme.palette.text.primary, + cursor: 'pointer', + }, + }), + { name: 'BackstageFavoriteToggleIcon' }, +); + +// @public (undocumented) +export type FavoriteToggleIconClassKey = 'icon' | 'iconBorder'; + +// @public (undocumented) +export type FavoriteToggleProps = ComponentProps & { + id: string; + title: string; + isFavorite: boolean; + onToggle: (value: boolean) => void; +}; + +/** + * Icon used in FavoriteToggle component. + * + * Can be used independently, useful when used as {@link @material-table/core#MaterialTableProps.actions} in {@link @material-table/core#MaterialTable} + * + * @public + */ +export function FavoriteToggleIcon({ isFavorite }: { isFavorite: boolean }) { + const classes = useStyles(); + + return isFavorite ? ( + + ) : ( + + ); +} + +/** + * Toggle encapsulating logic for marking something as favorite, + * primarily used in various instances of entity lists and cards but can be used elsewhere. + * + * This component can only be used in as a controlled toggle and does not keep internal state. + * + * @public + */ +export function FavoriteToggle({ + id, + title, + isFavorite: value, + onToggle: onChange, + ...iconButtonProps +}: FavoriteToggleProps) { + return ( + + onChange(!value)} + {...iconButtonProps} + > + + + + ); +} diff --git a/packages/core-components/src/components/FavoriteToggle/index.ts b/packages/core-components/src/components/FavoriteToggle/index.ts new file mode 100644 index 0000000000..539bb1baf9 --- /dev/null +++ b/packages/core-components/src/components/FavoriteToggle/index.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { FavoriteToggle, FavoriteToggleIcon } from './FavoriteToggle'; +export type { FavoriteToggleProps } from './FavoriteToggle'; diff --git a/packages/core-components/src/components/index.ts b/packages/core-components/src/components/index.ts index a58208fabb..905893597e 100644 --- a/packages/core-components/src/components/index.ts +++ b/packages/core-components/src/components/index.ts @@ -25,6 +25,7 @@ export * from './DependencyGraph'; export * from './DismissableBanner'; export * from './EmptyState'; export * from './ErrorPanel'; +export * from './FavoriteToggle'; export * from './ResponseErrorPanel'; export * from './FeatureDiscovery'; export * from './HeaderIconLinkRow'; diff --git a/packages/core-components/src/overridableComponents.ts b/packages/core-components/src/overridableComponents.ts index 85e9dc96a8..1e23bd69e1 100644 --- a/packages/core-components/src/overridableComponents.ts +++ b/packages/core-components/src/overridableComponents.ts @@ -91,6 +91,7 @@ import { BoldHeaderClassKey, CardTabClassKey, } from './layout'; +import { FavoriteToggleIconClassKey } from './components/FavoriteToggle/FavoriteToggle'; type BackstageComponentsNameToClassKey = { BackstageAvatar: AvatarClassKey; @@ -163,6 +164,7 @@ type BackstageComponentsNameToClassKey = { BackstageTabbedCard: TabbedCardClassKey; BackstageTabbedCardBoldHeader: BoldHeaderClassKey; BackstageCardTab: CardTabClassKey; + BackstageFavoriteToggleIcon: FavoriteToggleIconClassKey; }; /** @public */ diff --git a/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx b/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx index ab674ff98e..f0d59247ad 100644 --- a/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx +++ b/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx @@ -16,26 +16,17 @@ import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import { withStyles } from '@material-ui/core/styles'; -import Star from '@material-ui/icons/Star'; -import StarBorder from '@material-ui/icons/StarBorder'; import React, { ComponentProps } from 'react'; import { useStarredEntity } from '../../hooks/useStarredEntity'; import { catalogReactTranslationRef } from '../../translation'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; +import { FavoriteToggle } from '@backstage/core-components'; /** @public */ export type FavoriteEntityProps = ComponentProps & { entity: Entity; }; -const YellowStar = withStyles({ - root: { - color: '#f3ba37', - }, -})(Star); - /** * IconButton for showing if a current entity is starred and adding/removing it from the favorite entities * @param props - MaterialUI IconButton props extended by required `entity` prop @@ -56,16 +47,12 @@ export const FavoriteEntity = (props: FavoriteEntityProps) => { )}`; return ( - toggleStarredEntity()} - > - - {isStarredEntity ? : } - - + /> ); }; diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 1026dc5d26..ac459b83d6 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -35,12 +35,9 @@ import { useStarredEntities, } from '@backstage/plugin-catalog-react'; import Typography from '@material-ui/core/Typography'; -import { withStyles } from '@material-ui/core/styles'; import { visuallyHidden } from '@mui/utils'; import Edit from '@material-ui/icons/Edit'; import OpenInNew from '@material-ui/icons/OpenInNew'; -import Star from '@material-ui/icons/Star'; -import StarBorder from '@material-ui/icons/StarBorder'; import { capitalize } from 'lodash'; import pluralize from 'pluralize'; import React, { ReactNode, useMemo } from 'react'; @@ -50,6 +47,7 @@ import { PaginatedCatalogTable } from './PaginatedCatalogTable'; import { defaultCatalogTableColumnsFunc } from './defaultCatalogTableColumnsFunc'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import { catalogTranslationRef } from '../../alpha/translation'; +import { FavoriteToggleIcon } from '@backstage/core-components'; /** * Props for {@link CatalogTable}. @@ -64,12 +62,6 @@ export interface CatalogTableProps { subtitle?: string; } -const YellowStar = withStyles({ - root: { - color: '#f3ba37', - }, -})(Star); - const refCompare = (a: Entity, b: Entity) => { const toRef = (entity: Entity) => entity.metadata.title || @@ -160,12 +152,7 @@ export const CatalogTable = (props: CatalogTableProps) => { return { cellStyle: { paddingLeft: '1em' }, - icon: () => ( - <> - {title} - {isStarred ? : } - - ), + icon: () => , tooltip: title, onClick: () => toggleStarredEntity(entity), }; diff --git a/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx b/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx index 579116b9a9..8081e71407 100644 --- a/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx +++ b/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx @@ -17,14 +17,12 @@ import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; import { entityRouteParams } from '@backstage/plugin-catalog-react'; import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; -import Tooltip from '@material-ui/core/Tooltip'; -import IconButton from '@material-ui/core/IconButton'; import ListItemText from '@material-ui/core/ListItemText'; import React from 'react'; import { Link } from 'react-router-dom'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { useRouteRef } from '@backstage/core-plugin-api'; -import StarIcon from '@material-ui/icons/Star'; +import { FavoriteToggle } from '@backstage/core-components'; type EntityListItemProps = { entity: Entity; @@ -40,15 +38,12 @@ export const StarredEntityListItem = ({ return ( - - onToggleStarredEntity(entity)} - > - - - + onToggleStarredEntity(entity)} + /> diff --git a/plugins/techdocs/src/home/components/Tables/actions.tsx b/plugins/techdocs/src/home/components/Tables/actions.tsx index c95dd8b94c..bc89d76560 100644 --- a/plugins/techdocs/src/home/components/Tables/actions.tsx +++ b/plugins/techdocs/src/home/components/Tables/actions.tsx @@ -17,15 +17,7 @@ import React from 'react'; import ShareIcon from '@material-ui/icons/Share'; import { DocsTableRow } from './types'; -import { withStyles } from '@material-ui/core/styles'; -import Star from '@material-ui/icons/Star'; -import StarBorder from '@material-ui/icons/StarBorder'; - -const YellowStar = withStyles({ - root: { - color: '#f3ba37', - }, -})(Star); +import { FavoriteToggleIcon } from '@backstage/core-components'; /** * Not directly exported, but through DocsTable.actions and EntityListDocsTable.actions @@ -52,7 +44,7 @@ export const actionFactories = { const isStarred = isStarredEntity(entity); return { cellStyle: { paddingLeft: '1em' }, - icon: () => (isStarred ? : ), + icon: () => , tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites', onClick: () => toggleStarredEntity(entity), }; From 76eaaf3154aafd661abb0c1a1642c69eba45ded1 Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 5 Sep 2024 16:31:39 +0200 Subject: [PATCH 2/4] chore: fix api-report warnings Signed-off-by: blam --- packages/core-components/api-report.md | 2 -- .../src/components/FavoriteToggle/FavoriteToggle.tsx | 8 ++++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index d04df69af4..c6ad474357 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -418,8 +418,6 @@ export function FavoriteToggleIcon({ isFavorite: boolean; }): React_2.JSX.Element; -// Warning: (ae-missing-release-tag) "FavoriteToggleProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export type FavoriteToggleProps = ComponentProps & { id: string; diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx index b3b319fddf..c315efbd68 100644 --- a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx +++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx @@ -34,10 +34,14 @@ const useStyles = makeStyles( { name: 'BackstageFavoriteToggleIcon' }, ); -// @public (undocumented) +/** + * @public + */ export type FavoriteToggleIconClassKey = 'icon' | 'iconBorder'; -// @public (undocumented) +/** + * @public + */ export type FavoriteToggleProps = ComponentProps & { id: string; title: string; From 0d91710f44a488e6b87aac97d23586554c0fdd55 Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 5 Sep 2024 16:33:24 +0200 Subject: [PATCH 3/4] chrore: export from components Signed-off-by: blam --- packages/core-components/src/components/index.ts | 1 + packages/core-components/src/overridableComponents.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core-components/src/components/index.ts b/packages/core-components/src/components/index.ts index 905893597e..828df3ec03 100644 --- a/packages/core-components/src/components/index.ts +++ b/packages/core-components/src/components/index.ts @@ -48,3 +48,4 @@ export * from './TabbedLayout'; export * from './Table'; export * from './TrendLine'; export * from './WarningPanel'; +export * from './FavoriteToggle'; diff --git a/packages/core-components/src/overridableComponents.ts b/packages/core-components/src/overridableComponents.ts index 1e23bd69e1..06e147cc78 100644 --- a/packages/core-components/src/overridableComponents.ts +++ b/packages/core-components/src/overridableComponents.ts @@ -61,6 +61,7 @@ import { FiltersContainerClassKey, TableClassKey, WarningPanelClassKey, + FavoriteToggleIconClassKey, } from './components'; import { @@ -91,7 +92,6 @@ import { BoldHeaderClassKey, CardTabClassKey, } from './layout'; -import { FavoriteToggleIconClassKey } from './components/FavoriteToggle/FavoriteToggle'; type BackstageComponentsNameToClassKey = { BackstageAvatar: AvatarClassKey; From cfeaec21f9d9b2646ede2cfb34f95d623e6954cf Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 5 Sep 2024 16:42:35 +0200 Subject: [PATCH 4/4] chore: small cleanup Signed-off-by: blam --- packages/core-components/api-report.md | 26 ++++++-------- .../FavoriteToggle/FavoriteToggle.test.tsx | 4 +-- .../FavoriteToggle/FavoriteToggle.tsx | 35 +++++++++---------- .../src/components/FavoriteToggle/index.ts | 2 +- 4 files changed, 30 insertions(+), 37 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index c6ad474357..8062278c68 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -403,28 +403,22 @@ export type ErrorPanelProps = { }; // @public -export function FavoriteToggle({ - id, - title, - isFavorite: value, - onToggle: onChange, - ...iconButtonProps -}: FavoriteToggleProps): React_2.JSX.Element; +export function FavoriteToggle( + props: ComponentProps & { + id: string; + title: string; + isFavorite: boolean; + onToggle: (value: boolean) => void; + }, +): React_2.JSX.Element; // @public -export function FavoriteToggleIcon({ - isFavorite, -}: { +export function FavoriteToggleIcon(props: { isFavorite: boolean; }): React_2.JSX.Element; // @public (undocumented) -export type FavoriteToggleProps = ComponentProps & { - id: string; - title: string; - isFavorite: boolean; - onToggle: (value: boolean) => void; -}; +export type FavoriteToggleIconClassKey = 'icon' | 'iconBorder'; // @public (undocumented) export type FeatureCalloutCircleClassKey = diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx index d40e3c99b3..c5ca4c33f2 100644 --- a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx +++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx @@ -14,14 +14,14 @@ * limitations under the License. */ import { render } from '@testing-library/react'; -import { FavoriteToggle, FavoriteToggleProps } from './FavoriteToggle'; +import { FavoriteToggle } from './FavoriteToggle'; import React from 'react'; import userEvent from '@testing-library/user-event'; describe('', () => { const onToggle = jest.fn(); - const props: FavoriteToggleProps = { + const props = { title: 'Favorite this thing', id: 'some-thing-favorite', onToggle, diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx index c315efbd68..65124ab05c 100644 --- a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx +++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx @@ -39,16 +39,6 @@ const useStyles = makeStyles( */ export type FavoriteToggleIconClassKey = 'icon' | 'iconBorder'; -/** - * @public - */ -export type FavoriteToggleProps = ComponentProps & { - id: string; - title: string; - isFavorite: boolean; - onToggle: (value: boolean) => void; -}; - /** * Icon used in FavoriteToggle component. * @@ -56,7 +46,8 @@ export type FavoriteToggleProps = ComponentProps & { * * @public */ -export function FavoriteToggleIcon({ isFavorite }: { isFavorite: boolean }) { +export function FavoriteToggleIcon(props: { isFavorite: boolean }) { + const { isFavorite } = props; const classes = useStyles(); return isFavorite ? ( @@ -74,13 +65,21 @@ export function FavoriteToggleIcon({ isFavorite }: { isFavorite: boolean }) { * * @public */ -export function FavoriteToggle({ - id, - title, - isFavorite: value, - onToggle: onChange, - ...iconButtonProps -}: FavoriteToggleProps) { +export function FavoriteToggle( + props: ComponentProps & { + id: string; + title: string; + isFavorite: boolean; + onToggle: (value: boolean) => void; + }, +) { + const { + id, + title, + isFavorite: value, + onToggle: onChange, + ...iconButtonProps + } = props; return (