@fpkit/acss 0.4.4

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

@@ -0,0 +1,92 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent, screen } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Breadcrumb from './breadcrumb'
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'FP.REACT Components/Breadcrumb',
+  component: Breadcrumb,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    docs: {
+      description: {
+        component: 'Breadcrumb description here...',
+      },
+    },
+  },
+  args: {
+    // @ts-ignore
+    children: 'Link',
+  },
+} as Story
+
+export default meta
+type Story = StoryObj<typeof Breadcrumb>
+
+export const BreadcrumbComponent: Story = {
+  args: {},
+}
+
+export const CustomURL: Story = {
+  args: {
+    routes: [
+      {
+        name: 'Products',
+        url: '/products',
+        path: 'product',
+      },
+      {
+        name: 'Shirts',
+        url: '/products/shirts',
+        path: 'shirts',
+      },
+      {
+        name: 'Pants',
+        url: '/products/pants',
+        path: 'pants',
+      },
+    ],
+    currentRoute: '/product/men/shirts/size-22',
+  },
+} as Story
+
+export const AstroBreadcrumbs: Story = {
+  args: {
+    ...CustomURL.args,
+    currentRoute: '/about',
+  },
+} as Story
+
+export const EncodedBreadcrumbs: Story = {
+  args: {
+    routes: [
+      {
+        name: 'Home',
+        path: '/',
+      },
+      {
+        name: 'Products',
+        path: '/products',
+      },
+      {
+        name: 'Shirts',
+        path: '/products/shirts',
+      },
+    ],
+    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 = {
+  args: {
+    ...CustomURL.args,
+    currentRoute: '/products/AveryLongNameTruncate',
+  },
+} as Story

package/src/components/breadcrumbs/breadcrumb.tsx

@@ -0,0 +1,218 @@
+// Code: Breadcrumb component
+import React from 'react'
+import UI from '#components/ui'
+import { Truncate } from '#libs/content'
+
+// TYPES
+
+type customRoute = {
+  /** The path or id for routing */
+  path?: string
+  /** The display name */
+  name: string
+  /** The url if linking out */
+  url?: string
+}
+
+type BreadcrumbProps = {
+  /** Array of custom route objects */
+  routes?: customRoute[]
+  /** Starting route node */
+  startRoute?: React.ReactNode
+  /** Spacer node between routes */
+  spacer?: React.ReactNode
+  /** String representing current route */
+  currentRoute?: string
+  /** Prefix breadcrumb aria-label - "prefix breadcrumb" */
+  ariaLabelPrefix?: string
+  /** Truncate breadcrumb text after this length */
+  truncateLength?: number
+} & React.ComponentProps<typeof UI>
+
+// Components
+
+/**
+ * Items component.
+ *
+ * @param styles - Styles object for the item.
+ * @param id - Id for the item.
+ * @param classes - Class names for the item.
+ * @param children - Child components.
+ * @param props - Other props.
+ */
+const Items = ({
+  styles,
+  id,
+  classes,
+  children,
+  ...props
+}: React.ComponentProps<typeof UI>) => {
+  return (
+    <li data-list="unstyled inline" {...props}>
+      {children}
+    </li>
+  )
+}
+
+/**
+ * List component.
+ *
+ * @param children - The content to render inside the list.
+ * @param props - Additional props to pass to the UI component.
+ */
+const List = ({ children, ...props }: React.ComponentProps<typeof UI>) => {
+  return (
+    <UI as="ol" data-list="unstyled inline" {...props}>
+      {children}
+    </UI>
+  )
+}
+
+/**
+ * Nav component.
+ *
+ * @param styles - Styles object for the nav.
+ * @param id - Id for the nav.
+ * @param classes - Class names for the nav.
+ * @param children - Child components.
+ * @param props - Other props.
+ */
+const Nav = ({
+  styles,
+  id,
+  classes,
+  children,
+  ...props
+}: React.ComponentProps<typeof UI>) => {
+  return (
+    <UI as="nav" id={id} styles={styles} className={classes} {...props}>
+      <List>{children}</List>
+    </UI>
+  )
+}
+
+/**
+ * Navigation component for breadcrumbs.
+ *
+ * @param props - Props for the navigation component.
+ * @param props.startRoute - Starting route node. Default 'Home'.
+ * @param props.currentRoute - String representing current route.
+ * @param props.spacer - Spacer node between routes. Default '&#47;'.
+ * @param props.routes - Array of custom route objects.
+ * @param props.styles - Styles object for the nav.
+ * @param props.id - Id for the nav.
+ * @param props.classes - Class names for the nav.
+ * @param props.children - Child components.
+ */
+export const Breadcrumb = ({
+  startRoute = 'Home',
+  currentRoute,
+  spacer = <>&#47;</>,
+  routes,
+  styles,
+  id,
+  classes,
+  ariaLabelPrefix,
+  truncateLength = 15,
+  ...props
+}: BreadcrumbProps): React.JSX.Element => {
+  const [currentPath, setCurrentPath] = React.useState('')
+  React.useEffect(() => {
+    const path = currentRoute || window.location.pathname
+    if (path.length) {
+      setCurrentPath(path)
+    }
+  }, [])
+
+  /**
+   * Gets the path name for the given path segment.
+   *
+   * @param pathSegment - The path segment (string or number) to get the path name for.
+   * @returns The path name object for the given path segment.
+   */
+  const getPathName = (pathSegment: string): customRoute => {
+    const route = routes?.find((route) => route.path === pathSegment)
+
+    return {
+      path: route?.path || pathSegment,
+      name: route?.name || pathSegment,
+      url: route?.url || pathSegment,
+    }
+  }
+
+  /** Array of path segments from current path */
+  const segments = currentPath.split('/').filter((segment) => segment)
+  /** Index of last item in segments array */
+  const lastSegment = segments.length - 1
+
+  /** Unique id for breadcrumb */
+  const uuid = React.useId()
+
+  return currentPath.length ? (
+    <Nav
+      id={id}
+      {...props}
+      styles={styles}
+      className={classes}
+      aria-label={ariaLabelPrefix}
+    >
+      <Items key={`${startRoute}-${uuid}`}>
+        <a href="/">{startRoute}</a>
+      </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>
+            )
+          }
+        })
+      ) : (
+        <></>
+      )}
+    </Nav>
+  ) : (
+    <></>
+  )
+}
+
+export default Breadcrumb
+
+Breadcrumb.displayName = 'BreadCrumb'
+Breadcrumb.Nav = Nav
+Breadcrumb.List = List
+Breadcrumb.Items = Items

