docs(PPDSC-2649): add patterns solutions section

site/components/sidebar/sidebar-navigation.tsx

@@ -69,7 +69,7 @@ export const SiteMenuItem: React.FC<SiteMenuItemProps> = ({menuItemList}) => {
                 {title === 'Foundations' ||
                 title === 'Actions & Inputs' ||
                 title === 'Design' ||
-                title === 'Onboarding' ||
+                title === 'Solutions' ||
                 title === 'About' ? (
                   <Block spaceStack="space060" />
                 ) : (

site/pages/patterns/overview.tsx

@@ -17,16 +17,6 @@ import {
   ContentSection,
 } from '../../components/content-structure';
 
-const patternsRouteList: Item[] =
-  routes.filter(route => route.title === 'Patterns')[0].subNav || [];
-
-const patternsFormRouteList: Item[] =
-  patternsRouteList.filter(route => route.title === 'Forms')[0].subNav || [];
-
-const patternsOnboardingRouteList: Item[] =
-  patternsRouteList.filter(route => route.title === 'Onboarding')[0].subNav ||
-  [];
-
 const getPatternsCardList = (routeList: Item[]) =>
   routeList
     .filter(route => route.page && route?.illustration)
@@ -40,11 +30,6 @@ const getPatternsCardList = (routeList: Item[]) =>
       description,
     })) as MediaItem[];
 
