@postenbring/hedwig-react - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/button/index.d.ts

@@ -0,12 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style"> {
+    /**
+     * The height, font size and padding of the button
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Make the button use 100% width available.
+     * Using the "mobile" it only stretch to full width on smaller screens
+     */
+    fullWidth?: boolean | "mobile";
+    /**
+     * The background of the button.
+     */
+    fill?: "contained" | "outlined";
     children: React.ReactNode;
-    size?: "small" | "medium" | "large";
+    buttonRef?: React.ForwardedRef<HTMLButtonElement>;
 }
-declare function Button({ children, style, className, size, ...rest }: ButtonProps): JSX.Element;
-declare namespace Button {
+/**
+ * ## TODO
+ *
+ * - [ ] Handle links that looks like buttons
+ * - [ ] Revisit how to handle outline
+ * - [ ] Figure out outline-white
+ */
+declare function PrimaryButton(props: ButtonProps): react_jsx_runtime.JSX.Element;
+declare namespace PrimaryButton {
     var displayName: string;
 }
+declare function SecondaryButton(props: ButtonProps): react_jsx_runtime.JSX.Element;
+declare namespace SecondaryButton {
+    var displayName: string;
+}
 
-export { Button, ButtonProps };
+export { PrimaryButton, SecondaryButton };

dist/button/index.js

@@ -52,6 +52,8 @@ "use strict";
 __export(button_exports, {
-  Button: () => Button
+  PrimaryButton: () => PrimaryButton,
+  SecondaryButton: () => SecondaryButton
 });
 module.exports = __toCommonJS(button_exports);
-var import_tokens = require("@postenbring/hedwig-tokens/dist/web/tokens.css");
+var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_base = require("@postenbring/hedwig-css/dist/base.css");
 var import_button = require("@postenbring/hedwig-css/dist/button/button.css");
@@ -63,7 +65,7 @@
 // src/utils.ts
-function warnForStyleOverrides(className, styles) {
-  if (className) {
+function warnForStyleOverrides(props) {
+  if (props.className) {
     console.warn("Overriding styles are not premited");
   }
-  if (styles) {
+  if (props.styles) {
     console.warn("Overriding styles are not premited");
@@ -75,19 +77,29 @@ }
 var import_jsx_runtime = require("react/jsx-runtime");
-function Button(_a) {
+function BaseButton(_a) {
   var _b = _a, {
     children,
-    style,
-    className,
-    size = "medium"
+    variant,
+    size = "medium",
+    fullWidth = false,
+    fill = "contained",
+    buttonRef
   } = _b, rest = __objRest(_b, [
     "children",
-    "style",
-    "className",
-    "size"
+    "variant",
+    "size",
+    "fullWidth",
+    "fill",
+    "buttonRef"
   ]);
-  warnForStyleOverrides(style, className);
+  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)("hds-button", "hds-button--primary", `hds-button--${size}`),
+      className: (0, import_clsx.clsx)("hds-button", `hds-button--${size}`, {
+        [`hds-button--${variant}`]: fill === "contained",
+        [`hds-button--outline-${variant}`]: fill === "outlined",
+        "hds-button--full": fullWidth === true,
+        "hds-button--mobile-full": fullWidth === "mobile"
+      }),
+      ref: buttonRef,
       type: "button"
@@ -99,6 +111,15 @@ }, rest), {
 }
-Button.displayName = "Button";
+BaseButton.displayName = "BaseButton";
+function PrimaryButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
+}
+PrimaryButton.displayName = "PrimaryButton";
+function SecondaryButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "secondary" }));
+}
+SecondaryButton.displayName = "SecondaryButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Button
+  PrimaryButton,
+  SecondaryButton
 });

dist/index.d.ts

