@fpkit/acss 0.4.4

package/src/components/link/link.scss

@@ -0,0 +1,92 @@
+@use '../../sass/mixins';
+
+a[href] {
+  --link-decoration: none;
+  --link-color: #085ab7;
+  --link-bg: transparent;
+  --link-px: 0;
+  --link-py: 0;
+  --link-transition: all 0.75s ease-in-out;
+  --link-fs: 1rem;
+  --link-radius: 0.25rem;
+  --link-skip-ink: auto;
+  --link-decoration-offset: 1.5px;
+  --link-decoration-thickness: 3px;
+  --link-decoration: color: var(--link-color) var(--link-decoration-offset)
+    var(--link-decoration-thickness) var(--link-skip-ink);
+  --link-decoration-thickness: 3px;
+  --link-decoration: color: var(--link-color) var(--link-decoration-offset)
+    var(--link-decoration-thickness) var(--link-skip-ink);
+
+  color: var(--link-color);
+  font-size: var(--link-fs);
+  text-decoration: var(--link-decoration);
+  text-underline-offset: var(--link-decoration-offset);
+  text-decoration-skip-ink: var(--link-skip-ink);
+  background-color: var(--link-bg);
+  border-radius: var(--link-radius);
+  background-color: var(--link-bg);
+  border-radius: var(--link-radius);
+  font-weight: var(--link-weight);
+
+  > i,
+  > b {
+    font-weight: var(--link-weight);
+    font-style: normal;
+  }
+
+  &:hover {
+    --link-decoration: underline;
+  }
+
+  &:focus {
+    outline: none;
+    --link-decoration: underline;
+  }
+
+  &:visited,
+  &:active {
+    --link-color: currentColor;
+  }
+
+  &:has(> b),
+  &[data-link~='btn'],
+  &:has(> i) {
+    --link-button-color: var(--link-color);
+    --link-bg: transparent;
+    --link-decoration: none;
+    --link-border: 2px currentColor solid;
+    --link-fs: 0.9rem;
+    background-color: var(--link-bg);
+    font-style: normal;
+    font-size: var(--link-fs);
+    color: var(--link-button-color);
+    padding-inline: var(--link-fs);
+    padding-block: calc(var(--link-fs) - 0.4rem);
+    border-radius: var(--link-radius, 99rem);
+    display: inline-flex;
+    outline: var(--link-border);
+    &:focus {
+      outline: var(--link-border);
+      --link-decoration: none;
+    }
+    &:hover {
+      --link-decoration: none;
+    }
+    @include mixins.scale-transitions;
+  }
+  &[data-link~='pill'],
+  &:has(> i) {
+    --link-radius: 99rem;
+    --link-decoration: none;
+    font-style: normal;
+    &:hover,
+    &:focus {
+      --link-decoration: none;
+    }
+  }
+}
+
+header > section {
+  width: auto;
+}

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

@@ -0,0 +1,74 @@
+import { StoryObj, Meta } from '@storybook/react'
+
+import { within, userEvent, screen } from '@storybook/testing-library'
+
+import { expect } from '@storybook/jest'
+
+import Link from './link'
+import '../../styles/link/link.css'
+
+const meta: Meta<typeof Link> = {
+  title: 'FP.React Components/Links',
+  component: Link,
+  args: {
+    // @ts-ignore
+    href: '/',
+    children: 'Link',
+  },
+} as Meta
+
+export default meta
+type Story = StoryObj<typeof Link>
+
+export const LinkComponent: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const link = canvas.getByRole('link')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveTextContent('Link')
+  },
+}
+
+export const ExternalLink: Story = {
+  args: {
+    // @ts-ignore
+    href: 'https://www.google.com',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+    prefetch: true,
+    children: 'Google',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const link = canvas.getByRole('link')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveTextContent('Google')
+    expect(link).toHaveAttribute('href', 'https://www.google.com')
+    expect(link).toHaveAttribute('target', '_blank')
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer prefetch')
+  },
+}
+
+export const ButtonLink: Story = {
+  args: {
+    ...LinkComponent.args,
+    children: <b>Button Link</b>,
+  },
+} as Story
+
+export const ButtonPill: Story = {
+  args: {
+    ...LinkComponent.args,
+    children: <i>Button Link</i>,
+  },
+} as Story
+
+export const ButtonRounded: Story = {
+  args: {
+    ...ButtonLink.args,
+    styles: {
+      '--link-radius': 'initial',
+    },
+  },
+} as Story

