@canonical/react-components 4.2.0 → 4.3.0

package/dist/components/OutputField/OutputField.d.ts

@@ -0,0 +1,30 @@
+import { FC, ReactNode } from "react";
+import "./OutputField.scss";
+export type Props = {
+    /**
+     * The id of the output element. This is used to associate the label with the output element for form or accessibility purposes.
+     */
+    id: string;
+    /**
+     * The label for the output field.
+     */
+    label: string;
+    /**
+     * The value to be displayed in the output field.
+     */
+    value: string;
+    /**
+     * Optional help text to provide additional information about the output field.
+     */
+    help?: ReactNode;
+    /**
+     * Whether the output field is required.
+     */
+    required?: boolean;
+};
+/**
+ *
+ * Use output fields to display read-only information with a label and optional help text. Output fields are ideal for displaying calculated values or results of user input in a consistent format.
+ */
+export declare const OutputField: FC<Props>;
+export default OutputField;

package/dist/components/OutputField/OutputField.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OutputField = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _Field = _interopRequireDefault(require("../Field"));
+require("./OutputField.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ *
+ * Use output fields to display read-only information with a label and optional help text. Output fields are ideal for displaying calculated values or results of user input in a consistent format.
+ */
+const OutputField = _ref => {
+  let {
+    id,
+    label,
+    value,
+    help,
+    required
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_Field.default, {
+    forId: id,
+    label: label,
+    help: help,
+    labelClassName: "u-no-margin--bottom",
+    className: "output-field",
+    required: required
+  }, /*#__PURE__*/_react.default.createElement("output", {
+    id: id,
+    className: "mono-font u-sv2"
+  }, /*#__PURE__*/_react.default.createElement("b", null, value)));
+};
+exports.OutputField = OutputField;
+OutputField.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  value: _propTypes.default.string.isRequired,
+  help: _propTypes.default.node,
+  required: _propTypes.default.bool
+};
+var _default = exports.default = OutputField;

package/dist/components/OutputField/OutputField.scss

@@ -0,0 +1,11 @@
+@import "vanilla-framework";
+
+.output-field {
+  .p-form-help-text {
+    margin-top: -0.65rem;
+  }
+
+  .p-form__control {
+    margin-top: 0.25rem;
+  }
+}

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

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

package/dist/components/OutputField/OutputField.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Required = exports.HelpText = exports.Default = void 0;
+var _OutputField = _interopRequireDefault(require("./OutputField"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _OutputField.default,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    id: {
+      control: {
+        type: "text"
+      }
+    },
+    value: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    required: {
+      control: {
+        type: "boolean"
+      }
+    }
+  },
+  args: {
+    label: "Label",
+    id: "output-field",
+    value: "Output value",
+    help: "",
+    required: false
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default"
+};
+const HelpText = exports.HelpText = {
+  name: "Help Text",
+  args: {
+    help: "This is an output field with text"
+  }
+};
+const Required = exports.Required = {
+  name: "Required",
+  args: {
+    required: true
+  }
+};

package/dist/components/OutputField/OutputField.test.d.ts

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

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

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

package/dist/components/OutputField/index.js

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

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

@@ -0,0 +1,30 @@
+import { FC, ReactNode } from "react";
+import "./OutputField.scss";
+export type Props = {
+    /**
+     * The id of the output element. This is used to associate the label with the output element for form or accessibility purposes.
+     */
+    id: string;
+    /**
+     * The label for the output field.
+     */
+    label: string;
+    /**
+     * The value to be displayed in the output field.
+     */
+    value: string;
+    /**
+     * Optional help text to provide additional information about the output field.
+     */
+    help?: ReactNode;
+    /**
+     * Whether the output field is required.
+     */
+    required?: boolean;
+};
+/**
+ *
+ * Use output fields to display read-only information with a label and optional help text. Output fields are ideal for displaying calculated values or results of user input in a consistent format.
+ */
+export declare const OutputField: FC<Props>;
+export default OutputField;

package/dist/esm/components/OutputField/OutputField.js

@@ -0,0 +1,36 @@
+import _pt from "prop-types";
+import React from "react";
+import Field from "../Field";
+import "./OutputField.scss";
+/**
+ *
+ * Use output fields to display read-only information with a label and optional help text. Output fields are ideal for displaying calculated values or results of user input in a consistent format.
+ */
+export var OutputField = _ref => {
+  var {
+    id,
+    label,
+    value,
+    help,
+    required
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Field, {
+    forId: id,
+    label: label,
+    help: help,
+    labelClassName: "u-no-margin--bottom",
+    className: "output-field",
+    required: required
+  }, /*#__PURE__*/React.createElement("output", {
+    id: id,
+    className: "mono-font u-sv2"
+  }, /*#__PURE__*/React.createElement("b", null, value)));
+};
+OutputField.propTypes = {
+  id: _pt.string.isRequired,
+  label: _pt.string.isRequired,
+  value: _pt.string.isRequired,
+  help: _pt.node,
+  required: _pt.bool
+};
+export default OutputField;

package/dist/esm/components/OutputField/OutputField.scss

@@ -0,0 +1,11 @@
+@import "vanilla-framework";
+
+.output-field {
+  .p-form-help-text {
+    margin-top: -0.65rem;
+  }
+
+  .p-form__control {
+    margin-top: 0.25rem;
+  }
+}

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

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

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

@@ -0,0 +1,55 @@
+import OutputField from "./OutputField";
+var meta = {
+  component: OutputField,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    id: {
+      control: {
+        type: "text"
+      }
+    },
+    value: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    required: {
+      control: {
+        type: "boolean"
+      }
+    }
+  },
+  args: {
+    label: "Label",
+    id: "output-field",
+    value: "Output value",
+    help: "",
+    required: false
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default"
+};
+export var HelpText = {
+  name: "Help Text",
+  args: {
+    help: "This is an output field with text"
+  }
+};
+export var Required = {
+  name: "Required",
+  args: {
+    required: true
+  }
+};

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

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

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

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

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

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

package/dist/esm/index.d.ts

@@ -40,6 +40,7 @@ export * from "./components/MultiSelect";
 export { default as Notification, NotificationSeverity, } from "./components/Notifications";
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue, } from "./components/NotificationProvider";
 export { default as LoginPageLayout } from "./components/LoginPageLayout";
