@guardian/stand 0.0.11 → 0.0.13

package/dist/index.js

@@ -6,6 +6,7 @@ export { componentAvatar } from './styleD/build/typescript/component/avatar.js';
 export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentTypography } from './styleD/build/typescript/component/typography.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
+export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
 export { baseColors } from './styleD/build/typescript/base/colors.js';
 export { baseTypography } from './styleD/build/typescript/base/typography.js';
 export { baseSpacing } from './styleD/build/typescript/base/spacing.js';

package/dist/styleD/build/css/component/button.css

@@ -26,16 +26,16 @@
 		#061d3c;
 	--component-button-emphasised-primary-shared-disabled-color: #999999;
 	--component-button-emphasised-primary-shared-disabled-background-color: #dcdcdc;
-	--component-button-emphasised-primary-shared-disabled-border: 0.0625rem
-		solid #dcdcdc;
+	--component-button-emphasised-primary-shared-disabled-border: 0.0625rem solid
+		#dcdcdc;
 	--component-button-emphasised-primary-xs-height: 1.5rem;
 	--component-button-emphasised-primary-xs-padding-top: 0.25rem;
 	--component-button-emphasised-primary-xs-padding-right: 0.5rem;
 	--component-button-emphasised-primary-xs-padding-bottom: 0.25rem;
 	--component-button-emphasised-primary-xs-padding-left: 0.5rem;
 	--component-button-emphasised-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
-	--component-button-emphasised-primary-xs-typography-font: normal 700
-		0.75rem/1 'Open Sans';
+	--component-button-emphasised-primary-xs-typography-font: normal 700 0.75rem/1
+		'Open Sans';
 	--component-button-emphasised-primary-xs-typography-letter-spacing: 0rem;
 	--component-button-emphasised-primary-xs-typography-font-width: 95;
 	--component-button-emphasised-primary-xs-icon-size: 1.125rem;
@@ -83,14 +83,13 @@
 	--component-button-emphasised-secondary-shared-color: #000000;
 	--component-button-emphasised-secondary-shared-background-color: none;
 	--component-button-emphasised-secondary-shared-border-radius: 0.25rem;
-	--component-button-emphasised-secondary-shared-border: 0.0625rem solid
-		#0d4289;
+	--component-button-emphasised-secondary-shared-border: 0.0625rem solid #0d4289;
 	--component-button-emphasised-secondary-shared-hover-background-color: #e8f0fb;
 	--component-button-emphasised-secondary-shared-hover-border: 0.0625rem solid
 		#0d4289;
 	--component-button-emphasised-secondary-shared-active-background-color: #c5d9f4;
-	--component-button-emphasised-secondary-shared-active-border: 0.0625rem
-		solid #0d4289;
+	--component-button-emphasised-secondary-shared-active-border: 0.0625rem solid
+		#0d4289;
 	--component-button-emphasised-secondary-shared-disabled-color: #999999;
 	--component-button-emphasised-secondary-shared-disabled-background-color: none;
 	--component-button-emphasised-secondary-shared-disabled-border: 0.0625rem
@@ -140,8 +139,8 @@
 	--component-button-emphasised-secondary-lg-padding-bottom: 0.25rem;
 	--component-button-emphasised-secondary-lg-padding-left: 1rem;
 	--component-button-emphasised-secondary-lg-padding-with-icon-icon-left-left: 0.75rem;
-	--component-button-emphasised-secondary-lg-typography-font: normal 700
-		1rem/1 'Open Sans';
+	--component-button-emphasised-secondary-lg-typography-font: normal 700 1rem/1
+		'Open Sans';
 	--component-button-emphasised-secondary-lg-typography-letter-spacing: -0.0125rem;
 	--component-button-emphasised-secondary-lg-typography-font-width: 95;
 	--component-button-emphasised-secondary-lg-icon-size: 1.5rem;
@@ -233,8 +232,8 @@
 	--component-button-neutral-secondary-xs-padding-bottom: 0.25rem;
 	--component-button-neutral-secondary-xs-padding-left: 0.5rem;
 	--component-button-neutral-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
-	--component-button-neutral-secondary-xs-typography-font: normal 700
-		0.75rem/1 'Open Sans';
+	--component-button-neutral-secondary-xs-typography-font: normal 700 0.75rem/1
+		'Open Sans';
 	--component-button-neutral-secondary-xs-typography-letter-spacing: 0rem;
 	--component-button-neutral-secondary-xs-typography-font-width: 95;
 	--component-button-neutral-secondary-xs-icon-size: 1.125rem;
