@guardian/stand 0.0.15 → 0.0.17

package/dist/types/components/topbar/topBarNavigation/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "TopBarNavigation";
+export declare const componentTsx = "import { TopBarNavigation } from '@guardian/stand/TopBar';\n\nexport const Component = () => (\n\t<TopBarNavigation text=\"Recipe\" icon=\"yakitori\" />\n);\n";
+export declare const componentCss = "\n/* import the topbarnavigation styles */\n@import '@guardian/stand/component/TopBar.css';\n\n.stand-top-bar-navigation {\n\tdisplay: var(--component-top-bar-navigation-shared-display);\n\talign-items: var(--component-top-bar-navigation-shared-align-items);\n\tcolor: var(--component-top-bar-navigation-unselected-color);\n\theight: var(--component-top-bar-navigation-shared-height);\n\tpadding-top: var(--component-top-bar-navigation-shared-padding-top);\n\tpadding-right: var(--component-top-bar-navigation-shared-padding-right);\n\tpadding-bottom: var(--component-top-bar-navigation-shared-padding-bottom);\n\tpadding-left: var(--component-top-bar-navigation-shared-padding-left);\n\ttext-decoration: var(--component-top-bar-navigation-shared-text-decoration);\n\n\tborder-top: var(--component-top-bar-navigation-shared-border-top);\n\tborder-bottom: var(--component-top-bar-navigation-unselected-border-bottom);\n\n\t&[data-hovered],\n\t&:hover {\n\t\tborder-bottom: var(--component-top-bar-navigation-selected-border-bottom);\n\t\tcursor: var(--component-top-bar-navigation-shared-cursor);\n\t}\n\n\t&[data-focus-visible],\n\t&:focus-visible {\n\t\toutline: var(--component-top-bar-navigation-shared-focus-visible-outline);\n\t\tborder-bottom: var(--component-top-bar-navigation-selected-border-bottom);\n\t\toutline-offset: var(--component-top-bar-navigation-shared-focus-visible-outline-offset);\n\t}\n\n\t&[data-disabled] {\n\t\tcursor: var(--component-top-bar-navigation-shared-disabled-cursor);\n\t\tcolor: var(--component-top-bar-navigation-shared-disabled-color);\n\t}\n\n\tfont: var(--component-top-bar-navigation-md-typography-font);\n\tletter-spacing: var(--component-top-bar-navigation-md-typography-letter-spacing);\n\tfont-variation-settings: 'wdth'\n\t\tvar(--component-top-bar-navigation-md-typography-font-width);\n}\n\n.stand-navigation-text {\n\tmargin-left: var(--component-top-bar-navigation-text-margin-left);\n}\n\n.stand-expand-more {\n\tmargin-top: var(--component-top-bar-navigation-expand-more-padding-top);\n\tmargin-left: var(--component-top-bar-navigation-expand-more-padding-left);\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<span class=\"stand-top-bar-navigation\">\n\t\t<span class=\"material-symbols \" >file_upload</span>\n\t\t<span class=\"stand-navigation-text\">Navigation</span>\n\t\t<div class=\"stand-expand-more\">\n\t\t\t<span class=\"material-symbols\" >keyboard_arrow_down</span>\n\t\t</div>\n\t</span>\n</div>\n";
+export declare const componentJs = "\nimport { componentTopBar } from \"@guardian/stand\";\n\nconst style = `\n\tdisplay: ${componentTopBar.Navigation.shared.display};\n\talign-items: ${componentTopBar.Navigation.shared['align-items']};\n\tcolor: ${componentTopBar.Navigation.unselected.color};\n\theight: ${componentTopBar.Navigation.shared.height};\n\tpadding-top: ${componentTopBar.Navigation.shared.padding.top};\n\tpadding-right: ${componentTopBar.Navigation.shared.padding.right};\n\tpadding-bottom: ${componentTopBar.Navigation.shared.padding.bottom};\n\tpadding-left: ${componentTopBar.Navigation.shared.padding.left};\n\ttext-decoration: ${componentTopBar.Navigation.shared['text-decoration']};\n\n\tfont: ${componentTopBar.Navigation.md.typography.font};\n\tletter-spacing: ${componentTopBar.Navigation.md.typography.letterSpacing};\n\tfont-variation-settings: 'wdth'\n\t\t${componentTopBar.Navigation.md.typography.fontWidth};\n\n\t&:hover {\n\t\tborder-bottom: ${componentTopBar.Navigation.selected['border-bottom']};\n\t\tcursor: ${componentTopBar.Navigation.shared.cursor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentTopBar.Navigation.shared[':focus-visible'].outline};\n\t\tborder-bottom: ${componentTopBar.Navigation.selected['border-bottom']};\n\t\toutline-offset: ${componentTopBar.Navigation.shared[':focus-visible']['outline-offset']};\n\t}\n\n\t&[data-disabled] {\n\t\tcursor: ${componentTopBar.Navigation.shared[':disabled'].cursor};\n\t\tcolor: ${componentTopBar.Navigation.shared[':disabled'].color};\n\t}\n`;\n\nconst textStyle = `margin-left: ${componentTopBar.Navigation.text.margin.left};\n`;\n\nconst expandMoreStyle = `\n\tmargin-top: ${componentTopBar.Navigation.menuIndicator.margin.top};\n\tmargin-left: ${componentTopBar.Navigation.menuIndicator.margin.left};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<span style=\"${style}\">\n\t\t<span class=\"material-symbols\">file_upload</span>\n\t\t<span style=\"${textStyle}\">Navigation</span>\n\t\t<div style=\"${expandMoreStyle}\">\n\t\t\t<span class=\"material-symbols\">keyboard_arrow_down</span>\n\t\t</div>\n\t</span>\n`;\n";

