@redocly/theme 0.1.26 → 0.1.27
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/Markdown/Heading.js +11 -2
- package/Markdown/MarkdownWrapper.js +2 -2
- package/hooks/useActiveSectionId.d.ts +1 -1
- package/package.json +1 -1
- package/src/Markdown/Heading.tsx +13 -2
- package/src/Markdown/MarkdownWrapper.tsx +58 -58
- package/src/hooks/useActiveSectionId.ts +1 -1
- package/src/utils/class-names.ts +8 -0
- package/src/utils/index.ts +1 -0
- package/utils/class-names.d.ts +1 -0
- package/utils/class-names.js +15 -0
- package/utils/index.d.ts +1 -0
- package/utils/index.js +1 -0
package/Markdown/Heading.js
CHANGED
|
@@ -25,12 +25,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.Heading = void 0;
|
|
27
27
|
var react_1 = __importStar(require("react"));
|
|
28
|
+
var utils_1 = require("../utils");
|
|
29
|
+
/**
|
|
30
|
+
* Class name for all MD tags
|
|
31
|
+
*/
|
|
32
|
+
var mdClassName = 'md';
|
|
28
33
|
var SvgIcon = (react_1.default.createElement("svg", { "aria-hidden": "true", focusable: "false", height: "16", version: "1.1", viewBox: "0 0 16 16", width: "16" },
|
|
29
34
|
react_1.default.createElement("path", { fillRule: "evenodd", d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" })));
|
|
30
35
|
function Heading(_a) {
|
|
31
36
|
var level = _a.level, id = _a.id, children = _a.children;
|
|
32
|
-
var linkEl = (react_1.default.createElement("a", { href: "#".concat(id), className:
|
|
33
|
-
return (0, react_1.createElement)("h".concat(level), {
|
|
37
|
+
var linkEl = (react_1.default.createElement("a", { href: "#".concat(id), className: (0, utils_1.concatClassNames)('anchor', 'before') }, SvgIcon));
|
|
38
|
+
return (0, react_1.createElement)("h".concat(level), {
|
|
39
|
+
id: id,
|
|
40
|
+
className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName),
|
|
41
|
+
'data-component-name': 'Markdown/Heading/Heading',
|
|
42
|
+
}, react_1.default.createElement(react_1.default.Fragment, null,
|
|
34
43
|
linkEl,
|
|
35
44
|
children));
|
|
36
45
|
}
|
|
@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
30
30
|
exports.MarkdownWrapper = exports.headingAnchor = exports.baseTable = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var utils_1 = require("../utils");
|
|
33
|
-
exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n table {\n display: block;\n width: 100%;\n overflow: auto;\n word-break: keep-all;\n border-collapse: separate;\n border-spacing: 0;\n margin-top: 20px;\n margin-bottom: 20px;\n font-size: 14px;\n
|
|
33
|
+
exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n table.md {\n display: block;\n width: 100%;\n overflow: auto;\n word-break: keep-all;\n border-collapse: separate;\n border-spacing: 0;\n margin-top: 20px;\n margin-bottom: 20px;\n font-size: 14px;\n\n th,\n td {\n padding: 12px;\n border-bottom: 1px solid var(--global-border-color);\n }\n\n th {\n text-align: left;\n font-weight: bold;\n background-color: var(--color-secondary-300);\n }\n\n tr th:first-child,\n tr td:first-child {\n border-left: 1px solid var(--global-border-color);\n }\n\n tr td:last-child,\n tr th:last-child {\n border-right: 1px solid var(--global-border-color);\n }\n\n thead td,\n thead th {\n border-top: 1px solid var(--global-border-color);\n }\n\n /* top-left border */\n\n thead tr:first-child th:first-child {\n border-top-left-radius: var(--panels-border-radius);\n }\n\n /* top-right border */\n\n thead tr:first-child th:last-child {\n border-top-right-radius: var(--panels-border-radius);\n border-top: 1px solid var(--global-border-color);\n }\n\n /* bottom-left border */\n\n tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--panels-border-radius);\n }\n\n /* bottom-right border */\n\n tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--panels-border-radius);\n }\n }\n"], ["\n table.md {\n display: block;\n width: 100%;\n overflow: auto;\n word-break: keep-all;\n border-collapse: separate;\n border-spacing: 0;\n margin-top: 20px;\n margin-bottom: 20px;\n font-size: 14px;\n\n th,\n td {\n padding: 12px;\n border-bottom: 1px solid var(--global-border-color);\n }\n\n th {\n text-align: left;\n font-weight: bold;\n background-color: var(--color-secondary-300);\n }\n\n tr th:first-child,\n tr td:first-child {\n border-left: 1px solid var(--global-border-color);\n }\n\n tr td:last-child,\n tr th:last-child {\n border-right: 1px solid var(--global-border-color);\n }\n\n thead td,\n thead th {\n border-top: 1px solid var(--global-border-color);\n }\n\n /* top-left border */\n\n thead tr:first-child th:first-child {\n border-top-left-radius: var(--panels-border-radius);\n }\n\n /* top-right border */\n\n thead tr:first-child th:last-child {\n border-top-right-radius: var(--panels-border-radius);\n border-top: 1px solid var(--global-border-color);\n }\n\n /* bottom-left border */\n\n tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--panels-border-radius);\n }\n\n /* bottom-right border */\n\n tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--panels-border-radius);\n }\n }\n"])));
|
|
34
34
|
// TODO: Can users specify another className or we should hardcode it?
|
|
35
35
|
function headingAnchor(className) {
|
|
36
36
|
if (className === void 0) { className = 'anchor'; }
|
|
@@ -39,5 +39,5 @@ function headingAnchor(className) {
|
|
|
39
39
|
exports.headingAnchor = headingAnchor;
|
|
40
40
|
exports.MarkdownWrapper = styled_components_1.default.main.attrs(function () { return ({
|
|
41
41
|
'data-component-name': 'Markdown/MarkdownWrapper',
|
|
42
|
-
}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-weight: var(--font-weight-regular);\n padding: 0;\n\n color: var(--color-content);\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n\n a:not([role='button']) {\n text-decoration: var(--link-decoration);\n color: var(--link-color);\n\n &:visited {\n color: var(--link-color);\n }\n\n &:hover {\n color: var(--link-color-hover);\n }\n }\n\n img {\n max-width: 100%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: var(--h-font-weight);\n font-family: var(--h-font-family);\n position: relative;\n\n scroll-margin-top: 60px;\n }\n\n strong {\n font-weight: var(--font-weight-bold);\n }\n\n hr {\n border-top: 1px solid var(--global-border-color);\n }\n\n details {\n margin: 1.125em 0;\n\n summary {\n color: var(--color-content);\n font-weight: var(--font-weight-regular);\n outline: 0;\n padding: 0;\n cursor: pointer;\n }\n\n > :not(summary):first-of-type {\n margin-top: 1.25em;\n }\n\n > *:last-child {\n margin-bottom: 1.25em;\n }\n }\n\n ", ";\n\n .code-snippets-tabs {\n .snippets-tabs-headers {\n font-size: 0.9em;\n\n font-family: var(--h-font-family);\n\n .tab-header {\n text-align: center;\n padding: 0.2em 0.5em;\n display: inline-block;\n cursor: pointer;\n color: var(--color-content-secondary);\n\n &.active {\n color: var(--h-color);\n font-weight: var(--font-weight-bold);\n }\n }\n }\n\n .tab-content {\n margin-top: 4px;\n display: none;\n\n pre {\n margin-top: 0;\n }\n\n &.active {\n display: block;\n }\n }\n }\n\n p {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h1 {\n ", ";\n margin: var(--h1-margin-top) var(--h1-margin-bottom);\n ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n h2 {\n ", ";\n margin: var(--h2-margin-top) var(--h2-margin-bottom);\n ", ";\n }\n\n h3 {\n ", ";\n margin: var(--h3-margin-top) var(--h3-margin-bottom);\n ", ";\n }\n\n h4 {\n ", ";\n margin: var(--h4-margin-top) var(--h4-margin-bottom);\n ", ";\n }\n\n h5 {\n ", ";\n margin: var(--h5-margin-top) var(--h5-margin-bottom);\n ", ";\n }\n\n h6 {\n ", ";\n margin: var(--h6-margin-top) var(--h6-margin-bottom);\n ", ";\n }\n\n code {\n color: var(--inline-code-color);\n background-color: var(--inline-code-background-color);\n\n border-radius: 2px;\n border: 1px solid var(--global-border-color);\n padding: 0.1em 0.25em 0.2em;\n font-weight: var(--code-font-weight);\n word-break: break-word;\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n }\n\n blockquote {\n margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n border-left: 4px solid var(--global-border-color);\n background-color: var(--bloquote-background-color);\n color: var(--color-content);\n\n & > p:first-child {\n margin-top: 0;\n }\n }\n\n img {\n max-width: 100%;\n box-sizing: content-box;\n margin: 0 auto;\n\n &:only-child {\n display: block;\n }\n }\n\n > ul,\n > p ul {\n > ol,\n > p ol {\n padding-left: 2em;\n margin: 0 0 1em;\n\n ul,\n ol {\n margin-bottom: 0;\n margin-top: 0;\n }\n }\n }\n"], ["\n font-weight: var(--font-weight-regular);\n padding: 0;\n\n color: var(--color-content);\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n\n a:not([role='button']) {\n text-decoration: var(--link-decoration);\n color: var(--link-color);\n\n &:visited {\n color: var(--link-color);\n }\n\n &:hover {\n color: var(--link-color-hover);\n }\n }\n\n img {\n max-width: 100%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: var(--h-font-weight);\n font-family: var(--h-font-family);\n position: relative;\n\n scroll-margin-top: 60px;\n }\n\n strong {\n font-weight: var(--font-weight-bold);\n }\n\n hr {\n border-top: 1px solid var(--global-border-color);\n }\n\n details {\n margin: 1.125em 0;\n\n summary {\n color: var(--color-content);\n font-weight: var(--font-weight-regular);\n outline: 0;\n padding: 0;\n cursor: pointer;\n }\n\n > :not(summary):first-of-type {\n margin-top: 1.25em;\n }\n\n > *:last-child {\n margin-bottom: 1.25em;\n }\n }\n\n ", ";\n\n .code-snippets-tabs {\n .snippets-tabs-headers {\n font-size: 0.9em;\n\n font-family: var(--h-font-family);\n\n .tab-header {\n text-align: center;\n padding: 0.2em 0.5em;\n display: inline-block;\n cursor: pointer;\n color: var(--color-content-secondary);\n\n &.active {\n color: var(--h-color);\n font-weight: var(--font-weight-bold);\n }\n }\n }\n\n .tab-content {\n margin-top: 4px;\n display: none;\n\n pre {\n margin-top: 0;\n }\n\n &.active {\n display: block;\n }\n }\n }\n\n p {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h1 {\n ", ";\n margin: var(--h1-margin-top) var(--h1-margin-bottom);\n ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n h2 {\n ", ";\n margin: var(--h2-margin-top) var(--h2-margin-bottom);\n ", ";\n }\n\n h3 {\n ", ";\n margin: var(--h3-margin-top) var(--h3-margin-bottom);\n ", ";\n }\n\n h4 {\n ", ";\n margin: var(--h4-margin-top) var(--h4-margin-bottom);\n ", ";\n }\n\n h5 {\n ", ";\n margin: var(--h5-margin-top) var(--h5-margin-bottom);\n ", ";\n }\n\n h6 {\n ", ";\n margin: var(--h6-margin-top) var(--h6-margin-bottom);\n ", ";\n }\n\n code {\n color: var(--inline-code-color);\n background-color: var(--inline-code-background-color);\n\n border-radius: 2px;\n border: 1px solid var(--global-border-color);\n padding: 0.1em 0.25em 0.2em;\n font-weight: var(--code-font-weight);\n word-break: break-word;\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n }\n\n blockquote {\n margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n border-left: 4px solid var(--global-border-color);\n background-color: var(--bloquote-background-color);\n color: var(--color-content);\n\n & > p:first-child {\n margin-top: 0;\n }\n }\n\n img {\n max-width: 100%;\n box-sizing: content-box;\n margin: 0 auto;\n\n &:only-child {\n display: block;\n }\n }\n\n > ul,\n > p ul {\n > ol,\n > p ol {\n padding-left: 2em;\n margin: 0 0 1em;\n\n ul,\n ol {\n margin-bottom: 0;\n margin-top: 0;\n }\n }\n }\n"])), exports.baseTable, (0, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
|
|
42
|
+
}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-weight: var(--font-weight-regular);\n padding: 0;\n\n color: var(--color-content);\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n\n a:not([role='button']) {\n text-decoration: var(--link-decoration);\n color: var(--link-color);\n\n &:visited {\n color: var(--link-color);\n }\n\n &:hover {\n color: var(--link-color-hover);\n }\n }\n\n img {\n max-width: 100%;\n }\n\n h1.md,\n h2.md,\n h3.md,\n h4.md,\n h5.md,\n h6.md {\n font-weight: var(--h-font-weight);\n font-family: var(--h-font-family);\n position: relative;\n\n scroll-margin-top: 60px;\n }\n\n strong {\n font-weight: var(--font-weight-bold);\n }\n\n hr {\n border-top: 1px solid var(--global-border-color);\n }\n\n details {\n margin: 1.125em 0;\n\n summary {\n color: var(--color-content);\n font-weight: var(--font-weight-regular);\n outline: 0;\n padding: 0;\n cursor: pointer;\n }\n\n > :not(summary):first-of-type {\n margin-top: 1.25em;\n }\n\n > *:last-child {\n margin-bottom: 1.25em;\n }\n }\n\n ", ";\n\n .code-snippets-tabs {\n .snippets-tabs-headers {\n font-size: 0.9em;\n\n font-family: var(--h-font-family);\n\n .tab-header {\n text-align: center;\n padding: 0.2em 0.5em;\n display: inline-block;\n cursor: pointer;\n color: var(--color-content-secondary);\n\n &.active {\n color: var(--h-color);\n font-weight: var(--font-weight-bold);\n }\n }\n }\n\n .tab-content {\n margin-top: 4px;\n display: none;\n\n pre {\n margin-top: 0;\n }\n\n &.active {\n display: block;\n }\n }\n }\n\n p {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h1.md {\n ", ";\n margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n h2.md {\n ", ";\n margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n ", ";\n }\n\n h3.md {\n ", ";\n margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n ", ";\n }\n\n h4.md {\n ", ";\n margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n ", ";\n }\n\n h5.md {\n ", ";\n margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n ", ";\n }\n\n h6.md {\n ", ";\n margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n ", ";\n }\n\n code {\n color: var(--inline-code-color);\n background-color: var(--inline-code-background-color);\n\n border-radius: 2px;\n border: 1px solid var(--global-border-color);\n padding: 0.1em 0.25em 0.2em;\n font-weight: var(--code-font-weight);\n word-break: break-word;\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n }\n\n blockquote {\n margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n border-left: 4px solid var(--global-border-color);\n background-color: var(--bloquote-background-color);\n color: var(--color-content);\n\n & > p:first-child {\n margin-top: 0;\n }\n }\n\n img {\n max-width: 100%;\n box-sizing: content-box;\n margin: 0 auto;\n\n &:only-child {\n display: block;\n }\n }\n\n > ul,\n > p ul {\n > ol,\n > p ol {\n padding-left: 2em;\n margin: 0 0 1em;\n\n ul,\n ol {\n margin-bottom: 0;\n margin-top: 0;\n }\n }\n }\n"], ["\n font-weight: var(--font-weight-regular);\n padding: 0;\n\n color: var(--color-content);\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n\n a:not([role='button']) {\n text-decoration: var(--link-decoration);\n color: var(--link-color);\n\n &:visited {\n color: var(--link-color);\n }\n\n &:hover {\n color: var(--link-color-hover);\n }\n }\n\n img {\n max-width: 100%;\n }\n\n h1.md,\n h2.md,\n h3.md,\n h4.md,\n h5.md,\n h6.md {\n font-weight: var(--h-font-weight);\n font-family: var(--h-font-family);\n position: relative;\n\n scroll-margin-top: 60px;\n }\n\n strong {\n font-weight: var(--font-weight-bold);\n }\n\n hr {\n border-top: 1px solid var(--global-border-color);\n }\n\n details {\n margin: 1.125em 0;\n\n summary {\n color: var(--color-content);\n font-weight: var(--font-weight-regular);\n outline: 0;\n padding: 0;\n cursor: pointer;\n }\n\n > :not(summary):first-of-type {\n margin-top: 1.25em;\n }\n\n > *:last-child {\n margin-bottom: 1.25em;\n }\n }\n\n ", ";\n\n .code-snippets-tabs {\n .snippets-tabs-headers {\n font-size: 0.9em;\n\n font-family: var(--h-font-family);\n\n .tab-header {\n text-align: center;\n padding: 0.2em 0.5em;\n display: inline-block;\n cursor: pointer;\n color: var(--color-content-secondary);\n\n &.active {\n color: var(--h-color);\n font-weight: var(--font-weight-bold);\n }\n }\n }\n\n .tab-content {\n margin-top: 4px;\n display: none;\n\n pre {\n margin-top: 0;\n }\n\n &.active {\n display: block;\n }\n }\n }\n\n p {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h1.md {\n ", ";\n margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n h2.md {\n ", ";\n margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n ", ";\n }\n\n h3.md {\n ", ";\n margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n ", ";\n }\n\n h4.md {\n ", ";\n margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n ", ";\n }\n\n h5.md {\n ", ";\n margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n ", ";\n }\n\n h6.md {\n ", ";\n margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n ", ";\n }\n\n code {\n color: var(--inline-code-color);\n background-color: var(--inline-code-background-color);\n\n border-radius: 2px;\n border: 1px solid var(--global-border-color);\n padding: 0.1em 0.25em 0.2em;\n font-weight: var(--code-font-weight);\n word-break: break-word;\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n }\n\n blockquote {\n margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n border-left: 4px solid var(--global-border-color);\n background-color: var(--bloquote-background-color);\n color: var(--color-content);\n\n & > p:first-child {\n margin-top: 0;\n }\n }\n\n img {\n max-width: 100%;\n box-sizing: content-box;\n margin: 0 auto;\n\n &:only-child {\n display: block;\n }\n }\n\n > ul,\n > p ul {\n > ol,\n > p ol {\n padding-left: 2em;\n margin: 0 0 1em;\n\n ul,\n ol {\n margin-bottom: 0;\n margin-top: 0;\n }\n }\n }\n"])), exports.baseTable, (0, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
|
|
43
43
|
var templateObject_1, templateObject_2, templateObject_3;
|
package/package.json
CHANGED
package/src/Markdown/Heading.tsx
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import React, { createElement, PropsWithChildren } from 'react';
|
|
2
2
|
|
|
3
|
+
import { concatClassNames } from '@theme/utils';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Class name for all MD tags
|
|
7
|
+
*/
|
|
8
|
+
const mdClassName = 'md';
|
|
9
|
+
|
|
3
10
|
const SvgIcon = (
|
|
4
11
|
<svg
|
|
5
12
|
aria-hidden="true"
|
|
@@ -22,14 +29,18 @@ export function Heading({
|
|
|
22
29
|
children,
|
|
23
30
|
}: PropsWithChildren<{ level: number; id: string }>): JSX.Element {
|
|
24
31
|
const linkEl = (
|
|
25
|
-
<a href={`#${id}`} className=
|
|
32
|
+
<a href={`#${id}`} className={concatClassNames('anchor', 'before')}>
|
|
26
33
|
{SvgIcon}
|
|
27
34
|
</a>
|
|
28
35
|
);
|
|
29
36
|
|
|
30
37
|
return createElement(
|
|
31
38
|
`h${level}`,
|
|
32
|
-
{
|
|
39
|
+
{
|
|
40
|
+
id,
|
|
41
|
+
className: concatClassNames('heading-anchor', mdClassName),
|
|
42
|
+
'data-component-name': 'Markdown/Heading/Heading',
|
|
43
|
+
},
|
|
33
44
|
<>
|
|
34
45
|
{linkEl}
|
|
35
46
|
{children}
|
|
@@ -3,7 +3,7 @@ import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
|
|
|
3
3
|
import { typography } from '@theme/utils';
|
|
4
4
|
|
|
5
5
|
export const baseTable = css`
|
|
6
|
-
table {
|
|
6
|
+
table.md {
|
|
7
7
|
display: block;
|
|
8
8
|
width: 100%;
|
|
9
9
|
overflow: auto;
|
|
@@ -13,58 +13,58 @@ export const baseTable = css`
|
|
|
13
13
|
margin-top: 20px;
|
|
14
14
|
margin-bottom: 20px;
|
|
15
15
|
font-size: 14px;
|
|
16
|
-
}
|
|
17
16
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
th,
|
|
18
|
+
td {
|
|
19
|
+
padding: 12px;
|
|
20
|
+
border-bottom: 1px solid var(--global-border-color);
|
|
21
|
+
}
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
th {
|
|
24
|
+
text-align: left;
|
|
25
|
+
font-weight: bold;
|
|
26
|
+
background-color: var(--color-secondary-300);
|
|
27
|
+
}
|
|
29
28
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
tr th:first-child,
|
|
30
|
+
tr td:first-child {
|
|
31
|
+
border-left: 1px solid var(--global-border-color);
|
|
32
|
+
}
|
|
34
33
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
tr td:last-child,
|
|
35
|
+
tr th:last-child {
|
|
36
|
+
border-right: 1px solid var(--global-border-color);
|
|
37
|
+
}
|
|
39
38
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
39
|
+
thead td,
|
|
40
|
+
thead th {
|
|
41
|
+
border-top: 1px solid var(--global-border-color);
|
|
42
|
+
}
|
|
44
43
|
|
|
45
|
-
|
|
44
|
+
/* top-left border */
|
|
46
45
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
thead tr:first-child th:first-child {
|
|
47
|
+
border-top-left-radius: var(--panels-border-radius);
|
|
48
|
+
}
|
|
50
49
|
|
|
51
|
-
|
|
50
|
+
/* top-right border */
|
|
52
51
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
thead tr:first-child th:last-child {
|
|
53
|
+
border-top-right-radius: var(--panels-border-radius);
|
|
54
|
+
border-top: 1px solid var(--global-border-color);
|
|
55
|
+
}
|
|
57
56
|
|
|
58
|
-
|
|
57
|
+
/* bottom-left border */
|
|
59
58
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
tbody tr:last-child td:first-child {
|
|
60
|
+
border-bottom-left-radius: var(--panels-border-radius);
|
|
61
|
+
}
|
|
63
62
|
|
|
64
|
-
|
|
63
|
+
/* bottom-right border */
|
|
65
64
|
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
tbody tr:last-child td:last-child {
|
|
66
|
+
border-bottom-right-radius: var(--panels-border-radius);
|
|
67
|
+
}
|
|
68
68
|
}
|
|
69
69
|
`;
|
|
70
70
|
|
|
@@ -123,12 +123,12 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
|
|
|
123
123
|
max-width: 100%;
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
h1,
|
|
127
|
-
h2,
|
|
128
|
-
h3,
|
|
129
|
-
h4,
|
|
130
|
-
h5,
|
|
131
|
-
h6 {
|
|
126
|
+
h1.md,
|
|
127
|
+
h2.md,
|
|
128
|
+
h3.md,
|
|
129
|
+
h4.md,
|
|
130
|
+
h5.md,
|
|
131
|
+
h6.md {
|
|
132
132
|
font-weight: var(--h-font-weight);
|
|
133
133
|
font-family: var(--h-font-family);
|
|
134
134
|
position: relative;
|
|
@@ -206,9 +206,9 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
|
|
|
206
206
|
}
|
|
207
207
|
}
|
|
208
208
|
|
|
209
|
-
h1 {
|
|
209
|
+
h1.md {
|
|
210
210
|
${typography('h1', 'h')};
|
|
211
|
-
margin: var(--h1-margin-top) var(--h1-margin-bottom);
|
|
211
|
+
margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
|
|
212
212
|
${headingAnchor()};
|
|
213
213
|
|
|
214
214
|
&:first-child {
|
|
@@ -216,33 +216,33 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
|
|
|
216
216
|
}
|
|
217
217
|
}
|
|
218
218
|
|
|
219
|
-
h2 {
|
|
219
|
+
h2.md {
|
|
220
220
|
${typography('h2', 'h')};
|
|
221
|
-
margin: var(--h2-margin-top) var(--h2-margin-bottom);
|
|
221
|
+
margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
|
|
222
222
|
${headingAnchor()};
|
|
223
223
|
}
|
|
224
224
|
|
|
225
|
-
h3 {
|
|
225
|
+
h3.md {
|
|
226
226
|
${typography('h3', 'h')};
|
|
227
|
-
margin: var(--h3-margin-top) var(--h3-margin-bottom);
|
|
227
|
+
margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
|
|
228
228
|
${headingAnchor()};
|
|
229
229
|
}
|
|
230
230
|
|
|
231
|
-
h4 {
|
|
231
|
+
h4.md {
|
|
232
232
|
${typography('h4', 'h')};
|
|
233
|
-
margin: var(--h4-margin-top) var(--h4-margin-bottom);
|
|
233
|
+
margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
|
|
234
234
|
${headingAnchor()};
|
|
235
235
|
}
|
|
236
236
|
|
|
237
|
-
h5 {
|
|
237
|
+
h5.md {
|
|
238
238
|
${typography('h5', 'h')};
|
|
239
|
-
margin: var(--h5-margin-top) var(--h5-margin-bottom);
|
|
239
|
+
margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
|
|
240
240
|
${headingAnchor()};
|
|
241
241
|
}
|
|
242
242
|
|
|
243
|
-
h6 {
|
|
243
|
+
h6.md {
|
|
244
244
|
${typography('h6', 'h')};
|
|
245
|
-
margin: var(--h6-margin-top) var(--h6-margin-bottom);
|
|
245
|
+
margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
|
|
246
246
|
${headingAnchor()};
|
|
247
247
|
}
|
|
248
248
|
|
package/src/utils/index.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function concatClassNames(...args: Array<string | undefined>): string;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.concatClassNames = void 0;
|
|
4
|
+
var SPACE_DELIMITER = ' ';
|
|
5
|
+
function concatClassNames() {
|
|
6
|
+
var args = [];
|
|
7
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
8
|
+
args[_i] = arguments[_i];
|
|
9
|
+
}
|
|
10
|
+
return args
|
|
11
|
+
.map(function (className) { return (className ? className.trim() : className); })
|
|
12
|
+
.filter(Boolean)
|
|
13
|
+
.join(SPACE_DELIMITER);
|
|
14
|
+
}
|
|
15
|
+
exports.concatClassNames = concatClassNames;
|
package/utils/index.d.ts
CHANGED
package/utils/index.js
CHANGED