add InfoCard component

danilo-leal · Sep 15, 2023 · efa2a82 · efa2a82
1 parent bf4d816
commit efa2a82
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 170 deletions.
diff --git a/docs/src/components/action/InfoCard.tsx b/docs/src/components/action/InfoCard.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Link from 'docs/src/modules/components/Link';
+
+interface InfoCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  link?: string;
+  linkable?: boolean;
+}
+
+export default function InfoCard({ icon, title, description, link, linkable }: InfoCardProps) {
+  return (
+    <Paper
+      component={linkable ? Link : 'div'}
+      href={link}
+      noLinkStyle={linkable}
+      variant="outlined"
+      sx={(theme) => ({
+        p: 3.5,
+        height: '100%',
+        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+        ...theme.applyDarkStyles({
+          bgcolor: 'primaryDark.900',
+          background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+          borderColor: 'primaryDark.700',
+        }),
+      })}
+    >
+      <Box
+        sx={(theme) => ({
+          width: 40,
+          height: 40,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderRadius: 1,
+          border: '1px solid',
+          borderColor: 'primary.200',
+          bgcolor: 'primary.50',
+          boxShadow:
+            '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
+          ...theme.applyDarkStyles({
+            borderColor: 'primary.400',
+            bgcolor: 'primary.900',
+            boxShadow:
+              '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
+          }),
+        })}
+      >
+        {icon}
+      </Box>
+      <Typography
+        fontWeight="bold"
+        component="h3"
+        color="text.primary"
+        variant="body2"
+        mt={2}
+        mb={0.5}
+      >
+        {title}
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        {description}
+      </Typography>
+    </Paper>
+  );
+}
diff --git a/docs/src/components/home/ValueProposition.tsx b/docs/src/components/home/ValueProposition.tsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
 import InvertColorsRoundedIcon from '@mui/icons-material/InvertColorsRounded';
