@fpkit/acss 0.5.8 → 0.5.10

package/src/components/fp.test.tsx

@@ -1,56 +1,58 @@
-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/test'
-
-describe('FP component', () => {
-  it('renders a div by default', () => {
-    const { container } = render(<FP />)
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
-  it('renders a span when specified', () => {
-    const { container } = render(<FP as="span">Span</FP>)
-    const span = container.querySelector('span')
-    expect(span).toBeInTheDocument()
-  })
-
-  it('renders children', () => {
-    const { container } = render(<FP>Hello, world!</FP>)
-    expect(container.firstChild).toHaveTextContent('Hello, world!')
-  })
-
-  it('applies styles', () => {
-    const style = { backgroundColor: 'red;' }
-    const { container } = render(<FP styles={style}>Hello, world!</FP>)
-    expect(container.firstChild).toHaveStyle(style)
-  })
-
-  it('does not render styles when renderStyles is false', () => {
+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/test";
+
+describe("FP component", () => {
+  it("renders a div by default", () => {
+    const { container } = render(<FP />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders a span when specified", () => {
+    const { container } = render(<FP as="span">Span</FP>);
+    const span = container.querySelector("span");
+    expect(span).toBeInTheDocument();
+  });
+
+  it("renders children", () => {
+    const { container } = render(<FP>Hello, world!</FP>);
+    expect(container.firstChild).toHaveTextContent("Hello, world!");
+  });
+
+  it("applies styles", () => {
+    const style = { backgroundColor: "red;" };
+    const { container } = render(<FP styles={style}>Hello, world!</FP>);
+    expect(container.firstChild).toHaveStyle(style);
+  });
+
+  it("does not render styles when renderStyles is false", () => {
     const { container } = render(
-      <FP renderStyles={false} styles={{ backgroundColor: 'red' }}>
+      <FP renderStyles={false} styles={{ backgroundColor: "red" }}>
         Hello, world!
-      </FP>,
-    )
-    expect(container.firstChild).not.toHaveStyle('background-color: red;')
-  })
+      </FP>
+    );
+    expect(container.firstChild).not.toHaveStyle("background-color: red;");
+  });
 
-  it('passes through props', async () => {
-    const handleClick = jest.fn()
+  it("passes through props", async () => {
+    const handleClick = jest.fn();
     const { container } = render(
       <FP as="button" onClick={handleClick}>
         Hello, world!
-      </FP>,
-    )
-
-    await userEvent.click(screen.getByRole('button'))
-    expect(handleClick).toHaveBeenCalled()
-  })
-
-  it('applies ref', () => {
-    const ref = React.createRef<HTMLDivElement>()
-    render(<FP ref={ref}>Hello, world!</FP>)
-    expect(ref.current).toBeTruthy()
-  })
-})
+      </FP>
+    );
+
+    expect(container.firstChild).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button"));
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it("applies ref", () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(<FP ref={ref}>Hello, world!</FP>);
+    expect(ref.current).toBeTruthy();
+  });
+});

package/src/components/heading/heading.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import Heading from "./heading";
 

package/src/components/icons/icon.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Button } from "#components/buttons/button";
 import { Icon } from "./icon";

package/src/components/images/figure.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import Figure from "./figure";
 

package/src/components/images/img.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import Img from "./img";
 

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

@@ -1,34 +1,25 @@
-import { StoryObj, Meta } from '@storybook/react'
+import { StoryObj, Meta } from "@storybook/react-vite";
 /**
  * Import testing library dependencies
  */
-import { within, userEvent } from '@storybook/test'
+// import { within, userEvent } from "storybook/test";
 
 /**
  * Import jest matchers
  */
 
-
-import { Footer } from './landmarks'
+import { Footer } from "./landmarks";
 
 const meta: Meta<typeof Footer> = {
-  title: 'FP.React Components/Layout/Landmarks',
+  title: "FP.React Components/Layout/Landmarks",
   component: Footer,
   args: {
-    children: 'Main Landmark',
-    // @ts-ignore
-    'data-testid': 'main',
+    children: "Main Landmark",
+    "data-testid": "main",
   },
-} as Meta
-
-const mainChildren = () => (
-  <>
-    <h2>Header Title</h2>
-    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, unde?</p>
-  </>
-)
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Footer>
+export default meta;
+type Story = StoryObj<typeof Footer>;
 
-export const BasicFooter: Story = {}
+export const BasicFooter: Story = {};

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

@@ -1,54 +1,52 @@
-import { StoryObj, Meta } from '@storybook/react'
+import { StoryObj, Meta } from "@storybook/react-vite";
 /**
  * Import testing library dependencies
  */
-import { within, expect } from '@storybook/test'
+import { within, expect } from "storybook/test";
 
 /**
  * Import jest matchers
  */
 
+import { Header } from "./landmarks";
 
-import { Header } from './landmarks'
-
-import Img from '#components/images/img'
+import Img from "#components/images/img";
 
 const meta: Meta<typeof Header> = {
-  title: 'FP.React Components/Layout/Landmarks',
+  title: "FP.React Components/Layout/Landmarks",
   component: Header,
   args: {
-    children: 'Default Header',
-    // @ts-ignore
-    'data-testid': 'banner',
+    children: "Default Header",
+    "data-testid": "banner",
   },
-} as Meta
+} as Meta;
 
 const headerChildren = () => (
   <>
     <h2>Header Title</h2>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, unde?</p>
   </>
-)
+);
 
-export default meta
-type Story = StoryObj<typeof Header>
+export default meta;
+type Story = StoryObj<typeof Header>;
 
