@redocly/theme 0.1.30 → 0.1.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -141,7 +141,7 @@ function JsonComponent(_a) {
141
141
  exports.Json = (0, react_1.memo)(JsonComponent);
142
142
  exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(function () { return ({
143
143
  'data-component-name': 'JsonViewer/JsonViewer',
144
- }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .redoc-json code {\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n padding: inherit;\n border: none;\n }\n\n contain: content;\n overflow-x: auto;\n position: relative;\n padding: 10px;\n border-radius: var(--global-border-radius);\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n white-space: var(--code-wrap, pre);\n\n &.line-numbers {\n padding: 20px 20px 20px 3em;\n\n *[data-line]:not(.collapsed *[data-line]) {\n &:before {\n content: attr(data-line);\n position: absolute;\n left: 0;\n min-width: 2em;\n text-align: right;\n pointer-events: none;\n user-select: none;\n padding: 0 0.5em;\n font-size: 13px;\n }\n }\n }\n\n .callback-function {\n color: gray;\n }\n\n .collapsed > .collapser:after {\n content: '+';\n cursor: pointer;\n }\n\n .ellipsis:after {\n content: ' \u2026 ';\n }\n\n .collapsible {\n padding-left: 2ch;\n display: inline-block;\n }\n\n .hoverable {\n padding: 1px 2px;\n display: inline-block;\n }\n\n .collapsed {\n display: inline-flex;\n }\n\n .hovered {\n background-color: rgba(235, 238, 249, 1);\n }\n\n .collapser {\n background-color: transparent;\n border: 0;\n padding: 0;\n color: #fff;\n width: 0;\n height: 15px;\n cursor: default;\n user-select: none;\n -webkit-user-select: none;\n font-family: var(--code-font-family);\n font-size: var(--code-font-size);\n\n &:after {\n content: '-';\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 15px;\n height: 100%;\n padding: 2px 5px 2px 2px;\n transform: translateX(-100%);\n\n &:focus {\n outline: #fff dotted 1px;\n }\n }\n }\n\n .selected {\n outline-width: 1px;\n outline-style: dotted;\n }\n\n .collapsed > .collapsible {\n display: none;\n }\n\n .ellipsis {\n display: none;\n }\n\n .collapsed > .ellipsis {\n display: inline;\n }\n"], ["\n .redoc-json code {\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n padding: inherit;\n border: none;\n }\n\n contain: content;\n overflow-x: auto;\n position: relative;\n padding: 10px;\n border-radius: var(--global-border-radius);\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n white-space: var(--code-wrap, pre);\n\n &.line-numbers {\n padding: 20px 20px 20px 3em;\n\n *[data-line]:not(.collapsed *[data-line]) {\n &:before {\n content: attr(data-line);\n position: absolute;\n left: 0;\n min-width: 2em;\n text-align: right;\n pointer-events: none;\n user-select: none;\n padding: 0 0.5em;\n font-size: 13px;\n }\n }\n }\n\n .callback-function {\n color: gray;\n }\n\n .collapsed > .collapser:after {\n content: '+';\n cursor: pointer;\n }\n\n .ellipsis:after {\n content: ' \u2026 ';\n }\n\n .collapsible {\n padding-left: 2ch;\n display: inline-block;\n }\n\n .hoverable {\n padding: 1px 2px;\n display: inline-block;\n }\n\n .collapsed {\n display: inline-flex;\n }\n\n .hovered {\n background-color: rgba(235, 238, 249, 1);\n }\n\n .collapser {\n background-color: transparent;\n border: 0;\n padding: 0;\n color: #fff;\n width: 0;\n height: 15px;\n cursor: default;\n user-select: none;\n -webkit-user-select: none;\n font-family: var(--code-font-family);\n font-size: var(--code-font-size);\n\n &:after {\n content: '-';\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 15px;\n height: 100%;\n padding: 2px 5px 2px 2px;\n transform: translateX(-100%);\n\n &:focus {\n outline: #fff dotted 1px;\n }\n }\n }\n\n .selected {\n outline-width: 1px;\n outline-style: dotted;\n }\n\n .collapsed > .collapsible {\n display: none;\n }\n\n .ellipsis {\n display: none;\n }\n\n .collapsed > .ellipsis {\n display: inline;\n }\n"])));
144
+ }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .redoc-json code {\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n padding: inherit;\n border: none;\n }\n\n contain: content;\n overflow-x: auto;\n position: relative;\n padding: 10px;\n border-radius: var(--global-border-radius);\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n white-space: var(--code-wrap, pre);\n\n &.line-numbers {\n padding: 20px 20px 20px 3em;\n\n *[data-line]:not(.collapsed *[data-line]) {\n &:before {\n content: attr(data-line);\n position: absolute;\n left: 0;\n min-width: 2em;\n text-align: right;\n pointer-events: none;\n user-select: none;\n padding: 0 0.5em;\n font-size: 13px;\n }\n }\n }\n\n .callback-function {\n color: gray;\n }\n\n .ellipsis:after {\n content: ' \u2026 ';\n }\n\n .collapsible {\n padding-left: 2ch;\n display: inline-block;\n }\n\n .hoverable {\n padding: 1px 2px;\n display: inline-block;\n }\n\n .collapsed {\n white-space: nowrap;\n\n & > .collapser:after {\n content: '+';\n }\n }\n\n .hovered {\n background-color: rgba(235, 238, 249, 1);\n }\n\n .collapser {\n --size: 15px;\n --margin-right: 3px;\n\n display: inline-block;\n background-color: transparent;\n border: 0;\n padding: 1px;\n color: #fff;\n width: var(--size);\n height: var(--size);\n margin-left: calc((var(--size) + var(--margin-right)) * -1);\n margin-right: var(--margin-right);\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n font-family: var(--code-font-family);\n font-size: var(--code-font-size);\n\n &:after {\n content: '-';\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n }\n\n &:focus {\n outline: #fff dotted 1px;\n }\n }\n\n .selected {\n outline-width: 1px;\n outline-style: dotted;\n }\n\n .collapsed > .collapsible {\n display: none;\n }\n\n .ellipsis {\n display: none;\n }\n\n .collapsed > .ellipsis {\n display: inline;\n }\n"], ["\n .redoc-json code {\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n padding: inherit;\n border: none;\n }\n\n contain: content;\n overflow-x: auto;\n position: relative;\n padding: 10px;\n border-radius: var(--global-border-radius);\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n white-space: var(--code-wrap, pre);\n\n &.line-numbers {\n padding: 20px 20px 20px 3em;\n\n *[data-line]:not(.collapsed *[data-line]) {\n &:before {\n content: attr(data-line);\n position: absolute;\n left: 0;\n min-width: 2em;\n text-align: right;\n pointer-events: none;\n user-select: none;\n padding: 0 0.5em;\n font-size: 13px;\n }\n }\n }\n\n .callback-function {\n color: gray;\n }\n\n .ellipsis:after {\n content: ' \u2026 ';\n }\n\n .collapsible {\n padding-left: 2ch;\n display: inline-block;\n }\n\n .hoverable {\n padding: 1px 2px;\n display: inline-block;\n }\n\n .collapsed {\n white-space: nowrap;\n\n & > .collapser:after {\n content: '+';\n }\n }\n\n .hovered {\n background-color: rgba(235, 238, 249, 1);\n }\n\n .collapser {\n --size: 15px;\n --margin-right: 3px;\n\n display: inline-block;\n background-color: transparent;\n border: 0;\n padding: 1px;\n color: #fff;\n width: var(--size);\n height: var(--size);\n margin-left: calc((var(--size) + var(--margin-right)) * -1);\n margin-right: var(--margin-right);\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n font-family: var(--code-font-family);\n font-size: var(--code-font-size);\n\n &:after {\n content: '-';\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n }\n\n &:focus {\n outline: #fff dotted 1px;\n }\n }\n\n .selected {\n outline-width: 1px;\n outline-style: dotted;\n }\n\n .collapsed > .collapsible {\n display: none;\n }\n\n .ellipsis {\n display: none;\n }\n\n .collapsed > .ellipsis {\n display: inline;\n }\n"])));
145
145
  exports.JsonViewerWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex: 1;\n\n &:hover > ", " {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n flex: 1;\n\n &:hover > ", " {\n opacity: 1;\n }\n"])), SamplesPanelControls_1.SampleControls);
146
146
  exports.StyledCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n\n code {\n font-family: var(--code-font-family);\n font-size: 14px;\n line-height: 18px;\n }\n"], ["\n flex: 1;\n\n code {\n font-family: var(--code-font-family);\n font-size: 14px;\n line-height: 18px;\n }\n"])));
147
147
  var templateObject_1, templateObject_2, templateObject_3;
@@ -14,13 +14,13 @@ var hooks_1 = require("../mocks/hooks");
14
14
  var constants_1 = require("../mocks/constants");
15
15
  var Button_1 = require("../Button/Button");
16
16
  function NextPageLink() {
17
- var _a;
17
+ var _a, _b;
18
18
  var nextPage = ((0, hooks_1.useSidebarSiblingsData)() || {}).nextPage;
19
19
  var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
20
- if (!nextPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide)) {
20
+ if (!nextPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide) || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
21
21
  return react_1.default.createElement("div", null, "\u00A0");
22
22
  }
23
- var label = ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _a === void 0 ? void 0 : _a.label) || "Next to ".concat(nextPage.label);
23
+ var label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _b === void 0 ? void 0 : _b.label) || "Next to ".concat(nextPage.label);
24
24
  return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, label));
25
25
  }
26
26
  exports.NextPageLink = NextPageLink;
@@ -1,2 +1,2 @@
1
1
  /// <reference types="react" />
2
- export declare function PageNavigation(): JSX.Element;
2
+ export declare function PageNavigation(): JSX.Element | null;
@@ -12,11 +12,17 @@ var react_1 = __importDefault(require("react"));
12
12
  var styled_components_1 = __importDefault(require("styled-components"));
13
13
  var PreviousPageLink_1 = require("../PageNavigation/PreviousPageLink");
14
14
  var NextPageLink_1 = require("../PageNavigation/NextPageLink");
15
+ var hooks_1 = require("../mocks/hooks");
16
+ var constants_1 = require("../mocks/constants");
15
17
  function PageNavigation() {
18
+ var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
19
+ if (navigation === null || navigation === void 0 ? void 0 : navigation.hide) {
20
+ return null;
21
+ }
16
22
  return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation" },
17
23
  react_1.default.createElement(PreviousPageLink_1.PreviousPageLink, null),
18
24
  react_1.default.createElement(NextPageLink_1.NextPageLink, null)));
