{ + const { contentRef } = useContent(); + const FinalTitle = ( - + {pageTitle} ); diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx index 3d8d0f3bb0..c80e71b609 100644 --- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx +++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx @@ -92,6 +92,10 @@ const VARIANT_STYLES = { flexDirection: 'column', height: 'calc(100% - 10px)', // for pages without content header marginBottom: '10px', + breakInside: 'avoid-page', + '@media print': { + height: 'auto', + }, }, }, cardContent: { diff --git a/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx b/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx index 1ba3dec3fd..a03ad9be41 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx @@ -22,7 +22,7 @@ import CardMedia from '@material-ui/core/CardMedia'; import Typography from '@material-ui/core/Typography'; import React from 'react'; import { MemoryRouter } from 'react-router-dom'; -import { LinkButton } from '../../components'; +import { LinkButton } from '../../components/LinkButton/LinkButton'; import { ItemCardGrid } from './ItemCardGrid'; import { ItemCardHeader } from './ItemCardHeader'; diff --git a/packages/core-components/src/layout/ItemCard/ItemCard.tsx b/packages/core-components/src/layout/ItemCard/ItemCard.tsx index 0b1ee34c0c..2d1123b19c 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCard.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCard.tsx @@ -21,7 +21,7 @@ import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'; import Chip from '@material-ui/core/Chip'; import React, { ReactNode } from 'react'; -import { LinkButton } from '../../components'; +import { LinkButton } from '../../components/LinkButton/LinkButton'; import { ItemCardHeader } from './ItemCardHeader'; type ItemCardProps = { @@ -37,7 +37,7 @@ type ItemCardProps = { }; /** - * This card type has been deprecated. Instead use plain MUI Card and helpers + * This card type has been deprecated. Instead use plain Material UI Card and helpers * where appropriate. * * @example @@ -57,8 +57,8 @@ type ItemCardProps = { * * ``` * - * @deprecated Use plain MUI `` and composable helpers instead. - * @see https://material-ui.com/components/cards/ + * @deprecated Use plain Material UI `` and composable helpers instead. + * @see https://v4.mui.com/components/cards/ */ export function ItemCard(props: ItemCardProps) { const { description, tags, title, type, subtitle, label, onClick, href } = diff --git a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx index a1e6d24aeb..30710bdc26 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx @@ -50,7 +50,7 @@ export type ItemCardGridProps = Partial> & { * select among several options. * * @remarks - * The immediate children are expected to be MUI Card components. + * The immediate children are expected to be Material UI Card components. * * Styles for the grid can be overridden using the `classes` prop, e.g.: * diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx index da3d9b7ebe..1e4e7dc316 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx @@ -65,7 +65,7 @@ export type ItemCardHeaderProps = Partial> & { * are arranged in a grid for users to select among several options. * * @remarks - * This component expects to be placed within a MUI ``. + * This component expects to be placed within a Material UI ``. * * Styles for the header can be overridden using the `classes` prop, e.g.: * diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index 00988c475b..e388e0366a 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -33,6 +33,11 @@ const useStyles = makeStyles( [theme.breakpoints.down('xs')]: { height: '100%', }, + '@media print': { + display: 'block', + height: 'auto', + overflowY: 'inherit', + }, }, }), { name: 'BackstagePage' }, diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index 815d6bc0d6..8cb43ba007 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -63,6 +63,9 @@ const useStyles = makeStyles( '&::-webkit-scrollbar': { display: 'none', }, + '@media print': { + display: 'none', + }, }, drawerWidth: props => ({ width: props.sidebarConfig.drawerWidthClosed, diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 924182086f..715e0d4af7 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -411,7 +411,11 @@ const SidebarItemBase = forwardRef((props, ref) => { {itemIcon}