@canonical/react-components 1.6.0 → 1.7.0

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

@@ -0,0 +1,113 @@
+@import "vanilla-framework";
+
+.step-number {
+  border: 0.08rem solid black;
+  border-radius: 1rem;
+  height: 1.4rem;
+  line-height: 1.3;
+  margin-left: $sph--small;
+  margin-right: 0.1rem;
+  margin-top: 0.1rem;
+  text-align: center;
+  width: 1.4rem;
+}
+
+.step-number-disabled {
+  border: 0.08rem solid #757575;
+  color: #757575;
+}
+
+.step-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin-left: $sph--small;
+}
+
+.step-enabled:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.step-disabled {
+  color: #757575;
+  pointer-events: none;
+}
+
+.step-status-icon {
+  height: 1.6rem;
+  margin-left: 0.4rem;
+  width: 1.6rem;
+}
+
+.step-selected {
+  background-color: var(--vf-color-background-alt);
+}
+
+.step-optional-content {
+  font-size: 12px;
+  max-width: 10rem;
+}
+
+.stepper-horizontal {
+  display: flex;
+
+  .p-inline-list__item {
+    margin: 0;
+  }
+
+  .step {
+    border-top: 0.2rem solid var(--vf-color-border-default);
+    display: flex;
+    height: 100%;
+    padding: 0.4rem $spv--medium;
+    width: fit-content;
+  }
+
+  .step-status-icon {
+    margin-left: 0;
+  }
+
+  .step-number {
+    margin-left: 0;
+  }
+
+  .step-content {
+    max-width: 10rem;
+  }
+
+  .progress-line {
+    border-top: 0.2rem solid black;
+  }
+
+  :first-child .step {
+    padding-left: 0;
+  }
+}
+
+.stepper-vertical {
+  .p-list__item {
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+
+  .step {
+    border-left: 0.2rem solid var(--vf-color-border-default);
+    display: flex;
+    padding: $spv--medium 0;
+    padding-right: 0.5rem;
+    width: fit-content;
+  }
+
+  .progress-line {
+    border-left: 0.2rem solid black;
+  }
+
+  :first-child .step {
+    padding-top: 0;
+  }
+
+  :last-child .step {
+    padding-bottom: 0;
+  }
+}

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

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

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

@@ -0,0 +1,26 @@
+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 Step from "./Step";
+import Stepper from "../Stepper";
+var meta = {
+  component: Step,
+  render: args => /*#__PURE__*/React.createElement(Stepper, {
+    variant: "horizontal",
+    steps: [/*#__PURE__*/React.createElement(Step, _extends({
+      key: "step"
+    }, args))]
+  }),
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    title: "Step 1",
+    index: 1,
+    enabled: false,
+    hasProgressLine: false,
+    iconName: "number",
+    handleClick: () => {}
+  }
+};

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { StepProps } from "./Step";
+export type Props = {
+    /**
+     * Optional value that defines the orientation of the stepper. Can either be "horizontal" or "vertical". If not specified, it defaults to "vertical".
+     */
+    variant?: "horizontal" | "vertical";
+    /**
+     * A list of steps.
+     */
+    steps: React.ReactElement<StepProps>[];
+};
+/**
+ * This is a stepper component that is used to guide users through a series of sequential steps, providing a clear start and end point. It helps users understand their current position in the process and anticipate upcoming actions. The stepper component should accept a list of Step components for the steps.
+ */
+declare const Stepper: ({ variant, steps }: Props) => JSX.Element;
+export default Stepper;

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

