-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(PPDSC-2649): add patterns solutions section (#678)
* docs(PPDSC-2649): add patterns solutions section * docs(PPDSC-2649): snapshots and svgs * docs(PPDSC-2649): typos and ctas * docs(PPDSC-2649): update svgs * docs(PPDSC-2649): more info from routes --------- Co-authored-by: Marco Vanali <[email protected]>
- Loading branch information
Showing
17 changed files
with
2,292 additions
and
210 deletions.
There are no files selected for viewing
558 changes: 380 additions & 178 deletions
558
site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' | ||
| 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> | ||
| to discuss using NewsKit Account. | ||
| </Paragraph> | ||
| </ContentSecondary> | ||
| </ContentSection> | ||
| </ComponentPageCell> | ||
| </PatternPageTemplate> | ||
| ); | ||
|
|
||
| export default BestPractice; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| to discuss using NewsKit Help Hub. | ||
| </Paragraph> | ||
| </ContentSecondary> | ||
| </ContentSection> | ||
| </ComponentPageCell> | ||
| </PatternPageTemplate> | ||
| ); | ||
|
|
||
| export default BestPractice; |
Oops, something went wrong.