package/src/components/link/link.tsx

@@ -0,0 +1,48 @@
+import UI from '../ui'
+import React from 'react'
+
+export type LinkProps = {
+  /** Applies button styling to the link */
+  btnStyle?: boolean
+} & React.ComponentProps<typeof UI> &
+  React.ComponentProps<'a'>
+
+export const Link = ({
+  href,
+  target,
+  rel,
+  children,
+  styles,
+  prefetch,
+  btnStyle,
+  onPointerDown,
+  ...props
+}: LinkProps) => {
+  let relValue = rel
+
+  if (target === '_blank')
+    relValue = `noopener noreferrer ${prefetch ? 'prefetch' : ''}`
+
+  const handleOnpointerDown = (e: React.PointerEvent<HTMLAnchorElement>) => {
+    if (onPointerDown) onPointerDown?.(e)
+  }
+
+  return (
+    <UI
+      as="a"
+      href={href}
+      target={target}
+      styles={styles}
+      rel={relValue}
+      onPointerDown={handleOnpointerDown}
+      data-btn={btnStyle}
+      prefetch={prefetch}
+      {...props}
+    >
+      {children}
+    </UI>
+  )
+}
+
+export default Link
+Link.displayName = 'Link'

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

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { StoryObj, Meta } from '@storybook/react'
+
+import { within, userEvent } from '@storybook/testing-library'
+
+import { expect } from '@storybook/jest'
+
+import List from './list'
+
+const meta: Meta<typeof List> = {
+  title: 'FP.React Components/List',
+  component: List,
+} as Meta
+
+const listElm = (
+  <>
+    <List.ListItem>Home</List.ListItem>
+    <List.ListItem>About</List.ListItem>
+    <List.ListItem>Contact</List.ListItem>
+  </>
+)
+
+export default meta
+type Story = StoryObj<typeof List>
+
+export const DefaultList: Story = {
+  args: {
+    children: listElm,
+  },
+} as Story
+
+export const UnstyledList: Story = {
+  args: {
+    ...DefaultList.args,
+    role: 'list',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Another description `on the story`, with some markdown',
+      },
+    },
+  },
+} as Story
+
+export const InlineList: Story = {
+  args: {
+    ...UnstyledList.args,
+    'data-list': 'inline',
+  },
+} as Story

package/src/components/list/list.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react'
+import UI from '../ui'
+
+type ListProps = {
+  /** Type of list to render (default: 'ul') */
+  type?: 'ul' | 'ol' | 'dl'
+  /** variant of list to render (default: 'none') */
+  variant?: string
+} & React.ComponentProps<typeof UI>
+
+export type ListItemProps = {
+  /** Type of list item to render (default: 'li') */
+  type?: 'li' | 'dt' | 'dd'
+} & React.ComponentProps<typeof UI>
+
+/**
+ * ListItem component
+ * @param type - HTML tag type for the list item (default: 'li')
+ * @param styles - CSS styles object
+ * @param children - Child elements to be rendered inside the list item
+ * @param props - Additional props to be passed to the underlying HTML element
+ * @returns A React component that renders a list item
+ */
+export const ListItem = ({
+  type = 'li',
+  id,
+  styles,
+  children,
+  classes,
+  ...props
+}: ListItemProps) => {
+  return (
+    <UI id={id} as={type} className={classes} {...props} style={styles}>
+      {children}
+    </UI>
+  )
+}
+
+/**
+ * List component renders a list element with provided props
+ * @param children - Child elements to render inside the list
+ * @param classes - CSS classes to apply
+ * @param type - Type of list element (default: 'ul')
+ * @param variant - Variant for styling purposes
+ * @param styles - Inline styles object
+ * @param role - ARIA role
+ * @param props - Additional props to pass to underlying element
+ */
+export const List = ({
+  children,
+  classes,
+  type = 'ul',
+  variant,
+  styles,
+  role,
+  ...props
+}: ListProps) => {
+  return (
+    <UI
+      as={type}
+      data-variant={variant}
+      className={classes}
+      style={styles}
+      role={role}
+      {...props}
+    >
+      {children}
+    </UI>
+  )
+}
+
+export default List
+List.displayName = 'List'
+List.ListItem = ListItem

