Add prototype section and page for re-use annotations features

src/components/icons/Info.tsx

@@ -0,0 +1,26 @@
+// This file was auto-generated using scripts/generate-icons.js
+import type { JSX } from 'preact';
+
+export type InfoIconProps = JSX.SVGAttributes<SVGSVGElement>;
+
+/**
+ * Icon generated from info.svg
+ */
+export default function InfoIcon(props: InfoIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      data-component="InfoIcon"
+      {...props}
+    >
+      <path fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20z" />
+      <path
+        fill="#fff"
+        d="M11 12a1 1 0 0 1 0-2h2a1 1 0 0 1 .96 1.27L12.33 17H13a1 1 0 0 1 0 2h-2a1 1 0 0 1-.96-1.27L11.67 12H11zm2-4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"
+      />
+    </svg>
+  );
+}

src/components/icons/Pin.tsx

@@ -0,0 +1,32 @@
+// This file was auto-generated using scripts/generate-icons.js
+import type { JSX } from 'preact';
+
+export type PinIconProps = JSX.SVGAttributes<SVGSVGElement>;
+
+/**
+ * Icon generated from pin.svg
+ */
+export default function PinIcon(props: PinIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      class="icon-pin"
+      viewBox="0 0 24 24"
+      data-component="PinIcon"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="m2.24 20.35 6.5-7.5a1 1 0 0 1 1.47-.06l1 1a1 1 0 0 1-.06 1.47l-7.5 6.5c-.93.8-2.22-.48-1.4-1.41z"
+        class="secondary"
+      />
+      <path
+        fill="currentColor"
+        d="M15 15.41V18a1 1 0 0 1-.3.7l-1 1a1 1 0 0 1-1.4 0l-8-8a1 1 0 0 1 0-1.4l1-1A1 1 0 0 1 6 9h2.59L13 4.59V3a1 1 0 0 1 1.7-.7l7 7A1 1 0 0 1 21 11h-1.59L15 15.41z"
+        class="primary"
+      />
+    </svg>
+  );
+}

src/components/icons/index.ts

@@ -60,6 +60,7 @@ export { default as HideFilledIcon } from './HideFilled';
 export { default as HighlightIcon } from './Highlight';
 export { default as ImageIcon } from './Image';
 export { default as ImageFilledIcon } from './ImageFilled';
+export { default as InfoIcon } from './Info';
 export { default as LeaveIcon } from './Leave';
 export { default as LeaveFilledIcon } from './LeaveFilled';
 export { default as LinkIcon } from './Link';
@@ -75,6 +76,7 @@ export { default as MenuCollapseIcon } from './MenuCollapse';
 export { default as MenuExpandIcon } from './MenuExpand';
 export { default as NoteIcon } from './Note';
 export { default as NoteFilledIcon } from './NoteFilled';
+export { default as PinIcon } from './Pin';
 export { default as PlusIcon } from './Plus';
 export { default as PointerDownIcon } from './PointerDown';
 export { default as PointerUpIcon } from './PointerUp';

src/pattern-library/components/PlaygroundApp.tsx

@@ -153,6 +153,8 @@ export default function PlaygroundApp({
     </>
   );
 
+  const prototypeRoutes = getRoutes('prototype');
+
   const groupKeys = Object.keys(componentGroups) as Array<
     keyof typeof componentGroups
   >;
@@ -194,6 +196,17 @@ export default function PlaygroundApp({
                 );
               })}
 
