@guardian/stand 0.0.9 → 0.0.10

package/dist/components/typography/styles.js

@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+import { componentTypography } from '../../styleD/build/typescript/component/typography.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+import { semanticTypography } from '../../styleD/build/typescript/semantic/typography.js';
+
+const defaultTypographyTheme = componentTypography;
+const typographyStyles = (theme, { variant }) => css`
+	${convertTypographyToEmotionStringStyle(semanticTypography[variant])}
+	color: ${theme.color};
+`;
+
+export { defaultTypographyTheme, typographyStyles };

package/dist/components/user-menu/PreferenceRadioGroup.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var reactAriaComponents = require('react-aria-components');
+var styles = require('./styles.cjs');
+
+function PreferenceRadioGroup({
+  name,
+  options,
+  currentValue,
+  changeValue,
+  theme,
+  format = "stack"
+}) {
+  const groupCss = format === "stack" ? styles.toggleButtonStackedGroupStyles(theme) : styles.toggleButtonRowsGroupStyles(theme);
+  const buttonStyle = format === "stack" ? styles.toggleButtonStyles(theme) : [styles.toggleButtonStyles(theme), react.css({ flexBasis: "30%" })];
+  const defaultOptionId = options.find((option) => option.isDefault)?.id;
+  const selectedKeys = currentValue ? [currentValue] : defaultOptionId ? [defaultOptionId] : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.radioGroupLabelStyles(theme), children: name }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.ToggleButtonGroup,
+      {
+        css: groupCss,
+        selectionMode: "single",
+        orientation: format === "stack" ? "vertical" : "horizontal",
+        selectedKeys,
+        onSelectionChange: (e) => {
+          const newValue = Array.from(e).pop() ?? currentValue;
+          if (typeof newValue === "string") {
+            changeValue(newValue);
+          }
+        },
+        children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          reactAriaComponents.ToggleButton,
+          {
+            id: option.id,
+            css: buttonStyle,
+            style: option.buttonStyle,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: option.labelStyle, children: option.label ?? option.id }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: option.description })
+            ]
+          },
+          index
+        ))
+      }
+    )
+  ] });
+}
+
+exports.PreferenceRadioGroup = PreferenceRadioGroup;

package/dist/components/user-menu/PreferenceRadioGroup.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { ToggleButtonGroup, ToggleButton } from 'react-aria-components';
+import { toggleButtonStackedGroupStyles, toggleButtonRowsGroupStyles, toggleButtonStyles, radioGroupLabelStyles } from './styles.js';
+
+function PreferenceRadioGroup({ name, options, currentValue, changeValue, theme, format = "stack" }) {
+  const groupCss = format === "stack" ? toggleButtonStackedGroupStyles(theme) : toggleButtonRowsGroupStyles(theme);
+  const buttonStyle = format === "stack" ? toggleButtonStyles(theme) : [toggleButtonStyles(theme), css({ flexBasis: "30%" })];
+  const defaultOptionId = options.find((option) => option.isDefault)?.id;
+  const selectedKeys = currentValue ? [currentValue] : defaultOptionId ? [defaultOptionId] : [];
+  return jsxs("label", { children: [jsx("div", { css: radioGroupLabelStyles(theme), children: name }), jsx(ToggleButtonGroup, { css: groupCss, selectionMode: "single", orientation: format === "stack" ? "vertical" : "horizontal", selectedKeys, onSelectionChange: (e) => {
+    const newValue = Array.from(e).pop() ?? currentValue;
+    if (typeof newValue === "string") {
+      changeValue(newValue);
+    }
+  }, children: options.map((option, index) => jsxs(ToggleButton, { id: option.id, css: buttonStyle, style: option.buttonStyle, children: [jsx("div", { style: option.labelStyle, children: option.label ?? option.id }), jsx("div", { children: option.description })] }, index)) })] });
+}
+
+export { PreferenceRadioGroup };

package/dist/components/user-menu/UserMenu.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var TitleText = require('../TitleText.cjs');
+var defaultOptions = require('./default-options.cjs');
+var PreferenceRadioGroup = require('./PreferenceRadioGroup.cjs');
+var styles = require('./styles.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 })
+      }
+    )
+  ] });
+}
+
+exports.UserMenu = UserMenu;

package/dist/components/user-menu/UserMenu.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { TitleText } from '../TitleText.js';
+import { textSizes, fontFamilies, colorSchemes } from './default-options.js';
+import { PreferenceRadioGroup } from './PreferenceRadioGroup.js';
+import { userMenuStyles, userMenuHeadingStyles } from './styles.js';
+
+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 }) })] });
+}
+
+export { UserMenu };

