@fpkit/acss 0.5.6 → 0.5.8

package/src/components/alert/README.mdx

@@ -1,86 +1,74 @@
 import { Meta } from "@storybook/blocks";
 
+<Meta title="FP.REACT Components/Alert/Readme" />
+
 # Alert Component
 
 ## Summary
 
-The Alert component is used to display important messages to users. It can be
-dismissible and supports various interaction tests.
+The `Alert` component is a customizable component for displaying status messages
+with different severity levels. It supports multiple severity types (default,
+info, success, warning, error) and can include optional titles and dismissal
+functionality.
 
 ## Features
 
-- Display alert messages
-- Dismissible option
-- Customizable title and content
-- Interaction testing support
+- Multiple severity levels with matching visual indicators
+- Optional title and dismissible states
+- Accessible by default with appropriate ARIA attributes
+- Customizable icons through `iconProps`
 
 ## Props
 
-| Prop          | Type        | Description                               |
-| ------------- | ----------- | ----------------------------------------- |
-| `title`       | `string`    | The title of the alert                    |
-| `children`    | `ReactNode` | The content of the alert                  |
-| `dismissible` | `boolean`   | Whether the alert can be dismissed        |
-| `onDismiss`   | `function`  | Callback function when alert is dismissed |
-| `open`        | `boolean`   | Whether the alert is visible              |
-| `className`   | `string`    | Additional CSS classes for the alert      |
+```tsx
+export type AlertProps = {
+  open: boolean;
+  severity?: "default" | "info" | "success" | "warning" | "error";
+  children: React.ReactNode;
+  title?: string;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  iconProps?: IconProps;
+} & React.ComponentProps<typeof UI>;
+```
 
 ## Technical Details
 
-The Alert component is built using React functional components and hooks. It
-supports interaction testing using Storybook.
+The `Alert` component uses the `UI` component for rendering and supports various
+severity levels with corresponding ARIA attributes for accessibility. It also
+allows for custom icons through the `iconProps` prop.
 
 ## Usage Example
 
 ### Basic Usage
 
 ```tsx
-import React from "react";
-import Alert from "./alert";
-
-const App = () => (
-  <Alert
-    title="Alert Title"
-    dismissible={true}
-    onDismiss={() => console.log("Alert dismissed")}
-  >
-    This is an alert message
-  </Alert>
-);
-
-export default App;
+import Alert from "#components/alert";
+
+<Alert open={true} severity="info">
+  This is an info alert.
+</Alert>;
 ```
 
 ### Advanced Usage
 
 ```tsx
-import React, { useState } from "react";
-import Alert from "./alert";
-
-const App = () => {
-  const [isOpen, setIsOpen] = useState(true);
-
-  return (
-    <div>
-      <button onClick={() => setIsOpen(!isOpen)}>Toggle Alert</button>
-      {isOpen && (
-        <Alert
-          title="Advanced Alert"
-          dismissible={true}
-          onDismiss={() => setIsOpen(false)}
-        >
-          This is an advanced alert message
-        </Alert>
-      )}
-    </div>
-  );
-};
-
-export default App;
+import Alert from "#components/alert";
+
+<Alert
+  open={true}
+  severity="error"
+  title="Error"
+  dismissible={true}
+  onDismiss={() => console.log("Alert dismissed")}
+  iconProps={{ fill: "#000", size: 24 }}
+>
+  This is an error alert with a custom icon.
+</Alert>;
 ```
 
 ### Additional Notes
 
-- Ensure to handle the `onDismiss` callback to manage the alert's visibility
-  state.
-- Customize the alert's appearance using the `className` prop.
+- The `Alert` component is designed to be accessible by default.
+- The `dismissible` prop allows the alert to be dismissed by the user.
+- Custom icons can be provided through the `iconProps` prop.

package/src/components/alert/alert.scss

@@ -74,7 +74,7 @@
   button {
     &[data-btn~="icon"] {
       --btn-bg: transparent;
-      max-height: fit-content;
+      // max-height: 1.5rem;
     }
   }
 }

