@ndla/ui 14.0.0 → 15.0.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 (189) hide show
  1. package/es/Article/Article.js +22 -3
  2. package/es/Article/ArticleFavoritesButton.js +38 -0
  3. package/es/Article/index.js +2 -1
  4. package/es/Breadcrumb/ActionBreadcrumb.js +57 -0
  5. package/es/Breadcrumb/index.js +1 -0
  6. package/es/InfoBlock/InfoBlock.js +55 -0
  7. package/es/InfoBlock/index.js +1 -0
  8. package/es/MyNdla/Navigation/VerticalNavigation.js +51 -0
  9. package/es/MyNdla/Navigation/index.js +2 -0
  10. package/es/MyNdla/Resource/Folder.js +86 -0
  11. package/{lib/MyNdla/ResourceDash/ResourcesView.d.ts → es/MyNdla/Resource/index.js} +2 -3
  12. package/es/MyNdla/index.js +3 -4
  13. package/es/Resource/BlockResource.js +73 -0
  14. package/es/Resource/ListResource.js +66 -0
  15. package/es/Resource/index.js +10 -0
  16. package/es/Resource/resourceComponents.js +97 -0
  17. package/es/ResourceGroup/ResourceGroup.js +7 -5
  18. package/es/ResourceGroup/ResourceItem.js +25 -24
  19. package/es/ResourceGroup/ResourceList.js +18 -6
  20. package/es/SnackBar/SnackBar.js +117 -0
  21. package/es/SnackBar/index.js +9 -0
  22. package/es/TagSelector/SuggestionInput.js +240 -0
  23. package/es/TagSelector/Suggestions.js +93 -0
  24. package/es/TagSelector/TagSelector.js +137 -0
  25. package/es/TagSelector/index.js +9 -0
  26. package/es/TreeStructure/FolderItem.js +130 -0
  27. package/es/TreeStructure/FolderItems.js +123 -0
  28. package/es/TreeStructure/FolderNameInput.js +112 -0
  29. package/es/TreeStructure/TreeStructure.js +254 -0
  30. package/es/TreeStructure/TreeStructure.types.js +0 -0
  31. package/es/TreeStructure/TreeStructureWrapper.js +13 -0
  32. package/es/TreeStructure/helperFunctions.js +92 -0
  33. package/es/TreeStructure/index.js +9 -0
  34. package/es/TreeStructure/keyboardNavigation/keyboardNavigation.js +182 -0
  35. package/es/TreeStructure/keyboardNavigation/keyboardNavigation.types.js +0 -0
  36. package/es/all.css +72 -0
  37. package/es/index.js +8 -3
  38. package/es/locale/messages-en.js +62 -4
  39. package/es/locale/messages-nb.js +61 -3
  40. package/es/locale/messages-nn.js +61 -3
  41. package/es/locale/messages-se.js +61 -3
  42. package/es/locale/messages-sma.js +61 -3
  43. package/lib/Article/Article.d.ts +3 -1
  44. package/lib/Article/Article.js +43 -23
  45. package/lib/Article/ArticleFavoritesButton.d.ts +15 -0
  46. package/lib/Article/ArticleFavoritesButton.js +56 -0
  47. package/lib/Article/index.d.ts +2 -1
  48. package/lib/Article/index.js +8 -0
  49. package/lib/Breadcrumb/ActionBreadcrumb.d.ts +16 -0
  50. package/lib/Breadcrumb/ActionBreadcrumb.js +72 -0
  51. package/lib/Breadcrumb/index.d.ts +1 -0
  52. package/lib/Breadcrumb/index.js +8 -0
  53. package/lib/InfoBlock/InfoBlock.d.ts +8 -0
  54. package/lib/InfoBlock/InfoBlock.js +58 -0
  55. package/lib/InfoBlock/index.d.ts +1 -0
  56. package/lib/InfoBlock/index.js +13 -0
  57. package/lib/MyNdla/Navigation/VerticalNavigation.d.ts +10 -0
  58. package/lib/MyNdla/Navigation/VerticalNavigation.js +61 -0
  59. package/lib/MyNdla/Navigation/index.d.ts +2 -0
  60. package/lib/MyNdla/Navigation/index.js +15 -0
  61. package/lib/MyNdla/Resource/Folder.d.ts +20 -0
  62. package/lib/MyNdla/Resource/Folder.js +100 -0
  63. package/lib/MyNdla/Resource/index.d.ts +9 -0
  64. package/lib/MyNdla/Resource/index.js +15 -0
  65. package/lib/MyNdla/index.d.ts +3 -4
  66. package/lib/MyNdla/index.js +9 -11
  67. package/lib/Resource/BlockResource.d.ts +20 -0
  68. package/lib/Resource/BlockResource.js +84 -0
  69. package/lib/Resource/ListResource.d.ts +20 -0
  70. package/lib/Resource/ListResource.js +78 -0
  71. package/lib/Resource/index.d.ts +11 -0
  72. package/lib/Resource/index.js +29 -0
  73. package/lib/Resource/resourceComponents.d.ts +24 -0
  74. package/lib/Resource/resourceComponents.js +106 -0
  75. package/lib/ResourceGroup/ResourceGroup.d.ts +2 -1
  76. package/lib/ResourceGroup/ResourceGroup.js +7 -5
  77. package/lib/ResourceGroup/ResourceItem.d.ts +5 -1
  78. package/lib/ResourceGroup/ResourceItem.js +26 -24
  79. package/lib/ResourceGroup/ResourceList.d.ts +3 -1
  80. package/lib/ResourceGroup/ResourceList.js +18 -6
  81. package/lib/SnackBar/SnackBar.d.ts +23 -0
  82. package/lib/SnackBar/SnackBar.js +127 -0
  83. package/lib/SnackBar/index.d.ts +10 -0
  84. package/lib/SnackBar/index.js +15 -0
  85. package/lib/TagSelector/SuggestionInput.d.ts +19 -0
  86. package/lib/TagSelector/SuggestionInput.js +255 -0
  87. package/lib/TagSelector/Suggestions.d.ts +12 -0
  88. package/lib/TagSelector/Suggestions.js +96 -0
  89. package/lib/TagSelector/TagSelector.d.ts +16 -0
  90. package/lib/TagSelector/TagSelector.js +150 -0
  91. package/lib/TagSelector/index.d.ts +10 -0
  92. package/lib/TagSelector/index.js +19 -0
  93. package/lib/TreeStructure/FolderItem.d.ts +27 -0
  94. package/lib/TreeStructure/FolderItem.js +140 -0
  95. package/lib/TreeStructure/FolderItems.d.ts +11 -0
  96. package/lib/TreeStructure/FolderItems.js +130 -0
  97. package/lib/TreeStructure/FolderNameInput.d.ts +15 -0
  98. package/lib/TreeStructure/FolderNameInput.js +125 -0
  99. package/lib/TreeStructure/TreeStructure.d.ts +12 -0
  100. package/lib/TreeStructure/TreeStructure.js +273 -0
  101. package/lib/TreeStructure/TreeStructure.types.d.ts +63 -0
  102. package/lib/TreeStructure/TreeStructure.types.js +1 -0
  103. package/lib/TreeStructure/TreeStructureWrapper.d.ts +12 -0
  104. package/lib/TreeStructure/TreeStructureWrapper.js +24 -0
  105. package/lib/TreeStructure/helperFunctions.d.ts +5 -0
  106. package/lib/TreeStructure/helperFunctions.js +103 -0
  107. package/lib/TreeStructure/index.d.ts +10 -0
  108. package/lib/TreeStructure/index.js +15 -0
  109. package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.d.ts +11 -0
  110. package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.js +186 -0
  111. package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.types.d.ts +26 -0
  112. package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.types.js +1 -0
  113. package/lib/User/apiTypes.d.ts +1 -1
  114. package/lib/User/index.d.ts +2 -2
  115. package/lib/all.css +72 -0
  116. package/lib/index.d.ts +13 -4
  117. package/lib/index.js +68 -9
  118. package/lib/locale/messages-en.d.ts +58 -0
  119. package/lib/locale/messages-en.js +62 -4
  120. package/lib/locale/messages-nb.d.ts +58 -0
  121. package/lib/locale/messages-nb.js +61 -3
  122. package/lib/locale/messages-nn.d.ts +58 -0
  123. package/lib/locale/messages-nn.js +61 -3
  124. package/lib/locale/messages-se.d.ts +58 -0
  125. package/lib/locale/messages-se.js +61 -3
  126. package/lib/locale/messages-sma.d.ts +58 -0
  127. package/lib/locale/messages-sma.js +61 -3
  128. package/lib/types.d.ts +1 -1
  129. package/package.json +11 -11
  130. package/src/Article/Article.tsx +31 -0
  131. package/src/Article/ArticleFavoritesButton.tsx +40 -0
  132. package/src/Article/index.ts +2 -0
  133. package/src/Breadcrumb/ActionBreadcrumb.tsx +68 -0
  134. package/src/Breadcrumb/index.ts +2 -0
  135. package/src/InfoBlock/InfoBlock.tsx +61 -0
  136. package/src/InfoBlock/index.ts +1 -0
  137. package/src/MyNdla/Navigation/VerticalNavigation.tsx +93 -0
  138. package/src/MyNdla/Navigation/index.ts +2 -0
  139. package/src/MyNdla/Resource/Folder.tsx +143 -0
  140. package/src/MyNdla/Resource/index.ts +10 -0
  141. package/src/MyNdla/index.ts +3 -5
  142. package/src/Resource/BlockResource.tsx +101 -0
  143. package/src/Resource/ListResource.tsx +111 -0
  144. package/src/Resource/index.ts +12 -0
  145. package/src/Resource/resourceComponents.tsx +143 -0
  146. package/src/ResourceGroup/ResourceGroup.tsx +3 -0
  147. package/src/ResourceGroup/ResourceItem.tsx +17 -0
  148. package/src/ResourceGroup/ResourceList.tsx +16 -3
  149. package/src/SnackBar/SnackBar.tsx +183 -0
  150. package/src/SnackBar/index.ts +13 -0
  151. package/src/TagSelector/SuggestionInput.tsx +230 -0
  152. package/src/TagSelector/Suggestions.tsx +125 -0
  153. package/src/TagSelector/TagSelector.tsx +111 -0
  154. package/src/TagSelector/index.ts +13 -0
  155. package/src/TreeStructure/FolderItem.tsx +160 -0
  156. package/src/TreeStructure/FolderItems.tsx +109 -0
  157. package/src/TreeStructure/FolderNameInput.tsx +109 -0
  158. package/src/TreeStructure/TreeStructure.tsx +184 -0
  159. package/src/TreeStructure/TreeStructure.types.ts +69 -0
  160. package/src/TreeStructure/TreeStructureWrapper.tsx +34 -0
  161. package/src/TreeStructure/helperFunctions.ts +52 -0
  162. package/src/TreeStructure/index.ts +11 -0
  163. package/src/TreeStructure/keyboardNavigation/keyboardNavigation.ts +161 -0
  164. package/src/TreeStructure/keyboardNavigation/keyboardNavigation.types.ts +28 -0
  165. package/src/User/apiTypes.ts +1 -1
  166. package/src/User/index.ts +2 -2
  167. package/src/all.scss +1 -0
  168. package/src/index.ts +14 -5
  169. package/src/locale/messages-en.ts +56 -3
  170. package/src/locale/messages-nb.ts +55 -2
  171. package/src/locale/messages-nn.ts +55 -2
  172. package/src/locale/messages-se.ts +55 -2
  173. package/src/locale/messages-sma.ts +55 -2
  174. package/src/types.ts +1 -1
  175. package/es/MyNdla/ResourceDash/Breadcrumbs.js +0 -22
  176. package/es/MyNdla/ResourceDash/ResourceElement.js +0 -27
  177. package/es/MyNdla/ResourceDash/ResourcesView.js +0 -43
  178. package/es/MyNdla/ResourceDash/index.js +0 -4
  179. package/lib/MyNdla/ResourceDash/Breadcrumbs.d.ts +0 -15
  180. package/lib/MyNdla/ResourceDash/Breadcrumbs.js +0 -35
  181. package/lib/MyNdla/ResourceDash/ResourceElement.d.ts +0 -18
  182. package/lib/MyNdla/ResourceDash/ResourceElement.js +0 -38
  183. package/lib/MyNdla/ResourceDash/ResourcesView.js +0 -57
  184. package/lib/MyNdla/ResourceDash/index.d.ts +0 -4
  185. package/lib/MyNdla/ResourceDash/index.js +0 -31
  186. package/src/MyNdla/ResourceDash/Breadcrumbs.tsx +0 -31
  187. package/src/MyNdla/ResourceDash/ResourceElement.tsx +0 -50
  188. package/src/MyNdla/ResourceDash/ResourcesView.tsx +0 -42
  189. package/src/MyNdla/ResourceDash/index.ts +0 -5
