@fpkit/acss 5.0.0 → 6.1.0

package/src/components/form/select.stories.tsx

@@ -2,24 +2,26 @@ import { StoryObj, Meta } from "@storybook/react-vite";
 import { within, expect } from "storybook/test";
 
 import Select from "./select";
+import "./select.scss";
 import React from "react";
+
 const meta: Meta<typeof Select> = {
-  title: "FP.REACT Forms/Select",
+  title: "FP.React Forms/Select",
   tags: ["stable"],
   component: Select,
   parameters: {
     docs: {
       description: {
-        component: "Base select/Combobox component",
+        component: "Accessible select dropdown component with themeable arrow and validation support. Follows fpkit component conventions with ref forwarding and custom styling options.",
       },
     },
   },
   args: {
     children: (
       <>
-        <Select.Option selectValue="value" selectLabel="Option 1" />
-        <Select.Option selectValue="value" selectLabel="Option 2" />
-        <Select.Option selectValue="value" selectLabel="Option 3" />
+        <Select.Option value="option1" label="Option 1" />
+        <Select.Option value="option2" label="Option 2" />
+        <Select.Option value="option3" label="Option 3" />
       </>
     ),
   },
@@ -28,18 +30,232 @@ const meta: Meta<typeof Select> = {
 export default meta;
 type Story = StoryObj<typeof Select>;
 
+/**
+ * Default select component with standard options using the new API
+ */
 export const SelectComponent: Story = {
   args: {
+    id: "default-select",
+    name: "defaultSelect",
     children: (
       <>
-        <Select.Option selectValue="value" selectLabel="Option 1" />
-        <Select.Option selectValue="value" selectLabel="Option 2" />
-        <Select.Option selectValue="value" selectLabel="Option 3" />
+        <Select.Option value="us" label="United States" />
+        <Select.Option value="uk" label="United Kingdom" />
+        <Select.Option value="ca" label="Canada" />
+        <Select.Option value="au" label="Australia" />
       </>
     ),
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    expect(canvas.getByRole("combobox")).toBeInTheDocument();
+    const select = canvas.getByRole("combobox");
+    expect(select).toBeInTheDocument();
+    expect(select).toHaveAttribute("id", "default-select");
+  },
+} as Story;
+
+/**
+ * Select with label prop for display text
+ */
+export const WithLabels: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option value="sm" label="Small (SM)" />
+        <Select.Option value="md" label="Medium (MD)" />
+        <Select.Option value="lg" label="Large (LG)" />
+        <Select.Option value="xl" label="Extra Large (XL)" />
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Select with children instead of label prop
+ */
+export const WithChildren: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option value="react">⚛️ React</Select.Option>
+        <Select.Option value="vue">💚 Vue</Select.Option>
+        <Select.Option value="angular">🔺 Angular</Select.Option>
+        <Select.Option value="svelte">🧡 Svelte</Select.Option>
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Select with disabled options
+ */
+export const WithDisabledOptions: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option value="available" label="Available Option" />
+        <Select.Option value="disabled1" label="Disabled Option" disabled />
+        <Select.Option value="active" label="Active Option" />
+        <Select.Option value="disabled2" label="Another Disabled" disabled />
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Required select field
+ */
+export const Required: Story = {
+  args: {
+    id: "required-select",
+    name: "requiredSelect",
+    required: true,
+    children: (
+      <>
+        <Select.Option value="" label="-- Select an option --" />
+        <Select.Option value="option1" label="Option 1" />
+        <Select.Option value="option2" label="Option 2" />
+        <Select.Option value="option3" label="Option 3" />
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Disabled select component
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: (
+      <>
+        <Select.Option value="option1" label="Option 1" />
+        <Select.Option value="option2" label="Option 2" />
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Select with custom styling
+ */
+export const CustomStyling: Story = {
+  args: {
+    styles: {
+      "--select-arrow-color": "#0066cc",
+      "--input-border-color": "#0066cc",
+      "--input-radius": "1rem",
+    } as React.CSSProperties,
+    classes: "custom-select",
+    children: (
+      <>
+        <Select.Option value="option1" label="Styled Option 1" />
+        <Select.Option value="option2" label="Styled Option 2" />
+        <Select.Option value="option3" label="Styled Option 3" />
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Styled options with variant data attributes
+ */
+export const StyledWithVariants: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option value="default" label="Default Option" />
+        <Select.Option value="primary" label="Primary Option" variant="primary" />
+        <Select.Option value="success" label="Success Option" variant="success" />
+        <Select.Option value="error" label="Error Option" variant="error" />
+        <Select.Option value="warning" label="Warning Option" variant="warning" />
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Options with variant data attributes for CSS targeting: `option[data-option=\"primary\"]`",
+      },
+    },
+  },
+} as Story;
+
+/**
+ * Options with size variants
+ */
+export const WithSizes: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option value="sm" label="Small Option" size="sm" />
+        <Select.Option value="md" label="Medium Option" size="md" />
+        <Select.Option value="lg" label="Large Option" size="lg" />
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Options with size data attributes: `option[data-size=\"sm\"]`",
+      },
+    },
+  },
+} as Story;
+
+/**
+ * Options with custom data attributes
+ */
+export const WithCustomDataAttributes: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option
+          value="premium"
+          label="Premium Plan"
+          dataAttributes={{ 'data-category': 'premium', 'data-featured': true }}
+        />
+        <Select.Option
+          value="standard"
+          label="Standard Plan"
+          dataAttributes={{ 'data-category': 'standard' }}
+        />
+        <Select.Option
+          value="basic"
+          label="Basic Plan"
+          dataAttributes={{ 'data-category': 'basic', 'data-price': 0 }}
+        />
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Options with custom data attributes for advanced styling: `option[data-category=\"premium\"]`",
+      },
+    },
+  },
+} as Story;
+
+/**
+ * Legacy API - backwards compatibility with selectValue and selectLabel
+ * @deprecated Use `value` and `label` props instead
+ */
+export const LegacyAPI: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option selectValue="legacy1" selectLabel="Legacy Option 1" />
+        <Select.Option selectValue="legacy2" selectLabel="Legacy Option 2" />
+        <Select.Option selectValue="legacy3" selectLabel="Legacy Option 3" />
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Example using deprecated `selectValue` and `selectLabel` props. Use `value` and `label` instead.",
+      },
+    },
   },
 } as Story;