@fpkit/acss 0.4.19 → 0.5.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fpkit/acss",
   "description": "A lightweight React UI library for building modern and accessible components that leverage CSS custom properties for reactive Styles.",
   "private": false,
-  "version": "0.4.19",
+  "version": "0.5.2",
   "scripts": {
     "start": "run-p package:watch sass:watch",
     "dev": "vite --open",
@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "focus-trap": "^7.5.2",
+    "jest-mock": "^29.7.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -121,5 +122,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9987edab37ae375b33c513cad2e254d62af064ca"
+  "gitHead": "2278d7751dcd37ed1799b84773926d9b0268e329"
 }

package/src/components/badge/badge.scss

@@ -10,6 +10,7 @@ sup:has(> span) {
   padding: var(--badge-padding);
   border-radius: var(--badge-radius);
   vertical-align: var(--badge-v-align);
+  font-size: var(--badge-fs);
   span {
     color: inherit;
   }

package/src/components/badge/badge.stories.tsx

@@ -1,9 +1,9 @@
 import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, screen } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+import { within, expect } from '@storybook/test'
+
 
 import Badge from './badge'
-import './badge.scss'
+// import './badge.scss'
 
 const meta: Meta<typeof Badge> = {
   title: 'FP.REACT Components/Badge',

package/src/components/breadcrumbs/breadcrumb.stories.tsx

@@ -1,9 +1,11 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, screen } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+import type { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, fn, expect } from '@storybook/test'
+
 
 import Breadcrumb from './breadcrumb'
 
+const linkClicked = fn()
+
 const meta: Meta<typeof Breadcrumb> = {
   title: 'FP.REACT Components/Breadcrumb',
   component: Breadcrumb,
@@ -16,10 +18,9 @@ const meta: Meta<typeof Breadcrumb> = {
     },
   },
   args: {
-    // @ts-ignore
     children: 'Link',
   },
-} as Story
+} as Meta  
 
 export default meta
 type Story = StoryObj<typeof Breadcrumb>
@@ -75,13 +76,9 @@ export const EncodedBreadcrumbs: Story = {
       },
     ],
     currentRoute: '/products/learning%20in%20public',
+  
   },
 
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    await userEvent.click(screen.getByText('Shirts'))
-    expect(screen.getByText('Shirts')).toBeInTheDocument()
-  },
 } as Story
 
 export const TruncateName: Story = {
@@ -90,3 +87,22 @@ export const TruncateName: Story = {
     currentRoute: '/products/AveryLongNameTruncate',
   },
 } as Story
+
+export const ClickHomeLink: Story = {
+  args: {
+    ...CustomURL.args,
+    currentRoute: '/products/shirts',
+    startRouteUrl: "#",
+    linkProps: {
+      onClick: linkClicked,
+    },
+  },
+  
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const homeLink = canvas.getByRole('link', { name: 'Home' })
+    expect(homeLink).toHaveAttribute('href', '#')
+    // await userEvent.click(homeLink)
+    // expect(linkClicked).toHaveBeenCalled()
+  },
+} as Story

package/src/components/breadcrumbs/breadcrumb.tsx

@@ -2,6 +2,7 @@
 import React from 'react'
 import UI from '#components/ui'
 import { Truncate } from '#libs/content'
+import Link from '#components/link/link'
 
 // TYPES
 
