@fpkit/acss 0.5.4 → 0.5.6

package/src/components/details/details.scss

@@ -1,6 +1,6 @@
 details {
   --details-w: 100%;
-  --details-h: fit-content;
+  --details-h: max-content;
   --details-border: 1px solid #dfdfdf;
   --details-display: flex;
   --details-justify: flex-start;
@@ -8,9 +8,9 @@ details {
   --details-gap: 0rem;
   --details-px: 1.5rem;
   --details-py: 1rem;
-  --details-radius: 0.5rem;
+  --details-radius: var(--border-radius);
   --summary-cursor: pointer;
-  --summary-transitions: all 0.75s linear;
+  --summary-transitions: all 0.75s ease-in-out;
   --summary-display: flex;
   --summary-justify: flex-start;
   --summary-align: center;
@@ -18,6 +18,7 @@ details {
   --max-h-closed: 6.25rem;
   --max-h-open: 50rem;
 
+  interpolate-size: allow-keywords;
   display: var(--details-display);
   flex-direction: var(--details-direction);
   justify-content: var(--details-justify);
@@ -29,6 +30,25 @@ details {
   overflow: clip;
   border-radius: var(--details-radius);
 
+  // Handle multiple details elements
+  & + details {
+    border-radius: 0; // remove radius from middle elements
+    border-top: none; // optional: remove double borders
+  }
+
+  &:first-of-type {
+    border-radius: var(--details-radius) var(--details-radius) 0 0;
+  }
+
+  &:last-of-type {
+    border-radius: 0 0 var(--details-radius) var(--details-radius);
+  }
+
+  // If it's the only details element, keep original radius
+  &:only-of-type {
+    border-radius: var(--details-radius);
+  }
+
   &::marker {
     content: none;
   }
@@ -43,19 +63,19 @@ details {
     list-style: none;
     border-top-left-radius: var(--details-radius);
     border-top-right-radius: var(--details-radius);
+    transition: var(--summary-transitions);
 
     &::-webkit-details-marker {
       display: none;
     }
 
-    &:focus-within  {
+    &:focus-within {
       outline: none;
       border-bottom: solid 2px var(--details-border);
       background-color: whitesmoke;
     }
 
     /* This ensures no bullet points are shown */
-
     &:hover {
       cursor: var(--summary-cursor);
     }
@@ -72,7 +92,7 @@ details {
   }
 
   &[open] {
-    max-height: var(--max-h-open);
+    max-height: max-content;
     transition: var(--summary-transitions);
     > summary {
       border-bottom: var(--details-border);

package/src/components/details/details.stories.tsx

@@ -1,9 +1,8 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect, userEvent } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect, userEvent } from "@storybook/test";
 
-
-import Details from './details'
-import Icons from '../icons/icon'
+import Details from "./details";
+import Icons from "../icons/icon";
 
 const content = (
   <>
@@ -25,49 +24,51 @@ const content = (
       hic est placeat!
     </p>
   </>
-)
+);
 
-const icon = <Icons.Add />
+const icon = <Icons.Add />;
 
 const meta: Meta<typeof Details> = {
-  title: 'FP.REACT Components/Details',
+  title: "FP.REACT Components/Details",
   component: Details,
+  tags: ["rc"],
   args: {
-    // @ts-ignore
     children: content,
     icon: icon,
     summary: <>Summary Section</>,
   },
-  actions: { argTypesRegex: '^on.*' },
+  actions: { argTypesRegex: "^on.*" },
   decorators: [
     (Story) => (
-      <div className="container" style={{ minWidth: '50vw' }}>
+      <div className="container" style={{ minWidth: "50vw" }}>
         <Story />
       </div>
     ),
   ],
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Details>
+export default meta;
+type Story = StoryObj<typeof Details>;
 
 export const DetailsDropdown: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByRole('group', { name: /details dropdown/i })).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(
+      canvas.getByRole("group", { name: /details dropdown/i })
+    ).toBeInTheDocument();
   },
-} as Story
+} as Story;
 
 export const DetailsOpen: Story = {
   args: {
     open: true,
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByRole('group')).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByRole("group")).toBeInTheDocument();
   },
-} as Story
+} as Story;
 
 export const CustomDropdown: Story = {
   render: () => (
@@ -87,12 +88,12 @@ export const CustomDropdown: Story = {
       </p>
     </>
   ),
-} as Story
+} as Story;
 
 export const DetailsAccordion: Story = {
   render: () => (
     <>
-    <Details
+      <Details
         summary="Summary Section"
         icon={icon}
         ariaLabel="Details Section"
@@ -100,7 +101,7 @@ export const DetailsAccordion: Story = {
       >
         {content}
       </Details>
-    <Details
+      <Details
         summary="Summary Section"
         icon={icon}
         ariaLabel="Details Section"
@@ -108,7 +109,7 @@ export const DetailsAccordion: Story = {
       >
         {content}
       </Details>
-    <Details
+      <Details
         summary="Summary Section"
         icon={icon}
         ariaLabel="Details Section"
@@ -117,8 +118,8 @@ export const DetailsAccordion: Story = {
         {content}
       </Details>
     </>
-  )
-} as Story
+  ),
+} as Story;
 
 export const DetailsInteractionTest: Story = {
   args: {},
@@ -126,13 +127,15 @@ export const DetailsInteractionTest: Story = {
     const canvas = within(canvasElement);
 
     // Find the summary element
-    const summaryElement = canvas.getByText('Summary Section');
+    const summaryElement = canvas.getByText("Summary Section");
 
     // Simulate a click on the summary element
     await userEvent.click(summaryElement);
 
     // Assert that the details element is open
-    const detailsElement = canvas.getByRole('group', { name: /details dropdown/i });
-    expect(detailsElement).toHaveAttribute('open');
+    const detailsElement = canvas.getByRole("group", {
+      name: /details dropdown/i,
+    });
+    expect(detailsElement).toHaveAttribute("open");
   },
-}
+};

