@newskit-render/standalone-components 1.8.0 → 1.9.0

package/README.md

@@ -200,7 +200,7 @@ You need to have Algolia credentials as enviromnent variables:
 
 2.1. Context
 
-This is the default context which all the pages use out of the box
+This is the default context for all the pages use out of the box
 
 ```
 export const baseContext: BaseContextOptions = {
@@ -319,7 +319,7 @@ export const baseContext: BaseContextOptions = {
 ```
 2.2 Properties of BaseContextOptions
 
-  1. baseUrl - relative url when the help hub landinpage lives
+  1. baseUrl - relative url when the help hub landing page lives
 
   2. seo: - Used in the Header component
 
@@ -419,29 +419,85 @@ export const baseContext: BaseContextOptions = {
 
 
 
-As said above, help hub consists of three pages and we will take a look on how to add each one of them individually. Standalone-components package exports page components and a provider function for each page.
+As said above, help hub consists of three pages and we will take a look on how to add each one of them individually. 
+
+Each page extend the above BaseContextOptions with their own properties:
+
+2.3 HelpHubLandingPageContextOptions
+
+ 1. articlesTabelInfo
+    - title: string
+    - titleOverrides
+      - typographyPreset: MQ
+      - stylePreset: MQ
+      - spaceStack: string
+      - as: h1 | h2 | h3 | h4 | h5 | h6
+  2. mostReadArticles: [
+    {
+      - title: string
+      - objectID: string
+    }
+  ]
+
+2.4 ResultsPageContextOptions
+
+  1. hits: [
+    {
+      - title: string
+      - objectID: string
+      - content: string
+    }
+  ]
+  2. introductionProps: 
+    - title: string
+    - titleOverrides
+      - typographyPreset: MQ
+      - stylePreset: MQ
+      - spaceStack: string
+      - as: h1 | h2 | h3 | h4 | h5 | h6
+    - description: string
+    - showDivider: boolean
+  3. stylePreset: MQ<string>
+  4. showDividerByBreakpoint: boolean
+
+2.5 ArticlePageContextOptions
+
+  1. introductionProps:
+    - titleOverrides
+      - typographyPreset: MQ
+      - stylePreset: MQ
+      - spaceStack: string
+      - as: h1 | h2 | h3 | h4 | h5 | h6
+  2. title: string
+  3. content: string
+
+Standalone-components package exports page components, page context, page context types (PageContextOptions) and a provider function for each page.
+
+2.6 Help-Hub Landing page. 
 
-2.3. Help-Hub Landing page. 
 As stated above, landing page will display the most read articles. For now these articles are hardcoded and need to be passed to the Landing page (see example below). These articles must be already imported in Algolia in order for them to work.
 
+This example shows how to set up the page and override the page context with your own values:
+
 ```typescript
 import React, { useContext } from 'react'
 import newrelic from 'newrelic'
 import {
+  AlgoliaCredentials,
   HelpHubLandingPage,
+  helpHubLandingPageContext,
+  HelpHubLandingPageContextOptions,
   helpHubLandingPageProvider,
 } from '@newskit-render/standalone-components'
 import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
 import { AppContext } from '../../context'
 import { addCacheHeaders } from '../../helpers/addCacheHeaders'
 
-const landingPageContext: Partial<LandingPageContextOptions> = {
+const landingPageContext: Partial<HelpHubLandingPageContextOptions> = {
+  ...helpHubLandingPageContext,
   header: {
     title: 'Your custom title',
   },
-  articlesTabelInfo: {
-    title: 'Yout custom table title',
-  },
   mostReadArticles: [
     {
       title: 'Sign-in with Google',
@@ -469,7 +525,7 @@ const landingPageContext: Partial<LandingPageContextOptions> = {
       title: 'Can I share my Times & Sunday Times iPad subscription access?',
       objectID: 'can-i-share-my-times-sunday-times-ipad-subscription-access',
     },
-]
+  ],
 }
 
 const LandingPage: React.FC<{
@@ -481,7 +537,7 @@ const LandingPage: React.FC<{
   return (
     <HelpHubLandingPage
       {...props}
-      context={{ mostReadArticles }}
+      context={landingPageContext}
       customTheme={theme}
       themeDropdownObject={themeDropdownObject}
     />
@@ -500,7 +556,7 @@ export const getServerSideProps = async (context) => {
 }
 ```
 
-2.4. Help-hub Search Results page.
+2.7 Help-hub Search Results page.
 
 example usage:
 
@@ -512,12 +568,15 @@ import {
   AlgoliaCredentials,
   Hit,
   helpHubResultsProvider,
+  helpHubResultsPageContext,
+  HelpHubResultsPageContextOptions,
 } from '@newskit-render/standalone-components'
 import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
 import { AppContext } from '../../context'
 import { addCacheHeaders } from '../../helpers/addCacheHeaders'
 
-const resultsPageContext: Partial<ResultsPageContextOptions> = {
+const resultsPageContext: Partial<HelpHubResultsPageContextOptions> = {
+  ...helpHubResultsPageContext,
   header: {
     title: 'Search results custom title',
     description: 'Your search for "##QUERY##" returned ##COUNT## results',
@@ -543,6 +602,7 @@ const ResultsPage: React.FC<{
     <HelpHubResultsPage
       {...props}
       customTheme={theme}
+      context={resultsPageContext}
       themeDropdownObject={themeDropdownObject}
     />
   )
@@ -560,7 +620,7 @@ export const getServerSideProps = async (context) => {
 }
 ```
 
-2.5. Help-hub Help Article page. Article page uses Next.js router to get the article parameter in order to fetch the article. The parameter is called title. That means that your path in Next routing system should look like this:
+2.8 Help-hub Help Article page. Article page uses Next.js router to get the article parameter in order to fetch the article. The parameter is called title. That means that your path in Next routing system should look like this:
 
 `help-hub/article/[title]/index.tsx`
 
@@ -570,13 +630,28 @@ Example use:
 import React, { useContext } from 'react'
 import newrelic from 'newrelic'
 import {
+  AlgoliaCredentials,
   HelpHubArticlePage,
   helpHubArticleProvider,
+  helpHubArticlePageContext,
+  HelpHubArticlePageContextOptions,
 } from '@newskit-render/standalone-components'
 import { createThemeDropdownObject } from '../../../../helpers/createThemeDropdownObject'
 import { AppContext } from '../../../../context'
 import { addCacheHeaders } from '../../../../helpers/addCacheHeaders'
 
+const articlePageContext: Partial<HelpHubArticlePageContextOptions> = {
+  ...helpHubArticlePageContext,
+  introductionProps: {
+    titleOverrides: {
+      typographyPreset: { xs: 'utilityHeading040', sm: 'utilityHeading050' },
+      stylePreset: 'inkContrast',
+      spaceStack: 'space040',
+      as: 'h1',
+    },
+  },
+}
+
 const ArticlePage: React.FC<{
   credentials: AlgoliaCredentials
   title: string
@@ -589,6 +664,7 @@ const ArticlePage: React.FC<{
     <HelpHubArticlePage
       {...props}
       customTheme={theme}
+      context={articlePageContext}
       themeDropdownObject={themeDropdownObject}
     />
   )

package/dist/cjs/help-hub/index.d.ts

@@ -2,4 +2,5 @@ export * from './pages';
 export * from './provider';
 export * from './types';
 export { PagesNameMap } from './context';
+export type { LandingPageContextOptions as HelpHubLandingPageContextOptions, ArticlePageContextOptions as HelpHubArticlePageContextOptions, ResultsPageContextOptions as HelpHubResultsPageContextOptions, } from './context';
 export type { AlgoliaCredentials } from './types';

package/dist/cjs/help-hub/pages/index.d.ts

@@ -1,4 +1,4 @@
-import ArticlePage from './ArticlePage';
-import LandingPage from './LandingPage';
-import ResultsPage from './ResultsPage';
-export { ArticlePage as HelpHubArticlePage, LandingPage as HelpHubLandingPage, ResultsPage as HelpHubResultsPage, };
+import ArticlePage, { articlePageContext } from './ArticlePage';
+import LandingPage, { landingPageContext } from './LandingPage';
+import ResultsPage, { resultsPageContext } from './ResultsPage';
+export { ArticlePage as HelpHubArticlePage, articlePageContext as helpHubArticlePageContext, LandingPage as HelpHubLandingPage, landingPageContext as helpHubLandingPageContext, ResultsPage as HelpHubResultsPage, resultsPageContext as helpHubResultsPageContext, };

package/dist/cjs/help-hub/pages/index.js

@@ -1,13 +1,36 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HelpHubResultsPage = exports.HelpHubLandingPage = exports.HelpHubArticlePage = void 0;
-var ArticlePage_1 = __importDefault(require("./ArticlePage"));
+exports.helpHubResultsPageContext = exports.HelpHubResultsPage = exports.helpHubLandingPageContext = exports.HelpHubLandingPage = exports.helpHubArticlePageContext = exports.HelpHubArticlePage = void 0;
+var ArticlePage_1 = __importStar(require("./ArticlePage"));
 exports.HelpHubArticlePage = ArticlePage_1.default;
-var LandingPage_1 = __importDefault(require("./LandingPage"));
+Object.defineProperty(exports, "helpHubArticlePageContext", { enumerable: true, get: function () { return ArticlePage_1.articlePageContext; } });
+var LandingPage_1 = __importStar(require("./LandingPage"));
 exports.HelpHubLandingPage = LandingPage_1.default;
-var ResultsPage_1 = __importDefault(require("./ResultsPage"));
+Object.defineProperty(exports, "helpHubLandingPageContext", { enumerable: true, get: function () { return LandingPage_1.landingPageContext; } });
+var ResultsPage_1 = __importStar(require("./ResultsPage"));
 exports.HelpHubResultsPage = ResultsPage_1.default;
+Object.defineProperty(exports, "helpHubResultsPageContext", { enumerable: true, get: function () { return ResultsPage_1.resultsPageContext; } });
 //# sourceMappingURL=index.js.map

package/dist/cjs/help-hub/pages/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/help-hub/pages/index.ts"],"names":[],"mappings":";;;;;;AAAA,8DAAuC;AAKtB,6BALV,qBAAW,CAKiB;AAJnC,8DAAuC;AAKtB,6BALV,qBAAW,CAKiB;AAJnC,8DAAuC;AAKtB,6BALV,qBAAW,CAKiB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/help-hub/pages/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2DAA+D;AAK9C,6BALV,qBAAW,CAKiB;AACX,0GANF,gCAAkB,OAMS;AALjD,2DAA+D;AAM9C,6BANV,qBAAW,CAMiB;AACX,0GAPF,gCAAkB,OAOS;AANjD,2DAA+D;AAO9C,6BAPV,qBAAW,CAOiB;AACX,0GARF,gCAAkB,OAQS"}

package/dist/esm/help-hub/index.d.ts

@@ -2,4 +2,5 @@ export * from './pages';
 export * from './provider';
 export * from './types';
 export { PagesNameMap } from './context';
+export type { LandingPageContextOptions as HelpHubLandingPageContextOptions, ArticlePageContextOptions as HelpHubArticlePageContextOptions, ResultsPageContextOptions as HelpHubResultsPageContextOptions, } from './context';
 export type { AlgoliaCredentials } from './types';

package/dist/esm/help-hub/pages/index.d.ts

@@ -1,4 +1,4 @@
-import ArticlePage from './ArticlePage';
-import LandingPage from './LandingPage';
-import ResultsPage from './ResultsPage';
-export { ArticlePage as HelpHubArticlePage, LandingPage as HelpHubLandingPage, ResultsPage as HelpHubResultsPage, };
+import ArticlePage, { articlePageContext } from './ArticlePage';
+import LandingPage, { landingPageContext } from './LandingPage';
+import ResultsPage, { resultsPageContext } from './ResultsPage';
+export { ArticlePage as HelpHubArticlePage, articlePageContext as helpHubArticlePageContext, LandingPage as HelpHubLandingPage, landingPageContext as helpHubLandingPageContext, ResultsPage as HelpHubResultsPage, resultsPageContext as helpHubResultsPageContext, };

package/dist/esm/help-hub/pages/index.js

@@ -1,5 +1,5 @@
-import ArticlePage from './ArticlePage';
-import LandingPage from './LandingPage';
-import ResultsPage from './ResultsPage';
-export { ArticlePage as HelpHubArticlePage, LandingPage as HelpHubLandingPage, ResultsPage as HelpHubResultsPage, };
+import ArticlePage, { articlePageContext } from './ArticlePage';
+import LandingPage, { landingPageContext } from './LandingPage';
+import ResultsPage, { resultsPageContext } from './ResultsPage';
+export { ArticlePage as HelpHubArticlePage, articlePageContext as helpHubArticlePageContext, LandingPage as HelpHubLandingPage, landingPageContext as helpHubLandingPageContext, ResultsPage as HelpHubResultsPage, resultsPageContext as helpHubResultsPageContext, };
 //# sourceMappingURL=index.js.map

package/dist/esm/help-hub/pages/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/help-hub/pages/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,OAAO,EACL,WAAW,IAAI,kBAAkB,EACjC,WAAW,IAAI,kBAAkB,EACjC,WAAW,IAAI,kBAAkB,GAClC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/help-hub/pages/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,EAAE,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAC/D,OAAO,WAAW,EAAE,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAC/D,OAAO,WAAW,EAAE,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE/D,OAAO,EACL,WAAW,IAAI,kBAAkB,EACjC,kBAAkB,IAAI,yBAAyB,EAC/C,WAAW,IAAI,kBAAkB,EACjC,kBAAkB,IAAI,yBAAyB,EAC/C,WAAW,IAAI,kBAAkB,EACjC,kBAAkB,IAAI,yBAAyB,GAChD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/standalone-components",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Newskit Render Standalone Components",
   "author": "",
   "license": "UNLICENSED",