@agregio-solutions/design-system 1.90.1 → 1.92.0

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

@@ -0,0 +1,99 @@
+# Chip
+
+## 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/Chip/Chip.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { fn, within } from "storybook/test";
+
+import Chip from "./Chip";
+
+const meta: Meta<typeof Chip> = {
+  component: Chip,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+export default meta;
+
+export const Default: StoryObj<typeof Chip> = {
+  args: {
+    value: "[Insert chip]",
+    onClose: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(String(args.value));
+  },
+};
+
+export const Small: StoryObj<typeof Chip> = {
+  args: {
+    ...Default.args,
+    size: "small",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(String(args.value));
+  },
+};
+
+export const NoCloseButton: StoryObj<typeof Chip> = {
+  args: {
+    ...Default.args,
+    onClose: undefined,
+  },
+};
+
+export const ImplementationExample: StoryObj<typeof Chip> = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+  render: () => {
+    interface ChipData {
+      key: number;
+      label: string;
+    }
+
+    const ImplementationExample = () => {
+      const [chipData, setChipData] = React.useState<readonly ChipData[]>([
+        { key: 0, label: "Biarritz" },
+        { key: 2, label: "Lyon" },
+        { key: 3, label: "Paris" },
+        { key: 4, label: "Strasbourg" },
+      ]);
+      const handleDelete = (chipToDelete: ChipData) => () => {
+        setChipData((chips) =>
+          chips.filter((chip) => chip.key !== chipToDelete.key),
+        );
+      };
+
+      return (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+          {chipData.map((data) => (
+            <Chip
+              key={data.key}
+              value={data.label}
+              onClose={handleDelete(data)}
+            />
+          ))}
+        </div>
+      );
+    };
+
+    return <ImplementationExample />;
+  },
+};
+```

package/dist/packages/components/Combobox/Combobox.d.ts

@@ -80,6 +80,10 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      * The filter function used to determine if a option should be included in the combo box list.
      */
     defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    /**
+     * When true, increases the dropdown max-height from 200px to 400px.
+     */
+    tallDropdown?: boolean;
 };
 declare const Combobox: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
     /**
@@ -158,5 +162,9 @@ declare const Combobox: React.ForwardRefExoticComponent<Pick<LabelProps, "label"
      * The filter function used to determine if a option should be included in the combo box list.
      */
     defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    /**
+     * When true, increases the dropdown max-height from 200px to 400px.
+     */
+    tallDropdown?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;
 export default Combobox;