@octopusdeploy/design-system-components
Version:
The design systems component library.
147 lines (146 loc) • 6.79 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.Checkbox = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const React = __importStar(require("react"));
const FormFieldTitle_1 = require("../FormFieldTitle");
/* @deprecated
* Deprecated: 14/10/2025
* Migration guidelines: This component is deprecated and will be removed in a future release.
* This is part of our ongoing improvements to forms and input components to enhance usability and accessibility.
*
* Please migrate to the CheckboxNew component where possible.
*
* We recognize CheckboxNew has different styling; if that prevents an immediate swap, you may continue using this
* component until all the new form components are in place.
*/
const Checkbox = ({ title, label, className, value, noMargin, onChange, note, error, warning, accessibleName, autoFocus, disabled, popover }) => {
const checkBoxRef = React.useRef(null);
const handleChange = React.useCallback((event, isChecked) => {
if (onChange) {
onChange(isChecked);
}
}, [onChange]);
const isMessageProvided = Boolean(error) || Boolean(warning);
const message = isMessageProvided && (error || warning);
const messageColorStyles = isMessageProvided ? (message === error ? errorMessageStyles : warningMessageStyles) : undefined;
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(className, { [containerMarginStyles]: !noMargin }), children: [title && (0, jsx_runtime_1.jsx)(FormFieldTitle_1.FormFieldTitle, { title: title }), (0, jsx_runtime_1.jsxs)("div", { className: formControlAndPopoverStyles, children: [(0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { slotProps: { input: { "aria-label": accessibleName } }, className: checkboxStyles, action: checkBoxRef, checked: value, onChange: handleChange, autoFocus: autoFocus, disableRipple: true, disableTouchRipple: true, disableFocusRipple: true }), label: label, className: formControlLabelStyles, disabled: disabled }), popover] }), message && (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(messageStyles, messageColorStyles), children: message }), note && (0, jsx_runtime_1.jsx)(CheckboxNote, { note: note })] }));
};
exports.Checkbox = Checkbox;
const formControlLabelClasses = {
root: "MuiFormControlLabel-root",
label: "MuiFormControlLabel-label",
};
const checkboxClasses = {
root: "MuiCheckbox-root",
};
const commonClasses = {
checked: "Mui-checked",
disabled: "Mui-disabled",
focusVisible: "Mui-focusVisible",
};
const containerMarginStyles = (0, css_1.css)({
marginTop: "1rem",
marginBottom: design_system_tokens_1.space[16],
width: "100%",
});
const formControlLabelStyles = (0, css_1.css)({
[`&.${formControlLabelClasses.root}`]: {
maxWidth: "100%",
margin: 0,
[`.${formControlLabelClasses.label}`]: {
fontSize: "inherit",
color: design_system_tokens_1.themeTokens.color.text.primary,
},
[`.${formControlLabelClasses.label}.${commonClasses.disabled}`]: {
color: design_system_tokens_1.themeTokens.color.text.disabled,
cursor: "not-allowed",
},
},
});
const formControlAndPopoverStyles = (0, css_1.css)({
display: "flex",
alignItems: "center",
gap: design_system_tokens_1.space[4],
});
const checkboxStyles = (0, css_1.css)({
[`&.${checkboxClasses.root}`]: {
padding: 0,
marginRight: design_system_tokens_1.space[8],
borderRadius: design_system_tokens_1.borderRadius.extraSmall,
color: design_system_tokens_1.themeTokens.color.icon.primary,
":hover": {
backgroundColor: "unset",
},
},
[`&.${checkboxClasses.root}.${commonClasses.checked}`]: {
color: design_system_tokens_1.themeTokens.color.icon.selected,
":hover": {
backgroundColor: "unset",
},
},
[`&.${checkboxClasses.root}.${commonClasses.disabled}`]: {
color: design_system_tokens_1.themeTokens.color.icon.disabled,
},
[`&.${checkboxClasses.root}.${commonClasses.focusVisible}`]: {
boxShadow: design_system_tokens_1.themeTokens.shadow.focused,
},
});
const messageStyles = (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.xSmall,
});
const warningMessageStyles = (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.warning,
});
const errorMessageStyles = (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.danger,
});
function CheckboxNote({ note }) {
return (0, jsx_runtime_1.jsx)("div", { className: checkboxNoteStyles, children: note });
}
const checkboxNoteStyles = (0, css_1.css)({
marginLeft: design_system_tokens_1.space[32],
font: design_system_tokens_1.text.body.regular.xSmall,
marginBottom: design_system_tokens_1.space[8],
color: design_system_tokens_1.themeTokens.color.text.tertiary,
});