Skip to content

Commit

Permalink
Merge pull request #30 from thivi/main
Browse files Browse the repository at this point in the history 
chore(react): improve ActionCard component
  • Loading branch information
@thivi
thivi authored Feb 16, 2023
2 parents f666673 + a723ead commit bf108dc
Show file tree
Hide file tree
Showing 14 changed files with 53 additions and 53 deletions.
12 changes: 4 additions & 8 deletions packages/react/src/components/ActionCard/ActionCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
import Card, {CardProps} from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import {FC, ReactElement, ReactNode} from 'react';
import clsx from 'clsx';
import {FC, ReactElement, ReactNode} from 'react';
import Button from '../Button';
import Typography from '../Typography';
import {WithWrapperProps} from '../../models';
Expand Down Expand Up @@ -57,15 +57,11 @@ const ActionCard: FC<ActionCardProps> & WithWrapperProps = (props: ActionCardPro
const classes: string = clsx('oxygen-action-card', className);

return (
<Card className={classes} {...rest}>
<Card className={classes} {...rest} elevation={1}>
<CardContent>
{image}
<Typography variant="subtitle2" className="title">
{title}
</Typography>
<Typography variant="body1" color="secondary.main" className="description">
{description}
</Typography>
<Typography variant="subtitle2">{title}</Typography>
<Typography variant="body1">{description}</Typography>
</CardContent>
<CardActions>
<Button onClick={onActionClick} variant="contained">
Expand Down
6 changes: 3 additions & 3 deletions 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-action-card css-2in4ew-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-action-card css-1sjg1d0-MuiPaper-root-MuiCard-root"
>
<div
class="MuiCardContent-root css-46bh2p-MuiCardContent-root"
Expand All @@ -14,12 +14,12 @@ exports[`ActionCard should match the snapshot 1`] = `
src="/assets/images/action-card-image.svg"
/>
<h6
class="MuiTypography-root MuiTypography-subtitle2 oxygen-typography title css-n98czh-MuiTypography-root"
class="MuiTypography-root MuiTypography-subtitle2 oxygen-typography css-no3yss-MuiTypography-root"
>
Secure your account by adding an extra layer of security
</h6>
<p
class="MuiTypography-root MuiTypography-body1 oxygen-typography description css-167a66v-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 oxygen-typography css-1myvrax-MuiTypography-root"
>
Configure additional authentications to sign in easily or to add an extra layer of security to your account.
</p>
Expand Down
22 changes: 1 addition & 21 deletions packages/react/src/components/ActionCard/action-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,7 @@
*/

.oxygen-action-card {
border-radius: 8px;
box-shadow: 0 2px 20px 0 #1d20281a;
padding: 24px 40px 24px 24px;

&:hover {
border: 1px solid #ff7300;
}

.title {
color: #222228;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

.description {
color: "#8D91A3";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 20px;
border: 1px solid var(--oxygen-palette-primary-main);
}
}
2 changes: 1 addition & 1 deletion packages/react/src/components/AppBar/__tests__/__snapshots__/AppBar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`AppBar should match the snapshot 1`] = `
<body>
<div>
<header
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed oxygen-app-bar mui-fixed css-vfrfmn-MuiPaper-root-MuiAppBar-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed oxygen-app-bar mui-fixed css-ifmgpx-MuiPaper-root-MuiAppBar-root"
/>
</div>
</body>
Expand Down
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-2in4ew-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-card css-1sjg1d0-MuiPaper-root-MuiCard-root"
/>
</div>
</body>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`Header should match the snapshot 1`] = `
<body>
<div>
<header
class="MuiPaper-root MuiPaper-outlined MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionStatic oxygen-app-bar oxygen-header css-163objg-MuiPaper-root-MuiAppBar-root"
class="MuiPaper-root MuiPaper-outlined MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionStatic oxygen-app-bar oxygen-header css-63bd7d-MuiPaper-root-MuiAppBar-root"
role="banner"
>
<div
Expand Down
2 changes: 1 addition & 1 deletion ...ages/react/src/components/ListItemText/__tests__/__snapshots__/ListItemText.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`ListItemText should match the snapshot 1`] = `
class="MuiListItemText-root oxygen-list-item-text css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-oi6amf-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-hy8c7y-MuiTypography-root"
>
List Item Text
</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/MenuItem/__tests__/__snapshots__/MenuItem.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`MenuItem should match the snapshot 1`] = `
<body>
<div>
<li
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters oxygen-menu-item css-1ka9525-MuiButtonBase-root-MuiMenuItem-root"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters oxygen-menu-item css-6uo8rv-MuiButtonBase-root-MuiMenuItem-root"
role="menuitem"
tabindex="-1"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Navbar/__tests__/__snapshots__/Navbar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`Navbar should match the snapshot 1`] = `
class="MuiDrawer-root MuiDrawer-docked oxygen-drawer oxygen-navbar collapsible css-7ik032-MuiDrawer-docked"
>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-1ldhiwi-MuiPaper-root-MuiDrawer-paper"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-7wcstg-MuiPaper-root-MuiDrawer-paper"
>
<div
class="oxygen-navbar-collapsible-hamburger"
Expand Down
10 changes: 5 additions & 5 deletions packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`SignIn should match the snapshot 1`] = `
src="#"
/>
<div
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded oxygen-sign-in-box css-1fbvlaf-MuiPaper-root"
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded oxygen-sign-in-box css-l7nmq7-MuiPaper-root"
>
<h5
class="MuiTypography-root MuiTypography-h5 oxygen-sign-in-header css-b9o9n7-MuiTypography-root"
Expand All @@ -26,7 +26,7 @@ exports[`SignIn should match the snapshot 1`] = `
class="oxygen-text-field"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink oxygen-text-field__label css-1vtovb1-MuiFormLabel-root-MuiInputLabel-root"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink oxygen-text-field__label css-1lym8jl-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
for="id"
>
Expand All @@ -36,7 +36,7 @@ exports[`SignIn should match the snapshot 1`] = `
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root oxygen-text-field__input css-wb57ya-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl css-jyjldv-MuiInputBase-root-MuiOutlinedInput-root"
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl css-l6ws16-MuiInputBase-root-MuiOutlinedInput-root"
>
<input
aria-invalid="false"
Expand Down Expand Up @@ -69,7 +69,7 @@ exports[`SignIn should match the snapshot 1`] = `
class="oxygen-text-field"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink oxygen-text-field__label css-1vtovb1-MuiFormLabel-root-MuiInputLabel-root"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink oxygen-text-field__label css-1lym8jl-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
for="id"
>
Expand All @@ -79,7 +79,7 @@ exports[`SignIn should match the snapshot 1`] = `
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root oxygen-text-field__input css-wb57ya-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-jyjldv-MuiInputBase-root-MuiOutlinedInput-root"
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-l6ws16-MuiInputBase-root-MuiOutlinedInput-root"
>
<input
aria-invalid="false"
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ exports[`TextField should match the snapshot 1`] = `
class="oxygen-text-field"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink oxygen-text-field__label css-1vtovb1-MuiFormLabel-root-MuiInputLabel-root"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink oxygen-text-field__label css-1lym8jl-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
for="id"
/>
<div
class="MuiFormControl-root MuiTextField-root oxygen-text-field__input css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-kbru0a-MuiInputBase-root-MuiOutlinedInput-root"
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-kfyxoi-MuiInputBase-root-MuiOutlinedInput-root"
>
<input
aria-invalid="false"
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Typography/__tests__/__snapshots__/Typography.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`Typography should match the snapshot 1`] = `
<body>
<div>
<p
class="MuiTypography-root MuiTypography-body1 oxygen-typography css-o7dkqi-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 oxygen-typography css-1myvrax-MuiTypography-root"
>
Sample Text
</p>
Expand Down
34 changes: 29 additions & 5 deletions packages/react/src/theme/default-theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {experimental_extendTheme as extendTheme} from '@mui/material/styles';
import lightTokens from '@oxygen-ui/primitives/dist/design-tokens/web/oxygen/es/tokens';
import {RecursivePartial, Theme} from '../models';

export const DEFAULT_THEME_OPTIONS: RecursivePartial<Theme> = {
export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<Theme> => ({
colorSchemes: {
dark: {
palette: {
Expand Down Expand Up @@ -96,6 +96,20 @@ export const DEFAULT_THEME_OPTIONS: RecursivePartial<Theme> = {
},
},
},
MuiCard: {
styleOverrides: {
root: {
padding: '24px 40px 24px 24px',
},
},
},
MuiPaper: {
styleOverrides: {
elevation1: {
boxShadow: 'var(--oxygen-shadows-0)',
},
},
},
},
cssVarPrefix: 'oxygen',
customComponents: {
Expand All @@ -107,23 +121,33 @@ export const DEFAULT_THEME_OPTIONS: RecursivePartial<Theme> = {
},
},
},
shadows: ['0px 2px 20px 0px #1d20281a', ...baseTheme.shadows],
shape: {
// TODO: Is `Lg` the default?
borderRadius: lightTokens.OxygenOxygenBorderRadiusLg,
},
typography: {
body1: {
fontSize: '0.875rem',
fontWeight: 'normal',
color: '#8D91A3',
fontSize: '13px',
fontStyle: 'normal',
fontWeight: 400,
lineHeight: '20px',
},
button: {
textTransform: 'none',
},
// TODO: Need a token for this.
fontFamily: 'Gilmer',
subtitle2: {
color: '#222228',
fontSize: '0.875rem',
fontWeight: 'normal',
},
},
};
});

const defaultTheme: Theme = extendTheme(DEFAULT_THEME_OPTIONS as Theme);
export const baseTheme: Theme = extendTheme();
const defaultTheme: Theme = extendTheme(generateDefaultThemeOptions(baseTheme) as Theme);

export default defaultTheme;
4 changes: 2 additions & 2 deletions packages/react/src/theme/extend-theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@

import {CssVarsTheme, experimental_extendTheme as mui_extendTheme, Theme} from '@mui/material/styles';
import {deepmerge} from '@mui/utils';
import {DEFAULT_THEME_OPTIONS} from './default-theme';
import {generateDefaultThemeOptions, baseTheme} from './default-theme';

export default function extendTheme(options: any, ...args: any): Omit<Theme, 'palette'> & CssVarsTheme {
return mui_extendTheme(deepmerge(DEFAULT_THEME_OPTIONS as Theme, options), ...args);
return mui_extendTheme(deepmerge(generateDefaultThemeOptions(baseTheme) as Theme, options), ...args);
}

0 comments on commit bf108dc

Please sign in to comment.