package/dist/components/user-menu/default-options.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+var spacing = require('../../styleD/build/typescript/base/spacing.cjs');
+var typography = require('../../styleD/build/typescript/base/typography.cjs');
+
+const textSizes = [
+  {
+    id: "font-preference-small",
+    label: "Small",
+    description: "Compact reading",
+    labelStyle: {
+      fontSize: typography.baseTypography.size["12-px"]
+    }
+  },
+  {
+    id: "font-preference-medium",
+    label: "Medium",
+    description: "Standard reading",
+    labelStyle: {
+      fontSize: typography.baseTypography.size["16-px"]
+    }
+  },
+  {
+    id: "font-preference-large",
+    label: "Large",
+    description: "Comfortable reading",
+    labelStyle: {
+      fontSize: typography.baseTypography.size["20-px"]
+    }
+  }
+];
+const fontFamilies = [
+  {
+    id: "font-serif",
+    label: "Guardian Text Egyptian",
+    description: "Classic Guardian Serif",
+    labelStyle: {
+      fontFamily: typography.baseTypography.family["Guardian Text Egyptian"],
+      fontSize: typography.baseTypography.size["20-px"]
+    }
+  },
+  {
+    id: "open-sans-compact",
+    label: "Open Sans Compact",
+    description: "compact sans-Serif",
+    labelStyle: {
+      fontFamily: typography.baseTypography.family["Open Sans Compact"],
+      fontSize: typography.baseTypography.size["20-px"]
+    }
+  },
+  {
+    id: "open-sans",
+    label: "Open Sans",
+    description: "Sans-Serif",
+    labelStyle: {
+      fontFamily: typography.baseTypography.family["Open Sans"],
+      fontSize: typography.baseTypography.size["20-px"]
+    }
+  }
+];
+const colorSchemes = [
+  {
+    id: "white",
+    buttonStyle: {
+      backgroundColor: "white",
+      padding: spacing.baseSpacing["10-rem"]
+    },
+    isDefault: true
+  },
+  {
+    id: "cream",
+    buttonStyle: {
+      backgroundColor: "antiquewhite",
+      padding: spacing.baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "green",
+    buttonStyle: {
+      backgroundColor: "lightgreen",
+      padding: spacing.baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "pink",
+    buttonStyle: {
+      backgroundColor: "pink",
+      padding: spacing.baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "blue",
+    buttonStyle: {
+      backgroundColor: "skyblue",
+      padding: spacing.baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "orange",
+    buttonStyle: {
+      backgroundColor: "orange",
+      padding: spacing.baseSpacing["10-rem"]
+    }
+  }
+];
+
+exports.colorSchemes = colorSchemes;
+exports.fontFamilies = fontFamilies;
+exports.textSizes = textSizes;

package/dist/components/user-menu/default-options.js

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

package/dist/components/user-menu/styles.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+var react = require('@emotion/react');
+var userMenu = require('../../styleD/build/typescript/component/userMenu.cjs');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+
+const userMenuStyles = (partialTheme = {}) => {
+  const { container } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		background-color: ${container.backgroundColor};
+		display: flex;
+		flex-direction: column;
+		width: ${container.width};
+		padding-left: ${container.paddingX};
+		padding-right: ${container.paddingX};
+		padding-top: ${container.paddingY};
+		padding-bottom: ${container.paddingY};
+	`;
+};
+const userMenuHeadingStyles = (partialTheme = {}) => {
+  const { heading } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		font-weight: ${heading.fontWeight};
+		font-size: ${heading.fontSize};
+		text-align: ${heading.textAlign};
+		padding-left: ${heading.paddingLeft};
+		padding-right: ${heading.paddingRight};
+		padding-top: ${heading.paddingTop};
+		padding-bottom: ${heading.paddingBottom};
+	`;
+};
+const toggleButtonStackedGroupStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		display: flex;
+		flex-direction: column;
+		gap: ${toggleButton.gap};
+	`;
+};
+const radioGroupLabelStyles = (partialTheme = {}) => {
+  const { label } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		font-weight: ${label.fontWeight};
+		font-size: ${label.fontSize};
+		text-align: ${label.textAlign};
+		padding-left: ${label.paddingLeft};
+		padding-right: ${label.paddingRight};
+		padding-top: ${label.paddingTop};
+		padding-bottom: ${label.paddingBottom};
+	`;
+};
+const toggleButtonRowsGroupStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: ${toggleButton.gap};
+	`;
+};
+const toggleButtonStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		border-radius: 0;
+		border-style: solid;
+		border-color: ${toggleButton.baseBorderColor};
+		background-color: ${toggleButton.baseBackgroundColor};
+
+		&[data-disabled] {
+			background-color: ${toggleButton.disabledBackgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline-offset: 1px;
+			outline: 2px solid blue;
+		}
+
+		&[data-selected] {
+			border-color: ${toggleButton.selectedBorderColor};
+		}
+	`;
+};
+
+exports.radioGroupLabelStyles = radioGroupLabelStyles;
+exports.toggleButtonRowsGroupStyles = toggleButtonRowsGroupStyles;
+exports.toggleButtonStackedGroupStyles = toggleButtonStackedGroupStyles;
+exports.toggleButtonStyles = toggleButtonStyles;
+exports.userMenuHeadingStyles = userMenuHeadingStyles;
+exports.userMenuStyles = userMenuStyles;

package/dist/components/user-menu/styles.js

@@ -0,0 +1,83 @@
+import { css } from '@emotion/react';
+import { componentUserMenu } from '../../styleD/build/typescript/component/userMenu.js';
+import { mergeDeep } from '../../util/mergeDeep.js';
+
+const userMenuStyles = (partialTheme = {}) => {
+  const { container } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		background-color: ${container.backgroundColor};
+		display: flex;
+		flex-direction: column;
+		width: ${container.width};
+		padding-left: ${container.paddingX};
+		padding-right: ${container.paddingX};
+		padding-top: ${container.paddingY};
+		padding-bottom: ${container.paddingY};
+	`;
+};
+const userMenuHeadingStyles = (partialTheme = {}) => {
+  const { heading } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		font-weight: ${heading.fontWeight};
+		font-size: ${heading.fontSize};
+		text-align: ${heading.textAlign};
+		padding-left: ${heading.paddingLeft};
+		padding-right: ${heading.paddingRight};
+		padding-top: ${heading.paddingTop};
+		padding-bottom: ${heading.paddingBottom};
+	`;
+};
+const toggleButtonStackedGroupStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		display: flex;
+		flex-direction: column;
+		gap: ${toggleButton.gap};
+	`;
+};
+const radioGroupLabelStyles = (partialTheme = {}) => {
+  const { label } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		font-weight: ${label.fontWeight};
+		font-size: ${label.fontSize};
+		text-align: ${label.textAlign};
+		padding-left: ${label.paddingLeft};
+		padding-right: ${label.paddingRight};
+		padding-top: ${label.paddingTop};
+		padding-bottom: ${label.paddingBottom};
+	`;
+};
+const toggleButtonRowsGroupStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: ${toggleButton.gap};
+	`;
+};
+const toggleButtonStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		border-radius: 0;
+		border-style: solid;
+		border-color: ${toggleButton.baseBorderColor};
+		background-color: ${toggleButton.baseBackgroundColor};
+
+		&[data-disabled] {
+			background-color: ${toggleButton.disabledBackgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline-offset: 1px;
+			outline: 2px solid blue;
+		}
+
+		&[data-selected] {
+			border-color: ${toggleButton.selectedBorderColor};
+		}
+	`;
+};
+
+export { radioGroupLabelStyles, toggleButtonRowsGroupStyles, toggleButtonStackedGroupStyles, toggleButtonStyles, userMenuHeadingStyles, userMenuStyles };

package/dist/fonts/MaterialSymbolsOutlined.css

@@ -0,0 +1,23 @@
+@font-face {
+	font-family: 'Material Symbols Outlined';
+	font-style: normal;
+	font-weight: 400;
+	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-outlined-20260218.woff2)
+		format('woff2');
+}
+
+.material-symbols {
+	font-family: 'Material Symbols Outlined';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	-webkit-font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
+}

package/dist/fonts/MaterialSymbolsRound.css

@@ -0,0 +1,23 @@
+@font-face {
+	font-family: 'Material Symbols Round';
+	font-style: normal;
+	font-weight: 400;
+	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-round-20260218.woff2)
+		format('woff2');
+}
+
+.material-symbols {
+	font-family: 'Material Symbols Round';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	-webkit-font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
+}

package/dist/fonts/MaterialSymbolsSharp.css

@@ -0,0 +1,23 @@
+@font-face {
+	font-family: 'Material Symbols Sharp';
+	font-style: normal;
+	font-weight: 400;
+	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-sharp-20260218.woff2)
+		format('woff2');
+}
+
+.material-symbols {
+	font-family: 'Material Symbols Sharp';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	-webkit-font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
+}