@remit/ui 0.0.147 → 0.0.148

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.147",
+  "version": "0.0.148",
   "type": "module",
   "files": [
     "src"

package/src/components/mail-action-toolbar.stories.tsx

@@ -0,0 +1,56 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import { MailActionToolbar } from "./mail-action-toolbar.js";
+
+const meta: Meta<typeof MailActionToolbar> = {
+	title: "Kit/MailActionToolbar",
+	component: MailActionToolbar,
+	parameters: { layout: "centered" },
+	decorators: [
+		((Story) => (
+			<div
+				className="overflow-hidden rounded-lg border border-line"
+				style={{ width: 720 }}
+			>
+				<Story />
+			</div>
+		)) satisfies Decorator,
+	],
+	args: {
+		hasThread: true,
+		onReply: () => undefined,
+		onReplyAll: () => undefined,
+		onForward: () => undefined,
+		onDelete: () => undefined,
+		onMove: () => undefined,
+		onToggleStar: () => undefined,
+		onUnavailable: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof MailActionToolbar>;
+
+/** The conversation has answered and the open message is not starred. */
+export const Default: Story = { args: { isStarred: false } };
+
+/** The open message is starred: the star is lit and reads as pressed. It
+ *  follows the conversation, not the list row that opened it (#602). */
+export const Starred: Story = { args: { isStarred: true } };
+
+/** The conversation has not answered yet, so the star state is unknown. The
+ *  button omits `aria-pressed` rather than announcing "not pressed" for a
+ *  message that may well be starred. */
+export const StarUnknown: Story = { args: { isStarred: undefined } };
+
+/** The mobile pane's management bar already owns triage, so the toolbar drops
+ *  the cluster instead of offering a second set of the same accessible names. */
+export const WithoutTriage: Story = { args: { showTriage: false } };
+
+/** No message open: the verbs no-op and the bar surfaces a one-line reason
+ *  instead of disabling. */
+export const NoMessageOpen: Story = {
+	args: {
+		hasThread: false,
+		unavailableHint: "Open a message first",
+	},
+};

package/src/components/mail-action-toolbar.tsx

@@ -32,6 +32,11 @@ export interface MailActionToolbarProps {
 	onUnavailable?: (action: MailAction) => void;
 	/** A one-line inline notice rendered under the toolbar (e.g. "Open a message first"). */
 	unavailableHint?: ReactNode;
+	/**
+	 * Whether the open message is starred. Undefined until the conversation
+	 * says — the button then omits `aria-pressed` rather than announcing an
+	 * unstarred state it does not know yet.
+	 */
 	isStarred?: boolean;
 	/**
 	 * Whether to render the triage cluster (move-to-trash / move / flag).
@@ -166,6 +171,7 @@ export function MailActionToolbar({
 							}
 							title={flagTitle}
 							aria-label="Star"
+							aria-pressed={isStarred}
 							onClick={act("flag", onToggleStar)}
 						/>
 					</>