@guardian/stand 0.0.32 → 0.0.33

package/dist/components/link/Link.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var colors = require('../../styleD/build/typescript/semantic/colors.cjs');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('../typography/styles.cjs');
+var styles$1 = require('./styles.cjs');
+
+function Link({
+  children,
+  typography = "body-sm",
+  theme = {},
+  cssOverrides,
+  className,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles$1.defaultLinkTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Link,
+    {
+      css: [
+        styles.typographyStyles(
+          { color: colors.semanticColors.text.strong },
+          { variant: typography }
+        ),
+        styles$1.linkStyles(mergedTheme),
+        cssOverrides
+      ],
+      className,
+      ...props,
+      children
+    }
+  );
+}
+
+exports.Link = Link;

package/dist/components/link/Link.js

@@ -0,0 +1,17 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Link as Link$1 } from 'react-aria-components';
+import { semanticColors } from '../../styleD/build/typescript/semantic/colors.js';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { typographyStyles } from '../typography/styles.js';
+import { linkStyles, defaultLinkTheme } from './styles.js';
+
+function Link({ children, typography = "body-sm", theme = {}, cssOverrides, className, ...props }) {
+  const mergedTheme = mergeDeep(defaultLinkTheme, theme);
+  return jsx(Link$1, { css: [
+    typographyStyles({ color: semanticColors.text.strong }, { variant: typography }),
+    linkStyles(mergedTheme),
+    cssOverrides
+  ], className, ...props, children });
+}
+
+export { Link };

package/dist/components/link/styles.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var react = require('@emotion/react');
+var link = require('../../styleD/build/typescript/component/link.cjs');
+
+const defaultLinkTheme = link.componentLink;
+const linkStyles = (theme) => {
+  return react.css`
+		text-decoration: underline;
+		text-decoration-style: solid;
+		text-underline-offset: 8%;
+		text-decoration-thickness: 5%;
+		${theme.shared.enabled};
+		&[data-hovered] {
+			color: ${theme.shared.hover.color};
+			cursor: ${theme.shared.hover.cursor};
+		}
+		&[data-pressed] {
+			color: ${theme.shared.pressed.color};
+		}
+		&[data-disabled] {
+			color: ${theme.shared.disabled.color};
+		}
+		&[data-focus-visible] {
+			outline: ${theme.shared.focus.outline};
+		}
+	`;
+};
+
+exports.defaultLinkTheme = defaultLinkTheme;
+exports.linkStyles = linkStyles;

package/dist/components/link/styles.js

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+import { componentLink } from '../../styleD/build/typescript/component/link.js';
+
+const defaultLinkTheme = componentLink;
+const linkStyles = (theme) => {
+  return css`
+		text-decoration: underline;
+		text-decoration-style: solid;
+		text-underline-offset: 8%;
+		text-decoration-thickness: 5%;
+		${theme.shared.enabled};
+		&[data-hovered] {
+			color: ${theme.shared.hover.color};
+			cursor: ${theme.shared.hover.cursor};
+		}
+		&[data-pressed] {
+			color: ${theme.shared.pressed.color};
+		}
+		&[data-disabled] {
+			color: ${theme.shared.disabled.color};
+		}
+		&[data-focus-visible] {
+			outline: ${theme.shared.focus.outline};
+		}
+	`;
+};
+
+export { defaultLinkTheme, linkStyles };

package/dist/index.cjs

@@ -4,7 +4,6 @@ var autocomplete = require('./styleD/build/typescript/component/autocomplete.cjs
 var byline = require('./styleD/build/typescript/component/byline.cjs');
 var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
 var userMenu = require('./styleD/build/typescript/component/userMenu.cjs');
-var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
 var avatar = require('./styleD/build/typescript/component/avatar.cjs');
 var button = require('./styleD/build/typescript/component/button.cjs');
 var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
@@ -14,6 +13,8 @@ var form = require('./styleD/build/typescript/component/form.cjs');
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
 var menu = require('./styleD/build/typescript/component/menu.cjs');
+var link = require('./styleD/build/typescript/component/link.cjs');
+var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
 var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
 var select = require('./styleD/build/typescript/component/select.cjs');
 var textArea = require('./styleD/build/typescript/component/textArea.cjs');
@@ -37,7 +38,6 @@ exports.componentAutocomplete = autocomplete.componentAutocomplete;
 exports.componentByline = byline.componentByline;
 exports.componentTagTable = tagTable.componentTagTable;
 exports.componentUserMenu = userMenu.componentUserMenu;
-exports.componentAlertBanner = alertBanner.componentAlertBanner;
 exports.componentAvatar = avatar.componentAvatar;
 exports.componentButton = button.componentButton;
 exports.componentCheckbox = checkbox.componentCheckbox;
@@ -47,6 +47,8 @@ exports.componentForm = form.componentForm;
 exports.componentIcon = icon.componentIcon;
 exports.componentInlineMessage = inlineMessage.componentInlineMessage;
 exports.componentMenu = menu.componentMenu;
+exports.componentLink = link.componentLink;
+exports.componentAlertBanner = alertBanner.componentAlertBanner;
 exports.componentRadioGroup = radioGroup.componentRadioGroup;
 exports.componentSelect = select.componentSelect;
 exports.componentTextArea = textArea.componentTextArea;

package/dist/index.js

@@ -2,7 +2,6 @@ export { componentAutocomplete } from './styleD/build/typescript/component/autoc
 export { componentByline } from './styleD/build/typescript/component/byline.js';
 export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';
 export { componentUserMenu } from './styleD/build/typescript/component/userMenu.js';
-export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';
 export { componentAvatar } from './styleD/build/typescript/component/avatar.js';
 export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';
@@ -12,6 +11,8 @@ export { componentForm } from './styleD/build/typescript/component/form.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
 export { componentMenu } from './styleD/build/typescript/component/menu.js';
+export { componentLink } from './styleD/build/typescript/component/link.js';
+export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup.js';
 export { componentSelect } from './styleD/build/typescript/component/select.js';
 export { componentTextArea } from './styleD/build/typescript/component/textArea.js';

package/dist/link.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Link = require('./components/link/Link.cjs');
+var link = require('./styleD/build/typescript/component/link.cjs');
+
+
+
+exports.Link = Link.Link;
+exports.componentLink = link.componentLink;

package/dist/link.js

@@ -0,0 +1,2 @@
+export { Link } from './components/link/Link.js';
+export { componentLink } from './styleD/build/typescript/component/link.js';

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

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-link-shared-focus-outline: 1px solid #0072a9;
+	--component-link-shared-hover-color: #00344e;
+	--component-link-shared-hover-cursor: pointer;
+	--component-link-shared-enabled-color: #00496c;
+	--component-link-shared-disabled-color: #999999;
+	--component-link-shared-pressed-color: #00202f;
+}

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

@@ -0,0 +1,24 @@
+'use strict';
+
+const componentLink = {
+  shared: {
+    focus: {
+      outline: "1px solid #0072a9"
+    },
+    hover: {
+      color: "#00344e",
+      cursor: "pointer"
+    },
+    enabled: {
+      color: "#00496c"
+    },
+    disabled: {
+      color: "#999999"
+    },
+    pressed: {
+      color: "#00202f"
+    }
+  }
+};
+
+exports.componentLink = componentLink;

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

@@ -0,0 +1,22 @@
+const componentLink = {
+  shared: {
+    focus: {
+      outline: "1px solid #0072a9"
+    },
+    hover: {
+      color: "#00344e",
+      cursor: "pointer"
+    },
+    enabled: {
+      color: "#00496c"
+    },
+    disabled: {
+      color: "#999999"
+    },
+    pressed: {
+      color: "#00202f"
+    }
+  }
+};
+
+export { componentLink };

package/dist/types/components/link/Link.d.ts

