@fpkit/acss 0.5.4 → 0.5.6

package/src/components/badge/badge.scss

@@ -1,10 +1,10 @@
 sup:has(> span) {
   --badge-bg: lightgray;
   --badge-color: currentColor;
-  --badge-radius: 0.15rem;
-  --badge-padding: 0.15rem;
+  --badge-radius: 0.5rem;
+  --badge-padding: 0.3rem;
   --badge-v-align: 0.5rem;
-  --badge-fs: clamp(0.4rem, 0.5rem + 0.5vw, 7rem);
+  --badge-fs: var(--fs-1);
   background-color: var(--badge-bg);
   color: var(--badge-color);
   padding: var(--badge-padding);
@@ -14,7 +14,7 @@ sup:has(> span) {
   span {
     color: inherit;
   }
-  &[data-badge~='rounded'] {
+  &[data-badge~="rounded"] {
     --badge-radius: 100%;
     --badge-padding: 0.2rem;
   }

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

@@ -1,54 +1,52 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
 
-
-import Badge from './badge'
-// import './badge.scss'
+import Badge from "./badge";
 
 const meta: Meta<typeof Badge> = {
-  title: 'FP.REACT Components/Badge',
+  title: "FP.REACT Components/Badge",
   component: Badge,
+  tags: ["beta"],
   args: {
-    // @ts-ignore
-    children: 'Link',
+    children: "Link",
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Badge>
+export default meta;
+type Story = StoryObj<typeof Badge>;
 
 export const BadgeComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByText(/link/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/link/i)).toBeInTheDocument();
   },
-}
+};
 
 export const CustomBadge: Story = {
   args: {
-    children: 'Custom',
+    children: "Custom",
   },
-  render: ({ ...args }) => {
+  render: () => {
     return (
       <p>
         Custom
         <Badge aria-label="badge">21</Badge>
       </p>
-    )
+    );
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByText(/custom/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/custom/i)).toBeInTheDocument();
   },
-} as Story
+} as Story;
 
 export const RoundedBadge: Story = {
-  render: ({ ...args }) => {
+  render: () => {
     return (
       <p>
         Custom<Badge data-badge="rounded">21</Badge>
       </p>
-    )
+    );
   },
-} as Story
+} as Story;

package/src/components/breadcrumbs/breadcrumb.scss

@@ -5,7 +5,7 @@ nav[data-breadcrumb] {
   --breadcrumb-gap: 0.5rem;
   --breadcrumb-color: currentColor;
   --breadcrumb-current-color: rgb(46, 46, 46);
-  --breadcrumb-fs: var(--fs-0);
+  --breadcrumb-fs: var(--fs-3);
   margin-inline: unset;
   padding-inline: unset;
   ol {
@@ -20,7 +20,7 @@ nav[data-breadcrumb] {
       color: var(--breadcrumb-color);
       gap: 0.5rem;
       font-size: var(--breadcrumb-fs);
-      span[aria-hidden='true'] {
+      span[aria-hidden="true"] {
         opacity: 0.6;
       }
       a[href] {

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

@@ -1,108 +1,103 @@
-import type { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, fn, expect } from '@storybook/test'
+import type { StoryObj, Meta } from "@storybook/react";
+import { within, fn, expect } from "@storybook/test";
 
+import Breadcrumb from "./breadcrumb";
 
-import Breadcrumb from './breadcrumb'
-
-const linkClicked = fn()
+const linkClicked = fn();
 
 const meta: Meta<typeof Breadcrumb> = {
-  title: 'FP.REACT Components/Breadcrumb',
+  title: "FP.REACT Components/Breadcrumb",
   component: Breadcrumb,
+  tags: ["beta"],
   parameters: {
-    actions: { argTypesRegex: '^on.*' },
+    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
-        component: 'Breadcrumb description here...',
+        component: "Breadcrumb description here...",
       },
     },
   },
   args: {
-    children: 'Link',
+    children: "Link",
   },
-} as Meta  
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Breadcrumb>
+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: "Products",
+        url: "/products",
+        path: "product",
       },
       {
-        name: 'Shirts',
-        url: '/products/shirts',
-        path: 'shirts',
+        name: "Shirts",
+        url: "/products/shirts",
+        path: "shirts",
       },
       {
-        name: 'Pants',
-        url: '/products/pants',
-        path: 'pants',
+        name: "Pants",
+        url: "/products/pants",
+        path: "pants",
       },
     ],
-    currentRoute: '/product/men/shirts/size-22',
+    currentRoute: "/product/men/shirts/size-22",
   },
-} as Story
+} as Story;
 
 export const AstroBreadcrumbs: Story = {
   args: {
     ...CustomURL.args,
-    currentRoute: '/about',
+    currentRoute: "/about",
   },
-} as Story
+} as Story;
 
 export const EncodedBreadcrumbs: Story = {
   args: {
     routes: [
       {
-        name: 'Home',
-        path: '/',
+        name: "Home",
+        path: "#",
       },
       {
-        name: 'Products',
-        path: '/products',
+        name: "Products",
+        path: "/products",
       },
       {
-        name: 'Shirts',
-        path: '/products/shirts',
+        name: "Shirts",
+        path: "/products/shirts",
       },
     ],
-    currentRoute: '/products/learning%20in%20public',
-  
+    currentRoute: "/products/learning%20in%20public",
   },
-
-} as Story
+} as Story;
 
 export const TruncateName: Story = {
   args: {
     ...CustomURL.args,
-    currentRoute: '/products/AveryLongNameTruncate',
+    currentRoute: "/products/AveryLongNameTruncate",
   },
-} as Story
+} as Story;
 
-export const ClickHomeLink: Story = {
+export const BreadCrumbInteractions: Story = {
   args: {
     ...CustomURL.args,
-    currentRoute: '/products/shirts',
+    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()
+    const canvas = within(canvasElement);
+    const homeLink = canvas.getByRole("link", { name: "Home" });
+    expect(homeLink).toHaveAttribute("href", "#");
   },
-} as Story
+} as Story;

package/src/components/buttons/button.scss

@@ -1,6 +1,7 @@
 button {
-  --btn-sm: calc(12rem / 16);
-  --btn-md: calc(16rem / 16);
+  --btn-xs: 0.6rem;
+  --btn-sm: 0.7rem;
+  --btn-md: 0.85rem;
   --btn-lg: calc(21rem / 16);
   --btn-pill: 100rem;
   --btn-height: 2.5rem;
@@ -28,20 +29,23 @@ button {
   background-color: var(--btn-bg, var(--btn));
   outline: none;
   width: var(--btn-width);
+  display: inline-flex;
+  align-items: center;
+  line-height: 0cap;
 
   &[type] {
     background-color: var(--btn-bg, var(--neutral-300));
     --btn-bdr: solid var(--btn-sg);
   }
 
-  &[type='submit'],
-  &[style*='submit'] {
+  &[type="submit"],
+  &[style*="submit"] {
     --btn-bg: var(--primary-500, royal-blue);
     --btn-color: white;
   }
 
   &[disabled],
-  &[aria-disabled='true'] {
+  &[aria-disabled="true"] {
     cursor: var(--btn-cursor, not-allowed);
     // opacity: var(--btn-opacity, 0.5);
 
@@ -60,44 +64,66 @@ button {
     transform: scale(0.95) var(--line-style, solid);
     outline-offset: var(--line-offset, 1px);
 
-    &[aria-disabled='true'] {
+    &[aria-disabled="true"] {
       transform: none;
       opacity: var(--btn-opacity, 0.5);
     }
   }
 
-  &[type='reset'] {
+  &[type="reset"] {
     --btn-bg: transparent;
     --btn-color: gray;
     --btn-bdr: gray thin solid;
   }
 
-  &[type='submit'] {
+  &[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'] {
+  &[data-fp-btn~="pill"],
+  &[data-btn~="pill"],
+  &[data-style~="pill"] {
     border-radius: var(--btn-pill, 100rem);
   }
 
-  &[data-btn~='sm'] {
+  &[data-btn~="xs"] {
+    padding-inline: var(--btn-xs);
+    --btn-fs: var(--btn-xs);
+    --btn-height: 1.5rem;
+    text-transform: uppercase;
+  }
+
+  &[data-btn~="sm"] {
     --btn-fs: var(--btn-sm);
+    --btn-height: 1.75rem;
   }
 
-  &[data-btn~='md'] {
+  &[data-btn~="md"] {
     --btn-fs: var(--btn-md);
+    --btn-height: 2rem;
   }
 
-  &[data-btn~='lg'] {
+  &[data-btn~="lg"] {
     --btn-fs: var(--btn-lg);
+    --btn-height: 2.5rem;
+  }
+
+  &[data-btn~="icon"] {
+    padding: unset;
+    height: unset;
+    --btn-bg: transparent;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  &[data-btn~='text'] {
+  &[data-btn~="text"] {
     --btn-bg: transparent;
     --btn-cl: currentColor;
     --btn-bdr: none;

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

@@ -9,12 +9,13 @@ const buttonClicked = fn();
 const meta = {
   title: "FP.React Components/Buttons",
   component: Button,
+  tags: ["rc"],
   args: {
     children: "Click me",
     onClick: buttonClicked,
   },
   parameters: {
-    actions: { argTypesRegex: '^on.*' },
+    actions: { argTypesRegex: "^on.*" },
   },
 } as Meta;
 
@@ -52,6 +53,12 @@ export const ButtonComponent: Story = {
   },
 } as Story;
 
+export const Xsmall: Story = {
+  args: {
+    "data-btn": "xs",
+  },
+} as Story;
+
 export const Small: Story = {
   args: {
     "data-btn": "sm",

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

@@ -1,86 +1,86 @@
-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/test'
+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/test";
 
-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()
-  })
+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')
-  })
+    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()
+  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)
-  })
+      </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', () => {
+  it("applies custom styles when provided", () => {
     render(
-      <Button type="button" styles={{ backgroundColor: 'red' }}>
+      <Button type="button" styles={{ backgroundColor: "red" }}>
         Click me
-      </Button>,
-    )
-    const button = screen.getByRole('button')
-    expect(button).toHaveAttribute('style')
-  })
+      </Button>
+    );
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("style");
+  });
 
-  it('calls the onPointerDown handler when pointer is down', async () => {
-    const handlePointerDown = jest.fn()
+  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)
-  })
+      </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()
+  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)
-  })
+      </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()
+  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)
-  })
+      </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()
+  it("it is disabled when disabled is true", () => {
+    const handleClick = jest.fn();
     render(
       <Button
         type="button"
@@ -90,15 +90,15 @@ describe('Button', () => {
         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)
-  })
-})
+      </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/cards/card.stories.tsx

@@ -1,36 +1,36 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, screen } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+// import { within, userEvent, screen } from "@storybook/test";
 
-
-import Card from './card'
+import Card from "./card";
 // import './card.scss'
 
 const content =
-  'Enim aliquip excepteur veniam esse culpa. Et exercitation incididunt occaecat incididunt proident consectetur. Voluptate elit reprehenderit nulla reprehenderit excepteur tempor adipisicing officia eiusmod est id aute. Nisi do et nulla fugiat enim id pariatur ex. Culpa aliquip excepteur velit fugiat qui magna deserunt adipisicing dolore quis. Esse proident qui consectetur Lorem id fugiat elit amet proident enim deserunt dolore sit.'
+  "Enim aliquip excepteur veniam esse culpa. Et exercitation incididunt occaecat incididunt proident consectetur. Voluptate elit reprehenderit nulla reprehenderit excepteur tempor adipisicing officia eiusmod est id aute. Nisi do et nulla fugiat enim id pariatur ex. Culpa aliquip excepteur velit fugiat qui magna deserunt adipisicing dolore quis. Esse proident qui consectetur Lorem id fugiat elit amet proident enim deserunt dolore sit.";
 
 const meta: Meta<typeof Card> = {
-  title: 'FP.REACT Components/Card',
+  title: "FP.REACT Components/Card",
+  tags: ["rc"],
   component: Card,
   args: {
     children: <p>{content}</p>,
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Card>
+export default meta;
+type Story = StoryObj<typeof Card>;
 
 export const CardComponent: Story = {
   args: {},
-}
+};
 
 export const Multiple: Story = {
   args: {
     styles: {
-      '--theme': 'warm',
+      "--theme": "warm",
     },
   },
   render: (args) => (
-    <div style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}>
+    <div style={{ display: "flex", gap: "1rem", flexDirection: "column" }}>
       <Card {...args}>
         <p>
           Proident et amet aliqua excepteur sunt qui deserunt commodo tempor
@@ -57,7 +57,7 @@ export const Multiple: Story = {
       </Card>
     </div>
   ),
-} as Story
+} as Story;
 
 export const CardWithTitle: Story = {
   args: {},
@@ -73,7 +73,7 @@ export const CardWithTitle: Story = {
       </Card.Content>
     </Card>
   ),
-} as Story
+} as Story;
 
 export const FlexibleContent: Story = {
   args: {
@@ -144,4 +144,4 @@ export const FlexibleContent: Story = {
       </Card>
     </div>
   ),
-} as Story
+} as Story;