@canonical/react-components 1.4.0 → 1.5.0

package/dist/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/components/Stepper/Step/Step.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+var _Link = _interopRequireDefault(require("../../Link"));
+require("./Step.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const Step = _ref => {
+  let {
+    hasProgressLine,
+    index,
+    title,
+    label,
+    linkProps,
+    enabled,
+    selected = false,
+    iconName,
+    iconClassName,
+    handleClick,
+    ...props
+  } = _ref;
+  const stepStatusClass = enabled ? "step-enabled" : "step-disabled";
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _classnames.default)("step", {
+      "progress-line": hasProgressLine,
+      "step-selected": selected
+    })
+  }, props), iconName === "number" ? /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("step-number", {
+      "step-number-disabled": !enabled
+    })
+  }, index) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: iconName,
+    className: (0, _classnames.default)("step-status-icon", iconClassName)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "step-content"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(stepStatusClass),
+    onClick: handleClick
+  }, title), label && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("step-optional-content", "u-no-margin--bottom", {
+      "step-disabled": !enabled
+    })
+  }, label), linkProps && /*#__PURE__*/_react.default.createElement(_Link.default, _extends({
+    className: "p-text--small u-no-margin--bottom step-optional-content"
+  }, linkProps), linkProps.children)));
+};
+Step.propTypes = {
+  hasProgressLine: _propTypes.default.bool.isRequired,
+  index: _propTypes.default.number.isRequired,
+  title: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string,
+  enabled: _propTypes.default.bool.isRequired,
+  selected: _propTypes.default.bool,
+  iconName: _propTypes.default.string.isRequired,
+  handleClick: _propTypes.default.func.isRequired
+};
+var _default = exports.default = Step;

package/dist/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/components/Stepper/Step/index.d.ts

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Step.default;
+  }
+});
+var _Step = _interopRequireDefault(require("./Step"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/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/components/Stepper/Stepper.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _List = _interopRequireDefault(require("../List"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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.
+ */
+
+const Stepper = _ref => {
+  let {
+    variant = "vertical",
+    steps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_List.default, {
+    items: steps,
+    inline: variant === "horizontal",
+    className: (0, _classnames.default)({
+      "stepper-horizontal": variant === "horizontal",
+      "stepper-vertical": variant === "vertical"
+    })
+  });
+};
+Stepper.propTypes = {
+  variant: _propTypes.default.oneOf(["horizontal", "vertical"]),
+  steps: _propTypes.default.arrayOf(_propTypes.default.element).isRequired
+};
+var _default = exports.default = Stepper;

package/dist/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/components/Stepper/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function () {
+    return _Step.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Stepper.default;
+  }
+});
+var _Stepper = _interopRequireDefault(require("./Stepper"));
+var _Step = _interopRequireDefault(require("./Step"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/index.d.ts

@@ -54,6 +54,7 @@ export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";
 export { default as Spinner } from "./components/Spinner";
 export { default as StatusLabel, StatusLabelAppearance, } from "./components/StatusLabel";
+export { default as Stepper, Step } from "./components/Stepper";
 export { default as Strip } from "./components/Strip";
 export { default as SummaryButton } from "./components/SummaryButton";
 export { default as Table } from "./components/Table";
@@ -117,6 +118,7 @@ export type { SkipLinkProps } from "./components/SkipLink";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";
 export type { StatusLabelProps } from "./components/StatusLabel";
+export type { StepperProps, StepProps } from "./components/Stepper";
 export type { StripProps } from "./components/Strip";
 export type { SummaryButtonProps } from "./components/SummaryButton";
 export type { TableProps } from "./components/Table";

package/dist/index.js

@@ -70,6 +70,8 @@ var _exportNames = {
   Spinner: true,
   StatusLabel: true,
   StatusLabelAppearance: true,
+  Stepper: true,
+  Step: true,
   Strip: true,
   SummaryButton: true,
   Table: true,
@@ -454,6 +456,18 @@ Object.defineProperty(exports, "StatusLabelAppearance", {
     return _StatusLabel.StatusLabelAppearance;
   }
 });
+Object.defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function () {
+    return _Stepper.Step;
+  }
+});
+Object.defineProperty(exports, "Stepper", {
+  enumerable: true,
+  get: function () {
+    return _Stepper.default;
+  }
+});
 Object.defineProperty(exports, "Strip", {
   enumerable: true,
   get: function () {
@@ -695,6 +709,7 @@ var _Slider = _interopRequireDefault(require("./components/Slider"));
 var _Switch = _interopRequireDefault(require("./components/Switch"));
 var _Spinner = _interopRequireDefault(require("./components/Spinner"));
 var _StatusLabel = _interopRequireWildcard(require("./components/StatusLabel"));
+var _Stepper = _interopRequireWildcard(require("./components/Stepper"));
 var _Strip = _interopRequireDefault(require("./components/Strip"));
 var _SummaryButton = _interopRequireDefault(require("./components/SummaryButton"));
 var _Table = _interopRequireDefault(require("./components/Table"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {