@edux-design/buttons 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @edux-design/buttons
 
+## 0.1.1
+
+### Patch Changes
+
+- Minor token updates
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -60,6 +60,8 @@ type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  *
  * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
  *   children?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
  *   size?: "small"|"medium"|"large",
  *   isSecondary?: boolean,
  *   isDanger?: boolean,
@@ -94,6 +96,8 @@ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAtt
  */
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
     size?: "small" | "medium" | "large";
     isSecondary?: boolean;
     isDanger?: boolean;

package/dist/index.d.ts

@@ -60,6 +60,8 @@ type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  *
  * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
  *   children?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
  *   size?: "small"|"medium"|"large",
  *   isSecondary?: boolean,
  *   isDanger?: boolean,
@@ -94,6 +96,8 @@ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAtt
  */
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
     size?: "small" | "medium" | "large";
     isSecondary?: boolean;
     isDanger?: boolean;

package/dist/index.js

@@ -102,6 +102,8 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var Button = (0, import_react2.forwardRef)(
   ({
     children,
+    startIcon,
+    endIcon,
     size = "medium",
     isSecondary,
     isDanger,
@@ -112,19 +114,27 @@ var Button = (0, import_react2.forwardRef)(
     ...props
   }, ref) => {
     let variant = "primary";
-    if (isBare) variant = "bare";
-    if (isSecondary) variant = "secondary";
-    if (isDanger) variant = "danger";
-    if (disabled) variant = "disabled";
+    if (disabled) {
+      variant = "disabled";
+    } else if (isDanger && isBare) {
+      variant = "dangerBare";
+    } else if (isDanger) {
+      variant = "danger";
+    } else if (isSecondary) {
+      variant = "secondary";
+    } else if (isBare) {
+      variant = "bare";
+    }
     if (process.env.NODE_ENV !== "production") {
       const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
-      if (count > 1) {
+      const hasAllowedCombo = isDanger && isBare && count === 2;
+      if (count > 1 && !hasAllowedCombo) {
         console.warn(
           "[Button]: Multiple variant props passed. Using the highest priority only."
         );
       }
     }
-    const defaults = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
+    const defaults = "flex justify-center items-center gap-8 focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
     const fonts = "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
     const sizes = {
       small: "h-[36px] py-8 px-16 rounded-lg text-sm",
@@ -136,11 +146,12 @@ var Button = (0, import_react2.forwardRef)(
       primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus  hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
       secondary: "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
+      dangerBare: "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
       danger: "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
       disabled: "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline"
     };
     const STYLES = (0, import_utils2.cx)(defaults, sizes[size], width, fonts, variants[variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "button",
       {
         role: "button",
@@ -150,7 +161,11 @@ var Button = (0, import_react2.forwardRef)(
         className: STYLES,
         ref,
         ...props,
-        children
+        children: [
+          startIcon,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children }) : null,
+          endIcon
+        ]
       }
     );
   }

package/dist/index.mjs

@@ -59,10 +59,12 @@ var IconButton = forwardRef(
 // src/elements/Button.jsx
 import React2, { forwardRef as forwardRef2 } from "react";
 import { cx as cx2 } from "@edux-design/utils";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Button = forwardRef2(
   ({
     children,
+    startIcon,
+    endIcon,
     size = "medium",
     isSecondary,
     isDanger,
@@ -73,19 +75,27 @@ var Button = forwardRef2(
     ...props
   }, ref) => {
     let variant = "primary";
-    if (isBare) variant = "bare";
-    if (isSecondary) variant = "secondary";
-    if (isDanger) variant = "danger";
-    if (disabled) variant = "disabled";
+    if (disabled) {
+      variant = "disabled";
+    } else if (isDanger && isBare) {
+      variant = "dangerBare";
+    } else if (isDanger) {
+      variant = "danger";
+    } else if (isSecondary) {
+      variant = "secondary";
+    } else if (isBare) {
+      variant = "bare";
+    }
     if (process.env.NODE_ENV !== "production") {
       const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
-      if (count > 1) {
+      const hasAllowedCombo = isDanger && isBare && count === 2;
+      if (count > 1 && !hasAllowedCombo) {
         console.warn(
           "[Button]: Multiple variant props passed. Using the highest priority only."
         );
       }
     }
-    const defaults = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
+    const defaults = "flex justify-center items-center gap-8 focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
     const fonts = "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
     const sizes = {
       small: "h-[36px] py-8 px-16 rounded-lg text-sm",
@@ -97,11 +107,12 @@ var Button = forwardRef2(
       primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus  hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
       secondary: "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
+      dangerBare: "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
       danger: "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
       disabled: "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline"
     };
     const STYLES = cx2(defaults, sizes[size], width, fonts, variants[variant]);
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
         role: "button",
@@ -111,7 +122,11 @@ var Button = forwardRef2(
         className: STYLES,
         ref,
         ...props,
-        children
+        children: [
+          startIcon,
+          children ? /* @__PURE__ */ jsx2("span", { children }) : null,
+          endIcon
+        ]
       }
     );
   }
@@ -128,7 +143,7 @@ var MenuButtonContext = createContext();
 import { cx as cx3 } from "@edux-design/utils";
 
 // ../icons/dist/index.mjs
-import { jsxs, jsx as jsx3 } from "react/jsx-runtime";
+import { jsxs as jsxs2, jsx as jsx3 } from "react/jsx-runtime";
 var SvgChevron = (props) => /* @__PURE__ */ jsx3(
   "svg",
   {
@@ -152,7 +167,7 @@ var SvgChevron = (props) => /* @__PURE__ */ jsx3(
 var Chevron_default = SvgChevron;
 
 // src/elements/MenuButton.jsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function MenuButton({ children, size }) {
   const SPLIT_BUTTON_STYLES = cx3(
     "w-[36px] border-l-[1px] border-l-black flex flex-row justify-center items-center",
@@ -161,7 +176,7 @@ function MenuButton({ children, size }) {
       "h-[40px] py-2": size === "medium" || size === void 0
     }
   );
-  return /* @__PURE__ */ jsxs2(MenuButtonContext.Provider, { value: true, children: [
+  return /* @__PURE__ */ jsxs3(MenuButtonContext.Provider, { value: true, children: [
     /* @__PURE__ */ jsx4("div", { className: SPLIT_BUTTON_STYLES, children }),
     /* @__PURE__ */ jsx4(Chevron_default, {})
   ] });
@@ -178,7 +193,7 @@ import React5, {
   useState
 } from "react";
 import { cx as cx4, filterChildrenByDisplayName } from "@edux-design/utils";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var SIZE_STYLES = {
   small: {
     button: "text-xs px-12 py-6 rounded-md "
@@ -371,7 +386,7 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
       ref: setContainerRef,
       role: "radiogroup",
       className: rootClasses,
-      children: /* @__PURE__ */ jsxs3("div", { className: trackClasses, children: [
+      children: /* @__PURE__ */ jsxs4("div", { className: trackClasses, children: [
         /* @__PURE__ */ jsx5(
           "span",
           {
@@ -434,7 +449,7 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
           const hasStartAdornment = option.startAdornment !== void 0 && option.startAdornment !== null;
           const endAdornment = option.endAdornment ?? option.endIcon;
           const hasEndAdornment = endAdornment !== void 0 && endAdornment !== null;
-          return /* @__PURE__ */ jsxs3(
+          return /* @__PURE__ */ jsxs4(
             "button",
             {
               ref: registerButtonRef(option.value),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/buttons",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "sideEffects": [
     "**/*.css"

package/src/demo/Button.stories.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button, IconButton } from "./../index";
-import { Close } from "@edux-design/icons";
+import { Close, External, Warning } from "@edux-design/icons";
 
 export default {
   title: "Components/Button",
@@ -15,6 +15,8 @@ export default {
     isBare: { control: "boolean" },
     isStretched: { control: "boolean" },
     disabled: { control: "boolean" },
+    startIcon: { control: false },
+    endIcon: { control: false },
     children: { control: "text" },
   },
 };
@@ -48,6 +50,13 @@ Bare.args = {
   isBare: true,
 };
 
+export const DangerBare = Template.bind({});
+DangerBare.args = {
+  children: "Log out",
+  isBare: true,
+  isDanger: true,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   children: "Disabled",
@@ -82,3 +91,13 @@ export const Default = () => (
     <IconButton icon={<Close />} disabled aria-label="Disabled" />
   </div>
 );
+
+export const WithIcons = () => (
+  <div className="flex gap-4 items-center">
+    <Button startIcon={<Warning />}>Start icon</Button>
+    <Button endIcon={<External />}>End icon</Button>
+    <Button isDanger isBare endIcon={<External />}>
+      Log out
+    </Button>
+  </div>
+);

package/src/elements/Button.jsx

@@ -9,6 +9,8 @@ import { cx } from "@edux-design/utils";
  *
  * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
  *   children?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
  *   size?: "small"|"medium"|"large",
  *   isSecondary?: boolean,
  *   isDanger?: boolean,
@@ -39,6 +41,8 @@ export const Button = forwardRef(
   (
     {
       children,
+      startIcon,
+      endIcon,
       size = "medium",
       isSecondary,
       isDanger,
@@ -51,15 +55,23 @@ export const Button = forwardRef(
     ref
   ) => {
     let variant = "primary";
-    if (isBare) variant = "bare";
-    if (isSecondary) variant = "secondary";
-    if (isDanger) variant = "danger";
-    if (disabled) variant = "disabled";
+    if (disabled) {
+      variant = "disabled";
+    } else if (isDanger && isBare) {
+      variant = "dangerBare";
+    } else if (isDanger) {
+      variant = "danger";
+    } else if (isSecondary) {
+      variant = "secondary";
+    } else if (isBare) {
+      variant = "bare";
+    }
 
     // handle conflicting props - the last bool wins
     if (process.env.NODE_ENV !== "production") {
       const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
-      if (count > 1) {
+      const hasAllowedCombo = isDanger && isBare && count === 2;
+      if (count > 1 && !hasAllowedCombo) {
         console.warn(
           "[Button]: Multiple variant props passed. Using the highest priority only."
         );
@@ -67,7 +79,7 @@ export const Button = forwardRef(
     }
 
     const defaults =
-      "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
+      "flex justify-center items-center gap-8 focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
 
     const fonts =
       "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
@@ -86,6 +98,8 @@ export const Button = forwardRef(
       secondary:
         "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
+      dangerBare:
+        "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
       danger:
         "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
       disabled:
@@ -104,7 +118,9 @@ export const Button = forwardRef(
         ref={ref}
         {...props}
       >
-        {children}
+        {startIcon}
+        {children ? <span>{children}</span> : null}
+        {endIcon}
       </button>
     );
   }

package/src/elements/Button.test.jsx

@@ -52,6 +52,18 @@ describe("Button", () => {
     expect(screen.getByRole("button").className).toMatch(/bg-bg-danger-base/);
   });
 
+  it("applies danger bare variant when isDanger and isBare", () => {
+    render(
+      <Button isDanger isBare>
+        Danger Bare
+      </Button>
+    );
+    const btn = screen.getByRole("button");
+    expect(btn.className).toMatch(/text-fg-danger-emphasis/);
+    expect(btn.className).toMatch(/bg-bg-base/);
+    expect(btn.className).not.toMatch(/bg-bg-danger-base/);
+  });
+
   it("applies disabled variant when disabled=true", () => {
     render(<Button disabled>Disabled</Button>);
     const btn = screen.getByRole("button");
@@ -76,4 +88,33 @@ describe("Button", () => {
 
     warnSpy.mockRestore();
   });
+
+  it("renders start and end icons when provided", () => {
+    render(
+      <Button
+        startIcon={<span data-testid="start-icon">S</span>}
+        endIcon={<span data-testid="end-icon">E</span>}
+      >
+        With icons
+      </Button>
+    );
+
+    expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+  });
+
+  it("does not warn for the danger bare combination", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.NODE_ENV = "development";
+
+    render(
+      <Button isDanger isBare>
+        Allowed
+      </Button>
+    );
+
+    expect(warnSpy).not.toHaveBeenCalled();
+
+    warnSpy.mockRestore();
+  });
 });