@tribepad/themis 1.0.5 → 1.0.6

package/src/elements/SituationalJudgement/SituationalJudgement.stories.tsx

@@ -0,0 +1,305 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { SituationalJudgement } from './SituationalJudgement';
+
+const SAMPLE_RESPONSES = [
+  { value: 'a', text: 'Speak to the colleague privately about the issue.', ordinal: 0 },
+  { value: 'b', text: 'Report the situation to your manager immediately.', ordinal: 1 },
+  { value: 'c', text: 'Ignore the situation and focus on your own work.', ordinal: 2 },
+  { value: 'd', text: 'Discuss the matter in the next team meeting.', ordinal: 3 },
+];
+
+const SAMPLE_SCENARIO = '<p>You observe a colleague making a <strong>significant error</strong> on an important client report. The report is due to be submitted tomorrow morning. Your colleague seems unaware of the mistake.</p>';
+
+const meta = {
+  title: 'Elements/SituationalJudgement',
+  component: SituationalJudgement,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Assessment component presenting a scenario with 3-6 response options. Composes existing RadioGroup + Radio for responses and Accordion for collapsible scenarios. Includes built-in HTML sanitiser for XSS protection.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Component size',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    collapsibleScenario: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    isReadOnly: { control: 'boolean' },
+    isRequired: { control: 'boolean' },
+    isInvalid: { control: 'boolean' },
+    label: { control: 'text' },
+    description: { control: 'text' },
+    errorMessage: { control: 'text' },
+  },
+} satisfies Meta<typeof SituationalJudgement>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// =============================================================================
+// Default
+// =============================================================================
+
+export const Default: Story = {
+  args: {
+    label: 'Question 1',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+// =============================================================================
+// Collapsible Scenario
+// =============================================================================
+
+export const CollapsibleScenario: Story = {
+  args: {
+    label: 'Question 2',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+    collapsibleScenario: true,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Scenario panel can be collapsed to save space. Uses the existing Accordion component.',
+      },
+    },
+  },
+};
+
+// =============================================================================
+// States
+// =============================================================================
+
+export const Required: Story = {
+  args: {
+    label: 'Question 3',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+    isRequired: true,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+export const Invalid: Story = {
+  args: {
+    label: 'Question 4',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+    isInvalid: true,
+    errorMessage: 'Please select a response before continuing.',
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Question 5',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+    value: 'a',
+    isDisabled: true,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+export const ReadOnly: Story = {
+  args: {
+    label: 'Question 6 (Submitted)',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+    value: 'b',
+    isReadOnly: true,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+// =============================================================================
+// With Description
+// =============================================================================
+
+export const WithDescription: Story = {
+  args: {
+    label: 'Question 7',
+    description: 'Choose the most effective response to the scenario below.',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+// =============================================================================
+// Sizes
+// =============================================================================
+
+export const SmallSize: Story = {
+  args: {
+    label: 'Small',
+    scenarioText: '<p>A brief scenario.</p>',
+    responses: SAMPLE_RESPONSES.slice(0, 3),
+    size: 'sm',
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+export const LargeSize: Story = {
+  args: {
+    label: 'Large',
+    scenarioText: '<p>A brief scenario.</p>',
+    responses: SAMPLE_RESPONSES.slice(0, 3),
+    size: 'lg',
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+// =============================================================================
+// Controlled
+// =============================================================================
+
+export const ControlledExample: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | null>(null);
+    return (
+      <div className="w-[600px]">
+        <SituationalJudgement
+          label="Question 8"
+          scenarioText={SAMPLE_SCENARIO}
+          responses={SAMPLE_RESPONSES}
+          value={value}
+          onChange={setValue}
+        />
+        <p className="mt-3 text-sm text-[var(--muted-foreground)]">
+          Selected: {value ?? 'None'}
+        </p>
+      </div>
+    );
+  },
+};
+
+// =============================================================================
+// Six Responses
+// =============================================================================
+
+export const SixResponses: Story = {
+  args: {
+    label: 'Question 9',
+    scenarioText: '<p>A complex workplace scenario with multiple viable approaches.</p>',
+    responses: [
+      { value: 'a', text: 'Address the issue directly with the person involved.', ordinal: 0 },
+      { value: 'b', text: 'Consult with HR before taking any action.', ordinal: 1 },
+      { value: 'c', text: 'Document the incident and report to management.', ordinal: 2 },
+      { value: 'd', text: 'Seek advice from a trusted colleague.', ordinal: 3 },
+      { value: 'e', text: 'Wait to see if the situation resolves itself.', ordinal: 4 },
+      { value: 'f', text: 'Escalate immediately to senior leadership.', ordinal: 5 },
+    ],
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+  parameters: {
+    docs: {
+      description: { story: 'Maximum of 6 response options.' },
+    },
+  },
+};
+
+// =============================================================================
+// Rich Scenario HTML
+// =============================================================================
+
+export const RichScenarioHTML: Story = {
+  args: {
+    label: 'Question 10',
+    scenarioText: `
+      <p>During a team project, you discover that:</p>
+      <ul>
+        <li>A team member has been <strong>consistently missing deadlines</strong></li>
+        <li>Their work quality has <em>noticeably declined</em></li>
+        <li>Other team members are having to <strong>cover their tasks</strong></li>
+      </ul>
+      <p>The project deadline is in <strong>two weeks</strong> and the team is already behind schedule.</p>
+    `,
+    responses: [
+      { value: 'a', text: 'Have a private, supportive conversation with the team member.', ordinal: 0 },
+      { value: 'b', text: 'Redistribute the workload among remaining team members.', ordinal: 1 },
+      { value: 'c', text: 'Escalate to the project manager with documented concerns.', ordinal: 2 },
+    ],
+    collapsibleScenario: true,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Scenario HTML supports formatting: bold, italic, lists, paragraphs. Dangerous HTML (scripts, iframes) is automatically sanitised.',
+      },
+    },
+  },
+};
+
+// =============================================================================
+// Assessment Form
+// =============================================================================
+
+export const AssessmentForm: Story = {
+  render: () => {
+    const [answers, setAnswers] = useState<Record<string, string | null>>({
+      q1: null,
+      q2: null,
+    });
+    return (
+      <div className="w-[600px] rounded-lg border border-[var(--border)] bg-[var(--content-background)] p-6">
+        <h2 className="mb-6 text-xl font-bold text-[var(--content-foreground)]">
+          Situational Judgement Assessment
+        </h2>
+        <div className="flex flex-col gap-8">
+          <SituationalJudgement
+            label="Question 1 of 2"
+            description="Select the most appropriate response."
+            scenarioText="<p>A customer calls to complain about a <strong>delayed delivery</strong>. They are upset and demanding an immediate resolution.</p>"
+            responses={[
+              { value: 'a', text: 'Apologise sincerely and offer a refund or replacement.', ordinal: 0 },
+              { value: 'b', text: 'Explain the delivery policy and ask them to wait.', ordinal: 1 },
+              { value: 'c', text: 'Transfer the call to a supervisor.', ordinal: 2 },
+            ]}
+            value={answers.q1}
+            onChange={(v) => setAnswers((a) => ({ ...a, q1: v }))}
+            isRequired
+          />
+          <hr className="border-[var(--border)]" />
+          <SituationalJudgement
+            label="Question 2 of 2"
+            description="Select the most appropriate response."
+            scenarioText="<p>You notice a <em>security vulnerability</em> in the company's customer-facing application during routine testing.</p>"
+            responses={[
+              { value: 'a', text: 'Report it immediately to the security team.', ordinal: 0 },
+              { value: 'b', text: 'Try to fix it yourself before reporting.', ordinal: 1 },
+              { value: 'c', text: 'Document it and include in the next sprint.', ordinal: 2 },
+              { value: 'd', text: 'Verify the severity and then escalate accordingly.', ordinal: 3 },
+            ]}
+            value={answers.q2}
+            onChange={(v) => setAnswers((a) => ({ ...a, q2: v }))}
+            isRequired
+            collapsibleScenario
+          />
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Full assessment form with multiple SJT questions.',
+      },
+    },
+  },
+};