add more option to align property

src/components/surfaces/Card/CardActions/CardActionsStyles.ts

@@ -1,20 +1,27 @@
 import { Theme } from '@mui/material'
 import MuiCardActions from '@mui/material/CardActions'
 import { styled } from '@mui/material/styles'
-import { includes } from 'ramda'
+import { T, always, cond, equals, includes } from 'ramda'
 import { ActionAlign } from '../types'
 
 type StyledProps = { theme: Theme; filled: boolean; align: ActionAlign }
 
+const contentAlignment = cond([
+  [equals('left'), always('flex-start')],
+  [equals('right'), always('flex-end')],
+  [equals('center'), always('center')],
+  [T, always('flex-start')]
+])
+
 const CardActions = styled(MuiCardActions, {
   shouldForwardProp: prop => !includes(prop, ['align', 'filled'])
-})(({ theme, filled, align = 'left' }: Partial<StyledProps>) => ({
+})(({ theme, filled, align }: Partial<StyledProps>) => ({
   ...(filled && {
     backgroundColor: theme?.palette.grey[200],
     minHeight: '48px',
     padding: theme?.spacing(2, 3)
   }),
-  justifyContent: align === 'left' ? 'flex-start' : 'flex-end'
+  justifyContent: contentAlignment(align)
 }))
 
 export default CardActions

src/components/surfaces/Card/types.ts

@@ -13,7 +13,7 @@ export type CardVariant = 'elevation' | 'outlined'
 
 export type CardColor = Exclude<Color, 'default' | 'white' | 'transparent'>
 
-export type ActionAlign = 'left' | 'right'
+export type ActionAlign = 'left' | 'right' | 'center'
 
 export type CardMediaProps = MuiCardMediaProps & {
   /**

src/stories/surfaces/Card/BasicCardsPreview.tsx

@@ -52,7 +52,7 @@ const BasicCardsPreview = () => {
         </Card>
       </Grid>
       <Grid item xs={10}>
-        <Card footer={<LearnMoreButton />}>
+        <Card footer={<LearnMoreButton />} footerProps={{ align: 'center' }}>
           <Grid container spacing={2}>
             <Grid item xs={8}>
               <Typography gutterBottom variant="h5">