@ndla/ui 55.0.12-alpha.0 → 55.0.13-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/dist/all-aout.js +0 -0
- package/dist/all.css +1 -0
- package/dist/panda.buildinfo.json +170 -0
- package/dist/styles.css +686 -0
- package/es/Article/Article.js +3 -4
- package/es/Article/ArticleByline.js +9 -9
- package/es/Article/ArticleFootNotes.js +4 -4
- package/es/AudioPlayer/AudioPlayer.js +142 -163
- package/es/AudioPlayer/Controls.js +187 -203
- package/es/AudioPlayer/SpeechControl.js +13 -11
- package/es/BlogPost/BlogPost.js +85 -23
- package/es/CampaignBlock/CampaignBlock.js +3 -4
- package/es/CodeBlock/CodeBlock.js +88 -96
- package/es/ContactBlock/ContactBlock.js +54 -40
- package/es/ContentLoader/index.js +7 -7
- package/es/CopyParagraphButton/CopyParagraphButton.js +4 -4
- package/es/Embed/AudioEmbed.js +5 -9
- package/es/Embed/BrightcoveEmbed.js +12 -15
- package/es/Embed/CodeEmbed.js +58 -10
- package/es/Embed/ConceptEmbed.js +15 -20
- package/es/Embed/ContentLinkEmbed.js +1 -1
- package/es/Embed/EmbedErrorPlaceholder.js +32 -17
- package/es/Embed/ExternalEmbed.js +7 -10
- package/es/Embed/FootnoteEmbed.js +3 -3
- package/es/Embed/H5pEmbed.js +1 -2
- package/es/Embed/IframeEmbed.js +8 -9
- package/es/Embed/ImageEmbed.js +167 -122
- package/es/Embed/RelatedContentEmbed.js +8 -10
- package/es/Embed/UuDisclaimerEmbed.js +2 -2
- package/es/Embed/conceptComponents.js +9 -9
- package/es/ErrorMessage/ErrorMessage.js +1 -1
- package/es/FactBox/FactBox.js +2 -2
- package/es/FileList/File.js +1 -1
- package/es/FileList/Format.js +3 -3
- package/es/FrontpageArticle/FrontpageArticle.js +1 -1
- package/es/Gloss/Gloss.js +9 -11
- package/es/Gloss/GlossExample.js +3 -4
- package/es/Grid/Grid.js +1 -1
- package/es/Image/Image.js +7 -8
- package/es/Image/ImageLink.js +1 -1
- package/es/KeyFigure/KeyFigure.js +2 -2
- package/es/LanguageSelector/LanguageSelector.js +2 -2
- package/es/LetterFilter/LetterFilter.js +1 -1
- package/es/LicenseByline/EmbedByline.js +5 -6
- package/es/LicenseByline/LicenseDescription.js +1 -1
- package/es/LicenseByline/LicenseLink.js +1 -2
- package/es/Messages/MessageBox.js +1 -1
- package/es/Notion/Notion.js +2 -2
- package/es/Notion/NotionImage.js +12 -57
- package/es/RelatedArticleList/RelatedArticleList.js +3 -3
- package/es/ResourceBox/ResourceBox.js +12 -17
- package/es/Search/ActiveFilters.js +1 -1
- package/es/Search/ContentTypeResult.js +9 -6
- package/es/Search/ContentTypeResultStyles.js +1 -1
- package/es/Search/IsPathToHighlight.js +1 -1
- package/es/Search/SearchField.js +6 -8
- package/es/Search/SearchResult.js +14 -19
- package/es/Search/SearchResultSleeve.js +14 -16
- package/es/SnackBar/SnackbarProvider.js +8 -11
- package/es/TagSelector/TagSelector.js +1 -1
- package/es/TagSelector/ariaMessages.js +6 -6
- package/es/TreeStructure/AddFolderButton.js +4 -6
- package/es/TreeStructure/ComboboxButton.js +4 -7
- package/es/TreeStructure/FolderItem.js +12 -15
- package/es/TreeStructure/FolderItems.js +3 -3
- package/es/TreeStructure/TreeStructure.js +9 -12
- package/es/TreeStructure/helperFunctions.js +1 -1
- package/es/ZendeskButton/ZendeskButton.js +55 -0
- package/es/i18n/formatNestedMessages.js +1 -1
- package/es/index.js +2 -1
- package/es/locale/messages-en.js +9 -8
- package/es/locale/messages-nb.js +9 -8
- package/es/locale/messages-nn.js +9 -8
- package/es/locale/messages-se.js +9 -8
- package/es/locale/messages-sma.js +9 -8
- package/es/styles.css +686 -0
- package/es/utils/relativeUrl.js +3 -3
- package/lib/Article/Article.js +3 -4
- package/lib/Article/ArticleByline.js +9 -9
- package/lib/Article/ArticleFootNotes.js +4 -4
- package/lib/AudioPlayer/AudioPlayer.d.ts +1 -2
- package/lib/AudioPlayer/AudioPlayer.js +142 -162
- package/lib/AudioPlayer/Controls.js +190 -205
- package/lib/AudioPlayer/SpeechControl.js +13 -11
- package/lib/BlogPost/BlogPost.d.ts +2 -2
- package/lib/BlogPost/BlogPost.js +85 -24
- package/lib/CampaignBlock/CampaignBlock.js +3 -4
- package/lib/CodeBlock/CodeBlock.d.ts +5 -8
- package/lib/CodeBlock/CodeBlock.js +88 -96
- package/lib/ContactBlock/ContactBlock.js +55 -43
- package/lib/ContentLoader/index.js +7 -7
- package/lib/CopyParagraphButton/CopyParagraphButton.js +4 -4
- package/lib/Embed/AudioEmbed.js +5 -9
- package/lib/Embed/BrightcoveEmbed.js +12 -15
- package/lib/Embed/CodeEmbed.js +56 -8
- package/lib/Embed/ConceptEmbed.js +15 -20
- package/lib/Embed/ContentLinkEmbed.js +1 -1
- package/lib/Embed/EmbedErrorPlaceholder.d.ts +4 -3
- package/lib/Embed/EmbedErrorPlaceholder.js +32 -18
- package/lib/Embed/ExternalEmbed.js +7 -10
- package/lib/Embed/FootnoteEmbed.js +3 -3
- package/lib/Embed/H5pEmbed.js +1 -2
- package/lib/Embed/IframeEmbed.js +8 -9
- package/lib/Embed/ImageEmbed.d.ts +1 -2
- package/lib/Embed/ImageEmbed.js +167 -123
- package/lib/Embed/RelatedContentEmbed.js +8 -10
- package/lib/Embed/UuDisclaimerEmbed.js +2 -2
- package/lib/Embed/conceptComponents.js +9 -9
- package/lib/ErrorMessage/ErrorMessage.js +1 -1
- package/lib/FactBox/FactBox.js +2 -2
- package/lib/FileList/File.js +1 -1
- package/lib/FileList/Format.js +3 -3
- package/lib/FrontpageArticle/FrontpageArticle.js +1 -1
- package/lib/Gloss/Gloss.js +9 -11
- package/lib/Gloss/GlossExample.js +3 -4
- package/lib/Grid/Grid.js +1 -1
- package/lib/Image/Image.js +7 -8
- package/lib/Image/ImageLink.js +1 -1
- package/lib/KeyFigure/KeyFigure.js +2 -2
- package/lib/LanguageSelector/LanguageSelector.js +2 -2
- package/lib/LetterFilter/LetterFilter.js +1 -1
- package/lib/LicenseByline/EmbedByline.js +5 -6
- package/lib/LicenseByline/LicenseDescription.js +1 -1
- package/lib/LicenseByline/LicenseLink.js +1 -2
- package/lib/Messages/MessageBox.js +1 -1
- package/lib/Notion/Notion.js +2 -2
- package/lib/Notion/NotionImage.d.ts +1 -11
- package/lib/Notion/NotionImage.js +12 -59
- package/lib/RelatedArticleList/RelatedArticleList.js +3 -3
- package/lib/ResourceBox/ResourceBox.js +13 -18
- package/lib/Search/ActiveFilters.js +1 -1
- package/lib/Search/ContentTypeResult.js +9 -6
- package/lib/Search/ContentTypeResultStyles.js +1 -1
- package/lib/Search/IsPathToHighlight.js +1 -1
- package/lib/Search/SearchField.js +6 -8
- package/lib/Search/SearchResult.js +14 -19
- package/lib/Search/SearchResultSleeve.js +14 -16
- package/lib/SnackBar/SnackbarProvider.js +8 -11
- package/lib/TagSelector/TagSelector.js +1 -1
- package/lib/TagSelector/ariaMessages.js +6 -6
- package/lib/TreeStructure/AddFolderButton.js +4 -6
- package/lib/TreeStructure/ComboboxButton.js +4 -7
- package/lib/TreeStructure/FolderItem.js +12 -15
- package/lib/TreeStructure/FolderItems.js +3 -3
- package/lib/TreeStructure/TreeStructure.js +9 -12
- package/lib/TreeStructure/helperFunctions.js +1 -1
- package/lib/ZendeskButton/ZendeskButton.d.ts +19 -0
- package/lib/ZendeskButton/ZendeskButton.js +61 -0
- package/lib/i18n/formatNestedMessages.js +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +7 -0
- package/lib/locale/messages-en.d.ts +1 -0
- package/lib/locale/messages-en.js +9 -8
- package/lib/locale/messages-nb.d.ts +1 -0
- package/lib/locale/messages-nb.js +9 -8
- package/lib/locale/messages-nn.d.ts +1 -0
- package/lib/locale/messages-nn.js +9 -8
- package/lib/locale/messages-se.d.ts +1 -0
- package/lib/locale/messages-se.js +9 -8
- package/lib/locale/messages-sma.d.ts +1 -0
- package/lib/locale/messages-sma.js +9 -8
- package/lib/styles.css +686 -0
- package/lib/types.d.ts +1 -0
- package/lib/utils/relativeUrl.js +3 -3
- package/package.json +17 -12
- package/src/AudioPlayer/AudioPlayer.tsx +139 -176
- package/src/AudioPlayer/Controls.tsx +210 -250
- package/src/AudioPlayer/SpeechControl.tsx +9 -7
- package/src/BlogPost/BlogPost.tsx +82 -58
- package/src/CodeBlock/CodeBlock.stories.tsx +0 -43
- package/src/CodeBlock/CodeBlock.tsx +91 -202
- package/src/ContactBlock/ContactBlock.tsx +10 -2
- package/src/Embed/CodeEmbed.stories.tsx +95 -0
- package/src/Embed/CodeEmbed.tsx +62 -7
- package/src/Embed/ConceptEmbed.tsx +1 -9
- package/src/Embed/EmbedErrorPlaceholder.tsx +31 -28
- package/src/Embed/ImageEmbed.stories.tsx +53 -11
- package/src/Embed/ImageEmbed.tsx +162 -166
- package/src/Notion/NotionImage.tsx +4 -54
- package/src/ResourceBox/ResourceBox.tsx +3 -15
- package/src/Search/ContentTypeResult.tsx +9 -3
- package/src/Search/SearchResultSleeve.tsx +5 -2
- package/src/ZendeskButton/ZendeskButton.tsx +58 -0
- package/src/index.ts +4 -0
- package/src/locale/messages-en.ts +1 -0
- package/src/locale/messages-nb.ts +1 -0
- package/src/locale/messages-nn.ts +1 -0
- package/src/locale/messages-se.ts +1 -0
- package/src/locale/messages-sma.ts +1 -0
- package/src/types.ts +2 -0
- package/src/Image/__tests__/Image-test.tsx +0 -66
- package/src/Image/__tests__/__snapshots__/Image-test.tsx.snap +0 -194
|
@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _reactI18next = require("react-i18next");
|
|
9
|
-
var _button = require("@ndla/button");
|
|
10
9
|
var _common = require("@ndla/icons/common");
|
|
11
|
-
var
|
|
10
|
+
var _primitives = require("@ndla/primitives");
|
|
12
11
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
13
12
|
/**
|
|
14
13
|
* Copyright (c) 2021-present, NDLA.
|
|
@@ -44,15 +43,18 @@ const SpeechControl = _ref => {
|
|
|
44
43
|
src: src,
|
|
45
44
|
title: title,
|
|
46
45
|
preload: "metadata"
|
|
47
|
-
}), (0, _jsxRuntime.
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
46
|
+
}), (0, _jsxRuntime.jsxs)(_primitives.TooltipRoot, {
|
|
47
|
+
children: [(0, _jsxRuntime.jsx)(_primitives.TooltipTrigger, {
|
|
48
|
+
asChild: true,
|
|
49
|
+
children: (0, _jsxRuntime.jsx)(_primitives.IconButton, {
|
|
50
|
+
variant: "tertiary",
|
|
51
|
+
"aria-label": t(`${type}.play`),
|
|
52
|
+
onClick: togglePlay,
|
|
53
|
+
children: (0, _jsxRuntime.jsx)(_common.VolumeUp, {})
|
|
54
|
+
})
|
|
55
|
+
}), (0, _jsxRuntime.jsx)(_primitives.TooltipContent, {
|
|
56
|
+
children: t(`${type}.play`)
|
|
57
|
+
})]
|
|
56
58
|
})]
|
|
57
59
|
});
|
|
58
60
|
};
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
-
import { HeadingLevel } from "
|
|
8
|
+
import { HeadingLevel } from "../types";
|
|
9
9
|
export interface Props {
|
|
10
10
|
title: string;
|
|
11
11
|
author?: string;
|
|
@@ -18,5 +18,5 @@ export interface Props {
|
|
|
18
18
|
};
|
|
19
19
|
path?: string;
|
|
20
20
|
}
|
|
21
|
-
declare const BlogPost: ({ title, author, url, metaImage, headingLevel: Heading, size, path }: Props) => import("
|
|
21
|
+
declare const BlogPost: ({ title, author, url, metaImage, headingLevel: Heading, size, path }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
export default BlogPost;
|
package/lib/BlogPost/BlogPost.js
CHANGED
|
@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _base = _interopRequireDefault(require("@emotion/styled/base"));
|
|
8
7
|
var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
|
|
9
8
|
var _reactI18next = require("react-i18next");
|
|
10
|
-
var
|
|
11
|
-
var _core = require("@ndla/core");
|
|
9
|
+
var _primitives = require("@ndla/primitives");
|
|
12
10
|
var _safelink = require("@ndla/safelink");
|
|
11
|
+
var _jsx2 = require("@ndla/styled-system/jsx");
|
|
13
12
|
var _relativeUrl = require("../utils/relativeUrl");
|
|
14
13
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
15
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -21,23 +20,80 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
21
20
|
*
|
|
22
21
|
*/
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
23
|
+
const Container = (0, _jsx2.styled)(_safelink.SafeLink, {
|
|
24
|
+
base: {
|
|
25
|
+
display: "flex",
|
|
26
|
+
flexDirection: "column",
|
|
27
|
+
color: "text.default",
|
|
28
|
+
backgroundColor: "background.default",
|
|
29
|
+
gap: "medium",
|
|
30
|
+
border: "1px solid",
|
|
31
|
+
borderColor: "stroke.subtle",
|
|
32
|
+
borderRadius: "xsmall",
|
|
33
|
+
transitionDuration: "fast",
|
|
34
|
+
transitionProperty: "background-color, border-color, max-width",
|
|
35
|
+
transitionTimingFunction: "default",
|
|
36
|
+
height: "100%",
|
|
37
|
+
"&:hover, &:focus-visible": {
|
|
38
|
+
borderColor: "stroke.hover",
|
|
39
|
+
backgroundColor: "surface.actionSubtle.hover",
|
|
40
|
+
"& h1, h2, h3, h4, h5, h6": {
|
|
41
|
+
textDecoration: "underline"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
defaultVariants: {
|
|
46
|
+
size: "normal"
|
|
47
|
+
},
|
|
48
|
+
variants: {
|
|
49
|
+
// TODO: Reconsider these sizes. Maybe they should match up with surface?
|
|
50
|
+
size: {
|
|
51
|
+
normal: {
|
|
52
|
+
paddingBlock: "medium",
|
|
53
|
+
paddingInline: "medium",
|
|
54
|
+
tabletWide: {
|
|
55
|
+
maxWidth: "350px"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
large: {
|
|
59
|
+
paddingBlock: "xlarge",
|
|
60
|
+
paddingInline: "xxlarge",
|
|
61
|
+
tabletWide: {
|
|
62
|
+
maxWidth: "532px"
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
// TODO: Reconsider this once we handle SafeLink
|
|
69
|
+
{
|
|
70
|
+
baseComponent: true
|
|
71
|
+
});
|
|
72
|
+
const AuthorContainer = (0, _jsx2.styled)("div", {
|
|
73
|
+
base: {
|
|
74
|
+
display: "flex",
|
|
75
|
+
alignItems: "center",
|
|
76
|
+
gap: "xsmall",
|
|
77
|
+
textTransform: "uppercase",
|
|
78
|
+
textStyle: "body.large"
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
const StyledImg = (0, _jsx2.styled)("img", {
|
|
82
|
+
base: {
|
|
83
|
+
borderRadius: "xsmall",
|
|
84
|
+
flex: "1",
|
|
85
|
+
objectFit: "cover",
|
|
86
|
+
width: "100%",
|
|
87
|
+
height: "100%",
|
|
88
|
+
border: "0"
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
const StyledHeading = (0, _jsx2.styled)(_primitives.Heading, {
|
|
92
|
+
base: {
|
|
93
|
+
display: "inline-block",
|
|
94
|
+
width: "fit-content"
|
|
95
|
+
}
|
|
96
|
+
});
|
|
41
97
|
const BlogPost = _ref => {
|
|
42
98
|
let {
|
|
43
99
|
title,
|
|
@@ -56,12 +112,17 @@ const BlogPost = _ref => {
|
|
|
56
112
|
return (0, _jsxRuntime.jsxs)(Container, {
|
|
57
113
|
"data-size": size,
|
|
58
114
|
to: href,
|
|
59
|
-
|
|
115
|
+
size: size,
|
|
116
|
+
children: [(0, _jsxRuntime.jsx)(StyledHeading, {
|
|
60
117
|
className: "blog-title",
|
|
61
|
-
|
|
62
|
-
|
|
118
|
+
asChild: true,
|
|
119
|
+
consumeCss: true,
|
|
120
|
+
textStyle: "title.large",
|
|
121
|
+
children: (0, _jsxRuntime.jsx)(Heading, {
|
|
122
|
+
children: (0, _htmlReactParser.default)(title)
|
|
123
|
+
})
|
|
63
124
|
}), (0, _jsxRuntime.jsx)(StyledImg, {
|
|
64
|
-
src:
|
|
125
|
+
src: `${metaImage.url}?width=${imageWidth}`,
|
|
65
126
|
alt: metaImage.alt
|
|
66
127
|
}), !!author && (0, _jsxRuntime.jsx)(AuthorContainer, {
|
|
67
128
|
"aria-label": t("article.writtenBy", {
|
|
@@ -68,7 +68,6 @@ const TextWrapper = /*#__PURE__*/(0, _base.default)("div", {
|
|
|
68
68
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
69
69
|
});
|
|
70
70
|
const CampaignBlock = _ref => {
|
|
71
|
-
var _url$text;
|
|
72
71
|
let {
|
|
73
72
|
title,
|
|
74
73
|
image,
|
|
@@ -84,7 +83,7 @@ const CampaignBlock = _ref => {
|
|
|
84
83
|
"data-type": "campaign-block",
|
|
85
84
|
"data-image-side": imageSide,
|
|
86
85
|
children: [image && (0, _jsxRuntime.jsx)(StyledImg, {
|
|
87
|
-
src:
|
|
86
|
+
src: `${image.src}?width=240`,
|
|
88
87
|
height: 200,
|
|
89
88
|
width: 240,
|
|
90
89
|
alt: image.alt
|
|
@@ -94,9 +93,9 @@ const CampaignBlock = _ref => {
|
|
|
94
93
|
children: (0, _htmlReactParser.default)(title)
|
|
95
94
|
}), (0, _jsxRuntime.jsx)(StyledDescription, {
|
|
96
95
|
children: (0, _htmlReactParser.default)(description)
|
|
97
|
-
}), !!
|
|
96
|
+
}), !!url?.url && (0, _jsxRuntime.jsxs)(StyledLink, {
|
|
98
97
|
to: (0, _relativeUrl.getPossiblyRelativeUrl)(url.url, path),
|
|
99
|
-
children: [(0, _htmlReactParser.default)(
|
|
98
|
+
children: [(0, _htmlReactParser.default)(url.text ?? ""), (0, _jsxRuntime.jsx)(_common.Forward, {})]
|
|
100
99
|
})]
|
|
101
100
|
})]
|
|
102
101
|
});
|
|
@@ -5,14 +5,11 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
-
import {
|
|
9
|
-
type
|
|
10
|
-
|
|
8
|
+
import { type ComponentPropsWithRef } from "react";
|
|
9
|
+
import { type JsxStyleProps } from "@ndla/styled-system/types";
|
|
10
|
+
interface Props extends JsxStyleProps, ComponentPropsWithRef<"pre"> {
|
|
11
11
|
highlightedCode: string;
|
|
12
12
|
format: string;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
showCopy?: boolean;
|
|
16
|
-
};
|
|
17
|
-
export declare const Codeblock: ({ actionButton, code, highlightedCode, format, showCopy, title }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
}
|
|
14
|
+
export declare const Codeblock: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLPreElement>>;
|
|
18
15
|
export default Codeblock;
|
|
@@ -4,118 +4,110 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.Codeblock = void 0;
|
|
7
|
-
var _base = _interopRequireDefault(require("@emotion/styled/base"));
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var _core = require("@ndla/core");
|
|
12
|
-
var _action = require("@ndla/icons/action");
|
|
13
|
-
var _editor = require("@ndla/icons/editor");
|
|
14
|
-
var _util = require("@ndla/util");
|
|
15
|
-
var _codeLanguageOptions = require("./codeLanguageOptions");
|
|
8
|
+
var _css = require("@ndla/styled-system/css");
|
|
9
|
+
var _jsx2 = require("@ndla/styled-system/jsx");
|
|
16
10
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
17
|
-
|
|
18
|
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /**
|
|
11
|
+
/**
|
|
19
12
|
* Copyright (c) 2020-present, NDLA.
|
|
20
13
|
*
|
|
21
14
|
* This source code is licensed under the GPLv3 license found in the
|
|
22
15
|
* LICENSE file in the root directory of this source tree.
|
|
23
16
|
*
|
|
24
17
|
*/
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
18
|
+
|
|
19
|
+
const Pre = (0, _jsx2.styled)("pre", {
|
|
20
|
+
base: {
|
|
21
|
+
border: "1px solid",
|
|
22
|
+
borderColor: "stroke.subtle",
|
|
23
|
+
borderLeft: "4px solid",
|
|
24
|
+
borderLeftColor: "stroke.default",
|
|
25
|
+
borderRadius: "xsmall",
|
|
26
|
+
boxSizing: "border-box",
|
|
27
|
+
overflowX: "auto",
|
|
28
|
+
textStyle: "label.medium",
|
|
29
|
+
fontFamily: "code",
|
|
30
|
+
display: "block",
|
|
31
|
+
whiteSpace: "pre",
|
|
32
|
+
"& .linenumber": {
|
|
33
|
+
display: "inline-block",
|
|
34
|
+
paddingBlock: "0",
|
|
35
|
+
paddingInline: "small",
|
|
36
|
+
borderRight: "1px solid",
|
|
37
|
+
borderColor: "stroke.subtle",
|
|
38
|
+
width: "xxlarge",
|
|
39
|
+
textAlign: "right",
|
|
40
|
+
marginInlineEnd: "xsmall"
|
|
41
|
+
},
|
|
42
|
+
"& .linenumber[data-first]": {
|
|
43
|
+
paddingBlockStart: "xsmall"
|
|
44
|
+
},
|
|
45
|
+
"& .linenumber[data-last]": {
|
|
46
|
+
paddingBlockEnd: "xsmall"
|
|
47
|
+
},
|
|
48
|
+
// The remaining css is copied from the coy theme in prismjs. A lot of css is omitted due to styling clashes
|
|
49
|
+
"& .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata": {
|
|
50
|
+
color: "#7d8b99"
|
|
51
|
+
},
|
|
52
|
+
"& .token.punctuation": {
|
|
53
|
+
color: "#5f6364"
|
|
54
|
+
},
|
|
55
|
+
"& .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted": {
|
|
56
|
+
color: "#c92c2c"
|
|
57
|
+
},
|
|
58
|
+
"& .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted": {
|
|
59
|
+
color: "#2f9c0a"
|
|
60
|
+
},
|
|
61
|
+
"& .token.operator, .token.entity, .token.url, .token.variable": {
|
|
62
|
+
color: "#a67f59",
|
|
63
|
+
background: "rgba(255, 255, 255, 0.5)"
|
|
64
|
+
},
|
|
65
|
+
"& .token.atrule, .token.attr-value, .token.keyword, .token.class-name": {
|
|
66
|
+
color: "#1990b8"
|
|
67
|
+
},
|
|
68
|
+
"& .token.regex, .token.important": {
|
|
69
|
+
color: "#e90"
|
|
70
|
+
},
|
|
71
|
+
"& .language-css .token.string, .style .token.string": {
|
|
72
|
+
color: "#a67f59",
|
|
73
|
+
background: "rgba(255, 255, 255, 0.5)"
|
|
74
|
+
},
|
|
75
|
+
"& .token.important": {
|
|
76
|
+
fontWeight: "normal"
|
|
77
|
+
},
|
|
78
|
+
"& .token.bold": {
|
|
79
|
+
fontWeight: "bold"
|
|
80
|
+
},
|
|
81
|
+
"& .token.italic": {
|
|
82
|
+
fontStyle: "italic"
|
|
83
|
+
},
|
|
84
|
+
"& .token.entity": {
|
|
85
|
+
cursor: "help"
|
|
86
|
+
},
|
|
87
|
+
"& .token.namespace": {
|
|
88
|
+
opacity: "0.7"
|
|
89
|
+
}
|
|
61
90
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
const Codeblock = _ref => {
|
|
91
|
+
});
|
|
92
|
+
const Codeblock = exports.Codeblock = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
65
93
|
let {
|
|
66
|
-
actionButton,
|
|
67
|
-
code,
|
|
68
94
|
highlightedCode,
|
|
69
95
|
format,
|
|
70
|
-
|
|
71
|
-
|
|
96
|
+
className,
|
|
97
|
+
...props
|
|
72
98
|
} = _ref;
|
|
73
|
-
const {
|
|
74
|
-
t
|
|
75
|
-
} = (0, _reactI18next.useTranslation)();
|
|
76
|
-
const [isCopied, setIsCopied] = (0, _react.useState)(false);
|
|
77
99
|
const codeWithLineNumbers = (0, _react.useMemo)(() => {
|
|
78
100
|
return highlightedCode.split("\n").map((line, i, arr) => {
|
|
79
|
-
return
|
|
101
|
+
return `<span><span class="linenumber" ${i === 0 ? 'data-first=""' : ""} ${i === arr.length - 1 ? 'data-last=""' : ""}>${i + 1}</span>${line}</span>`;
|
|
80
102
|
}).join("\n");
|
|
81
103
|
}, [highlightedCode]);
|
|
82
|
-
(0,
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
}, [isCopied]);
|
|
91
|
-
return (0, _jsxRuntime.jsxs)(Wrapper, {
|
|
92
|
-
children: [(0, _jsxRuntime.jsxs)(TitleBar, {
|
|
93
|
-
children: [(0, _jsxRuntime.jsx)(Title, {
|
|
94
|
-
children: title || getTitleFromFormat(format)
|
|
95
|
-
}), actionButton]
|
|
96
|
-
}), (0, _jsxRuntime.jsx)(StyledPre, {
|
|
97
|
-
children: (0, _jsxRuntime.jsx)("code", {
|
|
98
|
-
className: "language-".concat(format),
|
|
99
|
-
dangerouslySetInnerHTML: {
|
|
100
|
-
__html: codeWithLineNumbers
|
|
101
|
-
}
|
|
102
|
-
})
|
|
103
|
-
}), showCopy && (0, _jsxRuntime.jsxs)(_button.ButtonV2, {
|
|
104
|
-
title: t("codeBlock.copyButton"),
|
|
105
|
-
disabled: isCopied,
|
|
106
|
-
"data-copied-title": t("codeBlock.copiedCode"),
|
|
107
|
-
"data-copy-string": code,
|
|
108
|
-
onClick: () => {
|
|
109
|
-
(0, _util.copyTextToClipboard)(code);
|
|
110
|
-
setIsCopied(true);
|
|
111
|
-
},
|
|
112
|
-
children: [isCopied ? (0, _jsxRuntime.jsx)(_editor.Done, {
|
|
113
|
-
"aria-hidden": "true"
|
|
114
|
-
}) : (0, _jsxRuntime.jsx)(_action.Copy, {
|
|
115
|
-
"aria-hidden": "true"
|
|
116
|
-
}), " ", isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")]
|
|
117
|
-
})]
|
|
104
|
+
return (0, _jsxRuntime.jsx)(Pre, {
|
|
105
|
+
className: (0, _css.cx)(`language-${format}`, className),
|
|
106
|
+
...props,
|
|
107
|
+
dangerouslySetInnerHTML: {
|
|
108
|
+
__html: codeWithLineNumbers
|
|
109
|
+
},
|
|
110
|
+
ref: ref
|
|
118
111
|
});
|
|
119
|
-
};
|
|
120
|
-
exports.Codeblock = Codeblock;
|
|
112
|
+
});
|
|
121
113
|
var _default = exports.default = Codeblock;
|