@canonical/react-components 2.4.0 → 2.5.1

package/dist/components/Notifications/ToastNotification/Toast.scss

@@ -35,7 +35,7 @@
 .toast-notification-list {
   background-color: white;
   box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 22%);
-  max-height: calc(100vh - 4.5rem);
+  max-height: calc(100dvh - 4.5rem);
   overflow: auto;
   padding: 0 0.5rem;
   z-index: 102;

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

@@ -85,7 +85,7 @@
   }
 }
 
-.stepper-vertical {
+.stepper-vertical:not(.stepper-horizontal) {
   .p-list__item {
     padding-bottom: 0;
     padding-top: 0;

package/dist/components/Switch/Switch.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { PropsWithSpread } from "../../types";
+import "./Switch.scss";
 export type Props = PropsWithSpread<{
     /**
      * The label name for the switch
@@ -10,9 +11,17 @@ export type Props = PropsWithSpread<{
      * Whether the switch is disabled or not
      */
     disabled?: boolean;
+    /**
+     * Help text to show below the field.
+     */
+    help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: string;
 }, HTMLProps<HTMLInputElement>>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
  */
-export declare const Switch: ({ label, disabled, ...inputProps }: Props) => React.JSX.Element;
+export declare const Switch: ({ label, disabled, help, helpClassName, ...inputProps }: Props) => React.JSX.Element;
 export default Switch;

package/dist/components/Switch/Switch.js

@@ -4,8 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Switch = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./Switch.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
@@ -14,9 +18,12 @@ const Switch = _ref => {
   let {
     label,
     disabled = false,
+    help,
+    helpClassName,
     ...inputProps
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("label", {
+  const helpId = (0, _react.useId)();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
     className: "p-switch"
   }, /*#__PURE__*/_react.default.createElement("input", _extends({
     type: "checkbox",
@@ -27,7 +34,10 @@ const Switch = _ref => {
     className: "p-switch__slider"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "p-switch__label"
-  }, label));
+  }, label)), help && /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _classnames.default)("p-form-help-text", "switch-help-text", helpClassName),
+    id: helpId
+  }, help));
 };
 exports.Switch = Switch;
 var _default = exports.default = Switch;

package/dist/components/Switch/Switch.scss

@@ -0,0 +1,3 @@
+.switch-help-text {
+  margin-left: 2.5rem;
+}

package/dist/components/Switch/Switch.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof Switch>;
 export declare const Default: Story;
 export declare const Disabled: Story;
+export declare const HelpText: Story;

package/dist/components/Switch/Switch.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Disabled = exports.Default = void 0;
+exports.default = exports.HelpText = exports.Disabled = exports.Default = void 0;
 var _Switch = _interopRequireDefault(require("./Switch"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const meta = {
@@ -23,4 +23,11 @@ const Disabled = exports.Disabled = {
     disabled: true,
     label: "Disabled switch"
   }
+};
+const HelpText = exports.HelpText = {
+  name: "Help Text",
+  args: {
+    label: "Switch with help text",
+    help: "This is some help text"
+  }
 };

package/dist/esm/components/Notifications/ToastNotification/Toast.scss

@@ -35,7 +35,7 @@
 .toast-notification-list {
   background-color: white;
   box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 22%);
-  max-height: calc(100vh - 4.5rem);
+  max-height: calc(100dvh - 4.5rem);
   overflow: auto;
   padding: 0 0.5rem;
   z-index: 102;

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

@@ -85,7 +85,7 @@
   }
 }
 
-.stepper-vertical {
+.stepper-vertical:not(.stepper-horizontal) {
   .p-list__item {
     padding-bottom: 0;
     padding-top: 0;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { PropsWithSpread } from "../../types";
+import "./Switch.scss";
 export type Props = PropsWithSpread<{
     /**
      * The label name for the switch
@@ -10,9 +11,17 @@ export type Props = PropsWithSpread<{
      * Whether the switch is disabled or not
      */
     disabled?: boolean;
+    /**
+     * Help text to show below the field.
+     */
+    help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: string;
 }, HTMLProps<HTMLInputElement>>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
  */
-export declare const Switch: ({ label, disabled, ...inputProps }: Props) => React.JSX.Element;
+export declare const Switch: ({ label, disabled, help, helpClassName, ...inputProps }: Props) => React.JSX.Element;
 export default Switch;

package/dist/esm/components/Switch/Switch.js

@@ -1,18 +1,24 @@
-var _excluded = ["label", "disabled"];
+var _excluded = ["label", "disabled", "help", "helpClassName"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
+import classNames from "classnames";
+import { useId } from "react";
+import "./Switch.scss";
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
  */
 export var Switch = _ref => {
   var {
       label,
-      disabled = false
+      disabled = false,
+      help,
+      helpClassName
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("label", {
+  var helpId = useId();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
     className: "p-switch"
   }, /*#__PURE__*/React.createElement("input", _extends({
     type: "checkbox",
@@ -23,6 +29,9 @@ export var Switch = _ref => {
     className: "p-switch__slider"
   }), /*#__PURE__*/React.createElement("span", {
     className: "p-switch__label"
-  }, label));
+  }, label)), help && /*#__PURE__*/React.createElement("p", {
+    className: classNames("p-form-help-text", "switch-help-text", helpClassName),
+    id: helpId
+  }, help));
 };
 export default Switch;

package/dist/esm/components/Switch/Switch.scss

@@ -0,0 +1,3 @@
+.switch-help-text {
+  margin-left: 2.5rem;
+}

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof Switch>;
 export declare const Default: Story;
 export declare const Disabled: Story;
+export declare const HelpText: Story;

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

@@ -16,4 +16,11 @@ export var Disabled = {
     disabled: true,
     label: "Disabled switch"
   }
+};
+export var HelpText = {
+  name: "Help Text",
+  args: {
+    label: "Switch with help text",
+    help: "This is some help text"
+  }
 };

package/package.json

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