@guardian/stand 0.0.27 → 0.0.28

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { DefaultProps } from '../../../util/types';
 import type { TopBarItemTheme } from './styles';
-export interface TopBarItemProps extends DefaultProps<TopBarItemTheme> {
+export interface TopBarItemProps extends DefaultProps<TopBarItemTheme>, React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     /**
      * Determines the alignment of the item within the top bar
@@ -11,4 +11,9 @@ export interface TopBarItemProps extends DefaultProps<TopBarItemTheme> {
      * Determines how much width the item takes up in the top bar, defaults to `'md'`
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * This is an internal prop used to determine if the item is within an open menu, which affects the styling of the item.
+     * It is not intended to be set by consumers of the component.
+     */
+    _menuOpen?: boolean;
 }

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

@@ -1,2 +1,2 @@
 import type { TopBarNavigationProps } from './types';
-export declare function TopBarNavigation({ text, size, isSelected, icon, menuChildren, href, onPress, isDisabled, alignment, theme, cssOverrides, className, ...props }: TopBarNavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function TopBarNavigation({ text, size, isSelected, icon, menuChildren, href, onPress, isDisabled, alignment, theme, cssOverrides, className, _menuOpen, ...props }: TopBarNavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -5,8 +5,8 @@ import type { TopBarNavigationProps } from './types';
 export type TopBarNavigationTheme = Prettify<ComponentTopBar['Navigation']>;
 export type PartialTopBarNavigationTheme = Prettify<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 topBarNavigationStyles: (theme: TopBarNavigationTheme, selected: boolean, _menuOpen?: boolean) => SerializedStyles;
+export declare const topBarNavigationDividerStyles: (theme: TopBarNavigationTheme, { alignment }: Required<Pick<TopBarNavigationProps, 'alignment'>>, _menuOpen?: boolean) => 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

@@ -41,4 +41,9 @@ export interface TopBarNavigationProps extends DefaultProps<TopBarNavigationThem
      * Determines the alignment of the item within the top bar
      */
     alignment?: 'left' | 'right';
+    /**
+     * This is an internal prop used to determine if the item is within an open menu, which affects the styling of the item.
+     * It is not intended to be set by consumers of the component.
+     */
+    _menuOpen?: boolean;
 }

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

@@ -1,2 +1,2 @@
 import type { TopBarToolNameProps } from './types';
-export declare const TopBarToolName: (props: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TopBarToolName: ({ collapseBelow, theme, ...props }: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,16 @@
 import type { SerializedStyles } from '@emotion/react';
 import { type ComponentTopBar } from '../../..//styleD/build/typescript/component/TopBar';
 import type { DeepPartial, Prettify } from '../../../util/types';
+import type { TopBarToolNameProps } from './types';
 export type TopBarToolNameTheme = Prettify<ComponentTopBar['ToolName']>;
 export type PartialTopBarToolNameTheme = Prettify<DeepPartial<TopBarToolNameTheme>>;
 export declare const defaultToolNameTheme: TopBarToolNameTheme;
-export declare const toolNameHoverLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
+export declare const toolNameHoverLinkStyles: (theme: TopBarToolNameTheme, { collapseBelow }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
+export declare const toolNameHoverLinkTextExpandedStyles: ({ collapseBelow, }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
+export declare const toolNameHoverLinkTextCollapsedStyles: ({ collapseBelow, }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
 export declare const toolNameLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const toolNameStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
-export declare const toolNameTypography: (theme: TopBarToolNameTheme) => SerializedStyles;
-export declare const dividerStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
-export declare const subsectionStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
+export declare const toolNameTypography: (theme: TopBarToolNameTheme, { collapseBelow }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
+export declare const dividerStyles: (theme: TopBarToolNameTheme, { collapseBelow }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
+export declare const subsectionStyles: (theme: TopBarToolNameTheme, { collapseBelow }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
 export declare const subsectionTypography: (theme: TopBarToolNameTheme) => SerializedStyles;

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

@@ -1,4 +1,5 @@
 import type { LinkProps as RACLinkProps } from 'react-aria-components';
+import type { Breakpoint } from '../../../styleD/utils/semantic/mq';
 import type { DefaultProps } from '../../../util/types';
 import type { FaviconProps } from '../../favicon/types';
 import type { IconProps } from '../../icon/types';
@@ -12,6 +13,10 @@ export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme, R
      * Icon to display
      */
     favicon: FaviconProps;
+    /**
+     * The breakpoint at which the tool name section collapses to only show the favicon. Can be set to any valid breakpoint (e.g. 'sm', 'md', 'lg', etc.).
+     */
+    collapseBelow?: Breakpoint;
     /**
      * The subsection or type of content that is represented on the page (optional)
      * */
@@ -23,6 +28,13 @@ export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme, R
     /**
      * Text to display on hover, labels the link
      * e.g. 'Back to dashboard'
+     * If not provided, `collapsedHoverText` will be used for both expanded and collapsed states
      */
     hoverText?: string;
+    /**
+     * Shorter text to display on hover when collapsed, labels the link
+     * e.g. 'Back' or 'Home'
+     * If not provided, `hoverText` will be used for both expanded and collapsed states
+     */
+    collapsedHoverText?: string;
 }

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

@@ -1,3 +1,12 @@
+import type { Breakpoint } from '../../styleD/utils/semantic/mq';
 import type { DefaultPropsWithChildren } from '../../util/types';
 import type { TopBarTheme } from './styles';
-export type TopBarProps = DefaultPropsWithChildren<TopBarTheme>;
+export type TopBarProps = DefaultPropsWithChildren<TopBarTheme> & {
+    /**
+     * Will collapse the designated section of the top bar below the specified breakpoint. For example, if `toolName` is set to `lg`, the section will collapse at the `md` breakpoint and below (i.e. on smaller screens).
+     */
+    collapseBelow?: {
+        toolName?: Breakpoint;
+        containerLeft?: Breakpoint;
+    };
+};

package/dist/types/index.d.ts

@@ -70,3 +70,5 @@ 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';
+export { semanticBreakpoints } from './styleD/build/typescript/semantic/breakpoints';
+export type { SemanticBreakpoints } from './styleD/build/typescript/semantic/breakpoints';

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

@@ -7,6 +7,30 @@ export declare const componentTopBar: {
     height: string;
     'justify-content': string;
     border: string;
+    spacer: {
+        'margin-left': string;
+    };
+    collapsedNavMenu: {
+        button: {
+            margin: string;
+            padding: string;
+            background: string;
+            border: string;
+            cursor: string;
+            hovered: {
+                'background-color': string;
+            };
+            active: {
+                'background-color': string;
+            };
+        };
+        popover: {
+            left: string;
+            top: string;
+            'background-color': string;
+            border: string;
+        };
+    };
     Item: {
         display: string;
         'align-items': string;
@@ -61,6 +85,13 @@ export declare const componentTopBar: {
             };
             'border-top': string;
             divider: string;
+            _menuOpen: {
+                width: string;
+                height: string;
+                selected: {
+                    'background-color': string;
+                };
+            };
         };
         text: {
             margin: {
@@ -149,6 +180,11 @@ export declare const componentTopBar: {
                 outline: string;
                 'outline-offset': string;
             };
+            collapsed: {
+                paddingLeft: string;
+                paddingRight: string;
+                'justify-content': string;
+            };
         };
     };
 };

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

@@ -29,9 +29,6 @@ export declare const componentForm: {
             };
         };
         sm: {
-            container: {
-                'max-width': string;
-            };
             label: {
                 typography: {
                     font: string;
@@ -41,9 +38,6 @@ export declare const componentForm: {
             };
         };
         md: {
-            container: {
-                'max-width': string;
-            };
             label: {
                 typography: {
                     font: string;

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

@@ -3,7 +3,6 @@
  */
 export declare const componentSelect: {
     shared: {
-        maxWidth: string;
         width: string;
         hover: {
             backgroundColor: string;

package/dist/types/styleD/build/typescript/semantic/breakpoints.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const semanticBreakpoints: {
+    sm: {
+        min: string;
+        max: string;
+    };
+    md: {
+        min: string;
+        max: string;
+    };
+    lg: {
+        min: string;
+        max: string;
+    };
+    xl: {
+        min: string;
+        max: string;
+    };
+    max: {
+        min: string;
+        max: string;
+    };
+    maxplus: {
+        min: string;
+        max: string;
+    };
+};
+export type SemanticBreakpoints = typeof semanticBreakpoints;

package/dist/types/styleD/build/typescript/semantic/colors.d.ts

@@ -54,6 +54,10 @@ export declare const semanticColors: {
         'weak-hover': string;
         'weak-pressed': string;
         disabled: string;
+        'disabled-inverse': string;
+        link: string;
+        'link-hover': string;
+        'link-pressed': string;
         'green-weak': string;
         'blue-weak': string;
         'red-weak': string;

package/dist/types/styleD/stories/semantic/Breakpoints.d.ts

@@ -0,0 +1,15 @@
+export declare const SemanticBreakpointTokens: () => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Demonstrates `from` - each card becomes highlighted once the viewport
+ * reaches or exceeds that breakpoint's minimum width.
+ */
+export declare const FromDemo: () => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Demonstrates `until` - each box is only visible below the named breakpoint.
+ */
+export declare const UntilDemo: () => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Demonstrates `between` - each box is highlighted only when the viewport
+ * falls within the stated range.
+ */
+export declare const BetweenDemo: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/styleD/utils/semantic/mq.d.ts

@@ -0,0 +1,61 @@
+import { semanticBreakpoints } from '../../build/typescript/semantic/breakpoints';
+export type Breakpoint = keyof typeof semanticBreakpoints;
+/**
+ * Returns a `min-width` media query string for the given breakpoint.
+ * Use to apply styles at that breakpoint and above.
+ *
+ * @example
+ * const styles = css`
+ * 	 display: none;
+ *   ${from.md} {
+ *     display: block;
+ *   }
+ * `;
+ */
+export declare const from: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus", string>;
+/**
+ * Returns a `max-width` media query string for everything *below* the given
+ * breakpoint (exclusive). Use to apply styles only on screens smaller than
+ * where that breakpoint starts.
+ *
+ * @example
+ * const styles = css`
+ *   display: block;
+ *   ${until.lg} {
+ *     display: none;
+ *   }
+ * `;
+ */
+export declare const until: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus", string>;
+/**
+ * Returns a combined `min-width` and `max-width` media query string for
+ * the range starting at breakpoint A up to (but not including) breakpoint B.
+ *
+ * @example
+ * const styles = css`
+ *   display: none;
+ *   ${between.md.and.lg} {
+ *     display: block;
+ *   }
+ * `;
+ */
+export declare const between: {
+    sm: {
+        and: Record<"md" | "lg" | "xl" | "max" | "maxplus", string>;
+    };
+    md: {
+        and: Record<"sm" | "lg" | "xl" | "max" | "maxplus", string>;
+    };
+    lg: {
+        and: Record<"sm" | "md" | "xl" | "max" | "maxplus", string>;
+    };
+    xl: {
+        and: Record<"sm" | "md" | "lg" | "max" | "maxplus", string>;
+    };
+    max: {
+        and: Record<"sm" | "md" | "lg" | "xl" | "maxplus", string>;
+    };
+    maxplus: {
+        and: Record<"sm" | "md" | "lg" | "xl" | "max", string>;
+    };
+};

package/dist/types/styleD/utils/semantic/mq.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/util/useResize.d.ts

@@ -0,0 +1 @@
+export declare const useResize: (callback: () => void, debounceMs?: number) => void;

package/dist/types/utils.d.ts

@@ -5,3 +5,4 @@
  */
 export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle, } from './styleD/utils/semantic/typography';
 export { GlobalResetStyles } from './util/reset';
+export { from, until, between } from './styleD/utils/semantic/mq';

package/dist/util/useResize.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+const useResize = (callback, debounceMs = 100) => {
+  const callbackRef = React.useRef(callback);
+  useIsomorphicLayoutEffect(() => {
+    callbackRef.current = callback;
+  });
+  React.useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    let timeout = null;
+    const handleResize = () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(() => {
+        callbackRef.current();
+      }, debounceMs);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [debounceMs]);
+};
+
+exports.useResize = useResize;

package/dist/util/useResize.js

@@ -0,0 +1,32 @@
+import { useRef, useEffect, useLayoutEffect } from 'react';
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const useResize = (callback, debounceMs = 100) => {
+  const callbackRef = useRef(callback);
+  useIsomorphicLayoutEffect(() => {
+    callbackRef.current = callback;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    let timeout = null;
+    const handleResize = () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(() => {
+        callbackRef.current();
+      }, debounceMs);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [debounceMs]);
+};
+
+export { useResize };

package/dist/utils.cjs

@@ -2,9 +2,13 @@
 
 var typography = require('./styleD/utils/semantic/typography.cjs');
 var reset = require('./util/reset.cjs');
+var mq = require('./styleD/utils/semantic/mq.cjs');
 
 
 
 exports.convertTypographyToEmotionObjectStyle = typography.convertTypographyToEmotionObjectStyle;
 exports.convertTypographyToEmotionStringStyle = typography.convertTypographyToEmotionStringStyle;
 exports.GlobalResetStyles = reset.GlobalResetStyles;
+exports.between = mq.between;
+exports.from = mq.from;
+exports.until = mq.until;

package/dist/utils.js

@@ -1,2 +1,3 @@
 export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle } from './styleD/utils/semantic/typography.js';
 export { GlobalResetStyles } from './util/reset.js';
+export { between, from, until } from './styleD/utils/semantic/mq.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "type": "module",
   "//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
   "exports": {