@canonical/react-components 1.6.0 → 1.7.0

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

@@ -0,0 +1,62 @@
+import type { ChangeEventHandler, HTMLProps, ReactNode } from "react";
+import type { PropsWithSpread } from "../../types";
+export declare const FILLED_COLOR = "#0066CC";
+export declare const EMPTY_COLOR = "#D9D9D9";
+export type Props = PropsWithSpread<{
+    /**
+     * Field caution message.
+     */
+    caution?: ReactNode;
+    /**
+     * Whether to disable the slider and input (if showInput is true).
+     */
+    disabled?: boolean;
+    /**
+     * Field error message.
+     */
+    error?: ReactNode;
+    /**
+     * Field help message.
+     */
+    help?: ReactNode;
+    /**
+     * Field id. Only passed to range input, not to number input.
+     */
+    id?: string;
+    /**
+     * Whether to disable only the input, but not the slider.
+     */
+    inputDisabled?: boolean;
+    /**
+     * Field label.
+     */
+    label?: ReactNode;
+    /**
+     * Maximum value of the slider.
+     */
+    max: number;
+    /**
+     * Minimum value of the slider.
+     */
+    min: number;
+    /**
+     * Change event handler.
+     */
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Whether the field is required for the form to submit.
+     */
+    required?: boolean;
+    /**
+     * Whether to show a number input with the numerical value next to the slider.
+     */
+    showInput?: boolean;
+}, HTMLProps<HTMLInputElement>>;
+/**
+ * This is the [React](https://reactjs.org/) component for the Vanilla [Slider](https://vanillaframework.io/docs/patterns/slider).
+ *
+ * Sliders should be used to let a user specify a numeric value between a defined
+minimum and maximum value, however the precise value is not especially important.
+ */
+export declare const Slider: ({ caution, disabled, error, help, id, inputDisabled, label, max, min, onChange, required, showInput, ...inputProps }: Props) => JSX.Element;
+export default Slider;

package/dist/esm/components/Slider/Slider.js

@@ -0,0 +1,83 @@
+var _excluded = ["caution", "disabled", "error", "help", "id", "inputDisabled", "label", "max", "min", "onChange", "required", "showInput"];
+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 React, { useId } from "react";
+import Field from "../Field";
+export var FILLED_COLOR = "#0066CC";
+export var EMPTY_COLOR = "#D9D9D9";
+/**
+ * This is the [React](https://reactjs.org/) component for the Vanilla [Slider](https://vanillaframework.io/docs/patterns/slider).
+ *
+ * Sliders should be used to let a user specify a numeric value between a defined
+minimum and maximum value, however the precise value is not especially important.
+ */
+export var Slider = _ref => {
+  var _navigator;
+  var {
+      caution,
+      disabled = false,
+      error,
+      help,
+      id,
+      inputDisabled = false,
+      label,
+      max,
+      min,
+      onChange,
+      required = false,
+      showInput = false
+    } = _ref,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var validationId = useId();
+  var helpId = useId();
+  var defaultSliderId = useId();
+  var sliderId = id || defaultSliderId;
+  var hasError = !!error;
+  var style = {};
+  if ((_navigator = navigator) !== null && _navigator !== void 0 && (_navigator = _navigator.userAgent) !== null && _navigator !== void 0 && _navigator.includes("AppleWebKit")) {
+    var _inputProps$value;
+    // Range inputs on Webkit browsers don't have a built-in "filled" portion,
+    // so instead it is handled here as a background.
+    var val = (_inputProps$value = inputProps.value) !== null && _inputProps$value !== void 0 ? _inputProps$value : inputProps.defaultValue;
+    var filledPercentage = "".concat((Number(val) - min) / (max - min) * 100, "%");
+    style = {
+      background: "linear-gradient(\n        to right,\n        ".concat(FILLED_COLOR, " 0%,\n        ").concat(FILLED_COLOR, " ").concat(filledPercentage, ",\n        ").concat(EMPTY_COLOR, " ").concat(filledPercentage, ",\n        ").concat(EMPTY_COLOR, " 100%\n      )")
+    };
+  }
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    error: error,
+    help: help,
+    forId: sliderId,
+    helpId: helpId,
+    label: label,
+    required: required,
+    validationId: validationId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-slider__wrapper"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    disabled: disabled,
+    id: sliderId,
+    max: max,
+    min: min,
+    onChange: onChange,
+    required: required,
+    style: style,
+    type: "range"
+  }, inputProps)), showInput && /*#__PURE__*/React.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    className: "p-slider__input",
+    disabled: disabled || inputDisabled,
+    max: max,
+    min: min,
+    onChange: onChange,
+    type: "number"
+  }, inputProps))));
+};
+export default Slider;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Slider from "./Slider";
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof Slider>;
+export declare const Default: Story;
+/**
+ * You can also optionally provide a numeric representation of the slider value.
+ */
+export declare const WithInput: Story;

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