package/dist/types/components/topbar/topBarNavigation/styles.d.ts

@@ -0,0 +1,12 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentTopBar } from '../../../styleD/build/typescript/component/TopBar';
+import type { DeepPartial, Prettify } from '../../../util/types';
+import type { TopBarNavigationProps } from './types';
+export type TopBarNavigationTheme = Prettify<ComponentTopBar['Navigation']>;
+export type PartialTopBarNavigationTheme = DeepPartial<TopBarNavigationTheme>;
+export declare const defaultTopBarNavigationTheme: TopBarNavigationTheme;
+export declare const topBarNavigationStyles: (theme: TopBarNavigationTheme, selected: boolean) => SerializedStyles;
+export declare const topBarNavigationDividerStyles: (theme: TopBarNavigationTheme, { alignment }: Required<Pick<TopBarNavigationProps, 'alignment'>>) => SerializedStyles;
+export declare const topBarNavigationTextStyles: (theme: TopBarNavigationTheme) => SerializedStyles;
+export declare const topBarNavigationTypographyStyles: (theme: TopBarNavigationTheme, size: 'md' | 'sm') => SerializedStyles;
+export declare const topBarMenuIndicatorStyles: (theme: TopBarNavigationTheme) => SerializedStyles;

package/dist/types/components/topbar/topBarNavigation/types.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import type { PressEvent } from 'react-aria-components';
+import type { DefaultProps } from '../../../util/types';
+import type { IconProps } from '../../icon/types';
+import type { TopBarNavigationTheme } from './styles';
+export interface TopBarNavigationProps extends DefaultProps<TopBarNavigationTheme> {
+    /**
+     * Text to display in navigation
+     */
+    text: string;
+    /**
+     * Size of the text and icons
+     */
+    size?: 'md' | 'sm';
+    /**
+     * Whether the component is the currently selected navigation
+     */
+    isSelected?: boolean;
+    /**
+     * Icon to display in navigation
+     */
+    icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+    /**
+     * Menu sections and items to render in the dropdown menu - only children of type MenuSection and MenuItem will be rendered.
+     * `href` and `onPress` will be ignored if this prop is supplied.
+     */
+    menuChildren?: ReactNode;
+    /**
+     * Link to navigate to
+     */
+    href?: string;
+    /**
+     * Handler for navigation on press
+     */
+    onPress?: (e: PressEvent) => void;
+    /**
+     * Whether the navigation is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Determines the alignment of the item within the top bar
+     */
+    alignment?: 'left' | 'right';
+}

package/dist/types/components/topbar/{toolName → topBarToolName}/styles.d.ts

@@ -1,7 +1,8 @@
 import type { SerializedStyles } from '@emotion/react';
 import { type ComponentTopBar } from '../../..//styleD/build/typescript/component/TopBar';
-import type { Prettify } from '../../../util/types';
+import type { DeepPartial, Prettify } from '../../../util/types';
 export type TopBarToolNameTheme = Prettify<ComponentTopBar['ToolName']>;
+export type PartialTopBarToolNameTheme = DeepPartial<TopBarToolNameTheme>;
 export declare const defaultToolNameTheme: TopBarToolNameTheme;
 export declare const toolNameStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const toolNameTypography: (theme: TopBarToolNameTheme) => SerializedStyles;

package/dist/types/components/topbar/types.d.ts

@@ -0,0 +1,3 @@
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { TopBarTheme } from './styles';
+export type TopBarProps = DefaultPropsWithChildren<TopBarTheme>;

