@guardian/stand 0.0.50 → 0.0.52

package/dist/styleD/build/typescript/component/tagPicker.d.ts

@@ -0,0 +1,20 @@
+//#region src/styleD/build/typescript/component/tagPicker.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentTagPicker: {
+  shared: {
+    width: string;
+    gap: string;
+  };
+  select: {
+    flexBasis: string;
+  };
+  offlineSection: {
+    justifyContent: string;
+    gap: string;
+  };
+};
+type ComponentTagPicker = typeof componentTagPicker;
+//#endregion
+export { ComponentTagPicker, componentTagPicker };

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

@@ -0,0 +1,17 @@
+//#region src/styleD/build/typescript/component/tagPicker.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentTagPicker = {
+	shared: {
+		width: "100%",
+		gap: "15px"
+	},
+	select: { flexBasis: "25%" },
+	offlineSection: {
+		justifyContent: "flex-start",
+		gap: "4px"
+	}
+};
+//#endregion
+export { componentTagPicker };

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

@@ -37,8 +37,8 @@ const componentTagTable = {
 		color: "#ffffff",
 		paddingX: "10px",
 		paddingY: "0px",
-		backgroundColor: "#8d8d8d",
-		backgroundHoverColor: "#545454",
+		backgroundColor: "#545454",
+		backgroundHoverColor: "#333333",
 		fontWeight: 400,
 		fontSize: "13px"
 	},

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

@@ -37,8 +37,8 @@ const componentTagTable = {
 		color: "#ffffff",
 		paddingX: "10px",
 		paddingY: "0px",
-		backgroundColor: "#8d8d8d",
-		backgroundHoverColor: "#545454",
+		backgroundColor: "#545454",
+		backgroundHoverColor: "#333333",
 		fontWeight: 400,
 		fontSize: "13px"
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -297,6 +297,16 @@
         "default": "./dist/Layout.cjs"
       }
     },
+    "./Modal": {
+      "import": {
+        "types": "./dist/Modal.d.ts",
+        "default": "./dist/Modal.js"
+      },
+      "require": {
+        "types": "./dist/Modal.d.cts",
+        "default": "./dist/Modal.cjs"
+      }
+    },
     "./utils": {
       "import": {
         "types": "./dist/utils.d.ts",
@@ -348,7 +358,8 @@
     "./component/intendedAudienceSignifier.css": "./dist/styleD/build/css/component/intendedAudienceSignifier.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"
+    "./component/layout.css": "./dist/styleD/build/css/component/layout.css",
+    "./component/modal.css": "./dist/styleD/build/css/component/modal.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -441,6 +452,9 @@
       ],
       "Layout": [
         "./dist/Layout.d.ts"
+      ],
+      "Modal": [
+        "./dist/Modal.d.ts"
       ]
     }
   },

package/dist/components/TagPicker/TagAutocomplete.cjs

@@ -1,118 +0,0 @@
-const require_Autocomplete = require("./Autocomplete.cjs");
-let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
-//#region src/components/TagPicker/TagAutocomplete.tsx
-/**
-* ## TagAutocomplete
-*
-* *Status: Testing*
-*
-* Part of the overall TagPicker component, the TagAutocomplete provides an accessible
-* autocomplete input for selecting tags from a list of options, based on the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox) component.
-*
-* **Peer dependencies:**
-* - `react-aria-components`
-*
-* See the `peerDependencies` section of the `package.json` for compatible versions to install.
-*
-* ## Usage
-*
-* *Example with TagAutocomplete and TagTable combined:*
-*
-* ```tsx
-* import { TagAutocomplete, TagTable } from '@guardian/stand';
-*
-* // Define a type for your tags — it must include `id` and `name`,
-* // plus any extra fields TagTable needs (type, sectionName)
-* type MyTag = {
-*   id: number;
-*   name: string;
-*   type: string;
-*   sectionName: string;
-* };
-*
-* const allTags: MyTag[] = [
-*   { id: 1, name: 'UK news', type: 'Keyword', sectionName: 'World' },
-*   { id: 2, name: 'US politics', type: 'Keyword', sectionName: 'Politics' },
-*   // ...
-* ];
-*
-* const Component = () => {
-*   const [selectedTags, setSelectedTags] = useState<MyTag[]>([]);
-*   const [options, setOptions] = useState<MyTag[]>([]);
-*   const [value, setValue] = useState('');
-*
-*   const onTextInputChange = (inputText: string) => {
-*     setValue(inputText);
-*     if (inputText === '') {
-*       setOptions([]);
-*       return;
-*     }
-*
-*     if (inputText === '*') {
-*       setOptions(allTags);
-*       return;
-*     }
-*
-*     // Simple filtering against allTags
-*     const filteredItems = allTags.filter((t) =>
-*       t.name.toLowerCase().includes(inputText.toLowerCase()),
-*     );
-*     setOptions(filteredItems);
-*   };
-*
-*   return (
-*     <>
-*       <div
-*         css={css`
-*           display: flex;
-*         `}
-*       >
-*         <TagAutocomplete
-*           onTextInputChange={onTextInputChange}
-*           options={options}
-*           label="Tags"
-*           addTag={(tag) =>
-*             setSelectedTags((tags) => [...tags, tag])
-*           }
-*           loading={false}
-*           placeholder={''}
-*           disabled={false}
-*           value={value}
-*         />
-*         <select>
-*           <option>All tags</option>
-*         </select>
-*       </div>
-*       <TagTable rows={selectedTags} filterRows={() => true} />
-*     </>
-*   );
-* };
-* ```
-*
-* #### Props
-*
-* See {@link TagAutocompleteProps} for a full list of props and descriptions.
-*
-* #### Example
-*
-* This is currently still in testing phase, so a production implementation is not yet available.
-*/
-function TagAutocomplete({ addTag, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
-	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Autocomplete.Autocomplete, {
-		onTextInputChange,
-		options,
-		label,
-		addSelection: addTag,
-		loading,
-		placeholder,
-		disabled,
-		value,
-		"data-testid": dataTestId,
-		loadingIcon,
-		addFirstOnEnter: true,
-		theme,
-		cssOverrides
-	});
-}
-//#endregion
-exports.TagAutocomplete = TagAutocomplete;

