@agregio-solutions/design-system 1.90.1 → 1.92.0

package/dist/packages/components/Pagination/doc.md

@@ -0,0 +1,227 @@
+# Pagination
+
+## Props
+
+The complete Props documentation with JS doc for this component is available at this path:
+
+node_modules/@agregio-solutions/design-system/dist/packages/components/Pagination/Pagination.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Pagination from "./Pagination";
+import { within, expect, fn } from "storybook/test";
+import { I18nProvider } from "react-aria-components";
+import { STORYBOOK_VIEWPORTS } from "@internal/test-utils-storybook/test-utils-storybook";
+
+const meta: Meta<typeof Pagination> = {
+  component: Pagination,
+  tags: ["autodocs"],
+  argTypes: {
+    itemsPerPageOptions: { control: false },
+    itemsPerPage: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <I18nProvider locale="en-US">
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};
+export default meta;
+
+export const Playground: StoryObj<typeof Pagination> = {
+  args: {
+    count: 345,
+    pageIndex: 0,
+    onPageChange: fn(),
+    onItemsPerPageChange: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Item per page");
+    await expect(
+      canvas.getByTestId("table-pagination-items-range"),
+    ).toHaveTextContent("1 - 10 of 345 items");
+    await expect(
+      canvas.getByTestId("table-pagination-pages-range"),
+    ).toHaveTextContent("Of 35 pages");
+  },
+};
+
+export const EmptyTable: StoryObj<typeof Pagination> = {
+  args: {
+    ...Playground.args,
+    count: 0,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Item per page");
+    await expect(
+      canvas.getByTestId("table-pagination-items-range"),
+    ).toHaveTextContent("1 - 0 of 0 items");
+    await expect(canvas.getByLabelText("Go to first page")).toBeDisabled();
+    await expect(canvas.getByLabelText("Go to previous page")).toBeDisabled();
+    await expect(canvas.getByLabelText("Go to next page")).toBeDisabled();
+    await expect(canvas.getByLabelText("Go to last page")).toBeDisabled();
+  },
+};
+
+export const FrenchTranslation: StoryObj<typeof Pagination> = {
+  args: {
+    ...Playground.args,
+  },
+  decorators: [
+    (Story) => (
+      <I18nProvider locale="fr-FR">
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};
+
+export const Mobile: StoryObj<typeof Pagination> = {
+  parameters: {
+    ...STORYBOOK_VIEWPORTS,
+    layout: "none",
+  },
+  globals: {
+    viewport: { value: "iphone6", isRotated: false },
+  },
+  args: {
+    ...Playground.args,
+  },
+};
+```
+
+## How to test this component
+
+Here are some more advanced stories with more testing coverage and examples that you can read to understand how to test this component.
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Pagination from "../Pagination";
+import { userEvent, within, screen, expect } from "storybook/test";
+import { expectPresent } from "@internal/test-utils-storybook/test-utils-storybook";
+import * as PaginationStories from "../Pagination.stories";
+
+const meta: Meta<typeof Pagination> = {
+  ...PaginationStories.default,
+  component: Pagination,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+export default meta;
+
+export const TestAbove10Items: StoryObj<typeof Pagination> = {
+  args: {
+    ...PaginationStories.Playground.args,
+    count: 5,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Item per page");
+    await expect(
+      canvas.getByTestId("table-pagination-items-range"),
+    ).toHaveTextContent("1 - 5 of 5 items");
+  },
+};
+
+export const TestShouldChangeTheNumberOfItemsPerPage: StoryObj<
+  typeof Pagination
+> = {
+  args: {
+    ...PaginationStories.Playground.args,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await user.click(
+      canvas.getByLabelText("Select the number of items per page"),
+    );
+    await expectPresent(() => screen.getByText("20", { selector: "span" }));
+    await user.click(screen.getByText("20", { selector: "span" }));
+    await expect(args.onItemsPerPageChange).toHaveBeenCalledTimes(1);
+    await expect(args.onItemsPerPageChange).toHaveBeenCalledWith(20);
+  },
+};
+
+export const TestShouldChangeTheSelectedPage: StoryObj<typeof Pagination> = {
+  args: {
+    ...PaginationStories.Playground.args,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await user.click(canvas.getByLabelText("Select page to display"));
+    await expectPresent(() => screen.getByText("4", { selector: "span" }));
+    await user.click(screen.getByText("4", { selector: "span" }));
+    await expect(args.onPageChange).toHaveBeenCalledTimes(1);
+    await expect(args.onPageChange).toHaveBeenCalledWith(3);
+  },
+};
+
+export const TestShouldNavigateUsingTheArrows: StoryObj<typeof Pagination> = {
+  args: {
+    ...PaginationStories.Playground.args,
+    pageIndex: 3,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await user.click(canvas.getByLabelText("Go to first page"));
+    await expect(args.onPageChange).toHaveBeenLastCalledWith(0);
+    await user.click(canvas.getByLabelText("Go to previous page"));
+    await expect(args.onPageChange).toHaveBeenLastCalledWith(2);
+    await user.click(canvas.getByLabelText("Go to next page"));
+    await expect(args.onPageChange).toHaveBeenLastCalledWith(4);
+    await user.click(canvas.getByLabelText("Go to last page"));
+    await expect(args.onPageChange).toHaveBeenLastCalledWith(34);
+  },
+};
+
+export const TestShouldDisablePreviousButtonsOnFirstPage: StoryObj<
+  typeof Pagination
+> = {
+  args: {
+    ...PaginationStories.Playground.args,
+    pageIndex: 0,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await expect(canvas.getByLabelText("Go to first page")).toBeDisabled();
+    await user.click(canvas.getByLabelText("Go to first page"));
+    await expect(args.onPageChange).toHaveBeenCalledTimes(0);
+    await expect(canvas.getByLabelText("Go to previous page")).toBeDisabled();
+    await user.click(canvas.getByLabelText("Go to previous page"));
+    await expect(args.onPageChange).toHaveBeenCalledTimes(0);
+  },
+};
+
+export const TestShouldDisableNextButtonsOnLastPage: StoryObj<
+  typeof Pagination
+> = {
+  args: {
+    ...PaginationStories.Playground.args,
+    pageIndex: 34,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await expect(canvas.getByLabelText("Go to last page")).toBeDisabled();
+    await user.click(canvas.getByLabelText("Go to last page"));
+    await expect(args.onPageChange).toHaveBeenCalledTimes(0);
+    await expect(canvas.getByLabelText("Go to next page")).toBeDisabled();
+    await user.click(canvas.getByLabelText("Go to next page"));
+    await expect(args.onPageChange).toHaveBeenCalledTimes(0);
+  },
+};
+```

package/dist/packages/components/Popover/doc.md

@@ -0,0 +1,245 @@
+# Popover
+
+## Props
+
+The complete Props documentation with JS doc for this component is available at this path:
+
+node_modules/@agregio-solutions/design-system/dist/packages/components/Popover/Popover.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Popover, { PopoverTrigger, Props } from "./Popover";
+import Button from "../Button/Button";
+import { useState } from "react";
+import { expect, within } from "storybook/test";
+import Link from "../Link/Link";
+
+const meta: Meta<typeof Popover> = {
+  component: Popover,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    trigger: { control: false },
+    children: { control: false },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    children: (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          gap: "var(--spacing-sm)",
+          maxWidth: "248px",
+        }}
+      >
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis dui
+          a urna hendrerit efficitur.
+        </div>
+        <Link href="https://www.google.com" showLinkIcon>
+          Label link
+        </Link>
+      </div>
+    ),
+    title: "Insert title",
+    trigger: <Button iconLeft="add" mode="secondary" />,
+  },
+};
+
+export const Open: Story = {
+  args: {
+    ...Playground.args,
+    defaultOpen: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement.ownerDocument.body);
+    await canvas.findByText("Insert title");
+    await canvas.findByText(
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis dui a urna hendrerit efficitur.",
+    );
+    await canvas.findByText("Label link");
+  },
+};
+
+export const WithPopoverTrigger: Story = {
+  args: {
+    ...Open.args,
+    trigger: (
+      <PopoverTrigger
+        triggerButtonProps={{
+          "data-testid": "popover-trigger-button",
+          "data-example": "custom-value",
+        }}
+      >
+        Click me
+      </PopoverTrigger>
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement.ownerDocument.body);
+    await canvas.findByText("Insert title");
+    await canvas.findByText(
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis dui a urna hendrerit efficitur.",
+    );
+    await canvas.findByText("Label link");
+    const triggerButton = canvasElement.querySelector(
+      "[data-testid='popover-trigger-button']",
+    );
+    expect(triggerButton).toBeInTheDocument();
+    expect(triggerButton).toHaveAttribute(
+      "data-testid",
+      "popover-trigger-button",
+    );
+    expect(triggerButton).toHaveAttribute("data-example", "custom-value");
+  },
+};
+
+export const HideArrow: Story = {
+  args: {
+    ...Open.args,
+    hideArrow: true,
+  },
+};
+
+export const HideCloseButton: Story = {
+  args: {
+    ...Open.args,
+    hideCloseButton: true,
+  },
+};
+
+export const MinimalContent: Story = {
+  args: {
+    ...Open.args,
+    title: undefined,
+    hideCloseButton: true,
+    children: "Some informations",
+  },
+};
+
+export const AllPlacements: Story = {
+  render: () => {
+    return (
+      <div
+        style={{ display: "flex", gap: 180, flexWrap: "wrap", padding: 100 }}
+      >
+        {[
+          "top left",
+          "top center",
+          "top right",
+          "right top",
+          "right center",
+          "right bottom",
+          "bottom right",
+          "bottom center",
+          "bottom left",
+          "left top",
+          "left center",
+          "left bottom",
+        ].map((placement) => (
+          <Popover
+            key={placement}
+            isOpen
+            placement={placement as Props["placement"]}
+            trigger={<Button iconLeft="add" mode="secondary" />}
+            hideCloseButton
+          >
+            <div>{placement}</div>
+          </Popover>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Controlled: Story = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+  render: () => {
+    const ParentComponent = () => {
+      const [isOpen, setIsOpen] = useState(false);
+      return (
+        <Popover
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          trigger={<Button iconLeft="add" mode="secondary" />}
+          title="Controlled popover"
+        >
+          <div>Hello, I'm a controlled popover</div>
+        </Popover>
+      );
+    };
+    return <ParentComponent />;
+  },
+};
+```
+
+## Developer notes
+
+Here are the notes available for the developer on the built Storybook, you can read them to understand the component and how to use it.
+
+```mdx
+import {
+  Canvas,
+  Meta,
+  Stories,
+  Controls,
+  Source,
+} from "@storybook/addon-docs/blocks";
+
+import * as Popover from "./Popover.stories";
+
+<Meta of={Popover} />
+
+# Popover
+
+<Canvas of={Popover.Playground} />
+
+<Controls of={Popover.Playground} />
+
+A popover is an overlay element positioned relative to a trigger.
+
+There is no built in way to create popovers in HTML. Popover helps achieve accessible popovers that can be styled as needed.
+
+- **Accessible** – The trigger and popover are automatically associated semantically via ARIA. Content outside the popover is hidden from assistive technologies while it is open. The popover closes when interacting outside, or pressing the Escape key.
+- **Focus management** – Focus is moved into the popover on mount, and restored to the trigger element on unmount.
+- **Positioning** – The popover is positioned relative to the trigger element, and automatically flips and adjusts to avoid overlapping with the edge of the browser window.
+
+## Usage with a Button
+
+The most common use case is to use a Button as the trigger element.
+
+<Canvas of={Popover.Playground} />
+
+## Usage with `PopoverTrigger`
+
+In the case where you don't want to use a Button as the trigger element, you can use `PopoverTrigger` to wrap your component.
+
+Please not that you cannot pass a Button (or other interactive component) as `children` of `PopoverTrigger`.
+This is because the `PopoverTrigger` itself is an unstyled Button that serves as a trigger for the Popover to show.
+
+<Canvas of={Popover.WithPopoverTrigger} />
+
+## Controlled / Uncontrolled mode
+
+The open state of the Popover can be controlled via the `defaultOpen` (uncontrolled mode) and `isOpen` (controlled mode) props.
+
+Below is an example of how to use the "controlled" mode.
+
+<Canvas of={Popover.Controlled} />
+```