19
25
  }
20
26
  exports.PageNavigation = PageNavigation;
21
- var PageNavigationWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin: 25px 0px;\n"], ["\n display: flex;\n justify-content: space-between;\n margin: 25px 0px;\n"])));
27
+ var PageNavigationWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin: 25px 0;\n"], ["\n display: flex;\n justify-content: space-between;\n margin: 25px 0;\n"])));
22
28
  var templateObject_1;
@@ -14,13 +14,13 @@ var hooks_1 = require("../mocks/hooks");
14
14
  var constants_1 = require("../mocks/constants");
15
15
  var Button_1 = require("../Button/Button");
16
16
  function PreviousPageLink() {
17
- var _a;
17
+ var _a, _b;
18
18
  var prevPage = ((0, hooks_1.useSidebarSiblingsData)() || {}).prevPage;
19
19
  var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
20
- if (!prevPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide)) {
20
+ if (!prevPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide) || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
21
21
  return react_1.default.createElement("div", null, "\u00A0");
22
22
  }
23
- var label = ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _a === void 0 ? void 0 : _a.label) || "Back to ".concat(prevPage.label);
23
+ var label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousPageLink) === null || _b === void 0 ? void 0 : _b.label) || "Back to ".concat(prevPage.label);
24
24
  return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, label));
