@canonical/react-components 1.5.0 → 1.7.0

package/dist/esm/components/ArticlePagination/ArticlePagination.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLProps } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * Optional classes to add to the wrapping element.
+     */
+    className?: ClassName;
+    /**
+     * The URL for the next link.
+     */
+    nextURL?: string;
+    /**
+     * The label for the next link.
+     */
+    nextLabel?: string;
+    /**
+     * The URL for the previous link.
+     */
+    previousURL?: string;
+    /**
+     * The label for the previous link.
+     */
+    previousLabel?: string;
+}, HTMLProps<HTMLElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Article pagination](https://docs.vanillaframework.io/patterns/article-pagination/).
+ *
+ * The article pagination component should be used to navigate from one article to the next, or previous, in chronological order.
+ */
+declare const ArticlePagination: ({ className, nextURL, nextLabel, previousURL, previousLabel, ...props }: Props) => JSX.Element;
+export default ArticlePagination;

package/dist/esm/components/ArticlePagination/ArticlePagination.js

@@ -0,0 +1,39 @@
+var _excluded = ["className", "nextURL", "nextLabel", "previousURL", "previousLabel"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Article pagination](https://docs.vanillaframework.io/patterns/article-pagination/).
+ *
+ * The article pagination component should be used to navigate from one article to the next, or previous, in chronological order.
+ */
+var ArticlePagination = _ref => {
+  var {
+      className,
+      nextURL,
+      nextLabel,
+      previousURL,
+      previousLabel
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("footer", _extends({
+    className: classNames(className, "p-article-pagination")
+  }, props), previousURL && previousLabel && /*#__PURE__*/React.createElement("a", {
+    className: "p-article-pagination__link--previous",
+    href: previousURL
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "p-article-pagination__label"
+  }, "Previous"), /*#__PURE__*/React.createElement("span", {
+    className: "p-article-pagination__title"
+  }, previousLabel)), nextURL && nextLabel && /*#__PURE__*/React.createElement("a", {
+    className: "p-article-pagination__link--next",
+    href: nextURL
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "p-article-pagination__label"
+  }, "Next"), /*#__PURE__*/React.createElement("span", {
+    className: "p-article-pagination__title"
+  }, nextLabel)));
+};
+export default ArticlePagination;

package/dist/esm/components/ArticlePagination/ArticlePagination.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ArticlePagination from "./ArticlePagination";
+declare const meta: Meta<typeof ArticlePagination>;
+export default meta;
+type Story = StoryObj<typeof ArticlePagination>;
+export declare const Default: Story;

package/dist/esm/components/ArticlePagination/ArticlePagination.stories.js

@@ -0,0 +1,15 @@
+import ArticlePagination from "./ArticlePagination";
+var meta = {
+  component: ArticlePagination,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    nextLabel: "Consectetur adipisicing elit",
+    nextURL: "#next",
+    previousLabel: "Lorem ipsum dolor sit amet",
+    previousURL: "#previous"
+  }
+};

package/dist/esm/components/ArticlePagination/ArticlePagination.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/ArticlePagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ArticlePagination";
+export type { Props as ArticlePaginationProps } from "./ArticlePagination";

package/dist/esm/components/ArticlePagination/index.js

@@ -0,0 +1 @@
+export { default } from "./ArticlePagination";

package/dist/esm/components/Badge/Badge.d.ts