@@ -0,0 +1,103 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getFolderName = exports.getIdPathsOfFolder = exports.getPathOfFolder = void 0;
7
+
8
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
9
+
10
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
11
+
12
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
13
+
14
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
15
+
16
+ function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
17
+
18
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
19
+
20
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
21
+
22
+ var getPathOfFolder = function getPathOfFolder(data, findId) {
23
+ var paths = function paths(dataChildren, path) {
24
+ var _iterator = _createForOfIteratorHelper(dataChildren),
25
+ _step;
26
+
27
+ try {
28
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
29
+ var _step$value = _step.value,
30
+ id = _step$value.id,
31
+ dataChildrenSub = _step$value.data;
32
+
33
+ if (id === findId) {
34
+ return [].concat(_toConsumableArray(path), [id]);
35
+ } else if (dataChildrenSub === null || dataChildrenSub === void 0 ? void 0 : dataChildrenSub.length) {
36
+ return paths(dataChildrenSub, [].concat(_toConsumableArray(path), [id]));
37
+ }
38
+ }
39
+ } catch (err) {
40
+ _iterator.e(err);
41
+ } finally {
42
+ _iterator.f();
43
+ }
44
+
45
+ return [];
46
+ };
47
+
48
+ return paths(data, []);
49
+ };
50
+
51
+ exports.getPathOfFolder = getPathOfFolder;
52
+
53
+ var getIdPathsOfFolder = function getIdPathsOfFolder(data, findId) {
54
+ var currentPath = [];
55
+
56
+ var paths = function paths(dataChildren, path) {
57
+ dataChildren.forEach(function (_ref, _index) {
58
+ var id = _ref.id,
59
+ dataChildrenSub = _ref.data;
60
+
61
+ if (id === findId) {
62
+ currentPath = [].concat(_toConsumableArray(path), [_index]);
63
+ } else if (dataChildrenSub === null || dataChildrenSub === void 0 ? void 0 : dataChildrenSub.length) {
64
+ paths(dataChildrenSub, [].concat(_toConsumableArray(path), [_index]));
65
+ }
66
+ });
67
+ };
68
+
69
+ paths(data, []);
70
+ return currentPath;
71
+ };
72
+
73
+ exports.getIdPathsOfFolder = getIdPathsOfFolder;
74
+
75
+ var getFolderName = function getFolderName(data, findId) {
76
+ if (!findId) {
77
+ return undefined;
78
+ }
79
+
80
+ var folderName;
81
+
82
+ var paths = function paths(dataChildren) {
83
+ dataChildren.some(function (_ref2, _index) {
84
+ var id = _ref2.id,
85
+ name = _ref2.name,
86
+ dataChildrenSub = _ref2.data;
87
+
88
+ if (id === findId) {
89
+ folderName = name;
90
+ return true;
91
+ } else if (dataChildrenSub === null || dataChildrenSub === void 0 ? void 0 : dataChildrenSub.length) {
92
+ return paths(dataChildrenSub);
93
+ }
94
+
95
+ return false;
96
+ });
97
+ };
98
+
99
+ paths(data);
100
+ return folderName;
101
+ };
102
+
103
+ exports.getFolderName = getFolderName;
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Copyright (c) 2022-present, NDLA.
3
+ *
4
+ * This source code is licensed under the GPLv3 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+ import TreeStructure from './TreeStructure';
9
+ export type { FolderStructureProps, TreeStructureProps } from './TreeStructure.types';
10
+ export { TreeStructure };
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "TreeStructure", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _TreeStructure["default"];
10
+ }
11
+ });
12
+
13
+ var _TreeStructure = _interopRequireDefault(require("./TreeStructure"));
14
+
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Copyright (c) 2022-present, NDLA.
3
+ *
4
+ * This source code is licensed under the GPLv3 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+ import { KeyboardNavigationProps } from './keyboardNavigation.types';
9
+ export declare const KEYBOARD_KEYS_OF_INTEREST: string[];
10
+ declare const keyboardNavigation: ({ e, data, onToggleOpen, setFocusedFolderId, focusedFolderId: id, openFolders, }: KeyboardNavigationProps) => string | undefined;
11
+ export default keyboardNavigation;
@@ -0,0 +1,186 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.KEYBOARD_KEYS_OF_INTEREST = void 0;
7
+
8
+ var _TreeStructure = require("../TreeStructure");
9
+
10
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
11
+
12
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
13
+
14
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
15
+
16
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
17
+
18
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
19
+
20
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
21
+
22
+ var KEYBOARD_KEYS_OF_INTEREST = ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', ' ']; // Traverse upwards, incase parent is last element of its parent..
23
+
24
+ exports.KEYBOARD_KEYS_OF_INTEREST = KEYBOARD_KEYS_OF_INTEREST;
25
+
26
+ var traverseUpwards = function traverseUpwards(inital, setFocusedFolderId, paths, index) {
27
+ var findParent = inital;
28
+ var parentNextIds = [];
29
+ paths.forEach(function (pathIndex) {
30
+ var nextParent = findParent ? findParent[pathIndex + 1] : undefined;
31
+ parentNextIds.push((nextParent === null || nextParent === void 0 ? void 0 : nextParent.id) || false);
32
+ findParent = findParent[pathIndex].data || [];
33
+ });
34
+
35
+ if (!parentNextIds.length) {
36
+ var _findParent;
37
+
38
+ parentNextIds.push(((_findParent = findParent[index + 1]) === null || _findParent === void 0 ? void 0 : _findParent.id) || false);
39
+ } // We use a reversed version of parentNextIds, filtered out falses, to find the next element
40
+ // No newId? We are at the end of the tree so we wont update.
41
+
42
+
43
+ var newId = parentNextIds.reverse().filter(function (id) {
44
+ return id;
45
+ })[0];
46
+
47
+ if (newId) {
48
+ setFocusedFolderId(newId);
49
+ }
50
+ };
51
+
52
+ var keyboardNavigation = function keyboardNavigation(_ref) {
53
+ var _document$activeEleme, _elementWithKeyFocus$3;
54
+
55
+ var e = _ref.e,
56
+ data = _ref.data,
57
+ onToggleOpen = _ref.onToggleOpen,
58
+ setFocusedFolderId = _ref.setFocusedFolderId,
59
+ id = _ref.focusedFolderId,
60
+ openFolders = _ref.openFolders;
61
+
62
+ if (e.key === ' ' && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.nodeName) === 'INPUT') {
63
+ return;
64
+ } // We are navigating in the tree.
65
+ // We need to find the next folder in the tree
66
+
67
+
68
+ var elementWithKeyFocus = {
69
+ paths: [],
70
+ index: 0
71
+ };
72
+
73
+ var updatePathToElementWithKeyFocus = function updatePathToElementWithKeyFocus(data, paths, parent, parentId) {
74
+ return data.some(function (_ref2, _index) {
75
+ var childData = _ref2.data,
76
+ dataId = _ref2.id,
77
+ url = _ref2.url;
78
+
79
+ if (dataId === id) {
80
+ elementWithKeyFocus.paths = paths;
81
+ elementWithKeyFocus.index = _index;
82
+ elementWithKeyFocus.isOpen = openFolders.has(dataId) && childData && childData.length > 0;
83
+ elementWithKeyFocus.data = childData;
84
+ elementWithKeyFocus.parent = parent;
85
+ elementWithKeyFocus.parentId = parentId;
86
+ elementWithKeyFocus.url = url;
87
+ return true;
88
+ }
89
+
90
+ return childData ? updatePathToElementWithKeyFocus(childData, [].concat(_toConsumableArray(paths), [_index]), _toConsumableArray(childData), dataId) : false;
91
+ });
92
+ };
93
+
94
+ if (!updatePathToElementWithKeyFocus(data, [], data)) {
95
+ // Couldn't find its location in the tree.
96
+ // This should not happen, reset its value to root.
97
+ setFocusedFolderId(e.key === 'ArrowDown' ? data[0].id : undefined);
98
+ return;
99
+ }
100
+
101
+ e.preventDefault();
102
+ e.stopPropagation();
103
+
104
+ if (e.key === ' ') {
105
+ var simulatedEvent = new MouseEvent('click', {
106
+ bubbles: true,
107
+ cancelable: true,
108
+ view: window
109
+ });
110
+ document.activeElement && document.activeElement.dispatchEvent(simulatedEvent);
111
+ return;
112
+ }
113
+
114
+ if (e.key === 'ArrowRight') {
115
+ var _elementWithKeyFocus$;
116
+
117
+ if (!elementWithKeyFocus.isOpen && ((_elementWithKeyFocus$ = elementWithKeyFocus.data) === null || _elementWithKeyFocus$ === void 0 ? void 0 : _elementWithKeyFocus$.length) && id && elementWithKeyFocus.paths.length < _TreeStructure.MAX_LEVEL_FOR_FOLDERS - 1) {
118
+ onToggleOpen(id);
119
+ }
120
+
121
+ return;
122
+ }
123
+
124
+ if (e.key === 'ArrowLeft') {
125
+ if (id && elementWithKeyFocus.isOpen) {
126
+ onToggleOpen(id);
127
+ }
128
+
129
+ return;
130
+ }
131
+
132
+ if (!id && e.key === 'ArrowDown') {
133
+ setFocusedFolderId(data[0].id);
134
+ return;
135
+ }
136
+
137
+ if (!id) {
138
+ return;
139
+ } // Move up
140
+
141
+
142
+ if (e.key === 'ArrowUp') {
143
+ if (elementWithKeyFocus.index > 0) {
144
+ // Move upwards to the parent folder
145
+ setFocusedFolderId(elementWithKeyFocus.parent ? elementWithKeyFocus.parent[elementWithKeyFocus.index - 1].id : undefined);
146
+ } else if (elementWithKeyFocus.paths.length > 0) {
147
+ elementWithKeyFocus.paths.pop();
148
+ var findParent = data;
149
+ elementWithKeyFocus.paths.forEach(function (index) {
150
+ findParent = findParent[index].data;
151
+ });
152
+ var parentsCurrentIndex = findParent.findIndex(function (_ref3) {
153
+ var id = _ref3.id;
154
+ return id === elementWithKeyFocus.parentId;
155
+ });
156
+ setFocusedFolderId(findParent[parentsCurrentIndex].id);
157
+ }
158
+
159
+ return;
160
+ }
161
+
162
+ if (elementWithKeyFocus.isOpen) {
163
+ var _elementWithKeyFocus$2;
164
+
165
+ if ((_elementWithKeyFocus$2 = elementWithKeyFocus.data) === null || _elementWithKeyFocus$2 === void 0 ? void 0 : _elementWithKeyFocus$2.length) {
166
+ setFocusedFolderId(elementWithKeyFocus.data[0].id);
167
+ } else {
168
+ // move to next child of parent if any... need new traverse :-/
169
+ traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
170
+ }
171
+
172
+ return;
173
+ }
174
+
175
+ if (elementWithKeyFocus.parent && elementWithKeyFocus.index < ((_elementWithKeyFocus$3 = elementWithKeyFocus.parent) === null || _elementWithKeyFocus$3 === void 0 ? void 0 : _elementWithKeyFocus$3.length) - 1) {
176
+ // Move downwards to the next child
177
+ setFocusedFolderId(elementWithKeyFocus.parent[elementWithKeyFocus.index + 1].id);
178
+ return;
179
+ }
180
+
181
+ traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
182
+ return;
183
+ };
184
+
185
+ var _default = keyboardNavigation;
186
+ exports["default"] = _default;
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Copyright (c) 2022-present, NDLA.
3
+ *
4
+ * This source code is licensed under the GPLv3 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+ /// <reference types="react" />
9
+ import { FolderStructureProps, SetFocusedFolderId } from '../TreeStructure.types';
10
+ export interface KeyboardNavigationProps {
11
+ e: React.KeyboardEvent<HTMLElement>;
12
+ data: FolderStructureProps[];
13
+ setFocusedFolderId: SetFocusedFolderId;
14
+ openFolders: Set<string>;
15
+ onToggleOpen: (id: string) => void;
16
+ focusedFolderId: string | undefined;
17
+ }
18
+ export interface ElementWithKeyFocusProps {
19
+ paths: number[];
20
+ index: number;
21
+ data?: FolderStructureProps[];
22
+ parent?: FolderStructureProps[];
23
+ parentId?: string;
24
+ isOpen?: boolean;
25
+ url?: string;
26
+ }
@@ -42,7 +42,7 @@ export interface FeideGoGroup extends FeideBaseGroup {
42
42
  };
