@guardian/stand 0.0.34 → 0.0.36

package/dist/types/components/layout/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "Layout";
+export declare const componentTsx = "import { Grid, Item } from '@guardian/stand/grid';\nimport { Layout, Sidebar } from '@guardian/stand/layout';\nimport { TopBar, TopBarToolName } from '@guardian/stand/TopBar';\n\nexport const Component = () => (\n\t<Layout>\n\t\t<TopBar>\n\t\t\t<TopBarToolName name=\"Layout Demo\" favicon={{ letter: 'L' }} />\n\t\t</TopBar>\n\t\t<Sidebar layoutSmBreakpoint=\"above-grid\">\n\t\t\t<div style={{ padding: '8px' }}>Sidebar content</div>\n\t\t</Sidebar>\n\t\t<Grid>\n\t\t\t<Item size={{ sm: 12, md: 8 }}>Main content</Item>\n\t\t\t<Item size={{ sm: 12, md: 4 }}>Secondary content</Item>\n\t\t</Grid>\n\t</Layout>\n);\n";
+export declare const componentCss = "\n/* import the layout styles */\n@import '@guardian/stand/component/layout.css';\n@import '@guardian/stand/semantic/breakpoints.css';\n\n/*\n * Use the TopBar and Grid/Item custom CSS examples from their respective\n * component docs to style the content placed inside these layout regions.\n */\n\n.stand-layout {\n\tdisplay: var(--component-layout-layout-shared-display);\n\tmin-height: var(--component-layout-layout-shared-min-height);\n\twidth: var(--component-layout-layout-shared-width);\n\tgrid-template-areas: var(--component-layout-layout-sm-grid-template-areas);\n\tgrid-template-columns: var(--component-layout-layout-sm-grid-template-columns);\n\tgrid-template-rows: var(--component-layout-layout-sm-grid-template-rows);\n}\n\n.stand-layout-alert-banner {\n\tgrid-area: alertbanner;\n}\n\n.stand-layout-top-bar {\n\tgrid-area: topbar;\n}\n\n.stand-layout-sidebar {\n\tgrid-area: sidebar;\n\tbackground: #f2f2f2;\n\tpadding: 8px;\n}\n\n.stand-layout-main {\n\tgrid-area: main;\n\tpadding: 8px;\n}\n\n@media (min-width: var(--semantic-breakpoints-md)) {\n\t.stand-layout {\n\t\tgrid-template-areas: var(--component-layout-layout-md-grid-template-areas);\n\t\tgrid-template-columns: var(--component-layout-layout-md-grid-template-columns);\n\t\tgrid-template-rows: var(--component-layout-layout-md-grid-template-rows);\n\t}\n\n\t.stand-layout-sidebar {\n\t\tdisplay: var(--component-layout-sidebar-md-display);\n\t\twidth: var(--component-layout-sidebar-md-width);\n\t}\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-layout\">\n\t\t<div class=\"stand-layout-alert-banner\">Alert banner area</div>\n\t\t<div class=\"stand-layout-top-bar\">Top bar area</div>\n\t\t<div class=\"stand-layout-sidebar\">Sidebar area</div>\n\t\t<div class=\"stand-layout-main\">Main content area</div>\n\t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentLayout, semanticBreakpoints } from \"@guardian/stand\";\n\n// Use the TopBar and Grid/Item custom JS examples from their respective\n// component docs to style the content placed inside these layout regions.\n\n\tconst sheet = new CSSStyleSheet();\n\n\tsheet.replaceSync(`\n\t  .js-stand-layout {\n\t    display: ${componentLayout.layout.shared.display};\n\t    min-height: ${componentLayout.layout.shared.minHeight};\n\t    width: ${componentLayout.layout.shared.width};\n\t    grid-template-areas: ${componentLayout.layout.sm.gridTemplateAreas};\n\t    grid-template-columns: ${componentLayout.layout.sm.gridTemplateColumns};\n\t    grid-template-rows: ${componentLayout.layout.sm.gridTemplateRows};\n\t  }\n\t  .js-stand-layout-alert-banner {\n\t    grid-area: alertbanner;\n\t  }\n\t  .js-stand-layout-top-bar {\n\t    grid-area: topbar;\n\t  }\n\t  .js-stand-layout-sidebar {\n\t    grid-area: sidebar;\n\t    display: ${componentLayout.sidebar.sm.aboveGrid.display};\n\t    background: #f2f2f2;\n\t    padding: 8px;\n\t  }\n\t  .js-stand-layout-main {\n\t    grid-area: main;\n\t    padding: 8px;\n\t  }\n\t  @media (min-width: ${semanticBreakpoints.md}) {\n\t    .js-stand-layout {\n\t      grid-template-areas: ${componentLayout.layout.md.gridTemplateAreas};\n\t      grid-template-columns: ${componentLayout.layout.md.gridTemplateColumns};\n\t      grid-template-rows: ${componentLayout.layout.md.gridTemplateRows};\n\t    }\n\t    .js-stand-layout-sidebar {\n\t      display: ${componentLayout.sidebar.md.display};\n\t      width: ${componentLayout.sidebar.md.width};\n\t    }\n\t  }\n\t`);\n\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\tdocument.getElementById(\"app\").innerHTML = `\n\t  <div class=\"js-stand-layout\">\n\t    <div class=\"js-stand-layout-alert-banner\">Alert banner area</div>\n\t    <div class=\"js-stand-layout-top-bar\">Top bar area</div>\n\t    <div class=\"js-stand-layout-sidebar\">Sidebar area</div>\n\t    <div class=\"js-stand-layout-main\">Main content area</div>\n\t  </div>\n\t`;\n";

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