package/dist/components/TagPicker/TagAutocomplete.d.cts

@@ -1,144 +0,0 @@
-import { DeepPartial } from "../../util/types.cjs";
-import { ComponentAutocomplete } from "../../styleD/build/typescript/component/autocomplete.cjs";
-import { Tag } from "./types.cjs";
-import { SerializedStyles } from "@emotion/react";
-import { ReactElement } from "react";
-
-//#region src/components/TagPicker/TagAutocomplete.d.ts
-interface TagAutocompleteProps<T extends Tag = Tag> {
-  /** `addTag` - Function called when an option is picked from the dropdown */
-  addTag: (tag: T) => void;
-  /** `loading` - Whether the component is loading options for the dropdown */
-  loading: boolean;
-  /** `onTextInputChange` - Function called when the combobox input changes */
-  onTextInputChange: (inputText: string) => void;
-  /** `options` - The list of options shown in the dropdown */
-  options: T[];
-  /** `label` - An accessible label for the combobox input */
-  label: string;
-  /** `placeholder` - A placeholder string for the combobox input */
-  placeholder: string;
-  /** `disabled` - Whether the combobox input is disabled */
-  disabled: boolean;
-  /** `value` - The value of the combobox input */
-  value: string;
-  'data-testid'?: string;
-  /** `loadingIcon` - Icon used to show loading happening in the dropdown */
-  loadingIcon?: ReactElement;
-  /** `theme` - Used to customise the look and feel of the TagAutocomplete component */
-  theme?: DeepPartial<ComponentAutocomplete>;
-  /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
-  cssOverrides?: SerializedStyles;
-}
-/**
- * ## TagAutocomplete
- *
- * *Status: Testing*
- *
- * Part of the overall TagPicker component, the TagAutocomplete provides an accessible
- * autocomplete input for selecting tags from a list of options, based on the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox) component.
- *
- * **Peer dependencies:**
- * - `react-aria-components`
- *
- * See the `peerDependencies` section of the `package.json` for compatible versions to install.
- *
- * ## Usage
- *
- * *Example with TagAutocomplete and TagTable combined:*
- *
- * ```tsx
- * import { TagAutocomplete, TagTable } from '@guardian/stand';
- *
- * // Define a type for your tags — it must include `id` and `name`,
- * // plus any extra fields TagTable needs (type, sectionName)
- * type MyTag = {
- *   id: number;
- *   name: string;
- *   type: string;
- *   sectionName: string;
- * };
- *
- * const allTags: MyTag[] = [
- *   { id: 1, name: 'UK news', type: 'Keyword', sectionName: 'World' },
- *   { id: 2, name: 'US politics', type: 'Keyword', sectionName: 'Politics' },
- *   // ...
- * ];
- *
- * const Component = () => {
- *   const [selectedTags, setSelectedTags] = useState<MyTag[]>([]);
- *   const [options, setOptions] = useState<MyTag[]>([]);
- *   const [value, setValue] = useState('');
- *
- *   const onTextInputChange = (inputText: string) => {
- *     setValue(inputText);
- *     if (inputText === '') {
- *       setOptions([]);
- *       return;
- *     }
- *
- *     if (inputText === '*') {
- *       setOptions(allTags);
- *       return;
- *     }
- *
- *     // Simple filtering against allTags
- *     const filteredItems = allTags.filter((t) =>
- *       t.name.toLowerCase().includes(inputText.toLowerCase()),
- *     );
- *     setOptions(filteredItems);
- *   };
- *
- *   return (
- *     <>
- *       <div
- *         css={css`
- *           display: flex;
- *         `}
- *       >
- *         <TagAutocomplete
- *           onTextInputChange={onTextInputChange}
- *           options={options}
- *           label="Tags"
- *           addTag={(tag) =>
- *             setSelectedTags((tags) => [...tags, tag])
- *           }
- *           loading={false}
- *           placeholder={''}
- *           disabled={false}
- *           value={value}
- *         />
- *         <select>
- *           <option>All tags</option>
- *         </select>
- *       </div>
- *       <TagTable rows={selectedTags} filterRows={() => true} />
- *     </>
- *   );
- * };
- * ```
- *
- * #### Props
- *
- * See {@link TagAutocompleteProps} for a full list of props and descriptions.
- *
- * #### Example
- *
- * This is currently still in testing phase, so a production implementation is not yet available.
- */
-declare function TagAutocomplete<T extends Tag = Tag>({
-  addTag,
-  loading,
-  onTextInputChange,
-  options,
-  label,
-  placeholder,
-  disabled,
-  value,
-  'data-testid': dataTestId,
-  loadingIcon,
-  theme,
-  cssOverrides
-}: TagAutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { TagAutocomplete };

package/dist/components/TagPicker/TagAutocomplete.d.ts

@@ -1,144 +0,0 @@
-import { DeepPartial } from "../../util/types.js";
-import { ComponentAutocomplete } from "../../styleD/build/typescript/component/autocomplete.js";
-import { Tag } from "./types.js";
-import { ReactElement } from "react";
-import { SerializedStyles } from "@emotion/react";
-
-//#region src/components/TagPicker/TagAutocomplete.d.ts
-interface TagAutocompleteProps<T extends Tag = Tag> {
-  /** `addTag` - Function called when an option is picked from the dropdown */
-  addTag: (tag: T) => void;
-  /** `loading` - Whether the component is loading options for the dropdown */
-  loading: boolean;
-  /** `onTextInputChange` - Function called when the combobox input changes */
-  onTextInputChange: (inputText: string) => void;
-  /** `options` - The list of options shown in the dropdown */
-  options: T[];
-  /** `label` - An accessible label for the combobox input */
-  label: string;
-  /** `placeholder` - A placeholder string for the combobox input */
-  placeholder: string;
-  /** `disabled` - Whether the combobox input is disabled */
-  disabled: boolean;
-  /** `value` - The value of the combobox input */
-  value: string;
-  'data-testid'?: string;
-  /** `loadingIcon` - Icon used to show loading happening in the dropdown */
-  loadingIcon?: ReactElement;
-  /** `theme` - Used to customise the look and feel of the TagAutocomplete component */
-  theme?: DeepPartial<ComponentAutocomplete>;
-  /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
-  cssOverrides?: SerializedStyles;
-}
-/**
- * ## TagAutocomplete
- *
- * *Status: Testing*
- *
- * Part of the overall TagPicker component, the TagAutocomplete provides an accessible
- * autocomplete input for selecting tags from a list of options, based on the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox) component.
- *
- * **Peer dependencies:**
- * - `react-aria-components`
- *
- * See the `peerDependencies` section of the `package.json` for compatible versions to install.
- *
- * ## Usage
- *
- * *Example with TagAutocomplete and TagTable combined:*
- *
- * ```tsx
- * import { TagAutocomplete, TagTable } from '@guardian/stand';
- *
- * // Define a type for your tags — it must include `id` and `name`,
- * // plus any extra fields TagTable needs (type, sectionName)
- * type MyTag = {
- *   id: number;
- *   name: string;
- *   type: string;
- *   sectionName: string;
- * };
- *
- * const allTags: MyTag[] = [
- *   { id: 1, name: 'UK news', type: 'Keyword', sectionName: 'World' },
- *   { id: 2, name: 'US politics', type: 'Keyword', sectionName: 'Politics' },
- *   // ...
- * ];
- *
- * const Component = () => {
- *   const [selectedTags, setSelectedTags] = useState<MyTag[]>([]);
- *   const [options, setOptions] = useState<MyTag[]>([]);
- *   const [value, setValue] = useState('');
- *
- *   const onTextInputChange = (inputText: string) => {
- *     setValue(inputText);
- *     if (inputText === '') {
- *       setOptions([]);
- *       return;
- *     }
- *
- *     if (inputText === '*') {
- *       setOptions(allTags);
- *       return;
- *     }
- *
- *     // Simple filtering against allTags
- *     const filteredItems = allTags.filter((t) =>
- *       t.name.toLowerCase().includes(inputText.toLowerCase()),
- *     );
- *     setOptions(filteredItems);
- *   };
- *
- *   return (
- *     <>
- *       <div
- *         css={css`
- *           display: flex;
- *         `}
- *       >
- *         <TagAutocomplete
- *           onTextInputChange={onTextInputChange}
- *           options={options}
- *           label="Tags"
- *           addTag={(tag) =>
- *             setSelectedTags((tags) => [...tags, tag])
- *           }
- *           loading={false}
- *           placeholder={''}
- *           disabled={false}
- *           value={value}
- *         />
- *         <select>
- *           <option>All tags</option>
- *         </select>
- *       </div>
- *       <TagTable rows={selectedTags} filterRows={() => true} />
- *     </>
- *   );
- * };
- * ```
- *
- * #### Props
- *
- * See {@link TagAutocompleteProps} for a full list of props and descriptions.
- *
- * #### Example
- *
- * This is currently still in testing phase, so a production implementation is not yet available.
- */
-declare function TagAutocomplete<T extends Tag = Tag>({
-  addTag,
-  loading,
-  onTextInputChange,
-  options,
-  label,
-  placeholder,
-  disabled,
-  value,
-  'data-testid': dataTestId,
-  loadingIcon,
-  theme,
-  cssOverrides
-}: TagAutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { TagAutocomplete };

package/dist/components/TagPicker/TagAutocomplete.js

@@ -1,118 +0,0 @@
-import { Autocomplete } from "./Autocomplete.js";
-import { jsx } from "@emotion/react/jsx-runtime";
-//#region src/components/TagPicker/TagAutocomplete.tsx
-/**
-* ## TagAutocomplete
-*
-* *Status: Testing*
-*
-* Part of the overall TagPicker component, the TagAutocomplete provides an accessible
-* autocomplete input for selecting tags from a list of options, based on the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox) component.
-*
-* **Peer dependencies:**
-* - `react-aria-components`
-*
-* See the `peerDependencies` section of the `package.json` for compatible versions to install.
-*
-* ## Usage
-*
-* *Example with TagAutocomplete and TagTable combined:*
-*
-* ```tsx
-* import { TagAutocomplete, TagTable } from '@guardian/stand';
-*
-* // Define a type for your tags — it must include `id` and `name`,
-* // plus any extra fields TagTable needs (type, sectionName)
-* type MyTag = {
-*   id: number;
-*   name: string;
-*   type: string;
-*   sectionName: string;
-* };
-*
-* const allTags: MyTag[] = [
-*   { id: 1, name: 'UK news', type: 'Keyword', sectionName: 'World' },
-*   { id: 2, name: 'US politics', type: 'Keyword', sectionName: 'Politics' },
-*   // ...
-* ];
-*
-* const Component = () => {
-*   const [selectedTags, setSelectedTags] = useState<MyTag[]>([]);
-*   const [options, setOptions] = useState<MyTag[]>([]);
-*   const [value, setValue] = useState('');
-*
-*   const onTextInputChange = (inputText: string) => {
-*     setValue(inputText);
-*     if (inputText === '') {
-*       setOptions([]);
-*       return;
-*     }
-*
-*     if (inputText === '*') {
-*       setOptions(allTags);
-*       return;
-*     }
-*
-*     // Simple filtering against allTags
-*     const filteredItems = allTags.filter((t) =>
-*       t.name.toLowerCase().includes(inputText.toLowerCase()),
-*     );
-*     setOptions(filteredItems);
-*   };
-*
-*   return (
-*     <>
-*       <div
-*         css={css`
-*           display: flex;
-*         `}
-*       >
-*         <TagAutocomplete
-*           onTextInputChange={onTextInputChange}
-*           options={options}
-*           label="Tags"
-*           addTag={(tag) =>
-*             setSelectedTags((tags) => [...tags, tag])
-*           }
-*           loading={false}
-*           placeholder={''}
-*           disabled={false}
-*           value={value}
-*         />
-*         <select>
-*           <option>All tags</option>
-*         </select>
-*       </div>
-*       <TagTable rows={selectedTags} filterRows={() => true} />
-*     </>
-*   );
-* };
-* ```
-*
-* #### Props
-*
-* See {@link TagAutocompleteProps} for a full list of props and descriptions.
-*
-* #### Example
-*
-* This is currently still in testing phase, so a production implementation is not yet available.
-*/
-function TagAutocomplete({ addTag, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
-	return /* @__PURE__ */ jsx(Autocomplete, {
-		onTextInputChange,
-		options,
-		label,
-		addSelection: addTag,
-		loading,
-		placeholder,
-		disabled,
-		value,
-		"data-testid": dataTestId,
-		loadingIcon,
-		addFirstOnEnter: true,
-		theme,
-		cssOverrides
-	});
-}
-//#endregion
-export { TagAutocomplete };