@agregio-solutions/design-system 1.91.0 → 1.92.0

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

@@ -0,0 +1,342 @@
+# Accordion
+
+## 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/Accordion/Accordion.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
+import Accordion from "./Accordion";
+import { I18nProvider } from "react-aria-components";
+import Icon from "../Icon/Icon";
+import Checkbox from "../Checkbox/Checkbox";
+import Tag from "../Tag/Tag";
+
+const meta: Meta<typeof Accordion> = {
+  component: Accordion,
+  parameters: {
+    layout: "centered",
+  },
+  globals: {
+    backgrounds: { value: "light" },
+  },
+  args: {
+    onExpandedChange: fn(),
+  },
+  argTypes: {
+    description: { control: { type: "text" } },
+    children: { control: { type: "text" } },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: "410px" }}>
+        <I18nProvider locale="en">
+          <Story />
+        </I18nProvider>
+      </div>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    title: "[Insert title]",
+    description: "[Insert description]",
+    children: "Placeholder",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(args.title);
+    await canvas.findByText(args.description as string);
+    await expect(canvas.getByText("Placeholder")).not.toBeVisible();
+  },
+};
+
+export const Positive: Story = {
+  args: {
+    ...Playground.args,
+    defaultExpanded: true,
+    nature: "positive",
+  },
+};
+
+export const Negative: Story = {
+  args: {
+    ...Playground.args,
+    defaultExpanded: true,
+    nature: "negative",
+  },
+};
+
+export const Informative: Story = {
+  args: {
+    ...Playground.args,
+    defaultExpanded: true,
+    nature: "informative",
+  },
+};
+
+export const NoPadding: Story = {
+  args: {
+    ...Playground.args,
+    children: (
+      <div style={{ backgroundColor: "var(--color-content-neutral-tertiary)" }}>
+        Placeholder with background color
+      </div>
+    ),
+    defaultExpanded: true,
+    noPadding: true,
+  },
+};
+
+export const DefaultExpanded: Story = {
+  args: {
+    ...Playground.args,
+    defaultExpanded: true,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(args.title);
+    await canvas.findByText(args.description as string);
+    await expect(canvas.getByText("Placeholder")).toBeVisible();
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Playground.args,
+    isDisabled: true,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await canvas.findByText(args.title);
+    await canvas.findByText(args.description as string);
+    await expect(canvas.getByText("Placeholder")).not.toBeVisible();
+    await user.click(canvas.getByText(args.title));
+    await expect(canvas.getByText("Placeholder")).not.toBeVisible();
+  },
+};
+
+export const Overflow: Story = {
+  args: {
+    ...Playground.args,
+    title:
+      "ThisIsAReallyLongTitleThatShouldOverflowBecauseItIsTooLongAndShouldBeBreaked",
+    description:
+      "ThisIsAReallyLongDescriptionThatShouldOverflowBecauseItIsTooLongAndShouldBeBreaked",
+    children:
+      "ThisIsAReallyLongChildrenThatShouldOverflowBecauseItIsTooLongAndShouldBeBreaked",
+  },
+};
+
+export const WithBottomCloseButton: Story = {
+  args: {
+    ...Playground.args,
+    withBottomCloseButton: true,
+    defaultExpanded: true,
+  },
+};
+
+export const WithTitleContentLeftAndRight: Story = {
+  args: {
+    ...Playground.args,
+    titleContentLeft: (
+      <>
+        <Icon name="help_outline" style={{ fontSize: "24px" }} />
+        <Checkbox label="Checkbox" hideLabel />
+      </>
+    ),
+    titleContentRight: <Tag iconLeft="help_outline">I'm a tag!</Tag>,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(args.title);
+    await canvas.findByLabelText("Checkbox");
+    await canvas.findByText("I'm a tag!");
+  },
+};
+```
+
+## 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 { expect, userEvent, within } from "storybook/test";
+import Accordion from "../Accordion";
+import * as AccordionStories from "../Accordion.stories";
+import { useState } from "react";
+
+const meta: Meta<typeof Accordion> = {
+  component: Accordion,
+  ...AccordionStories.default,
+  parameters: {
+    ...AccordionStories.default.parameters,
+    chromatic: { disableSnapshot: true },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const UncontrolledExample: Story = {
+  render: () => {
+    return (
+      <Accordion
+        title="Accordion uncontrolled"
+        description="Accordion description"
+        defaultExpanded={false}
+      >
+        <div>Content</div>
+      </Accordion>
+    );
+  },
+};
+
+export const UnmountOnExit: Story = {
+  args: {
+    ...AccordionStories.Playground.args,
+    unmountOnExit: true,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await canvas.findByText(args.title);
+    await canvas.findByText(args.description as string);
+    await expect(canvas.queryByText("Placeholder")).not.toBeInTheDocument();
+    await user.click(canvas.getByText(args.title));
+    await expect(canvas.getByText("Placeholder")).toBeVisible();
+    await user.click(canvas.getByText(args.title));
+    await expect(canvas.queryByText("Placeholder")).not.toBeInTheDocument();
+  },
+};
+
+export const ShouldCloseWhenClickingOnCloseButton: Story = {
+  args: {
+    ...AccordionStories.Playground.args,
+    unmountOnExit: true,
+    withBottomCloseButton: true,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await canvas.findByText(args.title);
+    await expect(canvas.queryByText("Placeholder")).not.toBeInTheDocument();
+    await user.click(canvas.getByText(args.title));
+    await expect(canvas.getByText("Placeholder")).toBeVisible();
+    await user.click(canvas.getByText("Close"));
+    await expect(canvas.queryByText("Placeholder")).not.toBeInTheDocument();
+    await expect(canvas.queryByText("Close")).not.toBeInTheDocument();
+  },
+};
+
+export const ControlledExample: Story = {
+  render: () => {
+    const ParentComponent = () => {
+      const [isExpanded, setIsExpanded] = useState(false);
+
+      return (
+        <Accordion
+          title="Accordion controlled"
+          isExpanded={isExpanded}
+          onExpandedChange={setIsExpanded}
+          withBottomCloseButton
+        >
+          <div>Content</div>
+        </Accordion>
+      );
+    };
+    return <ParentComponent />;
+  },
+};
+
+export const ControlledExampleTests: Story = {
+  render: ControlledExample.render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await canvas.findByText("Accordion controlled");
+    await expect(canvas.queryByText("Content")).not.toBeVisible();
+    await user.click(canvas.getByText("Accordion controlled"));
+    await expect(canvas.getByText("Content")).toBeVisible();
+    await user.click(canvas.getByText("Accordion controlled"));
+    await expect(canvas.queryByText("Content")).not.toBeVisible();
+  },
+};
+
+export const ControlledExampleShouldCloseWhenClickingOnCloseButton: Story = {
+  render: ControlledExample.render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await canvas.findByText("Accordion controlled");
+    await expect(canvas.queryByText("Content")).not.toBeVisible();
+    await user.click(canvas.getByText("Accordion controlled"));
+    await expect(canvas.getByText("Content")).toBeVisible();
+    await user.click(canvas.getByText("Close"));
+    await expect(canvas.queryByText("Content")).not.toBeVisible();
+    await expect(canvas.queryByText("Close")).not.toBeInTheDocument();
+  },
+};
+```
+
+## 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 {
+  Source,
+  Stories,
+  Meta,
+  Canvas,
+  Controls,
+} from "@storybook/addon-docs/blocks";
+import * as AccordionStoriesTests from "./tests/Accordion.stories";
+import * as AccordionStories from "./Accordion.stories";
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+<Canvas of={AccordionStories.Playground} />
+<Controls of={AccordionStories.Playground} />
+
+Accordions can be built with the `<details>` and `<summary>` HTML elements, but this can be difficult to style.
+Accordion component helps achieve accessible Accordions implemented with the correct ARIA pattern while making custom styling easy and the Design System styles.
+
+- **Flexible** - Structured such that it can be used standalone or combined with other Accordions to form a AccordionGroup.
+- **Keyboard Interaction** - When focused, an Accordion's visibility can be toggled with either the Enter or Space key, and the appropriate ARIA attributes are automatically applied.
+- **Accessible** - Uses hidden="until-found" in supported browsers, enabling find-in-page search support and improved search engine visibility for collapsed content
+
+## Example usage
+
+There are two ways to use the Accordion component:
+
+- **Uncontrolled** - The Accordion is expanded or collapsed based on the `defaultExpanded` prop and internally managed by the component on click.
+- **Controlled** - The Accordion is expanded or collapsed based on the `isExpanded` prop and the `onExpandedChange` prop.
+
+Here is an example of an **uncontrolled Accordion**:
+
+<Source of={AccordionStoriesTests.UncontrolledExample} type="code" dark />
+
+Here is an example of a **controlled Accordion**:
+
+<Source of={AccordionStoriesTests.ControlledExample} type="code" dark />
+
+<Stories />
+```

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

@@ -0,0 +1,192 @@
+# Badge
+
+## 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/Badge/Badge.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Badge from "./Badge";
+import { within, expect } from "storybook/test";
+
+const meta: Meta<typeof Badge> = {
+  component: Badge,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+export default meta;
+
+export const Default: StoryObj<typeof Badge> = {
+  args: {
+    value: 9,
+    nature: "default",
+    max: undefined,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(String(args.value));
+  },
+};
+
+export const Informative: StoryObj<typeof Badge> = {
+  args: {
+    ...Default.args,
+    nature: "informative",
+  },
+};
+
+export const Negative: StoryObj<typeof Badge> = {
+  args: {
+    ...Default.args,
+    nature: "negative",
+  },
+};
+
+export const Positive: StoryObj<typeof Badge> = {
+  args: {
+    ...Default.args,
+    nature: "positive",
+  },
+};
+
+export const Warning: StoryObj<typeof Badge> = {
+  args: {
+    ...Default.args,
+    nature: "warning",
+  },
+};
+
+export const LargeNumber: StoryObj<typeof Badge> = {
+  args: {
+    ...Negative.args,
+    value: 999,
+  },
+};
+
+export const WithMax: StoryObj<typeof Badge> = {
+  args: {
+    ...Negative.args,
+    value: 100,
+    max: 99,
+  },
+};
+
+export const Dot: StoryObj<typeof Badge> = {
+  globals: {
+    backgrounds: { value: "dark" },
+  },
+  args: {
+    ...Negative.args,
+    variant: "dot",
+  },
+  play: async ({ canvasElement }) => {
+    await expect(canvasElement).not.toBeEmptyDOMElement();
+    await expect(canvasElement.firstElementChild).toHaveTextContent("");
+    await expect(canvasElement.firstElementChild).toHaveAttribute(
+      "data-variant",
+      "dot",
+    );
+  },
+};
+
+export const WithString: StoryObj<typeof Badge> = {
+  args: {
+    ...Default.args,
+    value: "+3",
+  },
+};
+```
+
+## 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 Badge from "../Badge";
+import { expect } from "storybook/test";
+import { Negative, Default } from "../Badge.stories";
+
+const meta: Meta<typeof Badge> = {
+  component: Badge,
+  parameters: {
+    layout: "centered",
+    chromatic: { disableSnapshot: true },
+  },
+};
+export default meta;
+
+export const TestNoValueNoValueShouldRenderNothing: StoryObj<typeof Badge> = {
+  args: {
+    ...Negative.args,
+    value: undefined,
+  },
+  play: async ({ canvasElement }) => {
+    await expect(canvasElement).toBeEmptyDOMElement();
+  },
+};
+
+export const TestZeroValueShouldRenderNothing: StoryObj<typeof Badge> = {
+  args: {
+    ...Default.args,
+    value: 0,
+  },
+  play: async ({ canvasElement }) => {
+    await expect(canvasElement).toBeEmptyDOMElement();
+  },
+};
+
+export const TestShowZero: StoryObj<typeof Badge> = {
+  args: {
+    ...Default.args,
+    value: 0,
+    showZero: true,
+  },
+  play: async ({ canvasElement }) => {
+    await expect(canvasElement).toHaveTextContent("0");
+  },
+};
+
+export const TestInvisible: StoryObj<typeof Badge> = {
+  args: {
+    ...Default.args,
+    invisible: true,
+  },
+  play: async ({ canvasElement }) => {
+    await expect(canvasElement).toHaveTextContent("9");
+    await expect(canvasElement.firstElementChild).not.toBeVisible();
+  },
+};
+
+export const TestMaxUnder: StoryObj<typeof Badge> = {
+  args: {
+    ...Default.args,
+    value: 98,
+    max: 99,
+  },
+  play: async ({ canvasElement }) => {
+    await expect(canvasElement).toHaveTextContent("98");
+  },
+};
+
+export const TestMaxAbove: StoryObj<typeof Badge> = {
+  args: {
+    ...Default.args,
+    value: 100,
+    max: 99,
+  },
+  play: async ({ canvasElement }) => {
+    await expect(canvasElement).toHaveTextContent("99");
+  },
+};
+```