@guardian/stand 0.0.52 → 0.0.54

package/dist/components/TagTable/styles.js

@@ -0,0 +1,160 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { componentTagTable } from "../../styleD/build/typescript/component/tagTable.js";
+import { css } from "@emotion/react";
+//#region src/components/TagTable/styles.ts
+const tagTableHeaderStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
+		background-color: ${theme.header.backgroundColor};
+		padding: ${theme.header.paddingTop} ${theme.header.paddingRight}
+			${theme.header.paddingBottom} ${theme.header.paddingLeft};
+		display: flex;
+		gap: ${theme.header.gap};
+		justify-content: space-between;
+		align-items: center;
+	`;
+};
+const tagTableHeaderTextStyles = (partialTheme = {}) => {
+	return css`
+		display: flex;
+		flex-direction: column;
+		gap: ${mergeDeep(componentTagTable, partialTheme).header.gap};
+	`;
+};
+const tagTableHeadingStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
+		font-weight: ${theme.heading.fontWeight};
+		font-size: ${theme.heading.fontSize};
+	`;
+};
+const tagTableSubHeadingStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
+		font-weight: ${theme.subHeading.fontWeight};
+		font-size: ${theme.subHeading.fontSize};
+	`;
+};
+const tagTableCellStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
+		padding: ${theme.cell.paddingY} ${theme.cell.paddingX};
+		vertical-align: middle;
+
+		:first-of-type {
+			padding-left: ${theme.cell.firstCellPaddingLeft};
+		}
+
+		:not(:last-child) {
+			border-right-width: ${theme.cell.borderBetweenCells.borderWidth};
+			border-right-style: ${theme.cell.borderBetweenCells.borderStyle};
+			border-right-color: ${theme.cell.borderBetweenCells.borderColor};
+		}
+	`;
+};
+const tagTableRowStyles = (canDrag, highlightFirstRow, partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
+		background-color: ${theme.row.backgroundColor};
+		height: ${theme.row.height};
+		&:not(:last-child) {
+			border-bottom-color: ${theme.row.borderBottom.borderColor};
+			border-bottom-style: ${theme.row.borderBottom.borderStyle};
+			border-bottom-width: ${theme.row.borderBottom.borderWidth};
+		}
+
+		:hover {
+			background-color: ${theme.row.backgroundHoverColor};
+			${canDrag ? "cursor: grab;" : null}
+			button[slot='drag'] {
+				opacity: 1;
+			}
+		}
+		${highlightFirstRow && `:first-of-type {
+                    background-color: ${theme.row.firstRowBackgroundColor};
+
+                    :hover {
+                        background-color: ${theme.row.firstRowBackgroundHoverColor};
+                    }
+                }`}
+	`;
+};
+const tagTableStyles = (highlightFirstRow, partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
+		width: 100%;
+		border-collapse: collapse;
+
+		.react-aria-DropIndicator[data-drop-target] {
+			height: ${theme.row.height};
+
+			${highlightFirstRow ? `&:first-child {
+						background-color: ${theme.row.firstRowBackgroundColor};
+					}` : ""}
+		}
+	`;
+};
+const tagTableRemoveButtonStyles = css`
+	background: none;
+	border: none;
+	padding: 0;
+	:hover {
+		cursor: pointer;
+	}
+`;
+const tagTableAddButtonStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
+		:hover {
+			cursor: pointer;
+			background-color: ${theme.addButton.backgroundHoverColor};
+		}
+
+		color: ${theme.addButton.color};
+		-webkit-text-decoration: none;
+		text-decoration: none;
+		padding: ${theme.addButton.paddingY} ${theme.addButton.paddingX};
+		position: relative;
+		border: 0;
+		border-radius: 0;
+		cursor: pointer;
+		justify-content: center;
+		align-items: center;
+		font-weight: ${theme.addButton.fontWeight};
+		font-size: ${theme.addButton.fontSize};
+		height: 24px;
+		width: fit-content;
+		line-height: 1;
+		flex-direction: row;
+		gap: 8px;
+		background-color: ${theme.addButton.backgroundColor};
+		display: inline-flex;
+	`;
+};
+const tagTableDragButtonStyles = css`
+	background: none;
+	border: none;
+	padding: 5px;
+	margin: 0;
+	display: flex;
+	align-items: center;
+	opacity: 0;
+
+	&:focus {
+		opacity: 1;
+	}
+`;
+const tagTableTypeBadgeStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
+	return css`
+		white-space: nowrap;
+		text-transform: uppercase;
+		color: ${theme.typeBadge.color};
+		background-color: ${theme.typeBadge.backgroundColor};
+		padding: ${theme.typeBadge.paddingY} ${theme.typeBadge.paddingX};
+		font-size: ${theme.typeBadge.fontSize};
+		font-weight: ${theme.typeBadge.fontWeight};
+	`;
+};
+//#endregion
+export { tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeaderStyles, tagTableHeaderTextStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableSubHeadingStyles, tagTableTypeBadgeStyles };

package/dist/components/TopBar/TopBarNavigation/TopBarNavigation.cjs

@@ -32,7 +32,7 @@ function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChi
 							children: icon
 						}),
 						/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
-							css: require_styles.topBarNavigationTextStyles(mergedTheme),
+							css: require_styles.topBarNavigationTextStyles(mergedTheme, { hasIcon: !!icon }),
 							children: text
 						}),
 						/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
@@ -60,7 +60,7 @@ function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChi
 				size: iconSize,
 				children: icon
 			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
-				css: require_styles.topBarNavigationTextStyles(mergedTheme),
+				css: require_styles.topBarNavigationTextStyles(mergedTheme, { hasIcon: !!icon }),
 				children: text
 			})]
 		})

package/dist/components/TopBar/TopBarNavigation/TopBarNavigation.js

@@ -32,7 +32,7 @@ function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChi
 							children: icon
 						}),
 						/* @__PURE__ */ jsx("span", {
-							css: topBarNavigationTextStyles(mergedTheme),
+							css: topBarNavigationTextStyles(mergedTheme, { hasIcon: !!icon }),
 							children: text
 						}),
 						/* @__PURE__ */ jsx("div", {
@@ -60,7 +60,7 @@ function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChi
 				size: iconSize,
 				children: icon
 			}), /* @__PURE__ */ jsx("span", {
-				css: topBarNavigationTextStyles(mergedTheme),
+				css: topBarNavigationTextStyles(mergedTheme, { hasIcon: !!icon }),
 				children: text
 			})]
 		})

package/dist/components/TopBar/TopBarNavigation/styles.cjs

@@ -78,8 +78,8 @@ const topBarNavigationDividerStyles = (theme, { alignment }, _menuOpen) => _emot
 				${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
 			`}
 `;
-const topBarNavigationTextStyles = (theme) => _emotion_react.css`
-	margin-left: ${theme.text.margin.left};
+const topBarNavigationTextStyles = (theme, { hasIcon }) => _emotion_react.css`
+	${hasIcon && `margin-left: ${theme.text.margin.left};`}
 `;
 const topBarNavigationTypographyStyles = (theme, size) => {
 	return size == "md" ? _emotion_react.css`

package/dist/components/TopBar/TopBarNavigation/styles.js

@@ -78,8 +78,8 @@ const topBarNavigationDividerStyles = (theme, { alignment }, _menuOpen) => css`
 				${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
 			`}
 `;
-const topBarNavigationTextStyles = (theme) => css`
-	margin-left: ${theme.text.margin.left};
+const topBarNavigationTextStyles = (theme, { hasIcon }) => css`
+	${hasIcon && `margin-left: ${theme.text.margin.left};`}
 `;
 const topBarNavigationTypographyStyles = (theme, size) => {
 	return size == "md" ? css`

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

@@ -5,17 +5,24 @@
 :root {
 	--component-autocomplete-input-color: #000000;
 	--component-autocomplete-input-background-color: #ffffff;
-	--component-autocomplete-input-disabled-background-color: #dcdcdc;
-	--component-autocomplete-input-border-width: 1px;
+	--component-autocomplete-input-border-width: 0.0625rem;
 	--component-autocomplete-input-border-style: solid;
-	--component-autocomplete-input-border-color: #8d8d8d;
-	--component-autocomplete-input-padding: 11px;
+	--component-autocomplete-input-border-color: #545454;
+	--component-autocomplete-input-padding: 0.75rem;
+	--component-autocomplete-input-border-radius: 0.25rem;
+	--component-autocomplete-input-hover-background-color: #f6f6f6;
+	--component-autocomplete-input-focused-outline: 0.125rem solid #0072a9;
+	--component-autocomplete-input-focused-outline-offset: 0.125rem;
+	--component-autocomplete-input-disabled-background-color: #ffffff;
+	--component-autocomplete-input-disabled-cursor: not-allowed;
+	--component-autocomplete-input-disabled-color: #999999;
+	--component-autocomplete-input-disabled-border: 0.0625rem solid #dcdcdc;
 	--component-autocomplete-icon-size: 20px;
 	--component-autocomplete-icon-padding-x: 4px;
 	--component-autocomplete-icon-color: #bababa;
-	--component-autocomplete-listbox-border-width: 1px;
+	--component-autocomplete-listbox-border-width: 0.0625rem;
 	--component-autocomplete-listbox-border-style: solid;
-	--component-autocomplete-listbox-border-color: #8d8d8d;
+	--component-autocomplete-listbox-border-color: #545454;
 	--component-autocomplete-listbox-padding-y: 8px;
 	--component-autocomplete-listbox-padding-x: 0px;
 	--component-autocomplete-listbox-background-color: #ffffff;

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

@@ -5,6 +5,7 @@
 :root {
 	--component-tag-picker-shared-width: 100%;
 	--component-tag-picker-shared-gap: 15px;
+	--component-tag-picker-search-width: 100%;
 	--component-tag-picker-select-flex-basis: 25%;
 	--component-tag-picker-offline-section-justify-content: flex-start;
 	--component-tag-picker-offline-section-gap: 4px;

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

@@ -3,12 +3,16 @@
  */
 
 :root {
-	--component-tag-table-heading-background-color: #dcdcdc;
+	--component-tag-table-header-background-color: #dcdcdc;
+	--component-tag-table-header-padding-top: 3px;
+	--component-tag-table-header-padding-right: 5px;
+	--component-tag-table-header-padding-bottom: 3px;
+	--component-tag-table-header-padding-left: 12px;
+	--component-tag-table-header-gap: 4px;
 	--component-tag-table-heading-font-weight: 700;
-	--component-tag-table-heading-padding-top: 3px;
-	--component-tag-table-heading-padding-right: 5px;
-	--component-tag-table-heading-padding-bottom: 3px;
-	--component-tag-table-heading-padding-left: 12px;
+	--component-tag-table-heading-font-size: 14px;
+	--component-tag-table-sub-heading-font-weight: 400;
+	--component-tag-table-sub-heading-font-size: 12px;
 	--component-tag-table-cell-padding-x: 5px;
 	--component-tag-table-cell-padding-y: 3px;
 	--component-tag-table-cell-first-cell-padding-left: 12px;

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

@@ -6,11 +6,22 @@ const componentAutocomplete = {
 	input: {
 		color: "#000000",
 		backgroundColor: "#ffffff",
-		disabledBackgroundColor: "#dcdcdc",
-		borderWidth: "1px",
+		borderWidth: "0.0625rem",
 		borderStyle: "solid",
-		borderColor: "#8d8d8d",
-		padding: "11px"
+		borderColor: "#545454",
+		padding: "0.75rem",
+		borderRadius: "0.25rem",
+		hover: { backgroundColor: "#f6f6f6" },
+		focused: {
+			outline: "0.125rem solid #0072a9",
+			outlineOffset: "0.125rem"
+		},
+		disabled: {
+			backgroundColor: "#ffffff",
+			cursor: "not-allowed",
+			color: "#999999",
+			border: "0.0625rem solid #dcdcdc"
+		}
 	},
 	icon: {
 		size: "20px",
@@ -18,9 +29,9 @@ const componentAutocomplete = {
 		color: "#bababa"
 	},
 	listbox: {
-		borderWidth: "1px",
+		borderWidth: "0.0625rem",
 		borderStyle: "solid",
-		borderColor: "#8d8d8d",
+		borderColor: "#545454",
 		paddingY: "8px",
 		paddingX: "0px",
 		backgroundColor: "#ffffff",

package/dist/styleD/build/typescript/component/autocomplete.d.cts

@@ -6,11 +6,24 @@ declare const componentAutocomplete: {
   input: {
     color: string;
     backgroundColor: string;
-    disabledBackgroundColor: string;
     borderWidth: string;
     borderStyle: string;
     borderColor: string;
     padding: string;
+    borderRadius: string;
+    hover: {
+      backgroundColor: string;
+    };
+    focused: {
+      outline: string;
+      outlineOffset: string;
+    };
+    disabled: {
+      backgroundColor: string;
+      cursor: string;
+      color: string;
+      border: string;
+    };
   };
   icon: {
     size: string;

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

@@ -6,11 +6,24 @@ declare const componentAutocomplete: {
   input: {
     color: string;
     backgroundColor: string;
-    disabledBackgroundColor: string;
     borderWidth: string;
     borderStyle: string;
     borderColor: string;
     padding: string;
+    borderRadius: string;
+    hover: {
+      backgroundColor: string;
+    };
+    focused: {
+      outline: string;
+      outlineOffset: string;
+    };
+    disabled: {
+      backgroundColor: string;
+      cursor: string;
+      color: string;
+      border: string;
+    };
   };
   icon: {
     size: string;

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

@@ -6,11 +6,22 @@ const componentAutocomplete = {
 	input: {
 		color: "#000000",
 		backgroundColor: "#ffffff",
-		disabledBackgroundColor: "#dcdcdc",
-		borderWidth: "1px",
+		borderWidth: "0.0625rem",
 		borderStyle: "solid",
-		borderColor: "#8d8d8d",
-		padding: "11px"
+		borderColor: "#545454",
+		padding: "0.75rem",
+		borderRadius: "0.25rem",
+		hover: { backgroundColor: "#f6f6f6" },
+		focused: {
+			outline: "0.125rem solid #0072a9",
+			outlineOffset: "0.125rem"
+		},
+		disabled: {
+			backgroundColor: "#ffffff",
+			cursor: "not-allowed",
+			color: "#999999",
+			border: "0.0625rem solid #dcdcdc"
+		}
 	},
 	icon: {
 		size: "20px",
@@ -18,9 +29,9 @@ const componentAutocomplete = {
 		color: "#bababa"
 	},
 	listbox: {
-		borderWidth: "1px",
+		borderWidth: "0.0625rem",
 		borderStyle: "solid",
-		borderColor: "#8d8d8d",
+		borderColor: "#545454",
 		paddingY: "8px",
 		paddingX: "0px",
 		backgroundColor: "#ffffff",

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

@@ -7,6 +7,7 @@ const componentTagPicker = {
 		width: "100%",
 		gap: "15px"
 	},
+	search: { width: "100%" },
 	select: { flexBasis: "25%" },
 	offlineSection: {
 		justifyContent: "flex-start",

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

@@ -7,6 +7,9 @@ declare const componentTagPicker: {
     width: string;
     gap: string;
   };
+  search: {
+    width: string;
+  };
   select: {
     flexBasis: string;
   };

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

@@ -7,6 +7,9 @@ declare const componentTagPicker: {
     width: string;
     gap: string;
   };
+  search: {
+    width: string;
+  };
   select: {
     flexBasis: string;
   };

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

@@ -7,6 +7,7 @@ const componentTagPicker = {
 		width: "100%",
 		gap: "15px"
 	},
+	search: { width: "100%" },
 	select: { flexBasis: "25%" },
 	offlineSection: {
 		justifyContent: "flex-start",

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

@@ -3,13 +3,21 @@
 * Do not edit directly, this file was auto-generated.
 */
 const componentTagTable = {
-	heading: {
+	header: {
 		backgroundColor: "#dcdcdc",
-		fontWeight: 700,
 		paddingTop: "3px",
 		paddingRight: "5px",
 		paddingBottom: "3px",
-		paddingLeft: "12px"
+		paddingLeft: "12px",
+		gap: "4px"
+	},
+	heading: {
+		fontWeight: 700,
+		fontSize: "14px"
+	},
+	subHeading: {
+		fontWeight: 400,
+		fontSize: "12px"
 	},
 	cell: {
 		paddingX: "5px",

package/dist/styleD/build/typescript/component/tagTable.d.cts

@@ -3,13 +3,21 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const componentTagTable: {
-  heading: {
+  header: {
     backgroundColor: string;
-    fontWeight: number;
     paddingTop: string;
     paddingRight: string;
     paddingBottom: string;
     paddingLeft: string;
+    gap: string;
+  };
+  heading: {
+    fontWeight: number;
+    fontSize: string;
+  };
+  subHeading: {
+    fontWeight: number;
+    fontSize: string;
   };
   cell: {
     paddingX: string;

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

@@ -3,13 +3,21 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const componentTagTable: {
-  heading: {
+  header: {
     backgroundColor: string;
-    fontWeight: number;
     paddingTop: string;
     paddingRight: string;
     paddingBottom: string;
     paddingLeft: string;
+    gap: string;
+  };
+  heading: {
+    fontWeight: number;
+    fontSize: string;
+  };
+  subHeading: {
+    fontWeight: number;
+    fontSize: string;
   };
   cell: {
     paddingX: string;

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

@@ -3,13 +3,21 @@
 * Do not edit directly, this file was auto-generated.
 */
 const componentTagTable = {
-	heading: {
+	header: {
 		backgroundColor: "#dcdcdc",
-		fontWeight: 700,
 		paddingTop: "3px",
 		paddingRight: "5px",
 		paddingBottom: "3px",
-		paddingLeft: "12px"
+		paddingLeft: "12px",
+		gap: "4px"
+	},
+	heading: {
+		fontWeight: 700,
+		fontSize: "14px"
+	},
+	subHeading: {
+		fontWeight: 400,
+		fontSize: "12px"
 	},
 	cell: {
 		paddingX: "5px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },