vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
155 lines (154 loc) • 3.59 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef } from 'react';
import { Inline } from '../inline';
const rootCSS = {
width: 40,
height: 24,
position: 'relative',
display: 'inline-block',
verticalAlign: 'middle',
flexGrow: 0,
flexShrink: 0
};
const inputCSS = _ref => {
let {
theme
} = _ref;
return {
height: '100%',
margin: 0,
opacity: 0,
padding: 0,
position: 'absolute',
top: 0,
width: '100%',
'& + span:after': {
content: '""',
position: 'absolute',
margin: 0,
left: -1,
right: -1,
top: -1,
bottom: -1,
transformOrigin: 'center',
borderRadius: 12,
borderWidth: 1
},
':focus-visible': {
'& + span': {
':after': theme.states.focus
}
}
};
};
const backgroundCSS = _ref2 => {
let {
checked,
disabled
} = _ref2;
return _ref3 => {
let {
theme
} = _ref3;
return {
position: 'absolute',
borderWidth: 1,
borderStyle: 'solid',
borderRadius: 12,
top: 0,
left: 0,
right: 0,
bottom: 0,
outlineWidth: 0,
padding: 0,
transition: 'background 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)',
cursor: disabled ? 'not-allowed' : 'pointer',
extend: [{
condition: !checked,
style: {
background: theme.tokens.toggleControlBackground,
borderColor: theme.tokens.toggleControlBackground
}
}, {
condition: checked,
style: {
background: theme.tokens.toggleControlCheckedBackGround,
borderColor: theme.tokens.toggleControlCheckedBackGround
}
}, {
condition: disabled,
style: {
borderColor: theme.tokens.toggleControlBackground,
background: theme.color.background.primary
}
}]
};
};
};
const ballCSS = _ref4 => {
let {
checked,
disabled
} = _ref4;
return _ref5 => {
let {
theme
} = _ref5;
return {
position: 'absolute',
bottom: 1,
width: 20,
height: 20,
borderWidth: 0,
borderStyle: 'solid',
background: theme.tokens.toggleControlForeground,
borderColor: disabled ? theme.tokens.inputDisabledBorder : theme.tokens.inputBorder,
borderRadius: '50%',
transition: 'transform 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)',
transform: checked ? 'translateX(17px)' : 'translateX(1px)',
extend: [{
condition: disabled,
style: {
background: theme.tokens.toggleControlBackground
}
}]
};
};
};
/**
* @deprecated Use `<button role="switch">` instead. See [Switch](https://developer.volvocars.com/design-system/web/?path=/docs/components-switch--docs)
*/
export const Toggle = /*#__PURE__*/forwardRef((_ref6, ref) => {
let {
checked,
disabled,
onChange,
'aria-label': ariaLabel,
...props
} = _ref6;
return /*#__PURE__*/React.createElement(Inline, {
as: "label",
extend: rootCSS
}, /*#__PURE__*/React.createElement(Inline, _extends({
ref: ref,
as: "input",
type: "checkbox",
extend: inputCSS,
checked: checked,
onChange: onChange,
disabled: disabled,
"aria-label": ariaLabel
}, props)), /*#__PURE__*/React.createElement(Inline, {
extend: backgroundCSS({
checked,
disabled
})
}, /*#__PURE__*/React.createElement(Inline, {
extend: ballCSS({
checked,
disabled
})
})));
});
Toggle.displayName = 'Toggle';
export {};