@@ -246,8 +245,8 @@
 	--component-button-neutral-secondary-sm-padding-bottom: 0.25rem;
 	--component-button-neutral-secondary-sm-padding-left: 0.625rem;
 	--component-button-neutral-secondary-sm-padding-with-icon-icon-left-left: 0.5rem;
-	--component-button-neutral-secondary-sm-typography-font: normal 700
-		0.875rem/1 'Open Sans';
+	--component-button-neutral-secondary-sm-typography-font: normal 700 0.875rem/1
+		'Open Sans';
 	--component-button-neutral-secondary-sm-typography-letter-spacing: -0.0125rem;
 	--component-button-neutral-secondary-sm-typography-font-width: 95;
 	--component-button-neutral-secondary-sm-icon-size: 1.125rem;
@@ -259,8 +258,8 @@
 	--component-button-neutral-secondary-md-padding-bottom: 0.25rem;
 	--component-button-neutral-secondary-md-padding-left: 0.75rem;
 	--component-button-neutral-secondary-md-padding-with-icon-icon-left-left: 0.5rem;
-	--component-button-neutral-secondary-md-typography-font: normal 700
-		0.875rem/1 'Open Sans';
+	--component-button-neutral-secondary-md-typography-font: normal 700 0.875rem/1
+		'Open Sans';
 	--component-button-neutral-secondary-md-typography-letter-spacing: -0.0125rem;
 	--component-button-neutral-secondary-md-typography-font-width: 95;
 	--component-button-neutral-secondary-md-icon-size: 1.25rem;

package/dist/styleD/build/css/component/favicon.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-favicon-color-background: #00496c;
+	--component-favicon-color-text: #ffffff;
+	--component-favicon-size: 2rem;
+	--component-favicon-display: inline-flex;
+	--component-favicon-align-items: center;
+	--component-favicon-justify-content: center;
+	--component-favicon-user-select: none;
+	--component-favicon-typography-font: normal 700 1.25rem/1.15
+		'GH Guardian Headline';
+	--component-favicon-typography-letter-spacing: 0rem;
+	--component-favicon-typography-font-width: 100;
+}

package/dist/styleD/build/css/semantic/typography.css

@@ -73,19 +73,16 @@
 	--semantic-typography-body-xl-font: normal 460 1.25rem/1.3 'Open Sans';
 	--semantic-typography-body-xl-letter-spacing: 0rem;
 	--semantic-typography-body-xl-font-width: 95;
-	--semantic-typography-body-italic-sm-font: italic 460 0.875rem/1.3
-		'Open Sans';
+	--semantic-typography-body-italic-sm-font: italic 460 0.875rem/1.3 'Open Sans';
 	--semantic-typography-body-italic-sm-letter-spacing: 0rem;
 	--semantic-typography-body-italic-sm-font-width: 95;
 	--semantic-typography-body-italic-md-font: italic 460 1rem/1.3 'Open Sans';
 	--semantic-typography-body-italic-md-letter-spacing: 0rem;
 	--semantic-typography-body-italic-md-font-width: 95;
-	--semantic-typography-body-italic-lg-font: italic 460 1.125rem/1.3
-		'Open Sans';
+	--semantic-typography-body-italic-lg-font: italic 460 1.125rem/1.3 'Open Sans';
 	--semantic-typography-body-italic-lg-letter-spacing: 0rem;
 	--semantic-typography-body-italic-lg-font-width: 95;
-	--semantic-typography-body-italic-xl-font: italic 460 1.25rem/1.3
-		'Open Sans';
+	--semantic-typography-body-italic-xl-font: italic 460 1.25rem/1.3 'Open Sans';
 	--semantic-typography-body-italic-xl-letter-spacing: 0rem;
 	--semantic-typography-body-italic-xl-font-width: 95;
 	--semantic-typography-body-compact-sm-font: normal 460 0.875rem/1.3
@@ -99,8 +96,7 @@
 		'Open Sans';
 	--semantic-typography-body-compact-lg-letter-spacing: 0rem;
 	--semantic-typography-body-compact-lg-font-width: 88;
-	--semantic-typography-body-compact-xl-font: normal 460 1.25rem/1.3
-		'Open Sans';
+	--semantic-typography-body-compact-xl-font: normal 460 1.25rem/1.3 'Open Sans';
 	--semantic-typography-body-compact-xl-letter-spacing: 0rem;
 	--semantic-typography-body-compact-xl-font-width: 88;
 	--semantic-typography-body-compact-italic-sm-font: italic 460 0.875rem/1.3