43
43
  }
44
44
  export declare type FeideGroup = FeideOrg | FeideGoGroup;
45
- interface FeideUser {
45
+ export interface FeideUser {
46
46
  cn: string[];
47
47
  displayName: string;
48
48
  eduPersonAffiliation: AffiliationType[] | AffiliationType;
@@ -7,7 +7,7 @@
7
7
  */
8
8
  import AuthModal from './AuthModal';
9
9
  import { UserInfo } from './UserInfo';
10
- import type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType } from './apiTypes';
10
+ import type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser } from './apiTypes';
11
11
  export { UserInfo };
12
- export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType };
12
+ export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser };
13
13
  export default AuthModal;
package/lib/all.css CHANGED
@@ -1,3 +1,75 @@
1
+ /* Used to detect in JavaScript if apps have loaded styles or not. */
2
+ :root {
3
+ --reach-menu-button: 1;
4
+ }
5
+
6
+ [data-reach-menu] {
7
+ position: relative;
8
+ }
9
+
10
+ [data-reach-menu-popover] {
11
+ display: block;
12
+ position: absolute;
13
+ }
14
+
15
+ [data-reach-menu-popover][hidden] {
16
+ display: none;
17
+ }
18
+
19
+ [data-reach-menu-list],
20
+ [data-reach-menu-items] {
21
+ display: block;
22
+ white-space: nowrap;
23
+ border: solid 1px hsla(0, 0%, 0%, 0.25);
24
+ background: hsla(0, 100%, 100%, 0.99);
25
+ outline: none;
26
+ padding: 1rem 0;
27
+ font-size: 85%;
28
+ }
29
+
30
+ [data-reach-menu-item] {
31
+ display: block;
32
+ user-select: none;
33
+ }
34
+
35
+ /*
36
+ The dom structure of a MenuLink is reach-menu-item > a,
37
+ so to target all items we can use `data-reach-menu-item`
38
+ */
39
+ [data-reach-menu-item] {
40
+ /*
41
+ These are styled in one rule instead of something like a[data-reach-menu-item]
42
+ and li[data-reach-menu-item] so that apps don't have to fight specificity and
43
+ can style both li and a menu items with one rule,
44
+ ie: `[data-selected] { background: red; }`.
45
+ Otherwise they'd have to define two styles, one for a and one for li.
46
+ */
47
+
48
+ /* reach-menu-item */
49
+ cursor: pointer;
50
+
51
+ /* a */
52
+ display: block;
53
+ color: inherit;
54
+ font: inherit;
55
+ text-decoration: initial;
56
+
57
+ /* both */
58
+ padding: 5px 20px;
59
+ }
60
+
61
+ /* pseudo pseudo selector */
62
+ [data-reach-menu-item][data-selected] {
63
+ background: hsl(211, 81%, 36%);
64
+ color: white;
65
+ outline: none;
66
+ }
67
+
68
+ [data-reach-menu-item][aria-disabled] {
69
+ opacity: 0.5;
70
+ cursor: not-allowed;
71
+ }
72
+
1
73
  :root {
2
74
  --reach-tooltip: 1;
3
75
  }
