@fpkit/acss 0.5.5 → 0.5.7

package/src/components/alert/elements/dismiss-button.stories.tsx

@@ -0,0 +1,31 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
+import DismissButton from "./dismiss-button";
+
+const meta: Meta<typeof DismissButton> = {
+  title: "FP.REACT Elements/DismissButton",
+  component: DismissButton,
+  tags: ["new"],
+  parameters: {
+    actions: { argTypesRegex: "^on.*" },
+    docs: {
+      description: {
+        component: "A button component used to dismiss alerts.",
+      },
+    },
+  },
+  args: {
+    onDismiss: () => alert("Dismiss button clicked"),
+  },
+} as Meta;
+
+export default meta;
+type Story = StoryObj<typeof DismissButton>;
+
+export const Default: Story = {
+  args: {},
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByLabelText(/close alert/i)).toBeInTheDocument();
+  },
+} as Story;

package/src/components/alert/elements/dismiss-button.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Button from "#components/buttons/button";
+import Icon from "#components/icons/icon";
+/** Props for the DismissButton component */
+type DismissButtonProps = {
+  /** Callback function when dismiss button is clicked */
+  onDismiss: () => void;
+  /** Size of the close icon in pixels. Defaults to 16 */
+  iconSize?: number;
+};
+export const DismissButton = React.memo(
+  ({ onDismiss, iconSize = 16 }: DismissButtonProps) => (
+    <Button
+      type="button"
+      onClick={onDismiss}
+      aria-label="Close alert"
+      className="alert-dismiss"
+      data-btn="icon sm"
+    >
+      <Icon>
+        <Icon.Close size={iconSize} />
+      </Icon>
+    </Button>
+  )
+);
+
+export default DismissButton;
+DismissButton.displayName = "DismissButton";

package/src/components/badge/badge.mdx

@@ -0,0 +1,124 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="FP.REACT Components/Badge/Readme" />
+
+# Badge Component
+
+A lightweight and flexible badge component for displaying small counts, labels,
+or status indicators. The Badge component renders as a superscript element with
+customizable styling.
+
+## Features
+
+- Renders as a `<sup>` element with nested `<span>`
+- Fully customizable via CSS custom properties
+- Supports rounded and standard variants
+- ARIA-friendly with proper accessibility attributes
+- Integrates with FPKit UI component system
+
+## Props
+
+The Badge component accepts the following props:
+
+- `children: React.ReactNode` - Content to display inside the badge
+- `id?: string` - Optional ID for the badge element
+- `styles?: object` - Custom styles object
+- `classes?: string` - Additional CSS classes
+- `data-badge?: string` - Data attribute for badge variants (e.g. "rounded")
+- All standard HTML attributes supported by `<sup>` element
+
+## Technical Details
+
+- Built using React functional components
+- Uses TypeScript for type safety
+- Styled with CSS custom properties
+- Leverages base UI component from FPKit
+
+## Usage Example
+
+### Basic Usage
+
+```tsx
+import Badge from "./badge";
+
+function Example() {
+  return (
+    <p>
+      Messages <Badge>3</Badge>
+    </p>
+  );
+}
+```
+
+### Rounded Badge
+
+```tsx
+import Badge from "./badge";
+
+function Example() {
+  return (
+    <p>
+      Status <Badge data-badge="rounded">21</Badge>
+    </p>
+  );
+}
+```
+
+### Custom Styled Badge
+
+```tsx
+import Badge from "./badge";
+
+function Example() {
+  return (
+    <p>
+      Count{" "}
+      <Badge
+        styles={{
+          "--badge-bg": "blue",
+          "--badge-color": "white",
+        }}
+        aria-label="badge count"
+      >
+        5
+      </Badge>
+    </p>
+  );
+}
+```
+
+## Styling
+
+The component uses CSS custom properties for styling:
+
+```css
+--badge-bg: lightgray; /* Background color */
+--badge-color: currentColor; /* Text color */
+--badge-radius: 0.5rem; /* Border radius */
+--badge-padding: 0.3rem; /* Inner padding */
+--badge-v-align: 0.5rem; /* Vertical alignment */
+--badge-fs: var(--fs-1); /* Font size */
+```
+
+For rounded badges, use the `data-badge="rounded"` attribute which sets:
+
+```css
+--badge-radius: 100%;
+--badge-padding: 0.2rem;
+```
+
+## WCAG 2.1 Guidelines
+
+- Ensures sufficient color contrast (1.4.3)
+- Supports text resizing (1.4.4)
+- Maintains spacing on zoom (1.4.12)
+- Uses semantic HTML elements (4.1.1)
+- Provides meaningful content (4.1.2)
+
+## Additional Notes
+
+- Use semantic values for badge content
+- Ensure adequate color contrast when customizing
+- Keep badge content concise
+- Include ARIA labels when needed
+- Test with screen readers and keyboard navigation