@@ -0,0 +1,2 @@
+import type { LinkProps } from './types';
+export declare function Link({ children, typography, theme, cssOverrides, className, ...props }: LinkProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Link";
+export declare const componentTsx = "import { Link } from '@guardian/stand/link';\n\nexport const Component = () => (\n\t<Link href=\"#\">Hello</Link>\n);\n";
+export declare const componentCss = "\n/* import the link styles */\n@import '@guardian/stand/component/link.css';\n\n.stand-typography-body-sm {\n\tfont: var(--semantic-typography-body-sm-font);\n\tletter-spacing: var(--semantic-typography-body-sm-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--semantic-typography-body-sm-font-width);\n}\n.stand-link {\n\ttext-decoration: underline;\n\ttext-decoration-style: solid;\n\ttext-underline-offset: 8%;\n\ttext-decoration-thickness: 5%;\n\tcolor: var(--component-link-shared-enabled-color);\n}\n\n.stand-link[data-hovered] {\n\tcolor: var(--component-link-shared-hover-color);\n\tcursor: var(--component-link-shared-hover-cursor);\n}\n\n.stand-link[data-pressed] {\n\tcolor: var(--component-link-shared-pressed-color);\n}\n\n.stand-link[data-disabled] {\n\tcolor: var(--component-link-shared-disabled-color);\n}\n\n.stand-link[data-focus-visible] {\n\toutline: var(--component-link-shared-focus-outline);\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\">Default link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-hovered>Hovered link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-pressed>Pressed link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-disabled>Disabled link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-focus-visible>Focused link</a>\n</div>\n";
+export declare const componentJs = "\nimport { componentLink, semanticTypography } from \"@guardian/stand\";\n\nconst semanticTypographyBodySm = `\n\t\tfont: ${semanticTypography['body-sm'].font};\n\t\tletter-spacing: ${semanticTypography['body-sm'].letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${semanticTypography['body-sm'].fontWidth};\n`;\n\nconst baseStyle = `\n\ttext-decoration: underline;\n\ttext-decoration-style: solid;\n\ttext-underline-offset: 8%;\n\ttext-decoration-thickness: 5%;\n\tcolor: ${componentLink.shared.enabled.color};\n`;\n\nconst hoverStyle = `\n\tcolor: ${componentLink.shared.hover.color};\n\tcursor: ${componentLink.shared.hover.cursor};\n`;\n\nconst pressedStyle = `\n\tcolor: ${componentLink.shared.pressed.color};\n`;\n\nconst disabledStyle = `\n\tcolor: ${componentLink.shared.disabled.color};\n`;\n\nconst focusVisibleStyle = `\n\toutline: ${componentLink.shared.focus.outline};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<style>\n\t\t.stand-typography-body-sm { ${semanticTypographyBodySm} }\n\t\t.stand-link { ${baseStyle} }\n\t\t.stand-link[data-hovered] { ${hoverStyle} }\n\t\t.stand-link[data-pressed] { ${pressedStyle} }\n\t\t.stand-link[data-disabled] { ${disabledStyle} }\n\t\t.stand-link[data-focus-visible] { ${focusVisibleStyle} }\n\t</style>\n\t<div class=\"container\">\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\">Default link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-hovered>Hovered link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-pressed>Pressed link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-disabled>Disabled link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-focus-visible>Focused link</a>\n\t</div>\n`;\n";

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

@@ -0,0 +1,7 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentLink } from '../../styleD/build/typescript/component/link';
+import type { DeepPartial, Prettify } from '../../util/types';
+export type LinkTheme = Prettify<ComponentLink>;
+export type PartialLinkTheme = DeepPartial<LinkTheme>;
+export declare const defaultLinkTheme: LinkTheme;
+export declare const linkStyles: (theme: LinkTheme) => SerializedStyles;

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

@@ -0,0 +1,11 @@
+import type { LinkProps as RACLinkProps } from 'react-aria-components';
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { TypographyVariant } from '../typography/types';
+import type { LinkTheme } from './styles';
+export interface LinkProps extends Omit<RACLinkProps, 'children'>, DefaultPropsWithChildren<LinkTheme, RACLinkProps['className']> {
+    /**
+     * to change the typography of the link, you can pass a variant from semanticTypography.
+     * By default, it is set to "body-sm".
+     */
+    typography?: TypographyVariant;
+}

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

@@ -1,6 +1,7 @@
-import type { SemanticTypography } from '../..';
+import type { SemanticTypography } from '../../styleD/build/typescript/semantic/typography';
 import type { DefaultPropsWithChildren } from '../../util/types';
 import type { TypographyTheme } from './styles';
+export type TypographyVariant = keyof SemanticTypography;
 export interface TypographyProps extends DefaultPropsWithChildren<TypographyTheme> {
     /**
      * HTML element to render with font applied to
@@ -9,5 +10,5 @@ export interface TypographyProps extends DefaultPropsWithChildren<TypographyThem
     /**
      * Font variant to apply as a CSS style to the element
      */
-    variant?: keyof SemanticTypography;
+    variant?: TypographyVariant;
 }

package/dist/types/index.d.ts

@@ -16,8 +16,6 @@ export type { ComponentUserMenu } from './styleD/build/typescript/component/user
 /**
  * design system components tokens exports
  */
-export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';
-export type { ComponentAlertBanner } from './styleD/build/typescript/component/alertBanner';
 export { componentAvatar } from './styleD/build/typescript/component/avatar';
 export type { ComponentAvatar } from './styleD/build/typescript/component/avatar';
 export { componentButton } from './styleD/build/typescript/component/button';
@@ -36,6 +34,10 @@ 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 { componentLink } from './styleD/build/typescript/component/link';
+export type { ComponentLink } from './styleD/build/typescript/component/link';
+export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';
+export type { ComponentAlertBanner } from './styleD/build/typescript/component/alertBanner';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup';
 export type { ComponentRadioGroup } from './styleD/build/typescript/component/radioGroup';
 export { componentSelect } from './styleD/build/typescript/component/select';

