@ndla/ui 56.0.188-alpha.0 → 56.0.189-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/panda.buildinfo.json +4 -4
  2. package/dist/styles.css +17 -16
  3. package/es/AudioPlayer/AudioProgress.mjs +20 -17
  4. package/es/AudioPlayer/AudioProgress.mjs.map +1 -1
  5. package/lib/AudioPlayer/AudioProgress.js +20 -17
  6. package/lib/AudioPlayer/AudioProgress.js.map +1 -1
  7. package/package.json +4 -4
  8. package/src/AudioPlayer/AudioProgress.tsx +11 -9
  9. package/src/Embed/AudioEmbed.stories.tsx +2 -0
  10. package/src/Embed/RelatedContentEmbed.stories.tsx +2 -0
package/dist/panda.buildinfo.json CHANGED
@@ -81,11 +81,10 @@
81
81
  "direction]___[value:rtl]___[cond:& p:has(span[dir=\"rtl\"])",
82
82
  "alignSelf]___[value:flex-start",
83
83
  "marginInlineStart]___[value:3xsmall",
84
- "borderRadius]___[value:0",
85
- "width]___[value:4xsmall",
86
- "height]___[value:4xsmall",
84
+ "marginBlockStart]___[value:-4xsmall",
85
+ "transitionProperty]___[value:background, border-radius, width, height",
87
86
  "background]___[value:unset",
88
- "height]___[value:unset",
87
+ "marginBlockEnd]___[value:-xsmall",
89
88
  "paddingBlockEnd]___[value:0",
90
89
  "boxShadow]___[value:xsmall",
91
90
  "background]___[value:surface.brand.1.subtle",
@@ -343,6 +342,7 @@
343
342
  "outline]___[value:0px",
344
343
  "boxShadow]___[value:none",
345
344
  "aspectRatio]___[value:16/9",
345
+ "height]___[value:unset",
346
346
  "gridTemplateColumns]___[value:repeat(2, 1fr)",
347
347
  "gridTemplateColumns]___[value:1fr]___[cond:tabletDown",
348
348
  "marginBlockStart]___[value:xsmall",
package/dist/styles.css CHANGED
@@ -314,10 +314,6 @@
314
314
  padding-inline: var(--spacing-xsmall);
315
315
  }
316
316
 
317
- .bdr_0 {
318
- border-radius: 0;
319
- }
320
-
321
317
  .px_medium {
322
318
  padding-inline: var(--spacing-medium);
323
319
  }
@@ -467,6 +463,19 @@
467
463
  margin-inline-start: var(--spacing-3xsmall);
468
464
  }
469
465
 
466
+ .mbs_-4xsmall {
467
+ margin-block-start: calc(var(--spacing-4xsmall) * -1);
468
+ }
469
+
470
+ .trs-prop_background\,_border-radius\,_width\,_height {
471
+ --transition-prop: background, border-radius, width, height;
472
+ transition-property: background, border-radius, width, height;
473
+ }
474
+
475
+ .mbe_-xsmall {
476
+ margin-block-end: calc(var(--spacing-xsmall) * -1);
477
+ }
478
+
470
479
  .pbe_0 {
471
480
  padding-block-end: 0;
472
481
  }
@@ -750,18 +759,6 @@
750
759
  max-width: var(--sizes-surface-xlarge);
751
760
  }
752
761
 
753
- .w_4xsmall {
754
- width: var(--sizes-4xsmall);
755
- }
756
-
757
- .h_4xsmall {
758
- height: var(--sizes-4xsmall);
759
- }
760
-
761
- .h_unset {
762
- height: unset;
763
- }
764
-
765
762
  .min-w_4xlarge {
766
763
  min-width: var(--sizes-4xlarge);
767
764
  }
@@ -854,6 +851,10 @@
854
851
  width: var(--sizes-surface-3xsmall);
855
852
  }
856
853
 
854
+ .h_unset {
855
+ height: unset;
856
+ }
857
+
857
858
  .before\:inset_0::before {
858
859
  inset: 0;
859
860
  }
package/es/AudioPlayer/AudioProgress.mjs CHANGED
@@ -7,27 +7,33 @@ import { jsx, jsxs } from "react/jsx-runtime";
7
7
  const StyledSliderThumb = styled(SliderThumb, { variants: { variant: {
8
8
  standard: {},
9
9
  simple: {
10
- borderRadius: "0",
11
- width: "4xsmall",
12
- height: "4xsmall"
10
+ marginBlockStart: "-4xsmall",
11
+ transitionProperty: "background, border-radius, width, height"
13
12
  }
14
13
  } } });