@@ -0,0 +1,16 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentLayout } from '../../styleD/build/typescript/component/layout';
+import type { DeepPartial, Prettify } from '../../util/types';
+import type { LayoutProps, SidebarProps } from './types';
+export type LayoutTheme = Prettify<ComponentLayout['layout']>;
+export type PartialLayoutTheme = Prettify<DeepPartial<LayoutTheme>>;
+export declare const defaultLayoutTheme: LayoutTheme;
+export type SidebarTheme = Prettify<ComponentLayout['sidebar']>;
+export type PartialSidebarTheme = Prettify<DeepPartial<SidebarTheme>>;
+export declare const defaultSidebarTheme: SidebarTheme;
+export declare const alertBannerLayoutStyles: () => SerializedStyles;
+export declare const topBarLayoutStyles: () => SerializedStyles;
+export declare const sidebarLayoutStyles: () => SerializedStyles;
+export declare const mainLayoutStyles: (theme: LayoutTheme, { fluid }: Required<Pick<LayoutProps, 'fluid'>>) => SerializedStyles;
+export declare const layoutStyles: (theme: LayoutTheme) => SerializedStyles;
+export declare const sidebarStyles: (theme: SidebarTheme, { layoutSmBreakpoint }: Required<Pick<SidebarProps, 'layoutSmBreakpoint'>>) => SerializedStyles;

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

@@ -0,0 +1,20 @@
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { LayoutTheme, SidebarTheme } from './styles';
+export interface LayoutProps extends DefaultPropsWithChildren<LayoutTheme> {
+    /**
+     * When `true`, the layout will take up the full width of its container, enabled by default.
+     * When `false`, the layout will have a max-width of 1584px and be centered within its container.
+     * This can be used to prevent the layout from becoming too stretched on very wide screens.
+     */
+    fluid?: boolean;
+}
+export interface SidebarProps extends DefaultPropsWithChildren<SidebarTheme> {
+    /**
+     * Defines the layout behavior of the sidebar at the sm breakpoint.
+     *
+     * - 'above-grid' will place the sidebar above the grid content, effectively making it a horizontal bar at the top of the page, consumers may want to adjust the sidebar content styling for this breakpoint to make it look good in a horizontal layout.
+     * - 'hidden' will hide the sidebar entirely at the sm breakpoint, the consumer can choose how to make the sidebar content accessible through other means (e.g. a collapsible menu in the TopBar).
+     *
+     */
+    layoutSmBreakpoint?: 'above-grid' | 'hidden';
+}

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

