@carbon/react
Version:
React components for the Carbon Design System
63 lines (59 loc) • 2.05 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2023
*
* 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import cx from 'classnames';
import { PrefixContext } from '../../internal/usePrefix.js';
var _path;
const ToggleSmallSkeleton = ({
id,
labelText,
className,
...rest
}) => {
const prefix = useContext(PrefixContext);
return /*#__PURE__*/React.createElement("div", _extends({
className: cx(`${prefix}--form-item`, className)
}, rest), /*#__PURE__*/React.createElement("input", {
type: "checkbox",
id: id,
className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
}), /*#__PURE__*/React.createElement("label", {
className: `${prefix}--toggle__label ${prefix}--skeleton`,
htmlFor: id
}, labelText && /*#__PURE__*/React.createElement("span", {
className: `${prefix}--toggle__label-text`
}, labelText), /*#__PURE__*/React.createElement("span", {
className: `${prefix}--toggle__appearance`
}, /*#__PURE__*/React.createElement("svg", {
className: `${prefix}--toggle__check`,
width: "6px",
height: "5px",
viewBox: "0 0 6 5"
}, _path || (_path = /*#__PURE__*/React.createElement("path", {
d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
}))))));
};
ToggleSmallSkeleton.propTypes = {
['aria-label']: PropTypes.string.isRequired,
/**
* Specify an optional className to add to the form item wrapper.
*/
className: PropTypes.string,
/**
* Provide an id that unique represents the underlying `<input>`
*/
id: PropTypes.string,
/**
* Provide the text that will be read by a screen reader when visiting this
* control. `aria-label` is always required but will be `null` if `labelText`
* is also provided.
*/
labelText: PropTypes.string
};
export { ToggleSmallSkeleton };