@canonical/react-components 2.11.0 → 2.12.0

package/dist/components/Chip/Chip.d.ts

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import type { MouseEvent, HTMLProps } from "react";
 import { ValueOf, PropsWithSpread } from "../../types";
+import { ICONS } from "../Icon";
 export declare enum Label {
     Dismiss = "Dismiss"
 }
@@ -15,6 +16,29 @@ export type Props = PropsWithSpread<{
      * The appearance of the chip.
      */
     appearance?: ValueOf<typeof ChipType>;
+    /**
+     * Whether the chip is read-only.
+     * If true, the chip will not be interactive.
+     */
+    isReadOnly?: boolean;
+    /**
+     * A badge to display on the chip.
+     */
+    badge?: ReactNode;
+    /**
+     * The name of an icon to display on the chip.
+     */
+    iconName?: ValueOf<typeof ICONS> | string;
+    /**
+     * Whether the chip is dense.
+     * Reduces the height of the chip by removing padding.
+     */
+    isDense?: boolean;
+    /**
+     * Whether the chip is inline.
+     * If true, the chip will be displayed inline with other content (such as text).
+     */
+    isInline?: boolean;
     /**
      * The lead for the chip.
      */
@@ -53,5 +77,5 @@ export type Props = PropsWithSpread<{
  *
  * It can be used to display a small value attached to a component.
  */
-declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => React.JSX.Element;
+declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, isReadOnly, isDense, isInline, iconName, badge, value, ...props }: Props) => React.JSX.Element;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -33,6 +33,11 @@ const Chip = _ref => {
     quoteValue,
     selected,
     subString = "",
+    isReadOnly = false,
+    isDense = false,
+    isInline = false,
+    iconName,
+    badge,
     value,
     ...props
   } = _ref;
@@ -50,19 +55,28 @@ const Chip = _ref => {
     }
   };
   const chipValue = (0, _utils.highlightSubString)(value, subString).text;
-  const chipContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, lead && /*#__PURE__*/_react.default.createElement("span", {
+  const chipContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconName && /*#__PURE__*/_react.default.createElement("i", {
+    className: "p-icon--".concat(iconName)
+  }), lead && /*#__PURE__*/_react.default.createElement("span", {
     className: "p-chip__lead"
   }, lead.toUpperCase()), /*#__PURE__*/_react.default.createElement("span", {
     className: "p-chip__value",
     dangerouslySetInnerHTML: {
       __html: quoteValue ? "'".concat(chipValue, "'") : chipValue
     }
-  }));
+  }), badge && badge);
   const chipClassName = (0, _classnames.default)({
     ["p-chip--".concat(appearance)]: !!appearance,
-    "p-chip": !appearance
+    "p-chip": !appearance,
+    "is-dense": isDense,
+    "is-readonly": isReadOnly,
+    "is-inline": isInline
   }, props.className);
-  if (onDismiss) {
+  if (isReadOnly) {
+    return /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
+      className: chipClassName
+    }), chipContent);
+  } else if (onDismiss) {
     return /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
       className: chipClassName
     }), chipContent, /*#__PURE__*/_react.default.createElement("button", {

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

@@ -7,3 +7,8 @@ export declare const Default: Story;
 export declare const LeadValue: Story;
 export declare const Appearance: Story;
 export declare const Dismissible: Story;
+export declare const Dense: Story;
+export declare const Inline: Story;
+export declare const ReadOnly: Story;
+export declare const WithIcon: Story;
+export declare const WithBadge: Story;

package/dist/components/Chip/Chip.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.LeadValue = exports.Dismissible = exports.Default = exports.Appearance = void 0;
+exports.default = exports.WithIcon = exports.WithBadge = exports.ReadOnly = exports.LeadValue = exports.Inline = exports.Dismissible = exports.Dense = exports.Default = exports.Appearance = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Chip = _interopRequireDefault(require("./Chip"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -42,4 +42,46 @@ const Dismissible = exports.Dismissible = {
     }
   }),
   name: "Dismissible"
+};
+const Dense = exports.Dense = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Owner",
+    value: "Bob",
+    isDense: true
+  }),
+  name: "Dense"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement("p", null, "This is text with an inline", " ", /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    value: "chip",
+    isDense: true,
+    isInline: true
+  })),
+  name: "Inline"
+};
+const ReadOnly = exports.ReadOnly = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Owner",
+    value: "Bob",
+    isReadOnly: true
+  }),
+  name: "Read-only"
+};
+const WithIcon = exports.WithIcon = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    value: "Users",
+    iconName: "user"
+  }),
+  name: "With Icon"
+};
+const WithBadge = exports.WithBadge = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Owner",
+    value: "Bob",
+    badge: /*#__PURE__*/_react.default.createElement("span", {
+      className: "p-badge",
+      "aria-label": "More than 2.5 billion items"
+    }, "2.5B")
+  }),
+  name: "With Badge"
 };