@@ -7,8 +7,8 @@ export type PartialTopBarTheme = Prettify<DeepPartial<TopBarTheme>>;
 export declare const defaultTopBarTheme: TopBarTheme;
 export declare const topBarStyles: (theme: TopBarTheme) => SerializedStyles;
 export declare const topBarContainerStyles: (theme: TopBarTheme, { collapseBelow, showUntil, }?: {
-    collapseBelow?: "sm" | "md" | "lg" | "xl" | "max" | "maxplus" | undefined;
-    showUntil?: "sm" | "md" | "lg" | "xl" | "max" | "maxplus" | undefined;
+    collapseBelow?: "sm" | "md" | "lg" | undefined;
+    showUntil?: "sm" | "md" | "lg" | undefined;
 }) => SerializedStyles;
 export declare const topBarSpacerStyles: (theme: TopBarTheme) => SerializedStyles;
 export declare const topBarCollapsedNavMenuButtonStyles: (theme: TopBarTheme, menuOpen?: boolean) => SerializedStyles;

package/dist/types/grid.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Grid component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/grid.css),
+ * you don't need to install these.
+ */
+export { Grid } from './components/grid/Grid';
+export { Item } from './components/grid/Grid';
+export type { GridProps, ItemProps } from './components/grid/types';
+export type { PartialGridTheme as GridTheme } from './components/grid/styles';
+export { componentGrid } from './styleD/build/typescript/component/grid';
+export type { ComponentGrid } from './styleD/build/typescript/component/grid';

package/dist/types/index.d.ts

@@ -28,6 +28,8 @@ export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
 export { componentDatePicker } from './styleD/build/typescript/component/datePicker';
 export type { ComponentDatePicker } from './styleD/build/typescript/component/datePicker';
+export { componentGrid } from './styleD/build/typescript/component/grid';
+export type { ComponentGrid } from './styleD/build/typescript/component/grid';
 export { componentForm } from './styleD/build/typescript/component/form';
 export type { ComponentForm } from './styleD/build/typescript/component/form';
 export { componentIcon } from './styleD/build/typescript/component/icon';
@@ -36,6 +38,8 @@ export { componentInlineMessage } from './styleD/build/typescript/component/inli
 export type { ComponentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
 export { componentMenu } from './styleD/build/typescript/component/menu';
 export type { ComponentMenu } from './styleD/build/typescript/component/menu';
+export { componentLayout } from './styleD/build/typescript/component/layout';
+export type { ComponentLayout } from './styleD/build/typescript/component/layout';
 export { componentLink } from './styleD/build/typescript/component/link';
 export type { ComponentLink } from './styleD/build/typescript/component/link';
 export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';

package/dist/types/layout.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Layout component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ * - `react-aria-components` (for the `TopBar` components used in the example)
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/layout.css),
+ * you don't need to install these.
+ */
+export { Layout, Sidebar } from './components/layout/Layout';
+export type { LayoutProps, SidebarProps } from './components/layout/types';
+export type { PartialLayoutTheme as LayoutTheme, PartialSidebarTheme as SidebarTheme, } from './components/layout/styles';
+export { componentLayout } from './styleD/build/typescript/component/layout';
+export type { ComponentLayout } from './styleD/build/typescript/component/layout';

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

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentGrid: {
+    shared: {
+        display: string;
+        width: string;
+        columns: number;
+        gap: string;
+        direction: string;
+        wrap: string;
+        justifyContent: string;
+        alignItems: string;
+    };
+};
+export type ComponentGrid = typeof componentGrid;

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

@@ -0,0 +1,48 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentLayout: {
+    layout: {
+        shared: {
+            display: string;
+            minHeight: string;
+            width: string;
+            'max-width': string;
+            'margin-left': string;
+            'margin-right': string;
+        };
+        sm: {
+            gridTemplateAreas: string;
+            gridTemplateColumns: string;
+            gridTemplateRows: string;
+        };
+        md: {
+            gridTemplateAreas: string;
+            gridTemplateColumns: string;
+            gridTemplateRows: string;
+        };
+        lg: {
+            gridTemplateAreas: string;
+            gridTemplateColumns: string;
+            gridTemplateRows: string;
+        };
+    };
+    sidebar: {
+        sm: {
+            hidden: {
+                display: string;
+            };
+            aboveGrid: {
+                display: string;
+            };
+        };
+        md: {
+            display: string;
+            width: string;
+        };
+        lg: {
+            width: string;
+        };
+    };
+};
+export type ComponentLayout = typeof componentLayout;

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