15
14
  const StyledSliderTrack = styled(SliderTrack, { variants: { variant: {
16
15
  standard: {},
17
- simple: { background: "unset" }
16
+ simple: {
17
+ marginBlockStart: "-4xsmall",
18
+ background: "unset"
19
+ }
18
20
  } } });
19
- const StyledSliderControl = styled(SliderControl, { variants: { variant: {
21
+ const StyledSliderRoot = styled(SliderRoot, { variants: { variant: {
20
22
  standard: {},
21
- simple: { height: "unset" }
23
+ simple: {
24
+ position: "relative",
25
+ marginBlockEnd: "-xsmall"
26
+ }
22
27
  } } });
23
28
  const AudioProgress = ({ currentTime, duration, onValueChange, variant }) => {
24
29
  const { t } = useTranslation();
25
- return /* @__PURE__ */ jsxs(SliderRoot, {
30
+ return /* @__PURE__ */ jsxs(StyledSliderRoot, {
26
31
  value: [currentTime],
27
32
  defaultValue: [0],
28
33
  step: 1,
29
34
  max: duration,
30
35
  onValueChange,
36
+ variant,
31
37
  getAriaValueText: (value) => t("audio.valueText", {
32
38
  start: formatTime(Math.round(value.value)),
33
39
  end: formatTime(Math.round(duration))
@@ -35,17 +41,14 @@ const AudioProgress = ({ currentTime, duration, onValueChange, variant }) => {
35
41
  children: [/* @__PURE__ */ jsx(SliderLabel, {
36
42
  srOnly: true,
37
43
  children: t("audio.progressBar")
38
- }), /* @__PURE__ */ jsxs(StyledSliderControl, {
44
+ }), /* @__PURE__ */ jsxs(SliderControl, { children: [/* @__PURE__ */ jsx(StyledSliderTrack, {
45
+ variant,
46
+ children: /* @__PURE__ */ jsx(SliderRange, {})
47
+ }), /* @__PURE__ */ jsx(StyledSliderThumb, {
48
+ index: 0,
39
49
  variant,
40
- children: [/* @__PURE__ */ jsx(StyledSliderTrack, {
41
- variant,
42
- children: /* @__PURE__ */ jsx(SliderRange, {})
43
- }), /* @__PURE__ */ jsx(StyledSliderThumb, {
44
- index: 0,
45
- variant,
46
- children: /* @__PURE__ */ jsx(SliderHiddenInput, {})
47
- })]
48
- })]
50
+ children: /* @__PURE__ */ jsx(SliderHiddenInput, {})
51
+ })] })]
49
52
  });
50
53
  };
51
54
  //#endregion
package/es/AudioPlayer/AudioProgress.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AudioProgress.mjs","names":[],"sources":["../../src/AudioPlayer/AudioProgress.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { SliderValueChangeDetails } from \"@ark-ui/react\";\nimport {\n SliderRoot,\n SliderLabel,\n SliderControl,\n SliderTrack,\n SliderRange,\n SliderThumb,\n SliderHiddenInput,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { formatTime } from \"./audioUtils\";\n\ninterface Props {\n currentTime: number;\n duration: number;\n onValueChange: (details: SliderValueChangeDetails) => void;\n variant?: \"simple\" | \"standard\";\n}\n\nconst StyledSliderThumb = styled(SliderThumb, {\n variants: {\n variant: {\n standard: {},\n simple: {\n borderRadius: \"0\",\n width: \"4xsmall\",\n height: \"4xsmall\",\n },\n },\n },\n});\n\nconst StyledSliderTrack = styled(SliderTrack, {\n variants: {\n variant: {\n standard: {},\n simple: {\n background: \"unset\",\n },\n },\n },\n});\n\nconst StyledSliderControl = styled(SliderControl, {\n variants: {\n variant: {\n standard: {},\n simple: {\n height: \"unset\",\n },\n },\n },\n});\n\nexport const AudioProgress = ({ currentTime, duration, onValueChange, variant }: Props) => {\n const { t } = useTranslation();\n return (\n <SliderRoot\n value={[currentTime]}\n defaultValue={[0]}\n step={1}\n max={duration}\n onValueChange={onValueChange}\n getAriaValueText={(value) =>\n t(\"audio.valueText\", {\n start: formatTime(Math.round(value.value)),\n end: formatTime(Math.round(duration)),\n })\n }\n >\n <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n <StyledSliderControl variant={variant}>\n <StyledSliderTrack variant={variant}>\n <SliderRange />\n </StyledSliderTrack>\n <StyledSliderThumb index={0} variant={variant}>\n <SliderHiddenInput />\n </StyledSliderThumb>\n </StyledSliderControl>\n </SliderRoot>\n );\n};\n"],"mappings":";;;;;;AA6BA,MAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ;EACN,cAAc;EACd,OAAO;EACP,QAAQ;EACT;CACF,EACF,EACF,CAAC;AAEF,MAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ,EACN,YAAY,SACb;CACF,EACF,EACF,CAAC;AAEF,MAAM,sBAAsB,OAAO,eAAe,EAChD,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ,EACN,QAAQ,SACT;CACF,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,aAAa,UAAU,eAAe,cAAqB;CACzF,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC,YAAD;EACE,OAAO,CAAC,YAAY;EACpB,cAAc,CAAC,EAAE;EACjB,MAAM;EACN,KAAK;EACU;EACf,mBAAmB,UACjB,EAAE,mBAAmB;GACnB,OAAO,WAAW,KAAK,MAAM,MAAM,MAAM,CAAC;GAC1C,KAAK,WAAW,KAAK,MAAM,SAAS,CAAC;GACtC,CAAC;YAVN,CAaE,oBAAC,aAAD;GAAa,QAAA;aAAQ,EAAE,oBAAoB;GAAe,CAAA,EAC1D,qBAAC,qBAAD;GAA8B;aAA9B,CACE,oBAAC,mBAAD;IAA4B;cAC1B,oBAAC,aAAD,EAAe,CAAA;IACG,CAAA,EACpB,oBAAC,mBAAD;IAAmB,OAAO;IAAY;cACpC,oBAAC,mBAAD,EAAqB,CAAA;IACH,CAAA,CACA;KACX"}
1
+ {"version":3,"file":"AudioProgress.mjs","names":[],"sources":["../../src/AudioPlayer/AudioProgress.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { SliderValueChangeDetails } from \"@ark-ui/react\";\nimport {\n SliderRoot,\n SliderLabel,\n SliderControl,\n SliderTrack,\n SliderRange,\n SliderThumb,\n SliderHiddenInput,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { formatTime } from \"./audioUtils\";\n\ninterface Props {\n currentTime: number;\n duration: number;\n onValueChange: (details: SliderValueChangeDetails) => void;\n variant?: \"simple\" | \"standard\";\n}\n\nconst StyledSliderThumb = styled(SliderThumb, {\n variants: {\n variant: {\n standard: {},\n simple: {\n marginBlockStart: \"-4xsmall\",\n transitionProperty: \"background, border-radius, width, height\",\n },\n },\n },\n});\n\nconst StyledSliderTrack = styled(SliderTrack, {\n variants: {\n variant: {\n standard: {},\n simple: {\n marginBlockStart: \"-4xsmall\",\n background: \"unset\",\n },\n },\n },\n});\n\nconst StyledSliderRoot = styled(SliderRoot, {\n variants: {\n variant: {\n standard: {},\n simple: {\n position: \"relative\",\n marginBlockEnd: \"-xsmall\",\n },\n },\n },\n});\n\nexport const AudioProgress = ({ currentTime, duration, onValueChange, variant }: Props) => {\n const { t } = useTranslation();\n return (\n <StyledSliderRoot\n value={[currentTime]}\n defaultValue={[0]}\n step={1}\n max={duration}\n onValueChange={onValueChange}\n variant={variant}\n getAriaValueText={(value) =>\n t(\"audio.valueText\", {\n start: formatTime(Math.round(value.value)),\n end: formatTime(Math.round(duration)),\n })\n }\n >\n <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n <SliderControl>\n <StyledSliderTrack variant={variant}>\n <SliderRange />\n </StyledSliderTrack>\n <StyledSliderThumb index={0} variant={variant}>\n <SliderHiddenInput />\n </StyledSliderThumb>\n </SliderControl>\n </StyledSliderRoot>\n );\n};\n"],"mappings":";;;;;;AA6BA,MAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ;EACN,kBAAkB;EAClB,oBAAoB;EACrB;CACF,EACF,EACF,CAAC;AAEF,MAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ;EACN,kBAAkB;EAClB,YAAY;EACb;CACF,EACF,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,YAAY,EAC1C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ;EACN,UAAU;EACV,gBAAgB;EACjB;CACF,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,aAAa,UAAU,eAAe,cAAqB;CACzF,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC,kBAAD;EACE,OAAO,CAAC,YAAY;EACpB,cAAc,CAAC,EAAE;EACjB,MAAM;EACN,KAAK;EACU;EACN;EACT,mBAAmB,UACjB,EAAE,mBAAmB;GACnB,OAAO,WAAW,KAAK,MAAM,MAAM,MAAM,CAAC;GAC1C,KAAK,WAAW,KAAK,MAAM,SAAS,CAAC;GACtC,CAAC;YAXN,CAcE,oBAAC,aAAD;GAAa,QAAA;aAAQ,EAAE,oBAAoB;GAAe,CAAA,EAC1D,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,mBAAD;GAA4B;aAC1B,oBAAC,aAAD,EAAe,CAAA;GACG,CAAA,EACpB,oBAAC,mBAAD;GAAmB,OAAO;GAAY;aACpC,oBAAC,mBAAD,EAAqB,CAAA;GACH,CAAA,CACN,EAAA,CAAA,CACC"}
package/lib/AudioPlayer/AudioProgress.js CHANGED
@@ -8,27 +8,33 @@ let react_jsx_runtime = require("react/jsx-runtime");
8
8
  const StyledSliderThumb = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.SliderThumb, { variants: { variant: {
9
9
  standard: {},
10
10
  simple: {
11
- borderRadius: "0",
12
- width: "4xsmall",
13
- height: "4xsmall"
11
+ marginBlockStart: "-4xsmall",
12
+ transitionProperty: "background, border-radius, width, height"
14
13
  }
15
14
  } } });
16
15
  const StyledSliderTrack = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.SliderTrack, { variants: { variant: {
17
16
  standard: {},
18
- simple: { background: "unset" }
17
+ simple: {
18
+ marginBlockStart: "-4xsmall",
19
+ background: "unset"
20
+ }
19
21
  } } });
20
- const StyledSliderControl = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.SliderControl, { variants: { variant: {
22
+ const StyledSliderRoot = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.SliderRoot, { variants: { variant: {
21
23
  standard: {},
22
- simple: { height: "unset" }
24
+ simple: {
25
+ position: "relative",
26
+ marginBlockEnd: "-xsmall"
27
+ }
23
28
  } } });
24
29
  const AudioProgress = ({ currentTime, duration, onValueChange, variant }) => {
25
30
  const { t } = (0, react_i18next.useTranslation)();
26
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.SliderRoot, {
31
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSliderRoot, {
27
32
  value: [currentTime],
28
33
  defaultValue: [0],
29
34
  step: 1,
30
35
  max: duration,
31
36
  onValueChange,
37
+ variant,
32
38
  getAriaValueText: (value) => t("audio.valueText", {
33
39
  start: require_audioUtils.formatTime(Math.round(value.value)),
34
40
  end: require_audioUtils.formatTime(Math.round(duration))
@@ -36,17 +42,14 @@ const AudioProgress = ({ currentTime, duration, onValueChange, variant }) => {
36
42
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderLabel, {
37
43
  srOnly: true,
38
44
  children: t("audio.progressBar")
39
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSliderControl, {
45
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.SliderControl, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSliderTrack, {
46
+ variant,
47
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderRange, {})
48
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSliderThumb, {
49
+ index: 0,
40
50
  variant,
41
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSliderTrack, {
42
- variant,
43
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderRange, {})
44
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSliderThumb, {
45
- index: 0,
46
- variant,
47
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderHiddenInput, {})
48
- })]
49
- })]
51
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderHiddenInput, {})
52
+ })] })]
50
53
  });
