@canonical/react-components 1.3.3 → 1.5.0

package/dist/components/ApplicationLayout/ApplicationLayout.d.ts

@@ -68,6 +68,10 @@ export type BaseProps<NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefau
      * Classes to apply to the status area.
      */
     statusClassName?: string;
+    /**
+     * Id to apply to the main area. Used for the "Skip to main content" link.
+     */
+    mainId?: string;
 }, HTMLProps<HTMLDivElement>>;
 export type Props<NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultElement> = BaseProps<NI, PL> & ExclusiveProps<{
     navItems?: SideNavigationProps<NI>["items"];
@@ -85,5 +89,5 @@ export type Props<NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultEl
  * specific structure and states to function correctly so there will be a
  * trade-off when using the sub-components directly.
  */
-declare const ApplicationLayout: <NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultElement>({ aside, children, dark, logo, mainClassName, menuCollapsed, menuPinned, navigationBarClassName, navigationClassName, navItems, navLinkComponent, onCollapseMenu, onPinMenu, sideNavigation, status, statusClassName, ...props }: Props<NI, PL>) => React.JSX.Element;
+declare const ApplicationLayout: <NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultElement>({ aside, children, dark, logo, mainClassName, menuCollapsed, menuPinned, navigationBarClassName, navigationClassName, navItems, navLinkComponent, onCollapseMenu, onPinMenu, sideNavigation, status, statusClassName, mainId, ...props }: Props<NI, PL>) => React.JSX.Element;
 export default ApplicationLayout;

package/dist/components/ApplicationLayout/ApplicationLayout.js

@@ -15,6 +15,7 @@ var _AppStatus = _interopRequireDefault(require("./AppStatus"));
 var _Application = _interopRequireDefault(require("./Application"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _SkipLink = _interopRequireDefault(require("../SkipLink"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -47,6 +48,7 @@ const ApplicationLayout = _ref => {
     sideNavigation,
     status,
     statusClassName,
+    mainId = "main-content",
     ...props
   } = _ref;
   const [internalMenuPinned, setInternalMenuPinned] = (0, _react.useState)(false);
@@ -55,7 +57,9 @@ const ApplicationLayout = _ref => {
   const setMenuPinned = onPinMenu !== null && onPinMenu !== void 0 ? onPinMenu : setInternalMenuPinned;
   const menuIsCollapsed = menuCollapsed !== null && menuCollapsed !== void 0 ? menuCollapsed : internalMenuCollapsed;
   const setMenuCollapsed = onCollapseMenu !== null && onCollapseMenu !== void 0 ? onCollapseMenu : setInternalMenuCollapsed;
-  return /*#__PURE__*/_react.default.createElement(_Application.default, props, (navItems || sideNavigation) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AppNavigationBar.default, {
+  return /*#__PURE__*/_react.default.createElement(_Application.default, props, /*#__PURE__*/_react.default.createElement(_SkipLink.default, {
+    mainId: mainId
+  }), (navItems || sideNavigation) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AppNavigationBar.default, {
     className: navigationBarClassName
   }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
     dark: dark,
@@ -110,6 +114,7 @@ const ApplicationLayout = _ref => {
     items: navItems,
     linkComponent: navLinkComponent
   }) : sideNavigation))), /*#__PURE__*/_react.default.createElement(_AppMain.default, {
+    id: mainId,
     className: mainClassName
   }, children), aside, status && /*#__PURE__*/_react.default.createElement(_AppStatus.default, {
     className: statusClassName

package/dist/components/SkipLink/SkipLink.d.ts

@@ -0,0 +1,12 @@
+import { HTMLProps } from "react";
+export type Props = {
+    /**
+     * Id of the main content area to skip to.
+     */
+    mainId?: string;
+} & HTMLProps<HTMLAnchorElement>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Skip link](https://vanillaframework.io/docs/patterns/links#skip-link) component.
+ */
+export declare const SkipLink: ({ mainId }: Props) => JSX.Element;
+export default SkipLink;

package/dist/components/SkipLink/SkipLink.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SkipLink = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Skip link](https://vanillaframework.io/docs/patterns/links#skip-link) component.
+ */
+const SkipLink = _ref => {
+  let {
+    mainId = "main-content"
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("a", {
+    className: "p-link--skip",
+    href: "#".concat(mainId)
+  }, "Skip to main content");
+};
+exports.SkipLink = SkipLink;
+SkipLink.propTypes = {
+  mainId: _propTypes.default.string
+};
+var _default = exports.default = SkipLink;

package/dist/components/SkipLink/index.d.ts

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

package/dist/components/SkipLink/index.js

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

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

@@ -49,10 +49,12 @@ export { default as SideNavigation } from "./components/SideNavigation";
 export { default as SideNavigationItem } from "./components/SideNavigation/SideNavigationItem";
 export { default as SideNavigationLink } from "./components/SideNavigation/SideNavigationLink";
 export { default as SideNavigationText } from "./components/SideNavigation/SideNavigationText";
+export { default as SkipLink } from "./components/SkipLink";
 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";
@@ -112,9 +114,11 @@ export type { SideNavigationProps } from "./components/SideNavigation";
 export type { SideNavigationItemProps } from "./components/SideNavigation/SideNavigationItem";
 export type { SideNavigationLinkProps } from "./components/SideNavigation/SideNavigationLink";
 export type { SideNavigationTextProps } from "./components/SideNavigation/SideNavigationText";
+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

@@ -64,11 +64,14 @@ var _exportNames = {
   SideNavigationItem: true,
   SideNavigationLink: true,
   SideNavigationText: true,
+  SkipLink: true,
   Slider: true,
   Switch: true,
   Spinner: true,
   StatusLabel: true,
   StatusLabelAppearance: true,
+  Stepper: true,
+  Step: true,
   Strip: true,
   SummaryButton: true,
   Table: true,
@@ -423,6 +426,12 @@ Object.defineProperty(exports, "SideNavigationText", {
     return _SideNavigationText.default;
   }
 });
+Object.defineProperty(exports, "SkipLink", {
+  enumerable: true,
+  get: function () {
+    return _SkipLink.default;
+  }
+});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function () {
@@ -447,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 () {
@@ -683,10 +704,12 @@ var _SideNavigation = _interopRequireDefault(require("./components/SideNavigatio
 var _SideNavigationItem = _interopRequireDefault(require("./components/SideNavigation/SideNavigationItem"));
 var _SideNavigationLink = _interopRequireDefault(require("./components/SideNavigation/SideNavigationLink"));
 var _SideNavigationText = _interopRequireDefault(require("./components/SideNavigation/SideNavigationText"));
+var _SkipLink = _interopRequireDefault(require("./components/SkipLink"));
 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.3.3",
+  "version": "1.5.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {