[B2BP-742] - HeroChips new component (#391)

* ...

* modified hero

* commit changeset

* commit review changes

* commit update code

* Revert "commit update code"

This reverts commit 5eba147.

* commit code change

* Update sour-birds-begin.md

* commit code review

* commit code review

* commit code review

* commit code review

---------

Co-authored-by: salvatorediocaro <[email protected]>

.changeset/sour-birds-begin.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Implement new HeroChips component

apps/nextjs-website/react-components/components/HeroChips/HeroChips.helpers.tsx

@@ -0,0 +1,51 @@
+import { Stack, Chip } from '@mui/material';
+import { ChipProps } from '@react-components/types/HeroChips/HeroChips.types';
+
+export const ChipsBlock = ({
+  chips,
+  theme,
+}: {
+  chips: ReadonlyArray<ChipProps>;
+  theme: 'light' | 'dark';
+}) => {
+
+  return (
+    <Stack
+      direction='row'
+      spacing={1}
+      mt={2}
+      sx={{
+        width: '100%',
+        justifyContent: 'center',
+      }}
+    >
+      <Stack
+        direction='row'
+        spacing={1}
+        sx={{
+          maxWidth: '600px',
+          flexWrap: 'wrap',
+          rowGap: '8px',
+          justifyContent: 'center',
+        }}
+      >
+        {chips.map((chip, index) => (
+          <Chip
+            component='a'
+            key={index}
+            label={chip.label}
+            href={`#${chip.targetID}`}
+            sx={{
+              backgroundColor: theme === 'dark' ? '#0039CB' : '#FFFFFF',
+              color: theme === 'dark' ? '#ffffff' : '#000000',
+              '&:hover': {
+                backgroundColor: theme === 'dark' ? '#0049EB' : '#F5F5F5',
+              },
+              border: theme === 'light' ? '1px solid #D0D0D0' : 'none',
+            }}
+          />
+        ))}
+      </Stack>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import ContainerRC from '../common/ContainerRC';
+import { BackgroundColor, TextColor } from '../common/Common.helpers';
+import { HeroChipsProps } from '@react-components/types/HeroChips/HeroChips.types';
+import { ChipsBlock } from './HeroChips.helpers';
+
+const HeroChips = (props: HeroChipsProps) => {
+  const {
+    background,
+    theme = 'dark',
+    title,
+    subtitle,
+    chips,
+    centerText,
+  } = props;
+
+  const backgroundColor = BackgroundColor(theme);
+  const textColor = TextColor(theme);
+
+  const BackgroundImage = (
+    <Box
+      role='presentation'
+      sx={{
+        px: 4,
+        position: 'absolute',
+        inset: 0,
+        zIndex: -10,
+        height: '100%',
+        width: '100%',
+        objectFit: 'cover',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundImage: `url(${background ?? ''})`,
+      }}
+    />
+  );
+
+  return (
+    <ContainerRC
+      size='xl'
+      background={!background ? backgroundColor : BackgroundImage}
+      direction='row'
+      sx={{
+        display: 'flex',
+        flexDirection: { xs: 'column', lg: 'row' },
+        alignItems: centerText ? 'center' : 'flex-start',
+        justifyContent: 'space-between',
+        py: 4,
+      }}
+    >
+      <Box
+        sx={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: centerText ? 'center' : 'flex-start',
+        }}
+      >
+        <Typography
+          variant='h1'
+          color={textColor}
+          mb={2}
+          sx={{ fontSize: { xs: '2.25rem!important', md: '3.5rem!important' } }}
+          textAlign={centerText ? 'center' : 'left'}
+        >
+          {title}
+        </Typography>
+        {subtitle && (
+          <Typography
+            variant='body1'
+            color={textColor}
+            mb={2}
+            sx={{ fontSize: '1rem' }}
+            textAlign={centerText ? 'center' : 'left'}
+          >
+            {subtitle}
+          </Typography>
+        )}
+        {chips.length > 0 && <ChipsBlock chips={chips} theme={theme} />}
+      </Box>
+    </ContainerRC>
+  );
+};
+
+export default HeroChips;

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

@@ -16,6 +16,7 @@ import PreFooter from './PreFooter/PreFooter';
 import HeroCounter from './HeroCounter/HeroCounter';
 import MegaHeader from './MegaHeader/MegaHeader';
 import VideoImage from './VideoImage/VideoImage';
+import HeroChips from './HeroChips/HeroChips';
 
 export {
   Hero,
@@ -36,4 +37,5 @@ export {
   HeroCounter,
   MegaHeader,
   VideoImage,
+  HeroChips,
 };

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

@@ -17,7 +17,7 @@ export interface StoreButtonsProps {
 export interface HeroTextProps extends CommonProps {
   readonly title: string;
   readonly subtitle?: string | Generic;
-  readonly ctaButtons?: ReadonlyArray<CtaButtonProps>;  
+  readonly ctaButtons?: ReadonlyArray<CtaButtonProps>;
   readonly storeButtons?: StoreButtonsProps;
   readonly size?: 'medium' | 'big' | 'small';
-}
+}

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

@@ -0,0 +1,14 @@
+import { CommonProps, Generic } from "../common/Common.types";
+
+export interface HeroChipsProps extends CommonProps {
+  readonly background?: string | Generic;
+  readonly title: string;
+  readonly subtitle?: string | Generic;
+  readonly centerText: boolean;
+  readonly chips: ReadonlyArray<ChipProps>;
+}
+
+export interface ChipProps {
+  readonly label: string;
+  readonly targetID: string;
+}

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

@@ -16,6 +16,7 @@ import { PreFooterProps } from './PreFooter/PreFooter';
 import { HeroCounterProps } from './HeroCounter/HeroCounter.types';
 import { MegaHeaderProps } from './MegaHeader/MegaHeader.types';
 import { VideoImageProps } from './VideoImage/VideoImage.types';
+import { HeroChipsProps } from './HeroChips/HeroChips.types';
 
 export type {
   HeroProps,
@@ -36,4 +37,5 @@ export type {
   HeroCounterProps,
   MegaHeaderProps,
   VideoImageProps,
+  HeroChipsProps,
 };

apps/nextjs-website/src/app/layout.tsx

@@ -38,7 +38,7 @@ export default async function RootLayout({
     return (
       <ThemeProvider theme={theme}>
         <html lang='it'>
-          <body style={{ margin: 0 }}>
+          <body style={{ margin: 0, scrollBehavior: 'smooth' }}>
             {children}
             <Script
               src='/scripts/otnotice-1.0.min.js'

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

@@ -0,0 +1,23 @@
+'use client';
+import MarkdownRenderer from './MarkdownRenderer';
+import { HeroChips as HeroChipsRC } from '@react-components/components';
+import { HeroChipsProps } from '@react-components/types';
+import { HeroChipsSection } from '@/lib/fetch/types/PageSection';
+
+const makeHeroChipsProps = ({
+  subtitle,
+  background,
+  ...rest
+}: HeroChipsSection): HeroChipsProps => ({
+  ...rest,
+  ...(subtitle && { subtitle: MarkdownRenderer({ markdown: subtitle }) }),
+  ...(background.data && { background: background.data.attributes.url }),
+
+  // TODO: implement chips
+});
+
+const HeroChips = (props: HeroChipsSection) => (
+  <HeroChipsRC {...makeHeroChipsProps(props)} />
+);
+
+export default HeroChips;

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

@@ -12,6 +12,7 @@ import IFrameSection from '../IFrame';
 import Form from '../Form';
 import EditorialSwitch from '../EditorialSwitch';
 import VideoImage from '../VideoImage';
+import HeroChips from '../HeroChips';
 import { PageSection as PageSectionData } from '@/lib/fetch/types/PageSection';
 
 const PageSection = (props: PageSectionData) => {
@@ -43,6 +44,8 @@ const PageSection = (props: PageSectionData) => {
       return <EditorialSwitch {...props} />;
     case 'sections.video-image':
       return <VideoImage {...props} />;
+    case 'sections.hero-chips':
+      return <HeroChips {...props} />;
     default:
       return null;
   }

apps/nextjs-website/src/lib/fetch/types/PageSection.ts

@@ -254,6 +254,22 @@ const VideoImageSectionCodec = t.strict({
   video: t.union([VideoCodec, t.null]),
 });
 
+const ChipPropsCodec = t.strict({
+  label: t.string,
+  targetID: t.string,
+});
+
+const HeroChipsSectionCodec = t.strict({
+  __component: t.literal('sections.hero-chips'),
+  title: t.string,
+  subtitle: t.union([t.string, t.null]),
+  theme: t.union([t.literal('light'), t.literal('dark')]),
+  sectionID: t.union([t.string, t.null]),
+  background: StrapiImageSchema,
+  chips: t.array(ChipPropsCodec),
+  centerText: t.boolean,
+});
+
 export const PageSectionCodec = t.union([
   HeroSectionCodec,
   EditorialSectionCodec,
@@ -270,6 +286,7 @@ export const PageSectionCodec = t.union([
   HeroCounterSectionCodec,
   EditorialSwitchSectionCodec,
   VideoImageSectionCodec,
+  HeroChipsSectionCodec,
 ]);
 
 export type PageSection = t.TypeOf<typeof PageSectionCodec>;
@@ -290,3 +307,4 @@ export type EditorialSwitchSection = t.TypeOf<
   typeof EditorialSwitchSectionCodec
 >;
 export type VideoImageSection = t.TypeOf<typeof VideoImageSectionCodec>;
+export type HeroChipsSection = t.TypeOf<typeof HeroChipsSectionCodec>;

apps/nextjs-website/stories/Hero/dark.stories.tsx

@@ -147,4 +147,4 @@ DarkHeroSmallNoSubtitle.args = {
   ...defaultsDarkWithoutButtonsNoSubtitle,
   size: 'small',
   inverse: true,
-};
+};

apps/nextjs-website/stories/Hero/light.stories.tsx

@@ -147,4 +147,4 @@ LightHeroSmallNoSubtitle.args = {
   ...defaultsLightWithoutButtonsNoSubtitle,
   size: 'small',
   inverse: true,
-};
+};

apps/nextjs-website/stories/HeroChips/dark.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { HeroChipsTemplate, defaultsDark } from './herochipsCommons';
+import { HeroChips } from '@react-components/components';
+
+const meta: Meta<typeof HeroChips> = {
+  title: 'Components/HeroChips/Dark',
+  component: HeroChips,
+};
+export default meta;
+
+export const DarkHeroChipsNoSubtitleNoCentered: StoryFn<typeof HeroChips> = HeroChipsTemplate.bind({});
+DarkHeroChipsNoSubtitleNoCentered.args = {
+  ...defaultsDark,
+};
+
+export const DarkHeroChipsWithSubtitleNoCentered: StoryFn<typeof HeroChips> = HeroChipsTemplate.bind({});
+DarkHeroChipsWithSubtitleNoCentered.args = {
+  ...defaultsDark,
+  subtitle: `In questa pagina puoi consultare la lista in costante aggiornamento di tutti gli Enti nazionali e locali che sono saliti a bordo di IO, con il dettaglio dei rispettivi servizi già a disposizione dei cittadini.`
+};
+
+export const DarkHeroChipsNoSubtitleCentered: StoryFn<typeof HeroChips> = HeroChipsTemplate.bind({});
+DarkHeroChipsNoSubtitleCentered.args = {
+  ...defaultsDark,
+  centerText: true,
+};
+
+export const DarkHeroChipsWithSubtitleCentered: StoryFn<typeof HeroChips> = HeroChipsTemplate.bind({});
+DarkHeroChipsWithSubtitleCentered.args = {
+  ...defaultsDark,
+  subtitle: `In questa pagina puoi consultare la lista in costante aggiornamento di tutti gli Enti nazionali e locali che sono saliti a bordo di IO, con il dettaglio dei rispettivi servizi già a disposizione dei cittadini.`,
+  centerText: true,
+};

apps/nextjs-website/stories/HeroChips/herochipsCommons.tsx

@@ -0,0 +1,36 @@
+import { StoryFn } from '@storybook/react';
+import { HeroChips } from "@react-components/components";
+import { HeroChipsProps } from "@react-components/types";
+
+// Define a "Template" function that sets how args map to rendering
+export const HeroChipsTemplate: StoryFn<HeroChipsProps> = (args) => <HeroChips {...args} />;
+
+const title = 'Enti locali';
+const subtitle = `In questa pagina puoi consultare la lista in costante aggiornamento di tutti gli Enti nazionali e locali che sono saliti a bordo di IO, con il dettaglio dei rispettivi servizi già a disposizione dei cittadini.`;
+
+const createHeroChipsProps = (
+  theme: 'dark' | 'light',
+  withSubtitle: boolean
+): Partial<HeroChipsProps> => {
+  let props: Partial<HeroChipsProps> = {
+    theme,
+    title,
+    subtitle: withSubtitle ? subtitle : '',
+    background: theme === 'dark' ? 'https://notifichedigitali.pagopa.it/static/images/hero-enti-background.png' : '',
+    chips: [
+      { label: 'Notifiche', targetID: 'notifiche' },
+      { label: 'SEND', targetID: 'send' },
+      { label: 'Recapiti', targetID: 'recapiti' },
+      { label: 'Documenti e comunicazioni', targetID: 'documenti-e-comunicazioni' },
+      { label: 'Ricezione di una notifica', targetID: 'ricezione-di-una-notifica' },
+      { label: 'Perfezionamento', targetID: 'perfezionamento' },
+      { label: 'Annullamento', targetID: 'annullamento' },
+      { label: 'Accessibilità', targetID: 'accessibilita' },
+    ],
+  };
+
+  return props;
+};
+
+export const defaultsDark = createHeroChipsProps('dark', false);
+export const defaultsLight = createHeroChipsProps('light', false);