@guardian/stand 0.0.9 → 0.0.11

package/dist/components/icon-link-button/IconLinkButton.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Icon = require('../icon/Icon.cjs');
+var styles = require('./styles.cjs');
+
+function IconLinkButton({
+  variant = "emphasised-primary",
+  size = "md",
+  symbol,
+  ariaLabel,
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultIconLinkButtonTheme, theme);
+  const linkRef = react.useRef(null);
+  react.useEffect(() => {
+    if (linkRef.current) {
+      linkRef.current.title = ariaLabel;
+    }
+  }, [ariaLabel]);
+  const iconSize = size === "xs" ? "sm" : size;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Link,
+    {
+      ...props,
+      ref: linkRef,
+      "aria-label": ariaLabel,
+      css: [
+        styles.iconLinkButtonStyles(
+          mergedTheme,
+          { variant, size },
+          false,
+          true
+        ),
+        cssOverrides
+      ],
+      children: reactAriaComponents.composeRenderProps(props.children, (children) => /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, symbol, children }))
+    }
+  );
+}
+
+exports.IconLinkButton = IconLinkButton;

package/dist/components/icon-link-button/IconLinkButton.js

@@ -0,0 +1,23 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { Link, composeRenderProps } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Icon } from '../icon/Icon.js';
+import { iconLinkButtonStyles, defaultIconLinkButtonTheme } from './styles.js';
+
+function IconLinkButton({ variant = "emphasised-primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultIconLinkButtonTheme, theme);
+  const linkRef = useRef(null);
+  useEffect(() => {
+    if (linkRef.current) {
+      linkRef.current.title = ariaLabel;
+    }
+  }, [ariaLabel]);
+  const iconSize = size === "xs" ? "sm" : size;
+  return jsx(Link, { ...props, ref: linkRef, "aria-label": ariaLabel, css: [
+    iconLinkButtonStyles(mergedTheme, { variant, size }, false, true),
+    cssOverrides
+  ], children: composeRenderProps(props.children, (children) => jsx(Icon, { size: iconSize, symbol, children })) });
+}
+
+export { IconLinkButton };

package/dist/components/icon-link-button/styles.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styles = require('../button/styles.cjs');
+
+const defaultIconLinkButtonTheme = styles.defaultButtonTheme;
+const iconLinkButtonStyles = styles.buttonStyles;
+
+exports.defaultIconLinkButtonTheme = defaultIconLinkButtonTheme;
+exports.iconLinkButtonStyles = iconLinkButtonStyles;

package/dist/components/icon-link-button/styles.js

@@ -0,0 +1,6 @@
+import { buttonStyles, defaultButtonTheme } from '../button/styles.js';
+
+const defaultIconLinkButtonTheme = defaultButtonTheme;
+const iconLinkButtonStyles = buttonStyles;
+
+export { defaultIconLinkButtonTheme, iconLinkButtonStyles };

package/dist/components/link-button/LinkButton.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Icon = require('../icon/Icon.cjs');
+var styles = require('./styles.cjs');
+
+function LinkButton({
+  variant = "emphasised-primary",
+  size = "md",
+  theme = {},
+  cssOverrides,
+  icon,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultLinkButtonTheme, theme);
+  const iconSize = size === "xs" ? "sm" : size;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Link,
+    {
+      ...props,
+      css: [
+        styles.linkButtonStyles(mergedTheme, { variant, size }, !!icon),
+        cssOverrides
+      ],
+      children: reactAriaComponents.composeRenderProps(props.children, (children) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: icon }),
+        children
+      ] }))
+    }
+  );
+}
+
+exports.LinkButton = LinkButton;

package/dist/components/link-button/LinkButton.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { Link, composeRenderProps } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Icon } from '../icon/Icon.js';
+import { linkButtonStyles, defaultLinkButtonTheme } from './styles.js';
+
+function LinkButton({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
+  const mergedTheme = mergeDeep(defaultLinkButtonTheme, theme);
+  const iconSize = size === "xs" ? "sm" : size;
+  return jsx(Link, { ...props, css: [
+    linkButtonStyles(mergedTheme, { variant, size }, !!icon),
+    cssOverrides
+  ], children: composeRenderProps(props.children, (children) => jsxs(Fragment, { children: [icon && jsx(Icon, { size: iconSize, children: icon }), children] })) });
+}
+
+export { LinkButton };

package/dist/components/link-button/styles.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styles = require('../button/styles.cjs');
+
+const defaultLinkButtonTheme = styles.defaultButtonTheme;
+const linkButtonStyles = styles.buttonStyles;
+
+exports.defaultLinkButtonTheme = defaultLinkButtonTheme;
+exports.linkButtonStyles = linkButtonStyles;

package/dist/components/link-button/styles.js

@@ -0,0 +1,6 @@
+import { buttonStyles, defaultButtonTheme } from '../button/styles.js';
+
+const defaultLinkButtonTheme = defaultButtonTheme;
+const linkButtonStyles = buttonStyles;
+
+export { defaultLinkButtonTheme, linkButtonStyles };

package/dist/components/typography/Typography.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var react = require('@emotion/react');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+
+const Typography = ({
+  element = "span",
+  variant = "body-md",
+  children,
+  cssOverrides,
+  theme = {},
+  ...props
+}) => {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTypographyTheme, theme);
+  return react.jsx(
+    element,
+    {
+      css: [styles.typographyStyles(mergedTheme, { variant }), cssOverrides],
+      ...props
+    },
+    children
+  );
+};
+
+exports.Typography = Typography;

package/dist/components/typography/Typography.js

@@ -0,0 +1,13 @@
+import { jsx } from '@emotion/react';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { typographyStyles, defaultTypographyTheme } from './styles.js';
+
+const Typography = ({ element = "span", variant = "body-md", children, cssOverrides, theme = {}, ...props }) => {
+  const mergedTheme = mergeDeep(defaultTypographyTheme, theme);
+  return jsx(element, {
+    css: [typographyStyles(mergedTheme, { variant }), cssOverrides],
+    ...props
+  }, children);
+};
+
+export { Typography };

package/dist/components/typography/styles.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var react = require('@emotion/react');
+var typography$2 = require('../../styleD/build/typescript/component/typography.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+var typography$1 = require('../../styleD/build/typescript/semantic/typography.cjs');
+
+const defaultTypographyTheme = typography$2.componentTypography;
+const typographyStyles = (theme, { variant }) => react.css`
+	${typography.convertTypographyToEmotionStringStyle(typography$1.semanticTypography[variant])}
+	color: ${theme.color};
+`;
+
+exports.defaultTypographyTheme = defaultTypographyTheme;
+exports.typographyStyles = typographyStyles;

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 };