@ndla/ui 56.0.94-alpha.0 → 56.0.96-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/es/ContentTypeBlockQuote/ContentTypeBlockQuote.js +3 -1
- package/es/ContentTypeFramedContent/ContentTypeFramedContent.js +3 -1
- package/es/FactBox/FactBox.js +4 -3
- package/es/locale/messages-en.js +17 -0
- package/es/locale/messages-nb.js +17 -0
- package/es/locale/messages-nn.js +17 -0
- package/es/locale/messages-se.js +17 -0
- package/es/locale/messages-sma.js +17 -0
- package/lib/ContentTypeBlockQuote/ContentTypeBlockQuote.js +3 -1
- package/lib/ContentTypeFramedContent/ContentTypeFramedContent.js +3 -1
- package/lib/FactBox/FactBox.d.ts +2 -2
- package/lib/FactBox/FactBox.js +6 -3
- package/lib/locale/messages-en.d.ts +17 -0
- package/lib/locale/messages-en.js +17 -0
- package/lib/locale/messages-nb.d.ts +17 -0
- package/lib/locale/messages-nb.js +17 -0
- package/lib/locale/messages-nn.d.ts +17 -0
- package/lib/locale/messages-nn.js +17 -0
- package/lib/locale/messages-se.d.ts +17 -0
- package/lib/locale/messages-se.js +17 -0
- package/lib/locale/messages-sma.d.ts +17 -0
- package/lib/locale/messages-sma.js +17 -0
- package/package.json +4 -4
- package/src/ContentTypeBlockQuote/ContentTypeBlockQuote.tsx +3 -7
- package/src/ContentTypeFramedContent/ContentTypeFramedContent.tsx +3 -7
- package/src/FactBox/FactBox.tsx +4 -3
- package/src/locale/messages-en.ts +17 -0
- package/src/locale/messages-nb.ts +17 -0
- package/src/locale/messages-nn.ts +17 -0
- package/src/locale/messages-se.ts +17 -0
- package/src/locale/messages-sma.ts +17 -0
|
@@ -22,9 +22,11 @@ export const ContentTypeBlockQuote = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
22
22
|
contentType,
|
|
23
23
|
...props
|
|
24
24
|
} = _ref;
|
|
25
|
+
const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
|
|
26
|
+
const variantColor = variant === "colored" ? color : undefined;
|
|
25
27
|
return /*#__PURE__*/_jsx(BlockQuote, {
|
|
26
28
|
...props,
|
|
27
|
-
variant:
|
|
29
|
+
variant: variantColor,
|
|
28
30
|
ref: ref
|
|
29
31
|
});
|
|
30
32
|
});
|
|
@@ -22,9 +22,11 @@ export const ContentTypeFramedContent = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
22
22
|
contentType,
|
|
23
23
|
...props
|
|
24
24
|
} = _ref;
|
|
25
|
+
const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
|
|
26
|
+
const variantColor = variant === "colored" ? color : undefined;
|
|
25
27
|
return /*#__PURE__*/_jsx(FramedContent, {
|
|
26
28
|
...props,
|
|
27
|
-
colorTheme:
|
|
29
|
+
colorTheme: variantColor,
|
|
28
30
|
ref: ref
|
|
29
31
|
});
|
|
30
32
|
});
|
package/es/FactBox/FactBox.js
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import { forwardRef, useCallback, useEffect, useId, useMemo, useState } from "react";
|
|
9
|
+
import React, { forwardRef, useCallback, useEffect, useId, useMemo, useState } from "react";
|
|
10
10
|
import { useTranslation } from "react-i18next";
|
|
11
11
|
import { ArrowDownShortLine } from "@ndla/icons";
|
|
12
12
|
import { IconButton } from "@ndla/primitives";
|
|
@@ -116,10 +116,11 @@ const FactBox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
116
116
|
const [state, setState] = useState(defaultOpen ? "open" : "closed");
|
|
117
117
|
const contentId = useId();
|
|
118
118
|
// Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
|
|
119
|
-
//
|
|
119
|
+
// When running in React 18, we need to use an empty string instead of true.
|
|
120
|
+
// TODO: Remove this hack once we upgrade to React 19 as a peer dep.
|
|
120
121
|
const inertAttribute = useMemo(() => {
|
|
121
122
|
return state === "closed" ? {
|
|
122
|
-
inert: ""
|
|
123
|
+
inert: typeof React.use === "function" ? true : ""
|
|
123
124
|
} : {};
|
|
124
125
|
}, [state]);
|
|
125
126
|
useEffect(() => {
|
package/es/locale/messages-en.js
CHANGED
|
@@ -1508,6 +1508,23 @@ const messages = {
|
|
|
1508
1508
|
is360Video: "VR video",
|
|
1509
1509
|
close: "Lukk"
|
|
1510
1510
|
}
|
|
1511
|
+
},
|
|
1512
|
+
richTextEditor: {
|
|
1513
|
+
tooltip: {
|
|
1514
|
+
bold: "Bold ({{shortcut}})",
|
|
1515
|
+
code: "Code ({{shortcut}})",
|
|
1516
|
+
sub: "Subscript ({{shortcut}})",
|
|
1517
|
+
sup: "Superscript ({{shortcut}})",
|
|
1518
|
+
underlined: "Underlined ({{shortcut}})",
|
|
1519
|
+
italic: "Italic ({{shortcut}})",
|
|
1520
|
+
"numbered-list": "Numbered list ({{shortcut}})",
|
|
1521
|
+
"letter-list": "Alphabetical list ({{shortcut}})",
|
|
1522
|
+
"bulleted-list": "Bulleted list ({{shortcut}})",
|
|
1523
|
+
heading: "Heading {{level}} ({{shortcut}})",
|
|
1524
|
+
paragraph: "Paragraph ({{shortcut}})",
|
|
1525
|
+
section: "Section ({{shortcut}})",
|
|
1526
|
+
link: "Link ({{shortcut}})"
|
|
1527
|
+
}
|
|
1511
1528
|
}
|
|
1512
1529
|
};
|
|
1513
1530
|
export default messages;
|
package/es/locale/messages-nb.js
CHANGED
|
@@ -1508,6 +1508,23 @@ const messages = {
|
|
|
1508
1508
|
is360Video: "VR-video",
|
|
1509
1509
|
close: "Lukk"
|
|
1510
1510
|
}
|
|
1511
|
+
},
|
|
1512
|
+
richTextEditor: {
|
|
1513
|
+
tooltip: {
|
|
1514
|
+
bold: "Fet ({{shortcut}})",
|
|
1515
|
+
code: "Kode ({{shortcut}})",
|
|
1516
|
+
sub: "Senket skrift ({{shortcut}})",
|
|
1517
|
+
sup: "Hevet skrift ({{shortcut}})",
|
|
1518
|
+
underlined: "Understreket ({{shortcut}})",
|
|
1519
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1520
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1521
|
+
"letter-list": "Bokstavliste ({{shortcut}})",
|
|
1522
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1523
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1524
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1525
|
+
section: "Seksjon ({{shortcut}})",
|
|
1526
|
+
link: "Lenke ({{shortcut}})"
|
|
1527
|
+
}
|
|
1511
1528
|
}
|
|
1512
1529
|
};
|
|
1513
1530
|
export default messages;
|
package/es/locale/messages-nn.js
CHANGED
|
@@ -1508,6 +1508,23 @@ const messages = {
|
|
|
1508
1508
|
is360Video: "VR-video",
|
|
1509
1509
|
close: "Lukk"
|
|
1510
1510
|
}
|
|
1511
|
+
},
|
|
1512
|
+
richTextEditor: {
|
|
1513
|
+
tooltip: {
|
|
1514
|
+
bold: "Fet ({{shortcut}})",
|
|
1515
|
+
code: "Kode ({{shortcut}})",
|
|
1516
|
+
sub: "Senka skrift ({{shortcut}})",
|
|
1517
|
+
sup: "Heva skrift ({{shortcut}})",
|
|
1518
|
+
underlined: "Understreka ({{shortcut}})",
|
|
1519
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1520
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1521
|
+
"letter-list": "Alfabetisk liste ({{shortcut}})",
|
|
1522
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1523
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1524
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1525
|
+
section: "Seksjon ({{shortcut}})",
|
|
1526
|
+
link: "Lenke ({{shortcut}})"
|
|
1527
|
+
}
|
|
1511
1528
|
}
|
|
1512
1529
|
};
|
|
1513
1530
|
export default messages;
|
package/es/locale/messages-se.js
CHANGED
|
@@ -1508,6 +1508,23 @@ const messages = {
|
|
|
1508
1508
|
is360Video: "VR-video",
|
|
1509
1509
|
close: "Lukk"
|
|
1510
1510
|
}
|
|
1511
|
+
},
|
|
1512
|
+
richTextEditor: {
|
|
1513
|
+
tooltip: {
|
|
1514
|
+
bold: "Fet ({{shortcut}})",
|
|
1515
|
+
code: "Kode ({{shortcut}})",
|
|
1516
|
+
sub: "Senket skrift ({{shortcut}})",
|
|
1517
|
+
sup: "Hevet skrift ({{shortcut}})",
|
|
1518
|
+
underlined: "Understreket ({{shortcut}})",
|
|
1519
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1520
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1521
|
+
"letter-list": "Bokstavliste ({{shortcut}})",
|
|
1522
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1523
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1524
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1525
|
+
section: "Seksjon ({{shortcut}})",
|
|
1526
|
+
link: "Lenke ({{shortcut}})"
|
|
1527
|
+
}
|
|
1511
1528
|
}
|
|
1512
1529
|
};
|
|
1513
1530
|
export default messages;
|
|
@@ -1508,6 +1508,23 @@ const messages = {
|
|
|
1508
1508
|
is360Video: "VR-video",
|
|
1509
1509
|
close: "Lukk"
|
|
1510
1510
|
}
|
|
1511
|
+
},
|
|
1512
|
+
richTextEditor: {
|
|
1513
|
+
tooltip: {
|
|
1514
|
+
bold: "Fet ({{shortcut}})",
|
|
1515
|
+
code: "Kode ({{shortcut}})",
|
|
1516
|
+
sub: "Senket skrift ({{shortcut}})",
|
|
1517
|
+
sup: "Hevet skrift ({{shortcut}})",
|
|
1518
|
+
underlined: "Understreket ({{shortcut}})",
|
|
1519
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1520
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1521
|
+
"letter-list": "Bokstavliste ({{shortcut}})",
|
|
1522
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1523
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1524
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1525
|
+
section: "Seksjon ({{shortcut}})",
|
|
1526
|
+
link: "Lenke ({{shortcut}})"
|
|
1527
|
+
}
|
|
1511
1528
|
}
|
|
1512
1529
|
};
|
|
1513
1530
|
export default messages;
|
|
@@ -28,9 +28,11 @@ const ContentTypeBlockQuote = exports.ContentTypeBlockQuote = /*#__PURE__*/(0, _
|
|
|
28
28
|
contentType,
|
|
29
29
|
...props
|
|
30
30
|
} = _ref;
|
|
31
|
+
const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
|
|
32
|
+
const variantColor = variant === "colored" ? color : undefined;
|
|
31
33
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.BlockQuote, {
|
|
32
34
|
...props,
|
|
33
|
-
variant:
|
|
35
|
+
variant: variantColor,
|
|
34
36
|
ref: ref
|
|
35
37
|
});
|
|
36
38
|
});
|
|
@@ -28,9 +28,11 @@ const ContentTypeFramedContent = exports.ContentTypeFramedContent = /*#__PURE__*
|
|
|
28
28
|
contentType,
|
|
29
29
|
...props
|
|
30
30
|
} = _ref;
|
|
31
|
+
const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
|
|
32
|
+
const variantColor = variant === "colored" ? color : undefined;
|
|
31
33
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.FramedContent, {
|
|
32
34
|
...props,
|
|
33
|
-
colorTheme:
|
|
35
|
+
colorTheme: variantColor,
|
|
34
36
|
ref: ref
|
|
35
37
|
});
|
|
36
38
|
});
|
package/lib/FactBox/FactBox.d.ts
CHANGED
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
-
import { type ComponentProps, type ReactNode } from "react";
|
|
8
|
+
import React, { type ComponentProps, type ReactNode } from "react";
|
|
9
9
|
interface Props extends ComponentProps<"aside"> {
|
|
10
10
|
children?: ReactNode;
|
|
11
11
|
defaultOpen?: boolean;
|
|
12
12
|
open?: boolean;
|
|
13
13
|
onOpenChange?: (open: boolean) => void;
|
|
14
14
|
}
|
|
15
|
-
declare const FactBox:
|
|
15
|
+
declare const FactBox: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
16
16
|
export default FactBox;
|
package/lib/FactBox/FactBox.js
CHANGED
|
@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _react = require("react");
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactI18next = require("react-i18next");
|
|
9
9
|
var _icons = require("@ndla/icons");
|
|
10
10
|
var _primitives = require("@ndla/primitives");
|
|
11
11
|
var _jsx2 = require("@ndla/styled-system/jsx");
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
15
|
/**
|
|
14
16
|
* Copyright (c) 2016-present, NDLA.
|
|
15
17
|
*
|
|
@@ -122,10 +124,11 @@ const FactBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
122
124
|
const [state, setState] = (0, _react.useState)(defaultOpen ? "open" : "closed");
|
|
123
125
|
const contentId = (0, _react.useId)();
|
|
124
126
|
// Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
|
|
125
|
-
//
|
|
127
|
+
// When running in React 18, we need to use an empty string instead of true.
|
|
128
|
+
// TODO: Remove this hack once we upgrade to React 19 as a peer dep.
|
|
126
129
|
const inertAttribute = (0, _react.useMemo)(() => {
|
|
127
130
|
return state === "closed" ? {
|
|
128
|
-
inert: ""
|
|
131
|
+
inert: typeof _react.default.use === "function" ? true : ""
|
|
129
132
|
} : {};
|
|
130
133
|
}, [state]);
|
|
131
134
|
(0, _react.useEffect)(() => {
|
|
@@ -1465,5 +1465,22 @@ declare const messages: {
|
|
|
1465
1465
|
close: string;
|
|
1466
1466
|
};
|
|
1467
1467
|
};
|
|
1468
|
+
richTextEditor: {
|
|
1469
|
+
tooltip: {
|
|
1470
|
+
bold: string;
|
|
1471
|
+
code: string;
|
|
1472
|
+
sub: string;
|
|
1473
|
+
sup: string;
|
|
1474
|
+
underlined: string;
|
|
1475
|
+
italic: string;
|
|
1476
|
+
"numbered-list": string;
|
|
1477
|
+
"letter-list": string;
|
|
1478
|
+
"bulleted-list": string;
|
|
1479
|
+
heading: string;
|
|
1480
|
+
paragraph: string;
|
|
1481
|
+
section: string;
|
|
1482
|
+
link: string;
|
|
1483
|
+
};
|
|
1484
|
+
};
|
|
1468
1485
|
};
|
|
1469
1486
|
export default messages;
|
|
@@ -1515,6 +1515,23 @@ const messages = {
|
|
|
1515
1515
|
is360Video: "VR video",
|
|
1516
1516
|
close: "Lukk"
|
|
1517
1517
|
}
|
|
1518
|
+
},
|
|
1519
|
+
richTextEditor: {
|
|
1520
|
+
tooltip: {
|
|
1521
|
+
bold: "Bold ({{shortcut}})",
|
|
1522
|
+
code: "Code ({{shortcut}})",
|
|
1523
|
+
sub: "Subscript ({{shortcut}})",
|
|
1524
|
+
sup: "Superscript ({{shortcut}})",
|
|
1525
|
+
underlined: "Underlined ({{shortcut}})",
|
|
1526
|
+
italic: "Italic ({{shortcut}})",
|
|
1527
|
+
"numbered-list": "Numbered list ({{shortcut}})",
|
|
1528
|
+
"letter-list": "Alphabetical list ({{shortcut}})",
|
|
1529
|
+
"bulleted-list": "Bulleted list ({{shortcut}})",
|
|
1530
|
+
heading: "Heading {{level}} ({{shortcut}})",
|
|
1531
|
+
paragraph: "Paragraph ({{shortcut}})",
|
|
1532
|
+
section: "Section ({{shortcut}})",
|
|
1533
|
+
link: "Link ({{shortcut}})"
|
|
1534
|
+
}
|
|
1518
1535
|
}
|
|
1519
1536
|
};
|
|
1520
1537
|
var _default = exports.default = messages;
|
|
@@ -1465,5 +1465,22 @@ declare const messages: {
|
|
|
1465
1465
|
close: string;
|
|
1466
1466
|
};
|
|
1467
1467
|
};
|
|
1468
|
+
richTextEditor: {
|
|
1469
|
+
tooltip: {
|
|
1470
|
+
bold: string;
|
|
1471
|
+
code: string;
|
|
1472
|
+
sub: string;
|
|
1473
|
+
sup: string;
|
|
1474
|
+
underlined: string;
|
|
1475
|
+
italic: string;
|
|
1476
|
+
"numbered-list": string;
|
|
1477
|
+
"letter-list": string;
|
|
1478
|
+
"bulleted-list": string;
|
|
1479
|
+
heading: string;
|
|
1480
|
+
paragraph: string;
|
|
1481
|
+
section: string;
|
|
1482
|
+
link: string;
|
|
1483
|
+
};
|
|
1484
|
+
};
|
|
1468
1485
|
};
|
|
1469
1486
|
export default messages;
|
|
@@ -1515,6 +1515,23 @@ const messages = {
|
|
|
1515
1515
|
is360Video: "VR-video",
|
|
1516
1516
|
close: "Lukk"
|
|
1517
1517
|
}
|
|
1518
|
+
},
|
|
1519
|
+
richTextEditor: {
|
|
1520
|
+
tooltip: {
|
|
1521
|
+
bold: "Fet ({{shortcut}})",
|
|
1522
|
+
code: "Kode ({{shortcut}})",
|
|
1523
|
+
sub: "Senket skrift ({{shortcut}})",
|
|
1524
|
+
sup: "Hevet skrift ({{shortcut}})",
|
|
1525
|
+
underlined: "Understreket ({{shortcut}})",
|
|
1526
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1527
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1528
|
+
"letter-list": "Bokstavliste ({{shortcut}})",
|
|
1529
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1530
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1531
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1532
|
+
section: "Seksjon ({{shortcut}})",
|
|
1533
|
+
link: "Lenke ({{shortcut}})"
|
|
1534
|
+
}
|
|
1518
1535
|
}
|
|
1519
1536
|
};
|
|
1520
1537
|
var _default = exports.default = messages;
|
|
@@ -1465,5 +1465,22 @@ declare const messages: {
|
|
|
1465
1465
|
close: string;
|
|
1466
1466
|
};
|
|
1467
1467
|
};
|
|
1468
|
+
richTextEditor: {
|
|
1469
|
+
tooltip: {
|
|
1470
|
+
bold: string;
|
|
1471
|
+
code: string;
|
|
1472
|
+
sub: string;
|
|
1473
|
+
sup: string;
|
|
1474
|
+
underlined: string;
|
|
1475
|
+
italic: string;
|
|
1476
|
+
"numbered-list": string;
|
|
1477
|
+
"letter-list": string;
|
|
1478
|
+
"bulleted-list": string;
|
|
1479
|
+
heading: string;
|
|
1480
|
+
paragraph: string;
|
|
1481
|
+
section: string;
|
|
1482
|
+
link: string;
|
|
1483
|
+
};
|
|
1484
|
+
};
|
|
1468
1485
|
};
|
|
1469
1486
|
export default messages;
|
|
@@ -1515,6 +1515,23 @@ const messages = {
|
|
|
1515
1515
|
is360Video: "VR-video",
|
|
1516
1516
|
close: "Lukk"
|
|
1517
1517
|
}
|
|
1518
|
+
},
|
|
1519
|
+
richTextEditor: {
|
|
1520
|
+
tooltip: {
|
|
1521
|
+
bold: "Fet ({{shortcut}})",
|
|
1522
|
+
code: "Kode ({{shortcut}})",
|
|
1523
|
+
sub: "Senka skrift ({{shortcut}})",
|
|
1524
|
+
sup: "Heva skrift ({{shortcut}})",
|
|
1525
|
+
underlined: "Understreka ({{shortcut}})",
|
|
1526
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1527
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1528
|
+
"letter-list": "Alfabetisk liste ({{shortcut}})",
|
|
1529
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1530
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1531
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1532
|
+
section: "Seksjon ({{shortcut}})",
|
|
1533
|
+
link: "Lenke ({{shortcut}})"
|
|
1534
|
+
}
|
|
1518
1535
|
}
|
|
1519
1536
|
};
|
|
1520
1537
|
var _default = exports.default = messages;
|
|
@@ -1465,5 +1465,22 @@ declare const messages: {
|
|
|
1465
1465
|
close: string;
|
|
1466
1466
|
};
|
|
1467
1467
|
};
|
|
1468
|
+
richTextEditor: {
|
|
1469
|
+
tooltip: {
|
|
1470
|
+
bold: string;
|
|
1471
|
+
code: string;
|
|
1472
|
+
sub: string;
|
|
1473
|
+
sup: string;
|
|
1474
|
+
underlined: string;
|
|
1475
|
+
italic: string;
|
|
1476
|
+
"numbered-list": string;
|
|
1477
|
+
"letter-list": string;
|
|
1478
|
+
"bulleted-list": string;
|
|
1479
|
+
heading: string;
|
|
1480
|
+
paragraph: string;
|
|
1481
|
+
section: string;
|
|
1482
|
+
link: string;
|
|
1483
|
+
};
|
|
1484
|
+
};
|
|
1468
1485
|
};
|
|
1469
1486
|
export default messages;
|
|
@@ -1515,6 +1515,23 @@ const messages = {
|
|
|
1515
1515
|
is360Video: "VR-video",
|
|
1516
1516
|
close: "Lukk"
|
|
1517
1517
|
}
|
|
1518
|
+
},
|
|
1519
|
+
richTextEditor: {
|
|
1520
|
+
tooltip: {
|
|
1521
|
+
bold: "Fet ({{shortcut}})",
|
|
1522
|
+
code: "Kode ({{shortcut}})",
|
|
1523
|
+
sub: "Senket skrift ({{shortcut}})",
|
|
1524
|
+
sup: "Hevet skrift ({{shortcut}})",
|
|
1525
|
+
underlined: "Understreket ({{shortcut}})",
|
|
1526
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1527
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1528
|
+
"letter-list": "Bokstavliste ({{shortcut}})",
|
|
1529
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1530
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1531
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1532
|
+
section: "Seksjon ({{shortcut}})",
|
|
1533
|
+
link: "Lenke ({{shortcut}})"
|
|
1534
|
+
}
|
|
1518
1535
|
}
|
|
1519
1536
|
};
|
|
1520
1537
|
var _default = exports.default = messages;
|
|
@@ -1465,5 +1465,22 @@ declare const messages: {
|
|
|
1465
1465
|
close: string;
|
|
1466
1466
|
};
|
|
1467
1467
|
};
|
|
1468
|
+
richTextEditor: {
|
|
1469
|
+
tooltip: {
|
|
1470
|
+
bold: string;
|
|
1471
|
+
code: string;
|
|
1472
|
+
sub: string;
|
|
1473
|
+
sup: string;
|
|
1474
|
+
underlined: string;
|
|
1475
|
+
italic: string;
|
|
1476
|
+
"numbered-list": string;
|
|
1477
|
+
"letter-list": string;
|
|
1478
|
+
"bulleted-list": string;
|
|
1479
|
+
heading: string;
|
|
1480
|
+
paragraph: string;
|
|
1481
|
+
section: string;
|
|
1482
|
+
link: string;
|
|
1483
|
+
};
|
|
1484
|
+
};
|
|
1468
1485
|
};
|
|
1469
1486
|
export default messages;
|
|
@@ -1515,6 +1515,23 @@ const messages = {
|
|
|
1515
1515
|
is360Video: "VR-video",
|
|
1516
1516
|
close: "Lukk"
|
|
1517
1517
|
}
|
|
1518
|
+
},
|
|
1519
|
+
richTextEditor: {
|
|
1520
|
+
tooltip: {
|
|
1521
|
+
bold: "Fet ({{shortcut}})",
|
|
1522
|
+
code: "Kode ({{shortcut}})",
|
|
1523
|
+
sub: "Senket skrift ({{shortcut}})",
|
|
1524
|
+
sup: "Hevet skrift ({{shortcut}})",
|
|
1525
|
+
underlined: "Understreket ({{shortcut}})",
|
|
1526
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1527
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1528
|
+
"letter-list": "Bokstavliste ({{shortcut}})",
|
|
1529
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1530
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1531
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1532
|
+
section: "Seksjon ({{shortcut}})",
|
|
1533
|
+
link: "Lenke ({{shortcut}})"
|
|
1534
|
+
}
|
|
1518
1535
|
}
|
|
1519
1536
|
};
|
|
1520
1537
|
var _default = exports.default = messages;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
|
-
"version": "56.0.
|
|
3
|
+
"version": "56.0.96-alpha.0",
|
|
4
4
|
"description": "UI component library for NDLA",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"@ndla/core": "^5.0.3",
|
|
36
36
|
"@ndla/icons": "^8.0.50-alpha.0",
|
|
37
37
|
"@ndla/licenses": "^8.0.6-alpha.0",
|
|
38
|
-
"@ndla/primitives": "^1.0.
|
|
39
|
-
"@ndla/safelink": "^7.0.
|
|
38
|
+
"@ndla/primitives": "^1.0.72-alpha.0",
|
|
39
|
+
"@ndla/safelink": "^7.0.73-alpha.0",
|
|
40
40
|
"@ndla/styled-system": "^0.0.30",
|
|
41
41
|
"@ndla/util": "^5.0.5-alpha.0",
|
|
42
42
|
"html-react-parser": "^5.1.19",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"publishConfig": {
|
|
59
59
|
"access": "public"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "2157834f629fe65d702d09a80ffe1f888616ac37"
|
|
62
62
|
}
|
|
@@ -26,11 +26,7 @@ interface Props extends Omit<BlockQuoteProps, "variant"> {
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
export const ContentTypeBlockQuote = forwardRef<HTMLQuoteElement, Props>(({ variant, contentType, ...props }, ref) => {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
variant={variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined}
|
|
33
|
-
ref={ref}
|
|
34
|
-
/>
|
|
35
|
-
);
|
|
29
|
+
const color = contentType ? (contentTypeToVariantMapping[contentType] ?? "brand1") : "brand1";
|
|
30
|
+
const variantColor = variant === "colored" ? color : undefined;
|
|
31
|
+
return <BlockQuote {...props} variant={variantColor} ref={ref} />;
|
|
36
32
|
});
|
|
@@ -27,12 +27,8 @@ interface Props extends FramedContentProps {
|
|
|
27
27
|
|
|
28
28
|
export const ContentTypeFramedContent = forwardRef<HTMLDivElement, Props>(
|
|
29
29
|
({ variant = "neutral", contentType, ...props }, ref) => {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
colorTheme={variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined}
|
|
34
|
-
ref={ref}
|
|
35
|
-
/>
|
|
36
|
-
);
|
|
30
|
+
const color = contentType ? (contentTypeToVariantMapping[contentType] ?? "brand1") : "brand1";
|
|
31
|
+
const variantColor = variant === "colored" ? color : undefined;
|
|
32
|
+
return <FramedContent {...props} colorTheme={variantColor} ref={ref} />;
|
|
37
33
|
},
|
|
38
34
|
);
|
package/src/FactBox/FactBox.tsx
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import {
|
|
9
|
+
import React, {
|
|
10
10
|
type ComponentProps,
|
|
11
11
|
type ReactNode,
|
|
12
12
|
forwardRef,
|
|
@@ -126,9 +126,10 @@ const FactBox = forwardRef<HTMLElement, Props>(
|
|
|
126
126
|
const [state, setState] = useState<"open" | "closed">(defaultOpen ? "open" : "closed");
|
|
127
127
|
const contentId = useId();
|
|
128
128
|
// Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
|
|
129
|
-
//
|
|
129
|
+
// When running in React 18, we need to use an empty string instead of true.
|
|
130
|
+
// TODO: Remove this hack once we upgrade to React 19 as a peer dep.
|
|
130
131
|
const inertAttribute = useMemo(() => {
|
|
131
|
-
return state === "closed" ? { inert: "" } : {};
|
|
132
|
+
return state === "closed" ? { inert: typeof React.use === "function" ? true : "" } : {};
|
|
132
133
|
}, [state]) as { inert?: boolean };
|
|
133
134
|
|
|
134
135
|
useEffect(() => {
|
|
@@ -1539,6 +1539,23 @@ const messages = {
|
|
|
1539
1539
|
close: "Lukk",
|
|
1540
1540
|
},
|
|
1541
1541
|
},
|
|
1542
|
+
richTextEditor: {
|
|
1543
|
+
tooltip: {
|
|
1544
|
+
bold: "Bold ({{shortcut}})",
|
|
1545
|
+
code: "Code ({{shortcut}})",
|
|
1546
|
+
sub: "Subscript ({{shortcut}})",
|
|
1547
|
+
sup: "Superscript ({{shortcut}})",
|
|
1548
|
+
underlined: "Underlined ({{shortcut}})",
|
|
1549
|
+
italic: "Italic ({{shortcut}})",
|
|
1550
|
+
"numbered-list": "Numbered list ({{shortcut}})",
|
|
1551
|
+
"letter-list": "Alphabetical list ({{shortcut}})",
|
|
1552
|
+
"bulleted-list": "Bulleted list ({{shortcut}})",
|
|
1553
|
+
heading: "Heading {{level}} ({{shortcut}})",
|
|
1554
|
+
paragraph: "Paragraph ({{shortcut}})",
|
|
1555
|
+
section: "Section ({{shortcut}})",
|
|
1556
|
+
link: "Link ({{shortcut}})",
|
|
1557
|
+
},
|
|
1558
|
+
},
|
|
1542
1559
|
};
|
|
1543
1560
|
|
|
1544
1561
|
export default messages;
|
|
@@ -1540,6 +1540,23 @@ const messages = {
|
|
|
1540
1540
|
close: "Lukk",
|
|
1541
1541
|
},
|
|
1542
1542
|
},
|
|
1543
|
+
richTextEditor: {
|
|
1544
|
+
tooltip: {
|
|
1545
|
+
bold: "Fet ({{shortcut}})",
|
|
1546
|
+
code: "Kode ({{shortcut}})",
|
|
1547
|
+
sub: "Senket skrift ({{shortcut}})",
|
|
1548
|
+
sup: "Hevet skrift ({{shortcut}})",
|
|
1549
|
+
underlined: "Understreket ({{shortcut}})",
|
|
1550
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1551
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1552
|
+
"letter-list": "Bokstavliste ({{shortcut}})",
|
|
1553
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1554
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1555
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1556
|
+
section: "Seksjon ({{shortcut}})",
|
|
1557
|
+
link: "Lenke ({{shortcut}})",
|
|
1558
|
+
},
|
|
1559
|
+
},
|
|
1543
1560
|
};
|
|
1544
1561
|
|
|
1545
1562
|
export default messages;
|
|
@@ -1539,6 +1539,23 @@ const messages = {
|
|
|
1539
1539
|
close: "Lukk",
|
|
1540
1540
|
},
|
|
1541
1541
|
},
|
|
1542
|
+
richTextEditor: {
|
|
1543
|
+
tooltip: {
|
|
1544
|
+
bold: "Fet ({{shortcut}})",
|
|
1545
|
+
code: "Kode ({{shortcut}})",
|
|
1546
|
+
sub: "Senka skrift ({{shortcut}})",
|
|
1547
|
+
sup: "Heva skrift ({{shortcut}})",
|
|
1548
|
+
underlined: "Understreka ({{shortcut}})",
|
|
1549
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1550
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1551
|
+
"letter-list": "Alfabetisk liste ({{shortcut}})",
|
|
1552
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1553
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1554
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1555
|
+
section: "Seksjon ({{shortcut}})",
|
|
1556
|
+
link: "Lenke ({{shortcut}})",
|
|
1557
|
+
},
|
|
1558
|
+
},
|
|
1542
1559
|
};
|
|
1543
1560
|
|
|
1544
1561
|
export default messages;
|
|
@@ -1541,6 +1541,23 @@ const messages = {
|
|
|
1541
1541
|
close: "Lukk",
|
|
1542
1542
|
},
|
|
1543
1543
|
},
|
|
1544
|
+
richTextEditor: {
|
|
1545
|
+
tooltip: {
|
|
1546
|
+
bold: "Fet ({{shortcut}})",
|
|
1547
|
+
code: "Kode ({{shortcut}})",
|
|
1548
|
+
sub: "Senket skrift ({{shortcut}})",
|
|
1549
|
+
sup: "Hevet skrift ({{shortcut}})",
|
|
1550
|
+
underlined: "Understreket ({{shortcut}})",
|
|
1551
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1552
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1553
|
+
"letter-list": "Bokstavliste ({{shortcut}})",
|
|
1554
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1555
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1556
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1557
|
+
section: "Seksjon ({{shortcut}})",
|
|
1558
|
+
link: "Lenke ({{shortcut}})",
|
|
1559
|
+
},
|
|
1560
|
+
},
|
|
1544
1561
|
};
|
|
1545
1562
|
|
|
1546
1563
|
export default messages;
|
|
@@ -1543,6 +1543,23 @@ const messages = {
|
|
|
1543
1543
|
close: "Lukk",
|
|
1544
1544
|
},
|
|
1545
1545
|
},
|
|
1546
|
+
richTextEditor: {
|
|
1547
|
+
tooltip: {
|
|
1548
|
+
bold: "Fet ({{shortcut}})",
|
|
1549
|
+
code: "Kode ({{shortcut}})",
|
|
1550
|
+
sub: "Senket skrift ({{shortcut}})",
|
|
1551
|
+
sup: "Hevet skrift ({{shortcut}})",
|
|
1552
|
+
underlined: "Understreket ({{shortcut}})",
|
|
1553
|
+
italic: "Kursiv ({{shortcut}})",
|
|
1554
|
+
"numbered-list": "Nummerert liste ({{shortcut}})",
|
|
1555
|
+
"letter-list": "Bokstavliste ({{shortcut}})",
|
|
1556
|
+
"bulleted-list": "Punktliste ({{shortcut}})",
|
|
1557
|
+
heading: "Overskrift {{level}} ({{shortcut}})",
|
|
1558
|
+
paragraph: "Paragraf ({{shortcut}})",
|
|
1559
|
+
section: "Seksjon ({{shortcut}})",
|
|
1560
|
+
link: "Lenke ({{shortcut}})",
|
|
1561
|
+
},
|
|
1562
|
+
},
|
|
1546
1563
|
};
|
|
1547
1564
|
|
|
1548
1565
|
export default messages;
|