@ndla/ui 56.0.168-alpha.0 → 56.0.170-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/panda.buildinfo.json +1 -1
- package/dist/styles.css +2 -2
- package/es/AnchorHeading/AnchorHeading.mjs +5 -4
- package/es/AnchorHeading/AnchorHeading.mjs.map +1 -1
- package/lib/AnchorHeading/AnchorHeading.js +5 -4
- package/lib/AnchorHeading/AnchorHeading.js.map +1 -1
- package/package.json +6 -6
- package/src/AnchorHeading/AnchorHeading.tsx +5 -4
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"styles": {
|
|
4
4
|
"atomic": [
|
|
5
5
|
"position]___[value:absolute]___[cond:_before",
|
|
6
|
-
"marginInlineStart]___[value:-
|
|
6
|
+
"marginInlineStart]___[value:-0.75em]___[cond:_before",
|
|
7
7
|
"content]___[value:\"#\"]___[cond:_before",
|
|
8
8
|
"visibility]___[value:hidden]___[cond:_before",
|
|
9
9
|
"textDecoration]___[value:underline]___[cond:_hover",
|
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
2
|
import { styled } from "@ndla/styled-system/jsx";
|
|
3
|
+
import { SafeLink } from "@ndla/safelink";
|
|
3
4
|
import { jsx } from "react/jsx-runtime";
|
|
4
5
|
|
|
5
6
|
//#region src/AnchorHeading/AnchorHeading.tsx
|
|
@@ -10,10 +11,10 @@ import { jsx } from "react/jsx-runtime";
|
|
|
10
11
|
* LICENSE file in the root directory of this source tree.
|
|
11
12
|
*
|
|
12
13
|
*/
|
|
13
|
-
const StyledAnchor = styled(
|
|
14
|
+
const StyledAnchor = styled(SafeLink, { base: {
|
|
14
15
|
_before: {
|
|
15
16
|
position: "absolute",
|
|
16
|
-
marginInlineStart: "-
|
|
17
|
+
marginInlineStart: "-0.75em",
|
|
17
18
|
content: "\"#\"",
|
|
18
19
|
visibility: "hidden"
|
|
19
20
|
},
|
|
@@ -23,7 +24,7 @@ const StyledAnchor = styled("a", { base: {
|
|
|
23
24
|
}
|
|
24
25
|
} });
|
|
25
26
|
function slugifyUnicode(input) {
|
|
26
|
-
return input.trim().toLowerCase().normalize("NFKC").replace(/[^\p{Letter}\p{Number}]+/gu, "
|
|
27
|
+
return input.trim().toLowerCase().normalize("NFKC").replace(/[^\p{Letter}\p{Number}]+/gu, "_").replace(/^-+|-+$/g, "");
|
|
27
28
|
}
|
|
28
29
|
const AnchorHeading = ({ children, copyText, lang }) => {
|
|
29
30
|
const slug = useMemo(() => slugifyUnicode(copyText.replace(/ /g, "_")), [copyText]);
|
|
@@ -32,7 +33,7 @@ const AnchorHeading = ({ children, copyText, lang }) => {
|
|
|
32
33
|
lang,
|
|
33
34
|
tabIndex: -1,
|
|
34
35
|
children: /* @__PURE__ */ jsx(StyledAnchor, {
|
|
35
|
-
|
|
36
|
+
to: `#${encodeURIComponent(slug)}`,
|
|
36
37
|
children
|
|
37
38
|
})
|
|
38
39
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorHeading.mjs","names":[],"sources":["../../src/AnchorHeading/AnchorHeading.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode, useMemo } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledAnchor = styled(
|
|
1
|
+
{"version":3,"file":"AnchorHeading.mjs","names":[],"sources":["../../src/AnchorHeading/AnchorHeading.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode, useMemo } from \"react\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledAnchor = styled(SafeLink, {\n base: {\n _before: {\n position: \"absolute\",\n marginInlineStart: \"-0.75em\",\n content: '\"#\"',\n visibility: \"hidden\",\n },\n _hover: {\n textDecoration: \"underline\",\n tablet: {\n _before: {\n visibility: \"visible\",\n },\n },\n },\n },\n});\n\ninterface Props {\n // What to render within the h2\n children: ReactNode;\n copyText: string;\n lang?: string;\n}\n\nfunction slugifyUnicode(input: string) {\n return (\n input\n .trim()\n .toLowerCase()\n // Normalize to reduce weird Unicode equivalences\n .normalize(\"NFKC\")\n // Keep any Unicode letters/numbers; replace everything else with \"-\"\n .replace(/[^\\p{Letter}\\p{Number}]+/gu, \"_\")\n // Trim leading/trailing \"-\"\n .replace(/^-+|-+$/g, \"\")\n );\n}\n\nexport const AnchorHeading = ({ children, copyText, lang }: Props) => {\n const slug = useMemo(() => slugifyUnicode(copyText.replace(/ /g, \"_\")), [copyText]);\n\n return (\n <h2 id={slug} lang={lang} tabIndex={-1}>\n <StyledAnchor to={`#${encodeURIComponent(slug)}`}>{children}</StyledAnchor>\n </h2>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,eAAe,OAAO,UAAU,EACpC,MAAM;CACJ,SAAS;EACP,UAAU;EACV,mBAAmB;EACnB,SAAS;EACT,YAAY;EACb;CACD,QAAQ;EACN,gBAAgB;EAChB,QAAQ,EACN,SAAS,EACP,YAAY,WACb,EACF;EACF;CACF,EACF,CAAC;AASF,SAAS,eAAe,OAAe;AACrC,QACE,MACG,MAAM,CACN,aAAa,CAEb,UAAU,OAAO,CAEjB,QAAQ,8BAA8B,IAAI,CAE1C,QAAQ,YAAY,GAAG;;AAI9B,MAAa,iBAAiB,EAAE,UAAU,UAAU,WAAkB;CACpE,MAAM,OAAO,cAAc,eAAe,SAAS,QAAQ,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;AAEnF,QACE,oBAAC;EAAG,IAAI;EAAY;EAAM,UAAU;YAClC,oBAAC;GAAa,IAAI,IAAI,mBAAmB,KAAK;GAAK;IAAwB;GACxE"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
2
|
let react = require("react");
|
|
3
3
|
let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
4
|
+
let _ndla_safelink = require("@ndla/safelink");
|
|
4
5
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
6
|
|
|
6
7
|
//#region src/AnchorHeading/AnchorHeading.tsx
|
|
@@ -11,10 +12,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
11
12
|
* LICENSE file in the root directory of this source tree.
|
|
12
13
|
*
|
|
13
14
|
*/
|
|
14
|
-
const StyledAnchor = (0, _ndla_styled_system_jsx.styled)(
|
|
15
|
+
const StyledAnchor = (0, _ndla_styled_system_jsx.styled)(_ndla_safelink.SafeLink, { base: {
|
|
15
16
|
_before: {
|
|
16
17
|
position: "absolute",
|
|
17
|
-
marginInlineStart: "-
|
|
18
|
+
marginInlineStart: "-0.75em",
|
|
18
19
|
content: "\"#\"",
|
|
19
20
|
visibility: "hidden"
|
|
20
21
|
},
|
|
@@ -24,7 +25,7 @@ const StyledAnchor = (0, _ndla_styled_system_jsx.styled)("a", { base: {
|
|
|
24
25
|
}
|
|
25
26
|
} });
|
|
26
27
|
function slugifyUnicode(input) {
|
|
27
|
-
return input.trim().toLowerCase().normalize("NFKC").replace(/[^\p{Letter}\p{Number}]+/gu, "
|
|
28
|
+
return input.trim().toLowerCase().normalize("NFKC").replace(/[^\p{Letter}\p{Number}]+/gu, "_").replace(/^-+|-+$/g, "");
|
|
28
29
|
}
|
|
29
30
|
const AnchorHeading = ({ children, copyText, lang }) => {
|
|
30
31
|
const slug = (0, react.useMemo)(() => slugifyUnicode(copyText.replace(/ /g, "_")), [copyText]);
|
|
@@ -33,7 +34,7 @@ const AnchorHeading = ({ children, copyText, lang }) => {
|
|
|
33
34
|
lang,
|
|
34
35
|
tabIndex: -1,
|
|
35
36
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAnchor, {
|
|
36
|
-
|
|
37
|
+
to: `#${encodeURIComponent(slug)}`,
|
|
37
38
|
children
|
|
38
39
|
})
|
|
39
40
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorHeading.js","names":[],"sources":["../../src/AnchorHeading/AnchorHeading.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode, useMemo } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledAnchor = styled(
|
|
1
|
+
{"version":3,"file":"AnchorHeading.js","names":["SafeLink"],"sources":["../../src/AnchorHeading/AnchorHeading.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode, useMemo } from \"react\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledAnchor = styled(SafeLink, {\n base: {\n _before: {\n position: \"absolute\",\n marginInlineStart: \"-0.75em\",\n content: '\"#\"',\n visibility: \"hidden\",\n },\n _hover: {\n textDecoration: \"underline\",\n tablet: {\n _before: {\n visibility: \"visible\",\n },\n },\n },\n },\n});\n\ninterface Props {\n // What to render within the h2\n children: ReactNode;\n copyText: string;\n lang?: string;\n}\n\nfunction slugifyUnicode(input: string) {\n return (\n input\n .trim()\n .toLowerCase()\n // Normalize to reduce weird Unicode equivalences\n .normalize(\"NFKC\")\n // Keep any Unicode letters/numbers; replace everything else with \"-\"\n .replace(/[^\\p{Letter}\\p{Number}]+/gu, \"_\")\n // Trim leading/trailing \"-\"\n .replace(/^-+|-+$/g, \"\")\n );\n}\n\nexport const AnchorHeading = ({ children, copyText, lang }: Props) => {\n const slug = useMemo(() => slugifyUnicode(copyText.replace(/ /g, \"_\")), [copyText]);\n\n return (\n <h2 id={slug} lang={lang} tabIndex={-1}>\n <StyledAnchor to={`#${encodeURIComponent(slug)}`}>{children}</StyledAnchor>\n </h2>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,mDAAsBA,yBAAU,EACpC,MAAM;CACJ,SAAS;EACP,UAAU;EACV,mBAAmB;EACnB,SAAS;EACT,YAAY;EACb;CACD,QAAQ;EACN,gBAAgB;EAChB,QAAQ,EACN,SAAS,EACP,YAAY,WACb,EACF;EACF;CACF,EACF,CAAC;AASF,SAAS,eAAe,OAAe;AACrC,QACE,MACG,MAAM,CACN,aAAa,CAEb,UAAU,OAAO,CAEjB,QAAQ,8BAA8B,IAAI,CAE1C,QAAQ,YAAY,GAAG;;AAI9B,MAAa,iBAAiB,EAAE,UAAU,UAAU,WAAkB;CACpE,MAAM,gCAAqB,eAAe,SAAS,QAAQ,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;AAEnF,QACE,2CAAC;EAAG,IAAI;EAAY;EAAM,UAAU;YAClC,2CAAC;GAAa,IAAI,IAAI,mBAAmB,KAAK;GAAK;IAAwB;GACxE"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "56.0.
|
|
4
|
+
"version": "56.0.170-alpha.0",
|
|
5
5
|
"description": "UI component library for NDLA",
|
|
6
6
|
"license": "GPL-3.0",
|
|
7
7
|
"exports": {
|
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@ark-ui/react": "^5.25.0",
|
|
40
40
|
"@ndla/core": "^6.0.7-alpha.0",
|
|
41
|
-
"@ndla/icons": "^8.0.
|
|
41
|
+
"@ndla/icons": "^8.0.77-alpha.0",
|
|
42
42
|
"@ndla/licenses": "^10.0.9-alpha.0",
|
|
43
|
-
"@ndla/primitives": "^1.0.
|
|
44
|
-
"@ndla/safelink": "^7.0.
|
|
43
|
+
"@ndla/primitives": "^1.0.117-alpha.0",
|
|
44
|
+
"@ndla/safelink": "^7.0.120-alpha.0",
|
|
45
45
|
"@ndla/styled-system": "^0.0.46",
|
|
46
46
|
"@ndla/util": "^5.0.18-alpha.0",
|
|
47
47
|
"html-react-parser": "^5.2.8"
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"react-router": ">= 7.0.0"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
|
-
"@ndla/preset-panda": "^0.0.
|
|
57
|
+
"@ndla/preset-panda": "^0.0.70",
|
|
58
58
|
"@ndla/types-backend": "^1.0.89",
|
|
59
59
|
"@ndla/types-embed": "^5.0.20-alpha.0",
|
|
60
60
|
"@pandacss/dev": "^1.7.0"
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "176b61e29793f21b58a53fd9f72e3b4b88d6843e"
|
|
66
66
|
}
|
|
@@ -7,13 +7,14 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
import { type ReactNode, useMemo } from "react";
|
|
10
|
+
import { SafeLink } from "@ndla/safelink";
|
|
10
11
|
import { styled } from "@ndla/styled-system/jsx";
|
|
11
12
|
|
|
12
|
-
const StyledAnchor = styled(
|
|
13
|
+
const StyledAnchor = styled(SafeLink, {
|
|
13
14
|
base: {
|
|
14
15
|
_before: {
|
|
15
16
|
position: "absolute",
|
|
16
|
-
marginInlineStart: "-
|
|
17
|
+
marginInlineStart: "-0.75em",
|
|
17
18
|
content: '"#"',
|
|
18
19
|
visibility: "hidden",
|
|
19
20
|
},
|
|
@@ -43,7 +44,7 @@ function slugifyUnicode(input: string) {
|
|
|
43
44
|
// Normalize to reduce weird Unicode equivalences
|
|
44
45
|
.normalize("NFKC")
|
|
45
46
|
// Keep any Unicode letters/numbers; replace everything else with "-"
|
|
46
|
-
.replace(/[^\p{Letter}\p{Number}]+/gu, "
|
|
47
|
+
.replace(/[^\p{Letter}\p{Number}]+/gu, "_")
|
|
47
48
|
// Trim leading/trailing "-"
|
|
48
49
|
.replace(/^-+|-+$/g, "")
|
|
49
50
|
);
|
|
@@ -54,7 +55,7 @@ export const AnchorHeading = ({ children, copyText, lang }: Props) => {
|
|
|
54
55
|
|
|
55
56
|
return (
|
|
56
57
|
<h2 id={slug} lang={lang} tabIndex={-1}>
|
|
57
|
-
<StyledAnchor
|
|
58
|
+
<StyledAnchor to={`#${encodeURIComponent(slug)}`}>{children}</StyledAnchor>
|
|
58
59
|
</h2>
|
|
59
60
|
);
|
|
60
61
|
};
|