25
25
  }
26
26
  exports.PreviousPageLink = PreviousPageLink;
@@ -7,9 +7,9 @@ interface PageLink {
7
7
  link: string;
8
8
  type: 'link';
9
9
  }
10
- export declare function useThemeSettings(name: string): RawTheme['settings'];
10
+ export declare function useThemeSettings(_: string): RawTheme['settings'];
11
11
  export declare function useSidebarSiblingsData(): {
12
- nextPage: PageLink;
13
- prevPage: PageLink;
12
+ nextPage: PageLink | null;
13
+ prevPage: PageLink | null;
14
14
  };
15
15
  export {};
@@ -1,15 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useSidebarSiblingsData = exports.useThemeSettings = void 0;
4
- function useThemeSettings(name) {
4
+ function useThemeSettings(_) {
5
5
  return {
6
- name: name,
7
- settings: {
8
- toc: { header: 'header', hide: false },
9
- navigation: {
10
- nextPageLink: { label: 'next page' },
11
- previousPageLink: { label: 'prev page' },
12
- },
6
+ toc: { header: 'header', hide: false },
7
+ navigation: {
8
+ nextPageLink: { label: 'next page theme settings label' },
9
+ previousPageLink: { label: 'prev page theme settings label' },
13
10
  },
14
11
  };
15
12
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.1.30",
3
+ "version": "0.1.31",
4
4
  "description": "Shared UI components",
5
5
  "author": "team@redocly.com",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/settings.yaml CHANGED
@@ -7,6 +7,10 @@ toc:
7
7
  label: On this page
8
8
  navigation:
9
9
  hide: false
10
+ nextPageLink:
11
+ hide: false
12
+ prevPageLink:
13
+ hide: false
10
14
  navbar:
11
15
  hide: false
12
16
  sidebar:
@@ -154,11 +154,6 @@ export const JsonViewer = styled(Json).attrs(() => ({
154
154
  color: gray;
155
155
  }
156
156
 
157
- .collapsed > .collapser:after {
158
- content: '+';
159
- cursor: pointer;
160
- }
161
-
162
157
  .ellipsis:after {
163
158
  content: ' … ';
164
159
  }
@@ -174,7 +169,11 @@ export const JsonViewer = styled(Json).attrs(() => ({
174
169
  }
175
170
 
176
171
  .collapsed {
177
- display: inline-flex;
172
+ white-space: nowrap;
173
+
174
+ & > .collapser:after {
175
+ content: '+';
176
+ }
178
177
  }
179
178
 
180
179
  .hovered {
@@ -182,13 +181,19 @@ export const JsonViewer = styled(Json).attrs(() => ({
182
181
  }
183
182
 
184
183
  .collapser {
184
+ --size: 15px;
185
+ --margin-right: 3px;
186
+
187
+ display: inline-block;
185
188
  background-color: transparent;
186
189
  border: 0;
187
- padding: 0;
190
+ padding: 1px;
188
191
  color: #fff;
189
- width: 0;
190
- height: 15px;
191
- cursor: default;
192
+ width: var(--size);
193
+ height: var(--size);
194
+ margin-left: calc((var(--size) + var(--margin-right)) * -1);
195
+ margin-right: var(--margin-right);
196
+ cursor: pointer;
192
197
  user-select: none;
193
198
  -webkit-user-select: none;
194
199
  font-family: var(--code-font-family);
@@ -196,18 +201,15 @@ export const JsonViewer = styled(Json).attrs(() => ({
196
201
 
197
202
  &:after {
198
203
  content: '-';
199
- cursor: pointer;
200
204
  display: flex;
201
205
  align-items: center;
202
206
  justify-content: center;
203
- width: 15px;
204
207
  height: 100%;
205
- padding: 2px 5px 2px 2px;
206
- transform: translateX(-100%);
208
+ width: 100%;
209
+ }
207
210
 
208
- &:focus {
209
- outline: #fff dotted 1px;
210
- }
211
+ &:focus {
212
+ outline: #fff dotted 1px;
211
213
  }
212
214
  }
213
215
 
@@ -14,7 +14,7 @@ export function NextPageLink(): JSX.Element {
14
14
  const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
15
15
  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
16
16
 
17
- if (!nextPage || navigation?.hide) {
17
+ if (!nextPage || navigation?.hide || navigation?.nextPageLink?.hide) {
18
18
  return <div>&nbsp;</div>;
19
19
  }
20
20
 
@@ -3,8 +3,16 @@ import styled from 'styled-components';
3
3
 
4
4
  import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
5
5
  import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
6
+ import { useThemeSettings } from '@portal/hooks';
7
+ import { DEFAULT_THEME_NAME } from '@portal/constants';
8
+
9
+ export function PageNavigation(): JSX.Element | null {
10
+ const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
11
+
12
+ if (navigation?.hide) {
13
+ return null;
14
+ }
6
15
 
7
- export function PageNavigation(): JSX.Element {
8
16
  return (
9
17
  <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
10
18
  <PreviousPageLink />
@@ -16,5 +24,5 @@ export function PageNavigation(): JSX.Element {
16
24
  const PageNavigationWrapper = styled.div`
17
25
  display: flex;
18
26
  justify-content: space-between;
19
- margin: 25px 0px;
27
+ margin: 25px 0;
20
28
  `;
@@ -14,11 +14,11 @@ export function PreviousPageLink(): JSX.Element {
14
14
  const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
15
15
  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
16
16
 
17
- if (!prevPage || navigation?.hide) {
17
+ if (!prevPage || navigation?.hide || navigation?.previousPageLink?.hide) {
18
18
  return <div>&nbsp;</div>;
19
19
  }
20
20
 
21
- const label = navigation?.nextPageLink?.label || `Back to ${prevPage.label}`;
21
+ const label = navigation?.previousPageLink?.label || `Back to ${prevPage.label}`;
22
22
 
23
23
  return (
24
24
  <StyledButton
@@ -9,20 +9,17 @@ interface PageLink {
9
9
  type: 'link';
10
10
  }
11
11
 
12
- export function useThemeSettings(name: string): RawTheme['settings'] {
12
+ export function useThemeSettings(_: string): RawTheme['settings'] {
13
13
  return {
14
- name,
15
- settings: {
16
- toc: { header: 'header', hide: false },
17
- navigation: {
18
- nextPageLink: { label: 'next page' },
19
- previousPageLink: { label: 'prev page' },
20
- },
14
+ toc: { header: 'header', hide: false },
15
+ navigation: {
16
+ nextPageLink: { label: 'next page theme settings label' },
17
+ previousPageLink: { label: 'prev page theme settings label' },
21
18
  },
22
19
  };
23
20
  }
24
21
 
25
- export function useSidebarSiblingsData(): { nextPage: PageLink; prevPage: PageLink } {
22
+ export function useSidebarSiblingsData(): { nextPage: PageLink | null; prevPage: PageLink | null } {
26
23
  return {
27
24
  nextPage: {
28
25
  type: 'link',