@@ -0,0 +1,34 @@
+import { HTMLProps } from "react";
+import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
+export declare const BadgeType: {
+    readonly ROUNDED_LARGE_NUMBER: "ROUNDED_LARGE_NUMBER";
+    readonly UNDEFINED_LARGE_NUMBER: "UNDEFINED_LARGE_NUMBER";
+};
+/**
+ * The props for the Badge component.
+ */
+export type Props = PropsWithSpread<{
+    /**
+     * Numeric value to be displayed.
+     */
+    value: number;
+    /**
+     * The type of the badge component.
+     */
+    badgeType?: ValueOf<typeof BadgeType>;
+    /**
+     * The appearance of the badge.
+     */
+    isNegative?: boolean;
+    /**
+     * Optional class(es) to give to the badge.
+     */
+    className?: ClassName;
+}, HTMLProps<HTMLSpanElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Badge](https://vanillaframework.io/docs/patterns/badge).
+ *
+ * It can be used to display a numeric values.
+ */
+declare const Badge: ({ value, badgeType, className, isNegative, ...spanProps }: Props) => JSX.Element;
+export default Badge;

package/dist/esm/components/Badge/Badge.js

@@ -0,0 +1,64 @@
+var _excluded = ["value", "badgeType", "className", "isNegative"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+export var BadgeType = {
+  ROUNDED_LARGE_NUMBER: "ROUNDED_LARGE_NUMBER",
+  UNDEFINED_LARGE_NUMBER: "UNDEFINED_LARGE_NUMBER"
+};
+
+/**
+ * The props for the Badge component.
+ */
+
+var MAX_VAL = 999;
+var units = ["", "k", "M", "B", "T"];
+var round = function round(value) {
+  var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (value < 1000) {
+    var truncatedValue = Number(value.toString().slice(0, 3));
+    return "".concat(truncatedValue).concat(units[unit]);
+  }
+  if (unit >= units.length - 1) {
+    return "999T";
+  }
+  var newValue = value / 1000;
+  return round(newValue, unit + 1);
+};
+var clamp = value => {
+  if (value > MAX_VAL) {
+    return "".concat(MAX_VAL, "+");
+  }
+  return value;
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Badge](https://vanillaframework.io/docs/patterns/badge).
+ *
+ * It can be used to display a numeric values.
+ */
+var Badge = _ref => {
+  var {
+      value,
+      badgeType = BadgeType.UNDEFINED_LARGE_NUMBER,
+      className,
+      isNegative
+    } = _ref,
+    spanProps = _objectWithoutProperties(_ref, _excluded);
+  var badgeClassName = classNames({
+    ["p-badge--negative"]: !!isNegative,
+    "p-badge": !isNegative
+  }, className);
+  var safeValue = Math.round(value);
+  if (value < 0) {
+    console.error("The value used in the badge should be positive");
+    safeValue = 0;
+  }
+  var formattedValue = badgeType === BadgeType.ROUNDED_LARGE_NUMBER ? round(safeValue) : clamp(safeValue);
+  return /*#__PURE__*/React.createElement("span", _extends({}, spanProps, {
+    className: badgeClassName
+  }), formattedValue);
+};
+export default Badge;

package/dist/esm/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Badge from "./Badge";
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const ColourCoding: Story;
+/**
+ * When the amount of items is only relevant for small values, this variant should be used. When the value grows further than 999, the badge should show "999+".
+ */
+export declare const UndefinedLargeNumber: Story;
+/**
+ * When the value of the badge represents a type of information where differences between large amounts of items are relevant, it should include a decimal unit prefix and round the value.
+ */
+export declare const RoundedLargeNumber: Story;

package/dist/esm/components/Badge/Badge.stories.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Badge, { BadgeType } from "./Badge";
+var meta = {
+  component: Badge,
+  tags: ["autodocs"],
+  argTypes: {
+    badgeType: {
+      control: {
+        options: BadgeType,
+        type: "select"
+      }
+    }
+  },
+  args: {
+    badgeType: BadgeType.UNDEFINED_LARGE_NUMBER
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    value: 9
+  }
+};
+export var ColourCoding = {
+  render: () => /*#__PURE__*/React.createElement(Badge, {
+    value: 9,
+    isNegative: true
+  }),
+  name: "Colour Coding"
+};
+
+/**
+ * When the amount of items is only relevant for small values, this variant should be used. When the value grows further than 999, the badge should show "999+".
+ */
+export var UndefinedLargeNumber = {
+  render: () => /*#__PURE__*/React.createElement(Badge, {
+    value: 1000,
+    badgeType: BadgeType.UNDEFINED_LARGE_NUMBER
+  }),
+  name: "Undefined Large Number"
+};
+
+/**
+ * When the value of the badge represents a type of information where differences between large amounts of items are relevant, it should include a decimal unit prefix and round the value.
+ */
+export var RoundedLargeNumber = {
+  render: () => /*#__PURE__*/React.createElement(Badge, {
+    value: 1234,
+    badgeType: BadgeType.ROUNDED_LARGE_NUMBER
+  }),
+  name: "Rounded Large Number"
+};

package/dist/esm/components/Badge/Badge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Badge";
+export type { Props as BadgeProps } from "./Badge";

package/dist/esm/components/Badge/index.js

@@ -0,0 +1 @@
+export { default } from "./Badge";

package/dist/esm/components/Button/Button.d.ts

@@ -0,0 +1,64 @@
+import type { ButtonHTMLAttributes, ComponentType, ElementType, MouseEventHandler, ReactNode } from "react";
+import type { ClassName, ValueOf } from "../../types";
+export declare const ButtonAppearance: {
+    readonly BASE: "base";
+    readonly BRAND: "brand";
+    readonly DEFAULT: "";
+    readonly LINK: "link";
+    readonly NEGATIVE: "negative";
+    readonly POSITIVE: "positive";
+};
+/**
+ * The type of the Button props.
+ * @template P - The type of the props if providing a component to `element`
+ */
+export type Props<P = null> = {
+    /**
+     * The appearance of the button.
+     */
+    appearance?: ValueOf<typeof ButtonAppearance> | string;
+    /**
+     * The content of the button.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to pass to the button element.
+     */
+    className?: ClassName;
+    /**
+     * Whether the button should have dense padding.
+     */
+    dense?: boolean;
+    /**
+     * Whether the button should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Optional element or component to use instead of `button`.
+     */
+    element?: ElementType | ComponentType<P>;
+    /**
+     * Whether the button has an icon in the content.
+     */
+    hasIcon?: boolean;
+    /**
+     * Whether the button should display inline.
+     */
+    inline?: boolean;
+    /**
+     * Function for handling button click event.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Whether the button should be small.
+     */
+    small?: boolean;
+} & (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> | P);
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Button](https://docs.vanillaframework.io/patterns/buttons/).
+ *
+ * Buttons are clickable elements used to perform an action, they can be used for buttons and link elements.
+ * @template P - The type of the props if providing a component to `element`
+ */
+declare const Button: <P>({ appearance, children, className, dense, disabled, element: Component, hasIcon, inline, onClick, small, ...buttonProps }: Props<P>) => JSX.Element;
+export default Button;

package/dist/esm/components/Button/Button.js

@@ -0,0 +1,55 @@
+var _excluded = ["appearance", "children", "className", "dense", "disabled", "element", "hasIcon", "inline", "onClick", "small"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+export var ButtonAppearance = {
+  BASE: "base",
+  BRAND: "brand",
+  DEFAULT: "",
+  LINK: "link",
+  NEGATIVE: "negative",
+  POSITIVE: "positive"
+};
+
+/**
+ * The type of the Button props.
+ * @template P - The type of the props if providing a component to `element`
+ */
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Button](https://docs.vanillaframework.io/patterns/buttons/).
+ *
+ * Buttons are clickable elements used to perform an action, they can be used for buttons and link elements.
+ * @template P - The type of the props if providing a component to `element`
+ */
+var Button = _ref => {
+  var {
+      appearance,
+      children,
+      className,
+      dense,
+      disabled,
+      element: Component = "button",
+      hasIcon,
+      inline,
+      onClick,
+      small
+    } = _ref,
+    buttonProps = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames(appearance ? "p-button--".concat(appearance) : "p-button", {
+    "has-icon": hasIcon,
+    "is-dense": dense,
+    "is-disabled": disabled,
+    "is-inline": inline,
+    "is-small": small
+  }, className);
+  var onClickDisabled = e => e.preventDefault();
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classes,
+    onClick: disabled ? onClickDisabled : onClick,
+    "aria-disabled": disabled || undefined
+  }, buttonProps), children);
+};
+export default Button;

package/dist/esm/components/Button/Button.stories.d.ts

@@ -0,0 +1,32 @@
+import { HTMLProps } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Button from "./Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story<P = null> = StoryObj<typeof Button<P>>;
+export declare const Default: Story;
+export declare const DefaultDisabled: Story;
+export declare const Base: Story;
+export declare const BaseDisabled: Story;
+export declare const Link: {
+    name: string;
+    args: {
+        children: string;
+        appearance: string;
+        element: string;
+        href: string;
+    };
+};
+export declare const LinkDisabled: Story<HTMLProps<HTMLAnchorElement>>;
+export declare const Positive: Story;
+export declare const PositiveDisabled: Story;
+export declare const Negative: Story;
+export declare const NegativeDisabled: Story;
+export declare const Brand: Story;
+export declare const BrandDisabled: Story;
+export declare const Inline: Story;
+export declare const Dense: Story;
+export declare const Small: Story;
+export declare const Icon: Story;
+export declare const IconText: Story;
+export declare const IconWithTooltip: Story;

package/dist/esm/components/Button/Button.stories.js

@@ -0,0 +1,171 @@
+import React from "react";
+import Tooltip from "../Tooltip";
+import Button, { ButtonAppearance } from "./Button";
+var meta = {
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    },
+    appearance: {
+      control: {
+        options: ButtonAppearance,
+        type: "select"
+      }
+    }
+  },
+  args: {
+    children: "Click me!",
+    appearance: ButtonAppearance.DEFAULT
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    children: "Button"
+  }
+};
+export var DefaultDisabled = {
+  name: "Default disabled",
+  args: {
+    children: "Button",
+    disabled: true
+  }
+};
+export var Base = {
+  name: "Base",
+  args: {
+    children: "Base button",
+    appearance: "base"
+  }
+};
+export var BaseDisabled = {
+  name: "Base disabled",
+  args: {
+    children: "Base button disabled",
+    appearance: "base",
+    disabled: true
+  }
+};
+export var Link = {
+  name: "Link",
+  args: {
+    children: "Link button",
+    appearance: "base",
+    element: "a",
+    href: "#test"
+  }
+};
+export var LinkDisabled = {
+  name: "Link disabled",
+  args: {
+    children: "Link button disabled",
+    appearance: "base",
+    element: "a",
+    href: "#test",
+    disabled: true
+  }
+};
+export var Positive = {
+  name: "Positive",
+  args: {
+    children: "Positive button",
+    appearance: "positive"
+  }
+};
+export var PositiveDisabled = {
+  name: "Positive disabled",
+  args: {
+    children: "Positive button disabled",
+    appearance: "positive",
+    disabled: true
+  }
+};
+export var Negative = {
+  name: "Negative",
+  args: {
+    children: "Negative button",
+    appearance: "negative"
+  }
+};
+export var NegativeDisabled = {
+  name: "Negative disabled",
+  args: {
+    children: "Negative button disabled",
+    appearance: "negative",
+    disabled: true
+  }
+};
+export var Brand = {
+  name: "Brand",
+  args: {
+    children: "Brand button",
+    appearance: "brand"
+  }
+};
+export var BrandDisabled = {
+  name: "Brand disabled",
+  args: {
+    children: "Brand button disabled",
+    appearance: "brand",
+    disabled: true
+  }
+};
+export var Inline = {
+  render: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Everything you need to get started with Vanilla."), /*#__PURE__*/React.createElement(Button, {
+    appearance: "neutral",
+    inline: true
+  }, "Inline button")),
+  name: "Inline"
+};
+export var Dense = {
+  render: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Everything you need to get started with Vanilla."), /*#__PURE__*/React.createElement(Button, {
+    dense: true
+  }, "Dense button")),
+  name: "Dense"
+};
+export var Small = {
+  render: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    small: true
+  }, "Small button"), /*#__PURE__*/React.createElement(Button, {
+    small: true,
+    dense: true
+  }, "Small dense button")),
+  name: "Small"
+};
+export var Icon = {
+  name: "Icon",
+  args: {
+    children: /*#__PURE__*/React.createElement("i", {
+      className: "p-icon--plus"
+    }),
+    hasIcon: true
+  }
+};
+export var IconText = {
+  name: "Icon & text",
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
+      className: "p-icon--plus"
+    }), " ", /*#__PURE__*/React.createElement("span", null, "Button with icon & text")),
+    hasIcon: true
+  }
+};
+export var IconWithTooltip = {
+  name: "Disabled with tooltip",
+  args: {
+    children: "Disabled button with a tooltip",
+    disabled: true
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingTop: "3rem"
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    message: "This button is disabled"
+  }, /*#__PURE__*/React.createElement(Button, args)))
+};

package/dist/esm/components/Button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default, ButtonAppearance } from "./Button";
+export type { Props as ButtonProps } from "./Button";

package/dist/esm/components/Button/index.js

@@ -0,0 +1 @@
+export { default, ButtonAppearance } from "./Button";

package/dist/esm/components/Card/Card.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLProps, ReactNode } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the card.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to pass to the wrapping div element.
+     */
+    className?: ClassName;
+    /**
+     * Whether the card should have highlighted styling.
+     */
+    highlighted?: boolean;
+    /**
+     * Whether the card should have overlay styling.
+     */
+    overlay?: boolean;
+    /**
+     * The path to a thumbnail image.
+     */
+    thumbnail?: string;
+    /**
+     * The title of the card.
+     */
+    title?: ReactNode;
+}, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Card](https://docs.vanillaframework.io/patterns/card/).
+ *
+ * There are four card styles available to use in Vanilla: default, header, highlighted and overlay. Our card component will expand to fill the full width of its parent container.
+ */
+declare const Card: ({ children, className, highlighted, overlay, thumbnail, title, ...props }: Props) => JSX.Element;
+export default Card;