package/dist/types/components/typography/styles.d.ts

@@ -1,7 +1,8 @@
 import type { SerializedStyles } from '@emotion/react';
 import { type ComponentTypography } from '../../styleD/build/typescript/component/typography';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 import type { TypographyProps } from './types';
 export type TypographyTheme = Prettify<ComponentTypography>;
+export type PartialTypographyTheme = DeepPartial<TypographyTheme>;
 export declare const defaultTypographyTheme: TypographyTheme;
 export declare const typographyStyles: (theme: TypographyTheme, { variant }: Required<Pick<TypographyProps, 'variant'>>) => SerializedStyles;

package/dist/types/favicon.d.ts

@@ -14,6 +14,6 @@
  */
 export { Favicon } from './components/favicon/Favicon';
 export type { FaviconProps } from './components/favicon/types';
-export type { FaviconTheme } from './components/favicon/styles';
+export type { PartialFaviconTheme as FaviconTheme } from './components/favicon/styles';
 export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';

package/dist/types/icon-button.d.ts

@@ -17,4 +17,4 @@
  */
 export { IconButton } from './components/icon-button/IconButton';
 export type { IconButtonProps } from './components/icon-button/types';
-export type { IconButtonTheme } from './components/icon-button/styles';
+export type { PartialIconButtonTheme as IconButtonTheme } from './components/icon-button/styles';

package/dist/types/icon-link-button.d.ts

@@ -17,4 +17,4 @@
  */
 export { IconLinkButton } from './components/icon-link-button/IconLinkButton';
 export type { IconLinkButtonProps } from './components/icon-link-button/types';
-export type { IconLinkButtonTheme } from './components/icon-link-button/styles';
+export type { PartialIconLinkButtonTheme as IconLinkButtonTheme } from './components/icon-link-button/styles';

package/dist/types/icon.d.ts

@@ -22,6 +22,6 @@
  */
 export { Icon } from './components/icon/Icon';
 export type { IconProps } from './components/icon/types';
-export type { IconTheme } from './components/icon/styles';
+export type { PartialIconTheme as IconTheme } from './components/icon/styles';
 export { componentIcon } from './styleD/build/typescript/component/icon';
 export type { ComponentIcon } from './styleD/build/typescript/component/icon';

package/dist/types/index.d.ts

@@ -26,6 +26,8 @@ export { componentIcon } from './styleD/build/typescript/component/icon';
 export type { ComponentIcon } from './styleD/build/typescript/component/icon';
 export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
+export { componentMenu } from './styleD/build/typescript/component/menu';
+export type { ComponentMenu } from './styleD/build/typescript/component/menu';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar';
 export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
 /**
@@ -50,3 +52,5 @@ export { semanticTypography } from './styleD/build/typescript/semantic/typograph
 export type { SemanticTypography } from './styleD/build/typescript/semantic/typography';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing';
 export type { SemanticSizing } from './styleD/build/typescript/semantic/sizing';
+export { semanticShadow } from './styleD/build/typescript/semantic/shadow';
+export type { SemanticShadow } from './styleD/build/typescript/semantic/shadow';

package/dist/types/link-button.d.ts

@@ -17,4 +17,4 @@
  */
 export { LinkButton } from './components/link-button/LinkButton';
 export type { LinkButtonProps } from './components/link-button/types';
-export type { LinkButtonTheme } from './components/link-button/styles';
+export type { PartialLinkButtonTheme as LinkButtonTheme } from './components/link-button/styles';

package/dist/types/menu.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Menu component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ * - `react-aria-components`
+ * - `@react-aria/focus`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/menu.css),
+ * you don't need to install these.
+ */
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuToggle, } from './components/menu/Menu';
+export type { MenuProps, MenuItemProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, MenuPopoverProps as PopoverProps, } from './components/menu/types';
+export type { PartialMenuTheme as MenuTheme, PartialMenuItemTheme as MenuItemTheme, PartialMenuSectionTheme as MenuSectionTheme, PartialMenuSeparatorTheme as MenuSeparatorTheme, PartialMenuPopoverTheme as MenuPopoverTheme, } from './components/menu/styles';
+export { componentMenu } from './styleD/build/typescript/component/menu';
+export type { ComponentMenu } from './styleD/build/typescript/component/menu';

package/dist/types/styleD/build/typescript/base/typography.d.ts

