@guardian/stand 0.0.4 → 0.0.6

package/dist/components/byline/styles.cjs

@@ -0,0 +1,266 @@
+'use strict';
+
+var react = require('@emotion/react');
+var byline = require('../../styleD/build/typescript/component/byline.cjs');
+var util = require('../util.cjs');
+
+const bylineContainerStyles = react.css`
+	position: relative;
+	width: 100%;
+`;
+const bylineEditorStyles = (partialTheme = {}) => {
+  const theme = util.mergeDeep(byline.componentByline, partialTheme);
+  return react.css`
+		border-color: ${theme.borderColor};
+		border-style: ${theme.borderStyle};
+		border-width: ${theme.borderWidth};
+		background-color: ${theme.backgroundColor};
+		color: ${theme.color};
+
+		/* ProseMirror styles from prosemirror-view/styles/prosemirror.css */
+		.ProseMirror {
+			padding: 4px 4px;
+			word-wrap: break-word;
+			white-space: pre-wrap;
+			white-space: break-spaces;
+			-webkit-font-variant-ligatures: none;
+			font-variant-ligatures: none;
+			font-feature-settings: 'liga' 0; /* the above doesn't seem to work in Edge */
+			line-height: ${theme.lineHeight};
+		}
+
+		.ProseMirror[contenteditable='false'] {
+			background: ${theme.readonlyBackgroundColor};
+			cursor: 'not-allowed';
+		}
+
+		.ProseMirror pre {
+			white-space: pre-wrap;
+		}
+
+		.ProseMirror li {
+			position: relative;
+		}
+
+		.ProseMirror-hideselection *::selection {
+			background: transparent;
+		}
+		.ProseMirror-hideselection *::-moz-selection {
+			background: transparent;
+		}
+		.ProseMirror-hideselection {
+			caret-color: transparent;
+		}
+
+		/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
+		.ProseMirror [draggable][contenteditable='false'] {
+			user-select: text;
+		}
+
+		.ProseMirror-selectednode {
+			outline: 1px solid ${theme.chip.selectedBorderColor};
+		}
+
+		/* Make sure li selections wrap around markers */
+
+		li.ProseMirror-selectednode {
+			outline: none;
+		}
+
+		li.ProseMirror-selectednode:after {
+			content: '';
+			position: absolute;
+			left: -32px;
+			right: -2px;
+			top: -2px;
+			bottom: -2px;
+			border: 1px solid ${theme.chip.selectedBorderColor};
+			pointer-events: none;
+		}
+
+		/* Protect against generic img rules */
+
+		img.ProseMirror-separator {
+			display: inline !important;
+			border: none !important;
+			margin: 0 !important;
+		}
+
+		.ProseMirror:focus {
+			outline: none;
+		}
+
+		/* Invisible styles from @guardian/prosemirror-invisibles/dist/style.css */
+
+		.invisible {
+			/* Chrome in particular dislikes doing the right thing
+		* with carets and inline elements when contenteditable
+		* is 'false'. See e.g. https://github.com/ProseMirror/prosemirror/issues/1061
+   		*/
+			display: inline;
+			position: relative;
+			pointer-events: none;
+		}
+
+		.invisible:before {
+			position: relative;
+			caret-color: inherit;
+			color: ${theme.invisiblesColor};
+			display: inline-block;
+			font-weight: 400;
+			font-style: normal;
+			line-height: initial;
+			width: 0;
+			top: 0;
+			left: 0;
+			z-index: 1;
+		}
+
+		.invisible__selected-marker {
+			position: absolute;
+			caret-color: inherit;
+			background-color: #dcdcdc;
+			display: inline-block;
+			font-weight: 400;
+			font-style: normal;
+			line-height: initial;
+			top: 0;
+			left: 0;
+			width: 10px;
+			height: 100%;
+			z-index: 0;
+		}
+
+		.ProseMirror-focused .invisible__selected-marker {
+			background-color: #b4d9ff;
+		}
+
+		.ProseMirror-focused .invisible--is-selected::before {
+			background-color: #b4d8ff;
+		}
+
+		.invisible--is-selected::before {
+			background-color: #dcdcdc;
+		}
+
+		.invisible--space:before {
+			content: '·';
+		}
+
+		.invisible--nb-space {
+			vertical-align: text-bottom;
+		}
+
+		.invisible--nb-space:before {
+			font-size: 15px;
+			content: '^';
+			position: absolute;
+			top: 9px;
+			left: -1px;
+		}
+
+		chip {
+			border-color: ${theme.chip.borderColor};
+			border-style: ${theme.chip.borderStyle};
+			border-width: ${theme.chip.borderWidth};
+			border-radius: ${theme.chip.borderRadius};
+			padding: ${theme.chip.paddingY} ${theme.chip.paddingX};
+			color: ${theme.chip.color};
+
+			cursor: default;
+
+			&[data-type='tagged'] {
+				background-color: ${theme.chip.taggedBackgroundColor};
+			}
+
+			&[data-type='untagged'] {
+				color: ${theme.chip.untaggedColor};
+			}
+
+			::after {
+				content: '';
+				display: inline-block;
+			}
+
+			span {
+				cursor: pointer;
+				margin-left: 5px;
+			}
+		}
+
+		/* Leave space between subsequent chips */
+		chip + chip {
+			margin-left: 3px;
+		}
+
+		.placeholder {
+			display: inline-block;
+			height: 0;
+			width: 0;
+			white-space: nowrap;
+			color: ${theme.placeholderColor};
+			pointer-events: none;
+			cursor: text;
+		}
+	`;
+};
+const dropdownContainerStyles = (showDropdown, partialTheme = {}) => {
+  const theme = util.mergeDeep(byline.componentByline["dropdown"], partialTheme);
+  return react.css`
+		position: absolute;
+		box-sizing: border-box;
+		width: 100%;
+		z-index: 1000;
+		border-width: ${theme.borderWidth};
+		border-style: ${theme.borderStyle};
+		border-color: ${theme.borderColor};
+		background-color: ${theme.backgroundColor};
+		display: ${showDropdown ? "block" : "none"};
+		max-height: ${theme.maxHeight};
+		overflow-y: auto;
+	`;
+};
+const dropdownUlStyles = react.css`
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+`;
+const dropdownLiStyles = (partialTheme = {}) => {
+  const theme = util.mergeDeep(byline.componentByline["dropdown"], partialTheme);
+  return react.css`
+		cursor: pointer;
+		padding: 5px;
+		border-bottom-color: ${theme.li.borderBottomColor};
+		border-bottom-width: ${theme.li.borderBottomWidth};
+		border-bottom-style: ${theme.li.borderBottomStyle};
+		color: ${theme.li.color};
+	`;
+};
+const selectedDropdownLiStyles = (partialTheme = {}) => {
+  const theme = util.mergeDeep(byline.componentByline["dropdown"], partialTheme);
+  return react.css`
+		background-color: ${theme.li.selectedBackgroundColor};
+		color: ${theme.li.selectedColor};
+	`;
+};
+const previewStyles = react.css`
+	margin-top: 5px;
+	white-space: pre-wrap;
+`;
+const previewFreeTextStyles = react.css`
+	font-style: italic;
+`;
+const previewContributorStyles = (node) => react.css`
+	${node.attrs.type === "tagged" ? "text-decoration: underline;" : ""}
+	color: inherit;
+`;
+
+exports.bylineContainerStyles = bylineContainerStyles;
+exports.bylineEditorStyles = bylineEditorStyles;
+exports.dropdownContainerStyles = dropdownContainerStyles;
+exports.dropdownLiStyles = dropdownLiStyles;
+exports.dropdownUlStyles = dropdownUlStyles;
+exports.previewContributorStyles = previewContributorStyles;
+exports.previewFreeTextStyles = previewFreeTextStyles;
+exports.previewStyles = previewStyles;
+exports.selectedDropdownLiStyles = selectedDropdownLiStyles;