package/lib/index.d.ts CHANGED
@@ -7,7 +7,7 @@
7
7
  */
8
8
  /** @ts-ignore */
9
9
  export * from './index-javascript';
10
- export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, ArticleSideBar, default as Article, } from './Article';
10
+ export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, ArticleSideBar, default as Article, ArticleFavoritesButton, } from './Article';
11
11
  export { default as Table } from './Table';
12
12
  export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
13
13
  export { createUniversalPortal } from './utils/createUniversalPortal';
@@ -39,7 +39,7 @@ export { default as MastheadSearchModal } from './Masthead/MastheadSearchModal';
39
39
  export { default as MastheadAuthModal } from './Masthead/MastheadAuthModal';
40
40
  export { UserInfo } from './User';
41
41
  export { default as AuthModal } from './User';
42
- export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType } from './User';
42
+ export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser } from './User';
43
43
  export { default as CreatedBy } from './CreatedBy';
44
44
  export { default as Breadcrumblist } from './Breadcrumblist';
45
45
  export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
@@ -60,7 +60,7 @@ export { default as Topic } from './Topic';
60
60
  export type { TopicProps } from './Topic';
61
61
  export { default as Aside } from './Aside';
62
62
  export { default as AuthorInfo } from './AuthorInfo';
63
- export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb } from './Breadcrumb';
63
+ export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb, ActionBreadcrumb } from './Breadcrumb';
64
64
  export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './Breadcrumb';