@@ -0,0 +1,27 @@
+import _pt from "prop-types";
+import React from "react";
+import List from "../List";
+import classNames from "classnames";
+/**
+ * This is a stepper component that is used to guide users through a series of sequential steps, providing a clear start and end point. It helps users understand their current position in the process and anticipate upcoming actions. The stepper component should accept a list of Step components for the steps.
+ */
+
+var Stepper = _ref => {
+  var {
+    variant = "vertical",
+    steps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(List, {
+    items: steps,
+    inline: variant === "horizontal",
+    className: classNames({
+      "stepper-horizontal": variant === "horizontal",
+      "stepper-vertical": variant === "vertical"
+    })
+  });
+};
+Stepper.propTypes = {
+  variant: _pt.oneOf(["horizontal", "vertical"]),
+  steps: _pt.arrayOf(_pt.element).isRequired
+};
+export default Stepper;

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Stepper from "./Stepper";
+declare const meta: Meta<typeof Stepper>;
+export default meta;
+type Story = StoryObj<typeof Stepper>;
+export declare const Default: Story;
+export declare const HorizontalStepper: Story;
+export declare const VerticalOptional: Story;
+export declare const HorizontalOptional: Story;
+export declare const VerticalSelected: Story;
+export declare const HorizontalSelected: Story;

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

@@ -0,0 +1,282 @@
+import React from "react";
+import Stepper from "./Stepper";
+import Step from "./Step";
+var meta = {
+  component: Stepper,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    variant: "vertical",
+    steps: [/*#__PURE__*/React.createElement(Step, {
+      key: "Default Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Default Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "spinner",
+      iconClassName: "u-animation--spin",
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Default Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: false,
+      hasProgressLine: false,
+      iconName: "number",
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Default Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      iconName: "number",
+      handleClick: () => {}
+    })]
+  }
+};
+export var HorizontalStepper = {
+  name: "Horizontal Stepper",
+  render: () => /*#__PURE__*/React.createElement(Stepper, {
+    variant: "horizontal",
+    steps: [/*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: false,
+      hasProgressLine: true,
+      iconName: "success",
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: false,
+      hasProgressLine: true,
+      iconName: "error",
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "spinner",
+      iconClassName: "u-animation--spin",
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      iconName: "number",
+      handleClick: () => {}
+    })]
+  })
+};
+export var VerticalOptional = {
+  name: "Vertical variant: Optional labels and links",
+  render: () => /*#__PURE__*/React.createElement(Stepper, {
+    steps: [/*#__PURE__*/React.createElement(Step, {
+      key: "Vertical optional Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      label: "Optional label",
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Vertical optional Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      handleClick: () => {},
+      label: "Optional label"
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Vertical optional Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "number",
+      label: "Optional label",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Vertical optional Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      linkProps: {
+        children: "Optional link"
+      },
+      iconName: "number",
+      handleClick: () => {}
+    })]
+  })
+};
+export var HorizontalOptional = {
+  name: "Horizontal variant: Optional labels and links",
+  render: () => /*#__PURE__*/React.createElement(Stepper, {
+    variant: "horizontal",
+    steps: [/*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal optional Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      label: "Optional label",
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal optional Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      handleClick: () => {},
+      label: "Optional label"
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal optional Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "number",
+      label: "Optional label",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal optional Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      iconName: "number",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    })]
+  })
+};
+export var VerticalSelected = {
+  name: "Vertical variant: Selected step",
+  render: () => /*#__PURE__*/React.createElement(Stepper, {
+    steps: [/*#__PURE__*/React.createElement(Step, {
+      key: "Vertical Selected Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      label: "Optional label",
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Vertical Selected Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      handleClick: () => {},
+      label: "Optional label",
+      selected: true
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Vertical Selected Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "number",
+      label: "Optional label",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Vertical Selected Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      linkProps: {
+        children: "Optional link"
+      },
+      iconName: "number",
+      label: "Optional label",
+      handleClick: () => {}
+    })]
+  })
+};
+export var HorizontalSelected = {
+  name: "Horizontal variant: Selected step",
+  render: () => /*#__PURE__*/React.createElement(Stepper, {
+    variant: "horizontal",
+    steps: [/*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal Selected Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      label: "Optional label",
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal Selected Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      selected: true,
+      handleClick: () => {},
+      label: "Optional label"
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal Selected Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "number",
+      label: "Optional label",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    }), /*#__PURE__*/React.createElement(Step, {
+      key: "Horizontal Selected Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      iconName: "number",
+      label: "Optional label",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    })]
+  })
+};

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

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

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

@@ -0,0 +1,2 @@
+export { default, type Props as StepperProps } from "./Stepper";
+export { default as Step, type StepProps } from "./Step";

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

@@ -0,0 +1,2 @@
+export { default } from "./Stepper";
+export { default as Step } from "./Step";

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

@@ -0,0 +1,64 @@
+import type { ElementType, HTMLProps, ReactNode } from "react";
+import type { ColSize } from "../Col/Col";
+import type { ClassName, PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the strip.
+     */
+    children: ReactNode;
+    /**
+     * A background images for the strip.
+     */
+    background?: string;
+    /**
+     * Whether the strip should display borders.
+     */
+    bordered?: boolean;
+    /**
+     * Optional classes for the strip.
+     */
+    className?: ClassName;
+    /**
+     * The width of the column if `includeCol` has been set.
+     */
+    colSize?: ColSize;
+    /**
+     * Whether the strip should be dark.
+     */
+    dark?: boolean;
+    /**
+     * Whether the strip should be deep.
+     */
+    deep?: boolean;
+    /**
+     * The base HTML element of the strip.
+     */
+    element?: ElementType;
+    /**
+     * Whether the strip should wrap the content in a column.
+     */
+    includeCol?: boolean;
+    /**
+     * Whether the strip should be light.
+     */
+    light?: boolean;
+    /**
+     * Optional classes to apply to the row.
+     */
+    rowClassName?: string;
+    /**
+     * Whether the strip should be shallow.
+     */
+    shallow?: boolean;
+    /**
+     * The type of the strip (e.g. "accent" or "image").
+     */
+    type?: string;
+}, HTMLProps<HTMLElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Strip](https://docs.vanillaframework.io/patterns/strip/).
+ *
+ * The strip pattern provides a full width strip container in which to wrap a row.
+ */
+declare const Strip: ({ background, bordered, children, className, colSize, dark, deep, includeCol, element: Component, light, rowClassName, shallow, type, ...props }: Props) => JSX.Element;
+export default Strip;

package/dist/esm/components/Strip/Strip.js

@@ -0,0 +1,50 @@
+var _excluded = ["background", "bordered", "children", "className", "colSize", "dark", "deep", "includeCol", "element", "light", "rowClassName", "shallow", "type"];
+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 Col from "../Col";
+import Row from "../Row";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Strip](https://docs.vanillaframework.io/patterns/strip/).
+ *
+ * The strip pattern provides a full width strip container in which to wrap a row.
+ */
+var Strip = _ref => {
+  var {
+      background,
+      bordered = false,
+      children,
+      className,
+      colSize = 12,
+      dark = false,
+      deep = false,
+      includeCol = true,
+      element: Component = "div",
+      light = false,
+      rowClassName,
+      shallow = false,
+      type
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classNames(className, {
+      ["p-strip--".concat(type)]: !!type,
+      "p-strip": !type,
+      "is-bordered": bordered,
+      "is-dark": dark,
+      "is-deep": deep,
+      "is-light": light,
+      "is-shallow": shallow
+    }),
+    style: background && {
+      backgroundImage: "url('".concat(background, "')")
+    }
+  }, props), /*#__PURE__*/React.createElement(Row, {
+    className: rowClassName
+  }, includeCol ? /*#__PURE__*/React.createElement(Col, {
+    size: colSize
+  }, children) : children));
+};
+export default Strip;

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Strip from "./Strip";
+declare const meta: Meta<typeof Strip>;
+export default meta;
+type Story = StoryObj<typeof Strip>;
+export declare const LightStrip: Story;
+export declare const DarkStrip: Story;
+export declare const AccentStrip: Story;
+export declare const ImageStrip: Story;
+export declare const BorderedStrip: Story;
+export declare const DeepStrip: Story;
+export declare const ShallowStrip: Story;