Merge pull request #1281 from Rajesh-Nagarajan-11/migrate-styled-card

Migrate StyledCard to Sistent

Author: leecalcote

src/custom/DashboardWidgets/GettingStartedWidget/ActionButtonCard.tsx

@@ -147,7 +147,7 @@ const ActionButtonCard = ({
             <CustomComponentWrapper>{customComponent}</CustomComponentWrapper>
             {actionButton && (
               <CardActions>
-                <Button disabled={disabled} variant="contained" href={href} onClick={onClick}>
+                <Button disabled={disabled} size="large" variant="contained" href={href} onClick={onClick}>
                   {btnTitle}
                 </Button>
               </CardActions>
@@ -193,7 +193,7 @@ const ActionButtonCard = ({
           <CustomComponentWrapper>{customComponent}</CustomComponentWrapper>
           {actionButton && (
             <CardActions>
-              <Button disabled={disabled} variant="contained" href={href} onClick={onClick}>
+              <Button disabled={disabled} size="large" variant="contained" href={href} onClick={onClick}>
                 {showProgress ? (percentage === 100 ? 'Revisit' : btnTitle) : btnTitle}
               </Button>
             </CardActions>

src/custom/DashboardWidgets/RecentDesignWidget.tsx

@@ -246,7 +246,7 @@ const DesignCard: React.FC<DesignCardProps> = ({
                 variant="contained"
                 href={href || undefined}
                 onClick={onClick || undefined}
-                size="small"
+                size="large"
               >
                 {btnTitle}
               </Button>

src/custom/DashboardWidgets/WorkspaceActivityWidget.tsx

@@ -170,7 +170,7 @@ const WorkspaceActivityCard: React.FC<WorkspaceActivityCardProps> = ({
         </EmptyStateTypography>
       )}
       <CardActions>
-        <Button disabled={false} variant="contained" href={workspacePagePath} size="small">
+        <Button disabled={false} variant="contained" href={workspacePagePath} size="large">
           All Workspaces
         </Button>
       </CardActions>

src/custom/StyledCard/StyledCard.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { Box, Button, Card, CardActions, CardContent, Typography } from '../../base';
+
+export interface StyledCardProps {
+  title: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  sx?: SxProps<Theme>;
+  btntitle?: string;
+  onclick?: () => void;
+  disabled?: boolean;
+}
+
+function StyledCard({
+  title,
+  icon,
+  children,
+  sx = {},
+  btntitle,
+  onclick,
+  disabled = false
+}: StyledCardProps): JSX.Element {
+  return (
+    <Card sx={{ height: '100%', ...sx }}>
+      <CardContent>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between'
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              mb: 1.5
+            }}
+          >
+            {icon}
+            <Typography variant="h6" fontWeight="700" component="div" sx={{ mx: 1 }}>
+              {title}
+            </Typography>
+          </Box>
+          {btntitle && (
+            <CardActions>
+              <Button variant="contained" size='large' onClick={onclick} disabled={disabled}>
+                {btntitle}
+              </Button>
+            </CardActions>
+          )}
+        </div>
+
+        {children}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default StyledCard;

src/custom/StyledCard/index.tsx

@@ -0,0 +1,3 @@
+import StyledCard from './StyledCard';
+
+export { StyledCard };

src/custom/StyledCard/style.tsx

@@ -0,0 +1,67 @@
+import { styled } from '@mui/material';
+import { Link, ListItem } from '../../base';
+
+export const backgroundImg = styled('div')<{ backgroundImage?: string }>(
+  ({ backgroundImage }) => ({
+    backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',
+    backgroundPosition: 'right bottom',
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat'
+  })
+);
+
+export const CustomCode = styled('code')(() => ({
+  backgroundColor: '#212121',
+  color: '#fff',
+  padding: '0.2rem 0.4rem',
+  borderRadius: '0.2rem'
+}));
+
+export const List = styled(ListItem)<{ iconSrc?: string }>(({ iconSrc }) => ({
+  listStyleImage: iconSrc ? `url(${iconSrc})` : 'none',
+  display: 'flex',
+  alignItems: 'flex-start'
+}));
+
+export const CustomLink = styled('a')(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  textDecoration: 'none',
+  '&:visited': {
+    textDecoration: 'none'
+  },
+  '&:hover': {
+    textDecoration: 'underline'
+  },
+  fontWeight: 'bold'
+}));
+
+export const MUILink = styled(Link)(() => ({
+  color: '#455a64',
+  textDecoration: 'none',
+  '&:visited': {
+    textDecoration: 'none'
+  },
+  '&:hover': {
+    textDecoration: 'none',
+    cursor: 'pointer'
+  },
+  fontWeight: '600'
+}));
+
+export const CustomLinkDiv = styled('div')(() => ({
+  display: 'block',
+  width: '10rem',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+}));
+
+export const CustomDisabledLink = styled('a')(() => ({
+  textDecoration: 'none',
+  color: '#455a64',
+  '&:visited': {
+    textDecoration: 'none'
+  },
+  opacity: '0.5',
+  cursor: 'not-allowed'
+}));

src/custom/index.tsx

@@ -44,6 +44,7 @@ import ResponsiveDataTable, {
   ResponsiveDataTableProps
 } from './ResponsiveDataTable';
 import SearchBar, { SearchBarProps } from './SearchBar';
+import { StyledCardProps } from './StyledCard/StyledCard';
 import { TeamTable, TeamTableConfiguration } from './TeamTable';
 import { TooltipIcon } from './TooltipIconButton';
 import { TransferList } from './TransferModal/TransferList';
@@ -66,6 +67,7 @@ export {
   PerformersSectionButton
 } from './PerformersSection';
 export { SetupPreReq } from './SetupPrerequisite';
+export { StyledCard } from './StyledCard';
 export { StyledChapter } from './StyledChapter';
 export { StyledSearchBar } from './StyledSearchBar';
 export { CustomTextField } from './StyledTextField';
@@ -155,6 +157,7 @@ export type {
   IPopperListener,
   ResponsiveDataTableProps,
   SearchBarProps,
+  StyledCardProps,
   TransferListProps,
   UniversalFilterProps
 };