@@ -2,29 +2,8 @@
  * 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;
-    };
+    sm: string;
+    md: string;
+    lg: string;
 };
 export type SemanticBreakpoints = typeof semanticBreakpoints;

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

@@ -12,7 +12,7 @@ export type Breakpoint = keyof typeof semanticBreakpoints;
  *   }
  * `;
  */
-export declare const from: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus", string>;
+export declare const from: Record<"sm" | "md" | "lg", string>;
 /**
  * Returns a `max-width` media query string for everything *below* the given
  * breakpoint (exclusive). Use to apply styles only on screens smaller than
@@ -26,7 +26,7 @@ export declare const from: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus",
  *   }
  * `;
  */
-export declare const until: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus", string>;
+export declare const until: Record<"sm" | "md" | "lg", 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.
@@ -41,21 +41,12 @@ export declare const until: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus"
  */
 export declare const between: {
     sm: {
-        and: Record<"md" | "lg" | "xl" | "max" | "maxplus", string>;
+        and: Record<"md" | "lg", string>;
     };
     md: {
-        and: Record<"sm" | "lg" | "xl" | "max" | "maxplus", string>;
+        and: Record<"sm" | "lg", 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>;
+        and: Record<"sm" | "md", string>;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -117,6 +117,11 @@
       "import": "./dist/date-picker.js",
       "require": "./dist/date-picker.cjs"
     },
+    "./grid": {
+      "types": "./dist/types/grid.d.ts",
+      "import": "./dist/grid.js",
+      "require": "./dist/grid.cjs"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -147,6 +152,11 @@
       "import": "./dist/link.js",
       "require": "./dist/link.cjs"
     },
+    "./layout": {
+      "types": "./dist/types/layout.d.ts",
+      "import": "./dist/layout.js",
+      "require": "./dist/layout.cjs"
+    },
     "./fonts/OpenSans.css": "./dist/fonts/OpenSans.css",
     "./fonts/MaterialSymbolsOutlined.css": "./dist/fonts/MaterialSymbolsOutlined.css",
     "./fonts/MaterialSymbolsRound.css": "./dist/fonts/MaterialSymbolsRound.css",
@@ -157,6 +167,7 @@
     "./base/spacing.css": "./dist/styleD/build/css/base/spacing.css",
     "./base/sizing.css": "./dist/styleD/build/css/base/sizing.css",
     "./base/radius.css": "./dist/styleD/build/css/base/radius.css",
+    "./semantic/breakpoints.css": "./dist/styleD/build/css/semantic/breakpoints.css",
     "./semantic/colors.css": "./dist/styleD/build/css/semantic/colors.css",
     "./semantic/typography.css": "./dist/styleD/build/css/semantic/typography.css",
     "./semantic/sizing.css": "./dist/styleD/build/css/semantic/sizing.css",
@@ -182,7 +193,9 @@
     "./component/alertBanner.css": "./dist/styleD/build/css/component/alertBanner.css",
     "./component/datePicker.css": "./dist/styleD/build/css/component/datePicker.css",
     "./component/intendedAudienceSignifier.css": "./dist/styleD/build/css/component/intendedAudienceSignifier.css",
-    "./component/link.css": "./dist/styleD/build/css/component/link.css"
+    "./component/link.css": "./dist/styleD/build/css/component/link.css",
+    "./component/grid.css": "./dist/styleD/build/css/component/grid.css",
+    "./component/layout.css": "./dist/styleD/build/css/component/layout.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -269,6 +282,12 @@
       ],
       "link": [
         "./dist/types/link.d.ts"
+      ],
+      "grid": [
+        "./dist/types/grid.d.ts"
+      ],
+      "layout": [
+        "./dist/types/layout.d.ts"
       ]
     }
   },