package/dist/components/byline/styles.js

@@ -0,0 +1,256 @@
+import { css } from '@emotion/react';
+import { componentByline } from '../../styleD/build/typescript/component/byline.js';
+import { mergeDeep } from '../util.js';
+
+const bylineContainerStyles = css`
+	position: relative;
+	width: 100%;
+`;
+const bylineEditorStyles = (partialTheme = {}) => {
+  const theme = mergeDeep(componentByline, partialTheme);
+  return css`
+		border-color: ${theme.borderColor};
+		border-style: ${theme.borderStyle};
+		border-width: ${theme.borderWidth};
+		background-color: ${theme.backgroundColor};
+		color: ${theme.color};
+
+		/* ProseMirror styles from prosemirror-view/styles/prosemirror.css */
+		.ProseMirror {
+			padding: 4px 4px;
+			word-wrap: break-word;
+			white-space: pre-wrap;
+			white-space: break-spaces;
+			-webkit-font-variant-ligatures: none;
+			font-variant-ligatures: none;
+			font-feature-settings: 'liga' 0; /* the above doesn't seem to work in Edge */
+			line-height: ${theme.lineHeight};
+		}
+
+		.ProseMirror[contenteditable='false'] {
+			background: ${theme.readonlyBackgroundColor};
+			cursor: 'not-allowed';
+		}
+
+		.ProseMirror pre {
+			white-space: pre-wrap;
+		}
+
+		.ProseMirror li {
+			position: relative;
+		}
+
+		.ProseMirror-hideselection *::selection {
+			background: transparent;
+		}
+		.ProseMirror-hideselection *::-moz-selection {
+			background: transparent;
+		}
+		.ProseMirror-hideselection {
+			caret-color: transparent;
+		}
+
+		/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
+		.ProseMirror [draggable][contenteditable='false'] {
+			user-select: text;
+		}
+
+		.ProseMirror-selectednode {
+			outline: 1px solid ${theme.chip.selectedBorderColor};
+		}
+
+		/* Make sure li selections wrap around markers */
+
+		li.ProseMirror-selectednode {
+			outline: none;
+		}
+
+		li.ProseMirror-selectednode:after {
+			content: '';
+			position: absolute;
+			left: -32px;
+			right: -2px;
+			top: -2px;
+			bottom: -2px;
+			border: 1px solid ${theme.chip.selectedBorderColor};
+			pointer-events: none;
+		}
+
+		/* Protect against generic img rules */
+
+		img.ProseMirror-separator {
+			display: inline !important;
+			border: none !important;
+			margin: 0 !important;
+		}
+
+		.ProseMirror:focus {
+			outline: none;
+		}
+
+		/* Invisible styles from @guardian/prosemirror-invisibles/dist/style.css */
+
+		.invisible {
+			/* Chrome in particular dislikes doing the right thing
+		* with carets and inline elements when contenteditable
+		* is 'false'. See e.g. https://github.com/ProseMirror/prosemirror/issues/1061
+   		*/
+			display: inline;
+			position: relative;
+			pointer-events: none;
+		}
+
+		.invisible:before {
+			position: relative;
+			caret-color: inherit;
+			color: ${theme.invisiblesColor};
+			display: inline-block;
+			font-weight: 400;
+			font-style: normal;
+			line-height: initial;
+			width: 0;
+			top: 0;
+			left: 0;
+			z-index: 1;
+		}
+
+		.invisible__selected-marker {
+			position: absolute;
+			caret-color: inherit;
+			background-color: #dcdcdc;
+			display: inline-block;
+			font-weight: 400;
+			font-style: normal;
+			line-height: initial;
+			top: 0;
+			left: 0;
+			width: 10px;
+			height: 100%;
+			z-index: 0;
+		}
+
+		.ProseMirror-focused .invisible__selected-marker {
+			background-color: #b4d9ff;
+		}
+
+		.ProseMirror-focused .invisible--is-selected::before {
+			background-color: #b4d8ff;
+		}
+
+		.invisible--is-selected::before {
+			background-color: #dcdcdc;
+		}
+
+		.invisible--space:before {
+			content: '·';
+		}
+
+		.invisible--nb-space {
+			vertical-align: text-bottom;
+		}
+
+		.invisible--nb-space:before {
+			font-size: 15px;
+			content: '^';
+			position: absolute;
+			top: 9px;
+			left: -1px;
+		}
+
+		chip {
+			border-color: ${theme.chip.borderColor};
+			border-style: ${theme.chip.borderStyle};
+			border-width: ${theme.chip.borderWidth};
+			border-radius: ${theme.chip.borderRadius};
+			padding: ${theme.chip.paddingY} ${theme.chip.paddingX};
+			color: ${theme.chip.color};
+
+			cursor: default;
+
+			&[data-type='tagged'] {
+				background-color: ${theme.chip.taggedBackgroundColor};
+			}
+
+			&[data-type='untagged'] {
+				color: ${theme.chip.untaggedColor};
+			}
+
+			::after {
+				content: '';
+				display: inline-block;
+			}
+
+			span {
+				cursor: pointer;
+				margin-left: 5px;
+			}
+		}
+
+		/* Leave space between subsequent chips */
+		chip + chip {
+			margin-left: 3px;
+		}
+
+		.placeholder {
+			display: inline-block;
+			height: 0;
+			width: 0;
+			white-space: nowrap;
+			color: ${theme.placeholderColor};
+			pointer-events: none;
+			cursor: text;
+		}
+	`;
+};
+const dropdownContainerStyles = (showDropdown, partialTheme = {}) => {
+  const theme = mergeDeep(componentByline["dropdown"], partialTheme);
+  return css`
+		position: absolute;
+		box-sizing: border-box;
+		width: 100%;
+		z-index: 1000;
+		border-width: ${theme.borderWidth};
+		border-style: ${theme.borderStyle};
+		border-color: ${theme.borderColor};
+		background-color: ${theme.backgroundColor};
+		display: ${showDropdown ? "block" : "none"};
+		max-height: ${theme.maxHeight};
+		overflow-y: auto;
+	`;
+};
+const dropdownUlStyles = css`
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+`;
+const dropdownLiStyles = (partialTheme = {}) => {
+  const theme = mergeDeep(componentByline["dropdown"], partialTheme);
+  return css`
+		cursor: pointer;
+		padding: 5px;
+		border-bottom-color: ${theme.li.borderBottomColor};
+		border-bottom-width: ${theme.li.borderBottomWidth};
+		border-bottom-style: ${theme.li.borderBottomStyle};
+		color: ${theme.li.color};
+	`;
+};
+const selectedDropdownLiStyles = (partialTheme = {}) => {
+  const theme = mergeDeep(componentByline["dropdown"], partialTheme);
+  return css`
+		background-color: ${theme.li.selectedBackgroundColor};
+		color: ${theme.li.selectedColor};
+	`;
+};
+const previewStyles = css`
+	margin-top: 5px;
+	white-space: pre-wrap;
+`;
+const previewFreeTextStyles = css`
+	font-style: italic;
+`;
+const previewContributorStyles = (node) => css`
+	${node.attrs.type === "tagged" ? "text-decoration: underline;" : ""}
+	color: inherit;
+`;
+
+export { bylineContainerStyles, bylineEditorStyles, dropdownContainerStyles, dropdownLiStyles, dropdownUlStyles, previewContributorStyles, previewFreeTextStyles, previewStyles, selectedDropdownLiStyles };