@@ -33,13 +33,13 @@ export declare const baseTypography: {
         readonly '48-rem': "3rem";
     };
     readonly weight: {
-        readonly 'Guardian Headline': {
-            readonly bold: 700;
-        };
         readonly 'Guardian Text Egyptian': {
             readonly normal: 400;
             readonly bold: 700;
         };
+        readonly 'Guardian Headline': {
+            readonly bold: 700;
+        };
         readonly 'Open Sans': {
             readonly light: 340;
             readonly normal: 460;

package/dist/types/styleD/build/typescript/component/TopBar.d.ts

@@ -2,6 +2,100 @@
  * Do not edit directly, this file was auto-generated.
  */
 export declare const componentTopBar: {
+    'background-color': string;
+    display: string;
+    height: string;
+    'justify-content': string;
+    border: string;
+    Item: {
+        display: string;
+        'align-items': string;
+        height: string;
+        sm: {
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+        };
+        md: {
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+        };
+        lg: {
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+        };
+        border: string;
+    };
+    Navigation: {
+        shared: {
+            display: string;
+            position: string;
+            'align-items': string;
+            cursor: string;
+            'text-decoration': string;
+            height: string;
+            ':disabled': {
+                cursor: string;
+                color: string;
+            };
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            ':focus-visible': {
+                outline: string;
+                'outline-offset': string;
+            };
+            'border-top': string;
+            divider: string;
+        };
+        text: {
+            margin: {
+                left: string;
+            };
+        };
+        menuIndicator: {
+            margin: {
+                top: string;
+                left: string;
+            };
+        };
+        selected: {
+            color: string;
+            'border-bottom': string;
+        };
+        unselected: {
+            color: string;
+            'border-bottom': string;
+        };
+        md: {
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        sm: {
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+    };
     ToolName: {
         display: string;
         'align-items': string;

package/dist/types/styleD/build/typescript/component/button.d.ts

@@ -19,7 +19,7 @@ export declare const componentButton: {
             'outline-offset': string;
         };
     };
-    'emphasised-primary': {
+    primary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -144,7 +144,7 @@ export declare const componentButton: {
             };
         };
     };
-    'emphasised-secondary': {
+    secondary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -269,132 +269,7 @@ export declare const componentButton: {
             };
         };
     };
-    'neutral-primary': {
-        shared: {
-            color: string;
-            backgroundColor: string;
-            borderRadius: string;
-            border: string;
-            ':hover': {
-                backgroundColor: string;
-                border: string;
-            };
-            ':active': {
-                backgroundColor: string;
-                border: string;
-            };
-            ':disabled': {
-                color: string;
-                backgroundColor: string;
-                border: string;
-            };
-        };
-        xs: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        sm: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        md: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        lg: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-    };
-    'neutral-secondary': {
+    tertiary: {
         shared: {
             color: string;
             backgroundColor: string;

package/dist/types/styleD/build/typescript/component/menu.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentMenu: {
+    menu: {
+        shared: {
+            display: string;
+            'flex-direction': string;
+            'background-color': string;
+            border: string;
+        };
+    };
+    menuSection: {
+        header: {
+            shared: {
+                display: string;
+                'align-items': string;
+                padding: {
+                    top: string;
+                    right: string;
+                    bottom: string;
+                    left: string;
+                };
+                'background-color': string;
+                color: string;
+            };
+            sm: {
+                height: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+            md: {
+                height: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+        };
+    };
+    menuItem: {
+        shared: {
+            display: string;
+            'grid-template-areas': string;
+            'grid-template-areas-with-description': string;
+            'grid-template-columns': string;
+            gap: string;
+            'align-items': string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            'border-bottom': string;
+            'background-color': string;
+            icon: {
+                'grid-area': string;
+                'align-self': string;
+                color: string;
+            };
+            label: {
+                'grid-area': string;
+                color: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+            description: {
+                'grid-area': string;
+                color: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+            aside: {
+                'grid-area': string;
+                'justify-self': string;
+                'align-self': string;
+                color: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+            ':last-child': {
+                'border-bottom': string;
+            };
+            ':hover': {
+                'background-color': string;
+            };
+            ':focus-visible': {
+                outline: string;
+                'outline-offset': string;
+            };
+        };
+        sm: {
+            icon: {
+                size: string;
+                'line-height': number;
+            };
+        };
+        md: {
+            icon: {
+                size: string;
+                'line-height': number;
+            };
+        };
+    };
+    menuSeparator: {
+        shared: {
+            'background-color': string;
+            height: string;
+            width: string;
+        };
+    };
+    menuPopover: {
+        shared: {
+            overflow: string;
+            shadow: string;
+        };
+        sm: {
+            'max-width': string;
+            width: string;
+        };
+        md: {
+            'max-width': string;
+            width: string;
+        };
+    };
+};
+export type ComponentMenu = typeof componentMenu;