@fpkit/acss 0.4.18 → 0.5.0

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.18",
+  "version": "0.5.0",
   "scripts": {
     "start": "run-p package:watch sass:watch",
     "dev": "vite --open",
@@ -121,5 +121,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "068458856ef6e1ef8a89bb28ed19efcb008b72e5"
+  "gitHead": "7b4a44c832dfc94a47110337789fe47e763c7257"
 }

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 { 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,7 +18,6 @@ const meta: Meta<typeof Breadcrumb> = {
     },
   },
   args: {
-    // @ts-ignore
     children: 'Link',
   },
 } as Story
@@ -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
+
+  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,52 @@ 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
+                        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.stories.tsx

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

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/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'

package/src/components/details/details.scss

@@ -4,8 +4,8 @@ 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-radius: 0.5rem;
@@ -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 {

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'

package/src/components/form/select.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 Select from './select'
 import React from 'react'

package/src/components/form/select.tsx

@@ -70,41 +70,31 @@ export const Select = ({
 
   const handleOnBlur = (e: React.FocusEvent<HTMLSelectElement>) => {
     if (onBlur && !disabled) onBlur?.(e)
-    const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-      if (onSelectionChange && !disabled) onSelectionChange?.(e)
-    }
-
-    const handlePointerDown = (e: React.PointerEvent<HTMLSelectElement>) => {
-      if (onPointerDown && !disabled) onPointerDown?.(e)
-    }
-
-    const handleOnBlur = (e: React.FocusEvent<HTMLSelectElement>) => {
-      if (onBlur && !disabled) onBlur?.(e)
-    }
-
-    return (
-      <UI
-        as="select"
-        id={id}
-        ref={ref}
-        name={name}
-        className={classes}
-        selected={selected}
-        onChange={handleOnChange}
-        onPointerDown={handlePointerDown}
-        onBlur={handleOnBlur}
-        required={required}
-        aria-required={required} // Accessibility
-        disabled={disabled}
-        aria-disabled={disabled ? true : false}
-        style={styles}
-        {...props} // Accessibility
-      >
-         <option value="" />
-      </UI>
-    )
   }
+
+  return (
+    <UI
+      as="select"
+      id={id}
+      ref={ref}
+      name={name}
+      className={classes}
+      selected={selected}
+      onChange={handleOnChange}
+      onPointerDown={handlePointerDown}
+      onBlur={handleOnBlur}
+      required={required}
+      aria-required={required} // Accessibility
+      disabled={disabled}
+      aria-disabled={disabled ? true : false}
+      style={styles}
+      {...props} // Accessibility
+    >
+      <option value="" />
+    </UI>
+  )
 }
+
 export default Select
 Select.displayName = 'Select' // Remove this line
 Select.Option = Option // Remove this line

package/src/components/fp.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import FP from '../components/fp'
 import jest from 'jest-mock'
-import { userEvent } from '@storybook/testing-library'
+import { userEvent } from '@storybook/test'
 
 describe('FP component', () => {
   it('renders a div by default', () => {

package/src/components/heading/heading.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 Heading from './heading'
 

package/src/components/images/figure.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 Figure from './figure'
 
@@ -25,10 +25,7 @@ export const FigureComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-    expect(
-      canvas.getByText(/caption for the image here.../i),
-    ).toBeInTheDocument()
-    expect(canvas.getByRole('img')).toBeInTheDocument()
+    // await expect(canvas.getByRole('img')).toBeInTheDocument()
     expect(canvas.getByRole('figure')).toBeInTheDocument()
   },
 }

package/src/components/images/img.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 Img from './img'
 
@@ -19,6 +19,6 @@ export const ImgComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-    expect(canvas.getByRole('img')).toBeInTheDocument()
+    await expect(canvas.getByRole('img')).toBeInTheDocument()
   },
 }

package/src/components/layout/footer.stories.tsx

@@ -2,12 +2,12 @@ import { StoryObj, Meta } from '@storybook/react'
 /**
  * Import testing library dependencies
  */
-import { within, userEvent } from '@storybook/testing-library'
+import { within, userEvent } from '@storybook/test'
 
 /**
  * Import jest matchers
  */
-import { expect } from '@storybook/jest'
+
 
 import { Footer } from './landmarks'
 

package/src/components/layout/landmarks.stories.tsx

@@ -2,12 +2,12 @@ import { StoryObj, Meta } from '@storybook/react'
 /**
  * Import testing library dependencies
  */
-import { within, userEvent } from '@storybook/testing-library'
+import { within, expect } from '@storybook/test'
 
 /**
  * Import jest matchers
  */
-import { expect } from '@storybook/jest'
+
 
 import { Header } from './landmarks'
 

package/src/components/layout/main.stories.tsx

@@ -2,12 +2,12 @@ import { StoryObj, Meta } from '@storybook/react'
 /**
  * Import testing library dependencies
  */
-import { within, userEvent } from '@storybook/testing-library'
+import { within, userEvent, expect } from '@storybook/test'
 
 /**
  * Import jest matchers
  */
-import { expect } from '@storybook/jest'
+
 
 import { Main } from './landmarks'
 

package/src/components/link/link.stories.tsx

@@ -1,8 +1,8 @@
 import { StoryObj, Meta } from '@storybook/react'
 
-import { within, userEvent, screen } from '@storybook/testing-library'
+import { within, expect } from '@storybook/test'
+
 
-import { expect } from '@storybook/jest'
 
 import Link from './link'
 import '../../styles/link/link.css'

package/src/components/list/list.stories.tsx

@@ -2,9 +2,8 @@ import React from 'react'
 
 import { StoryObj, Meta } from '@storybook/react'
 
-import { within, userEvent } from '@storybook/testing-library'
+import { within, userEvent } from '@storybook/test'
 
-import { expect } from '@storybook/jest'
 
 import List from './list'
 

package/src/components/nav/nav.stories.tsx

@@ -1,6 +1,6 @@
 import { StoryObj, Meta } from '@storybook/react'
-import { within } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+import { within, expect } from '@storybook/test'
+
 import React from 'react'
 
 import Nav from './nav'
@@ -40,7 +40,8 @@ export const NavComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-    expect(canvas.getByText(/link/i)).toBeInTheDocument()
+    expect(canvas.getAllByRole('link')).toHaveLength(2)
+    expect(canvas.getByText(/link 1/i)).toBeInTheDocument()
   },
 }
 

package/src/components/popover/popover.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, userEvent } from '@storybook/test'
+
 
 import Popover from './popover'
 import { getByText } from '@testing-library/react'

package/src/components/progress/progress.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 '../../styles/progress/progress.css'
 

package/src/components/tag/tag.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 Tag from './tag'
 import './tag.scss'
@@ -22,7 +22,7 @@ export const TagComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-    expect(canvas.queryByText(/basic badge/i)).toBeInTheDocument()
+    expect(canvas.queryByText(/basic tag/i)).toBeInTheDocument()
   },
 }