@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.
Files changed (60) hide show
  1. package/dist/panda.buildinfo.json +7 -1
  2. package/dist/styles.css +28 -4
  3. package/es/CampaignBlock/CampaignBlock.js +27 -32
  4. package/es/CopyParagraphButton/CopyParagraphButton.js +26 -19
  5. package/es/Embed/RelatedContentEmbed.js +1 -4
  6. package/es/LinkBlock/LinkBlock.js +5 -6
  7. package/es/ResourceBox/ResourceBox.js +2 -2
  8. package/es/index.js +1 -3
  9. package/es/locale/messages-en.js +5 -1
  10. package/es/locale/messages-nb.js +5 -1
  11. package/es/locale/messages-nn.js +5 -1
  12. package/es/locale/messages-se.js +5 -1
  13. package/es/locale/messages-sma.js +5 -1
  14. package/es/styles.css +28 -4
  15. package/lib/CampaignBlock/CampaignBlock.js +27 -32
  16. package/lib/CopyParagraphButton/CopyParagraphButton.js +28 -20
  17. package/lib/Embed/RelatedContentEmbed.js +1 -5
  18. package/lib/LinkBlock/LinkBlock.js +5 -6
  19. package/lib/ResourceBox/ResourceBox.js +2 -2
  20. package/lib/index.d.ts +1 -3
  21. package/lib/index.js +6 -26
  22. package/lib/locale/messages-en.d.ts +4 -0
  23. package/lib/locale/messages-en.js +5 -1
  24. package/lib/locale/messages-nb.d.ts +4 -0
  25. package/lib/locale/messages-nb.js +5 -1
  26. package/lib/locale/messages-nn.d.ts +4 -0
  27. package/lib/locale/messages-nn.js +5 -1
  28. package/lib/locale/messages-se.d.ts +4 -0
  29. package/lib/locale/messages-se.js +5 -1
  30. package/lib/locale/messages-sma.d.ts +4 -0
  31. package/lib/locale/messages-sma.js +5 -1
  32. package/lib/styles.css +28 -4
  33. package/package.json +12 -17
  34. package/src/CampaignBlock/CampaignBlock.tsx +1 -2
  35. package/src/CopyParagraphButton/CopyParagraphButton.tsx +33 -35
  36. package/src/Embed/RelatedContentEmbed.tsx +1 -7
  37. package/src/LinkBlock/LinkBlock.tsx +5 -4
  38. package/src/ResourceBox/ResourceBox.tsx +2 -2
  39. package/src/index.ts +1 -7
  40. package/src/locale/messages-en.ts +4 -0
  41. package/src/locale/messages-nb.ts +4 -0
  42. package/src/locale/messages-nn.ts +4 -0
  43. package/src/locale/messages-se.ts +4 -0
  44. package/src/locale/messages-sma.ts +4 -0
  45. package/es/ContentPlaceholder/ContentPlaceholder.js +0 -38
  46. package/es/ContentPlaceholder/index.js +0 -10
  47. package/es/FrontpageArticle/FrontpageArticle.js +0 -70
  48. package/es/FrontpageArticle/index.js +0 -11
  49. package/lib/ContentPlaceholder/ContentPlaceholder.d.ts +0 -9
  50. package/lib/ContentPlaceholder/ContentPlaceholder.js +0 -43
  51. package/lib/ContentPlaceholder/index.d.ts +0 -9
  52. package/lib/ContentPlaceholder/index.js +0 -16
  53. package/lib/FrontpageArticle/FrontpageArticle.d.ts +0 -20
  54. package/lib/FrontpageArticle/FrontpageArticle.js +0 -78
  55. package/lib/FrontpageArticle/index.d.ts +0 -10
  56. package/lib/FrontpageArticle/index.js +0 -29
  57. package/src/ContentPlaceholder/ContentPlaceholder.tsx +0 -67
  58. package/src/ContentPlaceholder/index.ts +0 -11
  59. package/src/FrontpageArticle/FrontpageArticle.tsx +0 -87
  60. 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