@@ -10,6 +8,7 @@ import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded
 import GradientText from 'docs/src/components/typography/GradientText';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import InfoCard from 'docs/src/components/action/InfoCard';
 
 const content = [
   {
@@ -53,60 +52,7 @@ function ValueProposition() {
       <Grid container spacing={3}>
         {content.map(({ icon, title, description }) => (
           <Grid key={title} item xs={12} sm={3}>
-            <Paper
-              variant="outlined"
-              sx={(theme) => ({
-                p: 3,
-                height: '100%',
-                position: 'relative',
-                borderRadius: 1,
-                border: '1px solid',
-                borderColor: (theme.vars || theme).palette.grey[100],
-                background: (theme.vars || theme).palette.gradients.linearSubtle,
-                ...theme.applyDarkStyles({
-                  bgcolor: (theme.vars || theme).palette.primaryDark[900],
-                  borderColor: (theme.vars || theme).palette.primaryDark[700],
-                  background: (theme.vars || theme).palette.gradients.linearSubtle,
-                }),
-              })}
-            >
-              <Box
-                sx={(theme) => ({
-                  width: 40,
-                  height: 40,
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderRadius: 1,
-                  border: '1px solid',
-                  borderColor: (theme.vars || theme).palette.primary[200],
-                  bgcolor: (theme.vars || theme).palette.primary[50],
-                  boxShadow:
-                    '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
-                  ...theme.applyDarkStyles({
-                    borderColor: (theme.vars || theme).palette.primary[400],
-                    bgcolor: (theme.vars || theme).palette.primary[900],
-                    boxShadow:
-                      '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
-                  }),
-                })}
-              >
-                {icon}
-              </Box>
-              <Typography
-                fontWeight="bold"
-                component="h3"
-                variant="body2"
-                color="text.primary"
-                gutterBottom
-                mt={2}
-              >
-                {title}
-              </Typography>
-              <Typography variant="body2" color="text.secondary">
-                {description}
-              </Typography>
-            </Paper>
+            <InfoCard title={title} icon={icon} description={description} />
           </Grid>
         ))}
       </Grid>

diff --git a/docs/src/components/productBaseUI/BaseUISummary.tsx b/docs/src/components/productBaseUI/BaseUISummary.tsx
@@ -1,15 +1,14 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
 import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
 import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded';
 import PhishingRoundedIcon from '@mui/icons-material/PhishingRounded';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import GradientText from 'docs/src/components/typography/GradientText';
-import Link from 'docs/src/modules/components/Link';
+import InfoCard from 'docs/src/components/action/InfoCard';
 
 const content = [
   {
@@ -52,59 +51,7 @@ export default function BaseUISummary() {
         <Grid container spacing={3}>
           {content.map(({ icon, title, description, link }) => (
             <Grid key={title} item xs={12} md={4}>
-              <Paper
-                component={Link}
-                href={link}
-                noLinkStyle
-                variant="outlined"
-                sx={(theme) => ({
-                  p: 4,
-                  height: '100%',
-                  background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-                  ...theme.applyDarkStyles({
-                    bgcolor: 'primaryDark.900',
-                    background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-                    borderColor: 'primaryDark.700',
-                  }),
-                })}
-              >
-                <Box
-                  sx={(theme) => ({
-                    width: 40,
-                    height: 40,
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    borderRadius: 1,
-                    border: '1px solid',
-                    borderColor: 'primary.200',
-                    bgcolor: 'primary.50',
-                    boxShadow:
-                      '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
-                    ...theme.applyDarkStyles({
-                      borderColor: 'primary.400',
-                      bgcolor: 'primary.900',
-                      boxShadow:
-                        '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
-                    }),
-                  })}
-                >
-                  {icon}
-                </Box>
-                <Typography
-                  fontWeight="bold"
-                  component="h3"
-                  color="text.primary"
-                  variant="body2"
-                  mt={2}
-                  mb={0.5}
-                >
-                  {title}
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  {description}
-                </Typography>
-              </Paper>
+              <InfoCard link={link} linkable title={title} icon={icon} description={description} />
             </Grid>
           ))}
         </Grid>

diff --git a/docs/src/components/productDesignKit/DesignKitValues.tsx b/docs/src/components/productDesignKit/DesignKitValues.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
 import Palette from '@mui/icons-material/Palette';
 import LibraryBooks from '@mui/icons-material/LibraryBooks';
 import CodeRounded from '@mui/icons-material/CodeRounded';
 import GradientText from 'docs/src/components/typography/GradientText';
 import Section from 'docs/src/layouts/Section';
+import InfoCard from 'docs/src/components/action/InfoCard';
 
 const content = [
   {
@@ -43,61 +42,7 @@ function DesignKitValues() {
       <Grid container spacing={3}>
         {content.map(({ icon, title, description }) => (
           <Grid key={title} item xs={12} sm={6} md={4}>
-            <Paper
-              variant="outlined"
-              sx={(theme) => ({
-                p: 3,
-                height: '100%',
-                position: 'relative',
-                borderRadius: '12px',
-                border: '1px solid',
-                borderColor: 'grey.100',
-                background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-
-                ...theme.applyDarkStyles({
-                  bgcolor: 'primaryDark.900',
-                  borderColor: 'primaryDark.700',
-                  background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-                }),
-              })}
-            >
-              <Box
-                sx={(theme) => ({
-                  width: 40,
-                  height: 40,
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderRadius: 1,
-                  border: '1px solid',
-                  borderColor: 'primary.200',
-                  bgcolor: 'primary.50',
-                  boxShadow:
-                    '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
-                  ...theme.applyDarkStyles({
-                    borderColor: 'primary.400',
-                    bgcolor: 'primary.900',
-                    boxShadow:
-                      '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
-                  }),
-                })}
-              >
-                {icon}
-              </Box>
-              <Typography
-                fontWeight="bold"
-                component="h3"
-                color="text.primary"
-                variant="body2"
-                mt={2}
-                mb={0.5}
-              >
-                {title}
-              </Typography>
-              <Typography variant="body2" color="text.secondary" mb={2}>
-                {description}
-              </Typography>
-            </Paper>
+            <InfoCard title={title} icon={icon} description={description} />
           </Grid>
         ))}
       </Grid>

diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -1004,13 +1004,13 @@ export function getThemedComponents(): ThemeOptions {
                     (theme.vars || theme).palette.grey[50]
                   }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`,
                   '&:hover': {
-                    borderColor: (theme.vars || theme).palette.primary[300],
+                    borderColor: (theme.vars || theme).palette.primary[200],
                     boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`,
                   },
                 },
                 ':is(a&), :is(button&)': {
                   '&:hover': {
-                    borderColor: (theme.vars || theme).palette.primary[300],
+                    borderColor: (theme.vars || theme).palette.primary[200],
                     boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`,
                   },
                 },
@@ -1027,6 +1027,7 @@ export function getThemedComponents(): ThemeOptions {
                     (theme.vars || theme).palette.primaryDark[900]
                   }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
                   '&:hover': {
+                    borderColor: (theme.vars || theme).palette.primary[700],
                     boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`,
                   },
                 },