@ndla/ui 56.0.73-alpha.0 → 56.0.74-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/AudioPlayer/Controls.js +33 -31
- package/es/Embed/ImageEmbed.js +0 -1
- package/lib/AudioPlayer/Controls.js +32 -30
- package/lib/Embed/ImageEmbed.d.ts +0 -1
- package/lib/Embed/ImageEmbed.js +1 -2
- package/lib/i18n/useComponentTranslations.d.ts +1 -0
- package/package.json +7 -7
- package/src/AudioPlayer/Controls.tsx +32 -29
- package/src/Embed/ImageEmbed.tsx +0 -2
|
@@ -12,7 +12,7 @@ import { createListCollection } from "@ark-ui/react";
|
|
|
12
12
|
import { Replay15Line, Forward15Line } from "@ndla/icons/action";
|
|
13
13
|
import { PlayFill, PauseLine, VolumeUpFill } from "@ndla/icons/common";
|
|
14
14
|
import { CheckLine } from "@ndla/icons/editor";
|
|
15
|
-
import { Button, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, SelectContent, SelectControl, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack, Text } from "@ndla/primitives";
|
|
15
|
+
import { Button, FieldRoot, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, SelectContent, SelectControl, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack, Text } from "@ndla/primitives";
|
|
16
16
|
import { styled } from "@ndla/styled-system/jsx";
|
|
17
17
|
import { visuallyHidden } from "@ndla/styled-system/patterns";
|
|
18
18
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -258,38 +258,40 @@ const Controls = _ref => {
|
|
|
258
258
|
children: ["-", formatTime(remainingTime)]
|
|
259
259
|
})
|
|
260
260
|
})]
|
|
261
|
-
}), /*#__PURE__*/
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
children:
|
|
261
|
+
}), /*#__PURE__*/_jsx(FieldRoot, {
|
|
262
|
+
children: /*#__PURE__*/_jsxs(StyledSelectRoot, {
|
|
263
|
+
collection: speedValues,
|
|
264
|
+
value: [speedValue.toString()],
|
|
265
|
+
onValueChange: details => setSpeedValue(parseFloat(details.value[0])),
|
|
266
|
+
positioning: {
|
|
267
|
+
placement: "top"
|
|
268
|
+
},
|
|
269
|
+
children: [/*#__PURE__*/_jsx(SelectLabel, {
|
|
270
|
+
css: visuallyHidden.raw(),
|
|
271
|
+
children: t("audio.controls.selectSpeed")
|
|
272
|
+
}), /*#__PURE__*/_jsx(SelectControl, {
|
|
273
|
+
children: /*#__PURE__*/_jsx(SelectTrigger, {
|
|
274
|
+
asChild: true,
|
|
275
|
+
children: /*#__PURE__*/_jsx(SpeedButton, {
|
|
276
|
+
variant: "tertiary",
|
|
277
|
+
title: t("audio.controls.selectSpeed"),
|
|
278
|
+
"aria-label": t("audio.controls.selectSpeed"),
|
|
279
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
280
|
+
children: `${speedValue}x`
|
|
281
|
+
})
|
|
280
282
|
})
|
|
281
283
|
})
|
|
282
|
-
})
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
})
|
|
291
|
-
}
|
|
292
|
-
})
|
|
284
|
+
}), /*#__PURE__*/_jsx(SelectContent, {
|
|
285
|
+
children: speedValues.items.map(speed => /*#__PURE__*/_jsxs(SelectItem, {
|
|
286
|
+
item: speed,
|
|
287
|
+
children: [/*#__PURE__*/_jsxs(SelectItemText, {
|
|
288
|
+
children: [speed, "x"]
|
|
289
|
+
}), /*#__PURE__*/_jsx(SelectItemIndicator, {
|
|
290
|
+
children: /*#__PURE__*/_jsx(CheckLine, {})
|
|
291
|
+
})]
|
|
292
|
+
}, speed))
|
|
293
|
+
})]
|
|
294
|
+
})
|
|
293
295
|
}), /*#__PURE__*/_jsxs(PopoverRoot, {
|
|
294
296
|
positioning: {
|
|
295
297
|
placement: "top"
|
package/es/Embed/ImageEmbed.js
CHANGED
|
@@ -23,7 +23,6 @@ export const getLicenseCredits = copyright => {
|
|
|
23
23
|
processors: copyright?.processors ?? []
|
|
24
24
|
};
|
|
25
25
|
};
|
|
26
|
-
export const errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E`;
|
|
27
26
|
const getFigureProps = (size, float) => {
|
|
28
27
|
const actualFloat = float === "left" ? "left" : float === "right" ? "right" : undefined;
|
|
29
28
|
const replacedSize = size?.replace("-hide-byline", "") ?? "full";
|
|
@@ -264,38 +264,40 @@ const Controls = _ref => {
|
|
|
264
264
|
children: ["-", formatTime(remainingTime)]
|
|
265
265
|
})
|
|
266
266
|
})]
|
|
267
|
-
}), /*#__PURE__*/(0, _jsxRuntime.
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
children:
|
|
267
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.FieldRoot, {
|
|
268
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSelectRoot, {
|
|
269
|
+
collection: speedValues,
|
|
270
|
+
value: [speedValue.toString()],
|
|
271
|
+
onValueChange: details => setSpeedValue(parseFloat(details.value[0])),
|
|
272
|
+
positioning: {
|
|
273
|
+
placement: "top"
|
|
274
|
+
},
|
|
275
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectLabel, {
|
|
276
|
+
css: _patterns.visuallyHidden.raw(),
|
|
277
|
+
children: t("audio.controls.selectSpeed")
|
|
278
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectControl, {
|
|
279
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectTrigger, {
|
|
280
|
+
asChild: true,
|
|
281
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedButton, {
|
|
282
|
+
variant: "tertiary",
|
|
283
|
+
title: t("audio.controls.selectSpeed"),
|
|
284
|
+
"aria-label": t("audio.controls.selectSpeed"),
|
|
285
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
286
|
+
children: `${speedValue}x`
|
|
287
|
+
})
|
|
286
288
|
})
|
|
287
289
|
})
|
|
288
|
-
})
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
})
|
|
297
|
-
}
|
|
298
|
-
})
|
|
290
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectContent, {
|
|
291
|
+
children: speedValues.items.map(speed => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItem, {
|
|
292
|
+
item: speed,
|
|
293
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItemText, {
|
|
294
|
+
children: [speed, "x"]
|
|
295
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectItemIndicator, {
|
|
296
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.CheckLine, {})
|
|
297
|
+
})]
|
|
298
|
+
}, speed))
|
|
299
|
+
})]
|
|
300
|
+
})
|
|
299
301
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
|
|
300
302
|
positioning: {
|
|
301
303
|
placement: "top"
|
|
@@ -28,7 +28,6 @@ export declare const getLicenseCredits: (copyright?: {
|
|
|
28
28
|
rightsholders: Author[];
|
|
29
29
|
processors: Author[];
|
|
30
30
|
};
|
|
31
|
-
export declare const errorSvgSrc = "data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E";
|
|
32
31
|
export declare const getFocalPoint: (data: ImageEmbedData) => {
|
|
33
32
|
x: number;
|
|
34
33
|
y: number;
|
package/lib/Embed/ImageEmbed.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.getLicenseCredits = exports.getFocalPoint = exports.getCrop = exports.
|
|
6
|
+
exports.getLicenseCredits = exports.getFocalPoint = exports.getCrop = exports.default = void 0;
|
|
7
7
|
var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _reactI18next = require("react-i18next");
|
|
@@ -31,7 +31,6 @@ const getLicenseCredits = copyright => {
|
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
33
|
exports.getLicenseCredits = getLicenseCredits;
|
|
34
|
-
const errorSvgSrc = exports.errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E`;
|
|
35
34
|
const getFigureProps = (size, float) => {
|
|
36
35
|
const actualFloat = float === "left" ? "left" : float === "right" ? "right" : undefined;
|
|
37
36
|
const replacedSize = size?.replace("-hide-byline", "") ?? "full";
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
+
import type { CollectionItem } from "@ark-ui/react";
|
|
8
9
|
import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
|
|
9
10
|
import { TagSelectorRootProps } from "../TagSelector/TagSelector";
|
|
10
11
|
type DeepPartial<T> = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
|
-
"version": "56.0.
|
|
3
|
+
"version": "56.0.74-alpha.0",
|
|
4
4
|
"description": "UI component library for NDLA",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@ndla/core": "^5.0.2",
|
|
36
|
-
"@ndla/icons": "^8.0.
|
|
36
|
+
"@ndla/icons": "^8.0.45-alpha.0",
|
|
37
37
|
"@ndla/licenses": "^8.0.4-alpha.0",
|
|
38
|
-
"@ndla/primitives": "^1.0.
|
|
39
|
-
"@ndla/safelink": "^7.0.
|
|
40
|
-
"@ndla/styled-system": "^0.0.
|
|
38
|
+
"@ndla/primitives": "^1.0.58-alpha.0",
|
|
39
|
+
"@ndla/safelink": "^7.0.59-alpha.0",
|
|
40
|
+
"@ndla/styled-system": "^0.0.28",
|
|
41
41
|
"@ndla/util": "^5.0.1-alpha.0",
|
|
42
42
|
"html-react-parser": "^5.1.8",
|
|
43
43
|
"i18next-browser-languagedetector": "^7.1.0"
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"react-router-dom": "> 6.0.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@ndla/preset-panda": "^0.0.
|
|
53
|
+
"@ndla/preset-panda": "^0.0.46",
|
|
54
54
|
"@ndla/types-backend": "^0.2.86",
|
|
55
55
|
"@ndla/types-embed": "^5.0.4-alpha.0",
|
|
56
56
|
"@pandacss/dev": "^0.46.0"
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"publishConfig": {
|
|
59
59
|
"access": "public"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "34f26de8c12341b710a32b6839bacc0caebfcc2e"
|
|
62
62
|
}
|
|
@@ -14,6 +14,7 @@ import { PlayFill, PauseLine, VolumeUpFill } from "@ndla/icons/common";
|
|
|
14
14
|
import { CheckLine } from "@ndla/icons/editor";
|
|
15
15
|
import {
|
|
16
16
|
Button,
|
|
17
|
+
FieldRoot,
|
|
17
18
|
IconButton,
|
|
18
19
|
PopoverContent,
|
|
19
20
|
PopoverRoot,
|
|
@@ -292,35 +293,37 @@ const Controls = ({ src, title }: Props) => {
|
|
|
292
293
|
<div>-{formatTime(remainingTime)}</div>
|
|
293
294
|
</StyledText>
|
|
294
295
|
</ProgressWrapper>
|
|
295
|
-
<
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
<
|
|
304
|
-
<
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
<
|
|
317
|
-
|
|
318
|
-
<
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
296
|
+
<FieldRoot>
|
|
297
|
+
<StyledSelectRoot
|
|
298
|
+
collection={speedValues}
|
|
299
|
+
value={[speedValue.toString()]}
|
|
300
|
+
onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}
|
|
301
|
+
positioning={{ placement: "top" }}
|
|
302
|
+
>
|
|
303
|
+
<SelectLabel css={visuallyHidden.raw()}>{t("audio.controls.selectSpeed")}</SelectLabel>
|
|
304
|
+
<SelectControl>
|
|
305
|
+
<SelectTrigger asChild>
|
|
306
|
+
<SpeedButton
|
|
307
|
+
variant="tertiary"
|
|
308
|
+
title={t("audio.controls.selectSpeed")}
|
|
309
|
+
aria-label={t("audio.controls.selectSpeed")}
|
|
310
|
+
>
|
|
311
|
+
<span>{`${speedValue}x`}</span>
|
|
312
|
+
</SpeedButton>
|
|
313
|
+
</SelectTrigger>
|
|
314
|
+
</SelectControl>
|
|
315
|
+
<SelectContent>
|
|
316
|
+
{speedValues.items.map((speed) => (
|
|
317
|
+
<SelectItem key={speed} item={speed}>
|
|
318
|
+
<SelectItemText>{speed}x</SelectItemText>
|
|
319
|
+
<SelectItemIndicator>
|
|
320
|
+
<CheckLine />
|
|
321
|
+
</SelectItemIndicator>
|
|
322
|
+
</SelectItem>
|
|
323
|
+
))}
|
|
324
|
+
</SelectContent>
|
|
325
|
+
</StyledSelectRoot>
|
|
326
|
+
</FieldRoot>
|
|
324
327
|
<PopoverRoot positioning={{ placement: "top" }}>
|
|
325
328
|
<PopoverTrigger asChild>
|
|
326
329
|
<VolumeButton variant="tertiary" aria-label={t("audio.controls.adjustVolume")}>
|
package/src/Embed/ImageEmbed.tsx
CHANGED
|
@@ -43,8 +43,6 @@ export const getLicenseCredits = (copyright?: {
|
|
|
43
43
|
};
|
|
44
44
|
};
|
|
45
45
|
|
|
46
|
-
export const errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E`;
|
|
47
|
-
|
|
48
46
|
const getFigureProps = (size?: string, float?: string): FigureVariantProps => {
|
|
49
47
|
const actualFloat = float === "left" ? "left" : float === "right" ? "right" : undefined;
|
|
50
48
|
const replacedSize = size?.replace("-hide-byline", "") ?? "full";
|