@ndla/ui 56.0.73-alpha.0 → 56.0.75-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 -21
- package/dist/styles.css +8 -76
- package/es/Article/Article.js +2 -2
- package/es/AudioPlayer/Controls.js +33 -31
- package/es/ContentTypeBadge/ContentTypeBadge.js +35 -213
- package/es/ContentTypeHero/ContentTypeHero.js +2 -1
- package/es/Embed/ImageEmbed.js +0 -1
- package/es/RelatedArticleList/RelatedArticleList.js +1 -1
- package/es/index.js +1 -3
- package/es/locale/messages-en.js +2 -1
- package/es/locale/messages-nb.js +2 -1
- package/es/locale/messages-nn.js +2 -1
- package/es/locale/messages-se.js +2 -1
- package/es/locale/messages-sma.js +2 -1
- package/es/model/ContentType.js +2 -0
- package/lib/Article/Article.d.ts +1 -1
- package/lib/Article/Article.js +1 -1
- package/lib/AudioPlayer/Controls.js +32 -30
- package/lib/ContentTypeBadge/ContentTypeBadge.d.ts +9 -19
- package/lib/ContentTypeBadge/ContentTypeBadge.js +36 -223
- package/lib/ContentTypeBlockQuote/ContentTypeBlockQuote.d.ts +1 -1
- package/lib/ContentTypeHero/ContentTypeHero.d.ts +1 -1
- package/lib/ContentTypeHero/ContentTypeHero.js +2 -1
- package/lib/Embed/ImageEmbed.d.ts +0 -1
- package/lib/Embed/ImageEmbed.js +1 -2
- package/lib/RelatedArticleList/RelatedArticleList.js +2 -2
- package/lib/i18n/useComponentTranslations.d.ts +1 -0
- package/lib/index.d.ts +2 -4
- package/lib/index.js +5 -61
- package/lib/locale/messages-en.d.ts +1 -0
- package/lib/locale/messages-en.js +2 -1
- package/lib/locale/messages-nb.d.ts +1 -0
- package/lib/locale/messages-nb.js +2 -1
- package/lib/locale/messages-nn.d.ts +1 -0
- package/lib/locale/messages-nn.js +2 -1
- package/lib/locale/messages-se.d.ts +1 -0
- package/lib/locale/messages-se.js +2 -1
- package/lib/locale/messages-sma.d.ts +1 -0
- package/lib/locale/messages-sma.js +2 -1
- package/lib/model/ContentType.d.ts +1 -0
- package/lib/model/ContentType.js +3 -1
- package/package.json +8 -8
- package/src/Article/Article.tsx +3 -3
- package/src/AudioPlayer/Controls.tsx +32 -29
- package/src/ContentTypeBadge/ContentTypeBadge.stories.tsx +45 -53
- package/src/ContentTypeBadge/ContentTypeBadge.tsx +63 -211
- package/src/ContentTypeBlockQuote/ContentTypeBlockQuote.tsx +1 -1
- package/src/ContentTypeHero/ContentTypeHero.tsx +2 -1
- package/src/Embed/ImageEmbed.tsx +0 -2
- package/src/RelatedArticleList/RelatedArticleList.tsx +1 -1
- package/src/index.ts +2 -18
- package/src/locale/messages-en.ts +1 -0
- package/src/locale/messages-nb.ts +1 -0
- package/src/locale/messages-nn.ts +1 -0
- package/src/locale/messages-se.ts +1 -0
- package/src/locale/messages-sma.ts +1 -0
- package/src/model/ContentType.ts +2 -0
- package/es/ContentLoader/index.js +0 -82
- package/es/ContentTypeBadge/ContentTypeBadgeNew.js +0 -49
- package/es/ContentTypeBadge/index.js +0 -11
- package/lib/ContentLoader/index.d.ts +0 -16
- package/lib/ContentLoader/index.js +0 -88
- package/lib/ContentTypeBadge/ContentTypeBadgeNew.d.ts +0 -16
- package/lib/ContentTypeBadge/ContentTypeBadgeNew.js +0 -57
- package/lib/ContentTypeBadge/index.d.ts +0 -10
- package/lib/ContentTypeBadge/index.js +0 -57
- package/src/ContentLoader/ContentLoader.stories.tsx +0 -62
- package/src/ContentLoader/index.tsx +0 -73
- package/src/ContentTypeBadge/ContentTypeBadgeNew.stories.tsx +0 -70
- package/src/ContentTypeBadge/ContentTypeBadgeNew.tsx +0 -77
- package/src/ContentTypeBadge/index.ts +0 -21
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _util = require("@ndla/util");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
/**
|
|
10
|
-
* Copyright (c) 2018-present, NDLA.
|
|
11
|
-
*
|
|
12
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
13
|
-
* LICENSE file in the root directory of this source tree.
|
|
14
|
-
*
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
const ContentLoader = _ref => {
|
|
18
|
-
let {
|
|
19
|
-
children,
|
|
20
|
-
width = 400,
|
|
21
|
-
height = 130,
|
|
22
|
-
preserveAspectRatio = "xMidYMid meet",
|
|
23
|
-
className = "",
|
|
24
|
-
primaryColor = "#f0f0f0",
|
|
25
|
-
secondaryColor = "#e0e0e0",
|
|
26
|
-
speed = 2,
|
|
27
|
-
viewBox: viewBoxProp,
|
|
28
|
-
...rest
|
|
29
|
-
} = _ref;
|
|
30
|
-
const idClip = (0, _util.uuid)();
|
|
31
|
-
const idGradient = (0, _util.uuid)();
|
|
32
|
-
const viewBox = viewBoxProp === undefined ? `0 0 ${width} ${height}` : viewBoxProp;
|
|
33
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
|
|
34
|
-
viewBox: viewBox ?? undefined,
|
|
35
|
-
version: "1.1",
|
|
36
|
-
preserveAspectRatio: preserveAspectRatio,
|
|
37
|
-
className: className,
|
|
38
|
-
...rest,
|
|
39
|
-
height: typeof height === "string" ? height : undefined,
|
|
40
|
-
width: typeof width === "string" ? width : undefined,
|
|
41
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
|
|
42
|
-
style: {
|
|
43
|
-
fill: `url(#${idGradient})`
|
|
44
|
-
},
|
|
45
|
-
clipPath: `url(#${idClip})`,
|
|
46
|
-
x: "0",
|
|
47
|
-
y: "0",
|
|
48
|
-
width: width,
|
|
49
|
-
height: height
|
|
50
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
|
|
51
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
|
|
52
|
-
id: idClip,
|
|
53
|
-
children: children
|
|
54
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", {
|
|
55
|
-
id: idGradient,
|
|
56
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
|
|
57
|
-
offset: "0%",
|
|
58
|
-
stopColor: primaryColor,
|
|
59
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
|
|
60
|
-
attributeName: "offset",
|
|
61
|
-
values: "-2; 1",
|
|
62
|
-
dur: `${speed}s`,
|
|
63
|
-
repeatCount: "indefinite"
|
|
64
|
-
})
|
|
65
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
|
|
66
|
-
offset: "50%",
|
|
67
|
-
stopColor: secondaryColor,
|
|
68
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
|
|
69
|
-
attributeName: "offset",
|
|
70
|
-
values: "-1.5; 1.5",
|
|
71
|
-
dur: `${speed}s`,
|
|
72
|
-
repeatCount: "indefinite"
|
|
73
|
-
})
|
|
74
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
|
|
75
|
-
offset: "100%",
|
|
76
|
-
stopColor: primaryColor,
|
|
77
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
|
|
78
|
-
attributeName: "offset",
|
|
79
|
-
values: "-1; 2",
|
|
80
|
-
dur: `${speed}s`,
|
|
81
|
-
repeatCount: "indefinite"
|
|
82
|
-
})
|
|
83
|
-
})]
|
|
84
|
-
})]
|
|
85
|
-
})]
|
|
86
|
-
});
|
|
87
|
-
};
|
|
88
|
-
var _default = exports.default = ContentLoader;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2024-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
import { BadgeProps, type BadgeVariant } from "@ndla/primitives";
|
|
9
|
-
import * as contentTypes from "../model/ContentType";
|
|
10
|
-
export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
|
|
11
|
-
contentType: ContentType | undefined;
|
|
12
|
-
}
|
|
13
|
-
export type StrictContentType = typeof contentTypes.SUBJECT_MATERIAL | typeof contentTypes.TASKS_AND_ACTIVITIES | typeof contentTypes.ASSESSMENT_RESOURCES | typeof contentTypes.SUBJECT | typeof contentTypes.SOURCE_MATERIAL | typeof contentTypes.LEARNING_PATH | typeof contentTypes.TOPIC | typeof contentTypes.MULTIDISCIPLINARY | typeof contentTypes.CONCEPT | typeof contentTypes.EXTERNAL | typeof contentTypes.IMAGE | typeof contentTypes.AUDIO | typeof contentTypes.VIDEO | typeof contentTypes.MISSING | typeof contentTypes.PODCAST | typeof contentTypes.GLOSS | typeof contentTypes.PROGRAMME | typeof contentTypes.PODCAST_SERIES;
|
|
14
|
-
export type ContentType = StrictContentType | (string & {});
|
|
15
|
-
export declare const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant>;
|
|
16
|
-
export declare const ContentTypeBadge: import("react").ForwardRefExoticComponent<ContentTypeBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.contentTypeToBadgeVariantMap = exports.ContentTypeBadge = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _reactI18next = require("react-i18next");
|
|
9
|
-
var _primitives = require("@ndla/primitives");
|
|
10
|
-
var contentTypes = _interopRequireWildcard(require("../model/ContentType"));
|
|
11
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
-
/**
|
|
15
|
-
* Copyright (c) 2024-present, NDLA.
|
|
16
|
-
*
|
|
17
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
18
|
-
* LICENSE file in the root directory of this source tree.
|
|
19
|
-
*
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
const contentTypeToBadgeVariantMap = exports.contentTypeToBadgeVariantMap = {
|
|
23
|
-
[contentTypes.SUBJECT_MATERIAL]: "brand1",
|
|
24
|
-
[contentTypes.TASKS_AND_ACTIVITIES]: "brand2",
|
|
25
|
-
[contentTypes.ASSESSMENT_RESOURCES]: "brand2",
|
|
26
|
-
[contentTypes.SUBJECT]: "neutral",
|
|
27
|
-
[contentTypes.SOURCE_MATERIAL]: "brand1",
|
|
28
|
-
[contentTypes.LEARNING_PATH]: "brand3",
|
|
29
|
-
[contentTypes.TOPIC]: "neutral",
|
|
30
|
-
[contentTypes.MULTIDISCIPLINARY]: "neutral",
|
|
31
|
-
[contentTypes.CONCEPT]: "brand1",
|
|
32
|
-
[contentTypes.EXTERNAL]: "brand2",
|
|
33
|
-
[contentTypes.IMAGE]: "brand1",
|
|
34
|
-
[contentTypes.AUDIO]: "brand1",
|
|
35
|
-
[contentTypes.PODCAST]: "brand1",
|
|
36
|
-
[contentTypes.VIDEO]: "brand1",
|
|
37
|
-
[contentTypes.MISSING]: "neutral",
|
|
38
|
-
[contentTypes.PODCAST_SERIES]: "brand1",
|
|
39
|
-
[contentTypes.GLOSS]: "brand1",
|
|
40
|
-
[contentTypes.PROGRAMME]: "neutral"
|
|
41
|
-
};
|
|
42
|
-
const ContentTypeBadge = exports.ContentTypeBadge = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
43
|
-
let {
|
|
44
|
-
contentType,
|
|
45
|
-
children,
|
|
46
|
-
...props
|
|
47
|
-
} = _ref;
|
|
48
|
-
const {
|
|
49
|
-
t
|
|
50
|
-
} = (0, _reactI18next.useTranslation)();
|
|
51
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Badge, {
|
|
52
|
-
colorTheme: contentTypeToBadgeVariantMap[contentType ?? "missing"] ?? contentTypeToBadgeVariantMap["missing"],
|
|
53
|
-
...props,
|
|
54
|
-
ref: ref,
|
|
55
|
-
children: children ?? t(`contentTypes.${contentType}`)
|
|
56
|
-
});
|
|
57
|
-
});
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2018-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
import { ContentTypeBadge } from "./ContentTypeBadge";
|
|
9
|
-
export { SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, SubjectBadge, SourceMaterialBadge, LearningPathBadge, ConceptBadge, } from "./ContentTypeBadge";
|
|
10
|
-
export default ContentTypeBadge;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "AssessmentResourcesBadge", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _ContentTypeBadge.AssessmentResourcesBadge;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "ConceptBadge", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _ContentTypeBadge.ConceptBadge;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
Object.defineProperty(exports, "LearningPathBadge", {
|
|
19
|
-
enumerable: true,
|
|
20
|
-
get: function () {
|
|
21
|
-
return _ContentTypeBadge.LearningPathBadge;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
Object.defineProperty(exports, "SourceMaterialBadge", {
|
|
25
|
-
enumerable: true,
|
|
26
|
-
get: function () {
|
|
27
|
-
return _ContentTypeBadge.SourceMaterialBadge;
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
Object.defineProperty(exports, "SubjectBadge", {
|
|
31
|
-
enumerable: true,
|
|
32
|
-
get: function () {
|
|
33
|
-
return _ContentTypeBadge.SubjectBadge;
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
Object.defineProperty(exports, "SubjectMaterialBadge", {
|
|
37
|
-
enumerable: true,
|
|
38
|
-
get: function () {
|
|
39
|
-
return _ContentTypeBadge.SubjectMaterialBadge;
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
Object.defineProperty(exports, "TasksAndActivitiesBadge", {
|
|
43
|
-
enumerable: true,
|
|
44
|
-
get: function () {
|
|
45
|
-
return _ContentTypeBadge.TasksAndActivitiesBadge;
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
exports.default = void 0;
|
|
49
|
-
var _ContentTypeBadge = require("./ContentTypeBadge");
|
|
50
|
-
/**
|
|
51
|
-
* Copyright (c) 2018-present, NDLA.
|
|
52
|
-
*
|
|
53
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
54
|
-
* LICENSE file in the root directory of this source tree.
|
|
55
|
-
*
|
|
56
|
-
*/
|
|
57
|
-
var _default = exports.default = _ContentTypeBadge.ContentTypeBadge;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2018-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { Meta, StoryObj } from "@storybook/react";
|
|
10
|
-
import ContentLoader from ".";
|
|
11
|
-
|
|
12
|
-
export default {
|
|
13
|
-
title: "Components/ContentLoader",
|
|
14
|
-
tags: ["autodocs"],
|
|
15
|
-
parameters: {
|
|
16
|
-
inlineStories: true,
|
|
17
|
-
},
|
|
18
|
-
args: {
|
|
19
|
-
speed: 2,
|
|
20
|
-
},
|
|
21
|
-
argTypes: {
|
|
22
|
-
children: { control: false },
|
|
23
|
-
},
|
|
24
|
-
component: ContentLoader,
|
|
25
|
-
} as Meta<typeof ContentLoader>;
|
|
26
|
-
|
|
27
|
-
export const ImageOrVideo: StoryObj<typeof ContentLoader> = {
|
|
28
|
-
args: {
|
|
29
|
-
width: 1000,
|
|
30
|
-
height: 750,
|
|
31
|
-
children: (
|
|
32
|
-
<>
|
|
33
|
-
<rect x="0" y="0" rx="3" ry="3" width="800" height="600" />
|
|
34
|
-
<rect x="20" y="610" rx="3" ry="3" width="600" height="30" />
|
|
35
|
-
<rect x="20" y="650" rx="3" ry="3" width="400" height="30" />
|
|
36
|
-
<circle cx="30" cy="700" r="15" fill="purple" />
|
|
37
|
-
<circle cx="70" cy="700" r="15" fill="purple" />
|
|
38
|
-
<circle cx="110" cy="700" r="15" fill="purple" />
|
|
39
|
-
</>
|
|
40
|
-
),
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export const Article: StoryObj<typeof ContentLoader> = {
|
|
45
|
-
args: {
|
|
46
|
-
width: 1000,
|
|
47
|
-
height: 1050,
|
|
48
|
-
children: (
|
|
49
|
-
<>
|
|
50
|
-
<rect x="100" y="0" rx="3" ry="3" width="800" height="60" />
|
|
51
|
-
<rect x="100" y="100" rx="3" ry="3" width="800" height="25" />
|
|
52
|
-
<rect x="100" y="140" rx="3" ry="3" width="800" height="25" />
|
|
53
|
-
<rect x="100" y="180" rx="3" ry="3" width="400" height="25" />
|
|
54
|
-
<rect x="0" y="260" rx="3" ry="3" width="1000" height="600" />
|
|
55
|
-
<rect x="100" y="900" rx="3" ry="3" width="800" height="20" />
|
|
56
|
-
<rect x="100" y="930" rx="3" ry="3" width="800" height="20" />
|
|
57
|
-
<rect x="100" y="970" rx="3" ry="3" width="800" height="20" />
|
|
58
|
-
<rect x="100" y="1000" rx="3" ry="3" width="600" height="20" />
|
|
59
|
-
</>
|
|
60
|
-
),
|
|
61
|
-
},
|
|
62
|
-
};
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2018-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { ReactNode, SVGProps } from "react";
|
|
10
|
-
import { uuid } from "@ndla/util";
|
|
11
|
-
|
|
12
|
-
interface Props extends Omit<SVGProps<SVGSVGElement>, "viewBox"> {
|
|
13
|
-
children?: ReactNode;
|
|
14
|
-
primaryColor?: string;
|
|
15
|
-
secondaryColor?: string;
|
|
16
|
-
viewBox?: string | null;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
const ContentLoader = ({
|
|
20
|
-
children,
|
|
21
|
-
width = 400,
|
|
22
|
-
height = 130,
|
|
23
|
-
preserveAspectRatio = "xMidYMid meet",
|
|
24
|
-
className = "",
|
|
25
|
-
primaryColor = "#f0f0f0",
|
|
26
|
-
secondaryColor = "#e0e0e0",
|
|
27
|
-
speed = 2,
|
|
28
|
-
viewBox: viewBoxProp,
|
|
29
|
-
...rest
|
|
30
|
-
}: Props) => {
|
|
31
|
-
const idClip = uuid();
|
|
32
|
-
const idGradient = uuid();
|
|
33
|
-
const viewBox = viewBoxProp === undefined ? `0 0 ${width} ${height}` : viewBoxProp;
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<svg
|
|
37
|
-
viewBox={viewBox ?? undefined}
|
|
38
|
-
version="1.1"
|
|
39
|
-
preserveAspectRatio={preserveAspectRatio}
|
|
40
|
-
className={className}
|
|
41
|
-
{...rest}
|
|
42
|
-
height={typeof height === "string" ? height : undefined}
|
|
43
|
-
width={typeof width === "string" ? width : undefined}
|
|
44
|
-
>
|
|
45
|
-
<rect
|
|
46
|
-
style={{ fill: `url(#${idGradient})` }}
|
|
47
|
-
clipPath={`url(#${idClip})`}
|
|
48
|
-
x="0"
|
|
49
|
-
y="0"
|
|
50
|
-
width={width}
|
|
51
|
-
height={height}
|
|
52
|
-
/>
|
|
53
|
-
|
|
54
|
-
<defs>
|
|
55
|
-
<clipPath id={idClip}>{children}</clipPath>
|
|
56
|
-
|
|
57
|
-
<linearGradient id={idGradient}>
|
|
58
|
-
<stop offset="0%" stopColor={primaryColor}>
|
|
59
|
-
<animate attributeName="offset" values="-2; 1" dur={`${speed}s`} repeatCount="indefinite" />
|
|
60
|
-
</stop>
|
|
61
|
-
<stop offset="50%" stopColor={secondaryColor}>
|
|
62
|
-
<animate attributeName="offset" values="-1.5; 1.5" dur={`${speed}s`} repeatCount="indefinite" />
|
|
63
|
-
</stop>
|
|
64
|
-
<stop offset="100%" stopColor={primaryColor}>
|
|
65
|
-
<animate attributeName="offset" values="-1; 2" dur={`${speed}s`} repeatCount="indefinite" />
|
|
66
|
-
</stop>
|
|
67
|
-
</linearGradient>
|
|
68
|
-
</defs>
|
|
69
|
-
</svg>
|
|
70
|
-
);
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
export default ContentLoader;
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2024-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { useTranslation } from "react-i18next";
|
|
10
|
-
import { Meta, StoryFn, StoryObj } from "@storybook/react";
|
|
11
|
-
import { MovieLine } from "@ndla/icons/editor";
|
|
12
|
-
import { HStack, styled } from "@ndla/styled-system/jsx";
|
|
13
|
-
import { ContentTypeBadge } from "./ContentTypeBadgeNew";
|
|
14
|
-
|
|
15
|
-
export default {
|
|
16
|
-
title: "Components/ContentTypeBadgeNew",
|
|
17
|
-
component: ContentTypeBadge,
|
|
18
|
-
tags: ["autodocs"],
|
|
19
|
-
parameters: {
|
|
20
|
-
inlineStories: true,
|
|
21
|
-
},
|
|
22
|
-
args: {
|
|
23
|
-
contentType: "subject-material",
|
|
24
|
-
},
|
|
25
|
-
} satisfies Meta<typeof ContentTypeBadge>;
|
|
26
|
-
|
|
27
|
-
export const Default: StoryObj<typeof ContentTypeBadge> = {};
|
|
28
|
-
|
|
29
|
-
const StyledHStack = styled(HStack, {
|
|
30
|
-
base: {
|
|
31
|
-
flexWrap: "wrap",
|
|
32
|
-
},
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
export const AllBadges: StoryFn<typeof ContentTypeBadge> = () => (
|
|
36
|
-
<StyledHStack gap="3xsmall">
|
|
37
|
-
<ContentTypeBadge contentType="subject-material" />
|
|
38
|
-
<ContentTypeBadge contentType="tasks-and-activities" />
|
|
39
|
-
<ContentTypeBadge contentType="assessment-resources" />
|
|
40
|
-
<ContentTypeBadge contentType="subject" />
|
|
41
|
-
<ContentTypeBadge contentType="source-material" />
|
|
42
|
-
<ContentTypeBadge contentType="learning-path" />
|
|
43
|
-
<ContentTypeBadge contentType="topic" />
|
|
44
|
-
<ContentTypeBadge contentType="multidisciplinary" />
|
|
45
|
-
<ContentTypeBadge contentType="concept" />
|
|
46
|
-
<ContentTypeBadge contentType="external" />
|
|
47
|
-
<ContentTypeBadge contentType="image" />
|
|
48
|
-
<ContentTypeBadge contentType="audio" />
|
|
49
|
-
<ContentTypeBadge contentType="video" />
|
|
50
|
-
<ContentTypeBadge contentType="missing" />
|
|
51
|
-
</StyledHStack>
|
|
52
|
-
);
|
|
53
|
-
|
|
54
|
-
const StyledContentTypeBadge = styled(ContentTypeBadge, {
|
|
55
|
-
base: {
|
|
56
|
-
display: "flex",
|
|
57
|
-
gap: "4xsmall",
|
|
58
|
-
alignItems: "center",
|
|
59
|
-
},
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
export const ContentOverride: StoryFn<typeof ContentTypeBadge> = () => {
|
|
63
|
-
const { t } = useTranslation();
|
|
64
|
-
return (
|
|
65
|
-
<StyledContentTypeBadge contentType="video">
|
|
66
|
-
<MovieLine size="small" />
|
|
67
|
-
{t("contentTypes.video")}
|
|
68
|
-
</StyledContentTypeBadge>
|
|
69
|
-
);
|
|
70
|
-
};
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2024-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { forwardRef } from "react";
|
|
10
|
-
import { useTranslation } from "react-i18next";
|
|
11
|
-
import { Badge, BadgeProps, type BadgeVariant } from "@ndla/primitives";
|
|
12
|
-
import * as contentTypes from "../model/ContentType";
|
|
13
|
-
|
|
14
|
-
export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
|
|
15
|
-
contentType: ContentType | undefined;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export type StrictContentType =
|
|
19
|
-
| typeof contentTypes.SUBJECT_MATERIAL
|
|
20
|
-
| typeof contentTypes.TASKS_AND_ACTIVITIES
|
|
21
|
-
| typeof contentTypes.ASSESSMENT_RESOURCES
|
|
22
|
-
| typeof contentTypes.SUBJECT
|
|
23
|
-
| typeof contentTypes.SOURCE_MATERIAL
|
|
24
|
-
| typeof contentTypes.LEARNING_PATH
|
|
25
|
-
| typeof contentTypes.TOPIC
|
|
26
|
-
| typeof contentTypes.MULTIDISCIPLINARY
|
|
27
|
-
| typeof contentTypes.CONCEPT
|
|
28
|
-
| typeof contentTypes.EXTERNAL
|
|
29
|
-
| typeof contentTypes.IMAGE
|
|
30
|
-
| typeof contentTypes.AUDIO
|
|
31
|
-
| typeof contentTypes.VIDEO
|
|
32
|
-
| typeof contentTypes.MISSING
|
|
33
|
-
| typeof contentTypes.PODCAST
|
|
34
|
-
| typeof contentTypes.GLOSS
|
|
35
|
-
| typeof contentTypes.PROGRAMME
|
|
36
|
-
| typeof contentTypes.PODCAST_SERIES;
|
|
37
|
-
|
|
38
|
-
export type ContentType =
|
|
39
|
-
| StrictContentType
|
|
40
|
-
// This allows for us to fallback to string without getting a ts error, while still keeping intellisense
|
|
41
|
-
| (string & {});
|
|
42
|
-
|
|
43
|
-
export const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant> = {
|
|
44
|
-
[contentTypes.SUBJECT_MATERIAL]: "brand1",
|
|
45
|
-
[contentTypes.TASKS_AND_ACTIVITIES]: "brand2",
|
|
46
|
-
[contentTypes.ASSESSMENT_RESOURCES]: "brand2",
|
|
47
|
-
[contentTypes.SUBJECT]: "neutral",
|
|
48
|
-
[contentTypes.SOURCE_MATERIAL]: "brand1",
|
|
49
|
-
[contentTypes.LEARNING_PATH]: "brand3",
|
|
50
|
-
[contentTypes.TOPIC]: "neutral",
|
|
51
|
-
[contentTypes.MULTIDISCIPLINARY]: "neutral",
|
|
52
|
-
[contentTypes.CONCEPT]: "brand1",
|
|
53
|
-
[contentTypes.EXTERNAL]: "brand2",
|
|
54
|
-
[contentTypes.IMAGE]: "brand1",
|
|
55
|
-
[contentTypes.AUDIO]: "brand1",
|
|
56
|
-
[contentTypes.PODCAST]: "brand1",
|
|
57
|
-
[contentTypes.VIDEO]: "brand1",
|
|
58
|
-
[contentTypes.MISSING]: "neutral",
|
|
59
|
-
[contentTypes.PODCAST_SERIES]: "brand1",
|
|
60
|
-
[contentTypes.GLOSS]: "brand1",
|
|
61
|
-
[contentTypes.PROGRAMME]: "neutral",
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
export const ContentTypeBadge = forwardRef<HTMLDivElement, ContentTypeBadgeProps>(
|
|
65
|
-
({ contentType, children, ...props }, ref) => {
|
|
66
|
-
const { t } = useTranslation();
|
|
67
|
-
return (
|
|
68
|
-
<Badge
|
|
69
|
-
colorTheme={contentTypeToBadgeVariantMap[contentType ?? "missing"] ?? contentTypeToBadgeVariantMap["missing"]}
|
|
70
|
-
{...props}
|
|
71
|
-
ref={ref}
|
|
72
|
-
>
|
|
73
|
-
{children ?? t(`contentTypes.${contentType}`)}
|
|
74
|
-
</Badge>
|
|
75
|
-
);
|
|
76
|
-
},
|
|
77
|
-
);
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2018-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { ContentTypeBadge } from "./ContentTypeBadge";
|
|
10
|
-
|
|
11
|
-
export {
|
|
12
|
-
SubjectMaterialBadge,
|
|
13
|
-
TasksAndActivitiesBadge,
|
|
14
|
-
AssessmentResourcesBadge,
|
|
15
|
-
SubjectBadge,
|
|
16
|
-
SourceMaterialBadge,
|
|
17
|
-
LearningPathBadge,
|
|
18
|
-
ConceptBadge,
|
|
19
|
-
} from "./ContentTypeBadge";
|
|
20
|
-
|
|
21
|
-
export default ContentTypeBadge;
|