-export const LandmarkDefault: Story = {}
+export const LandmarkDefault: Story = {};
 
 export const HeroHeader: Story = {
   args: {
     children: headerChildren(),
     headerBackground: <Img src="https://picsum.photos/2000/1000" alt="" />,
-    styles: { color: 'red' },
-    classNames: 'header-class',
-    'data-styles': 'blue',
+    styles: { color: "red" },
+    classNames: "header-class",
+    "data-styles": "blue",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const header = canvas.getByRole('banner')
-    expect(header).toBeInTheDocument()
-    const title = canvas.getByRole('heading')
-    expect(title).toBeInTheDocument()
-    expect(title).toHaveTextContent(/header title/i)
+    const canvas = within(canvasElement);
+    const header = canvas.getByRole("banner");
+    expect(header).toBeInTheDocument();
+    const title = canvas.getByRole("heading");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent(/header title/i);
   },
-} as Story
+} as Story;

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

@@ -1,38 +1,35 @@
-import { StoryObj, Meta } from '@storybook/react'
+import { StoryObj, Meta } from "@storybook/react-vite";
 /**
  * Import testing library dependencies
  */
-import { within, userEvent, expect } from '@storybook/test'
+import { within, expect } from "storybook/test";
 
 /**
  * Import jest matchers
  */
 
-
-import { Main } from './landmarks'
+import { Main } from "./landmarks";
 
 const meta: Meta<typeof Main> = {
-  title: 'FP.React Components/Layout/Landmarks',
+  title: "FP.React Components/Layout/Landmarks",
   component: Main,
   args: {
-    // @ts-ignore
     children: (
       <section>
         The main HTML element represents the dominant content of the body of a
         document.
       </section>
     ),
-    // @ts-ignore
-    'data-testid': 'main',
+    "data-testid": "main",
   },
   decorators: [
     (Story) => (
-      <div style={{ minHeight: '80vh', display: 'flex' }}>
+      <div style={{ minHeight: "80vh", display: "flex" }}>
         <Story />
       </div>
     ),
   ],
-} as Meta
+} as Meta;
 
 const mainChildren = () => (
   <>
@@ -61,30 +58,29 @@ const mainChildren = () => (
       </aside>
     </section>
   </>
-)
+);
 
-export default meta
-type Story = StoryObj<typeof Main>
+export default meta;
+type Story = StoryObj<typeof Main>;
 
 export const MainLandmark: Story = {
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const main = canvas.getByRole('main')
-    expect(main).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    const main = canvas.getByRole("main");
+    expect(main).toBeInTheDocument();
   },
-}
+};
 
 export const MainArticles: Story = {
   args: {
-    // @ts-ignore
     children: mainChildren(),
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const main = canvas.getByRole('main')
-    expect(main).toBeInTheDocument()
-    const title = canvas.getByRole('heading')
-    expect(title).toBeInTheDocument()
-    expect(title).toHaveTextContent('Header Title')
+    const canvas = within(canvasElement);
+    const main = canvas.getByRole("main");
+    expect(main).toBeInTheDocument();
+    const title = canvas.getByRole("heading");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent("Header Title");
   },
-}
+};

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

@@ -1,6 +1,6 @@
-import { StoryObj, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react-vite";
 
-import { within, expect } from "@storybook/test";
+import { within, expect } from "storybook/test";
 
 import Link from "./link";
 import "../../styles/link/link.css";

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

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { StoryObj, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react-vite";
 
-// import { within, userEvent } from "@storybook/test";
+// import { within, userEvent } from "storybook/test";
 
 import List from "./list";
 

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

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import React from "react";
 

package/src/components/popover/popover.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect, userEvent } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect, userEvent } from "storybook/test";
 
 import Popover from "./popover";
 

package/src/components/progress/progress.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryObj, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react-vite";
 
 import "../../styles/progress/progress.css";
 

package/src/components/tag/tag.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import Tag from "./tag";
 import "./tag.scss";

package/src/components/text/text.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import Text from "./text";
 

package/src/components/text-to-speech/TextToSpeech.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import TextToSpeech from "./TextToSpeech";
 import "./text-to-speech.scss";
 

package/src/decorators/instructions.tsx

@@ -1,4 +1,4 @@
-import { StoryFn } from "@storybook/react";
+import { StoryFn } from "@storybook/react-vite";
 import UI from "#components/ui";
 
 /**
@@ -42,3 +42,4 @@ export const WithInstructions =
   };
 
 export default WithInstructions;
+WithInstructions.displayName = "WithInstructions";

package/src/patterns/page/page-header.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-// import { within, userEvent, screen } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+// import { within, userEvent, screen } from "storybook/test";
 
 import PageHeader, { HeaderVariants } from "./page-header.js";
 import { Img } from "#components/images/img";

package/src/styles/buttons/button.css

@@ -1,7 +1,7 @@
 button {
-  --btn-xs: 0.6rem;
-  --btn-sm: 0.7rem;
-  --btn-md: 0.85rem;
+  --btn-xs: 0.5rem;
+  --btn-sm: 0.625rem;
+  --btn-md: 0.75rem;
   --btn-lg: 1.3125rem;
   --btn-pill: 100rem;
   --btn-height: 2.5rem;

package/src/styles/index.css

@@ -428,9 +428,9 @@ h6:has(span:first-of-type) > span {
 }
 
 button {
-  --btn-xs: 0.6rem;
-  --btn-sm: 0.7rem;
-  --btn-md: 0.85rem;
+  --btn-xs: 0.5rem;
+  --btn-sm: 0.625rem;
+  --btn-md: 0.75rem;
   --btn-lg: 1.3125rem;
   --btn-pill: 100rem;
   --btn-height: 2.5rem;