@guardian/stand 0.0.17 → 0.0.19

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Select";
+export declare const componentTsx = "import { Select } from '@guardian/stand/select';\n\nexport const Component = () => (\n\t<Select label=\"Select\">\n\t\t<Option>Option 1</Option>\n\t\t<Option>Option 2</Option>\n\t</Select>\n);\n";
+export declare const componentCss = "\n/* import the select styles */\n@import '@guardian/stand/component/select.css';\n\n.stand-select-container {\n\tdisplay: var(--component-select-shared-display);\n\tflex-direction: var(--component-select-shared-flex-direction);\n\tgap: var(--component-select-shared-gap);\n\n\tmax-width: var(--component-select-shared-maxWidth);\n\twidth: var(--component-select-shared-width);\n}\n\n.stand-select {\n\t\tdisplay: var(--component-select-button-display);\n\t\tjustify-content: var(--component-select-button-justify-content);\n\t\talign-items: var(--component-select-button-align-items);\n\t\tbackground-color: var(--component-select-button-background-color);\n\t\tborder: var(--component-select-button-border);\n\t\tborder-radius: var(--component-select-button-border-radius);\n\t\theight: var(--component-select-button-height);\n\t\tpadding-left: var(--component-select-button-padding-left);\n\t\tpadding-right: var(--component-select-button-padding-right);\n\t\tmargin-top: var(--component-select-button-margin-top);\n\t\tcolor: var(--component-select-button-color);\n\n\t\tfont: var(--component-select-button-body-md-typography-font);\n\t\tletter-spacing: var(--component-select-button-body-md-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-select-button-body-md-typography-font-width);\n\n\n\t\t&:hover {\n\t\t\tbackground: var(--component-select-shared-hover-background-color);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground: var(--component-select-shared-active-background-color);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: var(--component-select-button-focused-outline);\n\t\t\toutline-offset: var(--component-select-button-focused-outline-offset);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: var(--component-select-button-disabled-cursor);\n\t\t\tbackground-color: var(--component-select-button-disabled-background-color);\n\t\t\tcolor: var(--component-select-button-disabled-color);\n\t\t\tborder: var(--component-select-button-disabled-border);\n\t\t}\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentSelect } from \"@guardian/stand\";\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n\n.js-stand-select-container {\n\tdisplay: ${componentSelect.shared.display};\n\tflex-direction: ${componentSelect.shared.flexDirection};\n\tgap: ${componentSelect.shared.gap};\n\n\tmax-width: ${componentSelect.shared.maxWidth};\n\twidth: ${componentSelect.shared.width};\n}\n\n.js-stand-select {\n\tdisplay: ${componentSelect.button.display};\n\tjustify-content: ${componentSelect.button.justifyContent};\n\talign-items: ${componentSelect.button.alignItems};\n\tbackground-color: ${componentSelect.button.backgroundColor};\n\tborder: ${componentSelect.button.border};\n\tborder-radius: ${componentSelect.button.borderRadius};\n\theight: ${componentSelect.button.height};\n\tpadding-left: ${componentSelect.button.paddingLeft};\n\tpadding-right: ${componentSelect.button.paddingRight};\n\tmargin-top: ${componentSelect.button.marginTop};\n\tcolor: ${componentSelect.button.color};\n\n\tfont: ${componentSelect.button.typography.font};\n\tletter-spacing: ${componentSelect.button.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentSelect.button.typography.fontWidth};\n\n\t&:hover {\n\t\tbackground: ${componentSelect.shared.hover.backgroundColor};\n\t}\n\n\t&:active {\n\t\tbackground: ${componentSelect.shared.pressed.backgroundColor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentSelect.button.focused.outline};\n\t\toutline-offset: ${componentSelect.button.focused['outline-offset']};\n\t}\n\n\t&:disabled {\n\t\tcursor: ${componentSelect.button.disabled.cursor};\n\t\tbackground-color: ${componentSelect.button.disabled.backgroundColor};\n\t\tcolor: ${componentSelect.button.disabled.color};\n\t\tborder: ${componentSelect.button.disabled.border};\n\t}\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"js-stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n`;\n";

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

@@ -0,0 +1,13 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentSelect } from '../../styleD/build/typescript/component/select';
+import type { DeepPartial, Prettify } from '../../util/types';
+export type SelectTheme = Prettify<ComponentSelect>;
+export type PartialSelectTheme = DeepPartial<SelectTheme>;
+export declare const defaultSelectTheme: SelectTheme;
+export declare const selectStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const popoverStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const listBoxItemStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const listBoxStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const labelStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const helpTextStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const buttonStyles: (theme: SelectTheme, isInvalid?: boolean) => SerializedStyles;

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

@@ -0,0 +1,21 @@
+import type { ListBoxItemProps as RACListBoxItemProps, ListBoxProps as RACListBoxProps, SelectProps as RACSelectProps } from 'react-aria-components';
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { SelectTheme } from './styles';
+export interface OptionProps extends DefaultPropsWithChildren<SelectTheme, RACListBoxItemProps['className']>, Omit<RACListBoxItemProps, 'children'> {
+}
+export interface ListBoxProps extends DefaultPropsWithChildren<SelectTheme, RACListBoxProps<object>['className']>, Omit<RACListBoxProps<object>, 'children'> {
+}
+export interface SelectProps extends DefaultPropsWithChildren<SelectTheme, RACSelectProps<object>['className']>, Omit<RACSelectProps<object>, 'children'> {
+    /**
+     * The label text of the select box
+     */
+    label: string;
+    /**
+     * Validation error message
+     */
+    errorMessage?: string;
+    /**
+     * Optional contextual help text
+     */
+    contextualHelpText?: string;
+}

package/dist/types/index.d.ts

@@ -26,6 +26,10 @@ 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';
+export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
+export type { ComponentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
+export { componentSelect } from './styleD/build/typescript/component/select';
+export type { ComponentSelect } from './styleD/build/typescript/component/select';
 export { componentMenu } from './styleD/build/typescript/component/menu';
 export type { ComponentMenu } from './styleD/build/typescript/component/menu';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar';

package/dist/types/inline-message.d.ts

@@ -0,0 +1,19 @@
+/**
+ * InlineMessage 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/inlineMessage.css),
+ * you don't need to install these.
+ */
+export { InlineMessage } from './components/inline-message/InlineMessage';
+export type { InlineMessageProps } from './components/inline-message/types';
+export type { PartialInlineMessageTheme as InlineMessageTheme } from './components/inline-message/styles';
+export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
+export type { ComponentInlineMessage } from './styleD/build/typescript/component/inlineMessage';

package/dist/types/select.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Select component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `react-aria-components`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/select.css),
+ * you don't need to install these.
+ */
+export { Select } from './components/select/Select';
+export type { SelectProps } from './components/select/types';
+export type { PartialSelectTheme as SelectTheme } from './components/select/styles';
+export { componentSelect } from './styleD/build/typescript/component/select';
+export type { ComponentSelect } from './styleD/build/typescript/component/select';

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

@@ -8,56 +8,122 @@ export declare const componentAvatar: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             blue: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             red: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             cyan: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             teal: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             'cool-purple': {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             'warm-purple': {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             magenta: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             orange: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             yellow: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             outlined: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
         };
         display: string;
@@ -67,6 +133,23 @@ export declare const componentAvatar: {
         'flex-shrink': string;
         'border-radius': string;
         'user-select': string;
+        link: {
+            width: string;
+            ':focus-visible': {
+                outline: string;
+                'outline-offset': string;
+            };
+            'text-decoration': string;
+        };
+        button: {
+            background: string;
+            border: string;
+            padding: string;
+            cursor: string;
+            ':disabled': {
+                cursor: string;
+            };
+        };
     };
     sm: {
         size: string;

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

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentInlineMessage: {
+    shared: {
+        display: string;
+        gap: string;
+        'align-items': string;
+        icon: {
+            size: string;
+        };
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+    };
+    error: {
+        color: string;
+    };
+    success: {
+        color: string;
+    };
+    information: {
+        color: string;
+    };
+};
+export type ComponentInlineMessage = typeof componentInlineMessage;

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

@@ -0,0 +1,88 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentSelect: {
+    shared: {
+        display: string;
+        flexDirection: string;
+        gap: string;
+        maxWidth: string;
+        width: string;
+        hover: {
+            backgroundColor: string;
+            outline: string;
+        };
+        pressed: {
+            backgroundColor: string;
+        };
+    };
+    label: {
+        color: string;
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+    };
+    helpText: {
+        color: string;
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+    };
+    button: {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        marginTop: string;
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
+        height: string;
+        paddingLeft: string;
+        paddingRight: string;
+        color: string;
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+        focused: {
+            outline: string;
+            'outline-offset': string;
+        };
+        disabled: {
+            backgroundColor: string;
+            cursor: string;
+            color: string;
+            border: string;
+        };
+        error: {
+            border: string;
+        };
+    };
+    option: {
+        paddingLeft: string;
+        paddingRight: string;
+        paddingTop: string;
+        paddingBottom: string;
+        focused: {
+            outline: string;
+            'outline-offset': string;
+            backgroundColor: string;
+        };
+    };
+    listBox: {
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+        border: string;
+        backgroundColor: string;
+        shadow: string;
+    };
+};
+export type ComponentSelect = typeof componentSelect;

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

@@ -207,5 +207,55 @@ export declare const semanticTypography: {
         letterSpacing: string;
         fontWidth: number;
     };
+    'label-form-sm': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'label-form-md': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'label-form-inline-sm': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'label-form-inline-md': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'label-form-compact-sm': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'label-form-compact-md': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'label-form-inline-compact-sm': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'label-form-inline-compact-md': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'help-text-form-md': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'help-text-form-compact-md': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
 };
 export type SemanticTypography = typeof semanticTypography;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "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": {
@@ -14,6 +14,16 @@
       "import": "./dist/avatar.js",
       "require": "./dist/avatar.cjs"
     },
+    "./AvatarLink": {
+      "types": "./dist/types/avatarLink.d.ts",
+      "import": "./dist/avatarLink.js",
+      "require": "./dist/avatarLink.cjs"
+    },
+    "./AvatarButton": {
+      "types": "./dist/types/avatarButton.d.ts",
+      "import": "./dist/avatarButton.js",
+      "require": "./dist/avatarButton.cjs"
+    },
     "./button": {
       "types": "./dist/types/button.d.ts",
       "import": "./dist/button.js",
@@ -59,6 +69,16 @@
       "import": "./dist/TopBar.js",
       "require": "./dist/TopBar.cjs"
     },
+    "./inline-message": {
+      "types": "./dist/types/inline-message.d.ts",
+      "import": "./dist/inline-message.js",
+      "require": "./dist/inline-message.cjs"
+    },
+    "./select": {
+      "types": "./dist/types/select.d.ts",
+      "import": "./dist/select.js",
+      "require": "./dist/select.cjs"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -103,7 +123,9 @@
     "./component/icon.css": "./dist/styleD/build/css/component/icon.css",
     "./component/favicon.css": "./dist/styleD/build/css/component/favicon.css",
     "./component/menu.css": "./dist/styleD/build/css/component/menu.css",
-    "./component/TopBar.css": "./dist/styleD/build/css/component/TopBar.css"
+    "./component/TopBar.css": "./dist/styleD/build/css/component/TopBar.css",
+    "./component/inlineMessage.css": "./dist/styleD/build/css/component/inlineMessage.css",
+    "./component/select.css": "./dist/styleD/build/css/component/select.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": {
@@ -111,6 +133,12 @@
       "avatar": [
         "./dist/types/avatar.d.ts"
       ],
+      "AvatarButton": [
+        "./dist/types/avatarButton.d.ts"
+      ],
+      "AvatarLink": [
+        "./dist/types/avatarLink.d.ts"
+      ],
       "button": [
         "./dist/types/button.d.ts"
       ],
@@ -149,6 +177,12 @@
       ],
       "menu": [
         "./dist/types/menu.d.ts"
+      ],
+      "inline-message": [
+        "./dist/types/inline-message.d.ts"
+      ],
+      "select": [
+        "./dist/types/select.d.ts"
       ]
     }
   },
@@ -203,7 +237,7 @@
     "react-dom": "17.0.2",
     "remark-gfm": "^4.0.1",
     "rimraf": "6.1.3",
-    "rollup": "4.60.0",
+    "rollup": "4.60.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-esbuild": "6.2.1",
     "rollup-plugin-import-css": "^4.2.0",
@@ -213,8 +247,8 @@
     "ts-jest": "29.4.6",
     "tslib": "2.8.1",
     "typescript": "5.1.3",
-    "vite": "^8.0.2",
-    "vite-plugin-svgr": "^4.5.0"
+    "vite": "^8.0.3",
+    "vite-plugin-svgr": "^5.0.0"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11.4 <=11.14.0",