@guardian/stand 0.0.41 → 0.0.42
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/components/IntendedAudienceSignifier/IntendedAudienceSignifier.cjs +20 -39
- package/dist/components/IntendedAudienceSignifier/IntendedAudienceSignifier.d.cts +1 -1
- package/dist/components/IntendedAudienceSignifier/IntendedAudienceSignifier.d.ts +1 -1
- package/dist/components/IntendedAudienceSignifier/IntendedAudienceSignifier.js +21 -40
- package/dist/components/IntendedAudienceSignifier/types.d.cts +3 -4
- package/dist/components/IntendedAudienceSignifier/types.d.ts +3 -4
- package/package.json +1 -1
|
@@ -4,66 +4,47 @@ const require_FlagIcons = require("./FlagIcons.cjs");
|
|
|
4
4
|
const require_styles = require("./styles.cjs");
|
|
5
5
|
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
|
|
6
6
|
//#region src/components/IntendedAudienceSignifier/IntendedAudienceSignifier.tsx
|
|
7
|
-
const
|
|
7
|
+
const icons = {
|
|
8
8
|
UK: require_FlagIcons.ukFlag,
|
|
9
9
|
US: require_FlagIcons.usFlag,
|
|
10
10
|
AUS: require_FlagIcons.auFlag,
|
|
11
|
-
|
|
11
|
+
global: require_FlagIcons.globeIcon
|
|
12
12
|
};
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
};
|
|
17
|
-
const getIntendedAudienceIconElement = (source, audience) => {
|
|
18
|
-
if (audience === "Domestic for Domestic") return getSourceIconElement(source, audience);
|
|
19
|
-
if (audience === "Global" || audience === "Domestic For Global") return require_FlagIcons.globeIcon;
|
|
20
|
-
return sourceIcons[audience];
|
|
21
|
-
};
|
|
22
|
-
const getSourceDescription = (source, audience) => {
|
|
23
|
-
switch (audience) {
|
|
24
|
-
case "Global": return "Global";
|
|
25
|
-
case "Domestic For Global":
|
|
26
|
-
case "Domestic for Domestic":
|
|
13
|
+
const getSourceDescription = (source) => {
|
|
14
|
+
switch (source) {
|
|
15
|
+
case "global": return "Global";
|
|
27
16
|
case "UK":
|
|
28
17
|
case "US":
|
|
29
18
|
case "AUS": return source;
|
|
30
19
|
}
|
|
31
20
|
};
|
|
32
|
-
const
|
|
33
|
-
switch (
|
|
34
|
-
case "Global"
|
|
35
|
-
case "Domestic For Global": return "Global";
|
|
36
|
-
case "Domestic for Domestic": return "Domestic";
|
|
21
|
+
const getTargetDescription = (source, target) => {
|
|
22
|
+
switch (target) {
|
|
23
|
+
case "global": return "Global";
|
|
37
24
|
case "UK":
|
|
38
25
|
case "US":
|
|
39
|
-
case "AUS": return
|
|
26
|
+
case "AUS": return target === source ? "Domestic" : target;
|
|
40
27
|
}
|
|
41
28
|
};
|
|
42
|
-
const getSignifierDescription = (source, audience) => {
|
|
43
|
-
return `${getSourceDescription(source, audience)} article for ${getAudienceDescription(source, audience)} audience`;
|
|
44
|
-
};
|
|
45
29
|
const AUDIENCE_NOT_KNOWN_DESCRIPTION = "Intended audience unknown";
|
|
46
|
-
|
|
30
|
+
const getSignifierDescription = (source, target) => {
|
|
31
|
+
if (!source || !target) return AUDIENCE_NOT_KNOWN_DESCRIPTION;
|
|
32
|
+
return `${getSourceDescription(source)} article for ${getTargetDescription(source, target)} audience`;
|
|
33
|
+
};
|
|
34
|
+
function IntendedAudienceSignifier({ source, target, theme = {}, cssOverrides, className, ...props }) {
|
|
47
35
|
const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultIntendedAudienceSignifierTheme, theme);
|
|
48
|
-
|
|
49
|
-
...props,
|
|
50
|
-
className,
|
|
51
|
-
css: [require_styles.intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
|
|
52
|
-
"aria-label": AUDIENCE_NOT_KNOWN_DESCRIPTION,
|
|
53
|
-
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: "Don‘t know" })
|
|
54
|
-
});
|
|
36
|
+
const description = getSignifierDescription(source, target);
|
|
55
37
|
const iconStyles = require_styles.intendedAudienceSignifierIconStyles(mergedTheme);
|
|
56
38
|
const chevronIconStyles = require_styles.intendedAudienceSignifierChevronIconStyles(mergedTheme);
|
|
57
|
-
|
|
58
|
-
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
39
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
59
40
|
...props,
|
|
60
41
|
className,
|
|
61
42
|
css: [require_styles.intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
|
|
62
43
|
"aria-label": description,
|
|
63
|
-
children: [
|
|
44
|
+
children: target && source ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [
|
|
64
45
|
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
65
46
|
css: iconStyles,
|
|
66
|
-
children:
|
|
47
|
+
children: icons[source]
|
|
67
48
|
}),
|
|
68
49
|
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
69
50
|
css: chevronIconStyles,
|
|
@@ -71,9 +52,9 @@ function IntendedAudienceSignifier({ source, intendedAudience, theme = {}, cssOv
|
|
|
71
52
|
}),
|
|
72
53
|
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
73
54
|
css: iconStyles,
|
|
74
|
-
children:
|
|
55
|
+
children: icons[target]
|
|
75
56
|
})
|
|
76
|
-
]
|
|
57
|
+
] }) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: "Don‘t know" })
|
|
77
58
|
});
|
|
78
59
|
}
|
|
79
60
|
//#endregion
|
|
@@ -3,7 +3,7 @@ import { IntendedAudienceSignifierProps } from "./types.cjs";
|
|
|
3
3
|
//#region src/components/IntendedAudienceSignifier/IntendedAudienceSignifier.d.ts
|
|
4
4
|
declare function IntendedAudienceSignifier({
|
|
5
5
|
source,
|
|
6
|
-
|
|
6
|
+
target,
|
|
7
7
|
theme,
|
|
8
8
|
cssOverrides,
|
|
9
9
|
className,
|
|
@@ -3,7 +3,7 @@ import { IntendedAudienceSignifierProps } from "./types.js";
|
|
|
3
3
|
//#region src/components/IntendedAudienceSignifier/IntendedAudienceSignifier.d.ts
|
|
4
4
|
declare function IntendedAudienceSignifier({
|
|
5
5
|
source,
|
|
6
|
-
|
|
6
|
+
target,
|
|
7
7
|
theme,
|
|
8
8
|
cssOverrides,
|
|
9
9
|
className,
|
|
@@ -1,68 +1,49 @@
|
|
|
1
1
|
import { mergeDeep } from "../../util/mergeDeep.js";
|
|
2
2
|
import { DoubleChevronRightSvg, auFlag, globeIcon, ukFlag, usFlag } from "./FlagIcons.js";
|
|
3
3
|
import { defaultIntendedAudienceSignifierTheme, intendedAudienceSignifierChevronIconStyles, intendedAudienceSignifierIconStyles, intendedAudienceSignifierStyles } from "./styles.js";
|
|
4
|
-
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
4
|
+
import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
5
5
|
//#region src/components/IntendedAudienceSignifier/IntendedAudienceSignifier.tsx
|
|
6
|
-
const
|
|
6
|
+
const icons = {
|
|
7
7
|
UK: ukFlag,
|
|
8
8
|
US: usFlag,
|
|
9
9
|
AUS: auFlag,
|
|
10
|
-
|
|
10
|
+
global: globeIcon
|
|
11
11
|
};
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
};
|
|
16
|
-
const getIntendedAudienceIconElement = (source, audience) => {
|
|
17
|
-
if (audience === "Domestic for Domestic") return getSourceIconElement(source, audience);
|
|
18
|
-
if (audience === "Global" || audience === "Domestic For Global") return globeIcon;
|
|
19
|
-
return sourceIcons[audience];
|
|
20
|
-
};
|
|
21
|
-
const getSourceDescription = (source, audience) => {
|
|
22
|
-
switch (audience) {
|
|
23
|
-
case "Global": return "Global";
|
|
24
|
-
case "Domestic For Global":
|
|
25
|
-
case "Domestic for Domestic":
|
|
12
|
+
const getSourceDescription = (source) => {
|
|
13
|
+
switch (source) {
|
|
14
|
+
case "global": return "Global";
|
|
26
15
|
case "UK":
|
|
27
16
|
case "US":
|
|
28
17
|
case "AUS": return source;
|
|
29
18
|
}
|
|
30
19
|
};
|
|
31
|
-
const
|
|
32
|
-
switch (
|
|
33
|
-
case "Global"
|
|
34
|
-
case "Domestic For Global": return "Global";
|
|
35
|
-
case "Domestic for Domestic": return "Domestic";
|
|
20
|
+
const getTargetDescription = (source, target) => {
|
|
21
|
+
switch (target) {
|
|
22
|
+
case "global": return "Global";
|
|
36
23
|
case "UK":
|
|
37
24
|
case "US":
|
|
38
|
-
case "AUS": return
|
|
25
|
+
case "AUS": return target === source ? "Domestic" : target;
|
|
39
26
|
}
|
|
40
27
|
};
|
|
41
|
-
const getSignifierDescription = (source, audience) => {
|
|
42
|
-
return `${getSourceDescription(source, audience)} article for ${getAudienceDescription(source, audience)} audience`;
|
|
43
|
-
};
|
|
44
28
|
const AUDIENCE_NOT_KNOWN_DESCRIPTION = "Intended audience unknown";
|
|
45
|
-
|
|
29
|
+
const getSignifierDescription = (source, target) => {
|
|
30
|
+
if (!source || !target) return AUDIENCE_NOT_KNOWN_DESCRIPTION;
|
|
31
|
+
return `${getSourceDescription(source)} article for ${getTargetDescription(source, target)} audience`;
|
|
32
|
+
};
|
|
33
|
+
function IntendedAudienceSignifier({ source, target, theme = {}, cssOverrides, className, ...props }) {
|
|
46
34
|
const mergedTheme = mergeDeep(defaultIntendedAudienceSignifierTheme, theme);
|
|
47
|
-
|
|
48
|
-
...props,
|
|
49
|
-
className,
|
|
50
|
-
css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
|
|
51
|
-
"aria-label": AUDIENCE_NOT_KNOWN_DESCRIPTION,
|
|
52
|
-
children: /* @__PURE__ */ jsx("span", { children: "Don‘t know" })
|
|
53
|
-
});
|
|
35
|
+
const description = getSignifierDescription(source, target);
|
|
54
36
|
const iconStyles = intendedAudienceSignifierIconStyles(mergedTheme);
|
|
55
37
|
const chevronIconStyles = intendedAudienceSignifierChevronIconStyles(mergedTheme);
|
|
56
|
-
|
|
57
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
38
|
+
return /* @__PURE__ */ jsx("div", {
|
|
58
39
|
...props,
|
|
59
40
|
className,
|
|
60
41
|
css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
|
|
61
42
|
"aria-label": description,
|
|
62
|
-
children: [
|
|
43
|
+
children: target && source ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
63
44
|
/* @__PURE__ */ jsx("div", {
|
|
64
45
|
css: iconStyles,
|
|
65
|
-
children:
|
|
46
|
+
children: icons[source]
|
|
66
47
|
}),
|
|
67
48
|
/* @__PURE__ */ jsx("div", {
|
|
68
49
|
css: chevronIconStyles,
|
|
@@ -70,9 +51,9 @@ function IntendedAudienceSignifier({ source, intendedAudience, theme = {}, cssOv
|
|
|
70
51
|
}),
|
|
71
52
|
/* @__PURE__ */ jsx("div", {
|
|
72
53
|
css: iconStyles,
|
|
73
|
-
children:
|
|
54
|
+
children: icons[target]
|
|
74
55
|
})
|
|
75
|
-
]
|
|
56
|
+
] }) : /* @__PURE__ */ jsx("span", { children: "Don‘t know" })
|
|
76
57
|
});
|
|
77
58
|
}
|
|
78
59
|
//#endregion
|
|
@@ -2,11 +2,10 @@ import { DefaultProps } from "../../util/types.cjs";
|
|
|
2
2
|
import { IntendedAudienceSignifierTheme } from "./styles.cjs";
|
|
3
3
|
|
|
4
4
|
//#region src/components/IntendedAudienceSignifier/types.d.ts
|
|
5
|
-
type
|
|
6
|
-
type IntendedAudience = 'Global' | 'Domestic for Domestic' | 'Domestic For Global' | "Don't know" | 'UK' | 'US' | 'AUS';
|
|
5
|
+
type SourceOrTarget = 'global' | 'UK' | 'US' | 'AUS';
|
|
7
6
|
interface IntendedAudienceSignifierProps extends DefaultProps<IntendedAudienceSignifierTheme> {
|
|
8
|
-
source
|
|
9
|
-
|
|
7
|
+
source?: SourceOrTarget;
|
|
8
|
+
target?: SourceOrTarget;
|
|
10
9
|
}
|
|
11
10
|
//#endregion
|
|
12
11
|
export { IntendedAudienceSignifierProps };
|
|
@@ -2,11 +2,10 @@ import { DefaultProps } from "../../util/types.js";
|
|
|
2
2
|
import { IntendedAudienceSignifierTheme } from "./styles.js";
|
|
3
3
|
|
|
4
4
|
//#region src/components/IntendedAudienceSignifier/types.d.ts
|
|
5
|
-
type
|
|
6
|
-
type IntendedAudience = 'Global' | 'Domestic for Domestic' | 'Domestic For Global' | "Don't know" | 'UK' | 'US' | 'AUS';
|
|
5
|
+
type SourceOrTarget = 'global' | 'UK' | 'US' | 'AUS';
|
|
7
6
|
interface IntendedAudienceSignifierProps extends DefaultProps<IntendedAudienceSignifierTheme> {
|
|
8
|
-
source
|
|
9
|
-
|
|
7
|
+
source?: SourceOrTarget;
|
|
8
|
+
target?: SourceOrTarget;
|
|
10
9
|
}
|
|
11
10
|
//#endregion
|
|
12
11
|
export { IntendedAudienceSignifierProps };
|