@gravity-ui/page-constructor 1.21.0 → 1.22.0-alpha.0
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/CHANGELOG.md +7 -0
- package/build/cjs/components/Title/Title.css +8 -2
- package/build/cjs/components/Title/Title.d.ts +1 -1
- package/build/cjs/components/Title/Title.js +4 -2
- package/build/cjs/models/constructor-items/common.d.ts +1 -1
- package/build/cjs/models/navigation.d.ts +21 -1
- package/build/cjs/models/navigation.js +15 -1
- package/build/cjs/navigation/components/NavigationItem/NavigationItem.js +2 -0
- package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.css +14 -0
- package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.d.ts +5 -0
- package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.js +47 -0
- package/build/cjs/utils/blocks.d.ts +1 -1
- package/build/cjs/utils/blocks.js +2 -0
- package/build/esm/components/Title/Title.css +8 -2
- package/build/esm/components/Title/Title.d.ts +1 -1
- package/build/esm/components/Title/Title.js +4 -2
- package/build/esm/models/constructor-items/common.d.ts +1 -1
- package/build/esm/models/navigation.d.ts +21 -1
- package/build/esm/models/navigation.js +14 -0
- package/build/esm/navigation/components/NavigationItem/NavigationItem.js +2 -0
- package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.css +14 -0
- package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.d.ts +6 -0
- package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.js +43 -0
- package/build/esm/utils/blocks.d.ts +1 -1
- package/build/esm/utils/blocks.js +2 -0
- package/package.json +5 -1
- package/server/models/constructor-items/common.d.ts +1 -1
- package/server/models/navigation.d.ts +21 -1
- package/server/models/navigation.js +15 -1
- package/server/utils/blocks.d.ts +1 -1
- package/server/utils/blocks.js +2 -0
- package/styles/mixins.scss +9 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.22.0](https://github.com/gravity-ui/page-constructor/compare/v1.21.0...v1.22.0) (2023-03-07)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* add github button in navigation ([#194](https://github.com/gravity-ui/page-constructor/issues/194)) ([57adcb5](https://github.com/gravity-ui/page-constructor/commit/57adcb5ad838f9a86681602f51717be4768e0605))
|
|
9
|
+
|
|
3
10
|
## [1.21.0](https://github.com/gravity-ui/page-constructor/compare/v1.20.5...v1.21.0) (2023-03-06)
|
|
4
11
|
|
|
5
12
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s {
|
|
1
|
+
.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s, .pc-title-block_size_xs {
|
|
2
2
|
margin: 0;
|
|
3
3
|
}
|
|
4
4
|
|
|
@@ -10,6 +10,12 @@ unpredictable css rules order in build */
|
|
|
10
10
|
.pc-title-block_justify_end {
|
|
11
11
|
text-align: right;
|
|
12
12
|
}
|
|
13
|
+
.pc-title-block_size_xs {
|
|
14
|
+
font-size: var(--yc-text-body-3-font-size);
|
|
15
|
+
line-height: var(--yc-text-body-3-line-height);
|
|
16
|
+
color: var(--pc-text-header-color);
|
|
17
|
+
font-weight: var(--yc-text-accent-font-weight);
|
|
18
|
+
}
|
|
13
19
|
.pc-title-block_size_s {
|
|
14
20
|
font-size: var(--yc-text-header-1-font-size);
|
|
15
21
|
line-height: var(--yc-text-header-1-line-height);
|
|
@@ -90,7 +96,7 @@ unpredictable css rules order in build */
|
|
|
90
96
|
margin-top: 0;
|
|
91
97
|
}
|
|
92
98
|
@media (max-width: 577px) {
|
|
93
|
-
.pc-title-block_size_l {
|
|
99
|
+
.pc-title-block_size_l:not(.pc-title-block_reset-margin) {
|
|
94
100
|
margin-top: 48px;
|
|
95
101
|
}
|
|
96
102
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TextSize, TitleProps } from '../../models';
|
|
2
|
-
export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24;
|
|
2
|
+
export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 10 | 20 | 24 | 40;
|
|
3
3
|
export interface TitleFullProps extends TitleProps {
|
|
4
4
|
className?: string;
|
|
5
5
|
onClick?: () => void;
|
|
@@ -11,12 +11,14 @@ const mobileContext_1 = require("../../context/mobileContext");
|
|
|
11
11
|
const b = (0, utils_1.block)('title-block');
|
|
12
12
|
function getArrowSize(size, isMobile) {
|
|
13
13
|
switch (size) {
|
|
14
|
+
case 'xs':
|
|
15
|
+
return 10;
|
|
14
16
|
case 's':
|
|
15
|
-
return 16;
|
|
17
|
+
return 16; // 20px
|
|
16
18
|
case 'm':
|
|
17
19
|
return isMobile ? 20 : 24;
|
|
18
20
|
case 'l':
|
|
19
|
-
return isMobile ?
|
|
21
|
+
return isMobile ? 24 : 40;
|
|
20
22
|
default:
|
|
21
23
|
return 20;
|
|
22
24
|
}
|
|
@@ -38,7 +38,7 @@ export declare enum MediaVideoControlsType {
|
|
|
38
38
|
Custom = "custom"
|
|
39
39
|
}
|
|
40
40
|
export type TextTheme = 'light' | 'dark';
|
|
41
|
-
export type TextSize = 's' | 'm' | 'l';
|
|
41
|
+
export type TextSize = 'xs' | 's' | 'm' | 'l';
|
|
42
42
|
export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
|
|
43
43
|
export type HeaderWidth = 's' | 'm' | 'l';
|
|
44
44
|
export type HeaderImageSize = 's' | 'm';
|
|
@@ -4,13 +4,33 @@ export declare enum NavigationItemType {
|
|
|
4
4
|
Link = "link",
|
|
5
5
|
Dropdown = "dropdown",
|
|
6
6
|
Button = "button",
|
|
7
|
-
Social = "social"
|
|
7
|
+
Social = "social",
|
|
8
|
+
GithubButton = "github-button"
|
|
8
9
|
}
|
|
9
10
|
export interface NavigationItemBase {
|
|
10
11
|
text: string;
|
|
11
12
|
icon?: ImageProps;
|
|
12
13
|
url?: string;
|
|
13
14
|
}
|
|
15
|
+
export declare enum NavigationGithubButtonIcon {
|
|
16
|
+
heart = "octicon-heart",
|
|
17
|
+
eye = "octicon-eye",
|
|
18
|
+
star = "octicon-star",
|
|
19
|
+
fork = "octicon-repo-forked",
|
|
20
|
+
issue = "octicon-issue-opened",
|
|
21
|
+
comment = "octicon-comment-discussion",
|
|
22
|
+
download = "octicon-download",
|
|
23
|
+
package = "octicon-package",
|
|
24
|
+
template = "octicon-repo-template",
|
|
25
|
+
play = "octicon-play"
|
|
26
|
+
}
|
|
27
|
+
export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
|
|
28
|
+
type: NavigationItemType.GithubButton;
|
|
29
|
+
url: string;
|
|
30
|
+
label?: string;
|
|
31
|
+
icon?: keyof typeof NavigationGithubButtonIcon;
|
|
32
|
+
size?: string;
|
|
33
|
+
}
|
|
14
34
|
export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
|
|
15
35
|
type: NavigationItemType.Link;
|
|
16
36
|
url: string;
|
|
@@ -1,10 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.NavigationItemType = void 0;
|
|
3
|
+
exports.NavigationGithubButtonIcon = exports.NavigationItemType = void 0;
|
|
4
4
|
var NavigationItemType;
|
|
5
5
|
(function (NavigationItemType) {
|
|
6
6
|
NavigationItemType["Link"] = "link";
|
|
7
7
|
NavigationItemType["Dropdown"] = "dropdown";
|
|
8
8
|
NavigationItemType["Button"] = "button";
|
|
9
9
|
NavigationItemType["Social"] = "social";
|
|
10
|
+
NavigationItemType["GithubButton"] = "github-button";
|
|
10
11
|
})(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));
|
|
12
|
+
var NavigationGithubButtonIcon;
|
|
13
|
+
(function (NavigationGithubButtonIcon) {
|
|
14
|
+
NavigationGithubButtonIcon["heart"] = "octicon-heart";
|
|
15
|
+
NavigationGithubButtonIcon["eye"] = "octicon-eye";
|
|
16
|
+
NavigationGithubButtonIcon["star"] = "octicon-star";
|
|
17
|
+
NavigationGithubButtonIcon["fork"] = "octicon-repo-forked";
|
|
18
|
+
NavigationGithubButtonIcon["issue"] = "octicon-issue-opened";
|
|
19
|
+
NavigationGithubButtonIcon["comment"] = "octicon-comment-discussion";
|
|
20
|
+
NavigationGithubButtonIcon["download"] = "octicon-download";
|
|
21
|
+
NavigationGithubButtonIcon["package"] = "octicon-package";
|
|
22
|
+
NavigationGithubButtonIcon["template"] = "octicon-repo-template";
|
|
23
|
+
NavigationGithubButtonIcon["play"] = "octicon-play";
|
|
24
|
+
})(NavigationGithubButtonIcon = exports.NavigationGithubButtonIcon || (exports.NavigationGithubButtonIcon = {}));
|
|
@@ -8,6 +8,7 @@ const blockIdContext_1 = require("../../../context/blockIdContext");
|
|
|
8
8
|
const NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
|
|
9
9
|
const NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
|
|
10
10
|
const NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
|
|
11
|
+
const GithubButton_1 = require("./components/GithubButton/GithubButton");
|
|
11
12
|
const ANALYTICS_ID = 'navigation';
|
|
12
13
|
//todo: add types support form component in map
|
|
13
14
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -16,6 +17,7 @@ const NavigationItemsMap = {
|
|
|
16
17
|
[models_1.NavigationItemType.Social]: SocialIcon_1.default,
|
|
17
18
|
[models_1.NavigationItemType.Dropdown]: NavigationDropdown_1.NavigationDropdown,
|
|
18
19
|
[models_1.NavigationItemType.Link]: NavigationLink_1.NavigationLink,
|
|
20
|
+
[models_1.NavigationItemType.GithubButton]: GithubButton_1.GithubButton,
|
|
19
21
|
};
|
|
20
22
|
const NavigationItem = (_a) => {
|
|
21
23
|
var { data, className } = _a, props = tslib_1.__rest(_a, ["data", "className"]);
|
package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.css
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
.pc-github-button {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
white-space: nowrap;
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
height: 100%;
|
|
9
|
+
}
|
|
10
|
+
.pc-github-button span {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
}
|
package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { NavigationItemProps } from '../../NavigationItem';
|
|
2
|
+
import { NavigationGithubButton } from '../../../../../models';
|
|
3
|
+
type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
|
|
4
|
+
export declare const GithubButton: ({ text, url, className, label, size, icon, }: NavigationGithubButtonProps) => JSX.Element;
|
|
5
|
+
export {};
|
package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.GithubButton = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importStar(require("react"));
|
|
6
|
+
const utils_1 = require("../../../../../utils");
|
|
7
|
+
const models_1 = require("../../../../../models");
|
|
8
|
+
const b = (0, utils_1.block)('github-button');
|
|
9
|
+
const DEFAULT_LABEL = 'Stars on GitHub';
|
|
10
|
+
/* More information about github-buttons in https://buttons.github.io/ */
|
|
11
|
+
const GithubButton = ({ text, url, className, label, size, icon, }) => {
|
|
12
|
+
const containerRef = (0, react_1.useRef)(null);
|
|
13
|
+
const linkRef = (0, react_1.useRef)(null);
|
|
14
|
+
(0, react_1.useEffect)(() => {
|
|
15
|
+
const paint = () => {
|
|
16
|
+
if (containerRef.current) {
|
|
17
|
+
const githubButton = containerRef.current.appendChild(document.createElement('span'));
|
|
18
|
+
Promise.resolve().then(() => tslib_1.__importStar(require(/* webpackMode: "eager" */ 'github-buttons'))).then(({ render }) => {
|
|
19
|
+
if (linkRef.current !== null) {
|
|
20
|
+
render(githubButton.appendChild(linkRef.current), (el) => {
|
|
21
|
+
try {
|
|
22
|
+
if (githubButton.parentNode) {
|
|
23
|
+
githubButton.parentNode.replaceChild(el, githubButton);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
catch (_) { }
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
const reset = () => {
|
|
33
|
+
var _a;
|
|
34
|
+
if (((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.lastChild) && linkRef.current) {
|
|
35
|
+
containerRef.current.replaceChild(linkRef.current, containerRef.current.lastChild);
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
paint();
|
|
39
|
+
return () => {
|
|
40
|
+
reset();
|
|
41
|
+
};
|
|
42
|
+
}, []);
|
|
43
|
+
return (react_1.default.createElement("div", { className: b(null, className) },
|
|
44
|
+
react_1.default.createElement("span", { ref: containerRef },
|
|
45
|
+
react_1.default.createElement("a", Object.assign({ href: url, ref: linkRef, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': models_1.NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
|
|
46
|
+
};
|
|
47
|
+
exports.GithubButton = GithubButton;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ConstructorBlock } from '../models/constructor';
|
|
2
2
|
import { TextSize, CustomConfig, PCShareSocialNetwork } from '../models';
|
|
3
|
-
export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4";
|
|
3
|
+
export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
|
|
4
4
|
export declare function getBlockKey(block: ConstructorBlock, index: number): string;
|
|
5
5
|
export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
|
|
6
6
|
export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s {
|
|
1
|
+
.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s, .pc-title-block_size_xs {
|
|
2
2
|
margin: 0;
|
|
3
3
|
}
|
|
4
4
|
|
|
@@ -10,6 +10,12 @@ unpredictable css rules order in build */
|
|
|
10
10
|
.pc-title-block_justify_end {
|
|
11
11
|
text-align: right;
|
|
12
12
|
}
|
|
13
|
+
.pc-title-block_size_xs {
|
|
14
|
+
font-size: var(--yc-text-body-3-font-size);
|
|
15
|
+
line-height: var(--yc-text-body-3-line-height);
|
|
16
|
+
color: var(--pc-text-header-color);
|
|
17
|
+
font-weight: var(--yc-text-accent-font-weight);
|
|
18
|
+
}
|
|
13
19
|
.pc-title-block_size_s {
|
|
14
20
|
font-size: var(--yc-text-header-1-font-size);
|
|
15
21
|
line-height: var(--yc-text-header-1-line-height);
|
|
@@ -90,7 +96,7 @@ unpredictable css rules order in build */
|
|
|
90
96
|
margin-top: 0;
|
|
91
97
|
}
|
|
92
98
|
@media (max-width: 577px) {
|
|
93
|
-
.pc-title-block_size_l {
|
|
99
|
+
.pc-title-block_size_l:not(.pc-title-block_reset-margin) {
|
|
94
100
|
margin-top: 48px;
|
|
95
101
|
}
|
|
96
102
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { TextSize, TitleProps } from '../../models';
|
|
2
2
|
import './Title.css';
|
|
3
|
-
export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24;
|
|
3
|
+
export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 10 | 20 | 24 | 40;
|
|
4
4
|
export interface TitleFullProps extends TitleProps {
|
|
5
5
|
className?: string;
|
|
6
6
|
onClick?: () => void;
|
|
@@ -8,12 +8,14 @@ import './Title.css';
|
|
|
8
8
|
const b = block('title-block');
|
|
9
9
|
export function getArrowSize(size, isMobile) {
|
|
10
10
|
switch (size) {
|
|
11
|
+
case 'xs':
|
|
12
|
+
return 10;
|
|
11
13
|
case 's':
|
|
12
|
-
return 16;
|
|
14
|
+
return 16; // 20px
|
|
13
15
|
case 'm':
|
|
14
16
|
return isMobile ? 20 : 24;
|
|
15
17
|
case 'l':
|
|
16
|
-
return isMobile ?
|
|
18
|
+
return isMobile ? 24 : 40;
|
|
17
19
|
default:
|
|
18
20
|
return 20;
|
|
19
21
|
}
|
|
@@ -38,7 +38,7 @@ export declare enum MediaVideoControlsType {
|
|
|
38
38
|
Custom = "custom"
|
|
39
39
|
}
|
|
40
40
|
export type TextTheme = 'light' | 'dark';
|
|
41
|
-
export type TextSize = 's' | 'm' | 'l';
|
|
41
|
+
export type TextSize = 'xs' | 's' | 'm' | 'l';
|
|
42
42
|
export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
|
|
43
43
|
export type HeaderWidth = 's' | 'm' | 'l';
|
|
44
44
|
export type HeaderImageSize = 's' | 'm';
|
|
@@ -4,13 +4,33 @@ export declare enum NavigationItemType {
|
|
|
4
4
|
Link = "link",
|
|
5
5
|
Dropdown = "dropdown",
|
|
6
6
|
Button = "button",
|
|
7
|
-
Social = "social"
|
|
7
|
+
Social = "social",
|
|
8
|
+
GithubButton = "github-button"
|
|
8
9
|
}
|
|
9
10
|
export interface NavigationItemBase {
|
|
10
11
|
text: string;
|
|
11
12
|
icon?: ImageProps;
|
|
12
13
|
url?: string;
|
|
13
14
|
}
|
|
15
|
+
export declare enum NavigationGithubButtonIcon {
|
|
16
|
+
heart = "octicon-heart",
|
|
17
|
+
eye = "octicon-eye",
|
|
18
|
+
star = "octicon-star",
|
|
19
|
+
fork = "octicon-repo-forked",
|
|
20
|
+
issue = "octicon-issue-opened",
|
|
21
|
+
comment = "octicon-comment-discussion",
|
|
22
|
+
download = "octicon-download",
|
|
23
|
+
package = "octicon-package",
|
|
24
|
+
template = "octicon-repo-template",
|
|
25
|
+
play = "octicon-play"
|
|
26
|
+
}
|
|
27
|
+
export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
|
|
28
|
+
type: NavigationItemType.GithubButton;
|
|
29
|
+
url: string;
|
|
30
|
+
label?: string;
|
|
31
|
+
icon?: keyof typeof NavigationGithubButtonIcon;
|
|
32
|
+
size?: string;
|
|
33
|
+
}
|
|
14
34
|
export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
|
|
15
35
|
type: NavigationItemType.Link;
|
|
16
36
|
url: string;
|
|
@@ -4,4 +4,18 @@ export var NavigationItemType;
|
|
|
4
4
|
NavigationItemType["Dropdown"] = "dropdown";
|
|
5
5
|
NavigationItemType["Button"] = "button";
|
|
6
6
|
NavigationItemType["Social"] = "social";
|
|
7
|
+
NavigationItemType["GithubButton"] = "github-button";
|
|
7
8
|
})(NavigationItemType || (NavigationItemType = {}));
|
|
9
|
+
export var NavigationGithubButtonIcon;
|
|
10
|
+
(function (NavigationGithubButtonIcon) {
|
|
11
|
+
NavigationGithubButtonIcon["heart"] = "octicon-heart";
|
|
12
|
+
NavigationGithubButtonIcon["eye"] = "octicon-eye";
|
|
13
|
+
NavigationGithubButtonIcon["star"] = "octicon-star";
|
|
14
|
+
NavigationGithubButtonIcon["fork"] = "octicon-repo-forked";
|
|
15
|
+
NavigationGithubButtonIcon["issue"] = "octicon-issue-opened";
|
|
16
|
+
NavigationGithubButtonIcon["comment"] = "octicon-comment-discussion";
|
|
17
|
+
NavigationGithubButtonIcon["download"] = "octicon-download";
|
|
18
|
+
NavigationGithubButtonIcon["package"] = "octicon-package";
|
|
19
|
+
NavigationGithubButtonIcon["template"] = "octicon-repo-template";
|
|
20
|
+
NavigationGithubButtonIcon["play"] = "octicon-play";
|
|
21
|
+
})(NavigationGithubButtonIcon || (NavigationGithubButtonIcon = {}));
|
|
@@ -6,6 +6,7 @@ import { BlockIdContext } from '../../../context/blockIdContext';
|
|
|
6
6
|
import { NavigationButton } from './components/NavigationButton/NavigationButton';
|
|
7
7
|
import { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
|
|
8
8
|
import { NavigationLink } from './components/NavigationLink/NavigationLink';
|
|
9
|
+
import { GithubButton } from './components/GithubButton/GithubButton';
|
|
9
10
|
const ANALYTICS_ID = 'navigation';
|
|
10
11
|
//todo: add types support form component in map
|
|
11
12
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -14,6 +15,7 @@ const NavigationItemsMap = {
|
|
|
14
15
|
[NavigationItemType.Social]: SocialIcon,
|
|
15
16
|
[NavigationItemType.Dropdown]: NavigationDropdown,
|
|
16
17
|
[NavigationItemType.Link]: NavigationLink,
|
|
18
|
+
[NavigationItemType.GithubButton]: GithubButton,
|
|
17
19
|
};
|
|
18
20
|
const NavigationItem = (_a) => {
|
|
19
21
|
var { data, className } = _a, props = __rest(_a, ["data", "className"]);
|
package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.css
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
.pc-github-button {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
white-space: nowrap;
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
height: 100%;
|
|
9
|
+
}
|
|
10
|
+
.pc-github-button span {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
}
|
package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.d.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { NavigationItemProps } from '../../NavigationItem';
|
|
2
|
+
import { NavigationGithubButton } from '../../../../../models';
|
|
3
|
+
import './GithubButton.css';
|
|
4
|
+
type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
|
|
5
|
+
export declare const GithubButton: ({ text, url, className, label, size, icon, }: NavigationGithubButtonProps) => JSX.Element;
|
|
6
|
+
export {};
|
package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React, { useRef, useEffect } from 'react';
|
|
2
|
+
import { block } from '../../../../../utils';
|
|
3
|
+
import { NavigationGithubButtonIcon } from '../../../../../models';
|
|
4
|
+
import './GithubButton.css';
|
|
5
|
+
const b = block('github-button');
|
|
6
|
+
const DEFAULT_LABEL = 'Stars on GitHub';
|
|
7
|
+
/* More information about github-buttons in https://buttons.github.io/ */
|
|
8
|
+
export const GithubButton = ({ text, url, className, label, size, icon, }) => {
|
|
9
|
+
const containerRef = useRef(null);
|
|
10
|
+
const linkRef = useRef(null);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
const paint = () => {
|
|
13
|
+
if (containerRef.current) {
|
|
14
|
+
const githubButton = containerRef.current.appendChild(document.createElement('span'));
|
|
15
|
+
import(/* webpackMode: "eager" */ 'github-buttons').then(({ render }) => {
|
|
16
|
+
if (linkRef.current !== null) {
|
|
17
|
+
render(githubButton.appendChild(linkRef.current), (el) => {
|
|
18
|
+
try {
|
|
19
|
+
if (githubButton.parentNode) {
|
|
20
|
+
githubButton.parentNode.replaceChild(el, githubButton);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
catch (_) { }
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
const reset = () => {
|
|
30
|
+
var _a;
|
|
31
|
+
if (((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.lastChild) && linkRef.current) {
|
|
32
|
+
containerRef.current.replaceChild(linkRef.current, containerRef.current.lastChild);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
paint();
|
|
36
|
+
return () => {
|
|
37
|
+
reset();
|
|
38
|
+
};
|
|
39
|
+
}, []);
|
|
40
|
+
return (React.createElement("div", { className: b(null, className) },
|
|
41
|
+
React.createElement("span", { ref: containerRef },
|
|
42
|
+
React.createElement("a", Object.assign({ href: url, ref: linkRef, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
|
|
43
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ConstructorBlock } from '../models/constructor';
|
|
2
2
|
import { TextSize, CustomConfig, PCShareSocialNetwork } from '../models';
|
|
3
|
-
export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4";
|
|
3
|
+
export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
|
|
4
4
|
export declare function getBlockKey(block: ConstructorBlock, index: number): string;
|
|
5
5
|
export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
|
|
6
6
|
export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/page-constructor",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.22.0-alpha.0",
|
|
4
4
|
"description": "Gravity UI Page Constructor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@gravity-ui/i18n": "^1.0.0",
|
|
50
50
|
"bem-cn-lite": "^4.0.0",
|
|
51
|
+
"github-buttons": "2.23.0",
|
|
51
52
|
"lodash": "^4.17.21",
|
|
52
53
|
"react-player": "^2.9.0",
|
|
53
54
|
"react-slick": "^0.28.1",
|
|
@@ -135,5 +136,8 @@
|
|
|
135
136
|
"*.{json,yaml,yml,md}": [
|
|
136
137
|
"prettier --write"
|
|
137
138
|
]
|
|
139
|
+
},
|
|
140
|
+
"publishConfig": {
|
|
141
|
+
"tag": "alpha"
|
|
138
142
|
}
|
|
139
143
|
}
|
|
@@ -38,7 +38,7 @@ export declare enum MediaVideoControlsType {
|
|
|
38
38
|
Custom = "custom"
|
|
39
39
|
}
|
|
40
40
|
export type TextTheme = 'light' | 'dark';
|
|
41
|
-
export type TextSize = 's' | 'm' | 'l';
|
|
41
|
+
export type TextSize = 'xs' | 's' | 'm' | 'l';
|
|
42
42
|
export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
|
|
43
43
|
export type HeaderWidth = 's' | 'm' | 'l';
|
|
44
44
|
export type HeaderImageSize = 's' | 'm';
|
|
@@ -4,13 +4,33 @@ export declare enum NavigationItemType {
|
|
|
4
4
|
Link = "link",
|
|
5
5
|
Dropdown = "dropdown",
|
|
6
6
|
Button = "button",
|
|
7
|
-
Social = "social"
|
|
7
|
+
Social = "social",
|
|
8
|
+
GithubButton = "github-button"
|
|
8
9
|
}
|
|
9
10
|
export interface NavigationItemBase {
|
|
10
11
|
text: string;
|
|
11
12
|
icon?: ImageProps;
|
|
12
13
|
url?: string;
|
|
13
14
|
}
|
|
15
|
+
export declare enum NavigationGithubButtonIcon {
|
|
16
|
+
heart = "octicon-heart",
|
|
17
|
+
eye = "octicon-eye",
|
|
18
|
+
star = "octicon-star",
|
|
19
|
+
fork = "octicon-repo-forked",
|
|
20
|
+
issue = "octicon-issue-opened",
|
|
21
|
+
comment = "octicon-comment-discussion",
|
|
22
|
+
download = "octicon-download",
|
|
23
|
+
package = "octicon-package",
|
|
24
|
+
template = "octicon-repo-template",
|
|
25
|
+
play = "octicon-play"
|
|
26
|
+
}
|
|
27
|
+
export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
|
|
28
|
+
type: NavigationItemType.GithubButton;
|
|
29
|
+
url: string;
|
|
30
|
+
label?: string;
|
|
31
|
+
icon?: keyof typeof NavigationGithubButtonIcon;
|
|
32
|
+
size?: string;
|
|
33
|
+
}
|
|
14
34
|
export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
|
|
15
35
|
type: NavigationItemType.Link;
|
|
16
36
|
url: string;
|
|
@@ -1,10 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.NavigationItemType = void 0;
|
|
3
|
+
exports.NavigationGithubButtonIcon = exports.NavigationItemType = void 0;
|
|
4
4
|
var NavigationItemType;
|
|
5
5
|
(function (NavigationItemType) {
|
|
6
6
|
NavigationItemType["Link"] = "link";
|
|
7
7
|
NavigationItemType["Dropdown"] = "dropdown";
|
|
8
8
|
NavigationItemType["Button"] = "button";
|
|
9
9
|
NavigationItemType["Social"] = "social";
|
|
10
|
+
NavigationItemType["GithubButton"] = "github-button";
|
|
10
11
|
})(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));
|
|
12
|
+
var NavigationGithubButtonIcon;
|
|
13
|
+
(function (NavigationGithubButtonIcon) {
|
|
14
|
+
NavigationGithubButtonIcon["heart"] = "octicon-heart";
|
|
15
|
+
NavigationGithubButtonIcon["eye"] = "octicon-eye";
|
|
16
|
+
NavigationGithubButtonIcon["star"] = "octicon-star";
|
|
17
|
+
NavigationGithubButtonIcon["fork"] = "octicon-repo-forked";
|
|
18
|
+
NavigationGithubButtonIcon["issue"] = "octicon-issue-opened";
|
|
19
|
+
NavigationGithubButtonIcon["comment"] = "octicon-comment-discussion";
|
|
20
|
+
NavigationGithubButtonIcon["download"] = "octicon-download";
|
|
21
|
+
NavigationGithubButtonIcon["package"] = "octicon-package";
|
|
22
|
+
NavigationGithubButtonIcon["template"] = "octicon-repo-template";
|
|
23
|
+
NavigationGithubButtonIcon["play"] = "octicon-play";
|
|
24
|
+
})(NavigationGithubButtonIcon = exports.NavigationGithubButtonIcon || (exports.NavigationGithubButtonIcon = {}));
|
package/server/utils/blocks.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ConstructorBlock } from '../models/constructor';
|
|
2
2
|
import { TextSize, CustomConfig, PCShareSocialNetwork } from '../models';
|
|
3
|
-
export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4";
|
|
3
|
+
export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
|
|
4
4
|
export declare function getBlockKey(block: ConstructorBlock, index: number): string;
|
|
5
5
|
export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
|
|
6
6
|
export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
|
package/server/utils/blocks.js
CHANGED
package/styles/mixins.scss
CHANGED
|
@@ -141,15 +141,17 @@
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
@mixin label($size: m) {
|
|
144
|
-
@
|
|
144
|
+
@if $size == m {
|
|
145
|
+
@include text-size(body-1);
|
|
145
146
|
|
|
146
|
-
|
|
147
|
+
$label-height: 20px;
|
|
147
148
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
149
|
+
display: inline-block;
|
|
150
|
+
padding: 0 8px;
|
|
151
|
+
border-radius: 2px;
|
|
152
|
+
height: $label-height;
|
|
153
|
+
line-height: $label-height;
|
|
154
|
+
}
|
|
153
155
|
|
|
154
156
|
@if $size == s {
|
|
155
157
|
@include text-size(caption-2);
|