51
54
  };
52
55
  //#endregion
package/lib/AudioPlayer/AudioProgress.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AudioProgress.js","names":["SliderThumb","SliderTrack","SliderControl","SliderRoot","formatTime","SliderLabel","SliderRange","SliderHiddenInput"],"sources":["../../src/AudioPlayer/AudioProgress.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { SliderValueChangeDetails } from \"@ark-ui/react\";\nimport {\n SliderRoot,\n SliderLabel,\n SliderControl,\n SliderTrack,\n SliderRange,\n SliderThumb,\n SliderHiddenInput,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { formatTime } from \"./audioUtils\";\n\ninterface Props {\n currentTime: number;\n duration: number;\n onValueChange: (details: SliderValueChangeDetails) => void;\n variant?: \"simple\" | \"standard\";\n}\n\nconst StyledSliderThumb = styled(SliderThumb, {\n variants: {\n variant: {\n standard: {},\n simple: {\n borderRadius: \"0\",\n width: \"4xsmall\",\n height: \"4xsmall\",\n },\n },\n },\n});\n\nconst StyledSliderTrack = styled(SliderTrack, {\n variants: {\n variant: {\n standard: {},\n simple: {\n background: \"unset\",\n },\n },\n },\n});\n\nconst StyledSliderControl = styled(SliderControl, {\n variants: {\n variant: {\n standard: {},\n simple: {\n height: \"unset\",\n },\n },\n },\n});\n\nexport const AudioProgress = ({ currentTime, duration, onValueChange, variant }: Props) => {\n const { t } = useTranslation();\n return (\n <SliderRoot\n value={[currentTime]}\n defaultValue={[0]}\n step={1}\n max={duration}\n onValueChange={onValueChange}\n getAriaValueText={(value) =>\n t(\"audio.valueText\", {\n start: formatTime(Math.round(value.value)),\n end: formatTime(Math.round(duration)),\n })\n }\n >\n <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n <StyledSliderControl variant={variant}>\n <StyledSliderTrack variant={variant}>\n <SliderRange />\n </StyledSliderTrack>\n <StyledSliderThumb index={0} variant={variant}>\n <SliderHiddenInput />\n </StyledSliderThumb>\n </StyledSliderControl>\n </SliderRoot>\n );\n};\n"],"mappings":";;;;;;;AA6BA,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,iBAAAA,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ;EACN,cAAc;EACd,OAAO;EACP,QAAQ;EACT;CACF,EACF,EACF,CAAC;AAEF,MAAM,qBAAA,GAAA,wBAAA,QAA2BC,iBAAAA,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ,EACN,YAAY,SACb;CACF,EACF,EACF,CAAC;AAEF,MAAM,uBAAA,GAAA,wBAAA,QAA6BC,iBAAAA,eAAe,EAChD,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ,EACN,QAAQ,SACT;CACF,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,aAAa,UAAU,eAAe,cAAqB;CACzF,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;AAC9B,QACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,YAAD;EACE,OAAO,CAAC,YAAY;EACpB,cAAc,CAAC,EAAE;EACjB,MAAM;EACN,KAAK;EACU;EACf,mBAAmB,UACjB,EAAE,mBAAmB;GACnB,OAAOC,mBAAAA,WAAW,KAAK,MAAM,MAAM,MAAM,CAAC;GAC1C,KAAKA,mBAAAA,WAAW,KAAK,MAAM,SAAS,CAAC;GACtC,CAAC;YAVN,CAaE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA;aAAQ,EAAE,oBAAoB;GAAe,CAAA,EAC1D,iBAAA,GAAA,kBAAA,MAAC,qBAAD;GAA8B;aAA9B,CACE,iBAAA,GAAA,kBAAA,KAAC,mBAAD;IAA4B;cAC1B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAe,CAAA;IACG,CAAA,EACpB,iBAAA,GAAA,kBAAA,KAAC,mBAAD;IAAmB,OAAO;IAAY;cACpC,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,EAAqB,CAAA;IACH,CAAA,CACA;KACX"}
1
+ {"version":3,"file":"AudioProgress.js","names":["SliderThumb","SliderTrack","SliderRoot","formatTime","SliderLabel","SliderControl","SliderRange","SliderHiddenInput"],"sources":["../../src/AudioPlayer/AudioProgress.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { SliderValueChangeDetails } from \"@ark-ui/react\";\nimport {\n SliderRoot,\n SliderLabel,\n SliderControl,\n SliderTrack,\n SliderRange,\n SliderThumb,\n SliderHiddenInput,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { formatTime } from \"./audioUtils\";\n\ninterface Props {\n currentTime: number;\n duration: number;\n onValueChange: (details: SliderValueChangeDetails) => void;\n variant?: \"simple\" | \"standard\";\n}\n\nconst StyledSliderThumb = styled(SliderThumb, {\n variants: {\n variant: {\n standard: {},\n simple: {\n marginBlockStart: \"-4xsmall\",\n transitionProperty: \"background, border-radius, width, height\",\n },\n },\n },\n});\n\nconst StyledSliderTrack = styled(SliderTrack, {\n variants: {\n variant: {\n standard: {},\n simple: {\n marginBlockStart: \"-4xsmall\",\n background: \"unset\",\n },\n },\n },\n});\n\nconst StyledSliderRoot = styled(SliderRoot, {\n variants: {\n variant: {\n standard: {},\n simple: {\n position: \"relative\",\n marginBlockEnd: \"-xsmall\",\n },\n },\n },\n});\n\nexport const AudioProgress = ({ currentTime, duration, onValueChange, variant }: Props) => {\n const { t } = useTranslation();\n return (\n <StyledSliderRoot\n value={[currentTime]}\n defaultValue={[0]}\n step={1}\n max={duration}\n onValueChange={onValueChange}\n variant={variant}\n getAriaValueText={(value) =>\n t(\"audio.valueText\", {\n start: formatTime(Math.round(value.value)),\n end: formatTime(Math.round(duration)),\n })\n }\n >\n <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n <SliderControl>\n <StyledSliderTrack variant={variant}>\n <SliderRange />\n </StyledSliderTrack>\n <StyledSliderThumb index={0} variant={variant}>\n <SliderHiddenInput />\n </StyledSliderThumb>\n </SliderControl>\n </StyledSliderRoot>\n );\n};\n"],"mappings":";;;;;;;AA6BA,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,iBAAAA,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ;EACN,kBAAkB;EAClB,oBAAoB;EACrB;CACF,EACF,EACF,CAAC;AAEF,MAAM,qBAAA,GAAA,wBAAA,QAA2BC,iBAAAA,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ;EACN,kBAAkB;EAClB,YAAY;EACb;CACF,EACF,EACF,CAAC;AAEF,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,iBAAAA,YAAY,EAC1C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ;EACN,UAAU;EACV,gBAAgB;EACjB;CACF,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,aAAa,UAAU,eAAe,cAAqB;CACzF,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;AAC9B,QACE,iBAAA,GAAA,kBAAA,MAAC,kBAAD;EACE,OAAO,CAAC,YAAY;EACpB,cAAc,CAAC,EAAE;EACjB,MAAM;EACN,KAAK;EACU;EACN;EACT,mBAAmB,UACjB,EAAE,mBAAmB;GACnB,OAAOC,mBAAAA,WAAW,KAAK,MAAM,MAAM,MAAM,CAAC;GAC1C,KAAKA,mBAAAA,WAAW,KAAK,MAAM,SAAS,CAAC;GACtC,CAAC;YAXN,CAcE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA;aAAQ,EAAE,oBAAoB;GAAe,CAAA,EAC1D,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,eAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GAA4B;aAC1B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAe,CAAA;GACG,CAAA,EACpB,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GAAmB,OAAO;GAAY;aACpC,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,EAAqB,CAAA;GACH,CAAA,CACN,EAAA,CAAA,CACC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ndla/ui",
3
3
  "type": "module",
4
- "version": "56.0.188-alpha.0",
4
+ "version": "56.0.189-alpha.0",
5
5
  "description": "UI component library for NDLA",
6
6
  "license": "GPL-3.0",
7
7
  "exports": {
@@ -56,12 +56,12 @@
56
56
  },
57
57
  "devDependencies": {
58
58
  "@ndla/preset-panda": "^0.0.76",
59
- "@ndla/types-backend": "^1.0.89",
60
- "@ndla/types-embed": "^5.0.21-alpha.0",
59
+ "@ndla/types-backend": "^1.0.125",
60
+ "@ndla/types-embed": "^5.0.22-alpha.0",
61
61
  "@pandacss/dev": "^1.10.0"
62
62
  },
63
63
  "publishConfig": {
64
64
  "access": "public"
65
65
  },
66
- "gitHead": "2c15990e9a7e9dbe56eb4168449f10f64a2a30b5"
66
+ "gitHead": "836d6da264a504db7277fe8ef69a5da241627ad0"
67
67
  }
