@progressiveui/react 1.22.0

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

@@ -0,0 +1,339 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { buttonKinds } from "../../prop-types/types";
+import { AddCircle } from "@progressiveui/icons-react";
+import markdown from "./README.mdx";
+import Button from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/UI Elements/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+    // twig: buttonTwig,
+  },
+};
+
+// export default {
+//   title: "Components/UI Elements/Button",
+//   component: Button,
+//   markdown: "hello",
+//   parameters: {
+//     componentSubtitle: "Component",
+//     status: "released",
+//     mdx: markdown,
+//     // twig: buttonTwig,
+//   },
+// };
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+//export const ButtonDefault = (args) => <Button {...args}>Default</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

@@ -0,0 +1,135 @@
+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);
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,201 @@
+import * as React from "react";
+import { useState, useEffect } from "react";
+
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import { ButtonKind } from "../../utils";
+
+interface ButtonBaseProps {
+  /**
+   * Content of the Button @design
+   */
+  children?: React.ReactNode;
+  /**
+   * Specify whether the Button should be a small variant @design
+   */
+  small?: boolean;
+  /**
+   * Specify whether the Button should be a large variant
+   */
+  large?: boolean;
+
+  /**
+   * Specify btnSolid to buttons on solid background to make it stand out
+   */
+  btnSolid?: boolean;
+  /**
+   * Specify the kind of Button you want to create @design
+   */
+  kind?: ButtonKind;
+  /**
+   * Optionally specify an href for your Button to become an element
+   */
+  href?: string;
+  //target?: string; // TODO: Remove  " "
+  /**
+   * Specify an `icon` to include in the Button through an object representing the SVG data of the icon, similar to the `Icon` component @design
+   */
+  icon?: React.ReactNode | React.ComponentType<any>;
+  /**
+   * Optionally specify an href for your Button to become an element @design
+   */
+  iconReverse?: boolean;
+  // todo: revise iconDescription
+  iconDescription?: string;
+  /**
+   * Specify whether the Button should be disabled, or not
+   */
+  disabled?: boolean;
+  /**
+   * Optional prop to specify the tabIndex of the Button
+   */
+  tabIndex?: number;
+  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+  // type?: 'button' | 'reset' | 'submit';
+  useFlexbox?: boolean;
+  id?: string;
+}
+
+interface ButtonButtonProps
+  extends ButtonBaseProps,
+    React.ComponentPropsWithoutRef<"button"> {}
+
+interface ButtonLinkProps
+  extends ButtonBaseProps,
+    React.ComponentPropsWithoutRef<"a"> {}
+
+type ConditionalProps<T> = T extends { href: string }
+  ? ButtonLinkProps
+  : ButtonButtonProps;
+
+/**
+ * Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience. */
+
+export type ButtonRef<T extends React.ElementType> =
+  React.ComponentPropsWithRef<T>["ref"];
+
+export const Button = React.forwardRef(
+  <T extends { href?: string }>(
+    props: ConditionalProps<T>,
+    ref: React.Ref<
+      T extends { href: string } ? HTMLLinkElement : HTMLButtonElement
+    >
+  ) => {
+    const {
+      children,
+      className,
+      disabled,
+      small,
+      large,
+      btnSolid,
+      kind = "primary",
+      iconReverse,
+      tabIndex,
+      useFlexbox,
+      type = "button",
+      icon,
+      iconDescription,
+      onClick,
+      id,
+      ...other
+    } = props;
+    const { prefix } = useSettings();
+    const [count, setCount] = useState(false);
+
+    useEffect(() => {
+      const timer = setTimeout(() => endAnimation(), 500);
+      return () => {
+        clearTimeout(timer);
+      };
+    }, [count]);
+
+    const buttonClasses = classNames(className, {
+      [`${prefix}--btn`]: true,
+      [`${prefix}--btn--sm`]: small,
+      [`${prefix}--btn--lg`]: large,
+      [`${prefix}--btn--icon-reverse`]: iconReverse,
+      [`${prefix}--btn--flexbox`]: useFlexbox,
+      [`${prefix}--btn--icon-only`]: icon && children === undefined,
+      [`${prefix}--btn--${kind}`]: kind,
+      [`${prefix}--btn--${kind}-solid`]: btnSolid,
+      [`${prefix}--btn--animating`]: count,
+    });
+
+    const commonProps = {
+      tabIndex,
+      className: buttonClasses,
+    };
+
+    let buttonImage: React.ReactNode = null;
+
+    if (icon && React.isValidElement(icon)) {
+      buttonImage = <span className={`${prefix}--btn__icon`}>{icon}</span>;
+    } else if (icon) {
+      const Icon = icon as any;
+      buttonImage = (
+        <Icon
+          description={iconDescription}
+          className={`${prefix}--btn__icon`}
+        />
+      );
+    }
+
+    const endAnimation = () => {
+      setCount(false);
+    };
+
+    const onClickAnimation = (e) => {
+      if (onClick) {
+        onClick(e);
+      }
+      setCount(true);
+    };
+
+    if (other.href) {
+      const anchorProps = {
+        ...other,
+        href: other.href,
+      } as React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+      return (
+        <a
+          {...anchorProps}
+          {...commonProps}
+          role="button"
+          onClick={onClickAnimation}
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          id={id}
+        >
+          {iconReverse && buttonImage}
+          {children}
+          {!iconReverse && buttonImage}
+        </a>
+      );
+    }
+
+    const buttonProps = {
+      ...other,
+      disabled: disabled,
+    } as React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+    return (
+      <button
+        {...buttonProps}
+        {...commonProps}
+        disabled={disabled}
+        type={type}
+        onClick={onClickAnimation}
+        ref={ref as React.Ref<HTMLButtonElement>}
+        id={id}
+      >
+        {iconReverse && buttonImage}
+        {children}
+        {!iconReverse && buttonImage}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export default Button;

package/src/components/Button/Button.twig

@@ -0,0 +1 @@
+<a class="wfp--btn wfp--btn--{{ kind }} {{ small ? 'wfp--btn--sm' }}" href="{{ href }}">{{ children }}</a>