@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.
- package/JsonViewer/JsonViewer.js +1 -1
- package/PageNavigation/NextPageLink.js +3 -3
- package/PageNavigation/PageNavigation.d.ts +1 -1
- package/PageNavigation/PageNavigation.js +7 -1
- package/PageNavigation/PreviousPageLink.js +3 -3
- package/mocks/hooks/index.d.ts +3 -3
- package/mocks/hooks/index.js +5 -8
- package/package.json +1 -1
- package/settings.yaml +4 -0
- package/src/JsonViewer/JsonViewer.tsx +19 -17
- package/src/PageNavigation/NextPageLink.tsx +1 -1
- package/src/PageNavigation/PageNavigation.tsx +10 -2
- package/src/PageNavigation/PreviousPageLink.tsx +2 -2
- package/src/mocks/hooks/index.ts +6 -9
package/JsonViewer/JsonViewer.js
CHANGED
|
@@ -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 .
|
|
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 = ((
|
|
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
|
|
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 = ((
|
|
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;
|
package/mocks/hooks/index.d.ts
CHANGED
|
@@ -7,9 +7,9 @@ interface PageLink {
|
|
|
7
7
|
link: string;
|
|
8
8
|
type: 'link';
|
|
9
9
|
}
|
|
10
|
-
export declare function useThemeSettings(
|
|
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 {};
|
package/mocks/hooks/index.js
CHANGED
|
@@ -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(
|
|
4
|
+
function useThemeSettings(_) {
|
|
5
5
|
return {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
package/settings.yaml
CHANGED
|
@@ -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
|
-
|
|
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:
|
|
190
|
+
padding: 1px;
|
|
188
191
|
color: #fff;
|
|
189
|
-
width:
|
|
190
|
-
height:
|
|
191
|
-
|
|
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
|
-
|
|
206
|
-
|
|
208
|
+
width: 100%;
|
|
209
|
+
}
|
|
207
210
|
|
|
208
|
-
|
|
209
|
-
|
|
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> </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
|
|
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> </div>;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
const label = navigation?.
|
|
21
|
+
const label = navigation?.previousPageLink?.label || `Back to ${prevPage.label}`;
|
|
22
22
|
|
|
23
23
|
return (
|
|
24
24
|
<StyledButton
|
package/src/mocks/hooks/index.ts
CHANGED
|
@@ -9,20 +9,17 @@ interface PageLink {
|
|
|
9
9
|
type: 'link';
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
export function useThemeSettings(
|
|
12
|
+
export function useThemeSettings(_: string): RawTheme['settings'] {
|
|
13
13
|
return {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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',
|