package/src/components/buttons/button.scss

@@ -0,0 +1,115 @@
+button {
+  --btn-sm: calc(12rem / 16);
+  --btn-md: calc(16rem / 16);
+  --btn-lg: calc(21rem / 16);
+  --btn-pill: 100rem;
+  --btn-height: calc(40rem / 16);
+  --fs: 0.95rem;
+  --btn-fs: calc(15rem / 16);
+  --btn-bg: lightgray;
+  --btn-width: max-content;
+
+  font-size: var(--btn-fs);
+  font-weight: var(--btn-fw, 500);
+  height: var(--btn-height, calc(40rem / 16));
+  min-height: var(--btn-height);
+  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%));
+  border: var(--btn-bdr, none);
+  border-radius: var(--btn-rds, calc(6rem / 16));
+  text-decoration: var(--btn-deco, none);
+  color: var(--btn-cl, currentColor);
+  display: var(--btn-dsp, inline-flex);
+  gap: var(--btn-gap, 0.2rem);
+  white-space: var(--btn-wspc, inherit);
+  margin: var(--btn-spc, 0);
+  transition: var(--tran-all);
+  background-color: var(--btn-bg, var(--btn));
+  outline: none;
+  width: var(--btn-width);
+
+  &[type] {
+    background-color: var(--btn-bg, var(--neutral-300));
+    --btn-bdr: solid var(--btn-sg);
+  }
+
+  &[type='submit'],
+  &[style*='submit'] {
+    --btn-bg: var(--primary-500, royal-blue);
+    --btn-color: white;
+  }
+
+  &[disabled],
+  &[aria-disabled='true'] {
+    cursor: var(--btn-cursor, not-allowed);
+    // opacity: var(--btn-opacity, 0.5);
+
+    &:is(:hover, :focus) {
+      transform: none;
+      // background-color: var(--btn-bg, lightgray);
+      // opacity: var(--btn-opacity, 0.5);
+    }
+  }
+
+  // TODO: add hover/focus with :if()
+  &:is(:hover, :focus) {
+    // --btn-bg: lightgray;
+    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);
+
+    &[aria-disabled='true'] {
+      transform: none;
+      opacity: var(--btn-opacity, 0.5);
+    }
+  }
+
+  &[type='reset'] {
+    --btn-bg: transparent;
+    --btn-color: gray;
+    --btn-bdr: gray thin solid;
+  }
+
+  &[type='submit'] {
+    --btn-bg: var(--primary-700, blue);
+    --btn-cl: #fff;
+    --btn-color: rgb(231, 231, 231);
+    --btn-border: none;
+  }
+
+  &[data-fp-btn~='pill'],
+  &[data-btn~='pill'],
+  &[data-style~='pill'] {
+    border-radius: var(--btn-pill, 100rem);
+  }
+
+  &[data-btn~='sm'] {
+    --btn-fs: var(--btn-sm);
+  }
+
+  &[data-btn~='md'] {
+    --btn-fs: var(--btn-md);
+  }
+
+  &[data-btn~='lg'] {
+    --btn-fs: var(--btn-lg);
+  }
+
+  &[data-btn~='text'] {
+    --btn-bg: transparent;
+    --btn-cl: currentColor;
+    --btn-bdr: none;
+    --btn-height: unset;
+    --btn-width: unset;
+    --btn-py: 0.75rem;
+    --btn-px: 0.75rem;
+
+    &:is(:hover, :focus) {
+      background-color: transparent;
+      outline: 0.07rem solid var(--btn-cl);
+      outline-offset: 0;
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within, userEvent } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+import Button from './button'
+import './button.scss'
+
+const meta: Meta<typeof Button> = {
+  title: 'FP.React Components/Buttons',
+  component: Button,
+  args: {
+    children: 'Click me',
+  },
+  parameters: {
+    // actions: { argTypesRegex: '^on.*' },
+  },
+  argTypes: { onClick: { action: 'clicked' } },
+} as Meta
+
+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()
+  },
+} as Story
+
+export const Small: Story = {
+  args: {
+    'data-btn': 'sm',
+  },
+} as Story
+
+export const Medium: Story = {
+  args: {
+    'data-btn': 'md',
+  },
+} as Story
+
+export const Large: Story = {
+  args: {
+    'data-btn': 'lg',
+  },
+} as Story
+
+export const Custom: Story = {
+  args: {
+    styles: {
+      '--btn-fs': '2rem',
+    },
+  },
+} as Story

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

