@guardian/stand 0.0.39 → 0.0.41

package/dist/components/UserMenu/TitleText.js

@@ -1,22 +1,36 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+//#region src/components/UserMenu/TitleText.tsx
 const TitleText = ({ headingLevel, children, className }) => {
-  switch (headingLevel) {
-    case 1:
-      return jsx("h1", { className, children });
-    case 2:
-      return jsx("h2", { className, children });
-    case 3:
-      return jsx("h3", { className, children });
-    case 4:
-      return jsx("h4", { className, children });
-    case 5:
-      return jsx("h5", { className, children });
-    case 6:
-      return jsx("h6", { className, children });
-    default:
-      return jsx("div", { className, children });
-  }
+	switch (headingLevel) {
+		case 1: return /* @__PURE__ */ jsx("h1", {
+			className,
+			children
+		});
+		case 2: return /* @__PURE__ */ jsx("h2", {
+			className,
+			children
+		});
+		case 3: return /* @__PURE__ */ jsx("h3", {
+			className,
+			children
+		});
+		case 4: return /* @__PURE__ */ jsx("h4", {
+			className,
+			children
+		});
+		case 5: return /* @__PURE__ */ jsx("h5", {
+			className,
+			children
+		});
+		case 6: return /* @__PURE__ */ jsx("h6", {
+			className,
+			children
+		});
+		default: return /* @__PURE__ */ jsx("div", {
+			className,
+			children
+		});
+	}
 };
-
+//#endregion
 export { TitleText };

package/dist/components/UserMenu/UserMenu.cjs

@@ -1,60 +1,53 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var defaultOptions = require('./default-options.cjs');
-var PreferenceRadioGroup = require('./PreferenceRadioGroup.cjs');
-var styles = require('./styles.cjs');
-var TitleText = require('./TitleText.cjs');
-
-function UserMenu({
-  theme,
-  feedBacklink,
-  preferences,
-  updatePreferences,
-  textSizeOptions,
-  fontFamilyOptions,
-  colorSchemeOptions,
-  headingLevel
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { css: styles.userMenuStyles(theme), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TitleText.TitleText, { headingLevel, css: styles.userMenuHeadingStyles(theme), children: "Accessibility Settings" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-      "Customise your reading & writing experience.",
-      " ",
-      feedBacklink && /* @__PURE__ */ jsxRuntime.jsx("a", { href: feedBacklink, target: "_blank", rel: "noreferrer", children: "Send feedback" })
-    ] }) }),
-    (!textSizeOptions || textSizeOptions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
-      PreferenceRadioGroup.PreferenceRadioGroup,
-      {
-        theme,
-        options: textSizeOptions ?? defaultOptions.textSizes,
-        name: "Text Size",
-        currentValue: preferences.fontpreferences,
-        changeValue: (fontpreferences) => updatePreferences({ fontpreferences })
-      }
-    ),
-    (!fontFamilyOptions || fontFamilyOptions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
-      PreferenceRadioGroup.PreferenceRadioGroup,
-      {
-        theme,
-        options: fontFamilyOptions ?? defaultOptions.fontFamilies,
-        name: "Font Family",
-        currentValue: preferences.fontType,
-        changeValue: (fontType) => updatePreferences({ fontType })
-      }
-    ),
-    (!colorSchemeOptions || colorSchemeOptions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
-      PreferenceRadioGroup.PreferenceRadioGroup,
-      {
-        theme,
-        format: "rows",
-        options: colorSchemeOptions ?? defaultOptions.colorSchemes,
-        name: "Color scheme",
-        currentValue: preferences.colorScheme,
-        changeValue: (colorScheme) => updatePreferences({ colorScheme })
-      }
-    )
-  ] });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_defaultOptions = require("./defaultOptions.cjs");
+const require_styles = require("./styles.cjs");
+const require_PreferenceRadioGroup = require("./PreferenceRadioGroup.cjs");
+const require_TitleText = require("./TitleText.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/UserMenu/UserMenu.tsx
+function UserMenu({ theme, feedBacklink, preferences, updatePreferences, textSizeOptions, fontFamilyOptions, colorSchemeOptions, headingLevel }) {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("aside", {
+		css: require_styles.userMenuStyles(theme),
+		children: [
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_TitleText.TitleText, {
+				headingLevel,
+				css: require_styles.userMenuHeadingStyles(theme),
+				children: "Accessibility Settings"
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("p", { children: [
+				"Customise your reading & writing experience.",
+				" ",
+				feedBacklink && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("a", {
+					href: feedBacklink,
+					target: "_blank",
+					rel: "noreferrer",
+					children: "Send feedback"
+				})
+			] }) }),
+			(!textSizeOptions || textSizeOptions.length > 0) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_PreferenceRadioGroup.PreferenceRadioGroup, {
+				theme,
+				options: textSizeOptions ?? require_defaultOptions.textSizes,
+				name: "Text Size",
+				currentValue: preferences.fontpreferences,
+				changeValue: (fontpreferences) => updatePreferences({ fontpreferences })
+			}),
+			(!fontFamilyOptions || fontFamilyOptions.length > 0) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_PreferenceRadioGroup.PreferenceRadioGroup, {
+				theme,
+				options: fontFamilyOptions ?? require_defaultOptions.fontFamilies,
+				name: "Font Family",
+				currentValue: preferences.fontType,
+				changeValue: (fontType) => updatePreferences({ fontType })
+			}),
+			(!colorSchemeOptions || colorSchemeOptions.length > 0) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_PreferenceRadioGroup.PreferenceRadioGroup, {
+				theme,
+				format: "rows",
+				options: colorSchemeOptions ?? require_defaultOptions.colorSchemes,
+				name: "Color scheme",
+				currentValue: preferences.colorScheme,
+				changeValue: (colorScheme) => updatePreferences({ colorScheme })
+			})
+		]
+	});
 }