package/dist/types/link.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Link 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/link.css),
+ * you don't need to install these.
+ */
+export { Link } from './components/link/Link';
+export type { LinkProps } from './components/link/types';
+export type { PartialLinkTheme as LinkTheme } from './components/link/styles';
+export { componentLink } from './styleD/build/typescript/component/link';
+export type { ComponentLink } from './styleD/build/typescript/component/link';

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

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentLink: {
+    shared: {
+        focus: {
+            outline: string;
+        };
+        hover: {
+            color: string;
+            cursor: string;
+        };
+        enabled: {
+            color: string;
+        };
+        disabled: {
+            color: string;
+        };
+        pressed: {
+            color: string;
+        };
+    };
+};
+export type ComponentLink = typeof componentLink;

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.32",
+  "version": "0.0.33",
+  "repository": {
+    "url": "https://github.com/guardian/stand"
+  },
+  "sideEffects": false,
   "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": {
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -134,6 +137,11 @@
       "import": "./dist/utils.js",
       "require": "./dist/utils.cjs"
     },
+    "./link": {
+      "types": "./dist/types/link.d.ts",
+      "import": "./dist/link.js",
+      "require": "./dist/link.cjs"
+    },
     "./fonts/OpenSans.css": "./dist/fonts/OpenSans.css",
     "./fonts/MaterialSymbolsOutlined.css": "./dist/fonts/MaterialSymbolsOutlined.css",
     "./fonts/MaterialSymbolsRound.css": "./dist/fonts/MaterialSymbolsRound.css",
@@ -167,9 +175,12 @@
     "./component/checkbox.css": "./dist/styleD/build/css/component/checkbox.css",
     "./component/textArea.css": "./dist/styleD/build/css/component/textArea.css",
     "./component/alertBanner.css": "./dist/styleD/build/css/component/alertBanner.css",
-    "./component/datePicker.css": "./dist/styleD/build/css/component/datePicker.css"
+    "./component/datePicker.css": "./dist/styleD/build/css/component/datePicker.css",
+    "./component/link.css": "./dist/styleD/build/css/component/link.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.",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
   "typesVersions": {
     "*": {
       "avatar": [
@@ -246,19 +257,15 @@
       ],
       "date-picker": [
         "./dist/types/date-picker.d.ts"
+      ],
+      "link": [
+        "./dist/types/link.d.ts"
       ]
     }
   },
   "files": [
     "dist"
   ],
-  "repository": {
-    "url": "https://github.com/guardian/stand"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/types/index.d.ts",
-  "sideEffects": false,
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@codesandbox/sandpack-react": "^2.20.0",
@@ -288,6 +295,7 @@
     "husky": "^9.1.7",
     "jest": "30.3.0",
     "jest-environment-jsdom": "^30.3.0",
+    "lint-staged": "^17.0.0",
     "prettier": "3.8.2",
     "prosemirror-dropcursor": "1.8.2",
     "prosemirror-history": "1.4.1",
@@ -305,6 +313,7 @@
     "rollup-plugin-esbuild": "6.2.1",
     "rollup-plugin-import-css": "^4.2.0",
     "rollup-plugin-node-externals": "9.0.0",
+    "sort-package-json": "3.6.1",
     "storybook": "^10.3.5",
     "style-dictionary": "^5.4.0",
     "ts-jest": "29.4.9",
@@ -369,20 +378,23 @@
       "optional": true
     }
   },
+  "//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.",
+  "//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.",
   "scripts": {
     "build": "rimraf dist && rollup -c",
-    "build-styled": "cd src/styleD && node build.js && pnpm run format:fix",
-    "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
-    "lint": "eslint . --ext .ts,.tsx",
-    "lint:fix": "eslint --fix . --ext .ts,.tsx",
+    "build-styled": "cd src/styleD && node build.js && pnpm run format:fix",
+    "create-component": "npx ts-node ./scripts/create-component.ts",
     "format:check": "prettier --check .",
     "format:fix": "prettier --write .",
-    "tsc": "tsc",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint --fix . --ext .ts,.tsx",
+    "lint:staged": "lint-staged",
+    "storybook": "storybook dev -p 6007",
     "test": "jest",
-    "test:setup-e2e": "playwright install --with-deps",
     "test:e2e": "playwright test -c playwright-ct.config.ts",
-    "create-component": "npx ts-node ./scripts/create-component.ts",
-    "test:react-matrix": "./scripts/test-deps-matrix.sh"
+    "test:react-matrix": "./scripts/test-deps-matrix.sh",
+    "test:setup-e2e": "playwright install --with-deps",
+    "tsc": "tsc"
   }
 }