@@ -0,0 +1,66 @@
+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); }
+import React from "react";
+import { useState } from "react";
+import Slider from "./Slider";
+var Template = args => {
+  var [selectedValue, setSelectedValue] = useState(50);
+  return /*#__PURE__*/React.createElement(Slider, _extends({}, args, {
+    onChange: e => setSelectedValue(Number(e.target.value)),
+    value: selectedValue
+  }));
+};
+var meta = {
+  component: Slider,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    caution: {
+      control: {
+        type: "text"
+      }
+    },
+    error: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+export default meta;
+export var Default = {
+  render: Template.bind({}),
+  name: "Default",
+  args: {
+    disabled: false,
+    label: "Volume",
+    max: 100,
+    min: 0,
+    showInput: false
+  }
+};
+
+/**
+ * You can also optionally provide a numeric representation of the slider value.
+ */
+export var WithInput = {
+  render: Template.bind({}),
+  name: "With input",
+  args: {
+    disabled: false,
+    inputDisabled: false,
+    label: "Volume",
+    max: 100,
+    min: 0,
+    showInput: true
+  }
+};

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { HTMLProps } from "react";
+import type { ClassName } from "../../types";
+export type Props = {
+    /**
+     * Optional class(es) to pass to the wrapping span element.
+     */
+    className?: ClassName;
+    /**
+     * Whether the spinner should have a light appearance.
+     */
+    isLight?: boolean;
+    /**
+     * Text to display next to the spinner.
+     */
+    text?: string;
+    /**
+     * What the role of the spinner should be.
+     */
+    role?: string;
+    /**
+     * The politeness setting of the spinner alert.
+     */
+    ariaLive?: "assertive" | "off" | "polite";
+} & HTMLProps<HTMLSpanElement>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
+ */
+declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => JSX.Element;
+export default Spinner;

package/dist/esm/components/Spinner/Spinner.js

@@ -0,0 +1,36 @@
+import _pt from "prop-types";
+var _excluded = ["className", "text", "isLight", "ariaLive", "role"];
+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 React from "react";
+import classNames from "classnames";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
+ */
+var Spinner = _ref => {
+  var {
+      className,
+      text,
+      isLight = false,
+      ariaLive = "polite",
+      role = "alert"
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: classNames(className, "p-text--default"),
+    role: role,
+    "aria-live": ariaLive
+  }), /*#__PURE__*/React.createElement("i", {
+    className: classNames("p-icon--spinner", "u-animation--spin", {
+      "is-light": isLight
+    })
+  }, text ? "" : "Loading"), text && /*#__PURE__*/React.createElement(React.Fragment, null, "\u2002", /*#__PURE__*/React.createElement("span", null, text)));
+};
+Spinner.propTypes = {
+  isLight: _pt.bool,
+  text: _pt.string,
+  role: _pt.string,
+  ariaLive: _pt.oneOf(["assertive", "off", "polite"])
+};
+export default Spinner;

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

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

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

@@ -0,0 +1,21 @@
+import Spinner from "./Spinner";
+var meta = {
+  component: Spinner,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default"
+};
+export var Text = {
+  name: "Text",
+  args: {
+    text: "Loading..."
+  }
+};
+export var Assertive = {
+  name: "Assertive",
+  args: {
+    ariaLive: "assertive"
+  }
+};

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+import type { HTMLProps, ReactNode } from "react";
+import { ClassName, PropsWithSpread, ValueOf } from "../../types";
+export declare const StatusLabelAppearance: {
+    readonly CAUTION: "caution";
+    readonly DEFAULT: "";
+    readonly INFORMATION: "information";
+    readonly NEGATIVE: "negative";
+    readonly POSITIVE: "positive";
+};
+/**
+ * The type of the StatusLabel props.
+ */
+export type Props = PropsWithSpread<{
+    /**
+     * The appearance of the label.
+     */
+    appearance?: ValueOf<typeof StatusLabelAppearance> | string;
+    /**
+     * The content of the label.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to pass to the wrapping element.
+     */
+    className?: ClassName;
+}, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
+ *
+ * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ */
+declare const StatusLabel: ({ appearance, children, className, ...labelProps }: Props) => JSX.Element;
+export default StatusLabel;

package/dist/esm/components/StatusLabel/StatusLabel.js

@@ -0,0 +1,36 @@
+var _excluded = ["appearance", "children", "className"];
+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 React from "react";
+import classNames from "classnames";
+export var StatusLabelAppearance = {
+  CAUTION: "caution",
+  DEFAULT: "",
+  INFORMATION: "information",
+  NEGATIVE: "negative",
+  POSITIVE: "positive"
+};
+
+/**
+ * The type of the StatusLabel props.
+ */
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
+ *
+ * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ */
+var StatusLabel = _ref => {
+  var {
+      appearance,
+      children,
+      className
+    } = _ref,
+    labelProps = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames(appearance ? "p-status-label--".concat(appearance) : "p-status-label", className);
+  return /*#__PURE__*/React.createElement("div", _extends({}, labelProps, {
+    className: classes
+  }), children);
+};
+export default StatusLabel;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import StatusLabel from "./StatusLabel";
+declare const meta: Meta<typeof StatusLabel>;
+export default meta;
+type Story = StoryObj<typeof StatusLabel>;
+export declare const Default: Story;
+export declare const Positive: Story;
+export declare const Caution: Story;
+export declare const Negative: Story;
+export declare const Information: Story;

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