package/src/components/modal/dialog.tsx

@@ -0,0 +1,50 @@
+import UI from '../ui'
+import React from 'react'
+
+export type DialogProps = {
+  /**
+   * React ref for dialog element
+   */
+  modalRef: React.RefObject<HTMLDialogElement>
+  /**
+   * Handle close modal event
+   */
+  closeModal?: (e: React.SyntheticEvent<HTMLDialogElement>) => void
+  /**
+   * open modal on mount
+   */
+  openOnMount?: boolean
+} & React.ComponentProps<typeof UI>
+/**
+ * Dialog component
+ */
+export const Dialog = ({
+  id,
+  children,
+  classes,
+  modalRef,
+  openOnMount,
+  ...props
+}: DialogProps) => {
+  const handleCloseModal = (e: React.SyntheticEvent<HTMLDialogElement>) => {
+    if (e.currentTarget === e.target) {
+      e.currentTarget.close()
+    }
+  }
+
+  return (
+    <UI
+      as="dialog"
+      id={id}
+      classes={classes}
+      ref={modalRef}
+      open={openOnMount}
+      onClick={handleCloseModal}
+      {...props}
+    >
+      {children}
+    </UI>
+  )
+}
+
+Dialog.displayName = 'Dialog'

package/src/components/modal/modal.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { ComponentProps } from '../../types'
+import { Button } from '../buttons/button'
+import { Dialog } from './dialog'
+
+export interface ModalProps extends ComponentProps {
+  /**
+   * The child component/content for open button
+   */
+  openChild?: React.ReactNode
+  /**
+   * The child component/content for close button
+   */
+  closeChild?: React.ReactNode
+  /**
+   * The child component/content for modal header
+   */
+  modalHeader?: React.ReactNode
+  /**
+   * The child component/content for modal footer
+   */
+  modalFooter?: React.ReactNode
+  /**
+   * The child component/content for modal body
+   */
+  children: React.ReactNode
+  /**
+   * Open modal on mount when set to true
+   */
+  showOpen?: boolean
+}
+export const Modal = ({
+  openChild,
+  closeChild,
+  modalHeader,
+  modalFooter,
+  children,
+  showOpen = false,
+  ...props
+}: ModalProps) => {
+  const dialogRef = React.useRef<HTMLDialogElement>(null)
+  const openModal = (): void => {
+    if (dialogRef.current) {
+      if(showOpen)
+      dialogRef.current.show()
+      else
+      dialogRef.current.showModal()
+    }
+  }
+  const closeModal = () => {
+    if (dialogRef.current) {
+      dialogRef.current.close()
+    }
+  }
+
+  return (
+    <>
+      <Dialog modalRef={dialogRef} openOnMount={showOpen} {...props}>
+        <section>
+          {modalHeader}
+          {children}
+          {modalFooter ?? (
+            <div>
+              <Button
+                type="button"
+                pointerDown={() => {
+                  closeModal()
+                }}
+              >
+                {closeChild || 'Close'}
+              </Button>{' '}
+            </div>
+          )}
+        </section>
+      </Dialog>
+      { !showOpen && (
+      <Button type="button" pointerDown={openModal}>
+        {openChild || 'Open Modal'}
+      </Button>
+      )}
+    </>
+  )
+}
+
+Modal.displayName = 'Modal'

package/src/components/nav/nav.scss