@@ -19,6 +20,8 @@ type BreadcrumbProps = {
   routes?: customRoute[]
   /** Starting route node */
   startRoute?: React.ReactNode
+  /* Starting route url */
+  startRouteUrl?: string
   /** Spacer node between routes */
   spacer?: React.ReactNode
   /** String representing current route */
@@ -27,6 +30,8 @@ type BreadcrumbProps = {
   ariaLabelPrefix?: string
   /** Truncate breadcrumb text after this length */
   truncateLength?: number
+  /** Link props for breadcrumb links */
+  linkProps?: React.ComponentProps<typeof Link>
 } & React.ComponentProps<typeof UI>
 
 // Components
@@ -106,6 +111,7 @@ const Nav = ({
  */
 export const Breadcrumb = ({
   startRoute = 'Home',
+  startRouteUrl = "/",
   currentRoute,
   spacer = <>&#47;</>,
   routes,
@@ -114,6 +120,7 @@ export const Breadcrumb = ({
   classes,
   ariaLabelPrefix,
   truncateLength = 15,
+  linkProps,
   ...props
 }: BreadcrumbProps): React.JSX.Element => {
   const [currentPath, setCurrentPath] = React.useState('')
@@ -122,7 +129,7 @@ export const Breadcrumb = ({
     if (path.length) {
       setCurrentPath(path)
     }
-  }, [])
+  }, [currentRoute])
 
   /**
    * Gets the path name for the given path segment.
@@ -148,6 +155,7 @@ export const Breadcrumb = ({
   /** Unique id for breadcrumb */
   const uuid = React.useId()
 
+
   return currentPath.length ? (
     <Nav
       id={id}
@@ -157,53 +165,53 @@ export const Breadcrumb = ({
       aria-label={ariaLabelPrefix}
     >
       <Items key={`${startRoute}-${uuid}`}>
-        <a href="/">{startRoute}</a>
+        <Link href={startRouteUrl} {...linkProps}>{startRoute}</Link>
       </Items>
+      <>
       {segments.length ? (
         segments.map((segment: any, index: number) => {
           const currentSegment = getPathName(segment)
           const { name, url, path } = currentSegment
-          if (index === lastSegment) {
-            return (
-              <>
-                {typeof segments[lastSegment] === 'string' &&
-                  segments[lastSegment].length > 3 &&
-                  segments[lastSegment] !== segments[lastSegment - 1] && (
-                    <Items key={`${path || index}-${uuid}`}>
-                      <>
-                        <span aria-hidden="true">{spacer}</span>
-                        <a
-                          aria-current="page"
-                          aria-label={
-                            name.length > truncateLength ? name : undefined
-                          }
-                        >
-                          {Truncate(decodeURIComponent(name), truncateLength)}
-                        </a>
-                      </>{' '}
-                    </Items>
-                  )}
-              </>
-            )
-          } else {
-            return (
-              <Items key={`${currentSegment?.name}-${uuid}`}>
-                <span aria-hidden="true">{spacer}</span>
-                <span>
-                  <a
-                    href={url}
-                    aria-label={name.length > truncateLength ? name : undefined}
-                  >
-                    {Truncate(decodeURIComponent(name), truncateLength)}
-                  </a>
-                </span>
-              </Items>
-            )
-          }
+          return index === lastSegment ? (
+            <>
+              {typeof segments[lastSegment] === 'string' &&
+                segments[lastSegment].length > 3 &&
+                segments[lastSegment] !== segments[lastSegment - 1] && (
+                  <Items  key={`${path || index}-${uuid}`}>
+                     
+                      <span aria-hidden="true">{spacer}</span>
+                      <a
+                      href="#"
+                        aria-current="page"
+                        aria-label={
+                          name.length > truncateLength ? name : undefined
+                        }
+                      >
+                        {Truncate(decodeURIComponent(name), truncateLength)}
+                      </a>
+                     
+                  </Items>
+                )}
+            </>
+          ) : (
+            <Items key={`${currentSegment?.name}-${uuid}`}>
+              <span aria-hidden="true">{spacer}</span>
+              <span>
+                <Link
+                  href={url}
+                  aria-label={name.length > truncateLength ? name : undefined}
+                 {...linkProps}
+                >
+                  {Truncate(decodeURIComponent(name), truncateLength)}
+                </Link>
+              </span>
+            </Items>
+          );
         })
       ) : (
-        <></>
+        null
       )}
+      </>
     </Nav>
   ) : (
     <></>

package/src/components/buttons/button.scss

@@ -3,9 +3,9 @@ button {
   --btn-md: calc(16rem / 16);
   --btn-lg: calc(21rem / 16);
   --btn-pill: 100rem;
-  --btn-height: calc(40rem / 16);
+  --btn-height: 2.5rem;
   --fs: 0.95rem;
-  --btn-fs: calc(15rem / 16);
+  --btn-fs: 0.9375rem;
   --btn-bg: lightgray;
   --btn-width: max-content;
 
@@ -58,7 +58,7 @@ button {
     background-color: var(--btn-bg, var(--btn, lightgray));
     filter: invert(1) hue-rotate (180deg);
     transform: scale(0.95) var(--line-style, solid);
-    outline-offset: var(--line-offset, 5px);
+    outline-offset: var(--line-offset, 1px);
 
     &[aria-disabled='true'] {
       transform: none;
@@ -105,7 +105,6 @@ button {
     --btn-width: unset;
     --btn-py: 0.75rem;
     --btn-px: 0.75rem;
-
     &:is(:hover, :focus) {
       background-color: transparent;
       outline: 0.07rem solid var(--btn-cl);

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

@@ -1,57 +1,79 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+import type { StoryObj, Meta } from "@storybook/react";
+import { within, userEvent, expect, fn } from "@storybook/test";
 
-import Button from './button'
-import './button.scss'
+import Button from "./button";
+import "./button.scss";
 
-const meta: Meta<typeof Button> = {
-  title: 'FP.React Components/Buttons',
+const buttonClicked = fn();
+
+const meta = {
+  title: "FP.React Components/Buttons",
   component: Button,
   args: {
-    children: 'Click me',
+    children: "Click me",
+    onClick: buttonClicked,
   },
   parameters: {
-    // actions: { argTypesRegex: '^on.*' },
+    actions: { argTypesRegex: '^on.*' },
   },
-  argTypes: { onClick: { action: 'clicked' } },
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Button>
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 export const ButtonComponent: Story = {
-  args: {},
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByRole('button')).toBeInTheDocument()
-    await userEvent.tab()
-    expect(canvas.getByRole('button')).toHaveFocus()
+  args: {
+    onClick: buttonClicked,
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    await step("Button is rendered", async () => {
+      expect(button).toBeInTheDocument();
+    });
+    await step("Button gets focus on tab", async () => {
+      await userEvent.tab();
+      expect(button).toHaveFocus();
+    });
+    await step("Button is clicked", async () => {
+      await userEvent.click(button);
+      expect(buttonClicked).toHaveBeenCalled();
+    });
+    // step to check for enter key press
+    await step("Button is clicked with enter key", async () => {
+      await userEvent.type(button, "{enter}");
+      expect(buttonClicked).toHaveBeenCalled();
+    });
+    // step check for space key press
+    await step("Button is clicked with space key", async () => {
+      await userEvent.type(button, "{space}");
+      expect(buttonClicked).toHaveBeenCalled();
+    });
   },
-} as Story
+} as Story;
 
 export const Small: Story = {
   args: {
-    'data-btn': 'sm',
+    "data-btn": "sm",
   },
-} as Story
+} as Story;
 
 export const Medium: Story = {
   args: {
-    'data-btn': 'md',
+    "data-btn": "md",
   },
-} as Story
+} as Story;
 
 export const Large: Story = {
   args: {
-    'data-btn': 'lg',
+    "data-btn": "lg",
   },
-} as Story
+} as Story;
 
 export const Custom: Story = {
   args: {
     styles: {
-      '--btn-fs': '2rem',
+      "--btn-fs": "2rem",
     },
   },
-} as Story
+} as Story;

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

@@ -3,7 +3,7 @@ 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/testing-library'
+import { userEvent } from '@storybook/test'
 
 describe('Button', () => {
   it('renders a button element with the correct label', () => {

package/src/components/buttons/button.tsx

@@ -1,8 +1,7 @@
 import UI from '../ui'
 import React from 'react'
 
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
-  Partial<React.ComponentProps<typeof UI>> & {
+export type ButtonProps = Partial<React.ComponentProps<typeof UI>> & {
     /**
      * The button type
      * Required - 'button' | 'submit' | 'reset'
@@ -19,27 +18,54 @@ export const Button = ({
   onPointerDown,
   onPointerOver,
   onPointerLeave,
-
+  onClick,
   ...props
 }: ButtonProps) => {
+  /**
+   * Handles the pointer down event on the button.
+   * Only triggers the onPointerDown callback if the button is not disabled.
+   * @param e The pointer event object from the button element
+   */
   const handlePointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
     if (!disabled) {
       onPointerDown?.(e)
     }
   }
 
+  /**
+     * Handles the pointer over event on the button.
+     * Only triggers the onPointerOver callback if the button is not disabled.
+     * @param e The pointer event object from the button element
+     */
   const handlePointerOver = (e: React.PointerEvent<HTMLButtonElement>) => {
     if (!disabled) {
       onPointerOver?.(e)
     }
   }
 
+  /**
+     * Handles the pointer leave event on the button.
+     * Only triggers the onPointerLeave callback if the button is not disabled.
+     * @param e The pointer event object from the button element
+     */
   const handlePointerLeave = (e: React.PointerEvent<HTMLButtonElement>) => {
     if (!disabled) {
       onPointerLeave?.(e)
     }
   }
 
+  /**
+     * Handles the click event on the button.
+     * Only triggers the onClick callback if the button is not disabled.
+     * @param e The mouse event object from the button element
+     */
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (!disabled) {
+       onClick?.(e)
+    }
+  }
+
+
   /* Returning a button element. */
   return (
     <UI
@@ -48,10 +74,11 @@ export const Button = ({
       onPointerOver={handlePointerOver}
       onPointerDown={handlePointerDown}
       onPointerLeave={handlePointerLeave}
+      onKeyDown={handlePointerDown}
       style={styles}
       className={classes}
       aria-disabled={disabled}
-      onClick={handlePointerDown}
+      onClick={handleOnClick}
       {...props}
     >
       {children}

package/src/components/cards/card.scss

@@ -5,8 +5,9 @@
   --card-position: relative;
   --card-display: flex;
   --card-direction: column;
-  --card-gap: 1.5rem;
+  --card-gap: 1rem;
 }
+
 [data-card],
 [data-component~='card'] {
   display: var(--card-display);
@@ -15,11 +16,11 @@
   border-radius: var(--card-radius);
   background-color: var(--card-bg);
   text-align: var(--card-align, left);
-
-  [data-card-content],
+  
   h3,
   h2 {
     margin-block-end: 0;
+    padding-block-end: 0;
   }
   + div {
     margin-block-start: 0;
@@ -41,3 +42,4 @@
     padding-block-start: calc(var(--card-p) - 0.5rem);
   }
 }
+

package/src/components/cards/card.stories.tsx

@@ -1,6 +1,6 @@
 import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, screen } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+import { within, userEvent, screen } from '@storybook/test'
+
 
 import Card from './card'
 // import './card.scss'
@@ -30,7 +30,7 @@ export const Multiple: Story = {
     },
   },
   render: (args) => (
-    <>
+    <div style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}>
       <Card {...args}>
         <p>
           Proident et amet aliqua excepteur sunt qui deserunt commodo tempor
@@ -55,7 +55,7 @@ export const Multiple: Story = {
           culpa aliqua veniam.
         </p>
       </Card>
-    </>
+    </div>
   ),
 } as Story
 

package/src/components/cards/card.tsx

@@ -133,7 +133,6 @@ Footer.displayName = 'Footer'
  * @param {boolean} [props.renderStyles=true] - Whether to render default styles
  * @param {string} [props.dataStyle] - data-card attribute value
  * @param {string} [props.id] - Unique ID
- *
  * @returns {ReactElement} Card component
  */
 export const Card = ({

package/src/components/details/details.scss

@@ -4,10 +4,10 @@ details {
   --details-border: 1px solid #dfdfdf;
   --details-display: flex;
   --details-justify: flex-start;
-  --details-direction: columns;
-  --details-gap: 5rem;
+  --details-direction: column;
+  --details-gap: 0rem;
   --details-px: 1.5rem;
-  --details-py: 1.5rem;
+  --details-py: 1rem;
   --details-radius: 0.5rem;
   --summary-cursor: pointer;
   --summary-transitions: all 0.75s linear;
@@ -41,11 +41,19 @@ details {
     padding-block: var(--summary-py, var(--details-py));
     gap: var(--summary-gap);
     list-style: none;
+    border-top-left-radius: var(--details-radius);
+    border-top-right-radius: var(--details-radius);
 
     &::-webkit-details-marker {
       display: none;
     }
 
+    &:focus-within  {
+      outline: none;
+      border-bottom: solid 2px var(--details-border);
+      background-color: whitesmoke;
+    }
+
     /* This ensures no bullet points are shown */
 
     &:hover {
@@ -59,6 +67,7 @@ details {
   > section {
     padding-inline: var(--details-px);
     padding-block: var(--details-py);
+    margin-block-start: 0;
     border: 1px transparent solid;
   }
 

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

@@ -1,10 +1,9 @@
 import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, screen } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+import { within, expect, userEvent } from '@storybook/test'
+
 
 import Details from './details'
 import Icons from '../icons/icon'
-import '../../styles/details/details.css'
 
 const content = (
   <>
@@ -56,7 +55,7 @@ export const DetailsDropdown: Story = {
   args: {},
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-    expect(canvas.getByRole('group')).toBeInTheDocument()
+    expect(canvas.getByRole('group', { name: /details dropdown/i })).toBeInTheDocument()
   },
 } as Story
 
@@ -120,3 +119,20 @@ export const DetailsAccordion: Story = {
     </>
   )
 } as Story
+
+export const DetailsInteractionTest: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Find the summary element
+    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');
+  },
+}

package/src/components/details/details.tsx

@@ -61,10 +61,11 @@ export const Details = ({
       ref={ref}
       open={open}
       aria-label={ariaLabel || 'Details dropdown'}
+      // aria-roledescription="detail accordion"
       name={name}
       {...props}
     >
-      <UI as="summary" role="group" onPointerDown={onPointerDownCallback}>
+      <UI as="summary" onPointerDown={onPointerDownCallback}>
         {icon}
         {summary}
       </UI>

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

@@ -1,6 +1,6 @@
 import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, screen } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+import { within, expect } from '@storybook/test'
+
 
 import Form from './form'
 import './form.scss'

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

@@ -1,6 +1,6 @@
 import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, screen } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+import { within, userEvent, expect } from '@storybook/test'
+
 
 import Input from './inputs'
 import './form.scss'