From 597dcc0d1c666d445c945193957e541c2e83c7a4 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 15 Jun 2020 14:28:06 -0400 Subject: [PATCH] feat: pagination app component --- core/config/README.md | 37 +++++---- core/specification/README.md | 82 ++++++++++++------- core/specification/src/configuration.ts | 6 +- core/store/README.md | 3 +- integrations/gatsby-theme-stories/README.md | 19 +++-- ui/app-components/README.md | 16 +++- .../src/Pagination/Pagination.stories.tsx | 38 +++++++++ .../src/Pagination/Pagination.tsx | 55 +++++++++++++ ui/app-components/src/Pagination/index.ts | 1 + ui/app-components/src/index.ts | 1 + ui/app/README.md | 28 ++++++- ui/components/src/ThemeContext/theme.ts | 43 ++++++++++ 12 files changed, 266 insertions(+), 63 deletions(-) create mode 100644 ui/app-components/src/Pagination/Pagination.stories.tsx create mode 100644 ui/app-components/src/Pagination/Pagination.tsx create mode 100644 ui/app-components/src/Pagination/index.ts diff --git a/core/config/README.md b/core/config/README.md index baa16f164..29dfb94ce 100644 --- a/core/config/README.md +++ b/core/config/README.md @@ -10,8 +10,8 @@ - [getConfigurationArg](#getconfigurationarg) - [loadConfiguration](#loadconfiguration) - [BuildConfiguration](#buildconfiguration) - - [WebpackCOnfig](#webpackconfig) - [PageType](#pagetype) + - [WebpackConfig](#webpackconfig) - [PageConfiguration](#pageconfiguration) - [WebpackConfigFn](#webpackconfigfn) @@ -114,7 +114,7 @@ _defined in [@component-controls/config/src/index.ts](https://github.com/ccontro global configuration used at build time stored in a file named main.js/main.ts -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L46)_ +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L45)_ @@ -122,16 +122,11 @@ _defined in [@component-controls/specification/src/configuration.ts](https://git | Name | Type | Description | | -------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| `finalWebpack` | [WebpackCOnfig](#webpackconfig) | | +| `categories` | [PageType](#pagetype)\[] | page types that are considred as categories fields as well | +| `finalWebpack` | [WebpackConfig](#webpackconfig) | | | `pages` | Record<[PageType](#pagetype), Pick<[PageConfiguration](#pageconfiguration), 'basePath'>> | base url path for API documentation pages. Default is "docs/" | | `stories` | string\[] | wild card search string for the stories internally using \`glob\` for the search: https://www.npmjs.com/package/glob example: "./stories/ | -| `webpack` | [WebpackCOnfig](#webpackconfig) | custom webpack fonfigurations setup. One or the other will be used | - -## WebpackCOnfig - -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L40)_ - -[WebpackConfiguration](#webpackconfiguration) \| [WebpackConfigFn](#webpackconfigfn) +| `webpack` | [WebpackConfig](#webpackconfig) | custom webpack fonfigurations setup. One or the other will be used | ## PageType @@ -139,6 +134,12 @@ _defined in [@component-controls/specification/src/configuration.ts](https://git 'story' | 'blog' | 'page' | 'tags' | 'author' +## WebpackConfig + +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L39)_ + +[WebpackConfiguration](#webpackconfiguration) \| [WebpackConfigFn](#webpackconfigfn) + ## PageConfiguration _defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L6)_ @@ -147,17 +148,17 @@ _defined in [@component-controls/specification/src/configuration.ts](https://git ### properties -| Name | Type | Description | -| ------------- | ------- | ------------------------------------------------------------------------------------------------------- | -| `basePath` | string | base url path for the page | -| `fullPage` | boolean | whether to take a fullpage theme option | -| `hasHomePage` | boolean | if true, will create a home page with a top-level menu by default, only story and blogs have home pages | -| `label` | string | label - used for menu labels | -| `sidebars` | boolean | whether to add navigation sidebars to the page | +| Name | Type | Description | +| ---------- | ------- | ---------------------------------------------- | +| `basePath` | string | base url path for the page | +| `fullPage` | boolean | whether to take a fullpage theme option | +| `label` | string | label - used for menu labels | +| `sidebars` | boolean | whether to add navigation sidebars to the page | +| `topMenu` | boolean | whether to add to the top navigation menu | ## WebpackConfigFn -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L36)_ +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L35)_ **function** (`config`\*: [WebpackConfiguration](#webpackconfiguration), `options`: any): [WebpackConfiguration](#webpackconfiguration); diff --git a/core/specification/README.md b/core/specification/README.md index b091ee46a..df786b43b 100644 --- a/core/specification/README.md +++ b/core/specification/README.md @@ -56,20 +56,22 @@ - [StoryRenderFn](#storyrenderfn) - [BuildConfiguration](#buildconfiguration) - [PageConfiguration](#pageconfiguration) - - [RunConfiguration](#runconfiguration) + - [RunOnlyConfiguration](#runonlyconfiguration) - [PageType](#pagetype) - [PagesConfiguration](#pagesconfiguration) - - [WebpackCOnfig](#webpackconfig) + - [RunConfiguration](#runconfiguration) + - [WebpackConfig](#webpackconfig) - [WebpackConfigFn](#webpackconfigfn) - [defaultBuildConfig](#defaultbuildconfig) - [defaultRunConfig](#defaultrunconfig) - [StoryRenderFn](#storyrenderfn-1) - [PageType](#pagetype-1) + - [RunConfiguration](#runconfiguration-1) - [StoryArguments](#storyarguments-1) - [ComponentControl](#componentcontrol-1) - [TypeValue](#typevalue-1) - [PackageDependency](#packagedependency-1) - - [WebpackCOnfig](#webpackconfig-1) + - [WebpackConfig](#webpackconfig-1) - [PagesConfiguration](#pagesconfiguration-1) - [WebpackConfigFn](#webpackconfigfn-1) - [PageType](#pagetype-2) @@ -917,7 +919,7 @@ _defined in [@component-controls/specification/src/utility.ts](https://github.co global configuration used at build time stored in a file named main.js/main.ts -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L46)_ +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L45)_ @@ -925,10 +927,11 @@ _defined in [@component-controls/specification/src/configuration.ts](https://git | Name | Type | Description | | -------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| `finalWebpack` | [WebpackCOnfig](#webpackconfig) | | +| `categories` | [PageType](#pagetype)\[] | page types that are considred as categories fields as well | +| `finalWebpack` | [WebpackConfig](#webpackconfig) | | | `pages` | Record<[PageType](#pagetype), Pick<[PageConfiguration](#pageconfiguration), 'basePath'>> | base url path for API documentation pages. Default is "docs/" | | `stories` | string\[] | wild card search string for the stories internally using \`glob\` for the search: https://www.npmjs.com/package/glob example: "./stories/ | -| `webpack` | [WebpackCOnfig](#webpackconfig) | custom webpack fonfigurations setup. One or the other will be used | +| `webpack` | [WebpackConfig](#webpackconfig) | custom webpack fonfigurations setup. One or the other will be used | ## PageConfiguration @@ -938,20 +941,20 @@ _defined in [@component-controls/specification/src/configuration.ts](https://git ### properties -| Name | Type | Description | -| ------------- | ------- | ------------------------------------------------------------------------------------------------------- | -| `basePath` | string | base url path for the page | -| `fullPage` | boolean | whether to take a fullpage theme option | -| `hasHomePage` | boolean | if true, will create a home page with a top-level menu by default, only story and blogs have home pages | -| `label` | string | label - used for menu labels | -| `sidebars` | boolean | whether to add navigation sidebars to the page | +| Name | Type | Description | +| ---------- | ------- | ---------------------------------------------- | +| `basePath` | string | base url path for the page | +| `fullPage` | boolean | whether to take a fullpage theme option | +| `label` | string | label - used for menu labels | +| `sidebars` | boolean | whether to add navigation sidebars to the page | +| `topMenu` | boolean | whether to add to the top navigation menu | -## RunConfiguration +## RunOnlyConfiguration global configuration used at build time stored in a file named main.js/main.ts -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L69)_ +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L72)_ @@ -980,7 +983,7 @@ _defined in [@component-controls/specification/src/configuration.ts](https://git ## PagesConfiguration -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L34)_ +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L33)_ Record< @@ -992,15 +995,26 @@ Record< > -## WebpackCOnfig +## RunConfiguration + +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L133)_ + +### properties + +| Name | Type | Description | +| ---------------------- | ----------------------------------------------------------- | ----------- | +| `RunOnlyConfiguration` | [RunOnlyConfiguration](#runonlyconfiguration) | | +| `Omit` | Omit<[BuildConfiguration](#buildconfiguration), 'pages'> | | -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L40)_ +## WebpackConfig + +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L39)_ [WebpackConfiguration](#webpackconfiguration) \| [WebpackConfigFn](#webpackconfigfn) ## WebpackConfigFn -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L36)_ +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L35)_ **function** (`config`\*: [WebpackConfiguration](#webpackconfiguration), `options`: any): [WebpackConfiguration](#webpackconfiguration); @@ -1014,19 +1028,20 @@ _defined in [@component-controls/specification/src/configuration.ts](https://git ## defaultBuildConfig -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L163)_ +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L169)_ ### properties -| Name | Type | Description | -| -------- | ------ | ----------- | -| `pages*` | object | | +| Name | Type | Description | +| ------------- | --------------------- | ----------- | +| `categories*` | 'tags' \| 'author'\[] | | +| `pages*` | object | | ## defaultRunConfig -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L130)_ +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L136)_ @@ -1065,6 +1080,17 @@ _defined in [@component-controls/specification/src/configuration.ts](https://git 'story' | 'blog' | 'page' | 'tags' | 'author' +## RunConfiguration + +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L133)_ + +### properties + +| Name | Type | Description | +| ---------------------- | ----------------------------------------------------------- | ----------- | +| `RunOnlyConfiguration` | [RunOnlyConfiguration](#runonlyconfiguration) | | +| `Omit` | Omit<[BuildConfiguration](#buildconfiguration), 'pages'> | | + ## StoryArguments list of story arguments. Each argument can be a deconstructed argument of itself @@ -1100,15 +1126,15 @@ _defined in [@component-controls/specification/src/utility.ts](https://github.co string -## WebpackCOnfig +## WebpackConfig -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L40)_ +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L39)_ [WebpackConfiguration](#webpackconfiguration) \| [WebpackConfigFn](#webpackconfigfn) ## PagesConfiguration -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L34)_ +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L33)_ Record< @@ -1122,7 +1148,7 @@ Record< ## WebpackConfigFn -_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L36)_ +_defined in [@component-controls/specification/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/configuration.ts#L35)_ **function** (`config`\*: [WebpackConfiguration](#webpackconfiguration), `options`: any): [WebpackConfiguration](#webpackconfiguration); diff --git a/core/specification/src/configuration.ts b/core/specification/src/configuration.ts index ba30666d3..028a7c66e 100644 --- a/core/specification/src/configuration.ts +++ b/core/specification/src/configuration.ts @@ -36,7 +36,7 @@ type WebpackConfigFn = ( config: WebpackConfiguration, options?: any, ) => WebpackConfiguration; -type WebpackCOnfig = WebpackConfiguration | WebpackConfigFn; +type WebpackConfig = WebpackConfiguration | WebpackConfigFn; /** * global configuration used at build time @@ -61,8 +61,8 @@ export interface BuildConfiguration { /** * custom webpack fonfigurations setup. One or the other will be used */ - webpack?: WebpackCOnfig; - finalWebpack?: WebpackCOnfig; + webpack?: WebpackConfig; + finalWebpack?: WebpackConfig; } /** diff --git a/core/store/README.md b/core/store/README.md index d2770712f..4a01d8210 100644 --- a/core/store/README.md +++ b/core/store/README.md @@ -39,11 +39,10 @@ _defined in [@component-controls/store/src/Store/Store.ts](https://github.com/cc | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | `constructor*` | **function** constructor | create a store with options | | `config*` | **function** config | | -| `firstDoc*` | **function** firstDoc | | -| `firstStory*` | **function** firstStory | | | `addObserver*` | **function** addObserver(`observer`\*: [StoreObserver](#storeobserver)): number; | add observer callback function | | `getBlogs*` | **function** getBlogs(): [Pages](#pages); | | | `getDocs*` | **function** getDocs(): [Pages](#pages); | returns all the documentation files | +| `getFirstDocument*` | **function** getFirstDocument(`pageType`\*: [PageType](#pagetype)): string \| undefined; | | | `getPageList*` | **function** getPageList(`type`\*: [PageType](#pagetype)): [Pages](#pages); | | | `getPagePath*` | **function** getPagePath(`pageType`\*: [PageType](#pagetype) \| undefined, `name`\*: string): string; | | | `getPagesByCategory*` | **function** getPagesByCategory(`category`\*: string, `value`: any): [Pages](#pages); | | diff --git a/integrations/gatsby-theme-stories/README.md b/integrations/gatsby-theme-stories/README.md index b51fab4f3..8ad22dbfe 100644 --- a/integrations/gatsby-theme-stories/README.md +++ b/integrations/gatsby-theme-stories/README.md @@ -86,9 +86,10 @@ _Layout [source code](https:/github.com/ccontrols/component-controls/tree/master ### properties -| Name | Type | Description | -| ------- | -------- | ----------- | -| `docId` | _string_ | | +| Name | Type | Description | +| ------- | ---------- | ----------- | +| `docId` | _string_ | | +| `type` | _PageType_ | | ## pages @@ -100,9 +101,9 @@ _CategoryList [source code](https:/github.com/ccontrols/component-controls/tree/ ### properties -| Name | Type | Description | -| -------------- | --------------------- | ----------- | -| `pathContext*` | _{ type: PageType; }_ | | +| Name | Type | Description | +| -------------- | ---------------------------------- | ----------- | +| `pathContext*` | _{ type: PageType; doc: string; }_ | | ## CategoryPage @@ -110,9 +111,9 @@ _CategoryPage [source code](https:/github.com/ccontrols/component-controls/tree/ ### properties -| Name | Type | Description | -| -------------- | --------------------------------------- | ----------- | -| `pathContext*` | _{ type: PageType; category: string; }_ | | +| Name | Type | Description | +| -------------- | ---------------------------------------------------- | ----------- | +| `pathContext*` | _{ type: PageType; category: string; doc: string; }_ | | ## DocPage diff --git a/ui/app-components/README.md b/ui/app-components/README.md index 21edfc022..a394c94d8 100644 --- a/ui/app-components/README.md +++ b/ui/app-components/README.md @@ -8,6 +8,7 @@ - [Link](#inslinkins) - [LinkContextProvider](#inslinkcontextproviderins) - [Navmenu](#insnavmenuins) + - [Pagination](#inspaginationins) - [Sidebar](#inssidebarins) - [SidebarContextProvider](#inssidebarcontextproviderins) - [SkiLinksItem](#insskilinksitemins) @@ -98,6 +99,19 @@ _Navmenu [source code](https:/github.com/ccontrols/component-controls/tree/maste | `onSelect` | _(item?: MenuItem) => void_ | Function that will be called when the user selects a menu item | | `search` | _string_ | If specified, will filter the items by the search terms | +## Pagination + +A pagination component, navigate previous and next page + +_Pagination [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app-components/src/Pagination/Pagination.tsx)_ + +### properties + +| Name | Type | Description | +| ------ | ---------------- | ------------------------------- | +| `prev` | _PaginationPage_ | link and title to previous page | +| `next` | _PaginationPage_ | link and title to next page | + ## Sidebar Collapsible side bar component @@ -109,8 +123,6 @@ _Sidebar [source code](https:/github.com/ccontrols/component-controls/tree/maste | Name | Type | Description | | ------------- | --------- | ---------------------------------------------------- | | `title` | _any_ | Title string or any react node | -| `width` | _number_ | The width of the side bar in pixels | -| `minWidth` | _number_ | min width for sidebar | | `collapsible` | _boolean_ | Whether the sidebar can be collapsed | | `children` | _any_ | children content elements to be displayed in Sidebar | diff --git a/ui/app-components/src/Pagination/Pagination.stories.tsx b/ui/app-components/src/Pagination/Pagination.stories.tsx new file mode 100644 index 000000000..57fad4869 --- /dev/null +++ b/ui/app-components/src/Pagination/Pagination.stories.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Pagination } from '.'; + +export default { + title: 'App components/Pagination', + component: Pagination, +}; + +export const overview = () => ( + +); + +export const onlyPrev = () => ( + +); + +export const onlyNext = () => ( + +); diff --git a/ui/app-components/src/Pagination/Pagination.tsx b/ui/app-components/src/Pagination/Pagination.tsx new file mode 100644 index 000000000..6417ff425 --- /dev/null +++ b/ui/app-components/src/Pagination/Pagination.tsx @@ -0,0 +1,55 @@ +/** @jsx jsx */ +import { FC } from 'react'; +import { jsx, Box, Text } from 'theme-ui'; +import Octicon, { ArrowLeft, ArrowRight } from '@primer/octicons-react'; + +import { Link } from '../Link'; + +export interface PaginationPage { + title: string; + link: string; +} +export interface PaginationProps { + /** + * link and title to previous page + */ + prev?: PaginationPage; + + /** + * link and title to next page + */ + next?: PaginationPage; +} +/** + * A pagination component, navigate previous and next page + */ +export const Pagination: FC = ({ prev, next }) => ( + + + {prev && ( + + + Previous + + + {prev.title} + + + + )} + + + {next && ( + + + Next + + {next.title} + + + + + )} + + +); diff --git a/ui/app-components/src/Pagination/index.ts b/ui/app-components/src/Pagination/index.ts new file mode 100644 index 000000000..e016c96b7 --- /dev/null +++ b/ui/app-components/src/Pagination/index.ts @@ -0,0 +1 @@ +export * from './Pagination'; diff --git a/ui/app-components/src/index.ts b/ui/app-components/src/index.ts index 1e895c9e7..e2598b88c 100644 --- a/ui/app-components/src/index.ts +++ b/ui/app-components/src/index.ts @@ -3,5 +3,6 @@ export * from './Header'; export * from './Keyboard'; export * from './Link'; export * from './Navmenu'; +export * from './Pagination'; export * from './Sidebar'; export * from './SkipLinks'; diff --git a/ui/app/README.md b/ui/app/README.md index 0847251cb..10bf2cabd 100644 --- a/ui/app/README.md +++ b/ui/app/README.md @@ -19,7 +19,9 @@ - [SEO](#insseoins) - [SideContext](#inssidecontextins) - [Sidebar](#inssidebarins) + - [SidebarsMDXPage](#inssidebarsmdxpageins) - [SidebarsPage](#inssidebarspageins) + - [SidebarsStoryPage](#inssidebarsstorypageins) - [TagsList](#instagslistins) # Overview @@ -60,6 +62,7 @@ _AppContext [source code](https:/github.com/ccontrols/component-controls/tree/ma | Name | Type | Description | | ------------ | -------------- | ----------- | +| `type` | _PageType_ | | | `docId` | _string_ | | | `store` | _LoadingStore_ | | | `linkClass*` | _any_ | | @@ -239,10 +242,20 @@ _Sidebar [source code](https:/github.com/ccontrols/component-controls/tree/maste | `title` | _ReactNode_ | title element | | `type` | _PageType_ | page type | -## SidebarsPage +## SidebarsMDXPage document page - rendering with sidebars and tabs for multiple document views +_SidebarsMDXPage [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/SidebarsPage/SidebarsMDXPage.tsx)_ + +### properties + +| Name | Type | Description | +| ------- | ---------- | ----------- | +| `type*` | _PageType_ | page type | + +## SidebarsPage + _SidebarsPage [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/SidebarsPage/SidebarsPage.tsx)_ ### properties @@ -252,6 +265,19 @@ _SidebarsPage [source code](https:/github.com/ccontrols/component-controls/tree/ | `pagesFn` | _(viewMode: string) => PageConfig\[]_ | custom pages | | `type*` | _PageType_ | page type | +## SidebarsStoryPage + +document page - rendering with sidebars and tabs for multiple document views + +_SidebarsStoryPage [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/SidebarsPage/SidebarsStoryPage.tsx)_ + +### properties + +| Name | Type | Description | +| --------- | ------------------------------------- | ------------ | +| `pagesFn` | _(viewMode: string) => PageConfig\[]_ | custom pages | +| `type*` | _PageType_ | page type | + ## TagsList row of tags with link to their page diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts index 0695339bf..5b3550df0 100644 --- a/ui/components/src/ThemeContext/theme.ts +++ b/ui/components/src/ThemeContext/theme.ts @@ -398,6 +398,49 @@ export const theme: Theme = { ml: 2, }, }, + pagination: { + container: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + p: 2, + }, + pagecontainer: {}, + link: { + textDecoration: 'none', + }, + prev: { + display: 'flex', + flexDirection: 'column', + py: 2, + }, + next: { + display: 'flex', + alignItems: 'flex-end', + flexDirection: 'column', + py: 2, + }, + + label: { + fontSize: 1, + color: 'fadedText', + pb: 2, + }, + linktitle: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + fontSize: 3, + color: 'primary', + fontWeight: 'bold', + }, + pagetitle: { + px: 3, + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + maxWidth: '300px', + }, + }, sidebar: { default: { overflowX: 'hidden',