@@ -1,2 +0,27 @@
-export { Button, ButtonProps } from './button/index.js';
-import 'react';
+export { PrimaryButton, SecondaryButton } from './button/index.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "style"> {
+    /**
+     * The visual style of the link
+     */
+    variant?: "underline" | "solid" | "inverted" | "no-underline";
+    /**
+     * Font size of the link
+     */
+    size?: "small" | "medium" | "large";
+    children: React.ReactNode;
+    anchorRef?: React.ForwardedRef<HTMLAnchorElement>;
+}
+/**
+ * ## TODO
+ *
+ * - [ ] Handle button styling
+ */
+declare function Link({ children, variant, size, anchorRef, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
+declare namespace Link {
+    var displayName: string;
+}
+
+export { Link };

dist/index.js

@@ -52,3 +52,5 @@ "use strict";
 __export(src_exports, {
-  Button: () => Button
+  Link: () => Link,
+  PrimaryButton: () => PrimaryButton,
+  SecondaryButton: () => SecondaryButton
 });
@@ -58,3 +60,4 @@ module.exports = __toCommonJS(src_exports);
 // src/button/index.tsx
-var import_tokens = require("@postenbring/hedwig-tokens/dist/web/tokens.css");
+var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_base = require("@postenbring/hedwig-css/dist/base.css");
 var import_button = require("@postenbring/hedwig-css/dist/button/button.css");
@@ -66,7 +69,7 @@
 // src/utils.ts
-function warnForStyleOverrides(className, styles) {
-  if (className) {
+function warnForStyleOverrides(props) {
+  if (props.className) {
     console.warn("Overriding styles are not premited");
   }
-  if (styles) {
+  if (props.styles) {
     console.warn("Overriding styles are not premited");
@@ -78,19 +81,29 @@ }
 var import_jsx_runtime = require("react/jsx-runtime");
-function Button(_a) {
+function BaseButton(_a) {
   var _b = _a, {
     children,
-    style,
-    className,
-    size = "medium"
+    variant,
+    size = "medium",
+    fullWidth = false,
+    fill = "contained",
+    buttonRef
   } = _b, rest = __objRest(_b, [
     "children",
-    "style",
-    "className",
-    "size"
+    "variant",
+    "size",
+    "fullWidth",
+    "fill",
+    "buttonRef"
   ]);
-  warnForStyleOverrides(style, className);
+  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)("hds-button", "hds-button--primary", `hds-button--${size}`),
+      className: (0, import_clsx.clsx)("hds-button", `hds-button--${size}`, {
+        [`hds-button--${variant}`]: fill === "contained",
+        [`hds-button--outline-${variant}`]: fill === "outlined",
+        "hds-button--full": fullWidth === true,
+        "hds-button--mobile-full": fullWidth === "mobile"
+      }),
+      ref: buttonRef,
       type: "button"
@@ -102,6 +115,52 @@ }, rest), {
 }
-Button.displayName = "Button";
+BaseButton.displayName = "BaseButton";
+function PrimaryButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
+}
+PrimaryButton.displayName = "PrimaryButton";
+function SecondaryButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "secondary" }));
+}
+SecondaryButton.displayName = "SecondaryButton";
+
+// src/link/index.tsx
+var import_tokens2 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_base2 = require("@postenbring/hedwig-css/dist/base.css");
+var import_link = require("@postenbring/hedwig-css/dist/link/link.css");
+
+// src/link/link.tsx
+var import_clsx2 = require("clsx");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Link(_a) {
+  var _b = _a, {
+    children,
+    variant = "underline",
+    size = "medium",
+    anchorRef
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "variant",
+    "size",
+    "anchorRef"
+  ]);
+  warnForStyleOverrides(rest);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "a",
+    __spreadProps(__spreadValues({
+      className: (0, import_clsx2.clsx)("hds-link", {
+        [`hds-link--${variant}`]: variant !== "underline",
+        [`hds-link--${size}`]: size !== "medium"
+      }),
+      ref: anchorRef
+    }, rest), {
+      children
+    })
+  );
+}
+Link.displayName = "Link";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Button
+  Link,
+  PrimaryButton,
+  SecondaryButton
 });

package.json

 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "./dist/index.js",
@@ -5,0 +5,0 @@ "module": "./dist/index.mjs",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18526

increased by71.08%

Lines of code

484

increased by66.32%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes