npm - @guardian/stand - Versions diffs - 0.0.53 → 0.0.54 - Mend

@guardian/stand 0.0.53 → 0.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/dist/components/TagTable/styles.js ADDED Viewed

@@ -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/styleD/build/css/component/autocomplete.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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