@byline/ui 0.9.3

package/src/forms/document-actions.module.css

@@ -0,0 +1,94 @@
+/**
+ * DocumentActions — overflow menu (Unpublish / Delete) on the form chrome.
+ *
+ * Override handles:
+ *   .byline-form-actions-icon         — the rotated ellipsis trigger icon
+ *   .byline-form-actions-menu         — dropdown content panel
+ *   .byline-form-actions-item         — a row inside the dropdown
+ *   .byline-form-actions-item-icon    — fixed-width icon column
+ *   .byline-form-actions-item-text    — label column
+ *   .byline-form-actions-delete       — destructive label colour
+ *   .byline-form-actions-modal-head   — modal header layout
+ *   .byline-form-actions-modal-title  — modal heading text
+ *   .byline-form-actions-sr-only      — visually-hidden autofocus shim
+ */
+
+.icon,
+:global(.byline-form-actions-icon) {
+  transform: rotate(90deg);
+  color: var(--primary-500);
+}
+
+.menu,
+:global(.byline-form-actions-menu) {
+  min-width: 110px;
+}
+
+.item,
+:global(.byline-form-actions-item) {
+  display: flex;
+  align-items: center;
+  margin-left: var(--spacing-8);
+}
+
+.item-icon,
+:global(.byline-form-actions-item-icon) {
+  display: inline-block;
+  width: 28px;
+}
+
+.item-text,
+:global(.byline-form-actions-item-text) {
+  display: inline-block;
+  width: 100%;
+  flex: 1;
+  font-size: var(--font-size-sm);
+  text-align: left;
+}
+
+.delete,
+:global(.byline-form-actions-delete) {
+  flex: 1;
+  width: 100%;
+  border: none;
+  background: none;
+  padding: 0;
+  color: var(--red-600);
+  line-height: 1;
+  text-align: left;
+  cursor: pointer;
+}
+
+.modal-head,
+:global(.byline-form-actions-modal-head) {
+  padding-top: 1rem;
+  margin-bottom: var(--spacing-8);
+}
+
+.modal-title,
+:global(.byline-form-actions-modal-title) {
+  margin: 0 0 var(--spacing-8) 0;
+  font-size: var(--font-size-2xl);
+}
+
+.sr-only,
+:global(.byline-form-actions-sr-only) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── Dark theme variants ───────────────────────────────────── */
+
+:is([data-theme="dark"], :global(.dark)) {
+  .delete,
+  :global(.byline-form-actions-delete) {
+    color: var(--red-400);
+  }
+}

package/src/forms/document-actions.tsx

@@ -0,0 +1,149 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useState } from 'react'
+
+import {
+  Button,
+  CloseIcon,
+  DeleteIcon,
+  Dropdown as DropdownComponent,
+  EllipsisIcon,
+  IconButton,
+  Modal,
+} from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import styles from './document-actions.module.css'
+import type { PublishedVersionInfo } from './form-renderer'
+
+export function DocumentActions({
+  publishedVersion,
+  onUnpublish,
+  onDelete,
+}: {
+  publishedVersion?: PublishedVersionInfo | null
+  onUnpublish?: () => Promise<void>
+  onDelete?: () => Promise<void>
+}) {
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  const handleOnDelete = () => {
+    setShowDeleteConfirm(false)
+    if (onDelete) {
+      onDelete()
+    }
+  }
+
+  return (
+    <>
+      <DropdownComponent.Root>
+        <DropdownComponent.Trigger
+          render={<IconButton variant="text" intent="noeffect" size="sm" />}
+        >
+          <EllipsisIcon
+            className={cx('byline-form-actions-icon', styles.icon)}
+            width="15px"
+            height="15px"
+          />
+        </DropdownComponent.Trigger>
+
+        <DropdownComponent.Portal>
+          <DropdownComponent.Content
+            className={cx('byline-form-actions-menu', styles.menu)}
+            align="end"
+            data-side="top"
+            sideOffset={10}
+          >
+            {publishedVersion && (
+              <>
+                <DropdownComponent.Item onClick={onUnpublish}>
+                  <div className={cx('byline-form-actions-item', styles.item)}>
+                    <span className={cx('byline-form-actions-item-icon', styles['item-icon'])} />
+                    <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
+                      Unpublish
+                    </span>
+                  </div>
+                </DropdownComponent.Item>
+                <DropdownComponent.Separator />
+              </>
+            )}
+            <DropdownComponent.Item
+              onClick={() => {
+                setShowDeleteConfirm(true)
+              }}
+            >
+              <div className={cx('byline-form-actions-item', styles.item)}>
+                <span className={cx('byline-form-actions-item-icon', styles['item-icon'])}>
+                  <DeleteIcon width="16px" height="16px" />
+                </span>
+                <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
+                  <button type="button" className={cx('byline-form-actions-delete', styles.delete)}>
+                    Delete
+                  </button>
+                </span>
+              </div>
+            </DropdownComponent.Item>
+          </DropdownComponent.Content>
+        </DropdownComponent.Portal>
+      </DropdownComponent.Root>
+
+      <Modal
+        isOpen={showDeleteConfirm}
+        closeOnOverlayClick={true}
+        onDismiss={() => {
+          setShowDeleteConfirm(false)
+        }}
+      >
+        <Modal.Container style={{ maxWidth: '500px' }}>
+          <Modal.Header className={cx('byline-form-actions-modal-head', styles['modal-head'])}>
+            <h3 className={cx('byline-form-actions-modal-title', styles['modal-title'])}>
+              Delete Document
+            </h3>
+            <IconButton
+              arial-label="Close"
+              size="xs"
+              onClick={() => {
+                setShowDeleteConfirm(false)
+              }}
+            >
+              <CloseIcon width="16px" height="16px" svgClassName="white-icon" />
+            </IconButton>
+          </Modal.Header>
+          <Modal.Content>
+            <p>
+              Warning: This action cannot be undone. Are you sure you want to delete this document?
+            </p>
+          </Modal.Content>
+          <Modal.Actions>
+            <button
+              data-autofocus
+              type="button"
+              tabIndex={0}
+              className={cx('byline-form-actions-sr-only', styles['sr-only'])}
+            >
+              no action
+            </button>
+            <Button
+              size="sm"
+              intent="noeffect"
+              onClick={() => {
+                setShowDeleteConfirm(false)
+              }}
+            >
+              Cancel
+            </Button>
+            <Button size="sm" intent="danger" onClick={handleOnDelete}>
+              Delete
+            </Button>
+          </Modal.Actions>
+        </Modal.Container>
+      </Modal>
+    </>
+  )
+}