Skip to content

Commit

Permalink
Showing 3 changed files with 68 additions and 10 deletions.
49 changes: 47 additions & 2 deletions packages/react/src/components/Card/Card.stories.mdx
Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@ import dedent from 'ts-dedent';
import StoryConfig from '../../../.storybook/story-config.ts';
import {withDesign} from '../../../.storybook/utils.ts';
import Card from './Card.tsx';
import CardContent from '../CardContent/CardContent.tsx';
import Typography from '../Typography/Typography.tsx';

export const meta = {
component: Card,
@@ -11,7 +13,7 @@ export const meta = {

<Meta title={meta.title} component={meta.component} />

export const Template = args => <Card {...args} />;
export const Template = args => <Card sx={ { maxWidth: 300 } } {...args} />;

# Card

@@ -24,7 +26,22 @@ export const Template = args => <Card {...args} />;
Use the Card component to display content and actions about a single subject.

<Canvas>
<Story name="Overview" args={{children: 'Sample Card'}}>
<Story
name="Overview"
args={{
children: (
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
)
}}
>
{Template.bind({})}
</Story>
</Canvas>
@@ -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.

<Canvas>
<Story
name="With Hover"
args={{
children: (
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
),
onClick: () => alert('Clicked')
}}
>
{Template.bind({})}
</Story>
</Canvas>
22 changes: 15 additions & 7 deletions packages/react/src/components/Card/Card.tsx
Original file line number Diff line number Diff line change
@@ -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<C extends ElementType = ElementType> = {
component?: C;
} & Omit<MuiCardProps<C>, 'component'>;

const COMPONENT_NAME: string = 'Card';

const Card: FC<CardProps> & WithWrapperProps = (props: CardProps): ReactElement => {
const {className, ...rest} = props;
const Card: ForwardRefExoticComponent<CardProps> & WithWrapperProps = forwardRef(
<C extends ElementType>(props: CardProps<C>, ref: MutableRefObject<HTMLDivElement>): 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 <MuiCard className={classes} {...rest} />;
};
return <MuiCard className={classes} ref={ref} onClick={onClick} {...rest} />;
},
) as ForwardRefExoticComponent<CardProps> & WithWrapperProps;

Card.displayName = composeComponentDisplayName(COMPONENT_NAME);
Card.muiName = COMPONENT_NAME;
Card.defaultProps = {
elevation: 0,
variant: 'outlined',
};

export default Card;
7 changes: 6 additions & 1 deletion packages/react/src/components/Card/card.scss
Original file line number Diff line number Diff line change
@@ -17,5 +17,10 @@
*/

.oxygen-card {
/** Add Styles */
&.with-hover {
&:hover {
box-shadow: var(--oxygen-shadows-3);
cursor: pointer;
}
}
}

0 comments on commit 7e73cae

Please sign in to comment.