[B2BP-561] - Implementing 'StripeLink' EC inside B2BP (#267)

* Commit migrate StripeLink component

* Commit changeset

* commit review changes

* commit review changes

* commit review changes

* commit review changes

.changeset/chilled-zebras-judge.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Migrate StripeLink component from EC to B2BP

apps/nextjs-website/react-components/components/StripeLink/StripeLink.tsx

@@ -0,0 +1,58 @@
+import { Grid, Stack, Button } from '@mui/material';
+import ContainerRC from '../common/ContainerRC';
+import { EIcon } from '../common/EIcon';
+import { StripeLinkProps } from '../../types/StripeLink/StripeLink.types';
+import { Subtitle } from '../common/Common';
+import { BackgroundColor, ExtraBackgroundColor, TextAlternativeColor, TextColor } from '../common/Common.helpers';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+
+const StripeLink = ({ icon, subtitle, theme, buttonText }: StripeLinkProps) => {
+  const textAlternativeColor = TextAlternativeColor(theme);
+  const textColorWhiteOnly = TextColor('dark');
+  const backgroundColor = BackgroundColor(theme);
+  const extraBackgroundColor = ExtraBackgroundColor(theme);  
+
+  return (
+    <ContainerRC background={extraBackgroundColor} py={2}>
+      <Grid item>
+        <Stack
+          direction={{ md: 'row', xs: 'column' }}
+          justifyContent={{ md: 'flex-start' }}
+          spacing={3}
+          alignItems={{ md: 'center', xs: 'flex-start' }}
+        >
+          <EIcon
+            {...icon}
+            sx={{
+              display: { md: 'flex', xs: 'none' },
+              visibility: { md: 'visible', xs: 'hidden' },
+              color: textColorWhiteOnly,
+            }}
+          />
+          <Subtitle
+            variant='body2'
+            textColor={textColorWhiteOnly}
+            subtitle={subtitle}
+            textAlign='left'
+          />
+          {buttonText && (
+            <Button
+              variant="contained"
+              size="small"
+              sx={{
+                backgroundColor: backgroundColor,
+                color: textAlternativeColor,
+                ':hover': { backgroundColor: backgroundColor },
+              }}
+              endIcon={<ArrowForwardIcon color="inherit"></ArrowForwardIcon>}
+            >
+              {buttonText}
+            </Button>
+          )}
+        </Stack>
+      </Grid>
+    </ContainerRC>
+  );
+};
+
+export default StripeLink;

apps/nextjs-website/react-components/components/common/Common.helpers.ts

@@ -10,6 +10,13 @@ export const BackgroundColorAlternative = (theme: 'dark' | 'light') => {
   return theme === 'dark' ? palette.primary.dark : palette.background.default;
 };
 
+export const ExtraBackgroundColor = (theme: 'dark' | 'light') => {
+  const { palette } = useTheme();
+  return theme === 'dark'
+  ? palette.text.primary
+  : palette.primary.dark;
+};
+
 export const TextColor = (theme: 'dark' | 'light') => {
   const { palette } = useTheme();
   return theme === 'dark' ? palette.primary.contrastText : palette.text.primary;

apps/nextjs-website/react-components/components/index.ts

@@ -7,6 +7,7 @@ import Cards from './Cards/Cards';
 import Footer from './Footer/Footer';
 import EditorialSwitch from './Editorial-Switch/Editorial-Switch';
 import PreHeader from './PreHeader/PreHeader';
+import StripeLink from './StripeLink/StripeLink';
 
 export {
   Hero,
@@ -17,5 +18,6 @@ export {
   Cards,
   Footer,
   EditorialSwitch,
-  PreHeader
-};
+  PreHeader,
+  StripeLink,
+};

apps/nextjs-website/react-components/types/StripeLink/StripeLink.types.ts

@@ -0,0 +1,9 @@
+import { EIconProps } from "../../components/common/EIcon";
+import { Generic } from "../common/Common.types";
+
+export interface StripeLinkProps {
+  theme: 'dark' | 'light';
+  subtitle: Generic | string;
+  icon?: EIconProps;
+  buttonText?: string;
+}

apps/nextjs-website/react-components/types/index.ts

@@ -7,6 +7,7 @@ import { CardsProps } from './Cards/Cards.types';
 import { FooterProps } from './Footer/Footer.types';
 import { EditorialSwitchProps } from './Editorial-Switch/Editorial-Switch.types';
 import { PreHeaderProps } from './PreHeader/PreHeader.types';
+import { StripeLinkProps } from './StripeLink/StripeLink.types';
 
 export type {
   HeroProps,
@@ -17,5 +18,6 @@ export type {
   CardsProps,
   FooterProps,
   EditorialSwitchProps,
-  PreHeaderProps
-};
+  PreHeaderProps,
+  StripeLinkProps
+};

apps/nextjs-website/src/components/StripeLink.tsx

@@ -1,8 +1,7 @@
 'use client';
-import { StripeLink as StripeLinkEC } from '@pagopa/pagopa-editorial-components';
-import { StripeLinkProps } from '@pagopa/pagopa-editorial-components/dist/components/StripeLink';
-import { Stack } from '@mui/material';
 import MarkdownRenderer from './MarkdownRenderer';
+import { StripeLink as StripeLinkRC } from '@react-components/components';
+import { StripeLinkProps } from '@react-components/types';
 import { StripeLinkSection } from '@/lib/fetch/types/PageSection';
 
 const makeStripeLinkProps = ({
@@ -21,31 +20,8 @@ const makeStripeLinkProps = ({
   ...rest,
 });
 
-const StripeLink = (props: StripeLinkSection) => {
-  const color =
-    props.theme === 'dark' ? 'primary.contrastText' : 'primary.main';
-
-  return (
-    <Stack
-      sx={{
-        '.MuiSvgIcon-root': {
-          color,
-        },
-        '.MuiButton-root': {
-          fontWeight: 700,
-          fontSize: '1rem',
-          '.MuiSvgIcon-root': {
-            color,
-          },
-        },
-        '.MuiTypography-root': {
-          color,
-        },
-      }}
-    >
-      <StripeLinkEC {...makeStripeLinkProps(props)} />
-    </Stack>
-  );
-};
+const StripeLink = (props: StripeLinkSection) => (
+  <StripeLinkRC {...makeStripeLinkProps(props)} />
+);
 
 export default StripeLink;