package/src/components/alert/alert.stories.tsx

@@ -104,6 +104,7 @@ export const InteractionTest: Story = {
   args: {
     open: true,
     className: "my alert",
+    severity: "info",
   },
   decorators: [WithInstructions(instructions, "Alert interactions test:")],
   play: async ({ canvasElement, step }) => {
@@ -117,13 +118,13 @@ export const InteractionTest: Story = {
         expect(dismissButton).toBeInTheDocument();
       }
     );
-    // await step(
-    //   "Tab through the alert and check if the button gets focused",
-    //   async () => {
-    //     userEvent.tab({ delay: 500 });
-    //     expect(dismissButton).toHaveFocus();
-    //   }
-    // );
+    await step(
+      "Tab through the alert and check if the button gets focused",
+      async () => {
+        await userEvent.tab({ delay: 500 });
+        expect(dismissButton).toHaveFocus();
+      }
+    );
     await step("Click the button to dismiss the alert", async () => {
       await userEvent.click(dismissButton, { delay: 500 });
       expect(alert).not.toBeInTheDocument();

package/src/components/alert/alert.tsx

@@ -44,6 +44,11 @@ export type AlertProps = {
    */
   iconSize?: number;
 
+  /**
+   * Whether to hide the icon.
+   */
+  hideIcon?: boolean;
+
   /**
    * Additional props to pass to the Icon component.
    */
@@ -75,7 +80,9 @@ export type AlertProps = {
  * ```
  *
  * @see {@link AlertProps} for available configuration options
- */ const Alert: React.FC<AlertProps> = ({
+ */
+
+const Alert: React.FC<AlertProps> = ({
   open,
   severity = "default",
   children,
@@ -84,6 +91,7 @@ export type AlertProps = {
   onDismiss,
   iconSize,
   iconProps,
+  hideIcon,
   ...props
 }) => {
   const [isVisible, setIsVisible] = React.useState(open);
@@ -137,7 +145,7 @@ export type AlertProps = {
       data-alert={severity}
       {...props}
     >
-      <UI aria-hidden="true">{severityIcons[severity]}</UI>
+      {!hideIcon && <UI aria-hidden="true">{severityIcons[severity]}</UI>}
       <UI as="div" className="alert-message">
         {title && (
           <UI as="h3" className="alert-title">

package/src/components/buttons/README.mdx

@@ -0,0 +1,96 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="FP.REACT Components/Buttons/Readme" />
+
+# Button
+
+## Summary
+
+The `Button` component is a versatile and customizable button element that
+supports various types and styles. It is designed to be reusable and accessible.
+
+## Features
+
+- Supports `button`, `submit`, and `reset` types
+- Customizable styles and classes
+- Handles various pointer events
+- Accessible with `aria-disabled` attribute
+
+## Props
+
+| Name             | Type                                                 | Default    | Description                            |
+| ---------------- | ---------------------------------------------------- | ---------- | -------------------------------------- |
+| `type`           | `'button' \| 'submit' \| 'reset'`                    | `'button'` | The button type                        |
+| `styles`         | `React.CSSProperties`                                | -          | Inline styles for the button           |
+| `disabled`       | `boolean`                                            | `false`    | Disables the button when set to `true` |
+| `classes`        | `string`                                             | -          | Additional CSS classes for the button  |
+| `onPointerDown`  | `(e: React.PointerEvent<HTMLButtonElement>) => void` | -          | Callback for pointer down event        |
+| `onPointerOver`  | `(e: React.PointerEvent<HTMLButtonElement>) => void` | -          | Callback for pointer over event        |
+| `onPointerLeave` | `(e: React.PointerEvent<HTMLButtonElement>) => void` | -          | Callback for pointer leave event       |
+| `onClick`        | `(e: React.MouseEvent<HTMLButtonElement>) => void`   | -          | Callback for click event               |
+
+## Technical Details
+
+The `Button` component uses the `UI` component from the `#components/ui`
+library. It handles various pointer events and ensures accessibility by using
+the `aria-disabled` attribute.
+
+## Usage Example
+
+### Basic Usage
+
+```tsx
+import React from "react";
+import Button from "#components/buttons/button";
+
+const handleClick = () => {
+  console.log("Button clicked");
+};
+
+const BasicButton = () => (
+  <Button type="button" onClick={handleClick}>
+    Click Me
+  </Button>
+);
+
+export default BasicButton;
+```
+
+### Advanced Usage
+
+```tsx
+import React from "react";
+import Button from "#components/buttons/button";
+
+const handlePointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
+  console.log("Pointer down", e);
+};
+
+const handlePointerOver = (e: React.PointerEvent<HTMLButtonElement>) => {
+  console.log("Pointer over", e);
+};
+
+const handlePointerLeave = (e: React.PointerEvent<HTMLButtonElement>) => {
+  console.log("Pointer leave", e);
+};
+
+const AdvancedButton = () => (
+  <Button
+    type="submit"
+    styles={{ backgroundColor: "blue", color: "white" }}
+    onPointerDown={handlePointerDown}
+    onPointerOver={handlePointerOver}
+    onPointerLeave={handlePointerLeave}
+  >
+    Submit
+  </Button>
+);
+
+export default AdvancedButton;
+```
+
+## Additional Notes
+
+- Ensure the `type` prop is set to one of `'button'`, `'submit'`, or `'reset'`.
+- The `styles` prop can be used to apply inline styles to the button.
+- The `disabled` prop can be used to disable the button.

package/src/components/buttons/button.scss

@@ -2,18 +2,20 @@ button {
   --btn-xs: 0.6rem;
   --btn-sm: 0.7rem;
   --btn-md: 0.85rem;
-  --btn-lg: calc(21rem / 16);
+  --btn-lg: 1.3125rem;
   --btn-pill: 100rem;
   --btn-height: 2.5rem;
   --fs: 0.95rem;
   --btn-fs: 0.9375rem;
   --btn-bg: lightgray;
   --btn-width: max-content;
+  --btn-calc-height: var(--btn-height, calc(40rem / 16));
 
   font-size: var(--btn-fs);
   font-weight: var(--btn-fw, 500);
   height: var(--btn-height, calc(40rem / 16));
-  min-height: var(--btn-height);
+  max-height: var(--btn-calc-height);
+  min-height: 1.5rem;
   place-items: var(--btn-place, center);
   padding-inline: var(--btn-px, calc(var(--btn-fs) + 1.1%));
   padding-block: var(--btn-py, calc(var(--btn-fs) + 0.75%));

package/src/components/details/README.mdx

@@ -0,0 +1,101 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="FP.REACT Components/Details/Readme" />
+
+# Details Component
+
+## Summary
+
+The `Details` component is a versatile and accessible component that provides a
+collapsible section for displaying content. It is built using functional
+components and hooks, ensuring reusability and performance optimization.
+
+## Features
+
+- Accessible with aria-label support.
+- Customizable with styles and class names.
+- Supports icons and custom summary content.
+- Easy to integrate and use in any React application.
+
+## Props
+
+| Name            | Type                                                  | Description                                       |
+| --------------- | ----------------------------------------------------- | ------------------------------------------------- |
+| `summary`       | `React.ReactNode`                                     | The summary text shown for the details. Required. |
+| `ariaLabel`     | `string`                                              | The aria-label element for accessibility.         |
+| `styles`        | `React.CSSProperties`                                 | CSS styles object.                                |
+| `classes`       | `string`                                              | Classnames string.                                |
+| `open`          | `boolean`                                             | Whether the details is open.                      |
+| `onToggle`      | `(e: React.PointerEvent<HTMLDetailsElement>) => void` | onToggle callback.                                |
+| `onPointerDown` | `(e: React.PointerEvent<HTMLDetailsElement>) => void` | onPointerDown callback.                           |
+| `children`      | `React.ReactNode`                                     | The content inside the details.                   |
+| `ref`           | `React.Ref<any>`                                      | Ref object.                                       |
+| `name`          | `string`                                              | Name attribute for the details element.           |
+
+## Technical Details
+
+The `Details` component is built using TypeScript for type-checking and enhanced
+developer experience. It uses functional components and hooks to ensure
+performance and reusability.
+
+## Usage Example
+
+### Basic Usage
+
+```tsx
+import React from "react";
+import Details from "./details";
+import Icons from "../icons/icon";
+
+const content = (
+  <>
+    <p>Example content inside the details component.</p>
+  </>
+);
+
+const icon = <Icons.Add />;
+
+const Example = () => (
+  <Details summary="Summary Section" icon={icon} ariaLabel="Details Section">
+    {content}
+  </Details>
+);
+
+export default Example;
+```
+
+### Advanced Usage
+
+```tsx
+import React from "react";
+import Details from "./details";
+import Icons from "../icons/icon";
+
+const content = (
+  <>
+    <p>Advanced example content inside the details component.</p>
+  </>
+);
+
+const icon = <Icons.Add />;
+
+const AdvancedExample = () => (
+  <Details
+    summary="Advanced Summary Section"
+    icon={icon}
+    ariaLabel="Advanced Details Section"
+    open={true}
+    onToggle={(e) => console.log("Toggled", e)}
+  >
+    {content}
+  </Details>
+);
+
+export default AdvancedExample;
+```
+
+### Additional Notes
+
+- Ensure to provide meaningful aria-labels for accessibility.
+- Customize the component using the `styles` and `classes` props.
+- Use the `onToggle` and `onPointerDown` callbacks for custom interactions.

package/src/components/details/details.scss

@@ -1,22 +1,22 @@
 details {
-  --details-w: 100%;
-  --details-h: max-content;
-  --details-border: 1px solid #dfdfdf;
-  --details-display: flex;
-  --details-justify: flex-start;
+  --details-border: 0.0625rem solid #dfdfdf;
   --details-direction: column;
+  --details-display: flex;
   --details-gap: 0rem;
+  --details-h: max-content;
+  --details-justify: flex-start;
   --details-px: 1.5rem;
   --details-py: 1rem;
-  --details-radius: var(--border-radius);
+  --details-radius: 0;
+  --details-w: 100%;
+  --max-h-closed: 6.25rem;
+  --max-h-open: 50rem;
+  --summary-align: center;
   --summary-cursor: pointer;
-  --summary-transitions: all 0.75s ease-in-out;
   --summary-display: flex;
-  --summary-justify: flex-start;
-  --summary-align: center;
   --summary-gap: 0.5rem;
-  --max-h-closed: 6.25rem;
-  --max-h-open: 50rem;
+  --summary-justify: flex-start;
+  --summary-transitions: all 0.75s ease-in-out;
 
   interpolate-size: allow-keywords;
   display: var(--details-display);
@@ -25,12 +25,11 @@ details {
   gap: var(--details-gap);
   width: var(--details-w);
   border: var(--details-border);
+  border-left: none;
+  border-right: none;
   transition: var(--summary-transitions);
   max-height: var(--max-h-closed);
   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
@@ -71,7 +70,7 @@ details {
 
     &:focus-within {
       outline: none;
-      border-bottom: solid 2px var(--details-border);
+      border-bottom: solid 2px currentColor;
       background-color: whitesmoke;
     }
 
@@ -84,6 +83,13 @@ details {
     }
   }
 
+  .list-styles {
+    summary {
+      border-left: none;
+      border-right: none;
+    }
+  }
+
   > section {
     padding-inline: var(--details-px);
     padding-block: var(--details-py);

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

@@ -60,6 +60,12 @@ export const DetailsDropdown: Story = {
   },
 } as Story;
 
+export const DetailsStyles: Story = {
+  args: {
+    classes: "list-style",
+  },
+} as Story;
+
 export const DetailsOpen: Story = {
   args: {
     open: true,
@@ -123,19 +129,41 @@ export const DetailsAccordion: Story = {
 
 export const DetailsInteractionTest: Story = {
   args: {},
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
     // Find the summary element
     const summaryElement = canvas.getByText("Summary Section");
+    // add an open step
+    await step("Open the details", async () => {
+      // Simulate a click on the summary element
+      await userEvent.click(summaryElement, { delay: 500 });
+
+      // Assert that the details element is open
+      const detailsElement = canvas.getByRole("group", {
+        name: /details dropdown/i,
+      });
+      expect(detailsElement).toHaveAttribute("open");
+    });
+
+    await step("Close the detail panel", async () => {
+      await userEvent.click(summaryElement, { delay: 500 });
+
+      expect(summaryElement).not.toHaveAttribute("open");
+    });
+
+    // test if it works with the space bar
+    await step("Open the details with space", async () => {
+      summaryElement.focus();
+      expect(summaryElement).toHaveFocus();
 
-    // Simulate a click on the summary element
-    await userEvent.click(summaryElement);
+      await userEvent.type(summaryElement, "{space}", { delay: 500 });
 
-    // Assert that the details element is open
-    const detailsElement = canvas.getByRole("group", {
-      name: /details dropdown/i,
+      // Assert that the details element is open
+      const detailsElement = canvas.getByRole("group", {
+        name: /details dropdown/i,
+      });
+      expect(detailsElement).toHaveAttribute("open");
     });
-    expect(detailsElement).toHaveAttribute("open");
   },
 };

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

@@ -104,7 +104,7 @@ export const ModalInteractions: Story = {
       expect(openButton).not.toHaveFocus();
 
       const dialog = canvas.getByRole("dialog");
-      await userEvent.keyboard(" "); // Close the dialog with the keyboard
+      await userEvent.type(dialog, "{Escape}", { delay: 500 }); // Close the dialog with the keyboard
       await waitFor(() => {
         expect(dialog).not.toBeVisible();
       });

package/src/styles/alert/alert.css

@@ -62,7 +62,6 @@
 }
 [role=alert] button[data-btn~=icon] {
   --btn-bg: transparent;
-  max-height: fit-content;
 }
 
 /*# sourceMappingURL=alert.css.map */

package/src/styles/alert/alert.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/alert/alert.scss"],"names":[],"mappings":"AAAA;AACE;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA","file":"alert.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/alert/alert.scss"],"names":[],"mappings":"AAAA;AACE;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE","file":"alert.css"}

package/src/styles/buttons/button.css

@@ -2,17 +2,19 @@ button {
   --btn-xs: 0.6rem;
   --btn-sm: 0.7rem;
   --btn-md: 0.85rem;
-  --btn-lg: calc(21rem / 16);
+  --btn-lg: 1.3125rem;
   --btn-pill: 100rem;
   --btn-height: 2.5rem;
   --fs: 0.95rem;
   --btn-fs: 0.9375rem;
   --btn-bg: lightgray;
   --btn-width: max-content;
+  --btn-calc-height: var(--btn-height, calc(40rem / 16));
   font-size: var(--btn-fs);
   font-weight: var(--btn-fw, 500);
   height: var(--btn-height, 2.5rem);
-  min-height: var(--btn-height);
+  max-height: var(--btn-calc-height);
+  min-height: 1.5rem;
   place-items: var(--btn-place, center);
   padding-inline: var(--btn-px, calc(var(--btn-fs) + 1.1%));
   padding-block: var(--btn-py, calc(var(--btn-fs) + 0.75%));
@@ -91,6 +93,7 @@ button[data-btn~=lg] {
 button[data-btn~=icon] {
   padding: unset;
   height: unset;
+  --btn-bg: transparent;
   min-width: 1.5rem;
   min-height: 1.5rem;
   text-align: center;

package/src/styles/buttons/button.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/buttons/button.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA","file":"button.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/buttons/button.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA","file":"button.css"}