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

package/package.json

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

package/ui/Elements/Toggle/Toggle.js

@@ -25,16 +25,26 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from '@xstyled/styled-components';
 import { FieldLabel } from '../Label';
 import { SpaceAroundWrap } from '../SpaceAround';
-var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var $labelPosition = _a.$labelPosition;
-    return ($labelPosition === 'left' ? 'display: flex; align-items: center; margin-top: 1rem' : '');
+import styled, { css } from '@xstyled/styled-components';
+var isHorizontal = function (position) { return position && ['left', 'right'].includes(position); };
+var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  ", "\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  ", "\n"])), function (_a) {
+    var labelPosition = _a.labelPosition;
+    return labelPosition === 'left' ? 'row' : labelPosition === 'right' ? 'row-reverse' : 'column';
+}, function (_a) {
+    var labelPosition = _a.labelPosition;
+    return (labelPosition === 'right' ? 'flex-end' : 'flex-start');
+}, function (_a) {
+    var labelPosition = _a.labelPosition;
+    return (isHorizontal(labelPosition) ? 'margin-top: 1rem' : '');
 });
-var StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
+    var labelPosition = _a.labelPosition;
+    return (isHorizontal(labelPosition) ? 'margin-bottom: 0;' : '');
+}, function (_a) {
     var labelPosition = _a.labelPosition;
-    return (labelPosition === 'left' ? 'margin-bottom: 0; margin-right: 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 : ''); });
@@ -46,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.d.ts

@@ -11,4 +11,6 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Checked: Story;
 export declare const Disabled: Story;
+export declare const LabelRight: Story;
+export declare const LabelLeft: Story;
 export declare const VariantGrid: Story;

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

@@ -8,24 +8,46 @@ 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,
     },
 };
+export var LabelRight = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        labelPosition: 'right'
+    },
+};
+export var LabelLeft = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        labelPosition: 'left'
+    },
+};
 export var VariantGrid = {
     args: {
+        name: 'name',
         label: 'Label',
         checked: true,
         variant: 'grid',

package/ui/Elements/Toggle/types.d.ts

@@ -6,6 +6,8 @@ type SpaceAroundProps = {
     marginLeft?: number;
 };
 type SpaceAround = boolean | SpaceAroundProps;
+export type LabelPosition = 'default' | 'left' | 'right';
+export type Variant = 'primary' | 'grid';
 export type Props = {
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     label?: string;
@@ -15,8 +17,8 @@ export type Props = {
     spaceAround?: SpaceAround;
     spaceBetween?: boolean;
     disabled?: boolean;
-    labelPosition?: 'default' | 'left';
-    variant?: 'primary' | 'grid';
+    labelPosition?: LabelPosition;
+    variant?: Variant;
     readOnly?: boolean;
 };
 export {};