diff --git a/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap index 7a9a12b7..5eeaa857 100644 --- a/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap +++ b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap @@ -4,7 +4,7 @@ exports[`ActionCard should match the snapshot 1`] = `
-export const Template = args => ; +export const Template = args => ; # Card @@ -24,7 +26,22 @@ export const Template = args => ; Use the Card component to display content and actions about a single subject. - + + + Lizard + + + Lizards are a widespread group of squamate reptiles, with over 6,000 + species, ranging across all continents except Antarctica + + + ) + }} + > {Template.bind({})} @@ -44,3 +61,31 @@ Import and use the `Card` component in your components as follows. code={dedent` import Card from '@oxygen-ui/react/Card';\n`} /> + +## Variants + +### With Hover + +Variation that provides a hover if the card has a `onClick` handler. + + + + + Lizard + + + Lizards are a widespread group of squamate reptiles, with over 6,000 + species, ranging across all continents except Antarctica + + + ), + onClick: () => alert('Clicked') + }} + > + {Template.bind({})} + + diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx index 7f595eb9..215ccf2e 100644 --- a/packages/react/src/components/Card/Card.tsx +++ b/packages/react/src/components/Card/Card.tsx @@ -18,24 +18,32 @@ import MuiCard, {CardProps as MuiCardProps} from '@mui/material/Card'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {ElementType, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import {WithWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; import './card.scss'; -export type CardProps = MuiCardProps; +export type CardProps = { + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Card'; -const Card: FC & WithWrapperProps = (props: CardProps): ReactElement => { - const {className, ...rest} = props; +const Card: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: CardProps, ref: MutableRefObject): ReactElement => { + const {className, component, onClick, ...rest} = props; - const classes: string = clsx('oxygen-card', className); + const classes: string = clsx('oxygen-card', {'with-hover': onClick}, className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Card.displayName = composeComponentDisplayName(COMPONENT_NAME); Card.muiName = COMPONENT_NAME; +Card.defaultProps = { + elevation: 0, + variant: 'outlined', +}; export default Card; diff --git a/packages/react/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap b/packages/react/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap index 29881971..336a9410 100644 --- a/packages/react/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap +++ b/packages/react/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Card should match the snapshot 1`] = `
diff --git a/packages/react/src/components/Card/card.scss b/packages/react/src/components/Card/card.scss index c380bbed..52c11695 100644 --- a/packages/react/src/components/Card/card.scss +++ b/packages/react/src/components/Card/card.scss @@ -17,5 +17,10 @@ */ .oxygen-card { - /** Add Styles */ + &.with-hover { + &:hover { + box-shadow: var(--oxygen-shadows-3); + cursor: pointer; + } + } } diff --git a/packages/react/src/components/DataGrid/__tests__/__snapshots__/DataGrid.test.tsx.snap b/packages/react/src/components/DataGrid/__tests__/__snapshots__/DataGrid.test.tsx.snap index cee244b5..10b68eae 100644 --- a/packages/react/src/components/DataGrid/__tests__/__snapshots__/DataGrid.test.tsx.snap +++ b/packages/react/src/components/DataGrid/__tests__/__snapshots__/DataGrid.test.tsx.snap @@ -7,7 +7,7 @@ exports[`DataGrid should match the snapshot 1`] = ` aria-colcount="0" aria-multiselectable="false" aria-rowcount="1" - class="oxygen-data-grid MuiDataGrid-root MuiDataGrid-root--densityStandard MuiDataGrid-withBorderColor css-q5txa1-MuiDataGrid-root" + class="oxygen-data-grid MuiDataGrid-root MuiDataGrid-root--densityStandard MuiDataGrid-withBorderColor css-if49jn-MuiDataGrid-root" role="grid" >