+              {prototypeRoutes.length > 0 && (
+                <>
+                  <NavHeader>Prototypes</NavHeader>
+                  <NavList>
+                    {prototypeRoutes.map(route => (
+                      <NavLink key={route.title} route={route} />
+                    ))}
+                  </NavList>
+                </>
+              )}
+
               {extraRoutes.length > 0 && (
                 <>
                   <NavHeader>{extraRoutesTitle}</NavHeader>

src/pattern-library/components/patterns/prototype/FakeAnnotationPublishControl.tsx

@@ -0,0 +1,139 @@
+import classnames from 'classnames';
+
+import {
+  Button,
+  CancelIcon,
+  GlobeIcon,
+  GroupsIcon,
+  InfoIcon,
+  LockIcon,
+  MenuExpandIcon,
+} from '../../../..';
+import Menu from './Menu';
+import MenuItem from './MenuItem';
+
+export type AnnotationPublishControlProps = {
+  /** The group this annotation or draft would publish to */
+  group: string;
+
+  /**
+   * Should the save button be disabled? Hint: it will be if the annotation has
+   * no content
+   */
+  isDisabled?: boolean;
+
+  /** Annotation or draft is "Only Me" */
+  isPrivate?: boolean;
+
+  noSharing?: boolean;
+
+  noSharingMessage?: string;
+
+  /** Callback for cancel button click */
+  onCancel?: () => void;
+
+  /** Callback for save button click */
+  onSave?: () => void;
+};
+
+/**
+ * Render a compound control button for publishing (saving) an annotation:
+ * - Save the annotation — left side of button
+ * - Choose sharing/privacy option - drop-down menu on right side of button
+ *
+ * @param {AnnotationPublishControlProps} props
+ */
+function AnnotationPublishControl({
+  group,
+  isDisabled = false,
+  isPrivate = false,
+  noSharing = false,
+  noSharingMessage = "Why can't I share this annotation?",
+  onCancel = () => {},
+  onSave = () => {},
+}: AnnotationPublishControlProps) {
+  const menuLabel = (
+    <div className="w-9 h-9 flex items-center justify-center text-color-text-inverted">
+      <MenuExpandIcon className="w-4 h-4" />
+    </div>
+  );
+
+  return (
+    <div className="flex flex-row gap-x-3">
+      <div className="flex relative">
+        <Button
+          classes={classnames(
+            // Turn off right-side border radius to align with menu-open button
+            'rounded-r-none'
+          )}
+          data-testid="publish-control-button"
+          onClick={onSave}
+          disabled={isDisabled}
+          size="lg"
+          variant="primary"
+        >
+          Post to {isPrivate ? 'Only Me' : group}
+        </Button>
+        {/* This wrapper div is necessary because of peculiarities with
+             Safari: see https://github.com/hypothesis/client/issues/2302 */}
+        <div
+          className={classnames(
+            // Round the right side of this menu-open button only
+            'flex flex-row rounded-r-sm bg-grey-7 hover:bg-grey-8'
+          )}
+        >
+          <Menu
+            arrowClass={classnames(
+              // Position up-pointing menu caret aligned beneath the
+              // down-pointing menu-open button icon
+              'right-[10px]'
+            )}
+            containerPositioned={false}
+            contentClass={classnames(
+              // Ensure the menu is wide enough to "reach" the right-aligned
+              // up-pointing menu arrow
+              'min-w-full'
+            )}
+            defaultOpen
+            label={menuLabel}
+            menuIndicator={false}
+            title="Change annotation sharing setting"
+            align="left"
+          >
+            <MenuItem
+              icon={GroupsIcon}
+              label={`${group} only`}
+              isSelected={!isPrivate}
+            />
+            <MenuItem
+              icon={GlobeIcon}
+              label="All course participants"
+              isDisabled={noSharing}
+            />
+            {noSharing && (
+              <div className="bg-grey-0 text-color-text-light">
+                <div className="flex gap-x-1 items-center pb-1 pl-[11px]">
+                  <div>
+                    <InfoIcon className="w-[12px] h-[12px]" />
+                  </div>
+                  <div className="text-xs px-2 italic text-color-text-light min-w-min whitespace-nowrap">
+                    {noSharingMessage}
+                  </div>
+                </div>
+              </div>
+            )}
+            <MenuItem icon={LockIcon} label="Only Me" isSelected={isPrivate} />
+          </Menu>
+        </div>
+      </div>
+      <div>
+        <Button data-testid="cancel-button" onClick={onCancel} size="lg">
+          <CancelIcon />
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default AnnotationPublishControl;