+export { default as OutputField } from "./components/OutputField";
 export { default as Pagination } from "./components/Pagination";
 export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";
@@ -118,6 +119,7 @@ export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, NavLin
 export type { NotificationProps } from "./components/Notifications";
 export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./components/NotificationProvider";
 export type { LoginPageLayoutProps } from "./components/LoginPageLayout";
+export type { OutputFieldProps } from "./components/OutputField";
 export type { PaginationProps } from "./components/Pagination";
 export type { PanelProps } from "./components/Panel";
 export type { PrefixedInputProps } from "./components/PrefixedInput";

package/dist/esm/index.js

@@ -40,6 +40,7 @@ export * from "./components/MultiSelect";
 export { default as Notification, NotificationSeverity } from "./components/Notifications";
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue } from "./components/NotificationProvider";
 export { default as LoginPageLayout } from "./components/LoginPageLayout";
+export { default as OutputField } from "./components/OutputField";
 export { default as Pagination } from "./components/Pagination";
 export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export * from "./components/MultiSelect";
 export { default as Notification, NotificationSeverity, } from "./components/Notifications";
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue, } from "./components/NotificationProvider";
 export { default as LoginPageLayout } from "./components/LoginPageLayout";
+export { default as OutputField } from "./components/OutputField";
 export { default as Pagination } from "./components/Pagination";
 export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";
@@ -118,6 +119,7 @@ export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, NavLin
 export type { NotificationProps } from "./components/Notifications";
 export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./components/NotificationProvider";
 export type { LoginPageLayoutProps } from "./components/LoginPageLayout";
+export type { OutputFieldProps } from "./components/OutputField";
 export type { PaginationProps } from "./components/Pagination";
 export type { PanelProps } from "./components/Panel";
 export type { PrefixedInputProps } from "./components/PrefixedInput";

package/dist/index.js

@@ -61,6 +61,7 @@ var _exportNames = {
   failure: true,
   queue: true,
   LoginPageLayout: true,
+  OutputField: true,
   Pagination: true,
   Panel: true,
   PasswordToggle: true,
@@ -410,6 +411,12 @@ Object.defineProperty(exports, "NotificationSeverity", {
     return _Notifications.NotificationSeverity;
   }
 });
+Object.defineProperty(exports, "OutputField", {
+  enumerable: true,
+  get: function () {
+    return _OutputField.default;
+  }
+});
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
   get: function () {
@@ -919,6 +926,7 @@ Object.keys(_MultiSelect).forEach(function (key) {
 var _Notifications = _interopRequireWildcard(require("./components/Notifications"));
 var _NotificationProvider = require("./components/NotificationProvider");
 var _LoginPageLayout = _interopRequireDefault(require("./components/LoginPageLayout"));
+var _OutputField = _interopRequireDefault(require("./components/OutputField"));
 var _Pagination = _interopRequireDefault(require("./components/Pagination"));
 var _Panel = _interopRequireDefault(require("./components/Panel"));
 var _PasswordToggle = _interopRequireDefault(require("./components/PasswordToggle"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -96,7 +96,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.46.0",
+    "vanilla-framework": "4.48.0",
     "wait-on": "9.0.3",
     "webpack": "5.105.0"
   },