@tribepad/themis 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",

package/src/elements/Tabs/Tabs.stories.tsx

@@ -423,6 +423,69 @@ export const StepperVerticalNonLinear: Story = {
   ),
 };
 
+/**
+ * StepperWithError: a step flagged with `errorDescription` (here, a failed
+ * validation on the Shipping step). The errored circle turns destructive and
+ * swaps its number for an alert icon — taking visual precedence over the
+ * active/completed treatment — and the description appears as a tooltip on
+ * hover or keyboard focus of the tab. The tooltip is WCAG 2.2 AAA-compliant
+ * (React Aria: Escape-dismissible, hoverable, persistent) and the error state
+ * is also announced to screen readers via the tab's `aria-describedby`, so the
+ * information never relies on hover or colour alone.
+ */
+export const StepperWithError: Story = {
+  render: () => (
+    <Tabs variant="stepper" defaultSelectedKey="shipping">
+      <TabList aria-label="Checkout steps">
+        <Tab id="cart">Cart</Tab>
+        <Tab id="shipping" errorDescription="Postcode is invalid">Shipping</Tab>
+        <Tab id="payment">Payment</Tab>
+      </TabList>
+      <TabPanel id="cart">
+        <div className="p-4">Cart — completed.</div>
+      </TabPanel>
+      <TabPanel id="shipping">
+        <div className="p-4">Shipping — fix the highlighted error to continue.</div>
+      </TabPanel>
+      <TabPanel id="payment">
+        <div className="p-4">Payment — upcoming.</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * StepperVerticalWithError: the same error treatment in the vertical (Wizard)
+ * stepper — destructive circle, alert icon, and a tooltip above the step.
+ */
+export const StepperVerticalWithError: Story = {
+  render: () => (
+    <Tabs
+      variant="stepper"
+      orientation="vertical"
+      defaultSelectedKey="workflow"
+      className="w-[240px]"
+    >
+      <TabList aria-label="Edit blueprint steps">
+        <Tab id="details">Position Details</Tab>
+        <Tab id="workflow" errorDescription="At least one stage is required">
+          Candidate Workflow
+        </Tab>
+        <Tab id="pipeline">Pipeline &amp; Journeys</Tab>
+      </TabList>
+      <TabPanel id="details">
+        <div className="p-4">Position Details — completed.</div>
+      </TabPanel>
+      <TabPanel id="workflow">
+        <div className="p-4">Candidate Workflow — has an error.</div>
+      </TabPanel>
+      <TabPanel id="pipeline">
+        <div className="p-4">Pipeline &amp; Journeys — upcoming.</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
 /**
  * StepperFirstStep: Stepper with the first step active (no completed steps).
  */