@ndla/primitives 1.0.120-alpha.0 → 1.0.121-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 +3 -3
- package/dist/styles.css +6 -6
- package/es/ArticleLists.mjs +30 -20
- package/es/ArticleLists.mjs.map +1 -1
- package/es/ExpandableBox.mjs +30 -6
- package/es/ExpandableBox.mjs.map +1 -1
- package/lib/ArticleLists.d.ts +3 -3
- package/lib/ArticleLists.js +29 -19
- package/lib/ArticleLists.js.map +1 -1
- package/lib/ExpandableBox.js +29 -5
- package/lib/ExpandableBox.js.map +1 -1
- package/lib/index.js +1 -0
- package/package.json +4 -4
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
"position]___[value:absolute]___[cond:& > li<___>_before",
|
|
59
59
|
"transform]___[value:translateX(calc(-100% - token(spacing.small)))]___[cond:& > li<___>_before",
|
|
60
60
|
"fontVariantNumeric]___[value:tabular-nums]___[cond:& > li<___>_before",
|
|
61
|
-
"counterReset]___[value:var(--counter-name
|
|
62
|
-
"counterIncrement]___[value:var(--counter-name
|
|
63
|
-
"content]___[value:counters(var(--counter-name
|
|
61
|
+
"counterReset]___[value:var(--counter-name) var(--start, 0)",
|
|
62
|
+
"counterIncrement]___[value:var(--counter-name)]___[cond:& > li",
|
|
63
|
+
"content]___[value:counters(var(--counter-name), \".\") \". \"]___[cond:& > li<___>_before",
|
|
64
64
|
"paddingInlineStart]___[value:small]___[cond:& > li<___>& > ol:not([data-variant='letters']) > li",
|
|
65
65
|
"paddingInlineStart]___[value:large]___[cond:& > li<___>& > ol:not([data-variant='letters']) > li<___>& > ol:not([data-variant='letters']) > li",
|
|
66
66
|
"paddingInlineStart]___[value:xxlarge]___[cond:& > li<___>& > ol:not([data-variant='letters']) > li<___>& > ol:not([data-variant='letters']) > li<___>& > ol:not([data-variant='letters']) > li",
|
package/dist/styles.css
CHANGED
|
@@ -665,8 +665,8 @@
|
|
|
665
665
|
padding-inline-start: var(--spacing-large);
|
|
666
666
|
}
|
|
667
667
|
|
|
668
|
-
.counter-reset_var\(--counter-name
|
|
669
|
-
counter-reset: var(--counter-name
|
|
668
|
+
.counter-reset_var\(--counter-name\)_var\(--start\,_0\) {
|
|
669
|
+
counter-reset: var(--counter-name) var(--start, 0);
|
|
670
670
|
}
|
|
671
671
|
|
|
672
672
|
.counter-reset_letters_var\(--start\,_0\) {
|
|
@@ -1771,8 +1771,8 @@
|
|
|
1771
1771
|
transform: rotate(180deg);
|
|
1772
1772
|
}
|
|
1773
1773
|
|
|
1774
|
-
.\[\&_\>_li\]\:counter-increment_var\(--counter-name
|
|
1775
|
-
counter-increment: var(--counter-name
|
|
1774
|
+
.\[\&_\>_li\]\:counter-increment_var\(--counter-name\) > li {
|
|
1775
|
+
counter-increment: var(--counter-name);
|
|
1776
1776
|
}
|
|
1777
1777
|
|
|
1778
1778
|
.\[\&_\>_li\]\:counter-increment_letters > li {
|
|
@@ -2547,8 +2547,8 @@
|
|
|
2547
2547
|
font-variant-numeric: tabular-nums;
|
|
2548
2548
|
}
|
|
2549
2549
|
|
|
2550
|
-
.\[\&_\>_li\]\:before\:content_counters\(var\(--counter-name
|
|
2551
|
-
content: counters(var(--counter-name
|
|
2550
|
+
.\[\&_\>_li\]\:before\:content_counters\(var\(--counter-name\)\,_\"\.\"\)_\"\._\" > li::before {
|
|
2551
|
+
content: counters(var(--counter-name), ".") ". ";
|
|
2552
2552
|
}
|
|
2553
2553
|
|
|
2554
2554
|
.\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)_\>_li\]\:ps_small > li > ol:not([data-variant='letters']) > li {
|
package/es/ArticleLists.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import { ark } from "@ark-ui/react";
|
|
|
2
2
|
import { css, cva } from "@ndla/styled-system/css";
|
|
3
3
|
import { styled } from "@ndla/styled-system/jsx";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import { forwardRef, useId, useMemo } from "react";
|
|
5
|
+
import { createContext, forwardRef, useContext, useId, useMemo } from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/ArticleLists.tsx
|
|
8
8
|
const orderedListRecipe = cva({
|
|
@@ -20,10 +20,10 @@ const orderedListRecipe = cva({
|
|
|
20
20
|
defaultVariants: { variant: "numbers" },
|
|
21
21
|
variants: { variant: {
|
|
22
22
|
numbers: {
|
|
23
|
-
counterReset: "var(--counter-name
|
|
23
|
+
counterReset: "var(--counter-name) var(--start, 0)",
|
|
24
24
|
"& > li": {
|
|
25
|
-
counterIncrement: "var(--counter-name
|
|
26
|
-
_before: { content: `counters(var(--counter-name
|
|
25
|
+
counterIncrement: "var(--counter-name)",
|
|
26
|
+
_before: { content: `counters(var(--counter-name), ".") ". "` },
|
|
27
27
|
"& > ol:not([data-variant='letters']) > li": {
|
|
28
28
|
paddingInlineStart: "small",
|
|
29
29
|
"& > ol:not([data-variant='letters']) > li": {
|
|
@@ -47,25 +47,35 @@ const orderedListRecipe = cva({
|
|
|
47
47
|
} }
|
|
48
48
|
});
|
|
49
49
|
const StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });
|
|
50
|
-
const
|
|
50
|
+
const ListContext = createContext(void 0);
|
|
51
|
+
const useCurrentListContext = () => {
|
|
52
|
+
return useContext(ListContext);
|
|
53
|
+
};
|
|
54
|
+
const OrderedList = forwardRef(({ variant = "numbers", css: cssProp, start, ...props }, ref) => {
|
|
51
55
|
const counterId = useId();
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
"--
|
|
55
|
-
|
|
56
|
-
|
|
56
|
+
const currentContext = useCurrentListContext();
|
|
57
|
+
const style = useMemo(() => {
|
|
58
|
+
const css = { "--start": start ? start - 1 : 0 };
|
|
59
|
+
if (variant !== currentContext) css["--counter-name"] = counterId;
|
|
60
|
+
return css;
|
|
61
|
+
}, [
|
|
57
62
|
start,
|
|
58
|
-
variant
|
|
63
|
+
variant,
|
|
64
|
+
currentContext,
|
|
65
|
+
counterId
|
|
59
66
|
]);
|
|
60
|
-
return /* @__PURE__ */ jsx(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
return /* @__PURE__ */ jsx(ListContext.Provider, {
|
|
68
|
+
value: variant ?? "numbers",
|
|
69
|
+
children: /* @__PURE__ */ jsx(StyledOrderedList, {
|
|
70
|
+
"data-embed-type": "ordered-list",
|
|
71
|
+
"data-variant": variant,
|
|
72
|
+
start,
|
|
73
|
+
type: variant === "letters" ? "A" : void 0,
|
|
74
|
+
css: css.raw(orderedListRecipe.raw({ variant }), cssProp),
|
|
75
|
+
style,
|
|
76
|
+
ref,
|
|
77
|
+
...props
|
|
78
|
+
})
|
|
69
79
|
});
|
|
70
80
|
});
|
|
71
81
|
const StyledUnOrderedList = styled("ul", { base: {
|
package/es/ArticleLists.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleLists.mjs","names":[],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type CSSProperties, forwardRef, useId, useMemo } from \"react\";\n\nconst orderedListRecipe = cva({\n base: {\n paddingInlineStart: \"large\",\n \"& > li\": {\n marginBlock: \"small\",\n _before: {\n position: \"absolute\",\n transform: \"translateX(calc(-100% - token(spacing.small)))\",\n fontVariantNumeric: \"tabular-nums\",\n },\n },\n },\n defaultVariants: {\n variant: \"numbers\",\n },\n variants: {\n variant: {\n numbers: {\n /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.\n * This way, the nested number list won't pick up on any other counters named \"numbers\" higher up in the DOM tree.\n * This fixes the following scenario\n * ol (numbers) -> 1.\n * ol(letters) -> A.\n * ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)\n */\n counterReset: \"var(--counter-name
|
|
1
|
+
{"version":3,"file":"ArticleLists.mjs","names":[],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { createContext, type CSSProperties, forwardRef, useContext, useId, useMemo } from \"react\";\n\nconst orderedListRecipe = cva({\n base: {\n paddingInlineStart: \"large\",\n \"& > li\": {\n marginBlock: \"small\",\n _before: {\n position: \"absolute\",\n transform: \"translateX(calc(-100% - token(spacing.small)))\",\n fontVariantNumeric: \"tabular-nums\",\n },\n },\n },\n defaultVariants: {\n variant: \"numbers\",\n },\n variants: {\n variant: {\n numbers: {\n /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.\n * This way, the nested number list won't pick up on any other counters named \"numbers\" higher up in the DOM tree.\n * This fixes the following scenario\n * ol (numbers) -> 1.\n * ol(letters) -> A.\n * ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)\n */\n counterReset: \"var(--counter-name) var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"var(--counter-name)\",\n _before: {\n content: `counters(var(--counter-name), \".\") \". \"`,\n },\n // If a nested OL is not a letters variant, it's a numbers variant. Keep increasing the margin to account for wider numbers.\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"small\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"large\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"xxlarge\",\n },\n },\n },\n },\n },\n letters: {\n counterReset: \"letters var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"letters\",\n _before: {\n content: `counter(letters, upper-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-roman) \". \"`,\n },\n },\n },\n },\n },\n },\n },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nconst ListContext = createContext<\"numbers\" | \"letters\" | undefined>(undefined);\n\nconst useCurrentListContext = () => {\n const ctx = useContext(ListContext);\n return ctx;\n};\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n ({ variant = \"numbers\", css: cssProp, start, ...props }, ref) => {\n const counterId = useId();\n const currentContext = useCurrentListContext();\n\n const style = useMemo(() => {\n const css: Record<string, any> = { \"--start\": start ? start - 1 : 0 };\n if (variant !== currentContext) {\n css[\"--counter-name\"] = counterId;\n }\n return css as CSSProperties;\n }, [start, variant, currentContext, counterId]);\n\n return (\n <ListContext.Provider value={variant ?? \"numbers\"}>\n <StyledOrderedList\n data-embed-type=\"ordered-list\"\n data-variant={variant}\n start={start}\n type={variant === \"letters\" ? \"A\" : undefined}\n css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n style={style}\n ref={ref}\n {...props}\n />\n </ListContext.Provider>\n );\n },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const StyledUnOrderedList = styled(\"ul\", {\n base: {\n listStyle: \"revert\",\n marginInlineStart: \"medium\",\n paddingInlineStart: \"small\",\n \"& ul\": {\n marginInlineStart: \"0\",\n },\n \"& li\": {\n marginBlock: \"small\",\n paddingInlineStart: \"small\",\n _marker: {\n color: \"icon.strong\",\n },\n\n \"& > ol\": {\n marginInlineStart: \"0 !important\",\n },\n },\n\n listStyleType: \"disc\",\n \"& > li > ul\": {\n listStyleType: \"circle\",\n \"& > li > ul\": {\n listStyleType: \"square\",\n },\n },\n },\n});\n\nexport const UnOrderedList = forwardRef<HTMLUListElement, UnOrderedListProps>((props, ref) => {\n const counterId = useId();\n\n const style = useMemo(\n () =>\n ({\n \"--counter-name\": counterId,\n }) as CSSProperties,\n [counterId],\n );\n\n return <StyledUnOrderedList ref={ref} style={style} {...props} />;\n});\n\nexport const DefinitionList = styled(\"dl\", {\n base: {\n \"& dt\": {\n fontWeight: \"bold\",\n },\n \"& dd\": {\n marginInlineStart: \"medium\",\n },\n },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;AAcA,MAAM,oBAAoB,IAAI;CAC5B,MAAM;EACJ,oBAAoB;EACpB,UAAU;GACR,aAAa;GACb,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;IACrB;GACF;EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,SAAS;GAQP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,2CACV;IAED,6CAA6C;KAC3C,oBAAoB;KACpB,6CAA6C;MAC3C,oBAAoB;MACpB,6CAA6C,EAC3C,oBAAoB,WACrB;MACF;KACF;IACF;GACF;EACD,SAAS;GACP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,sCACV;IACD,uCAAuC;KACrC,SAAS,EACP,SAAS,sCACV;KACD,uCAAuC,EACrC,SAAS,EACP,SAAS,sCACV,EACF;KACF;IACF;GACF;EACF,EACF;CACF,CAAC;AAMF,MAAM,oBAAoB,OAAO,IAAI,IAAI,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAM,cAAc,cAAiD,OAAU;AAE/E,MAAM,8BAA8B;AAElC,QADY,WAAW,YAAY;;AAIrC,MAAa,cAAc,YACxB,EAAE,UAAU,WAAW,KAAK,SAAS,OAAO,GAAG,SAAS,QAAQ;CAC/D,MAAM,YAAY,OAAO;CACzB,MAAM,iBAAiB,uBAAuB;CAE9C,MAAM,QAAQ,cAAc;EAC1B,MAAM,MAA2B,EAAE,WAAW,QAAQ,QAAQ,IAAI,GAAG;AACrE,MAAI,YAAY,eACd,KAAI,oBAAoB;AAE1B,SAAO;IACN;EAAC;EAAO;EAAS;EAAgB;EAAU,CAAC;AAE/C,QACE,oBAAC,YAAY;EAAS,OAAO,WAAW;YACtC,oBAAC;GACC,mBAAgB;GAChB,gBAAc;GACP;GACP,MAAM,YAAY,YAAY,MAAM;GACpC,KAAK,IAAI,IAAI,kBAAkB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;GAClD;GACF;GACL,GAAI;IACJ;GACmB;EAG5B;AAID,MAAa,sBAAsB,OAAO,MAAM,EAC9C,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,KACpB;CACD,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,eACR;EAED,UAAU,EACR,mBAAmB,gBACpB;EACF;CAED,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,UAChB;EACF;CACF,EACF,CAAC;AAEF,MAAa,gBAAgB,YAAkD,OAAO,QAAQ;CAC5F,MAAM,YAAY,OAAO;AAUzB,QAAO,oBAAC;EAAyB;EAAK,OARxB,eAET,EACC,kBAAkB,WACnB,GACH,CAAC,UAAU,CACZ;EAEmD,GAAI;GAAS;EACjE;AAEF,MAAa,iBAAiB,OAAO,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,QACb;CACD,QAAQ,EACN,mBAAmB,UACpB;CACF,EACF,CAAC"}
|
package/es/ExpandableBox.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ark } from "@ark-ui/react";
|
|
2
2
|
import { styled } from "@ndla/styled-system/jsx";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
import { forwardRef } from "react";
|
|
4
|
+
import { forwardRef, useEffect } from "react";
|
|
5
5
|
|
|
6
6
|
//#region src/ExpandableBox.tsx
|
|
7
7
|
const StyledExpandableBox = styled(ark.details, { base: {
|
|
@@ -19,11 +19,35 @@ const StyledExpandableBox = styled(ark.details, { base: {
|
|
|
19
19
|
"& summary, [data-embed-type='expandable-box-summary']": { marginBlockEnd: "-xxsmall" }
|
|
20
20
|
}
|
|
21
21
|
} }, { baseComponent: true });
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
const onBeforePrint = (_) => {
|
|
23
|
+
document.querySelectorAll("details").forEach((details) => {
|
|
24
|
+
if (!details.hasAttribute("open")) {
|
|
25
|
+
details.setAttribute("data-print-open", "true");
|
|
26
|
+
details.setAttribute("open", "true");
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
const onAfterPrint = (_) => {
|
|
31
|
+
document.querySelectorAll("details[data-print-open]").forEach((details) => {
|
|
32
|
+
details.removeAttribute("data-print-open");
|
|
33
|
+
details.removeAttribute("open");
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
const ExpandableBox = forwardRef((props, ref) => {
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
window.addEventListener("beforeprint", onBeforePrint);
|
|
39
|
+
window.addEventListener("afterprint", onAfterPrint);
|
|
40
|
+
return () => {
|
|
41
|
+
window.removeEventListener("beforeprint", onBeforePrint);
|
|
42
|
+
window.removeEventListener("afterprint", onAfterPrint);
|
|
43
|
+
};
|
|
44
|
+
}, []);
|
|
45
|
+
return /* @__PURE__ */ jsx(StyledExpandableBox, {
|
|
46
|
+
...props,
|
|
47
|
+
"data-embed-type": "expandable-box",
|
|
48
|
+
ref
|
|
49
|
+
});
|
|
50
|
+
});
|
|
27
51
|
const StyledExpandableBoxSummary = styled(ark.summary, { base: {
|
|
28
52
|
cursor: "pointer",
|
|
29
53
|
margin: "-medium",
|
package/es/ExpandableBox.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableBox.mjs","names":[],"sources":["../src/ExpandableBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { StyledProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { forwardRef } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n ark.details,\n {\n base: {\n transitionDuration: \"fast\",\n width: \"100%\",\n position: \"relative\",\n border: \"1px solid\",\n borderRadius: \"xsmall\",\n borderColor: \"stroke.subtle\",\n padding: \"medium\",\n clear: \"both\",\n overflow: \"hidden\",\n _open: {\n padding: \"medium\",\n \"& summary, [data-embed-type='expandable-box-summary']\": {\n marginBlockEnd: \"-xxsmall\",\n },\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => (\n <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref}
|
|
1
|
+
{"version":3,"file":"ExpandableBox.mjs","names":[],"sources":["../src/ExpandableBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { StyledProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, useEffect } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n ark.details,\n {\n base: {\n transitionDuration: \"fast\",\n width: \"100%\",\n position: \"relative\",\n border: \"1px solid\",\n borderRadius: \"xsmall\",\n borderColor: \"stroke.subtle\",\n padding: \"medium\",\n clear: \"both\",\n overflow: \"hidden\",\n _open: {\n padding: \"medium\",\n \"& summary, [data-embed-type='expandable-box-summary']\": {\n marginBlockEnd: \"-xxsmall\",\n },\n },\n },\n },\n { baseComponent: true },\n);\n\nconst onBeforePrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details\");\n detailsElements.forEach((details) => {\n if (!details.hasAttribute(\"open\")) {\n details.setAttribute(\"data-print-open\", \"true\");\n details.setAttribute(\"open\", \"true\");\n }\n });\n};\n\nconst onAfterPrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details[data-print-open]\");\n detailsElements.forEach((details) => {\n details.removeAttribute(\"data-print-open\");\n details.removeAttribute(\"open\");\n });\n};\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => {\n useEffect(() => {\n window.addEventListener(\"beforeprint\", onBeforePrint);\n window.addEventListener(\"afterprint\", onAfterPrint);\n return () => {\n window.removeEventListener(\"beforeprint\", onBeforePrint);\n window.removeEventListener(\"afterprint\", onAfterPrint);\n };\n }, []);\n return <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref} />;\n});\n\nexport interface ExpandableBoxSummaryProps extends HTMLArkProps<\"summary\">, StyledProps {}\n\nconst StyledExpandableBoxSummary = styled(\n ark.summary,\n {\n base: {\n cursor: \"pointer\",\n margin: \"-medium\",\n padding: \"medium\",\n textStyle: \"label.large!\",\n _hover: {\n color: \"text.action\",\n },\n \"& > *\": {\n display: \"inline!\",\n textStyle: \"label.large!\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ExpandableBoxSummary = forwardRef<HTMLElement, ExpandableBoxSummaryProps>((props, ref) => (\n <StyledExpandableBoxSummary {...props} data-embed-type=\"expandable-box-summary\" ref={ref} />\n));\n"],"mappings":";;;;;;AAeA,MAAM,sBAAsB,OAC1B,IAAI,SACJ,EACE,MAAM;CACJ,oBAAoB;CACpB,OAAO;CACP,UAAU;CACV,QAAQ;CACR,cAAc;CACd,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,OAAO;EACL,SAAS;EACT,yDAAyD,EACvD,gBAAgB,YACjB;EACF;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,iBAAiB,MAAa;AAElC,CADwB,SAAS,iBAAiB,UAAU,CAC5C,SAAS,YAAY;AACnC,MAAI,CAAC,QAAQ,aAAa,OAAO,EAAE;AACjC,WAAQ,aAAa,mBAAmB,OAAO;AAC/C,WAAQ,aAAa,QAAQ,OAAO;;GAEtC;;AAGJ,MAAM,gBAAgB,MAAa;AAEjC,CADwB,SAAS,iBAAiB,2BAA2B,CAC7D,SAAS,YAAY;AACnC,UAAQ,gBAAgB,kBAAkB;AAC1C,UAAQ,gBAAgB,OAAO;GAC/B;;AAGJ,MAAa,gBAAgB,YAAoD,OAAO,QAAQ;AAC9F,iBAAgB;AACd,SAAO,iBAAiB,eAAe,cAAc;AACrD,SAAO,iBAAiB,cAAc,aAAa;AACnD,eAAa;AACX,UAAO,oBAAoB,eAAe,cAAc;AACxD,UAAO,oBAAoB,cAAc,aAAa;;IAEvD,EAAE,CAAC;AACN,QAAO,oBAAC;EAAoB,GAAI;EAAO,mBAAgB;EAAsB;GAAO;EACpF;AAIF,MAAM,6BAA6B,OACjC,IAAI,SACJ,EACE,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ,EACN,OAAO,eACR;CACD,SAAS;EACP,SAAS;EACT,WAAW;EACZ;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,uBAAuB,YAAoD,OAAO,QAC7F,oBAAC;CAA2B,GAAI;CAAO,mBAAgB;CAA8B;EAAO,CAC5F"}
|
package/lib/ArticleLists.d.ts
CHANGED
|
@@ -17,11 +17,11 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
|
|
|
17
17
|
* ol(letters) -> A.
|
|
18
18
|
* ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)
|
|
19
19
|
*/
|
|
20
|
-
counterReset: "var(--counter-name
|
|
20
|
+
counterReset: "var(--counter-name) var(--start, 0)";
|
|
21
21
|
"& > li": {
|
|
22
|
-
counterIncrement: "var(--counter-name
|
|
22
|
+
counterIncrement: "var(--counter-name)";
|
|
23
23
|
_before: {
|
|
24
|
-
content: "counters(var(--counter-name
|
|
24
|
+
content: "counters(var(--counter-name), \".\") \". \"";
|
|
25
25
|
};
|
|
26
26
|
"& > ol:not([data-variant='letters']) > li": {
|
|
27
27
|
paddingInlineStart: "small";
|
package/lib/ArticleLists.js
CHANGED
|
@@ -20,10 +20,10 @@ const orderedListRecipe = (0, _ndla_styled_system_css.cva)({
|
|
|
20
20
|
defaultVariants: { variant: "numbers" },
|
|
21
21
|
variants: { variant: {
|
|
22
22
|
numbers: {
|
|
23
|
-
counterReset: "var(--counter-name
|
|
23
|
+
counterReset: "var(--counter-name) var(--start, 0)",
|
|
24
24
|
"& > li": {
|
|
25
|
-
counterIncrement: "var(--counter-name
|
|
26
|
-
_before: { content: `counters(var(--counter-name
|
|
25
|
+
counterIncrement: "var(--counter-name)",
|
|
26
|
+
_before: { content: `counters(var(--counter-name), ".") ". "` },
|
|
27
27
|
"& > ol:not([data-variant='letters']) > li": {
|
|
28
28
|
paddingInlineStart: "small",
|
|
29
29
|
"& > ol:not([data-variant='letters']) > li": {
|
|
@@ -47,25 +47,35 @@ const orderedListRecipe = (0, _ndla_styled_system_css.cva)({
|
|
|
47
47
|
} }
|
|
48
48
|
});
|
|
49
49
|
const StyledOrderedList = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.ol, {}, { baseComponent: true });
|
|
50
|
-
const
|
|
50
|
+
const ListContext = (0, react.createContext)(void 0);
|
|
51
|
+
const useCurrentListContext = () => {
|
|
52
|
+
return (0, react.useContext)(ListContext);
|
|
53
|
+
};
|
|
54
|
+
const OrderedList = (0, react.forwardRef)(({ variant = "numbers", css: cssProp, start, ...props }, ref) => {
|
|
51
55
|
const counterId = (0, react.useId)();
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
"--
|
|
55
|
-
|
|
56
|
-
|
|
56
|
+
const currentContext = useCurrentListContext();
|
|
57
|
+
const style = (0, react.useMemo)(() => {
|
|
58
|
+
const css = { "--start": start ? start - 1 : 0 };
|
|
59
|
+
if (variant !== currentContext) css["--counter-name"] = counterId;
|
|
60
|
+
return css;
|
|
61
|
+
}, [
|
|
57
62
|
start,
|
|
58
|
-
variant
|
|
63
|
+
variant,
|
|
64
|
+
currentContext,
|
|
65
|
+
counterId
|
|
59
66
|
]);
|
|
60
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListContext.Provider, {
|
|
68
|
+
value: variant ?? "numbers",
|
|
69
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledOrderedList, {
|
|
70
|
+
"data-embed-type": "ordered-list",
|
|
71
|
+
"data-variant": variant,
|
|
72
|
+
start,
|
|
73
|
+
type: variant === "letters" ? "A" : void 0,
|
|
74
|
+
css: _ndla_styled_system_css.css.raw(orderedListRecipe.raw({ variant }), cssProp),
|
|
75
|
+
style,
|
|
76
|
+
ref,
|
|
77
|
+
...props
|
|
78
|
+
})
|
|
69
79
|
});
|
|
70
80
|
});
|
|
71
81
|
const StyledUnOrderedList = (0, _ndla_styled_system_jsx.styled)("ul", { base: {
|
package/lib/ArticleLists.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleLists.js","names":["ark","css"],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type CSSProperties, forwardRef, useId, useMemo } from \"react\";\n\nconst orderedListRecipe = cva({\n base: {\n paddingInlineStart: \"large\",\n \"& > li\": {\n marginBlock: \"small\",\n _before: {\n position: \"absolute\",\n transform: \"translateX(calc(-100% - token(spacing.small)))\",\n fontVariantNumeric: \"tabular-nums\",\n },\n },\n },\n defaultVariants: {\n variant: \"numbers\",\n },\n variants: {\n variant: {\n numbers: {\n /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.\n * This way, the nested number list won't pick up on any other counters named \"numbers\" higher up in the DOM tree.\n * This fixes the following scenario\n * ol (numbers) -> 1.\n * ol(letters) -> A.\n * ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)\n */\n counterReset: \"var(--counter-name
|
|
1
|
+
{"version":3,"file":"ArticleLists.js","names":["ark","css"],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { createContext, type CSSProperties, forwardRef, useContext, useId, useMemo } from \"react\";\n\nconst orderedListRecipe = cva({\n base: {\n paddingInlineStart: \"large\",\n \"& > li\": {\n marginBlock: \"small\",\n _before: {\n position: \"absolute\",\n transform: \"translateX(calc(-100% - token(spacing.small)))\",\n fontVariantNumeric: \"tabular-nums\",\n },\n },\n },\n defaultVariants: {\n variant: \"numbers\",\n },\n variants: {\n variant: {\n numbers: {\n /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.\n * This way, the nested number list won't pick up on any other counters named \"numbers\" higher up in the DOM tree.\n * This fixes the following scenario\n * ol (numbers) -> 1.\n * ol(letters) -> A.\n * ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)\n */\n counterReset: \"var(--counter-name) var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"var(--counter-name)\",\n _before: {\n content: `counters(var(--counter-name), \".\") \". \"`,\n },\n // If a nested OL is not a letters variant, it's a numbers variant. Keep increasing the margin to account for wider numbers.\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"small\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"large\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"xxlarge\",\n },\n },\n },\n },\n },\n letters: {\n counterReset: \"letters var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"letters\",\n _before: {\n content: `counter(letters, upper-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-roman) \". \"`,\n },\n },\n },\n },\n },\n },\n },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nconst ListContext = createContext<\"numbers\" | \"letters\" | undefined>(undefined);\n\nconst useCurrentListContext = () => {\n const ctx = useContext(ListContext);\n return ctx;\n};\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n ({ variant = \"numbers\", css: cssProp, start, ...props }, ref) => {\n const counterId = useId();\n const currentContext = useCurrentListContext();\n\n const style = useMemo(() => {\n const css: Record<string, any> = { \"--start\": start ? start - 1 : 0 };\n if (variant !== currentContext) {\n css[\"--counter-name\"] = counterId;\n }\n return css as CSSProperties;\n }, [start, variant, currentContext, counterId]);\n\n return (\n <ListContext.Provider value={variant ?? \"numbers\"}>\n <StyledOrderedList\n data-embed-type=\"ordered-list\"\n data-variant={variant}\n start={start}\n type={variant === \"letters\" ? \"A\" : undefined}\n css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n style={style}\n ref={ref}\n {...props}\n />\n </ListContext.Provider>\n );\n },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const StyledUnOrderedList = styled(\"ul\", {\n base: {\n listStyle: \"revert\",\n marginInlineStart: \"medium\",\n paddingInlineStart: \"small\",\n \"& ul\": {\n marginInlineStart: \"0\",\n },\n \"& li\": {\n marginBlock: \"small\",\n paddingInlineStart: \"small\",\n _marker: {\n color: \"icon.strong\",\n },\n\n \"& > ol\": {\n marginInlineStart: \"0 !important\",\n },\n },\n\n listStyleType: \"disc\",\n \"& > li > ul\": {\n listStyleType: \"circle\",\n \"& > li > ul\": {\n listStyleType: \"square\",\n },\n },\n },\n});\n\nexport const UnOrderedList = forwardRef<HTMLUListElement, UnOrderedListProps>((props, ref) => {\n const counterId = useId();\n\n const style = useMemo(\n () =>\n ({\n \"--counter-name\": counterId,\n }) as CSSProperties,\n [counterId],\n );\n\n return <StyledUnOrderedList ref={ref} style={style} {...props} />;\n});\n\nexport const DefinitionList = styled(\"dl\", {\n base: {\n \"& dt\": {\n fontWeight: \"bold\",\n },\n \"& dd\": {\n marginInlineStart: \"medium\",\n },\n },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;AAcA,MAAM,qDAAwB;CAC5B,MAAM;EACJ,oBAAoB;EACpB,UAAU;GACR,aAAa;GACb,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;IACrB;GACF;EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,SAAS;GAQP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,2CACV;IAED,6CAA6C;KAC3C,oBAAoB;KACpB,6CAA6C;MAC3C,oBAAoB;MACpB,6CAA6C,EAC3C,oBAAoB,WACrB;MACF;KACF;IACF;GACF;EACD,SAAS;GACP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,sCACV;IACD,uCAAuC;KACrC,SAAS,EACP,SAAS,sCACV;KACD,uCAAuC,EACrC,SAAS,EACP,SAAS,sCACV,EACF;KACF;IACF;GACF;EACF,EACF;CACF,CAAC;AAMF,MAAM,wDAA2BA,kBAAI,IAAI,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAM,uCAA+D,OAAU;AAE/E,MAAM,8BAA8B;AAElC,8BADuB,YAAY;;AAIrC,MAAa,qCACV,EAAE,UAAU,WAAW,KAAK,SAAS,OAAO,GAAG,SAAS,QAAQ;CAC/D,MAAM,8BAAmB;CACzB,MAAM,iBAAiB,uBAAuB;CAE9C,MAAM,iCAAsB;EAC1B,MAAM,MAA2B,EAAE,WAAW,QAAQ,QAAQ,IAAI,GAAG;AACrE,MAAI,YAAY,eACd,KAAI,oBAAoB;AAE1B,SAAO;IACN;EAAC;EAAO;EAAS;EAAgB;EAAU,CAAC;AAE/C,QACE,2CAAC,YAAY;EAAS,OAAO,WAAW;YACtC,2CAAC;GACC,mBAAgB;GAChB,gBAAc;GACP;GACP,MAAM,YAAY,YAAY,MAAM;GACpC,KAAKC,4BAAI,IAAI,kBAAkB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;GAClD;GACF;GACL,GAAI;IACJ;GACmB;EAG5B;AAID,MAAa,0DAA6B,MAAM,EAC9C,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,KACpB;CACD,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,eACR;EAED,UAAU,EACR,mBAAmB,gBACpB;EACF;CAED,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,UAChB;EACF;CACF,EACF,CAAC;AAEF,MAAa,uCAAkE,OAAO,QAAQ;CAC5F,MAAM,8BAAmB;AAUzB,QAAO,2CAAC;EAAyB;EAAK,iCANjC,EACC,kBAAkB,WACnB,GACH,CAAC,UAAU,CACZ;EAEmD,GAAI;GAAS;EACjE;AAEF,MAAa,qDAAwB,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,QACb;CACD,QAAQ,EACN,mBAAmB,UACpB;CACF,EACF,CAAC"}
|
package/lib/ExpandableBox.js
CHANGED
|
@@ -19,11 +19,35 @@ const StyledExpandableBox = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ar
|
|
|
19
19
|
"& summary, [data-embed-type='expandable-box-summary']": { marginBlockEnd: "-xxsmall" }
|
|
20
20
|
}
|
|
21
21
|
} }, { baseComponent: true });
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
const onBeforePrint = (_) => {
|
|
23
|
+
document.querySelectorAll("details").forEach((details) => {
|
|
24
|
+
if (!details.hasAttribute("open")) {
|
|
25
|
+
details.setAttribute("data-print-open", "true");
|
|
26
|
+
details.setAttribute("open", "true");
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
const onAfterPrint = (_) => {
|
|
31
|
+
document.querySelectorAll("details[data-print-open]").forEach((details) => {
|
|
32
|
+
details.removeAttribute("data-print-open");
|
|
33
|
+
details.removeAttribute("open");
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
const ExpandableBox = (0, react.forwardRef)((props, ref) => {
|
|
37
|
+
(0, react.useEffect)(() => {
|
|
38
|
+
window.addEventListener("beforeprint", onBeforePrint);
|
|
39
|
+
window.addEventListener("afterprint", onAfterPrint);
|
|
40
|
+
return () => {
|
|
41
|
+
window.removeEventListener("beforeprint", onBeforePrint);
|
|
42
|
+
window.removeEventListener("afterprint", onAfterPrint);
|
|
43
|
+
};
|
|
44
|
+
}, []);
|
|
45
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledExpandableBox, {
|
|
46
|
+
...props,
|
|
47
|
+
"data-embed-type": "expandable-box",
|
|
48
|
+
ref
|
|
49
|
+
});
|
|
50
|
+
});
|
|
27
51
|
const StyledExpandableBoxSummary = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.summary, { base: {
|
|
28
52
|
cursor: "pointer",
|
|
29
53
|
margin: "-medium",
|
package/lib/ExpandableBox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableBox.js","names":["ark"],"sources":["../src/ExpandableBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { StyledProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { forwardRef } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n ark.details,\n {\n base: {\n transitionDuration: \"fast\",\n width: \"100%\",\n position: \"relative\",\n border: \"1px solid\",\n borderRadius: \"xsmall\",\n borderColor: \"stroke.subtle\",\n padding: \"medium\",\n clear: \"both\",\n overflow: \"hidden\",\n _open: {\n padding: \"medium\",\n \"& summary, [data-embed-type='expandable-box-summary']\": {\n marginBlockEnd: \"-xxsmall\",\n },\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => (\n <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref}
|
|
1
|
+
{"version":3,"file":"ExpandableBox.js","names":["ark"],"sources":["../src/ExpandableBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { StyledProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, useEffect } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n ark.details,\n {\n base: {\n transitionDuration: \"fast\",\n width: \"100%\",\n position: \"relative\",\n border: \"1px solid\",\n borderRadius: \"xsmall\",\n borderColor: \"stroke.subtle\",\n padding: \"medium\",\n clear: \"both\",\n overflow: \"hidden\",\n _open: {\n padding: \"medium\",\n \"& summary, [data-embed-type='expandable-box-summary']\": {\n marginBlockEnd: \"-xxsmall\",\n },\n },\n },\n },\n { baseComponent: true },\n);\n\nconst onBeforePrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details\");\n detailsElements.forEach((details) => {\n if (!details.hasAttribute(\"open\")) {\n details.setAttribute(\"data-print-open\", \"true\");\n details.setAttribute(\"open\", \"true\");\n }\n });\n};\n\nconst onAfterPrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details[data-print-open]\");\n detailsElements.forEach((details) => {\n details.removeAttribute(\"data-print-open\");\n details.removeAttribute(\"open\");\n });\n};\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => {\n useEffect(() => {\n window.addEventListener(\"beforeprint\", onBeforePrint);\n window.addEventListener(\"afterprint\", onAfterPrint);\n return () => {\n window.removeEventListener(\"beforeprint\", onBeforePrint);\n window.removeEventListener(\"afterprint\", onAfterPrint);\n };\n }, []);\n return <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref} />;\n});\n\nexport interface ExpandableBoxSummaryProps extends HTMLArkProps<\"summary\">, StyledProps {}\n\nconst StyledExpandableBoxSummary = styled(\n ark.summary,\n {\n base: {\n cursor: \"pointer\",\n margin: \"-medium\",\n padding: \"medium\",\n textStyle: \"label.large!\",\n _hover: {\n color: \"text.action\",\n },\n \"& > *\": {\n display: \"inline!\",\n textStyle: \"label.large!\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ExpandableBoxSummary = forwardRef<HTMLElement, ExpandableBoxSummaryProps>((props, ref) => (\n <StyledExpandableBoxSummary {...props} data-embed-type=\"expandable-box-summary\" ref={ref} />\n));\n"],"mappings":";;;;;;AAeA,MAAM,0DACJA,kBAAI,SACJ,EACE,MAAM;CACJ,oBAAoB;CACpB,OAAO;CACP,UAAU;CACV,QAAQ;CACR,cAAc;CACd,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,OAAO;EACL,SAAS;EACT,yDAAyD,EACvD,gBAAgB,YACjB;EACF;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,iBAAiB,MAAa;AAElC,CADwB,SAAS,iBAAiB,UAAU,CAC5C,SAAS,YAAY;AACnC,MAAI,CAAC,QAAQ,aAAa,OAAO,EAAE;AACjC,WAAQ,aAAa,mBAAmB,OAAO;AAC/C,WAAQ,aAAa,QAAQ,OAAO;;GAEtC;;AAGJ,MAAM,gBAAgB,MAAa;AAEjC,CADwB,SAAS,iBAAiB,2BAA2B,CAC7D,SAAS,YAAY;AACnC,UAAQ,gBAAgB,kBAAkB;AAC1C,UAAQ,gBAAgB,OAAO;GAC/B;;AAGJ,MAAa,uCAAoE,OAAO,QAAQ;AAC9F,4BAAgB;AACd,SAAO,iBAAiB,eAAe,cAAc;AACrD,SAAO,iBAAiB,cAAc,aAAa;AACnD,eAAa;AACX,UAAO,oBAAoB,eAAe,cAAc;AACxD,UAAO,oBAAoB,cAAc,aAAa;;IAEvD,EAAE,CAAC;AACN,QAAO,2CAAC;EAAoB,GAAI;EAAO,mBAAgB;EAAsB;GAAO;EACpF;AAIF,MAAM,iEACJA,kBAAI,SACJ,EACE,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ,EACN,OAAO,eACR;CACD,SAAS;EACP,SAAS;EACT,WAAW;EACZ;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,8CAA2E,OAAO,QAC7F,2CAAC;CAA2B,GAAI;CAAO,mBAAgB;CAA8B;EAAO,CAC5F"}
|
package/lib/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/primitives",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.121-alpha.0",
|
|
5
5
|
"description": "Primitive components for NDLA.",
|
|
6
6
|
"license": "GPL-3.0",
|
|
7
7
|
"exports": {
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@ark-ui/react": "^5.30.0",
|
|
36
|
-
"@ndla/styled-system": "^0.0.
|
|
36
|
+
"@ndla/styled-system": "^0.0.47",
|
|
37
37
|
"@ndla/util": "^5.0.18-alpha.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@ndla/preset-panda": "^0.0.
|
|
40
|
+
"@ndla/preset-panda": "^0.0.72",
|
|
41
41
|
"@pandacss/dev": "^1.7.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "5f0db97c7ac7d8d300c8297795938bc0f1e48111"
|
|
51
51
|
}
|