@@ -122,8 +118,7 @@
 	--semantic-typography-meta-md-font: normal 460 0.75rem/1.3 'Open Sans';
 	--semantic-typography-meta-md-letter-spacing: 0rem;
 	--semantic-typography-meta-md-font-width: 95;
-	--semantic-typography-meta-compact-md-font: normal 460 0.75rem/1.3
-		'Open Sans';
+	--semantic-typography-meta-compact-md-font: normal 460 0.75rem/1.3 'Open Sans';
 	--semantic-typography-meta-compact-md-letter-spacing: 0rem;
 	--semantic-typography-meta-compact-md-font-width: 88;
 	--semantic-typography-article-body-md-font: normal 400 1rem/1.4

package/dist/styleD/build/typescript/component/favicon.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+const componentFavicon = {
+  color: {
+    background: "#00496c",
+    text: "#ffffff"
+  },
+  size: "2rem",
+  display: "inline-flex",
+  "align-items": "center",
+  "justify-content": "center",
+  "user-select": "none",
+  typography: {
+    font: "normal 700 1.25rem/1.15 GH Guardian Headline",
+    letterSpacing: "0rem",
+    fontWidth: 100
+  }
+};
+
+exports.componentFavicon = componentFavicon;

package/dist/styleD/build/typescript/component/favicon.js

@@ -0,0 +1,18 @@
+const componentFavicon = {
+  color: {
+    background: "#00496c",
+    text: "#ffffff"
+  },
+  size: "2rem",
+  display: "inline-flex",
+  "align-items": "center",
+  "justify-content": "center",
+  "user-select": "none",
+  typography: {
+    font: "normal 700 1.25rem/1.15 GH Guardian Headline",
+    letterSpacing: "0rem",
+    fontWidth: 100
+  }
+};
+
+export { componentFavicon };

package/dist/types/components/favicon/Favicon.d.ts