@@ -0,0 +1,90 @@
+body > nav,
+[aria-label~='navbar'], .navbar {
+  padding-inline: var(--nav-px, 1rem);
+  min-height: var(--nav-h, fit-content);
+
+  @media(max-width: 580px) {
+    flex-direction: column;
+    height: fit-content;
+    min-height: fit-content;
+    padding-block: unset;
+    gap: 0.5rem;
+  }
+  ul {
+    > li {
+      display: flex;
+      align-items: center;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      min-height: 100%;
+      padding-inline: var(--nav-px, 0.75rem);
+
+      &:hover {
+        background-color: var(--nav-hov-bg, whitesmoke);
+      }
+      &:hover:where(img) {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+nav {
+  display: var(--nav-dsp, flex);
+  flex-direction: var(--nav-direction, row);
+  width: var(--nav-w, auto);
+  place-items: var(--nav-align, center);
+  justify-content: var(--nav-justify, space-between);
+  margin-inline: var(--nav-mx, 0);
+  background-color: var(--nav-bg, initial);
+
+  > section,
+  > ul {
+    --nav-dsp: flex;
+    flex-direction: var(--nav-direction, row);
+    display: var(--nav-dsp, flex);
+    gap: var(--nav-gap, 0);
+    font-size: var(--nav-fs, 0.9rem);
+    align-items: var(--nav-align, center);
+    padding-inline: var(--nav-px, 1rem);
+    padding-block: var(--nav-py, 0);
+    height: 100%;
+    &[data-list~='block'] {
+      --nav-direction: column;
+    }
+  }
+
+  > section {
+    > div {
+      --py: 0;
+    }
+  }
+
+  ul {
+    > li {
+      display: flex;
+      align-items: center;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      min-height: 100%;
+      padding-inline: var(--nav-px, 1rem);
+    }
+  }
+
+  img[alt] {
+    --px: 0 var(--s1);
+    --w: var(--brand-w, 3.6rem);
+  }
+
+  &[data-variant] {
+    background-color: var(--nav-bg);
+    color: var(--nav-cl);
+    font-size: var(--nav-fs, 0.9rem);
+  }
+
+  > div {
+    margin-block-start: 0;
+  }
+}

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

@@ -0,0 +1,96 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { within } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+import React from 'react'
+
+import Nav from './nav'
+import Link from '../link/link'
+
+const meta: Meta<typeof Nav> = {
+  title: 'FP.REACT Components/Nav',
+  component: Nav,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    docs: {
+      description: {
+        component: 'Nav description here...',
+      },
+    },
+  },
+  args: {
+    children: (
+      <Nav.List>
+        <Nav.Item>
+          <Link href="/">Link 1</Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Link href="/">Link 2</Link>
+        </Nav.Item>
+      </Nav.List>
+    ),
+    id: 'nav',
+    classes: 'nav',
+  },
+} as Story
+
+export default meta
+type Story = StoryObj<typeof Nav>
+
+export const NavComponent: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByText(/link/i)).toBeInTheDocument()
+  },
+}
+
+export const NavSection: Story = {
+  args: {
+    children: (
+      <>
+        <Nav.List>
+          <Nav.Item>Link 1</Nav.Item>
+          <Nav.Item>Link 2</Nav.Item>
+        </Nav.List>
+      </>
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByText('Link 1')).toBeInTheDocument()
+    expect(canvas.getByText('Link 2')).toBeInTheDocument()
+  },
+} as Story
+
+export const NavBlock: Story = {
+  args: {
+    ...NavSection.args,
+    children: (
+      <>
+        <Nav.List isBlock={true}>
+          <Nav.Item>Link 1</Nav.Item>
+          <Nav.Item>Link 2</Nav.Item>
+        </Nav.List>
+      </>
+    ),
+  },
+} as Story
+
+export const MultipleNavs: Story = {
+  args: {
+    ...NavSection.args,
+    classes: 'navbar',
+    children: (
+      <>
+        <Nav.List>
+          <Nav.Item>Link 1</Nav.Item>
+          <Nav.Item>Link 2</Nav.Item>
+        </Nav.List>
+        <Nav.List>
+          <Nav.Item>Link 1</Nav.Item>
+          <Nav.Item>Link 2</Nav.Item>
+        </Nav.List>
+      </>
+    ),
+  },
+} as Story