@redocly/theme 0.9.9 → 0.9.10
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/lib/Feedback/Feedback.d.ts +1 -1
- package/lib/Markdown/MarkdownWrapper.js +3 -0
- package/lib/Sidebar/MobileSidebarButton.js +4 -5
- package/lib/Sidebar/MobileSidebarIcon.d.ts +4 -0
- package/lib/Sidebar/MobileSidebarIcon.js +16 -0
- package/lib/Sidebar/SidebarLayout.js +3 -1
- package/lib/globalStyle.js +1 -1
- package/package.json +1 -1
- package/src/Feedback/Feedback.tsx +1 -2
- package/src/Markdown/MarkdownWrapper.tsx +3 -0
- package/src/Navbar/NavbarItem.tsx +1 -0
- package/src/Sidebar/MobileSidebarButton.tsx +4 -5
- package/src/Sidebar/MobileSidebarIcon.tsx +18 -0
- package/src/Sidebar/SidebarLayout.tsx +5 -1
- package/src/globalStyle.ts +1 -1
- package/src/types/portal/index.d.ts +0 -1
- package/src/types/portal/src/shared/constants.d.ts +5 -0
- package/src/types/portal/src/shared/types/feedback.d.ts +2 -6
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { FeedbackProps } from '@
|
|
2
|
+
import type { FeedbackProps } from '@theme/types/portal/src/shared/types/feedback';
|
|
3
3
|
export declare const Feedback: (props: FeedbackProps & {
|
|
4
4
|
path?: string;
|
|
5
5
|
}) => JSX.Element;
|
|
@@ -248,6 +248,9 @@ exports.MarkdownWrapper = styled_components_1.default.main.attrs(() => ({
|
|
|
248
248
|
p {
|
|
249
249
|
margin: var(--md-paragraph-margin-vertical) var(--md-paragraph-margin-horizontal);
|
|
250
250
|
|
|
251
|
+
&:first-child {
|
|
252
|
+
margin-top: 0;
|
|
253
|
+
}
|
|
251
254
|
&:last-child {
|
|
252
255
|
margin-bottom: 0;
|
|
253
256
|
}
|
|
@@ -23,11 +23,10 @@ exports.MobileSidebarButton = styled_components_1.default.span.attrs(() => ({
|
|
|
23
23
|
border-radius: 50%;
|
|
24
24
|
transform: ${(props) => (props.opened ? 'rotate(180deg)' : 'rotate(0deg)')};
|
|
25
25
|
transition: transform 0.75s;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
background-size: 45%;
|
|
26
|
+
display: flex;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
align-items: center;
|
|
29
|
+
fill: var(--fab-icon-color);
|
|
31
30
|
|
|
32
31
|
&:hover {
|
|
33
32
|
background-color: var(--fab-background-color);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.MobileSidebarIcon = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const MobileSidebarIcon = ({ className }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25px", height: "25px", viewBox: "0 0 294.842 294.842", className: className },
|
|
9
|
+
react_1.default.createElement("path", { d: "M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z" }),
|
|
10
|
+
react_1.default.createElement("path", { d: "M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z" }),
|
|
11
|
+
react_1.default.createElement("path", { d: "M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z" }),
|
|
12
|
+
react_1.default.createElement("path", { d: "M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z" }),
|
|
13
|
+
react_1.default.createElement("path", { d: "M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z" }),
|
|
14
|
+
react_1.default.createElement("path", { d: "M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z" })));
|
|
15
|
+
exports.MobileSidebarIcon = MobileSidebarIcon;
|
|
16
|
+
//# sourceMappingURL=MobileSidebarIcon.js.map
|
|
@@ -14,6 +14,7 @@ const MobileSidebarButton_1 = require("../Sidebar/MobileSidebarButton");
|
|
|
14
14
|
const MenuContainer_1 = require("../Sidebar/MenuContainer");
|
|
15
15
|
const SidebarSearch_1 = require("../Search/SidebarSearch");
|
|
16
16
|
const useThemeConfig_1 = require("../hooks/useThemeConfig");
|
|
17
|
+
const MobileSidebarIcon_1 = require("./MobileSidebarIcon");
|
|
17
18
|
function SidebarLayout({ versions, menu, footer, header, growContent, }) {
|
|
18
19
|
const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
|
|
19
20
|
const toggleMenu = () => setIsOpen(!isOpen);
|
|
@@ -22,7 +23,8 @@ function SidebarLayout({ versions, menu, footer, header, growContent, }) {
|
|
|
22
23
|
return null;
|
|
23
24
|
}
|
|
24
25
|
return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout" },
|
|
25
|
-
react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }
|
|
26
|
+
react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu },
|
|
27
|
+
react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)),
|
|
26
28
|
!(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
|
|
27
29
|
react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
|
|
28
30
|
header ? react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, null, header) : null,
|
package/lib/globalStyle.js
CHANGED
|
@@ -1458,7 +1458,7 @@ const apiReferenceDocs = (0, styled_components_1.css) `
|
|
|
1458
1458
|
--fab-active-background: var(--color-primary-500); // @presenter Color
|
|
1459
1459
|
--fab-active-box-shadow: var(--box-shadow); // @presenter Shadow
|
|
1460
1460
|
|
|
1461
|
-
--fab-icon:
|
|
1461
|
+
--fab-icon-color: var(--navbar-text-color); // @presenter Color
|
|
1462
1462
|
|
|
1463
1463
|
// @tokens End
|
|
1464
1464
|
`;
|
package/package.json
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
import type { FeedbackProps } from '@
|
|
4
|
-
|
|
3
|
+
import type { FeedbackProps } from '@theme/types/portal/src/shared/types/feedback';
|
|
5
4
|
import { Rating, Sentiment, Comment } from '@theme/Feedback';
|
|
6
5
|
import { useThemeConfig } from '@theme/hooks';
|
|
7
6
|
import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
|
|
@@ -21,6 +21,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
|
|
|
21
21
|
|
|
22
22
|
if ((navItem as ResolvedNavLinkItem).link) {
|
|
23
23
|
const item = navItem as ResolvedNavLinkItem;
|
|
24
|
+
|
|
24
25
|
const isActive = pathname === withPathPrefix(item.link);
|
|
25
26
|
return (
|
|
26
27
|
<NavbarMenuItem
|
|
@@ -19,11 +19,10 @@ export const MobileSidebarButton = styled.span.attrs(() => ({
|
|
|
19
19
|
border-radius: 50%;
|
|
20
20
|
transform: ${(props) => (props.opened ? 'rotate(180deg)' : 'rotate(0deg)')};
|
|
21
21
|
transition: transform 0.75s;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
background-size: 45%;
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-items: center;
|
|
25
|
+
fill: var(--fab-icon-color);
|
|
27
26
|
|
|
28
27
|
&:hover {
|
|
29
28
|
background-color: var(--fab-background-color);
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
export const MobileSidebarIcon = ({ className }: { className?: string }): JSX.Element => (
|
|
4
|
+
<svg
|
|
5
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
+
width="25px"
|
|
7
|
+
height="25px"
|
|
8
|
+
viewBox="0 0 294.842 294.842"
|
|
9
|
+
className={className}
|
|
10
|
+
>
|
|
11
|
+
<path d="M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z" />
|
|
12
|
+
<path d="M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z" />
|
|
13
|
+
<path d="M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z" />
|
|
14
|
+
<path d="M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z" />
|
|
15
|
+
<path d="M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z" />
|
|
16
|
+
<path d="M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z" />
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
@@ -10,6 +10,8 @@ import { MenuContainer } from '@theme/Sidebar/MenuContainer';
|
|
|
10
10
|
import { SidebarSearch } from '@theme/Search/SidebarSearch';
|
|
11
11
|
import { useThemeConfig } from '@theme/hooks/useThemeConfig';
|
|
12
12
|
|
|
13
|
+
import { MobileSidebarIcon } from './MobileSidebarIcon';
|
|
14
|
+
|
|
13
15
|
interface SidebarLayoutProps {
|
|
14
16
|
versions: React.ReactNode;
|
|
15
17
|
menu: React.ReactNode;
|
|
@@ -39,7 +41,9 @@ export function SidebarLayout({
|
|
|
39
41
|
|
|
40
42
|
return (
|
|
41
43
|
<Wrapper data-component-name="Sidebar/SidebarLayout">
|
|
42
|
-
<MobileSidebarButton opened={isOpen} onClick={toggleMenu}
|
|
44
|
+
<MobileSidebarButton opened={isOpen} onClick={toggleMenu}>
|
|
45
|
+
<MobileSidebarIcon />
|
|
46
|
+
</MobileSidebarButton>
|
|
43
47
|
|
|
44
48
|
{!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
|
|
45
49
|
<Sidebar animate={true} opened={isOpen}>
|
package/src/globalStyle.ts
CHANGED
|
@@ -1470,7 +1470,7 @@ const apiReferenceDocs = css`
|
|
|
1470
1470
|
--fab-active-background: var(--color-primary-500); // @presenter Color
|
|
1471
1471
|
--fab-active-box-shadow: var(--box-shadow); // @presenter Shadow
|
|
1472
1472
|
|
|
1473
|
-
--fab-icon:
|
|
1473
|
+
--fab-icon-color: var(--navbar-text-color); // @presenter Color
|
|
1474
1474
|
|
|
1475
1475
|
// @tokens End
|
|
1476
1476
|
`;
|
|
@@ -13,6 +13,11 @@ export declare const DEFAULT_COOKIE_EXPIRATION: number;
|
|
|
13
13
|
export declare const DEFAULT_AUTHENTICATED_ROLE = 'AuthenticatedUser';
|
|
14
14
|
export declare const DEFAULT_AUTHENTICATED_PERMISSION = 'redocly:authenticated-user';
|
|
15
15
|
export declare const SEARCH_LIMIT = 50;
|
|
16
|
+
export declare enum FEEDBACK_TYPES {
|
|
17
|
+
RATING = 'rating',
|
|
18
|
+
SENTIMENT = 'sentiment',
|
|
19
|
+
COMMENT = 'comment',
|
|
20
|
+
}
|
|
16
21
|
export declare enum ServerRoutes {
|
|
17
22
|
EJECT_COMPONENT = '/eject-component/:componentName',
|
|
18
23
|
SHARED_PAGE_DATA = '/page-data/shared/*',
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { FEEDBACK_TYPES } from '../constants';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
RATING = 'rating',
|
|
5
|
-
SENTIMENT = 'sentiment',
|
|
6
|
-
COMMENT = 'comment',
|
|
7
|
-
}
|
|
3
|
+
import type { RatingProps, SentimentProps, CommentProps } from '@theme/Feedback';
|
|
8
4
|
|
|
9
5
|
export declare type FeedbackProps = {
|
|
10
6
|
type: FEEDBACK_TYPES;
|