@guardian/stand 0.0.32 → 0.0.34

package/dist/types/components/intended-audience-signifier/types.d.ts

@@ -0,0 +1,8 @@
+import type { DefaultProps } from '../../util/types';
+import type { IntendedAudienceSignifierTheme } from './styles';
+export type Source = 'UK' | 'US' | 'AUS';
+export type IntendedAudience = 'Global' | 'Domestic for Domestic' | 'Domestic For Global' | "Don't know" | 'UK' | 'US' | 'AUS';
+export interface IntendedAudienceSignifierProps extends DefaultProps<IntendedAudienceSignifierTheme> {
+    source: Source;
+    intendedAudience: IntendedAudience;
+}

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

@@ -13,11 +13,11 @@ export { componentTagTable } from './styleD/build/typescript/component/tagTable'
 export type { ComponentTagTable } from './styleD/build/typescript/component/tagTable';
 export { componentUserMenu } from './styleD/build/typescript/component/userMenu';
 export type { ComponentUserMenu } from './styleD/build/typescript/component/userMenu';
+export { componentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';
+export type { ComponentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';
 /**
  * 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 +36,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/intended-audience-signifier.d.ts

@@ -0,0 +1,19 @@
+/**
+ * IntendedAudienceSignifier 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/intendedAudienceSiginifier.css),
+ * you don't need to install these.
+ */
+export { IntendedAudienceSignifier } from './components/intended-audience-signifier/IntendedAudienceSignifier';
+export type { IntendedAudienceSignifierProps } from './components/intended-audience-signifier/types';
+export type { IntendedAudienceSignifierTheme } from './components/intended-audience-signifier/styles';
+export { componentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';
+export type { ComponentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';

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/intendedAudienceSignifier.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentIntendedAudienceSignifier: {
+    display: string;
+    flexDirection: string;
+    justifyContent: string;
+    alignItems: string;
+    borderColor: string;
+    borderWidth: string;
+    borderStyle: string;
+    borderRadius: string;
+    paddingY: string;
+    paddingX: string;
+    boxSizing: string;
+    width: string;
+    gap: string;
+    svg: {
+        height: string;
+        width: string;
+    };
+    color: string;
+    typography: {
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: number;
+    };
+};
+export type ComponentIntendedAudienceSignifier = typeof componentIntendedAudienceSignifier;

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.34",
+  "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,16 @@
       "import": "./dist/utils.js",
       "require": "./dist/utils.cjs"
     },
+    "./intendedAudienceSignifier": {
+      "types": "./dist/types/intended-audience-signifier.d.ts",
+      "import": "./dist/intended-audience-signifier.js",
+      "require": "./dist/intended-audience-signifier.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 +180,13 @@
     "./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/intendedAudienceSignifier.css": "./dist/styleD/build/css/component/intendedAudienceSignifier.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 +263,18 @@
       ],
       "date-picker": [
         "./dist/types/date-picker.d.ts"
+      ],
+      "intendedAudienceSignifier": [
+        "./dist/types/intended-audience-signifier.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 +304,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 +322,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 +387,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"
   }
 }