@ndla/ui 56.0.8-alpha.0 → 56.0.10-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/panda.buildinfo.json +7 -1
- package/dist/styles.css +28 -4
- package/es/CampaignBlock/CampaignBlock.js +27 -32
- package/es/CopyParagraphButton/CopyParagraphButton.js +26 -19
- package/es/Embed/RelatedContentEmbed.js +1 -4
- package/es/LinkBlock/LinkBlock.js +5 -6
- package/es/ResourceBox/ResourceBox.js +2 -2
- package/es/index.js +1 -3
- package/es/locale/messages-en.js +5 -1
- package/es/locale/messages-nb.js +5 -1
- package/es/locale/messages-nn.js +5 -1
- package/es/locale/messages-se.js +5 -1
- package/es/locale/messages-sma.js +5 -1
- package/es/styles.css +28 -4
- package/lib/CampaignBlock/CampaignBlock.js +27 -32
- package/lib/CopyParagraphButton/CopyParagraphButton.js +28 -20
- package/lib/Embed/RelatedContentEmbed.js +1 -5
- package/lib/LinkBlock/LinkBlock.js +5 -6
- package/lib/ResourceBox/ResourceBox.js +2 -2
- package/lib/index.d.ts +1 -3
- package/lib/index.js +6 -26
- package/lib/locale/messages-en.d.ts +4 -0
- package/lib/locale/messages-en.js +5 -1
- package/lib/locale/messages-nb.d.ts +4 -0
- package/lib/locale/messages-nb.js +5 -1
- package/lib/locale/messages-nn.d.ts +4 -0
- package/lib/locale/messages-nn.js +5 -1
- package/lib/locale/messages-se.d.ts +4 -0
- package/lib/locale/messages-se.js +5 -1
- package/lib/locale/messages-sma.d.ts +4 -0
- package/lib/locale/messages-sma.js +5 -1
- package/lib/styles.css +28 -4
- package/package.json +12 -17
- package/src/CampaignBlock/CampaignBlock.tsx +1 -2
- package/src/CopyParagraphButton/CopyParagraphButton.tsx +33 -35
- package/src/Embed/RelatedContentEmbed.tsx +1 -7
- package/src/LinkBlock/LinkBlock.tsx +5 -4
- package/src/ResourceBox/ResourceBox.tsx +2 -2
- package/src/index.ts +1 -7
- package/src/locale/messages-en.ts +4 -0
- package/src/locale/messages-nb.ts +4 -0
- package/src/locale/messages-nn.ts +4 -0
- package/src/locale/messages-se.ts +4 -0
- package/src/locale/messages-sma.ts +4 -0
- package/es/ContentPlaceholder/ContentPlaceholder.js +0 -38
- package/es/ContentPlaceholder/index.js +0 -10
- package/es/FrontpageArticle/FrontpageArticle.js +0 -70
- package/es/FrontpageArticle/index.js +0 -11
- package/lib/ContentPlaceholder/ContentPlaceholder.d.ts +0 -9
- package/lib/ContentPlaceholder/ContentPlaceholder.js +0 -43
- package/lib/ContentPlaceholder/index.d.ts +0 -9
- package/lib/ContentPlaceholder/index.js +0 -16
- package/lib/FrontpageArticle/FrontpageArticle.d.ts +0 -20
- package/lib/FrontpageArticle/FrontpageArticle.js +0 -78
- package/lib/FrontpageArticle/index.d.ts +0 -10
- package/lib/FrontpageArticle/index.js +0 -29
- package/src/ContentPlaceholder/ContentPlaceholder.tsx +0 -67
- package/src/ContentPlaceholder/index.ts +0 -11
- package/src/FrontpageArticle/FrontpageArticle.tsx +0 -87
- package/src/FrontpageArticle/index.ts +0 -13
|
@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _dateFns = require("date-fns");
|
|
8
|
-
var _locale = require("date-fns/locale");
|
|
9
7
|
var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
|
|
10
8
|
var _react = require("react");
|
|
11
9
|
var _common = require("@ndla/icons/common");
|
|
@@ -83,10 +81,11 @@ const LinkBlock = _ref => {
|
|
|
83
81
|
const href = (0, _relativeUrl.getPossiblyRelativeUrl)(url, path);
|
|
84
82
|
const formattedDate = (0, _react.useMemo)(() => {
|
|
85
83
|
if (!date) return null;
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
84
|
+
return new Intl.DateTimeFormat(articleLanguage, {
|
|
85
|
+
day: "2-digit",
|
|
86
|
+
month: "long",
|
|
87
|
+
year: "numeric"
|
|
88
|
+
}).format(new Date(date));
|
|
90
89
|
}, [date, articleLanguage]);
|
|
91
90
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSafeLink, {
|
|
92
91
|
to: href,
|
|
@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.ResourceBox = void 0;
|
|
7
|
+
var _core = require("@ndla/core");
|
|
7
8
|
var _common = require("@ndla/icons/common");
|
|
8
9
|
var _primitives = require("@ndla/primitives");
|
|
9
10
|
var _safelink = require("@ndla/safelink");
|
|
10
11
|
var _jsx2 = require("@ndla/styled-system/jsx");
|
|
11
|
-
var _tokens = require("@ndla/styled-system/tokens");
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
13
|
/**
|
|
14
14
|
* Copyright (c) 2022-present, NDLA.
|
|
@@ -79,7 +79,7 @@ const ResourceBox = _ref => {
|
|
|
79
79
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
|
|
80
80
|
src: image.src,
|
|
81
81
|
alt: image.alt,
|
|
82
|
-
sizes: `(min-width: ${
|
|
82
|
+
sizes: `(min-width: ${_core.breakpoints.desktop}) 150px, (max-width: ${_core.breakpoints.tablet} ) 400px, 200px`
|
|
83
83
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
|
|
84
84
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
|
|
85
85
|
textStyle: "label.large",
|
package/lib/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, } from "./Embed";
|
|
9
9
|
export { LicenseLink, EmbedByline } from "./LicenseByline";
|
|
10
|
-
export { ArticleByline, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleActionWrapper, ArticleTitle, ArticlePadding, } from "./Article";
|
|
10
|
+
export { ArticleByline, ArticleBylineAccordionItem, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleActionWrapper, ArticleTitle, ArticlePadding, } from "./Article";
|
|
11
11
|
export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
|
|
12
12
|
export { default as ContentLoader } from "./ContentLoader";
|
|
13
13
|
export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";
|
|
@@ -32,7 +32,6 @@ export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBa
|
|
|
32
32
|
export type { ContentTypeBadgeProps, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
|
|
33
33
|
export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap, } from "./ContentTypeBadge/ContentTypeBadgeNew";
|
|
34
34
|
export { default as CopyParagraphButton } from "./CopyParagraphButton";
|
|
35
|
-
export { default as ContentPlaceholder } from "./ContentPlaceholder";
|
|
36
35
|
export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput, } from "./TagSelector/TagSelector";
|
|
37
36
|
export { TreeStructure } from "./TreeStructure";
|
|
38
37
|
export type { TreeStructureProps } from "./TreeStructure";
|
|
@@ -45,7 +44,6 @@ export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./Embed"
|
|
|
45
44
|
export { CampaignBlock } from "./CampaignBlock";
|
|
46
45
|
export { Grid, GridParallaxItem } from "./Grid";
|
|
47
46
|
export type { GridType } from "./Grid";
|
|
48
|
-
export { default as FrontpageArticle, FRONTPAGE_ARTICLE_MAX_WIDTH, WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH, } from "./FrontpageArticle";
|
|
49
47
|
export type { ProgrammeV2 } from "./ProgrammeCard";
|
|
50
48
|
export { Gloss, GlossExample } from "./Gloss";
|
|
51
49
|
export { LinkBlock, LinkBlockSection } from "./LinkBlock";
|
package/lib/index.js
CHANGED
|
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ArticleByline", {
|
|
|
21
21
|
return _Article.ArticleByline;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
+
Object.defineProperty(exports, "ArticleBylineAccordionItem", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _Article.ArticleBylineAccordionItem;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
24
30
|
Object.defineProperty(exports, "ArticleContent", {
|
|
25
31
|
enumerable: true,
|
|
26
32
|
get: function () {
|
|
@@ -171,12 +177,6 @@ Object.defineProperty(exports, "ContentLoader", {
|
|
|
171
177
|
return _ContentLoader.default;
|
|
172
178
|
}
|
|
173
179
|
});
|
|
174
|
-
Object.defineProperty(exports, "ContentPlaceholder", {
|
|
175
|
-
enumerable: true,
|
|
176
|
-
get: function () {
|
|
177
|
-
return _ContentPlaceholder.default;
|
|
178
|
-
}
|
|
179
|
-
});
|
|
180
180
|
Object.defineProperty(exports, "ContentTypeBadge", {
|
|
181
181
|
enumerable: true,
|
|
182
182
|
get: function () {
|
|
@@ -231,12 +231,6 @@ Object.defineProperty(exports, "ExternalEmbed", {
|
|
|
231
231
|
return _Embed.ExternalEmbed;
|
|
232
232
|
}
|
|
233
233
|
});
|
|
234
|
-
Object.defineProperty(exports, "FRONTPAGE_ARTICLE_MAX_WIDTH", {
|
|
235
|
-
enumerable: true,
|
|
236
|
-
get: function () {
|
|
237
|
-
return _FrontpageArticle.FRONTPAGE_ARTICLE_MAX_WIDTH;
|
|
238
|
-
}
|
|
239
|
-
});
|
|
240
234
|
Object.defineProperty(exports, "FactBox", {
|
|
241
235
|
enumerable: true,
|
|
242
236
|
get: function () {
|
|
@@ -273,12 +267,6 @@ Object.defineProperty(exports, "FootnoteEmbed", {
|
|
|
273
267
|
return _Embed.FootnoteEmbed;
|
|
274
268
|
}
|
|
275
269
|
});
|
|
276
|
-
Object.defineProperty(exports, "FrontpageArticle", {
|
|
277
|
-
enumerable: true,
|
|
278
|
-
get: function () {
|
|
279
|
-
return _FrontpageArticle.default;
|
|
280
|
-
}
|
|
281
|
-
});
|
|
282
270
|
Object.defineProperty(exports, "Gloss", {
|
|
283
271
|
enumerable: true,
|
|
284
272
|
get: function () {
|
|
@@ -507,12 +495,6 @@ Object.defineProperty(exports, "UuDisclaimerEmbed", {
|
|
|
507
495
|
return _Embed.UuDisclaimerEmbed;
|
|
508
496
|
}
|
|
509
497
|
});
|
|
510
|
-
Object.defineProperty(exports, "WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH", {
|
|
511
|
-
enumerable: true,
|
|
512
|
-
get: function () {
|
|
513
|
-
return _FrontpageArticle.WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH;
|
|
514
|
-
}
|
|
515
|
-
});
|
|
516
498
|
Object.defineProperty(exports, "ZendeskButton", {
|
|
517
499
|
enumerable: true,
|
|
518
500
|
get: function () {
|
|
@@ -651,7 +633,6 @@ var _Layout = _interopRequireWildcard(require("./Layout"));
|
|
|
651
633
|
var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
|
|
652
634
|
var _ContentTypeBadgeNew = require("./ContentTypeBadge/ContentTypeBadgeNew");
|
|
653
635
|
var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
|
|
654
|
-
var _ContentPlaceholder = _interopRequireDefault(require("./ContentPlaceholder"));
|
|
655
636
|
var _TagSelector = require("./TagSelector/TagSelector");
|
|
656
637
|
var _TreeStructure = require("./TreeStructure");
|
|
657
638
|
var _BlogPost = require("./BlogPost");
|
|
@@ -660,7 +641,6 @@ var _KeyFigure = require("./KeyFigure");
|
|
|
660
641
|
var _ContactBlock = require("./ContactBlock");
|
|
661
642
|
var _CampaignBlock = require("./CampaignBlock");
|
|
662
643
|
var _Grid = require("./Grid");
|
|
663
|
-
var _FrontpageArticle = _interopRequireWildcard(require("./FrontpageArticle"));
|
|
664
644
|
var _Gloss = require("./Gloss");
|
|
665
645
|
var _LinkBlock = require("./LinkBlock");
|
|
666
646
|
var _CodeBlock = require("./CodeBlock");
|
|
@@ -1102,7 +1102,11 @@ const messages = {
|
|
|
1102
1102
|
markAll: "Mark all as read",
|
|
1103
1103
|
subscribe: "You will now be notified of new replies to this topic",
|
|
1104
1104
|
unsubscribe: "You have turned off notification of new replies to this topic",
|
|
1105
|
-
commentedOn: "commented on the post <i>{{title}}</i>"
|
|
1105
|
+
commentedOn: "commented on the post <i>{{title}}</i>",
|
|
1106
|
+
button: {
|
|
1107
|
+
show: "View notifications",
|
|
1108
|
+
showNew: "View {{count}} new notifications"
|
|
1109
|
+
}
|
|
1106
1110
|
},
|
|
1107
1111
|
topicsBy: "Topics by",
|
|
1108
1112
|
admin: {
|
|
@@ -1102,7 +1102,11 @@ const messages = {
|
|
|
1102
1102
|
markAll: "Merk alle som lest",
|
|
1103
1103
|
subscribe: "Du får nå varsling om nye svar på dette innlegget",
|
|
1104
1104
|
unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
|
|
1105
|
-
commentedOn: "svarte på innlegget <i>{{title}}</i>"
|
|
1105
|
+
commentedOn: "svarte på innlegget <i>{{title}}</i>",
|
|
1106
|
+
button: {
|
|
1107
|
+
show: "Vis varslinger",
|
|
1108
|
+
showNew: "Vis {{count}} nye varslinger"
|
|
1109
|
+
}
|
|
1106
1110
|
},
|
|
1107
1111
|
topicsBy: "Innlegg av",
|
|
1108
1112
|
admin: {
|
|
@@ -1102,7 +1102,11 @@ const messages = {
|
|
|
1102
1102
|
markAll: "Merk alle som lest",
|
|
1103
1103
|
subscribe: "Du får no varsling om nye svar på dette innlegget",
|
|
1104
1104
|
unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
|
|
1105
|
-
commentedOn: "svarte på innlegget <i>{{title}}</i>"
|
|
1105
|
+
commentedOn: "svarte på innlegget <i>{{title}}</i>",
|
|
1106
|
+
button: {
|
|
1107
|
+
show: "Vis varsler",
|
|
1108
|
+
showNew: "Vis {{count}} nye varsler"
|
|
1109
|
+
}
|
|
1106
1110
|
},
|
|
1107
1111
|
topicsBy: "Innlegg av",
|
|
1108
1112
|
admin: {
|
|
@@ -1102,7 +1102,11 @@ const messages = {
|
|
|
1102
1102
|
markAll: "Merk alle som lest",
|
|
1103
1103
|
subscribe: "Du får nå varsling om nye svar på dette innlegget",
|
|
1104
1104
|
unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
|
|
1105
|
-
commentedOn: "svarte på innlegget <i>{{title}}</i>"
|
|
1105
|
+
commentedOn: "svarte på innlegget <i>{{title}}</i>",
|
|
1106
|
+
button: {
|
|
1107
|
+
show: "Vis varslinger",
|
|
1108
|
+
showNew: "Vis {{count}} nye varslinger"
|
|
1109
|
+
}
|
|
1106
1110
|
},
|
|
1107
1111
|
topicsBy: "Innlegg av",
|
|
1108
1112
|
admin: {
|
|
@@ -1102,7 +1102,11 @@ const messages = {
|
|
|
1102
1102
|
markAll: "Merk alle som lest",
|
|
1103
1103
|
subscribe: "Du får nå varsling om nye svar på dette innlegget",
|
|
1104
1104
|
unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
|
|
1105
|
-
commentedOn: "svarte på innlegget <i>{{title}}</i>"
|
|
1105
|
+
commentedOn: "svarte på innlegget <i>{{title}}</i>",
|
|
1106
|
+
button: {
|
|
1107
|
+
show: "Vis varslinger",
|
|
1108
|
+
showNew: "Vis {{count}} nye varslinger"
|
|
1109
|
+
}
|
|
1106
1110
|
},
|
|
1107
1111
|
topicsBy: "Innlegg av",
|
|
1108
1112
|
admin: {
|
package/lib/styles.css
CHANGED
|
@@ -426,6 +426,14 @@
|
|
|
426
426
|
border: 2px solid;
|
|
427
427
|
}
|
|
428
428
|
|
|
429
|
+
.op_0 {
|
|
430
|
+
opacity: 0;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.cursor_pointer {
|
|
434
|
+
cursor: pointer;
|
|
435
|
+
}
|
|
436
|
+
|
|
429
437
|
.ms_xsmall {
|
|
430
438
|
margin-inline-start: var(--spacing-xsmall);
|
|
431
439
|
}
|
|
@@ -446,10 +454,6 @@
|
|
|
446
454
|
border-bottom: 0;
|
|
447
455
|
}
|
|
448
456
|
|
|
449
|
-
.cursor_pointer {
|
|
450
|
-
cursor: pointer;
|
|
451
|
-
}
|
|
452
|
-
|
|
453
457
|
.bg_background\.default\/20 {
|
|
454
458
|
--mix-background: color-mix(in srgb, var(--colors-background-default) 20%, transparent);
|
|
455
459
|
background: var(--mix-background, var(--colors-background-default));
|
|
@@ -710,6 +714,14 @@
|
|
|
710
714
|
background-color: var(--background-color);
|
|
711
715
|
}
|
|
712
716
|
|
|
717
|
+
.left_-xxlarge {
|
|
718
|
+
left: calc(var(--spacing-xxlarge) * -1);
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
.top_-4xsmall {
|
|
722
|
+
top: calc(var(--spacing-4xsmall) * -1);
|
|
723
|
+
}
|
|
724
|
+
|
|
713
725
|
.fw_bold {
|
|
714
726
|
font-weight: var(--font-weights-bold);
|
|
715
727
|
}
|
|
@@ -1294,6 +1306,10 @@
|
|
|
1294
1306
|
text-decoration: none;
|
|
1295
1307
|
}
|
|
1296
1308
|
|
|
1309
|
+
.\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:focus,.\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:focus-visible,.\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:active {
|
|
1310
|
+
opacity: 1;
|
|
1311
|
+
}
|
|
1312
|
+
|
|
1297
1313
|
.focusVisible\:ring_none:is(:focus-visible, [data-focus-visible]) {
|
|
1298
1314
|
outline: 2px solid transparent;
|
|
1299
1315
|
outline-offset: 2px;
|
|
@@ -1391,6 +1407,14 @@
|
|
|
1391
1407
|
outline-style: solid;
|
|
1392
1408
|
}
|
|
1393
1409
|
|
|
1410
|
+
.hover\:\[\&_\[data-copy-button\]\]\:op_1:is(:hover, [data-hover]) [data-copy-button] {
|
|
1411
|
+
opacity: 1;
|
|
1412
|
+
}
|
|
1413
|
+
|
|
1414
|
+
.hover\:\[\&_\[data-copy-button\]\]\:cursor_pointer:is(:hover, [data-hover]) [data-copy-button] {
|
|
1415
|
+
cursor: pointer;
|
|
1416
|
+
}
|
|
1417
|
+
|
|
1394
1418
|
.hover\:\[\&_\[data-byline-button\]\]\:bg_background\.default:is(:hover, [data-hover]) [data-byline-button] {
|
|
1395
1419
|
background: var(--colors-background-default);
|
|
1396
1420
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
|
-
"version": "56.0.
|
|
3
|
+
"version": "56.0.10-alpha.0",
|
|
4
4
|
"description": "UI component library for NDLA",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -33,21 +33,16 @@
|
|
|
33
33
|
"types"
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@ndla/button": "^15.0.
|
|
37
|
-
"@ndla/core": "^5.0.
|
|
38
|
-
"@ndla/
|
|
39
|
-
"@ndla/
|
|
40
|
-
"@ndla/
|
|
41
|
-
"@ndla/
|
|
42
|
-
"@ndla/
|
|
43
|
-
"@ndla/styled-system": "^0.0.10",
|
|
44
|
-
"@ndla/typography": "^0.4.23",
|
|
36
|
+
"@ndla/button": "^15.0.9-alpha.0",
|
|
37
|
+
"@ndla/core": "^5.0.2",
|
|
38
|
+
"@ndla/icons": "^8.0.9-alpha.0",
|
|
39
|
+
"@ndla/licenses": "^8.0.1-alpha.0",
|
|
40
|
+
"@ndla/primitives": "^1.0.9-alpha.0",
|
|
41
|
+
"@ndla/safelink": "^7.0.9-alpha.0",
|
|
42
|
+
"@ndla/styled-system": "^0.0.11",
|
|
45
43
|
"@ndla/util": "^4.1.0",
|
|
46
|
-
"date-fns": "^2.30.0",
|
|
47
44
|
"html-react-parser": "^5.1.8",
|
|
48
|
-
"i18next-browser-languagedetector": "^7.1.0"
|
|
49
|
-
"punycode.js": "^2.3.1",
|
|
50
|
-
"react-device-detect": "^2.2.3"
|
|
45
|
+
"i18next-browser-languagedetector": "^7.1.0"
|
|
51
46
|
},
|
|
52
47
|
"peerDependencies": {
|
|
53
48
|
"@emotion/react": "^11.10.4",
|
|
@@ -59,9 +54,9 @@
|
|
|
59
54
|
"react-router-dom": "> 6.0.0"
|
|
60
55
|
},
|
|
61
56
|
"devDependencies": {
|
|
62
|
-
"@ndla/preset-panda": "^0.0.
|
|
57
|
+
"@ndla/preset-panda": "^0.0.19",
|
|
63
58
|
"@ndla/types-backend": "^0.2.86",
|
|
64
|
-
"@ndla/types-embed": "^5.0.
|
|
59
|
+
"@ndla/types-embed": "^5.0.1-alpha.0",
|
|
65
60
|
"@pandacss/dev": "^0.44.0",
|
|
66
61
|
"css-loader": "^6.7.3",
|
|
67
62
|
"mini-css-extract-plugin": "^2.7.5",
|
|
@@ -72,5 +67,5 @@
|
|
|
72
67
|
"publishConfig": {
|
|
73
68
|
"access": "public"
|
|
74
69
|
},
|
|
75
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "62f2145f507c5365f8f5ed452de32ac43b11f155"
|
|
76
71
|
}
|
|
@@ -116,8 +116,7 @@ const CampaignBlock = ({
|
|
|
116
116
|
const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;
|
|
117
117
|
const HeaderComponent = url?.url ? LinkText : Text;
|
|
118
118
|
return (
|
|
119
|
-
|
|
120
|
-
<Container className={className} data-type="campaign-block" data-embed-type="campaign-block">
|
|
119
|
+
<Container className={className} data-embed-type="campaign-block">
|
|
121
120
|
{imageSide === "left" && imageComponent}
|
|
122
121
|
<ContentWrapper>
|
|
123
122
|
<MaybeLinkText url={url?.url} path={path}>
|
|
@@ -8,43 +8,35 @@
|
|
|
8
8
|
|
|
9
9
|
import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
|
|
10
10
|
import { useTranslation } from "react-i18next";
|
|
11
|
-
import styled from "@emotion/styled";
|
|
12
|
-
import { colors, stackOrder } from "@ndla/core";
|
|
13
11
|
import { LinkMedium } from "@ndla/icons/editor";
|
|
12
|
+
import { IconButton } from "@ndla/primitives";
|
|
13
|
+
import { styled } from "@ndla/styled-system/jsx";
|
|
14
14
|
import { copyTextToClipboard } from "@ndla/util";
|
|
15
15
|
|
|
16
|
-
const ContainerDiv = styled
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
left: -3em;
|
|
28
|
-
top: 0.1em;
|
|
29
|
-
background: none;
|
|
30
|
-
border: 0;
|
|
31
|
-
z-index: ${stackOrder.offsetSingle};
|
|
32
|
-
transition: 0.2s;
|
|
33
|
-
opacity: 0;
|
|
34
|
-
color: ${colors.brand.grey};
|
|
35
|
-
|
|
36
|
-
& svg {
|
|
37
|
-
width: 30px;
|
|
38
|
-
height: 30px;
|
|
39
|
-
}
|
|
16
|
+
const ContainerDiv = styled("div", {
|
|
17
|
+
base: {
|
|
18
|
+
position: "relative",
|
|
19
|
+
_hover: {
|
|
20
|
+
"& [data-copy-button]": {
|
|
21
|
+
opacity: "1",
|
|
22
|
+
cursor: "pointer",
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
});
|
|
40
27
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
28
|
+
const StyledIconButton = styled(IconButton, {
|
|
29
|
+
base: {
|
|
30
|
+
position: "absolute",
|
|
31
|
+
left: "-xxlarge",
|
|
32
|
+
top: "-4xsmall",
|
|
33
|
+
opacity: "0",
|
|
34
|
+
cursor: "pointer",
|
|
35
|
+
"&:focus, &:focus-visible, &:active": {
|
|
36
|
+
opacity: "1",
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
});
|
|
48
40
|
|
|
49
41
|
interface Props {
|
|
50
42
|
// What to render within the h2
|
|
@@ -76,9 +68,15 @@ const CopyParagraphButton = ({ children, copyText, lang }: Props) => {
|
|
|
76
68
|
const tooltip = hasCopied ? t("article.copyPageLinkCopied") : t("article.copyHeaderLink");
|
|
77
69
|
return (
|
|
78
70
|
<ContainerDiv data-embed-type="copy-heading">
|
|
79
|
-
<
|
|
71
|
+
<StyledIconButton
|
|
72
|
+
variant="clear"
|
|
73
|
+
data-copy-button=""
|
|
74
|
+
onClick={onCopyClick}
|
|
75
|
+
title={tooltip}
|
|
76
|
+
aria-label={`${tooltip}: ${copyText}`}
|
|
77
|
+
>
|
|
80
78
|
<LinkMedium />
|
|
81
|
-
</
|
|
79
|
+
</StyledIconButton>
|
|
82
80
|
<h2 id={sanitizedTitle} tabIndex={-1} lang={lang}>
|
|
83
81
|
{children}
|
|
84
82
|
</h2>
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import punycode from "punycode/";
|
|
10
9
|
import { useTranslation } from "react-i18next";
|
|
11
10
|
import { RelatedContentMetaData } from "@ndla/types-embed";
|
|
12
11
|
import { contentTypeMapping } from "../model/ContentType";
|
|
@@ -52,12 +51,7 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
|
|
|
52
51
|
to={embedData.url}
|
|
53
52
|
target="_blank"
|
|
54
53
|
type={"external"}
|
|
55
|
-
linkInfo={`${t("related.linkInfo")} ${
|
|
56
|
-
// Get domain name only from url
|
|
57
|
-
punycode.toUnicode(
|
|
58
|
-
embedData.url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)?.[1] || embedData.url,
|
|
59
|
-
)
|
|
60
|
-
}`}
|
|
54
|
+
linkInfo={`${t("related.linkInfo")} ${embedData.urlDomain}`}
|
|
61
55
|
/>
|
|
62
56
|
);
|
|
63
57
|
}
|
|
@@ -6,8 +6,6 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import { format } from "date-fns";
|
|
10
|
-
import { enGB, nb, nn } from "date-fns/locale";
|
|
11
9
|
import parse from "html-react-parser";
|
|
12
10
|
import { useMemo } from "react";
|
|
13
11
|
import { ArrowRightLine } from "@ndla/icons/common";
|
|
@@ -79,8 +77,11 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {
|
|
|
79
77
|
const href = getPossiblyRelativeUrl(url, path);
|
|
80
78
|
const formattedDate = useMemo(() => {
|
|
81
79
|
if (!date) return null;
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
return new Intl.DateTimeFormat(articleLanguage, {
|
|
81
|
+
day: "2-digit",
|
|
82
|
+
month: "long",
|
|
83
|
+
year: "numeric",
|
|
84
|
+
}).format(new Date(date));
|
|
84
85
|
}, [date, articleLanguage]);
|
|
85
86
|
return (
|
|
86
87
|
<StyledSafeLink to={href} data-embed-type="link-block">
|
|
@@ -6,11 +6,11 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
+
import { breakpoints } from "@ndla/core";
|
|
9
10
|
import { ShareBoxLine } from "@ndla/icons/common";
|
|
10
11
|
import { Heading, Image, Text } from "@ndla/primitives";
|
|
11
12
|
import { SafeLinkButton } from "@ndla/safelink";
|
|
12
13
|
import { styled } from "@ndla/styled-system/jsx";
|
|
13
|
-
import { token } from "@ndla/styled-system/tokens";
|
|
14
14
|
|
|
15
15
|
const Container = styled("div", {
|
|
16
16
|
base: {
|
|
@@ -84,7 +84,7 @@ export const ResourceBox = ({ image, title, caption, url, buttonText }: Props) =
|
|
|
84
84
|
<StyledImage
|
|
85
85
|
src={image.src}
|
|
86
86
|
alt={image.alt}
|
|
87
|
-
sizes={`(min-width: ${
|
|
87
|
+
sizes={`(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`}
|
|
88
88
|
/>
|
|
89
89
|
<ContentWrapper>
|
|
90
90
|
<Heading textStyle="label.large" fontWeight="bold" asChild consumeCss>
|
package/src/index.ts
CHANGED
|
@@ -35,6 +35,7 @@ export { LicenseLink, EmbedByline } from "./LicenseByline";
|
|
|
35
35
|
|
|
36
36
|
export {
|
|
37
37
|
ArticleByline,
|
|
38
|
+
ArticleBylineAccordionItem,
|
|
38
39
|
ArticleFootNotes,
|
|
39
40
|
ArticleWrapper,
|
|
40
41
|
Article,
|
|
@@ -108,8 +109,6 @@ export {
|
|
|
108
109
|
|
|
109
110
|
export { default as CopyParagraphButton } from "./CopyParagraphButton";
|
|
110
111
|
|
|
111
|
-
export { default as ContentPlaceholder } from "./ContentPlaceholder";
|
|
112
|
-
|
|
113
112
|
export {
|
|
114
113
|
TagSelectorRoot,
|
|
115
114
|
TagSelectorLabel,
|
|
@@ -134,11 +133,6 @@ export { CampaignBlock } from "./CampaignBlock";
|
|
|
134
133
|
export { Grid, GridParallaxItem } from "./Grid";
|
|
135
134
|
export type { GridType } from "./Grid";
|
|
136
135
|
|
|
137
|
-
export {
|
|
138
|
-
default as FrontpageArticle,
|
|
139
|
-
FRONTPAGE_ARTICLE_MAX_WIDTH,
|
|
140
|
-
WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH,
|
|
141
|
-
} from "./FrontpageArticle";
|
|
142
136
|
export type { ProgrammeV2 } from "./ProgrammeCard";
|
|
143
137
|
|
|
144
138
|
export { Gloss, GlossExample } from "./Gloss";
|
|
@@ -1117,6 +1117,10 @@ const messages = {
|
|
|
1117
1117
|
subscribe: "You will now be notified of new replies to this topic",
|
|
1118
1118
|
unsubscribe: "You have turned off notification of new replies to this topic",
|
|
1119
1119
|
commentedOn: "commented on the post <i>{{title}}</i>",
|
|
1120
|
+
button: {
|
|
1121
|
+
show: "View notifications",
|
|
1122
|
+
showNew: "View {{count}} new notifications",
|
|
1123
|
+
},
|
|
1120
1124
|
},
|
|
1121
1125
|
topicsBy: "Topics by",
|
|
1122
1126
|
admin: {
|
|
@@ -1118,6 +1118,10 @@ const messages = {
|
|
|
1118
1118
|
subscribe: "Du får nå varsling om nye svar på dette innlegget",
|
|
1119
1119
|
unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
|
|
1120
1120
|
commentedOn: "svarte på innlegget <i>{{title}}</i>",
|
|
1121
|
+
button: {
|
|
1122
|
+
show: "Vis varslinger",
|
|
1123
|
+
showNew: "Vis {{count}} nye varslinger",
|
|
1124
|
+
},
|
|
1121
1125
|
},
|
|
1122
1126
|
topicsBy: "Innlegg av",
|
|
1123
1127
|
admin: {
|
|
@@ -1118,6 +1118,10 @@ const messages = {
|
|
|
1118
1118
|
subscribe: "Du får no varsling om nye svar på dette innlegget",
|
|
1119
1119
|
unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
|
|
1120
1120
|
commentedOn: "svarte på innlegget <i>{{title}}</i>",
|
|
1121
|
+
button: {
|
|
1122
|
+
show: "Vis varsler",
|
|
1123
|
+
showNew: "Vis {{count}} nye varsler",
|
|
1124
|
+
},
|
|
1121
1125
|
},
|
|
1122
1126
|
topicsBy: "Innlegg av",
|
|
1123
1127
|
admin: {
|
|
@@ -1120,6 +1120,10 @@ const messages = {
|
|
|
1120
1120
|
subscribe: "Du får nå varsling om nye svar på dette innlegget",
|
|
1121
1121
|
unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
|
|
1122
1122
|
commentedOn: "svarte på innlegget <i>{{title}}</i>",
|
|
1123
|
+
button: {
|
|
1124
|
+
show: "Vis varslinger",
|
|
1125
|
+
showNew: "Vis {{count}} nye varslinger",
|
|
1126
|
+
},
|
|
1123
1127
|
},
|
|
1124
1128
|
topicsBy: "Innlegg av",
|
|
1125
1129
|
admin: {
|