@@ -0,0 +1,104 @@
+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/testing-library'
+
+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')
+  })
+
+  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)
+  })
+
+  it('applies custom styles when provided', () => {
+    render(
+      <Button type="button" styles={{ backgroundColor: 'red' }}>
+        Click me
+      </Button>,
+    )
+    const button = screen.getByRole('button')
+    expect(button).toHaveAttribute('style')
+  })
+
+  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)
+  })
+
+  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)
+  })
+
+  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)
+  })
+
+  it('it is disabled when disabled is true', () => {
+    const handleClick = jest.fn()
+    render(
+      <Button
+        type="button"
+        disabled
+        onPointerDown={handleClick}
+        onPointerOver={handleClick}
+        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)
+  })
+})

package/src/components/buttons/button.tsx

@@ -0,0 +1,64 @@
+import UI from '../ui'
+import React from 'react'
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  Partial<React.ComponentProps<typeof UI>> & {
+    /**
+     * The button type
+     * Required - 'button' | 'submit' | 'reset'
+     */
+    type: 'button' | 'submit' | 'reset'
+  }
+
+export const Button = ({
+  type = 'button',
+  children,
+  styles,
+  disabled,
+  classes,
+  onPointerDown,
+  onPointerOver,
+  onPointerLeave,
+
+  ...props
+}: ButtonProps) => {
+  const handlePointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
+    if (!disabled) {
+      onPointerDown?.(e)
+    }
+  }
+
+  const handlePointerOver = (e: React.PointerEvent<HTMLButtonElement>) => {
+    if (!disabled) {
+      onPointerOver?.(e)
+    }
+  }
+
+  const handlePointerLeave = (e: React.PointerEvent<HTMLButtonElement>) => {
+    if (!disabled) {
+      onPointerLeave?.(e)
+    }
+  }
+
+  /* Returning a button element. */
+  return (
+    <UI
+      as="button"
+      type={type}
+      onPointerOver={handlePointerOver}
+      onPointerDown={handlePointerDown}
+      onPointerLeave={handlePointerLeave}
+      style={styles}
+      className={classes}
+      aria-disabled={disabled}
+      onClick={handlePointerDown}
+      {...props}
+    >
+      {children}
+    </UI>
+  )
+  //
+}
+
+export default Button
+Button.displayName = 'Button'

package/src/components/cards/card.scss

@@ -0,0 +1,43 @@
+[data-card],
+[data-component~='card'] {
+  --card-p: 2rem;
+  --card-bg: #fff;
+  --card-radius: calc(var(--card-p) / 3);
+  --card-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
+  --card-position: relative;
+  --card-display: flex;
+  --card-direction: column;
+  --card-gap: 1rem;
+
+  position: relative;
+  display: var(--card-display);
+  display: var(--card-display);
+  flex-direction: var(--card-direction);
+  gap: var(--card-gap);
+  box-shadow: var(--card-shadow);
+  border-radius: var(--card-radius);
+  background-color: var(--card-bg);
+  // height: 100%;
+  [data-card-content],
+  h3,
+  h2 {
+    margin-block-end: 0;
+  }
+  > div {
+    height: 100%;
+    display: var(--card-display);
+    flex-direction: var(--card-direction);
+    gap: var(--card-gap);
+    article {
+      flex: 2;
+    }
+  }
+
+  + div {
+    margin-block-start: 0;
+  }
+}
+
+[data-card] > * {
+  padding: var(--card-p);
+}