@octopusdeploy/design-system-components
Version:
The design systems component library.
157 lines (156 loc) • 7.31 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DeprecatedIconButton = exports.IconButtonIcons = void 0;
exports.isPredefinedIcon = isPredefinedIcon;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = __importStar(require("react"));
// New design system icons
exports.IconButtonIcons = [
"ArrowRefreshIcon",
"ArrowDownToSquareIcon",
"ArrowUpFromBracketIcon",
"CaretDownIcon",
"ChevronLeftIcon",
"ChevronRightIcon",
"ChevronUpIcon",
"ChevronDownIcon",
"CaretUpIcon",
"ChevronsLeftIcon",
"CogIcon",
"CompressIcon",
"CopyIcon",
"CurlyBracketsHashtagIcon",
"EllipsisVerticalIcon",
"EllipsisHorizontalIcon",
"ExpandIcon",
"EyeOffIcon",
"EyeOnIcon",
"ImageIcon",
"LinkOnIcon",
"LinkOffIcon",
"MagnifyingGlassIcon",
"PenLineIcon",
"PlusIcon",
"QuestionCircleIcon",
"ShareIcon",
"TrashIcon",
"XmarkIcon",
];
const Icon = {
ArrowRefreshIcon: design_system_icons_1.ArrowRefreshIcon,
ArrowDownToSquareIcon: design_system_icons_1.ArrowDownToSquareIcon,
ArrowUpFromBracketIcon: design_system_icons_1.ArrowUpFromBracketIcon,
CaretDownIcon: design_system_icons_1.CaretDownIcon,
CaretUpIcon: design_system_icons_1.CaretUpIcon,
ChevronLeftIcon: design_system_icons_1.ChevronLeftIcon,
ChevronRightIcon: design_system_icons_1.ChevronRightIcon,
ChevronUpIcon: design_system_icons_1.ChevronUpIcon,
ChevronDownIcon: design_system_icons_1.ChevronDownIcon,
ChevronsLeftIcon: design_system_icons_1.ChevronsLeftIcon,
CogIcon: design_system_icons_1.CogIcon,
CompressIcon: design_system_icons_1.CompressIcon,
CopyIcon: design_system_icons_1.CopyIcon,
CurlyBracketsHashtagIcon: design_system_icons_1.CurlyBracketsHashtagIcon,
EllipsisVerticalIcon: design_system_icons_1.EllipsisVerticalIcon,
EllipsisHorizontalIcon: design_system_icons_1.EllipsisHorizontalIcon,
ExpandIcon: design_system_icons_1.ExpandIcon,
EyeOffIcon: design_system_icons_1.EyeOffIcon,
EyeOnIcon: design_system_icons_1.EyeOnIcon,
ImageIcon: design_system_icons_1.ImageIcon,
LinkOnIcon: design_system_icons_1.LinkOnIcon,
LinkOffIcon: design_system_icons_1.LinkOffIcon,
MagnifyingGlassIcon: design_system_icons_1.MagnifyingGlassIcon,
PenLineIcon: design_system_icons_1.PenLineIcon,
PlusIcon: design_system_icons_1.PlusIcon,
QuestionCircleIcon: design_system_icons_1.QuestionCircleIcon,
ShareIcon: design_system_icons_1.ShareIcon,
TrashIcon: design_system_icons_1.TrashIcon,
XmarkIcon: design_system_icons_1.XmarkIcon,
};
/**
* @deprecated Please use the new Button component from the design system instead.
* Deprecated: 03/12/2025
* Replacement: Button
* @see https://www.octopus.design/latest/components/actions/button/overview-wdJ4xTRY
* @see https://design-system-components.octopus.design/?path=/docs/components-button--docs
* Reason: The Button component now supports icon only buttons and ensures that the button is always accessible.
*/
exports.DeprecatedIconButton = react_1.default.forwardRef((props, ref) => {
const accessibleName = !props.accessibleName && isPredefinedButtonIconProps(props) ? props.icon : props.accessibleName;
const icon = isPredefinedButtonIconProps(props) ? (0, jsx_runtime_1.jsx)(PredefinedIcon, { icon: props.icon }) : props.customIcon;
return ((0, jsx_runtime_1.jsx)(StyledMaterialIconButton, { icon: icon, accessibleName: accessibleName, className: props.className, ref: ref, style: props.style, onClick: props.onClick, disabled: props.disabled, disableRipple: props.disableRipple, tabIndex: props.tabIndex, "aria-expanded": props["aria-expanded"], "aria-controls": props["aria-controls"], "aria-haspopup": props["aria-haspopup"] }));
});
exports.DeprecatedIconButton.displayName = "DeprecatedIconButton";
function isPredefinedButtonIconProps(props) {
return "icon" in props && isPredefinedIcon(props.icon);
}
function isPredefinedIcon(icon) {
return icon in Icon;
}
function PredefinedIcon({ icon }) {
const ResolvedIcon = Icon[icon];
return (0, jsx_runtime_1.jsx)(ResolvedIcon, { size: 24 });
}
PredefinedIcon.displayName = "PredefinedIcon";
const StyledMaterialIconButton = react_1.default.forwardRef(({ disabled, tabIndex, icon, onClick, accessibleName, style, className, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": ariaHasPopup }, ref) => {
const iconButtonRef = (0, react_1.useRef)(null);
(0, react_1.useImperativeHandle)(ref, () => ({
focus: () => iconButtonRef.current?.focus(),
}));
return ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: className, classes: { root: iconButtonRootStyles }, disabled: disabled, disableRipple: true, disableTouchRipple: true, tabIndex: tabIndex, onClick: onClick, ref: iconButtonRef, style: style, "aria-label": accessibleName, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": ariaHasPopup, children: icon }));
});
StyledMaterialIconButton.displayName = "StyledMaterialIconButton";
const iconButtonClasses = {
root: "MuiIconButton-root",
};
const iconButtonRootStyles = (0, css_1.css)({
[`&.${iconButtonClasses.root}`]: {
padding: 0,
justifyContent: "center",
alignContent: "center",
alignItems: "center",
display: "flex",
color: design_system_tokens_1.themeTokens.color.button.icon.secondary,
},
});
exports.default = exports.DeprecatedIconButton;