package/dist/components/StatusLabel/StatusLabel.d.ts

@@ -27,8 +27,8 @@ export type Props = PropsWithSpread<{
 }, HTMLProps<HTMLDivElement>>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
- *
  * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ * @deprecated StatusLabel is deprecated. Use Read-only Chip instead.
  */
 declare const StatusLabel: ({ appearance, children, className, ...labelProps }: Props) => React.JSX.Element;
 export default StatusLabel;

package/dist/components/StatusLabel/StatusLabel.js

@@ -22,8 +22,8 @@ const StatusLabelAppearance = exports.StatusLabelAppearance = {
 
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
- *
  * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ * @deprecated StatusLabel is deprecated. Use Read-only Chip instead.
  */
 const StatusLabel = _ref => {
   let {

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

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import type { MouseEvent, HTMLProps } from "react";
 import { ValueOf, PropsWithSpread } from "../../types";
+import { ICONS } from "../Icon";
 export declare enum Label {
     Dismiss = "Dismiss"
 }
@@ -15,6 +16,29 @@ export type Props = PropsWithSpread<{
      * The appearance of the chip.
      */
     appearance?: ValueOf<typeof ChipType>;
+    /**
+     * Whether the chip is read-only.
+     * If true, the chip will not be interactive.
+     */
+    isReadOnly?: boolean;
+    /**
+     * A badge to display on the chip.
+     */
+    badge?: ReactNode;
+    /**
+     * The name of an icon to display on the chip.
+     */
+    iconName?: ValueOf<typeof ICONS> | string;
+    /**
+     * Whether the chip is dense.
+     * Reduces the height of the chip by removing padding.
+     */
+    isDense?: boolean;
+    /**
+     * Whether the chip is inline.
+     * If true, the chip will be displayed inline with other content (such as text).
+     */
+    isInline?: boolean;
     /**
      * The lead for the chip.
      */
@@ -53,5 +77,5 @@ export type Props = PropsWithSpread<{
  *
  * It can be used to display a small value attached to a component.
  */
-declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => React.JSX.Element;
+declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, isReadOnly, isDense, isInline, iconName, badge, value, ...props }: Props) => React.JSX.Element;
 export default Chip;

package/dist/esm/components/Chip/Chip.js

@@ -1,4 +1,4 @@
-var _excluded = ["appearance", "lead", "onClick", "onDismiss", "quoteValue", "selected", "subString", "value"];
+var _excluded = ["appearance", "lead", "onClick", "onDismiss", "quoteValue", "selected", "subString", "isReadOnly", "isDense", "isInline", "iconName", "badge", "value"];
 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; }
@@ -29,6 +29,11 @@ var Chip = _ref => {
       quoteValue,
       selected,
       subString = "",
+      isReadOnly = false,
+      isDense = false,
+      isInline = false,
+      iconName,
+      badge,
       value
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -46,19 +51,28 @@ var Chip = _ref => {
     }
   };
   var chipValue = highlightSubString(value, subString).text;
-  var chipContent = /*#__PURE__*/React.createElement(React.Fragment, null, lead && /*#__PURE__*/React.createElement("span", {
+  var chipContent = /*#__PURE__*/React.createElement(React.Fragment, null, iconName && /*#__PURE__*/React.createElement("i", {
+    className: "p-icon--".concat(iconName)
+  }), lead && /*#__PURE__*/React.createElement("span", {
     className: "p-chip__lead"
   }, lead.toUpperCase()), /*#__PURE__*/React.createElement("span", {
     className: "p-chip__value",
     dangerouslySetInnerHTML: {
       __html: quoteValue ? "'".concat(chipValue, "'") : chipValue
     }
-  }));
+  }), badge && badge);
   var chipClassName = classNames({
     ["p-chip--".concat(appearance)]: !!appearance,
-    "p-chip": !appearance
+    "p-chip": !appearance,
+    "is-dense": isDense,
+    "is-readonly": isReadOnly,
+    "is-inline": isInline
   }, props.className);
-  if (onDismiss) {
+  if (isReadOnly) {
+    return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+      className: chipClassName
+    }), chipContent);
+  } else if (onDismiss) {
     return /*#__PURE__*/React.createElement("span", _extends({}, props, {
       className: chipClassName
     }), chipContent, /*#__PURE__*/React.createElement("button", {

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

@@ -7,3 +7,8 @@ export declare const Default: Story;
 export declare const LeadValue: Story;
 export declare const Appearance: Story;
 export declare const Dismissible: Story;
+export declare const Dense: Story;
+export declare const Inline: Story;
+export declare const ReadOnly: Story;
+export declare const WithIcon: Story;
+export declare const WithBadge: Story;

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

@@ -35,4 +35,46 @@ export var Dismissible = {
     }
   }),
   name: "Dismissible"
+};
+export var Dense = {
+  render: () => /*#__PURE__*/React.createElement(Chip, {
+    lead: "Owner",
+    value: "Bob",
+    isDense: true
+  }),
+  name: "Dense"
+};
+export var Inline = {
+  render: () => /*#__PURE__*/React.createElement("p", null, "This is text with an inline", " ", /*#__PURE__*/React.createElement(Chip, {
+    value: "chip",
+    isDense: true,
+    isInline: true
+  })),
+  name: "Inline"
+};
+export var ReadOnly = {
+  render: () => /*#__PURE__*/React.createElement(Chip, {
+    lead: "Owner",
+    value: "Bob",
+    isReadOnly: true
+  }),
+  name: "Read-only"
+};
+export var WithIcon = {
+  render: () => /*#__PURE__*/React.createElement(Chip, {
+    value: "Users",
+    iconName: "user"
+  }),
+  name: "With Icon"
+};
+export var WithBadge = {
+  render: () => /*#__PURE__*/React.createElement(Chip, {
+    lead: "Owner",
+    value: "Bob",
+    badge: /*#__PURE__*/React.createElement("span", {
+      className: "p-badge",
+      "aria-label": "More than 2.5 billion items"
+    }, "2.5B")
+  }),
+  name: "With Badge"
 };

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

@@ -27,8 +27,8 @@ export type Props = PropsWithSpread<{
 }, HTMLProps<HTMLDivElement>>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
- *
  * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ * @deprecated StatusLabel is deprecated. Use Read-only Chip instead.
  */
 declare const StatusLabel: ({ appearance, children, className, ...labelProps }: Props) => React.JSX.Element;
 export default StatusLabel;

package/dist/esm/components/StatusLabel/StatusLabel.js

@@ -18,8 +18,8 @@ export var StatusLabelAppearance = {
 
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
- *
  * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ * @deprecated StatusLabel is deprecated. Use Read-only Chip instead.
  */
 var StatusLabel = _ref => {
   var {

package/package.json

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