@mailstep/design-system 0.6.75-beta.1 → 0.6.75-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.75-beta.1",
+  "version": "0.6.75-beta.2",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Elements/Toggle/Toggle.js

@@ -44,7 +44,7 @@ var StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2
     return (isHorizontal(labelPosition) ? 'margin-bottom: 0;' : '');
 }, function (_a) {
     var labelPosition = _a.labelPosition;
-    return (labelPosition === 'left' ? 'margin-right: 1rem;' : labelPosition === 'right' ? 'margin-left: 1rem;' : '');
+    return labelPosition === 'left' ? 'margin-right: 1rem;' : labelPosition === 'right' ? 'margin-left: 1rem;' : '';
 });
 var disabledStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0.4;\n"], ["\n  opacity: 0.4;\n"])));
 var StyledToggle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"], ["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"])), function (props) { return (props.disabled ? disabledStyles : ''); });
@@ -56,7 +56,7 @@ var HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTem
 var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"], ["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"])), StyledDot, StyledDot);
 var Toggle = function (_a) {
     var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, readOnly = _a.readOnly, rest = __rest(_a, ["onChange", "label", "name", "checked", "defaultChecked", "spaceAround", "disabled", "labelPosition", "variant", "spaceBetween", "readOnly"]);
-    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, labelPosition: labelPosition, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": "".concat(name, "Switch"), readOnly: readOnly }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
+    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, labelPosition: labelPosition, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { id: name, name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": "".concat(name, "Switch"), readOnly: readOnly }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
 };
 export default Toggle;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/Elements/Toggle/stories/Toggle.stories.js

@@ -8,17 +8,22 @@ var meta = {
 export default meta;
 export var Default = {
     args: {
+        name: 'name',
         label: 'Label',
+        onChange: console.log
     },
 };
 export var Checked = {
     args: {
+        name: 'name',
         label: 'Label',
         checked: true,
+        onChange: console.log
     },
 };
 export var Disabled = {
     args: {
+        name: 'name',
         label: 'Label',
         checked: true,
         disabled: true,
@@ -26,6 +31,7 @@ export var Disabled = {
 };
 export var LabelRight = {
     args: {
+        name: 'name',
         label: 'Label',
         checked: true,
         labelPosition: 'right'
@@ -33,6 +39,7 @@ export var LabelRight = {
 };
 export var LabelLeft = {
     args: {
+        name: 'name',
         label: 'Label',
         checked: true,
         labelPosition: 'left'
@@ -40,6 +47,7 @@ export var LabelLeft = {
 };
 export var VariantGrid = {
     args: {
+        name: 'name',
         label: 'Label',
         checked: true,
         variant: 'grid',