Skip to content

Commit

Permalink
Merge pull request #190 from brionmario/bug-fixes
Browse files Browse the repository at this point in the history 
fix(react): update `Card` component hover styles
  • Loading branch information
@brionmario
brionmario authored Nov 15, 2023
2 parents a9d9478 + 16f6679 commit 0c463ec
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 13 deletions.
2 changes: 1 addition & 1 deletion packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`ActionCard should match the snapshot 1`] = `
<body>
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-card oxygen-action-card css-1vzmcwq-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root oxygen-card oxygen-action-card css-1e3jyt5-MuiPaper-root-MuiCard-root"
>
<div
class="MuiCardContent-root oxygen-card-content css-46bh2p-MuiCardContent-root"
Expand Down
49 changes: 47 additions & 2 deletions packages/react/src/components/Card/Card.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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

Expand All @@ -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>
Expand All @@ -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
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
2 changes: 1 addition & 1 deletion packages/react/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`Card should match the snapshot 1`] = `
<body>
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-card css-1vzmcwq-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root oxygen-card css-1e3jyt5-MuiPaper-root-MuiCard-root"
/>
</div>
</body>
Expand Down
7 changes: 6 additions & 1 deletion packages/react/src/components/Card/card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,10 @@
*/

.oxygen-card {
/** Add Styles */
&.with-hover {
&:hover {
box-shadow: var(--oxygen-shadows-3);
cursor: pointer;
}
}
}
2 changes: 1 addition & 1 deletion packages/react/src/components/DataGrid/__tests__/__snapshots__/DataGrid.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
<div
Expand Down
26 changes: 26 additions & 0 deletions packages/react/src/theme/default-theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,32 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
},
},
},
shadows: [
'none',
'0px 2px 1px -1px rgba(21, 21, 21, 0.08), 0px 1px 1px 0px rgba(21, 21, 21, 0.06), 0px 1px 3px 0px rgba(21, 21, 21, 0.04)',
'0px 3px 1px -2px rgba(21, 21, 21, 0.08), 0px 2px 2px 0px rgba(21, 21, 21, 0.06), 0px 1px 5px 0px rgba(21, 21, 21, 0.04)',
'0px 3px 3px -2px rgba(21, 21, 21, 0.08), 0px 3px 4px 0px rgba(21, 21, 21, 0.06), 0px 1px 8px 0px rgba(21, 21, 21, 0.04)',
'0px 2px 4px -1px rgba(21, 21, 21, 0.08), 0px 4px 5px 0px rgba(21, 21, 21, 0.06), 0px 1px 10px 0px rgba(21, 21, 21, 0.04)',
'0px 3px 5px -1px rgba(21, 21, 21, 0.08), 0px 5px 8px 0px rgba(21, 21, 21, 0.06), 0px 1px 14px 0px rgba(21, 21, 21, 0.04)',
'0px 3px 5px -1px rgba(21, 21, 21, 0.08), 0px 6px 10px 0px rgba(21, 21, 21, 0.06), 0px 1px 18px 0px rgba(21, 21, 21, 0.04)',
'0px 4px 5px -2px rgba(21, 21, 21, 0.08), 0px 7px 10px 1px rgba(21, 21, 21, 0.06), 0px 2px 16px 1px rgba(21, 21, 21, 0.04)',
'0px 5px 5px -3px rgba(21, 21, 21, 0.08), 0px 8px 10px 1px rgba(21, 21, 21, 0.06), 0px 3px 14px 2px rgba(21, 21, 21, 0.04)',
'0px 5px 6px -3px rgba(21, 21, 21, 0.08), 0px 9px 12px 1px rgba(21, 21, 21, 0.06), 0px 3px 16px 2px rgba(21, 21, 21, 0.04)',
'0px 6px 6px -3px rgba(21, 21, 21, 0.08), 0px 10px 14px 1px rgba(21, 21, 21, 0.06), 0px 4px 18px 3px rgba(21, 21, 21, 0.04)',
'0px 6px 7px -4px rgba(21, 21, 21, 0.08), 0px 11px 15px 1px rgba(21, 21, 21, 0.06), 0px 4px 20px 3px rgba(21, 21, 21, 0.04)',
'0px 7px 8px -4px rgba(21, 21, 21, 0.08), 0px 12px 17px 2px rgba(21, 21, 21, 0.06), 0px 5px 22px 4px rgba(21, 21, 21, 0.04)',
'0px 7px 8px -4px rgba(21, 21, 21, 0.08), 0px 13px 19px 2px rgba(21, 21, 21, 0.06), 0px 5px 24px 4px rgba(21, 21, 21, 0.04)',
'0px 7px 9px -4px rgba(21, 21, 21, 0.08), 0px 14px 21px 2px rgba(21, 21, 21, 0.06), 0px 5px 26px 4px rgba(21, 21, 21, 0.04)',
'0px 8px 9px -5px rgba(21, 21, 21, 0.08), 0px 15px 22px 2px rgba(21, 21, 21, 0.06), 0px 6px 28px 5px rgba(21, 21, 21, 0.04)',
'0px 8px 10px -5px rgba(21, 21, 21, 0.08), 0px 16px 24px 2px rgba(21, 21, 21, 0.06), 0px 6px 30px 5px rgba(21, 21, 21, 0.04)',
'0px 8px 11px -5px rgba(21, 21, 21, 0.08), 0px 17px 26px 2px rgba(21, 21, 21, 0.06), 0px 6px 32px 5px rgba(21, 21, 21, 0.04)',
'0px 9px 11px -5px rgba(21, 21, 21, 0.08), 0px 18px 28px 2px rgba(21, 21, 21, 0.06), 0px 7px 34px 6px rgba(21, 21, 21, 0.04)',
'0px 9px 12px -6px rgba(21, 21, 21, 0.08), 0px 19px 29px 2px rgba(21, 21, 21, 0.06), 0px 7px 36px 6px rgba(21, 21, 21, 0.04)',
'0px 10px 13px -6px rgba(21, 21, 21, 0.08), 0px 20px 31px 3px rgba(21, 21, 21, 0.06), 0px 8px 38px 7px rgba(21, 21, 21, 0.04)',
'0px 10px 13px -6px rgba(21, 21, 21, 0.08), 0px 21px 33px 3px rgba(21, 21, 21, 0.06), 0px 8px 40px 7px rgba(21, 21, 21, 0.04)',
'0px 10px 14px -6px rgba(21, 21, 21, 0.08), 0px 22px 35px 3px rgba(21, 21, 21, 0.06), 0px 8px 42px 7px rgba(21, 21, 21, 0.04)',
'0px 11px 14px -7px rgba(21, 21, 21, 0.08), 0px 23px 36px 3px rgba(21, 21, 21, 0.06), 0px 9px 44px 8px rgba(21, 21, 21, 0.04)',
],
shape: {
// TODO: Is `Lg` the default?
borderRadius: lightTokens.OxygenOxygenBorderRadiusLg,
Expand Down

0 comments on commit 0c463ec

Please sign in to comment.