package/src/components/badge/badge.scss

@@ -1,10 +1,10 @@
 sup:has(> span) {
   --badge-bg: lightgray;
   --badge-color: currentColor;
-  --badge-radius: 0.15rem;
-  --badge-padding: 0.15rem;
+  --badge-radius: 0.5rem;
+  --badge-padding: 0.3rem;
   --badge-v-align: 0.5rem;
-  --badge-fs: clamp(0.4rem, 0.5rem + 0.5vw, 7rem);
+  --badge-fs: var(--fs-1);
   background-color: var(--badge-bg);
   color: var(--badge-color);
   padding: var(--badge-padding);
@@ -14,7 +14,7 @@ sup:has(> span) {
   span {
     color: inherit;
   }
-  &[data-badge~='rounded'] {
+  &[data-badge~="rounded"] {
     --badge-radius: 100%;
     --badge-padding: 0.2rem;
   }

package/src/components/buttons/button.scss

@@ -114,6 +114,7 @@ button {
   &[data-btn~="icon"] {
     padding: unset;
     height: unset;
+    --btn-bg: transparent;
     min-width: 1.5rem;
     min-height: 1.5rem;
     text-align: center;

package/src/components/buttons/button.test.tsx

@@ -1,86 +1,86 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { Button } from './button'
-import user from '@testing-library/user-event'
-import jest from 'jest-mock'
-import { userEvent } from '@storybook/test'
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Button } from "./button";
+// import user from '@testing-library/user-event'
+import jest from "jest-mock";
+import { userEvent } from "@storybook/test";
 
-describe('Button', () => {
-  it('renders a button element with the correct label', () => {
-    render(<Button type="button">Click me</Button>)
-    const button = screen.getByText('Click me')
-    expect(button.tagName).toBe('BUTTON')
-    screen.logTestingPlaygroundURL()
-  })
+describe("Button", () => {
+  it("renders a button element with the correct label", () => {
+    render(<Button type="button">Click me</Button>);
+    const button = screen.getByText("Click me");
+    expect(button.tagName).toBe("BUTTON");
+    screen.logTestingPlaygroundURL();
+  });
 
   it('has the type attribute set to "button" by default', () => {
-    render(<Button type="button">Click me</Button>)
-    const button = screen.getByText('Click me')
-    expect(button).toHaveAttribute('type', 'button')
-  })
+    render(<Button type="button">Click me</Button>);
+    const button = screen.getByText("Click me");
+    expect(button).toHaveAttribute("type", "button");
+  });
 
-  it('calls the onClick handler when clicked', async () => {
-    const handleClick = jest.fn()
-    const handlePointerEvents = jest.fn()
+  it("calls the onClick handler when clicked", async () => {
+    const handleClick = jest.fn();
+    const handlePointerEvents = jest.fn();
     render(
       <Button type="button" onClick={handleClick}>
         Click me
-      </Button>,
-    )
-    const button = screen.getByText('Click me')
-    await userEvent.click(button)
-    expect(handleClick).toHaveBeenCalledTimes(1)
-    expect(handlePointerEvents).toHaveBeenCalledTimes(0)
-  })
+      </Button>
+    );
+    const button = screen.getByText("Click me");
+    await userEvent.click(button);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(handlePointerEvents).toHaveBeenCalledTimes(0);
+  });
 
-  it('applies custom styles when provided', () => {
+  it("applies custom styles when provided", () => {
     render(
-      <Button type="button" styles={{ backgroundColor: 'red' }}>
+      <Button type="button" styles={{ backgroundColor: "red" }}>
         Click me
-      </Button>,
-    )
-    const button = screen.getByRole('button')
-    expect(button).toHaveAttribute('style')
-  })
+      </Button>
+    );
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("style");
+  });
 
-  it('calls the onPointerDown handler when pointer is down', async () => {
-    const handlePointerDown = jest.fn()
+  it("calls the onPointerDown handler when pointer is down", async () => {
+    const handlePointerDown = jest.fn();
     render(
       <Button type="button" onPointerDown={handlePointerDown}>
         Click me
-      </Button>,
-    )
-    const button = screen.getByText('Click me')
-    await userEvent.click(button)
-    expect(handlePointerDown).toHaveBeenCalledTimes(1)
-  })
+      </Button>
+    );
+    const button = screen.getByText("Click me");
+    await userEvent.click(button);
+    expect(handlePointerDown).toHaveBeenCalledTimes(1);
+  });
 
-  it('calls the onPointerOver handler when pointer is over', async () => {
-    const handlePointerOver = jest.fn()
+  it("calls the onPointerOver handler when pointer is over", async () => {
+    const handlePointerOver = jest.fn();
     render(
       <Button type="button" onPointerOver={handlePointerOver}>
         Click me
-      </Button>,
-    )
-    const button = screen.getByText('Click me')
-    await userEvent.hover(button)
-    expect(handlePointerOver).toHaveBeenCalledTimes(1)
-  })
+      </Button>
+    );
+    const button = screen.getByText("Click me");
+    await userEvent.hover(button);
+    expect(handlePointerOver).toHaveBeenCalledTimes(1);
+  });
 
-  it('calls the onPointerLeave handler when pointer leaves', async () => {
-    const handlePointerEvents = jest.fn()
+  it("calls the onPointerLeave handler when pointer leaves", async () => {
+    const handlePointerEvents = jest.fn();
     render(
       <Button type="button" onPointerLeave={handlePointerEvents}>
         Click me
-      </Button>,
-    )
-    const button = screen.getByText('Click me')
-    await userEvent.unhover(button)
-    expect(handlePointerEvents).toHaveBeenCalledTimes(1)
-  })
+      </Button>
+    );
+    const button = screen.getByText("Click me");
+    await userEvent.unhover(button);
+    expect(handlePointerEvents).toHaveBeenCalledTimes(1);
+  });
 
-  it('it is disabled when disabled is true', () => {
-    const handleClick = jest.fn()
+  it("it is disabled when disabled is true", () => {
+    const handleClick = jest.fn();
     render(
       <Button
         type="button"
@@ -90,15 +90,15 @@ describe('Button', () => {
         onPointerLeave={handleClick}
       >
         Click me
-      </Button>,
-    )
-    const button = screen.getByText('Click me')
-    expect(button).not.toBeDisabled()
-    userEvent.click(button)
-    expect(handleClick).toHaveBeenCalledTimes(0)
-    userEvent.hover(button)
-    expect(handleClick).toHaveBeenCalledTimes(0)
-    userEvent.unhover(button)
-    expect(handleClick).toHaveBeenCalledTimes(0)
-  })
-})
+      </Button>
+    );
+    const button = screen.getByText("Click me");
+    expect(button).not.toBeDisabled();
+    userEvent.click(button);
+    expect(handleClick).toHaveBeenCalledTimes(0);
+    userEvent.hover(button);
+    expect(handleClick).toHaveBeenCalledTimes(0);
+    userEvent.unhover(button);
+    expect(handleClick).toHaveBeenCalledTimes(0);
+  });
+});

package/src/components/details/details.scss

@@ -8,7 +8,7 @@ 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 ease-in-out;
   --summary-display: flex;
@@ -30,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;
   }

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.