65
65
  export type { BreadcrumbItemProps } from './Breadcrumblist/Breadcrumblist';
66
66
  export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';
@@ -76,4 +76,13 @@ export { default as CopyParagraphButton } from './CopyParagraphButton';
76
76
  export { default as ContentPlaceholder } from './ContentPlaceholder';
77
77
  export { Notion, ConceptNotion } from './Notion';
78
78
  export { BannerCard } from './BannerCard';
79
- export { ResourcesView, ResourceElement, Breadcrumbs } from './MyNdla';
79
+ export { VerticalNavigation, Folder } from './MyNdla';
80
+ export { ListResource, BlockResource } from './Resource';
81
+ export type { ListResourceProps } from './Resource';
82
+ export type { TagType } from './TagSelector';
83
+ export { TagSelector } from './TagSelector';
84
+ export type { SnackBarItem } from './SnackBar';
85
+ export { SnackBar } from './SnackBar';
86
+ export { InfoBlock } from './InfoBlock';
87
+ export { TreeStructure } from './TreeStructure';
88
+ export type { FolderStructureProps, TreeStructureProps } from './TreeStructure';
package/lib/index.js CHANGED
@@ -15,6 +15,7 @@ var _exportNames = {
15
15
  ArticleHeaderWrapper: true,
16
16
  ArticleSideBar: true,
17
17
  Article: true,
18
+ ArticleFavoritesButton: true,
18
19
  Table: true,
19
20
  ResourcesWrapper: true,
20
21
  ResourcesTitle: true,
@@ -122,6 +123,7 @@ var _exportNames = {
122
123
  Breadcrumb: true,
123
124
  HeaderBreadcrumb: true,
124
125
  HomeBreadcrumb: true,
126
+ ActionBreadcrumb: true,
125
127
  i18nInstance: true,
126
128
  formatNestedMessages: true,
127
129
  formatMessage: true,
@@ -176,9 +178,14 @@ var _exportNames = {
176
178
  Notion: true,
177
179
  ConceptNotion: true,
178
180
  BannerCard: true,
179
- ResourcesView: true,
180
- ResourceElement: true,
181
- Breadcrumbs: true
181
+ VerticalNavigation: true,
182
+ Folder: true,
183
+ ListResource: true,
184
+ BlockResource: true,
185
+ TagSelector: true,
186
+ SnackBar: true,
187
+ InfoBlock: true,
188
+ TreeStructure: true
182
189
  };
183
190
  Object.defineProperty(exports, "ArticleByline", {
184
191
  enumerable: true,
@@ -234,6 +241,12 @@ Object.defineProperty(exports, "Article", {
234
241
  return _Article["default"];
235
242
  }
236
243
  });
244
+ Object.defineProperty(exports, "ArticleFavoritesButton", {
245
+ enumerable: true,
246
+ get: function get() {
247
+ return _Article.ArticleFavoritesButton;
248
+ }
249
+ });
237
250
  Object.defineProperty(exports, "Table", {
238
251
  enumerable: true,
239
252
  get: function get() {
@@ -876,6 +889,12 @@ Object.defineProperty(exports, "HomeBreadcrumb", {
876
889
  return _Breadcrumb.HomeBreadcrumb;
877
890
  }
878
891
  });
892
+ Object.defineProperty(exports, "ActionBreadcrumb", {
893
+ enumerable: true,
894
+ get: function get() {
895
+ return _Breadcrumb.ActionBreadcrumb;
896
+ }
897
+ });
879
898
  Object.defineProperty(exports, "i18nInstance", {
880
899
  enumerable: true,
881
900
  get: function get() {
@@ -1200,22 +1219,52 @@ Object.defineProperty(exports, "BannerCard", {
1200
1219
  return _BannerCard.BannerCard;
1201
1220
  }
1202
1221
  });
1203
- Object.defineProperty(exports, "ResourcesView", {
1222
+ Object.defineProperty(exports, "VerticalNavigation", {
1204
1223
  enumerable: true,
1205
1224
  get: function get() {
1206
- return _MyNdla.ResourcesView;
1225
+ return _MyNdla.VerticalNavigation;
1207
1226
  }
1208
1227
  });
1209
- Object.defineProperty(exports, "ResourceElement", {
1228
+ Object.defineProperty(exports, "Folder", {
1210
1229
  enumerable: true,
1211
1230
  get: function get() {
1212
- return _MyNdla.ResourceElement;
1231
+ return _MyNdla.Folder;
1213
1232
  }
1214
1233
  });
1215
- Object.defineProperty(exports, "Breadcrumbs", {
1234
+ Object.defineProperty(exports, "ListResource", {
1216
1235
  enumerable: true,
1217
1236
  get: function get() {
1218
- return _MyNdla.Breadcrumbs;
1237
+ return _Resource.ListResource;
1238
+ }
1239
+ });
1240
+ Object.defineProperty(exports, "BlockResource", {
1241
+ enumerable: true,
1242
+ get: function get() {
1243
+ return _Resource.BlockResource;
1244
+ }
1245
+ });
1246
+ Object.defineProperty(exports, "TagSelector", {
1247
+ enumerable: true,
1248
+ get: function get() {
1249
+ return _TagSelector.TagSelector;
1250
+ }
1251
+ });
1252
+ Object.defineProperty(exports, "SnackBar", {
1253
+ enumerable: true,
1254
+ get: function get() {
1255
+ return _SnackBar.SnackBar;
1256
+ }
1257
+ });
1258
+ Object.defineProperty(exports, "InfoBlock", {
1259
+ enumerable: true,
1260
+ get: function get() {
1261
+ return _InfoBlock.InfoBlock;
1262
+ }
1263
+ });
1264
+ Object.defineProperty(exports, "TreeStructure", {
1265
+ enumerable: true,
1266
+ get: function get() {
1267
+ return _TreeStructure.TreeStructure;
1219
1268
  }
1220
1269
  });
1221
1270
 
@@ -1362,6 +1411,16 @@ var _BannerCard = require("./BannerCard");
1362
1411
 
1363
1412
  var _MyNdla = require("./MyNdla");
1364
1413
 
1414
+ var _Resource = require("./Resource");
1415
+
1416
+ var _TagSelector = require("./TagSelector");
1417
+
1418
+ var _SnackBar = require("./SnackBar");
1419
+
1420
+ var _InfoBlock = require("./InfoBlock");
1421
+
1422
+ var _TreeStructure = require("./TreeStructure");
1423
+
1365
1424
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
1366
1425
 
1367
1426
  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }