@fpkit/acss 0.5.4 → 0.5.5

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,65 @@ 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;
+    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/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;

package/src/components/details/details.scss

@@ -1,6 +1,6 @@
 details {
   --details-w: 100%;
-  --details-h: fit-content;
+  --details-h: max-content;
   --details-border: 1px solid #dfdfdf;
   --details-display: flex;
   --details-justify: flex-start;
@@ -10,7 +10,7 @@ details {
   --details-py: 1rem;
   --details-radius: 0.5rem;
   --summary-cursor: pointer;
-  --summary-transitions: all 0.75s linear;
+  --summary-transitions: all 0.75s ease-in-out;
   --summary-display: flex;
   --summary-justify: flex-start;
   --summary-align: center;
@@ -18,6 +18,7 @@ details {
   --max-h-closed: 6.25rem;
   --max-h-open: 50rem;
 
+  interpolate-size: allow-keywords;
   display: var(--details-display);
   flex-direction: var(--details-direction);
   justify-content: var(--details-justify);
@@ -43,19 +44,19 @@ details {
     list-style: none;
     border-top-left-radius: var(--details-radius);
     border-top-right-radius: var(--details-radius);
+    transition: var(--summary-transitions);
 
     &::-webkit-details-marker {
       display: none;
     }
 
-    &:focus-within  {
+    &:focus-within {
       outline: none;
       border-bottom: solid 2px var(--details-border);
       background-color: whitesmoke;
     }
 
     /* This ensures no bullet points are shown */
-
     &:hover {
       cursor: var(--summary-cursor);
     }
@@ -72,7 +73,7 @@ details {
   }
 
   &[open] {
-    max-height: var(--max-h-open);
+    max-height: max-content;
     transition: var(--summary-transitions);
     > summary {
       border-bottom: var(--details-border);

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

@@ -1,9 +1,8 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect, userEvent } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect, userEvent } from "@storybook/test";
 
-
-import Details from './details'
-import Icons from '../icons/icon'
+import Details from "./details";
+import Icons from "../icons/icon";
 
 const content = (
   <>
@@ -25,49 +24,51 @@ const content = (
       hic est placeat!
     </p>
   </>
-)
+);
 
-const icon = <Icons.Add />
+const icon = <Icons.Add />;
 
 const meta: Meta<typeof Details> = {
-  title: 'FP.REACT Components/Details',
+  title: "FP.REACT Components/Details",
   component: Details,
+  tags: ["rc"],
   args: {
-    // @ts-ignore
     children: content,
     icon: icon,
     summary: <>Summary Section</>,
   },
-  actions: { argTypesRegex: '^on.*' },
+  actions: { argTypesRegex: "^on.*" },
   decorators: [
     (Story) => (
-      <div className="container" style={{ minWidth: '50vw' }}>
+      <div className="container" style={{ minWidth: "50vw" }}>
         <Story />
       </div>
     ),
   ],
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Details>
+export default meta;
+type Story = StoryObj<typeof Details>;
 
 export const DetailsDropdown: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByRole('group', { name: /details dropdown/i })).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(
+      canvas.getByRole("group", { name: /details dropdown/i })
+    ).toBeInTheDocument();
   },
-} as Story
+} as Story;
 
 export const DetailsOpen: Story = {
   args: {
     open: true,
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByRole('group')).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByRole("group")).toBeInTheDocument();
   },
-} as Story
+} as Story;
 
 export const CustomDropdown: Story = {
   render: () => (
@@ -87,12 +88,12 @@ export const CustomDropdown: Story = {
       </p>
     </>
   ),
-} as Story
+} as Story;
 
 export const DetailsAccordion: Story = {
   render: () => (
     <>
-    <Details
+      <Details
         summary="Summary Section"
         icon={icon}
         ariaLabel="Details Section"
@@ -100,7 +101,7 @@ export const DetailsAccordion: Story = {
       >
         {content}
       </Details>
-    <Details
+      <Details
         summary="Summary Section"
         icon={icon}
         ariaLabel="Details Section"
@@ -108,7 +109,7 @@ export const DetailsAccordion: Story = {
       >
         {content}
       </Details>
-    <Details
+      <Details
         summary="Summary Section"
         icon={icon}
         ariaLabel="Details Section"
@@ -117,8 +118,8 @@ export const DetailsAccordion: Story = {
         {content}
       </Details>
     </>
-  )
-} as Story
+  ),
+} as Story;
 
 export const DetailsInteractionTest: Story = {
   args: {},
@@ -126,13 +127,15 @@ export const DetailsInteractionTest: Story = {
     const canvas = within(canvasElement);
 
     // Find the summary element
-    const summaryElement = canvas.getByText('Summary Section');
+    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');
+    const detailsElement = canvas.getByRole("group", {
+      name: /details dropdown/i,
+    });
+    expect(detailsElement).toHaveAttribute("open");
   },
-}
+};

package/src/components/details/details.tsx

@@ -1,19 +1,19 @@
-import UI from '#components/ui'
-import React from 'react'
+import UI from "#components/ui";
+import React from "react";
 
 type DetailsProps = {
   /**
    * The summary text shown for the details.
    * Required.
    */
-  summary: React.ReactNode
+  summary: React.ReactNode;
 
   /**
    * The aria-label  element for accessibility.
    */
-  ariaLabel: string
-} & React.ComponentProps<'details'> &
-  Partial<React.ComponentProps<typeof UI>>
+  ariaLabel: string;
+} & React.ComponentProps<"details"> &
+  Partial<React.ComponentProps<typeof UI>>;
 
 /**3
  * Details component props interface.
@@ -42,16 +42,16 @@ export const Details = ({
   ref,
   ...props
 }: DetailsProps) => {
-  const defaultStyles: React.CSSProperties = { ...styles }
+  const defaultStyles: React.CSSProperties = { ...styles };
 
   const onPointerDownCallback = (e: React.PointerEvent<HTMLDetailsElement>) => {
-    if (onPointerDown) onPointerDown?.(e)
-    if (onPointerDown) onPointerDown?.(e)
-  }
+    if (onPointerDown) onPointerDown?.(e);
+    if (onPointerDown) onPointerDown?.(e);
+  };
 
   const onToggleCallback = (e: React.PointerEvent<HTMLDetailsElement>) => {
-    if (onToggle) onPointerDown?.(e)
-  }
+    if (onToggle) onPointerDown?.(e);
+  };
   return (
     <UI
       as="details"
@@ -60,7 +60,7 @@ export const Details = ({
       onToggle={onToggleCallback}
       ref={ref}
       open={open}
-      aria-label={ariaLabel || 'Details dropdown'}
+      aria-label={ariaLabel || "Details dropdown"}
       // aria-roledescription="detail accordion"
       name={name}
       {...props}
@@ -71,8 +71,8 @@ export const Details = ({
       </UI>
       <UI as="section">{children}</UI>
     </UI>
-  )
-}
+  );
+};
 
-export default Details
-Details.displayName = 'Details'
+export default Details;
+Details.displayName = "Details";