- const locale = articleLanguage === "nb" ? _locale.nb : articleLanguage === "nn" ? _locale.nn : _locale.enGB;
87
- return (0, _dateFns.format)(new Date(date), "dd. LLLL yyyy", {
88
- locale
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: ${(0, _tokens.token)("breakpoints.desktop")}) 150px, (max-width: ${(0, _tokens.token)("breakpoints.tablet")} ) 400px, 200px`
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");
@@ -1086,6 +1086,10 @@ declare const messages: {
1086
1086
  subscribe: string;
1087
1087
  unsubscribe: string;
1088
1088
  commentedOn: string;
1089
+ button: {
1090
+ show: string;
1091
+ showNew: string;
1092
+ };
1089
1093
  };
1090
1094
  topicsBy: string;
1091
1095
  admin: {
@@ -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: {
@@ -1086,6 +1086,10 @@ declare const messages: {
1086
1086
  subscribe: string;
1087
1087
  unsubscribe: string;
1088
1088
  commentedOn: string;
1089
+ button: {
1090
+ show: string;
1091
+ showNew: string;
1092
+ };
1089
1093
  };
1090
1094
  topicsBy: string;
1091
1095
  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: {
@@ -1086,6 +1086,10 @@ declare const messages: {
1086
1086
  subscribe: string;
1087
1087
  unsubscribe: string;
1088
1088
  commentedOn: string;
1089
+ button: {
1090
+ show: string;
1091
+ showNew: string;
1092
+ };
1089
1093
  };
1090
1094
  topicsBy: string;
1091
1095
  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: {
@@ -1086,6 +1086,10 @@ declare const messages: {
1086
1086
  subscribe: string;
1087
1087
  unsubscribe: string;
1088
1088
  commentedOn: string;
1089
+ button: {
1090
+ show: string;
1091
+ showNew: string;
1092
+ };
1089
1093
  };
1090
1094
  topicsBy: string;
1091
1095
  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: {
@@ -1086,6 +1086,10 @@ declare const messages: {
1086
1086
  subscribe: string;
1087
1087
  unsubscribe: string;
1088
1088
  commentedOn: string;
1089
+ button: {
1090
+ show: string;
1091
+ showNew: string;
1092
+ };
1089
1093
  };
1090
1094
  topicsBy: string;
1091
1095
  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.8-alpha.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.8-alpha.0",
37
- "@ndla/core": "^5.0.1",
38
- "@ndla/hooks": "^2.1.8",
39
- "@ndla/icons": "^8.0.8-alpha.0",
40
- "@ndla/licenses": "^8.0.0-alpha.0",
41
- "@ndla/primitives": "^1.0.8-alpha.0",
42
- "@ndla/safelink": "^7.0.8-alpha.0",
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.18",
57
+ "@ndla/preset-panda": "^0.0.19",
63
58
  "@ndla/types-backend": "^0.2.86",
64
- "@ndla/types-embed": "^5.0.0-alpha.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": "1f5266d080c8cc172af46980cea7a451cfa12b28"
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
- // TODO: Remove data-type
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.div`
17
- position: relative;
18
- &:hover {
19
- [data-copy-button] {
20
- opacity: 1;
21
- cursor: pointer;
22
- }
23
- }
24
- `;
25
- const IconButton = styled.button`
26
- position: absolute;
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
- &:focus,
42
- &:focus-visible,
43
- &:active {
44
- cursor: pointer;
45
- opacity: 1;
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
- <IconButton data-copy-button="" onClick={onCopyClick} title={tooltip} aria-label={`${tooltip}: ${copyText}`}>
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
- </IconButton>
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
- const locale = articleLanguage === "nb" ? nb : articleLanguage === "nn" ? nn : enGB;
83
- return format(new Date(date), "dd. LLLL yyyy", { locale });
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: ${token("breakpoints.desktop")}) 150px, (max-width: ${token("breakpoints.tablet")} ) 400px, 200px`}
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: {