@@ -0,0 +1,52 @@
+import React from "react";
+import StatusLabel, { StatusLabelAppearance } from "./StatusLabel";
+var meta = {
+  component: StatusLabel,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    },
+    appearance: {
+      control: {
+        options: StatusLabelAppearance,
+        type: "select"
+      }
+    }
+  },
+  args: {
+    children: "Label",
+    appearance: StatusLabelAppearance.POSITIVE
+  }
+};
+export default meta;
+export var Default = {
+  render: () => /*#__PURE__*/React.createElement(StatusLabel, null, "Default"),
+  name: "Default"
+};
+export var Positive = {
+  render: () => /*#__PURE__*/React.createElement(StatusLabel, {
+    appearance: "positive"
+  }, "Positive"),
+  name: "Positive"
+};
+export var Caution = {
+  render: () => /*#__PURE__*/React.createElement(StatusLabel, {
+    appearance: "caution"
+  }, "Caution"),
+  name: "Caution"
+};
+export var Negative = {
+  render: () => /*#__PURE__*/React.createElement(StatusLabel, {
+    appearance: "negative"
+  }, "Negative"),
+  name: "Negative"
+};
+export var Information = {
+  render: () => /*#__PURE__*/React.createElement(StatusLabel, {
+    appearance: "information"
+  }, "Information"),
+  name: "Information"
+};

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

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

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

@@ -0,0 +1,2 @@
+export { default, StatusLabelAppearance } from "./StatusLabel";
+export type { Props as StatusLabelProps } from "./StatusLabel";

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

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

package/dist/esm/components/Stepper/Step/Step.d.ts

@@ -0,0 +1,47 @@
+import { LinkProps } from "../../Link";
+import { ClassName } from "../../../types";
+import "./Step.scss";
+export type Props = {
+    /**
+     * Whether the step has a darkened progress line.
+     */
+    hasProgressLine: boolean;
+    /**
+     * Index of the step.
+     */
+    index: number;
+    /**
+     * Title of the step.
+     */
+    title: string;
+    /**
+     * Optional label for the step.
+     */
+    label?: string;
+    /**
+     * Optional props to configure the `Link` component.
+     */
+    linkProps?: LinkProps;
+    /**
+     * Whether the step is clickable. If set to false, the step is not clickable and the text is muted with a light-dark colour.
+     */
+    enabled: boolean;
+    /**
+     * Optional value to highlight the selected step.
+     */
+    selected?: boolean;
+    /**
+     * Icon to display in the step. Specify "number" if the index should be displayed.
+     */
+    iconName: string;
+    /**
+     * Optional class(es) to pass to the Icon component.
+     */
+    iconClassName?: ClassName;
+    /**
+     * Function that is called when the step is clicked.
+     */
+    handleClick: () => void;
+};
+declare const Step: ({ hasProgressLine, index, title, label, linkProps, enabled, selected, iconName, iconClassName, handleClick, ...props }: Props) => JSX.Element;
+export default Step;

package/dist/esm/components/Stepper/Step/Step.js

@@ -0,0 +1,61 @@
+import _pt from "prop-types";
+var _excluded = ["hasProgressLine", "index", "title", "label", "linkProps", "enabled", "selected", "iconName", "iconClassName", "handleClick"];
+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";
+import Icon from "../../Icon";
+import Link from "../../Link";
+import "./Step.scss";
+var Step = _ref => {
+  var {
+      hasProgressLine,
+      index,
+      title,
+      label,
+      linkProps,
+      enabled,
+      selected = false,
+      iconName,
+      iconClassName,
+      handleClick
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var stepStatusClass = enabled ? "step-enabled" : "step-disabled";
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames("step", {
+      "progress-line": hasProgressLine,
+      "step-selected": selected
+    })
+  }, props), iconName === "number" ? /*#__PURE__*/React.createElement("span", {
+    className: classNames("step-number", {
+      "step-number-disabled": !enabled
+    })
+  }, index) : /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    className: classNames("step-status-icon", iconClassName)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "step-content"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames(stepStatusClass),
+    onClick: handleClick
+  }, title), label && /*#__PURE__*/React.createElement("span", {
+    className: classNames("step-optional-content", "u-no-margin--bottom", {
+      "step-disabled": !enabled
+    })
+  }, label), linkProps && /*#__PURE__*/React.createElement(Link, _extends({
+    className: "p-text--small u-no-margin--bottom step-optional-content"
+  }, linkProps), linkProps.children)));
+};
+Step.propTypes = {
+  hasProgressLine: _pt.bool.isRequired,
+  index: _pt.number.isRequired,
+  title: _pt.string.isRequired,
+  label: _pt.string,
+  enabled: _pt.bool.isRequired,
+  selected: _pt.bool,
+  iconName: _pt.string.isRequired,
+  handleClick: _pt.func.isRequired
+};
+export default Step;