package/src/AudioPlayer/AudioProgress.tsx CHANGED
@@ -32,9 +32,8 @@ const StyledSliderThumb = styled(SliderThumb, {
32
32
  variant: {
33
33
  standard: {},
34
34
  simple: {
35
- borderRadius: "0",
36
- width: "4xsmall",
37
- height: "4xsmall",
35
+ marginBlockStart: "-4xsmall",
36
+ transitionProperty: "background, border-radius, width, height",
38
37
  },
39
38
  },
40
39
  },
@@ -45,18 +44,20 @@ const StyledSliderTrack = styled(SliderTrack, {
45
44
  variant: {
46
45
  standard: {},
47
46
  simple: {
47
+ marginBlockStart: "-4xsmall",
48
48
  background: "unset",
49
49
  },
50
50
  },
51
51
  },
52
52
  });
53
53
 
54
- const StyledSliderControl = styled(SliderControl, {
54
+ const StyledSliderRoot = styled(SliderRoot, {
55
55
  variants: {
56
56
  variant: {
57
57
  standard: {},
58
58
  simple: {
59
- height: "unset",
59
+ position: "relative",
60
+ marginBlockEnd: "-xsmall",
60
61
  },
61
62
  },
62
63
  },
@@ -65,12 +66,13 @@ const StyledSliderControl = styled(SliderControl, {
65
66
  export const AudioProgress = ({ currentTime, duration, onValueChange, variant }: Props) => {
66
67
  const { t } = useTranslation();
67
68
  return (
68
- <SliderRoot
69
+ <StyledSliderRoot
69
70
  value={[currentTime]}
70
71
  defaultValue={[0]}
71
72
  step={1}
72
73
  max={duration}
73
74
  onValueChange={onValueChange}
75
+ variant={variant}
74
76
  getAriaValueText={(value) =>
75
77
  t("audio.valueText", {
76
78
  start: formatTime(Math.round(value.value)),
@@ -79,14 +81,14 @@ export const AudioProgress = ({ currentTime, duration, onValueChange, variant }:
79
81
  }
80
82
  >
81
83
  <SliderLabel srOnly>{t("audio.progressBar")}</SliderLabel>
82
- <StyledSliderControl variant={variant}>
84
+ <SliderControl>
83
85
  <StyledSliderTrack variant={variant}>
84
86
  <SliderRange />
85
87
  </StyledSliderTrack>
86
88
  <StyledSliderThumb index={0} variant={variant}>
87
89
  <SliderHiddenInput />
88
90
  </StyledSliderThumb>
89
- </StyledSliderControl>
90
- </SliderRoot>
91
+ </SliderControl>
92
+ </StyledSliderRoot>
91
93
  );
92
94
  };
package/src/Embed/AudioEmbed.stories.tsx CHANGED
@@ -50,6 +50,7 @@ const successData: AudioMeta = {
50
50
  manuscript: { manuscript: "", language: "nb" },
51
51
  created: "2022-02-28T17:09:28Z",
52
52
  updated: "2022-02-28T17:09:28Z",
53
+ released: "2022-02-28T17:09:28Z",
53
54
  };
54
55
 
55
56
  const podcastEmbedData: AudioEmbedData = {
@@ -122,6 +123,7 @@ const podcastSuccessData: AudioMeta = {
122
123
  },
123
124
  created: "2021-06-25T08:55:31Z",
124
125
  updated: "2022-03-26T07:49:09Z",
126
+ released: "2022-02-28T17:09:28Z",
125
127
  imageMeta: {
126
128
  id: "60913",
127
129
  inactive: false,
package/src/Embed/RelatedContentEmbed.stories.tsx CHANGED
@@ -96,6 +96,7 @@ const filmResourceMeta: RelatedContentMetaData = {
96
96
  updated: "2023-03-20T14:12:41.000Z",
97
97
  updatedBy: "hd5ZL5Lm4kKkumWgN2gjy9wx",
98
98
  published: "2021-01-12T13:33:00.000Z",
99
+ revised: "2021-01-12T13:33:00.000Z",
99
100
  articleType: "standard",
100
101
  supportedLanguages: ["nb", "nn"],
101
102
  grepCodes: ["KE183", "KM2055", "KM3961", "KM6170", "TT1"],
@@ -266,6 +267,7 @@ const learningResourceMeta: RelatedContentMetaData = {
266
267
  updated: "2023-02-13T12:57:57.000Z",
267
268
  updatedBy: "LGsHWSsXKh520VNcOueMraSB",
268
269
  published: "2020-03-25T10:21:31.000Z",
270
+ revised: "2021-01-12T13:33:00.000Z",
269
271
  articleType: "standard",
270
272
  supportedLanguages: ["nb", "nn"],
271
273
  grepCodes: ["KM6126"],