@progressiveui/react 2.0.2 → 2.0.4

package/src/components/Breadcrumb/README.mdx

@@ -1,23 +0,0 @@
-### Usage
-
-Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step.
-
-#### When to use
-
-Breadcrumbs are effective in products and experiences that have a large amount of content organized in a hierarchy of more than two levels. They take up little space but still provide context for the user’s place in the navigation hierarchy.
-
-#### When not to use
-
-Breadcrumbs are always treated as secondary and should never entirely replace the primary navigation. They shouldn’t be used for products that have single level navigation because they create unnecessary clutter.
-
-### Formatting
-
-![Image of Breadcrumb Format](https://github.com/wfp/ui/blob/component-updates/src/assets/formatting/Breadcrumb.png?raw=true)
-
-1. **Page link(1):** Directs users to the parent-level page.
-
-2. **Separator(2):** Clearly distinguishes between each page.
-
-### Reference
-
-[Carbon Design System Usage for Breadcrumb](https://next.carbondesignsystem.com/components//breadcrumb)

package/src/components/Breadcrumb/index.ts

@@ -1,2 +0,0 @@
-// export * from './Breadcrumb.Skeleton';
-export { default } from "./Breadcrumb";

package/src/components/BreadcrumbHome/BreadcrumbHome.tsx

@@ -1,37 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-import { Home } from "@progressiveui/icons-react";
-import useSettings from "../../hooks/useSettings";
-
-interface BreadcrumbHomeProps {
-  /**
-   * Specify an optional text for the `Home` Icon
-   */
-  hometext?: React.ReactNode;
-  /**
-   * Specify an optional className to be added to the `Home` Icon
-   */
-  className?: string;
-}
-
-const BreadcrumbHome: React.FC<BreadcrumbHomeProps> = ({
-  className,
-  hometext,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-  const classes = classNames(`${prefix}--breadcrumb-home`, className);
-  return (
-    <Home
-      //icon={iconHome}
-      fill="#0b77c2"
-      width="14"
-      height="14"
-      description={hometext}
-      className={classes}
-      {...other}
-    />
-  );
-};
-
-export default BreadcrumbHome;

package/src/components/BreadcrumbHome/index.ts

@@ -1 +0,0 @@
-export { default } from './BreadcrumbHome';

package/src/components/BreadcrumbItem/BreadcrumbItem.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import Link from "../Link";
-import useSettings from "../../hooks/useSettings";
-
-const newChild = (children, disableLink, href) => {
-  const { prefix } = useSettings();
-  if (disableLink === true) {
-    return <span>{children}</span>;
-  } else if (typeof children === "string" && !(href === undefined)) {
-    return <Link href={href}>{children}</Link>;
-  } else {
-    return React.cloneElement(React.Children.only(children), {
-      className: `${prefix}--link`,
-    });
-  }
-};
-
-interface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<"div"> {
-  /**
-   * Specify an link for the `BreadcrumbItem`
-   */
-  href?: string;
-  /**
-   * The children elements, usually a link
-   */
-  children?: React.ReactNode;
-  /**
-   * Specify `BreadcrumbItem` to be interactive/enabled or non-interactive/disabled
-   */
-  disableLink?: boolean;
-  /**
-   * Specify an optional className to be added to the `BreadcrumbItem` Icon
-   */
-  className?: string;
-}
-
-const BreadcrumbItem = ({
-  children,
-  className,
-  disableLink,
-  href,
-  ...other
-}: BreadcrumbItemProps) => {
-  const { prefix } = useSettings();
-  const classes = classNames(`${prefix}--breadcrumb-item`, className);
-  return (
-    <div className={classes} {...other}>
-      {newChild(children, disableLink, href)}
-    </div>
-  );
-};
-
-export default BreadcrumbItem;

package/src/components/BreadcrumbItem/index.ts

@@ -1 +0,0 @@
-export { default } from './BreadcrumbItem';

package/src/components/Button/Button.Skeleton.tsx

@@ -1,30 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-
-interface ButtonSkeletonProps {
-  small?: boolean;
-  href?: string;
-}
-
-const ButtonSkeleton: React.FC<ButtonSkeletonProps> = ({
-  small = false,
-  href,
-}) => {
-  const buttonClasses = classNames({
-    "wfp--skeleton": true,
-    "wfp--btn": true,
-    "wfp--btn--sm": small,
-  });
-
-  const commonProps = {
-    className: buttonClasses,
-  };
-
-  const button = <button {...commonProps} type="button" />;
-
-  const anchor = <a {...commonProps} href={href} role="button" />; // eslint-disable-line
-
-  return href ? anchor : button;
-};
-
-export default ButtonSkeleton;

package/src/components/Button/Button.d.ts

@@ -1,7 +0,0 @@
-
-
-export interface WFPButton {
-  disabled: boolean;
-  small: boolean;
-  href: string | null;
-}

package/src/components/Button/Button.stories.tsx

@@ -1,323 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { buttonKinds } from "../../prop-types/types";
-import { AddCircle } from "@progressiveui/icons-react";
-import Button from "./Button";
-
-const meta: Meta<typeof Button> = {
-  title: "Components/UI Elements/Button",
-  component: Button,
-  tags: ["autodocs"],
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-    // twig: buttonTwig,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const ButtonDefault: Story = {
-  render: (args) => <Button {...args} />,
-  args: {
-    children: "Button",
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/jtKqyyMTOKgUTstiGvPZMl/?node-id=0%3A1",
-    },
-  },
-};
-
-export const PrimaryButton = (args) => (
-  <>
-    <Button {...args}>Default</Button> {""}
-    <Button {...args} icon={AddCircle} iconReverse>
-      With Icon
-    </Button>{" "}
-    <Button {...args} icon={AddCircle} />{" "}
-    <Button {...args} disabled>
-      Disable
-    </Button>
-  </>
-);
-
-PrimaryButton.args = {
-  kind: "primary",
-};
-
-export const SecondaryButton = (args) => (
-  <>
-    <Button {...args}>Default</Button> {""}
-    <Button {...args} icon={AddCircle}>
-      With Icon
-    </Button>{" "}
-    <Button {...args} disabled>
-      Disable
-    </Button>{" "}
-    <Button {...args} icon={AddCircle} disabled />
-  </>
-);
-
-SecondaryButton.args = {
-  kind: "secondary",
-};
-
-export const GhostButton = (args) => (
-  <>
-    <Button {...args}>Default</Button> {""}
-    <Button {...args} icon={AddCircle}>
-      With Icon
-    </Button>{" "}
-    <Button {...args} disabled>
-      Disable
-    </Button>
-  </>
-);
-
-GhostButton.args = {
-  kind: "ghost",
-};
-
-export const ButtonSolid = (args) => (
-  <div
-    style={{
-      width: "100%",
-      height: "150px",
-      backgroundColor: "#017DBC",
-      padding: "20px",
-    }}
-  >
-    {buttonKinds
-      .filter(
-        (e) =>
-          e === "primary" ||
-          e === "secondary" ||
-          e === "ghost" ||
-          e === "danger"
-      )
-      .map((e) => (
-        <div
-          key={e}
-          style={{
-            display: "inline-block",
-            padding: "0.3rem",
-          }}
-        >
-          <Button {...args} kind={e} icon={AddCircle}>
-            {e}
-          </Button>{" "}
-          <Button {...args} disabled kind={e}>
-            {e} disable
-          </Button>
-        </div>
-      ))}
-  </div>
-);
-
-ButtonSolid.args = {
-  kind: "primary",
-  btnSolid: true,
-};
-
-ButtonSolid.parameters = {
-  code: false,
-};
-
-const solidDesc =
-  "This is how the different kinds of buttons look on solid background. Set`solid prop` to true to enable it";
-
-ButtonSolid.parameters = {
-  docs: {
-    storyDescription: solidDesc,
-  },
-};
-
-export const DangerButton = (args) => (
-  <>
-    <Button {...args}>Default</Button> {""}
-    <Button {...args} icon={AddCircle}>
-      With Icon
-    </Button>{" "}
-    <Button {...args} icon={AddCircle} />{" "}
-    <Button {...args} disabled>
-      Disable
-    </Button>
-  </>
-);
-
-DangerButton.args = {
-  kind: "danger",
-};
-
-// const hello = `
-// By changing the \`kind\` prop you can use different styles of the button.
-
-// | kind   |  Description  |
-// |----------|-------------|
-// | \`primary\` | the principle call to action on the page |
-// | \`secondary\` | secondary actions on each page   |
-// | \`tertiary\` | simple actions on the page |
-// | \`accent\` | very important actions and only once or twice on each page |
-// | \`danger\` | a negative action (such as Delete) on the page |
-// | \`danger--primary\` | a negative principle call to action (such as Delete) on the page |
-// | \`ghost\` | in places where a regular button would draw too much attention and look similar to links |
-// | \`inverse--primary\` | should be used on dark backgrounds |
-// | \`inverse\` | should be used on dark backgrounds |
-// | \`navigation\`| should be only used in the main navigation |
-// `;
-
-// ButtonKind.storyName = "Button kinds";
-// ButtonKind.parameters = {
-//   markdown: "hello",
-//   layout: "centered",
-//   docs: {
-//     storyDescription: hello,
-//   },
-// };
-
-// export const ButtonIcon = (args) => (
-//   <>
-//     <Button icon={AddCircle} kind="primary">
-//       Button with icon
-//     </Button>{" "}
-//     <Button {...args} kind="primary" icon={AddCircle}></Button>{" "}
-//     <Button {...args} iconReverse kind="secondary" icon={AddCircle}>
-//       With iconReverse
-//     </Button>{" "}
-//     <Button href="#" icon={AddCircle} kind="ghost">
-//       Button with icon link
-//     </Button>
-//   </>
-// );
-
-// const helloButtonIcon = `
-// When words are not enough, icons can be used in buttons to better communicate what the button does. Icons should be
-// always paired with text whenever possible.
-
-// Use the \`icon\` and \`iconDescription\` prop to add an Icon to the Button. Refer to the [Icon](?selectedKind=Icon) documentation for usage.
-
-// To show the Icon on the left side use the \`iconReverse\` prop.
-
-// Using an Button with only an Icon while not beeing recommended can be achieved by leaving the Button text blank.
-// `;
-
-// const buttoniconsnippet = `
-// import { Button } from '@progressiveui/react';
-// import { AddCircleGlyph } from '@progressiveui/icons-react';
-
-//   <>
-//   <Button icon={AddCircleGlyph} kind="primary">
-//     Button with icon
-//   </Button>{' '}
-//   <Button kind="tertiary" icon={AddCircleGlyph}></Button>{' '}
-//   <Button iconReverse kind="tertiary" icon={AddCircleGlyph}>
-//     With iconReverse
-//   </Button>
-//   </>
-// `;
-
-// ButtonIcon.parameters = {
-//   docs: {
-//     storyDescription: helloButtonIcon,
-//     source: {
-//       code: buttoniconsnippet,
-//     },
-//   },
-// };
-// ButtonIcon.storyName = "Button with icon";
-
-// export const Small = (args) => (
-//   <>
-//     <Button kind="primary" small>
-//       Small button
-//     </Button>{" "}
-//     <Button {...args} icon={AddCircle} kind="secondary" small>
-//       With icon
-//     </Button>
-//   </>
-// );
-
-// const helloButtonSmall = `
-// Small buttons may be used when there is not enough space for a
-// regular sized button. This issue is most found in tables. Small button should have three words
-// or less.
-// `;
-
-// const smallbuttonsnippet = `
-// import { Button } from '@progressiveui/react';
-// import { AddCircleGlyph } from '@progressiveui/icons-react';
-
-//   <>
-//     <Button small>Small button</Button>{' '}
-//     <Button icon={AddCircleGlyph} kind="tertiary" small>
-//       With icon
-//     </Button>
-//   </>
-// `;
-
-// Small.storyName = "small Button";
-// Small.parameters = {
-//   docs: {
-//     storyDescription: helloButtonSmall,
-//     source: {
-//       code: smallbuttonsnippet,
-//     },
-//   },
-// };
-
-// export const Large = (args) => (
-//   <>
-//     <Button kind="primary" large>
-//       Large button
-//     </Button>
-//   </>
-// );
-
-// const helloButtonLarge = `
-// Small buttons may be used when there is not enough space for a
-// regular sized button. This issue is most found in tables. Small button should have three words
-// or less.
-// `;
-
-// const largebuttonsnippet = `
-// import { Button } from '@progressiveui/react';
-// import { AddCircleGlyph } from '@progressiveui/icons-react';
-
-//   <>
-//     <Button large>Large button</Button>{' '}
-//     <Button {...args} icon={AddCircleGlyph} kind="tertiary" large>
-//       With icon
-//     </Button>
-//   </>
-// `;
-
-// Large.storyName = "large Button";
-// Large.parameters = {
-//   docs: {
-//     storyDescription: helloButtonLarge,
-//     source: {
-//       code: largebuttonsnippet,
-//     },
-//   },
-// };
-
-// const Icon = () => <div>Hello</div>;
-
-// export const CustomIcon = () => (
-//   <>
-//     <Button large icon={Icon}>
-//       Large button
-//     </Button>
-//   </>
-// );
-
-// // const CustomIconText = `
-// // Small buttons may be used when there is not enough space for a
-// // regular sized button. This issue is most found in tables. Small button should have three words
-// // or less.
-// // `;
-
-// CustomIcon.storyName = "Custom Button";

package/src/components/Button/Button.test.tsx

@@ -1,135 +0,0 @@
-import "@testing-library/jest-dom";
-//import React from "react";
-import { render, fireEvent, screen } from "@testing-library/react";
-import Button from "./Button";
-
-describe("Button Component", () => {
-  // Test basic rendering
-  it("renders a button", () => {
-    render(<Button>Click me</Button>);
-    expect(screen.getByRole("button")).toHaveTextContent("Click me");
-  });
-
-  // Test small and large variants
-  it("renders a small button", () => {
-    render(<Button small>Small Button</Button>);
-    expect(screen.getByRole("button")).toHaveClass("wfp--btn--sm");
-  });
-
-  it("renders a large button", () => {
-    render(<Button large>Large Button</Button>);
-    expect(screen.getByRole("button")).toHaveClass("wfp--btn--lg");
-  });
-
-  // Test href prop
-  it("renders an anchor when href is provided", () => {
-    render(<Button href="https://example.com">Link</Button>);
-    expect(screen.getByRole("button")).toHaveAttribute(
-      "href",
-      "https://example.com"
-    );
-  });
-
-  // Test onClick event
-  it("handles onClick event", () => {
-    const handleClick = jest.fn();
-    render(<Button onClick={handleClick}>Clickable</Button>);
-    fireEvent.click(screen.getByText("Clickable"));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-  // Test if the button is disabled when the 'disabled' prop is passed
-  it("renders a disabled button", () => {
-    render(<Button disabled>Disabled Button</Button>);
-    expect(screen.getByRole("button")).toBeDisabled();
-  });
-
-  // Test custom class name
-  it("applies custom class names", () => {
-    const customClass = "my-custom-class";
-    render(<Button className={customClass}>Custom Class Button</Button>);
-    expect(screen.getByRole("button")).toHaveClass(customClass);
-  });
-
-  // Test different kinds of buttons
-  it("applies the primary kind class", () => {
-    render(<Button kind="primary">Primary Button</Button>);
-    expect(screen.getByRole("button")).toHaveClass("wfp--btn--primary");
-  });
-
-  // Test tabIndex prop
-  it("sets tabIndex when provided", () => {
-    const tabIndex = 3;
-    render(<Button tabIndex={tabIndex}>Tab Indexed Button</Button>);
-    expect(screen.getByRole("button")).toHaveAttribute(
-      "tabIndex",
-      tabIndex.toString()
-    );
-  });
-
-  // Test large and small props together
-  it("does not apply both large and small classes together", () => {
-    render(
-      <Button large small>
-        Conflicting Sizes Button
-      </Button>
-    );
-    const button = screen.getByRole("button");
-    expect(button).not.toHaveClass("no-prefix--btn--lg");
-    expect(button).not.toHaveClass("no-prefix--btn--sm");
-  });
-
-  // Test with children and icon
-  it("renders children and icon together", () => {
-    const MockIcon = () => <svg data-testid="mock-icon"></svg>;
-    render(<Button icon={<MockIcon />}>Button with Icon</Button>);
-    expect(screen.getByTestId("mock-icon")).toBeInTheDocument();
-    expect(screen.getByRole("button")).toHaveTextContent("Button with Icon");
-  });
-
-  // Snapshot test
-  it("matches snapshot", () => {
-    const { asFragment } = render(<Button>Snapshot Button</Button>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  // Test mouse events
-  it("handles mouse events", () => {
-    const handleClick = jest.fn();
-    render(<Button onClick={handleClick}>Clickable Button</Button>);
-    fireEvent.click(screen.getByRole("button"));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-});
-
-// Mock icon as a simple SVG
-const MockIcon = () => <svg data-testid="mock-icon"></svg>;
-
-describe("Button Component with Icon", () => {
-  // Test icon rendering when icon is a React node
-  it("renders a button with an icon as a React node", () => {
-    render(<Button icon={<MockIcon />}>Button with Icon</Button>);
-    const icon = screen.getByTestId("mock-icon");
-    expect(icon).toBeInTheDocument();
-  });
-
-  // Test icon rendering when icon is a component type
-  it("renders a button with an icon as a component type", () => {
-    render(<Button icon={MockIcon}>Button with Component Icon</Button>);
-    const icon = screen.getByTestId("mock-icon");
-    expect(icon).toBeInTheDocument();
-  });
-
-  // Test iconReverse prop
-  it("renders with icon reverse", () => {
-    const MockIcon = () => <svg data-testid="mock-icon"></svg>;
-    render(
-      <Button icon={MockIcon} iconReverse>
-        Icon Reverse Button
-      </Button>
-    );
-
-    const button = screen.getByRole("button");
-    const icon = screen.getByTestId("mock-icon");
-    expect(button.firstChild).toBe(icon);
-  });
-});