-
+//#endregion
 exports.UserMenu = UserMenu;

package/dist/components/UserMenu/UserMenu.d.cts

@@ -0,0 +1,30 @@
+import { DeepPartial } from "../../util/types.cjs";
+import { ComponentUserMenu } from "../../styleD/build/typescript/component/userMenu.cjs";
+import { Option } from "./model.cjs";
+import { UserPreferences } from "./types.cjs";
+
+//#region src/components/UserMenu/UserMenu.d.ts
+interface UserMenuProps {
+  theme?: DeepPartial<ComponentUserMenu>;
+  feedBacklink?: string;
+  preferences: UserPreferences;
+  updatePreferences: {
+    (mod: Partial<UserPreferences>): void;
+  };
+  textSizeOptions?: Option[];
+  fontFamilyOptions?: Option[];
+  colorSchemeOptions?: Option[];
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+declare function UserMenu({
+  theme,
+  feedBacklink,
+  preferences,
+  updatePreferences,
+  textSizeOptions,
+  fontFamilyOptions,
+  colorSchemeOptions,
+  headingLevel
+}: UserMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { UserMenu };

package/dist/components/UserMenu/UserMenu.d.ts

@@ -0,0 +1,30 @@
+import { DeepPartial } from "../../util/types.js";
+import { ComponentUserMenu } from "../../styleD/build/typescript/component/userMenu.js";
+import { Option } from "./model.js";
+import { UserPreferences } from "./types.js";
+
+//#region src/components/UserMenu/UserMenu.d.ts
+interface UserMenuProps {
+  theme?: DeepPartial<ComponentUserMenu>;
+  feedBacklink?: string;
+  preferences: UserPreferences;
+  updatePreferences: {
+    (mod: Partial<UserPreferences>): void;
+  };
+  textSizeOptions?: Option[];
+  fontFamilyOptions?: Option[];
+  colorSchemeOptions?: Option[];
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+declare function UserMenu({
+  theme,
+  feedBacklink,
+  preferences,
+  updatePreferences,
+  textSizeOptions,
+  fontFamilyOptions,
+  colorSchemeOptions,
+  headingLevel
+}: UserMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { UserMenu };

package/dist/components/UserMenu/UserMenu.js

@@ -1,11 +1,52 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { textSizes, fontFamilies, colorSchemes } from './default-options.js';
-import { PreferenceRadioGroup } from './PreferenceRadioGroup.js';
-import { userMenuHeadingStyles, userMenuStyles } from './styles.js';
-import { TitleText } from './TitleText.js';
-
+import { colorSchemes, fontFamilies, textSizes } from "./defaultOptions.js";
+import { userMenuHeadingStyles, userMenuStyles } from "./styles.js";
+import { PreferenceRadioGroup } from "./PreferenceRadioGroup.js";
+import { TitleText } from "./TitleText.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+//#region src/components/UserMenu/UserMenu.tsx
 function UserMenu({ theme, feedBacklink, preferences, updatePreferences, textSizeOptions, fontFamilyOptions, colorSchemeOptions, headingLevel }) {
-  return jsxs("aside", { css: userMenuStyles(theme), children: [jsx(TitleText, { headingLevel, css: userMenuHeadingStyles(theme), children: "Accessibility Settings" }), jsx("div", { children: jsxs("p", { children: ["Customise your reading & writing experience.", " ", feedBacklink && jsx("a", { href: feedBacklink, target: "_blank", rel: "noreferrer", children: "Send feedback" })] }) }), (!textSizeOptions || textSizeOptions.length > 0) && jsx(PreferenceRadioGroup, { theme, options: textSizeOptions ?? textSizes, name: "Text Size", currentValue: preferences.fontpreferences, changeValue: (fontpreferences) => updatePreferences({ fontpreferences }) }), (!fontFamilyOptions || fontFamilyOptions.length > 0) && jsx(PreferenceRadioGroup, { theme, options: fontFamilyOptions ?? fontFamilies, name: "Font Family", currentValue: preferences.fontType, changeValue: (fontType) => updatePreferences({ fontType }) }), (!colorSchemeOptions || colorSchemeOptions.length > 0) && jsx(PreferenceRadioGroup, { theme, format: "rows", options: colorSchemeOptions ?? colorSchemes, name: "Color scheme", currentValue: preferences.colorScheme, changeValue: (colorScheme) => updatePreferences({ colorScheme }) })] });
+	return /* @__PURE__ */ jsxs("aside", {
+		css: userMenuStyles(theme),
+		children: [
+			/* @__PURE__ */ jsx(TitleText, {
+				headingLevel,
+				css: userMenuHeadingStyles(theme),
+				children: "Accessibility Settings"
+			}),
+			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("p", { children: [
+				"Customise your reading & writing experience.",
+				" ",
+				feedBacklink && /* @__PURE__ */ jsx("a", {
+					href: feedBacklink,
+					target: "_blank",
+					rel: "noreferrer",
+					children: "Send feedback"
+				})
+			] }) }),
+			(!textSizeOptions || textSizeOptions.length > 0) && /* @__PURE__ */ jsx(PreferenceRadioGroup, {
+				theme,
+				options: textSizeOptions ?? textSizes,
+				name: "Text Size",
+				currentValue: preferences.fontpreferences,
+				changeValue: (fontpreferences) => updatePreferences({ fontpreferences })
+			}),
+			(!fontFamilyOptions || fontFamilyOptions.length > 0) && /* @__PURE__ */ jsx(PreferenceRadioGroup, {
+				theme,
+				options: fontFamilyOptions ?? fontFamilies,
+				name: "Font Family",
+				currentValue: preferences.fontType,
+				changeValue: (fontType) => updatePreferences({ fontType })
+			}),
+			(!colorSchemeOptions || colorSchemeOptions.length > 0) && /* @__PURE__ */ jsx(PreferenceRadioGroup, {
+				theme,
+				format: "rows",
+				options: colorSchemeOptions ?? colorSchemes,
+				name: "Color scheme",
+				currentValue: preferences.colorScheme,
+				changeValue: (colorScheme) => updatePreferences({ colorScheme })
+			})
+		]
+	});
 }
-
+//#endregion
 export { UserMenu };

package/dist/components/UserMenu/defaultOptions.cjs

@@ -0,0 +1,101 @@
+const require_spacing = require("../../styleD/build/typescript/base/spacing.cjs");
+const require_typography = require("../../styleD/build/typescript/base/typography.cjs");
+//#region src/components/UserMenu/defaultOptions.ts
+const textSizes = [
+	{
+		id: "font-preference-small",
+		label: "Small",
+		description: "Compact reading",
+		labelStyle: { fontSize: require_typography.baseTypography.size["12Rem"] }
+	},
+	{
+		id: "font-preference-medium",
+		label: "Medium",
+		description: "Standard reading",
+		labelStyle: { fontSize: require_typography.baseTypography.size["16Rem"] }
+	},
+	{
+		id: "font-preference-large",
+		label: "Large",
+		description: "Comfortable reading",
+		labelStyle: { fontSize: require_typography.baseTypography.size["20Rem"] }
+	}
+];
+const fontFamilies = [
+	{
+		id: "font-serif",
+		label: "Guardian Text Egyptian",
+		description: "Classic Guardian Serif",
+		labelStyle: {
+			fontFamily: require_typography.baseTypography.family.guardianTextEgyptian,
+			fontSize: require_typography.baseTypography.size["20Rem"]
+		}
+	},
+	{
+		id: "open-sans-compact",
+		label: "Open Sans Compact",
+		description: "Compact Sans-Serif",
+		labelStyle: {
+			fontFamily: require_typography.baseTypography.family.openSansCompact,
+			fontSize: require_typography.baseTypography.size["20Rem"]
+		}
+	},
+	{
+		id: "open-sans",
+		label: "Open Sans",
+		description: "Sans-Serif",
+		labelStyle: {
+			fontFamily: require_typography.baseTypography.family.openSans,
+			fontSize: require_typography.baseTypography.size["20Rem"]
+		}
+	}
+];
+const colorSchemes = [
+	{
+		id: "white",
+		buttonStyle: {
+			backgroundColor: "white",
+			padding: require_spacing.baseSpacing["10Rem"]
+		},
+		isDefault: true
+	},
+	{
+		id: "cream",
+		buttonStyle: {
+			backgroundColor: "antiquewhite",
+			padding: require_spacing.baseSpacing["10Rem"]
+		}
+	},
+	{
+		id: "green",
+		buttonStyle: {
+			backgroundColor: "lightgreen",
+			padding: require_spacing.baseSpacing["10Rem"]
+		}
+	},
+	{
+		id: "pink",
+		buttonStyle: {
+			backgroundColor: "pink",
+			padding: require_spacing.baseSpacing["10Rem"]
+		}
+	},
+	{
+		id: "blue",
+		buttonStyle: {
+			backgroundColor: "skyblue",
+			padding: require_spacing.baseSpacing["10Rem"]
+		}
+	},
+	{
+		id: "orange",
+		buttonStyle: {
+			backgroundColor: "orange",
+			padding: require_spacing.baseSpacing["10Rem"]
+		}
+	}
+];
+//#endregion
+exports.colorSchemes = colorSchemes;
+exports.fontFamilies = fontFamilies;
+exports.textSizes = textSizes;

package/dist/components/UserMenu/defaultOptions.js

@@ -0,0 +1,99 @@
+import { baseSpacing } from "../../styleD/build/typescript/base/spacing.js";
+import { baseTypography } from "../../styleD/build/typescript/base/typography.js";
+//#region src/components/UserMenu/defaultOptions.ts
+const textSizes = [
+	{
+		id: "font-preference-small",
+		label: "Small",
+		description: "Compact reading",
+		labelStyle: { fontSize: baseTypography.size["12Rem"] }
+	},
+	{
+		id: "font-preference-medium",
+		label: "Medium",
+		description: "Standard reading",
+		labelStyle: { fontSize: baseTypography.size["16Rem"] }
+	},
+	{
+		id: "font-preference-large",
+		label: "Large",
+		description: "Comfortable reading",
+		labelStyle: { fontSize: baseTypography.size["20Rem"] }
+	}
+];
+const fontFamilies = [
+	{
+		id: "font-serif",
+		label: "Guardian Text Egyptian",
+		description: "Classic Guardian Serif",
+		labelStyle: {
+			fontFamily: baseTypography.family.guardianTextEgyptian,
+			fontSize: baseTypography.size["20Rem"]
+		}
+	},
+	{
+		id: "open-sans-compact",
+		label: "Open Sans Compact",
+		description: "Compact Sans-Serif",
+		labelStyle: {
+			fontFamily: baseTypography.family.openSansCompact,
+			fontSize: baseTypography.size["20Rem"]
+		}
+	},
+	{
+		id: "open-sans",
+		label: "Open Sans",
+		description: "Sans-Serif",
+		labelStyle: {
+			fontFamily: baseTypography.family.openSans,
+			fontSize: baseTypography.size["20Rem"]
+		}
+	}
+];
+const colorSchemes = [
+	{
+		id: "white",
+		buttonStyle: {
+			backgroundColor: "white",
+			padding: baseSpacing["10Rem"]
+		},
+		isDefault: true
+	},
+	{
+		id: "cream",
+		buttonStyle: {
+			backgroundColor: "antiquewhite",
+			padding: baseSpacing["10Rem"]
+		}
+	},
+	{
+		id: "green",
+		buttonStyle: {
+			backgroundColor: "lightgreen",
+			padding: baseSpacing["10Rem"]
+		}
+	},
+	{
+		id: "pink",
+		buttonStyle: {
+			backgroundColor: "pink",
+			padding: baseSpacing["10Rem"]
+		}
+	},
+	{
+		id: "blue",
+		buttonStyle: {
+			backgroundColor: "skyblue",
+			padding: baseSpacing["10Rem"]
+		}
+	},
+	{
+		id: "orange",
+		buttonStyle: {
+			backgroundColor: "orange",
+			padding: baseSpacing["10Rem"]
+		}
+	}
+];
+//#endregion
+export { colorSchemes, fontFamilies, textSizes };

package/dist/components/UserMenu/model.d.cts

@@ -0,0 +1,13 @@
+import { CSSProperties } from "react";
+
+//#region src/components/UserMenu/model.d.ts
+type Option = {
+  id: string;
+  label?: string;
+  description?: string;
+  labelStyle?: CSSProperties;
+  buttonStyle?: CSSProperties;
+  isDefault?: boolean;
+};
+//#endregion
+export { Option };

package/dist/components/UserMenu/model.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from "react";
+
+//#region src/components/UserMenu/model.d.ts
+type Option = {
+  id: string;
+  label?: string;
+  description?: string;
+  labelStyle?: CSSProperties;
+  buttonStyle?: CSSProperties;
+  isDefault?: boolean;
+};
+//#endregion
+export { Option };

package/dist/components/UserMenu/styles.cjs

@@ -1,12 +1,11 @@
-'use strict';
-
-var react = require('@emotion/react');
-var userMenu = require('../../styleD/build/typescript/component/userMenu.cjs');
-var mergeDeep = require('../../util/mergeDeep.cjs');
-
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_userMenu = require("../../styleD/build/typescript/component/userMenu.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/UserMenu/styles.ts
 const userMenuStyles = (partialTheme = {}) => {
-  const { container } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
-  return react.css`
+	const { container } = require_mergeDeep.mergeDeep(require_userMenu.componentUserMenu, partialTheme);
+	return _emotion_react.css`
 		background-color: ${container.backgroundColor};
 		display: flex;
 		flex-direction: column;
@@ -18,8 +17,8 @@ const userMenuStyles = (partialTheme = {}) => {
 	`;
 };
 const userMenuHeadingStyles = (partialTheme = {}) => {
-  const { heading } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
-  return react.css`
+	const { heading } = require_mergeDeep.mergeDeep(require_userMenu.componentUserMenu, partialTheme);
+	return _emotion_react.css`
 		font-weight: ${heading.fontWeight};
 		font-size: ${heading.fontSize};
 		text-align: ${heading.textAlign};
@@ -30,16 +29,16 @@ const userMenuHeadingStyles = (partialTheme = {}) => {
 	`;
 };
 const toggleButtonStackedGroupStyles = (partialTheme = {}) => {
-  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
-  return react.css`
+	const { toggleButton } = require_mergeDeep.mergeDeep(require_userMenu.componentUserMenu, partialTheme);
+	return _emotion_react.css`
 		display: flex;
 		flex-direction: column;
 		gap: ${toggleButton.gap};
 	`;
 };
 const radioGroupLabelStyles = (partialTheme = {}) => {
-  const { label } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
-  return react.css`
+	const { label } = require_mergeDeep.mergeDeep(require_userMenu.componentUserMenu, partialTheme);
+	return _emotion_react.css`
 		font-weight: ${label.fontWeight};
 		font-size: ${label.fontSize};
 		text-align: ${label.textAlign};
@@ -50,8 +49,8 @@ const radioGroupLabelStyles = (partialTheme = {}) => {
 	`;
 };
 const toggleButtonRowsGroupStyles = (partialTheme = {}) => {
-  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
-  return react.css`
+	const { toggleButton } = require_mergeDeep.mergeDeep(require_userMenu.componentUserMenu, partialTheme);
+	return _emotion_react.css`
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
@@ -60,8 +59,8 @@ const toggleButtonRowsGroupStyles = (partialTheme = {}) => {
 	`;
 };
 const toggleButtonStyles = (partialTheme = {}) => {
-  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
-  return react.css`
+	const { toggleButton } = require_mergeDeep.mergeDeep(require_userMenu.componentUserMenu, partialTheme);
+	return _emotion_react.css`
 		border-radius: 0;
 		border-style: solid;
 		border-color: ${toggleButton.baseBorderColor};
@@ -81,7 +80,7 @@ const toggleButtonStyles = (partialTheme = {}) => {
 		}
 	`;
 };
-
+//#endregion
 exports.radioGroupLabelStyles = radioGroupLabelStyles;
 exports.toggleButtonRowsGroupStyles = toggleButtonRowsGroupStyles;
 exports.toggleButtonStackedGroupStyles = toggleButtonStackedGroupStyles;