@guardian/stand 0.0.10 → 0.0.12

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

@@ -0,0 +1,522 @@
+import type { ButtonTheme } from '../button/styles';
+export type IconButtonTheme = ButtonTheme;
+export declare const defaultIconButtonTheme: ButtonTheme;
+export declare const iconButtonStyles: (theme: {
+    shared: {
+        display: string;
+        '-webkit-appearance': string;
+        'text-align': string;
+        'box-shadow': string;
+        cursor: string;
+        'justify-content': string;
+        'align-items': string;
+        'text-decoration': string;
+        ':disabled': {
+            cursor: string;
+        };
+        ':focus-visible': {
+            outline: string;
+            'outline-offset': string;
+        };
+    };
+    'emphasised-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;
+            };
+        };
+    };
+    'emphasised-secondary': {
+        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-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': {
+        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;
+            };
+        };
+    };
+}, { size, variant }: Required<Pick<import("../button/types").ButtonProps, "size" | "variant">>, hasIcon?: boolean, isIconButton?: boolean) => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,26 @@
+import type { ButtonProps as RACButtonProps } from 'react-aria-components';
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { IconProps, MaterialSymbol } from '../icon/types';
+import type { IconButtonTheme } from './styles';
+export interface IconButtonProps extends DefaultPropsWithChildren<IconButtonTheme, RACButtonProps['className'], IconProps['children']>, Omit<RACButtonProps, 'children'> {
+    /**
+     * Size variant of the avatar
+     */
+    size?: keyof Omit<IconButtonTheme['emphasised-primary'], 'shared'>;
+    /**
+     * Variant of the button
+     */
+    variant?: keyof Omit<IconButtonTheme, 'shared'>;
+    /**
+     * Alternative to using the `children` prop for rendering Material Symbol icons,
+     * you can use the `symbol` prop to specify the icon by its symbol name.
+     * This is a convenience for font icons, allowing you to simply provide the symbol name in a type-safe way without needing to pass it as a child string.
+     * For example, instead of `<Icon>home</Icon>`, you can use `<Icon symbol="home" />`.
+     * This prop is mutually exclusive with `children` when rendering font icons, and takes precedence over `children` if both are provided.
+     */
+    symbol?: MaterialSymbol;
+    /**
+     * Accessible label for the icon button. Required for accessibility.
+     */
+    ariaLabel: string;
+}

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

@@ -0,0 +1,2 @@
+import type { IconLinkButtonProps } from './types';
+export declare function IconLinkButton({ variant, size, symbol, ariaLabel, theme, cssOverrides, ...props }: IconLinkButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;