@@ -0,0 +1,2 @@
+import type { FaviconProps } from './types';
+export declare const Favicon: (props: FaviconProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,8 @@
+import type { SerializedStyles } from '@emotion/react';
+import { type ComponentFavicon } from '../../styleD/build/typescript/component/favicon';
+import type { Prettify } from '../../util/types';
+export type FaviconTheme = Prettify<ComponentFavicon>;
+export declare const defaultFaviconTheme: FaviconTheme;
+export declare const faviconStyles: (theme: FaviconTheme) => SerializedStyles;
+export declare const faviconTypographyStyles: (theme: FaviconTheme) => SerializedStyles;
+export declare const faviconImageStyles: SerializedStyles;

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

@@ -0,0 +1,38 @@
+import type { DefaultProps } from '../../util/types';
+import type { IconProps } from '../icon/types';
+import type { FaviconTheme } from './styles';
+interface FaviconWithLetter extends DefaultProps<FaviconTheme> {
+    /**
+     * Letter to render in the favicon
+     */
+    letter: string;
+    icon?: never;
+    src?: never;
+    alt?: never;
+}
+interface FaviconWithIcon extends DefaultProps<FaviconTheme> {
+    /**
+     * Icon to display in the favicon
+     */
+    icon: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+    letter?: never;
+    src?: never;
+    alt?: never;
+}
+interface FaviconWithImage extends DefaultProps<FaviconTheme> {
+    /**
+     * Image URL for the favicon
+     */
+    src: string;
+    /**
+     * Alternative text for the image (required when src is provided)
+     */
+    alt: string;
+    /**
+     * Letter to display when image fails to load (optional)
+     */
+    letter?: string;
+    icon?: never;
+}
+export type FaviconProps = FaviconWithLetter | FaviconWithIcon | FaviconWithImage;
+export {};

package/dist/types/favicon.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Favicon 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/favicon.css),
+ * you don't need to install these.
+ */
+export { Favicon } from './components/favicon/Favicon';
+export type { FaviconProps } from './components/favicon/types';
+export type { 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/index.d.ts

@@ -24,6 +24,8 @@ export { componentTypography } from './styleD/build/typescript/component/typogra
 export type { ComponentTypography } from './styleD/build/typescript/component/typography';
 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';
 /**
  * style dictionary exports - base
  */

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

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentFavicon: {
+    color: {
+        background: string;
+        text: string;
+    };
+    size: string;
+    display: string;
+    'align-items': string;
+    'justify-content': string;
+    'user-select': string;
+    typography: {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+};
+export type ComponentFavicon = typeof componentFavicon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "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": {
@@ -44,6 +44,11 @@
       "import": "./dist/icon.js",
       "require": "./dist/icon.cjs"
     },
+    "./favicon": {
+      "types": "./dist/types/favicon.d.ts",
+      "import": "./dist/favicon.js",
+      "require": "./dist/favicon.cjs"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -84,7 +89,8 @@
     "./component/avatar.css": "./dist/styleD/build/css/component/avatar.css",
     "./component/button.css": "./dist/styleD/build/css/component/button.css",
     "./component/typography.css": "./dist/styleD/build/css/component/typography.css",
-    "./component/icon.css": "./dist/styleD/build/css/component/icon.css"
+    "./component/icon.css": "./dist/styleD/build/css/component/icon.css",
+    "./component/favicon.css": "./dist/styleD/build/css/component/favicon.css"
   },
   "//typesVersions": "Provides backward compatibility for TypeScript moduleResolution: node - maps subpath imports to correct type definition files. When adding new components with their own entry points, ensure to add them here.",
   "typesVersions": {
@@ -110,6 +116,9 @@
       "icon": [
         "./dist/types/icon.d.ts"
       ],
+      "favicon": [
+        "./dist/types/favicon.d.ts"
+      ],
       "byline": [
         "./dist/types/byline.d.ts"
       ],
@@ -128,8 +137,7 @@
     "dist"
   ],
   "repository": {
-    "url": "https://github.com/guardian/flexible-content",
-    "directory": "stand-component-library"
+    "url": "https://github.com/guardian/stand"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -138,19 +146,19 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
     "@emotion/react": "11.11.4",
-    "@figma/rest-api-spec": "^0.35.0",
-    "@guardian/eslint-config": "13.0.2",
+    "@figma/rest-api-spec": "^0.36.0",
+    "@guardian/eslint-config": "13.0.6",
     "@guardian/prettier": "10.0.0",
     "@guardian/prosemirror-invisibles": "3.1.1",
     "@guardian/tsconfig": "1.0.1",
     "@material-design-icons/svg": "^0.14.15",
-    "@playwright/experimental-ct-react17": "^1.57.0",
+    "@playwright/experimental-ct-react17": "^1.58.2",
     "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-typescript": "12.3.0",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-themes": "^10.1.11",
-    "@storybook/react-vite": "^10.1.11",
+    "@storybook/addon-docs": "^10.2.11",
+    "@storybook/addon-themes": "^10.2.11",
+    "@storybook/react-vite": "^10.2.11",
     "@terrazzo/cli": "^0.10.5",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/jest": "30.0.0",
@@ -158,11 +166,12 @@
     "@types/react": "17.0.76",
     "@types/react-dom": "17.0.25",
     "change-case": "^5.4.4",
-    "eslint": "9.39.2",
-    "eslint-plugin-storybook": "^10.1.11",
+    "eslint": "9.39.3",
+    "eslint-plugin-storybook": "^10.2.11",
+    "husky": "^9.1.7",
     "jest": "30.2.0",
     "jest-environment-jsdom": "^30.1.2",
-    "prettier": "3.8.0",
+    "prettier": "3.8.1",
     "prosemirror-dropcursor": "1.8.2",
     "prosemirror-history": "1.4.1",
     "prosemirror-keymap": "1.2.2",
@@ -173,14 +182,14 @@
     "react-aria-components": "1.13.0",
     "react-dom": "17.0.2",
     "remark-gfm": "^4.0.1",
-    "rimraf": "6.1.2",
-    "rollup": "4.55.3",
+    "rimraf": "6.1.3",
+    "rollup": "4.59.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-esbuild": "6.2.1",
     "rollup-plugin-import-css": "^4.2.0",
     "rollup-plugin-node-externals": "8.1.2",
-    "storybook": "^10.1.11",
-    "style-dictionary": "^5.1.4",
+    "storybook": "^10.2.11",
+    "style-dictionary": "^5.3.2",
     "ts-jest": "29.4.6",
     "tslib": "2.8.1",
     "typescript": "5.1.3",
@@ -251,6 +260,7 @@
     "format:fix": "prettier --write .",
     "tsc": "tsc",
     "test": "jest",
+    "test:setup-e2e": "playwright install --with-deps",
     "test:e2e": "playwright test -c playwright-ct.config.ts",
     "test:react-matrix": "./scripts/test-react-matrix.sh"
   }