-const patternsIndexRouteListCards = getPatternsCardList(patternsFormRouteList);
-const patternsIndexOnboardingRouteListCards = getPatternsCardList(
-  patternsOnboardingRouteList,
-);
-
 const pageDescription = `Design patterns provide a framework for solving a particular user problem in a consistent, considered way.`;
 
 const HeaderImage = () => (
@@ -72,22 +57,22 @@ const Overview = (layoutProps: LayoutProps) => (
 
         <Grid lgMargin="sizing000" xsRowGutter="sizing000">
           <ComponentPageCell>
-            <ContentSection sectionName="onboarding">
-              <ContentPrimary headline="Onboarding">
-                <MediaList
-                  cards={patternsIndexOnboardingRouteListCards}
-                  gridProps={{xsRowGutter: 'space050'}}
-                />
-              </ContentPrimary>
-            </ContentSection>
-            <ContentSection sectionName="forms">
-              <ContentPrimary headline="Forms">
-                <MediaList
-                  cards={patternsIndexRouteListCards}
-                  gridProps={{xsRowGutter: 'space050'}}
-                />
-              </ContentPrimary>
-            </ContentSection>
+            {(routes as Item[])
+              .find(({title}) => title === 'Patterns')!
+              .subNav!.slice(1)
+              .map(({title, description, subNav}) => (
+                <ContentSection sectionName={title as string}>
+                  <ContentPrimary
+                    headline={title as string}
+                    description={description}
+                  >
+                    <MediaList
+                      cards={getPatternsCardList(subNav || [])}
+                      gridProps={{xsRowGutter: 'space050'}}
+                    />
+                  </ContentPrimary>
+                </ContentSection>
+              ))}
           </ComponentPageCell>
         </Grid>
       </ThemeProvider>

site/pages/patterns/solutions/account.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import {LinkInline, Paragraph} from 'newskit*';
+import {LayoutProps} from '../../../components/layout';
+import {PatternPageTemplate} from '../../../templates/pattern-page-template/pattern-page-template';
+import {
+  ContentSection,
+  ContentPrimary,
+  ContentSecondary,
+} from '../../../components/content-structure';
+import {ComponentPageCell} from '../../../components/layout-cells';
+import {getIllustrationComponent} from '../../../components/illustrations/illustration-loader';
+import {MediaList} from '../../../components/media-list';
+
+const BestPractice = (layoutProps: LayoutProps) => (
+  <PatternPageTemplate
+    headTags={{
+      title: 'NewsKit Account',
+      description: 'Giving customers control of their accounts.',
+    }}
+    layoutProps={layoutProps}
+    pageIntroduction={{
+      type: 'Solutions',
+      name: 'NewsKit Account',
+      hero: {
+        illustration: 'patterns/solutions/account/01-hero',
+      },
+      introduction: `Giving customers control of their accounts.`,
+    }}
+  >
+    <ComponentPageCell>
+      <ContentSection sectionName="account solution">
+        <ContentPrimary
+          id="account-solution"
+          toc="Account Solution"
+          headline="Account Solution"
+          description={
+            <>
+              NewsKit Account is a full service, themable account solution that
+              allows customers to manage their personal details, subscriptions,
+              billing and preferences. It can be configured to provide the
+              different feature combinations that your customers need.
+              <br />
+              <br />
+              Enabling customers to self-serve improves retention and reduces
+              reliance on customer service agents. Account can collect data for
+              continuous improvement and optimisation.
+              <br />
+              <br />
+              Solutions make it faster to bring new products online. With
+              performance, security and accessibility built in, Solutions can
+              help your team improve time-to-market. Apply your brand using the
+              NewsKit theming system for consistency with your existing site and
+              choose feature combinations that fit your brands&apos;
+              requirements.
+            </>
+          }
+        />
+        <ContentSecondary headline="Features">
+          <MediaList
+            layout="1-span"
+            cardsLayout="horizontal"
+            cards={[
+              {
+                title: 'Personal details',
+                description: 'Update your profile, contact details and login.',
+                media: getIllustrationComponent(
+                  'patterns/solutions/account/02-profile',
+                ),
+              },
+              {
+                title: 'Subscriptions and billing',
+                description:
+                  'Manage your subscription and delivery details, including payment info and transactions.',
+                media: getIllustrationComponent(
+                  'patterns/solutions/account/03-subs-billing',
+                ),
+              },
+              {
+                title: 'Holiday stops',
+                description:
+                  'Pause your print delivery at any time by adding a Holiday Stop to your account.',
+                media: getIllustrationComponent(
+                  'patterns/solutions/account/04-holiday-stops',
+                ),
+              },
+              {
+                title: 'Delivery instructions',
+                description:
+                  'Add delivery instructions and specify where you would like your delivery left.',
+                media: getIllustrationComponent(
+                  'patterns/solutions/account/05-delivery',
+                ),
+              },
+              {
+                title: 'Newsletters and alerts',
+                description:
+                  'Manage your newsletters, notifications and contact preferences.',
+                media: getIllustrationComponent(
+                  'patterns/solutions/account/06-newsletters',
+                ),
+              },
+            ]}
+          />
+        </ContentSecondary>
+        <ContentSecondary>
+          <Paragraph overrides={{typographyPreset: 'editorialParagraph030'}}>
+            <LinkInline
+              external={false}
+              href="https://www.newskit.co.uk/about/contact-us/"
+            >
+              Contact the NewsKit team
+            </LinkInline>
+            &nbsp;to discuss using NewsKit Account.
+          </Paragraph>
+        </ContentSecondary>
+      </ContentSection>
+    </ComponentPageCell>
+  </PatternPageTemplate>
+);
+
+export default BestPractice;

site/pages/patterns/solutions/help-hub.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {LinkInline, Paragraph} from 'newskit*';
+import {LayoutProps} from '../../../components/layout';
+import {PatternPageTemplate} from '../../../templates/pattern-page-template/pattern-page-template';
+import {
+  ContentSection,
+  ContentPrimary,
+  ContentSecondary,
+} from '../../../components/content-structure';
+import {ComponentPageCell} from '../../../components/layout-cells';
+import {getIllustrationComponent} from '../../../components/illustrations/illustration-loader';
+import {MediaList} from '../../../components/media-list';
+
+const BestPractice = (layoutProps: LayoutProps) => (
+  <PatternPageTemplate
+    headTags={{
+      title: 'NewsKit Help Hub',
+      description: 'Connecting users with the right help.',
+    }}
+    layoutProps={layoutProps}
+    pageIntroduction={{
+      type: 'Solutions',
+      name: 'NewsKit Help Hub',
+      hero: {
+        illustration: 'patterns/solutions/help-hub/01-hero',
+      },
+      introduction: `Connecting users with the right help.`,
+    }}
+  >
+    <ComponentPageCell>
+      <ContentSection sectionName="help hub solution">
+        <ContentPrimary
+          id="help-hub-solution"
+          toc="Help Hub Solution"
+          headline="Help Hub Solution"
+          description={
+            <>
+              NewsKit Help Hub is a themable help solution that allows customers
+              to surface information through an intuitive search.
+              <br />
+              <br />
+              This Solution is built to reduce user churn and reliance on
+              customer service agents. A centralised search bar acts as front
+              line customer support, while Frequently Asked Questions are pinned
+              below. Our integration with Algolia’s search engine means related
+              results instantly appear as users type.
+            </>
+          }
+        />
+        <ContentSecondary headline="Features">
+          <MediaList
+            layout="1-span"
+            cardsLayout="horizontal"
+            cards={[
+              {
+                title: 'Most read articles',
+                description:
+                  'Display frequently read or recommended articles on the landing page.',
+                media: getIllustrationComponent(
+                  'patterns/solutions/help-hub/02-most-read',
+                ),
+              },
+              {
+                title: 'Search analytics',
+                description:
+                  'Optimise the user experience with tracking to find the most common search terms. Get user feedback on how useful customers find each article.',
+                media: getIllustrationComponent(
+                  'patterns/solutions/help-hub/03-search',
+                ),
+              },
+              {
+                title: 'Apply your branding',
+                description:
+                  'Use your existing NewsKit theme to align Help Hub to your brand.',
+                media: getIllustrationComponent(
+                  'patterns/solutions/help-hub/04-branding',
+                ),
+              },
+              {
+                title: 'Powered by Algolia search',
+                description:
+                  'Full-text, numerical, and faceted search using Algolia search-as-you-type.',
+                media: getIllustrationComponent(
+                  'patterns/solutions/help-hub/05-algolia',
+                ),
+              },
+            ]}
+          />
+        </ContentSecondary>
+        <ContentSecondary>
+          <Paragraph overrides={{typographyPreset: 'editorialParagraph030'}}>
+            <LinkInline
+              external={false}
+              href="https://www.newskit.co.uk/about/contact-us/"
+            >
+              Contact the NewsKit team
+            </LinkInline>
+            &nbsp;to discuss using NewsKit Help Hub.
+          </Paragraph>
+        </ContentSecondary>
+      </ContentSection>
+    </ComponentPageCell>
+  </PatternPageTemplate>
+);
+
+export default BestPractice;