@carbon/ibm-products
Version:
Carbon for IBM Products
134 lines (132 loc) • 5.16 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { pkg } from "../../settings.js";
import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import "../../global/js/utils/props-helper.js";
import EmptyStateIllustration from "./EmptyStateIllustration.deprecated.js";
import React from "react";
import PropTypes from "prop-types";
import { Button, Link } from "@carbon/react";
//#region src/components/EmptyStates/EmptyStateV2.deprecated.tsx
/**
* Copyright IBM Corp. 2023, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const blockClass = `${pkg.prefix}--empty-state`;
const componentName = "EmptyStateV2";
/**
* This is the V2 version of the `EmptyState` component. To use you must pass the `v2` prop to the V1 version of the component `EmptyState` and use the props below.
* In order to avoid breaking changes in the future `EmptyStateV2` is not actually directly importable.
* @deprecated
*/
const EmptyStateV2 = React.forwardRef((props, ref) => {
const { action, className, illustration: customIllustration, illustrationDescription, illustrationPosition = "top", illustrationTheme, kind, link, size = "lg", subtitle, title, ...rest } = props;
const illustrationProps = {
size,
theme: illustrationTheme,
title: illustrationDescription,
kind
};
return /* @__PURE__ */ React.createElement("div", {
...rest,
className: (0, import_classnames.default)([
blockClass,
className,
`${blockClass}-position--${illustrationPosition}`,
{ [`${blockClass}-type--${kind}`]: kind }
]),
ref,
...getDevtoolsProps(componentName)
}, customIllustration && /* @__PURE__ */ React.createElement("img", {
src: customIllustration,
alt: illustrationDescription,
className: (0, import_classnames.default)([`${blockClass}__illustration`, `${blockClass}__illustration--${size}`])
}), !customIllustration && kind && /* @__PURE__ */ React.createElement(EmptyStateIllustration, illustrationProps), /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__content` }, /* @__PURE__ */ React.createElement("h3", { className: (0, import_classnames.default)(`${blockClass}__header`, { [`${blockClass}__header--small`]: size === "sm" }) }, title), subtitle && /* @__PURE__ */ React.createElement("div", { className: (0, import_classnames.default)(`${blockClass}__subtitle`, { [`${blockClass}__subtitle--small`]: size === "sm" }) }, subtitle), action && /* @__PURE__ */ React.createElement(Button, {
...action,
className: `${blockClass}__action-button`,
size: "sm"
}, action.text), link && /* @__PURE__ */ React.createElement(Link, {
...link,
className: `${blockClass}__link`
}, link.text)));
});
/**@ts-ignore*/
EmptyStateV2.deprecated = {
level: "warn",
details: "For more information, please refer to the Carbon docs https://carbondesignsystem.com/patterns/empty-states-pattern/"
};
EmptyStateV2.propTypes = {
/**
* Props for the action button. Refer to the Carbon Components button documentation for full list of props.
*/
/**@ts-ignore*/
action: PropTypes.PropTypes.shape({ text: PropTypes.string }),
/**
* Provide an optional class to be applied to the containing node.
*/
className: PropTypes.string,
/**
* Source for the illustration image if you choose to use your own custom image. Passing an illustration prop will supersede the kind option.
*/
illustration: PropTypes.string,
/**
* The alt text for the illustration
*/
illustrationDescription: PropTypes.string,
/**
* Designates the position of the illustration relative to the content
*/
illustrationPosition: PropTypes.oneOf([
"top",
"right",
"bottom",
"left"
]),
/**
* Empty state illustration theme variations.
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
* based on your app's current theme value. Example:
* `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
*/
illustrationTheme: PropTypes.oneOf(["light", "dark"]),
/**
* Determines which predefined illustration will be displayed
*/
kind: PropTypes.oneOf([
"error",
"noData",
"noTags",
"notFound",
"notifications",
"unauthorized"
]),
/**
* Props for the link. Refer to the Carbon Components link documentation for full list of props.
*/
/**@ts-ignore*/
link: PropTypes.shape({ text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]) }),
/**
* Empty state size
*/
size: PropTypes.oneOf(["sm", "lg"]),
/**
* Empty state subtext
*/
subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/**
* Empty state heading
*/
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
};
EmptyStateV2.displayName = componentName;
//#endregion
export { EmptyStateV2 };