package/dist/components/tag-picker/TagAutocomplete.cjs

@@ -0,0 +1,107 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var reactAriaComponents = require('react-aria-components');
+var styles = require('./styles.cjs');
+
+function TagAutocomplete({
+  addTag,
+  loading,
+  onChange,
+  options,
+  label,
+  placeholder,
+  disabled,
+  value,
+  "data-testid": dataTestId,
+  loadingIcon,
+  theme,
+  cssOverrides
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      css: [
+        react.css`
+					position: relative;
+				`,
+        cssOverrides
+      ],
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        reactAriaComponents.ComboBox,
+        {
+          "aria-label": label,
+          inputValue: value,
+          onInputChange: onChange,
+          onSelectionChange: (key) => {
+            const tag = options.find((t) => t.id === key);
+            if (tag) {
+              addTag(tag);
+              onChange("");
+            }
+          },
+          allowsEmptyCollection: true,
+          items: options,
+          allowsCustomValue: true,
+          menuTrigger: "focus",
+          shouldFocusWrap: true,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactAriaComponents.Input,
+              {
+                css: styles.tagAutocompleteInputStyles(theme),
+                placeholder,
+                disabled,
+                "data-testid": dataTestId
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactAriaComponents.Popover,
+              {
+                placement: "bottom",
+                css: react.css`
+						width: var(--trigger-width);
+					`,
+                offset: 0,
+                shouldFlip: false,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  reactAriaComponents.ListBox,
+                  {
+                    css: (value || options.length || loading) && styles.listboxStyles(theme),
+                    autoFocus: "first",
+                    renderEmptyState: () => (
+                      // Only show a "no results" box if user has typed
+                      value && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.listboxInfoStyles(theme), children: "No results" })
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Collection, { items: options, children: (item) => /* @__PURE__ */ jsxRuntime.jsx(
+                        reactAriaComponents.ListBoxItem,
+                        {
+                          css: styles.listboxItemStyles(theme),
+                          value: item,
+                          children: item.internalName
+                        },
+                        item.id
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        reactAriaComponents.ListBoxLoadMoreItem,
+                        {
+                          css: styles.listboxInfoStyles(theme),
+                          isLoading: loading,
+                          children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": "Loading", children: loadingIcon ?? "Loading..." })
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+exports.TagAutocomplete = TagAutocomplete;

package/dist/components/tag-picker/TagAutocomplete.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { ComboBox, Input, Popover, ListBox, Collection, ListBoxItem, ListBoxLoadMoreItem } from 'react-aria-components';
+import { tagAutocompleteInputStyles, listboxStyles, listboxItemStyles, listboxInfoStyles } from './styles.js';
+
+function TagAutocomplete({ addTag, loading, onChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
+  return jsx("div", { css: [
+    css`
+					position: relative;
+				`,
+    cssOverrides
+  ], children: jsxs(ComboBox, { "aria-label": label, inputValue: value, onInputChange: onChange, onSelectionChange: (key) => {
+    const tag = options.find((t) => t.id === key);
+    if (tag) {
+      addTag(tag);
+      onChange("");
+    }
+  }, allowsEmptyCollection: true, items: options, allowsCustomValue: true, menuTrigger: "focus", shouldFocusWrap: true, children: [jsx(Input, { css: tagAutocompleteInputStyles(theme), placeholder, disabled, "data-testid": dataTestId }), jsx(Popover, { placement: "bottom", css: css`
+						width: var(--trigger-width);
+					`, offset: 0, shouldFlip: false, children: jsxs(ListBox, { css: (value || options.length || loading) && listboxStyles(theme), autoFocus: "first", renderEmptyState: () => (
+    // Only show a "no results" box if user has typed
+    value && !loading && jsx("div", { css: listboxInfoStyles(theme), children: "No results" })
+  ), children: [jsx(Collection, { items: options, children: (item) => jsx(ListBoxItem, { css: listboxItemStyles(theme), value: item, children: item.internalName }, item.id) }), jsx(ListBoxLoadMoreItem, { css: listboxInfoStyles(theme), isLoading: loading, children: jsx("span", { "aria-label": "Loading", children: loadingIcon ?? "Loading..." }) })] }) })] }) });
+}
+
+export { TagAutocomplete };