package/src/components/details/details.tsx

@@ -1,19 +1,19 @@
-import UI from '#components/ui'
-import React from 'react'
+import UI from "#components/ui";
+import React from "react";
 
 type DetailsProps = {
   /**
    * The summary text shown for the details.
    * Required.
    */
-  summary: React.ReactNode
+  summary: React.ReactNode;
 
   /**
    * The aria-label  element for accessibility.
    */
-  ariaLabel: string
-} & React.ComponentProps<'details'> &
-  Partial<React.ComponentProps<typeof UI>>
+  ariaLabel: string;
+} & React.ComponentProps<"details"> &
+  Partial<React.ComponentProps<typeof UI>>;
 
 /**3
  * Details component props interface.
@@ -42,16 +42,16 @@ export const Details = ({
   ref,
   ...props
 }: DetailsProps) => {
-  const defaultStyles: React.CSSProperties = { ...styles }
+  const defaultStyles: React.CSSProperties = { ...styles };
 
   const onPointerDownCallback = (e: React.PointerEvent<HTMLDetailsElement>) => {
-    if (onPointerDown) onPointerDown?.(e)
-    if (onPointerDown) onPointerDown?.(e)
-  }
+    if (onPointerDown) onPointerDown?.(e);
+    if (onPointerDown) onPointerDown?.(e);
+  };
 
   const onToggleCallback = (e: React.PointerEvent<HTMLDetailsElement>) => {
-    if (onToggle) onPointerDown?.(e)
-  }
+    if (onToggle) onPointerDown?.(e);
+  };
   return (
     <UI
       as="details"
@@ -60,7 +60,7 @@ export const Details = ({
       onToggle={onToggleCallback}
       ref={ref}
       open={open}
-      aria-label={ariaLabel || 'Details dropdown'}
+      aria-label={ariaLabel || "Details dropdown"}
       // aria-roledescription="detail accordion"
       name={name}
       {...props}
@@ -71,8 +71,8 @@ export const Details = ({
       </UI>
       <UI as="section">{children}</UI>
     </UI>
-  )
-}
+  );
+};
 
-export default Details
-Details.displayName = 'Details'
+export default Details;
+Details.displayName = "Details";

package/src/components/dialog/README.mdx

@@ -0,0 +1,187 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="FP.REACT Components/Dialog/Readme" />
+
+# Dialog Components
+
+A flexible Dialog component system for building accessible modal dialogs in
+React applications. The component supports:
+
+- Controlled modal behavior with built-in state management
+- Full ARIA accessibility support out of the box
+- Customizable headers and content layout
+- Multiple variants including standard dialogs and alert dialogs
+- Event handling for open, close, and cancel actions
+- Responsive design with inline rendering option
+- Modal and non-modal dialog variants via `isAlertDialog`
+- Built-in header with close functionality
+- Configurable footer with confirm/cancel actions
+- Click-outside-to-close behavior
+- Focus management and keyboard navigation
+
+Built with TypeScript and React, this component follows modern best practices
+and provides a developer-friendly API for implementing modal dialogs in your web
+applications.
+
+## Overview
+
+The dialog component system consists of the following key parts:
+
+### Dialog Component
+
+The dialog system consists of:
+
+- `Dialog`: Main modal component
+- `DialogHeader`: Header with title and close button
+- `DialogFooter`: Footer with confirm/cancel actions
+
+### Props
+
+The Dialog component accepts two types of props - required core props and
+optional configuration props.
+
+#### Required Props
+
+- `dialogTitle` (`string`): Title text displayed in dialog header
+- `children` (`React.ReactNode`): Content rendered inside dialog body
+- `showDialog` (`boolean`): Controls dialog visibility state
+
+#### Optional Props
+
+- `isAlertDialog` (`boolean`, default: `false`): Renders as non-modal alert
+  dialog
+- `onClose` (`() => void`): Callback when dialog closes
+- `onConfirm` (`() => void | Promise<void>`): Confirmation action callback
+- `confirmLabel` (`string`, default: "Confirm"): Custom confirm button text
+- `cancelLabel` (`string`, default: "Cancel"): Custom cancel button text
+- `className` (`string`, default: ""): Additional CSS classes
+
+The component also inherits props from:
+
+- `React.ComponentProps<typeof UI>`
+- `React.ComponentProps<dialog>`
+
+### Usage Examples
+
+```tsx
+// Basic usage
+import { Dialog } from "./dialog";
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>Open Dialog</button>
+      <Dialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        dialogTitle="My Dialog"
+        dialogId="example-dialog"
+      >
+        <div>Dialog content goes here</div>
+      </Dialog>
+    </>
+  );
+}
+```
+
+## Alert Dialog Example
+
+A basic example of an Alert Dialog component implementation. Alert dialogs are
+used to show important messages that require user acknowledgment or
+confirmation.
+
+### Features
+
+- Uses the `Dialog` component with `isAlertDialog` prop set to true
+- Displays a warning message with a confirmation button
+- Custom dialog title "Warning"
+- Unique dialog identifier "alert-dialog"
+
+### Usage
+
+```tsx
+function AlertExample() {
+  return (
+    <Dialog isAlertDialog dialogTitle="Warning" dialogId="alert-dialog">
+      <p>This action cannot be undone. Continue?</p>
+      <button onClick={() => {}}>Confirm</button>
+    </Dialog>
+  );
+}
+```
+
+### Custom header dialog example
+
+```tsx
+// Custom header dialog
+function CustomDialog() {
+  return (
+    <Dialog hideDialogHeader dialogId="custom-dialog">
+      <h2>Custom Header</h2>
+      <div>Content with custom header</div>
+    </Dialog>
+  );
+}
+```
+
+## Styles
+
+This `dialog.scss` file defines the styling for a dialog component with
+customizable properties using CSS variables.
+
+## CSS Custom Properties
+
+### Dialog Dimensions and Spacing
+
+- `--dialog-min-w`: Minimum width of the dialog (320px)
+- `--dialog-gap`: Spacing between dialog elements (0.75rem)
+- `--dialog-padding`: General padding inside dialog (0.75rem)
+- `--dialog-padding-inline`: Horizontal padding inside dialog (1rem)
+
+### Border Properties
+
+- `--dialog-border-color`: Color of dialog border (lightgray)
+- `--dialog-border-width`: Width of dialog border (thin)
+- `--dialog-border-style`: Style of dialog border (solid)
+- `--dialog-border-radius`: Border radius of dialog corners (0.5rem)
+
+### Dialog Button Styles
+
+- `--dialog-button-bg`: Background color for dialog buttons (transparent)
+- `--dialog-button-border`: Border style for dialog buttons (transparent thin
+  solid)
+- `--dialog-button-hover-bg`: Background color for button hover state
+  (whitesmoke)
+- `--dialog-close-color`: Color for close button (gray)
+
+### Layout Properties
+
+- `--dialog-display`: Display property for dialog (flex)
+- `--dialog-flex-direction`: Flex direction for dialog layout (column)
+
+## Component Structure
+
+### Base Dialog
+
+- Sets minimum width and spacing
+- Applies border and padding styles
+- Implements flex layout when dialog is open
+
+### Dialog Header
+
+- Implements a flex layout with space-between alignment
+- Contains title (h3) and close button
+- Custom button styling with hover states
+
+### Alert Dialog Actions
+
+- Container for dialog action buttons
+- Uses flex layout with left alignment
+- Includes gap spacing between buttons
+
+## Usage
+
+To customize the dialog appearance, override the CSS custom properties in your
+stylesheet.

package/src/components/dialog/dialog-modal.stories.tsx

@@ -0,0 +1,113 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect, userEvent, waitFor } from "@storybook/test";
+
+import DialogModal from "./dialog-modal";
+import WithInstructions from "#/decorators/instructions";
+const meta: Meta<typeof DialogModal> = {
+  title: "FP.REACT Components/Dialog/DialogModal",
+  component: DialogModal,
+  tags: ["autodocs", "experimental"],
+  parameters: {
+    actions: { argTypesRegex: "^on.*" },
+    docs: {
+      description: {
+        component:
+          "DialogModal is a modal dialog component that provides an accessible overlay for displaying content.",
+      },
+    },
+  },
+  args: {
+    children: "Dialog Content",
+    title: "Dialog Title",
+    isOpen: false,
+    onClose: () => {},
+  },
+} as Meta;
+
+export default meta;
+type Story = StoryObj<typeof DialogModal>;
+
+export const Default: Story = {
+  args: {
+    children:
+      "DialogModal is a modal dialog component that provides an accessible overlay for displaying content.",
+  },
+  decorators: [WithInstructions()],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByRole("dialog")).toBeInTheDocument();
+  },
+} as Story;
+
+const instructions = (
+  <div>
+    <p>
+      In this example, the dialog is opened and closed using the Storybook
+      interactions.{" "}
+    </p>
+  </div>
+);
+
+export const ModalInteractions: Story = {
+  args: {
+    children: "This dialog can be opened and closed using the button",
+    dialogTitle: "Interactive Dialog",
+    btnLabel: "Open Dialog",
+  },
+  decorators: [WithInstructions(instructions)],
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    // Find and click the open button
+    const openButton = canvas.getByRole("button", { name: /open dialog/i });
+
+    await step("Open Dialog", async () => {
+      await step("Open Dialog", async () => {
+        await userEvent.click(openButton, { delay: 1500 }); // Verify dialog is open
+        const dialog = canvas.getByRole("dialog");
+        expect(dialog).toBeVisible();
+      });
+    });
+
+    await step("Close Dialog", async () => {
+      const dialog = canvas.getByRole("dialog");
+
+      // Find and click close button
+      const closeButton = canvas.getByRole("button", {
+        name: /close dialog/i,
+      });
+      expect(closeButton).toHaveFocus();
+      await userEvent.click(closeButton, { delay: 1000 });
+      // Verify dialog is closed
+      expect(dialog).not.toBeVisible();
+    });
+
+    await step("Dialog focus order, close with cancel button", async () => {
+      await userEvent.click(openButton, { delay: 1000 });
+      const dialog = canvas.getByRole("dialog");
+      expect(dialog).toBeVisible();
+      expect(
+        canvas.getByRole("button", { name: /close dialog/i })
+      ).toHaveFocus();
+      const cancelButton = canvas.getByRole("button", { name: /cancel/i });
+      await userEvent.tab();
+      expect(cancelButton).toHaveFocus();
+      await userEvent.keyboard(" ", { delay: 1000 });
+      expect(dialog).not.toBeVisible();
+      expect(openButton).toHaveFocus();
+    });
+
+    await step("Close Dialog with Escape Key", async () => {
+      expect(openButton).toHaveFocus();
+      await userEvent.click(openButton, { delay: 1000 });
+      await userEvent.tab();
+      expect(openButton).not.toHaveFocus();
+
+      const dialog = canvas.getByRole("dialog");
+      await userEvent.keyboard(" "); // Close the dialog with the keyboard
+      await waitFor(() => {
+        expect(dialog).not.toBeVisible();
+      });
+    });
+  },
+} as Story;