@mailstep/design-system 0.7.12 → 0.7.13

package/package.json

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

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

@@ -1,3 +1,3 @@
 import { Props } from './types';
-declare const Toggle: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, readOnly, ...rest }: Props) => JSX.Element;
+declare const Toggle: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, labelJustify, variant, spaceBetween, readOnly, ...rest }: Props) => JSX.Element;
 export default Toggle;

package/ui/Elements/Toggle/Toggle.js

@@ -33,8 +33,8 @@ var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templat
     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');
+    var labelPosition = _a.labelPosition, labelJustify = _a.labelJustify;
+    return labelPosition === 'right' ? 'flex-end' : labelJustify === 'between' ? 'space-between' : 'flex-start';
 }, function (_a) {
     var labelPosition = _a.labelPosition;
     return (isHorizontal(labelPosition) ? 'margin-top: 1rem' : '');
@@ -55,8 +55,8 @@ 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, { 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, {}) }))] })] }));
+    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, labelJustify = _a.labelJustify, _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", "labelJustify", "variant", "spaceBetween", "readOnly"]);
+    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, labelPosition: labelPosition, labelJustify: labelJustify, 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

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, readOnly, ...rest }: import("../types").Props) => JSX.Element;
+    component: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, labelJustify, variant, spaceBetween, readOnly, ...rest }: import("../types").Props) => JSX.Element;
     tags: string[];
     argTypes: {};
 };
@@ -13,4 +13,5 @@ export declare const Checked: Story;
 export declare const Disabled: Story;
 export declare const LabelRight: Story;
 export declare const LabelLeft: Story;
+export declare const LabelJustifyBetween: Story;
 export declare const VariantGrid: Story;

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

@@ -3,7 +3,7 @@ var meta = {
     title: 'Elements/Toggle',
     component: Toggle,
     tags: ['autodocs'],
-    argTypes: {},
+    argTypes: {}
 };
 export default meta;
 export var Default = {
@@ -11,7 +11,7 @@ export var Default = {
         name: 'name',
         label: 'Label',
         onChange: console.log
-    },
+    }
 };
 export var Checked = {
     args: {
@@ -19,15 +19,15 @@ export var Checked = {
         label: 'Label',
         checked: true,
         onChange: console.log
-    },
+    }
 };
 export var Disabled = {
     args: {
         name: 'name',
         label: 'Label',
         checked: true,
-        disabled: true,
-    },
+        disabled: true
+    }
 };
 export var LabelRight = {
     args: {
@@ -35,7 +35,7 @@ export var LabelRight = {
         label: 'Label',
         checked: true,
         labelPosition: 'right'
-    },
+    }
 };
 export var LabelLeft = {
     args: {
@@ -43,13 +43,22 @@ export var LabelLeft = {
         label: 'Label',
         checked: true,
         labelPosition: 'left'
-    },
+    }
+};
+export var LabelJustifyBetween = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        labelPosition: 'left',
+        labelJustify: 'between'
+    }
 };
 export var VariantGrid = {
     args: {
         name: 'name',
         label: 'Label',
         checked: true,
-        variant: 'grid',
-    },
+        variant: 'grid'
+    }
 };

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

@@ -7,6 +7,7 @@ type SpaceAroundProps = {
 };
 type SpaceAround = boolean | SpaceAroundProps;
 export type LabelPosition = 'default' | 'left' | 'right';
+export type LabelJustify = 'between';
 export type Variant = 'primary' | 'grid';
 export type Props = {
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -18,6 +19,7 @@ export type Props = {
     spaceBetween?: boolean;
     disabled?: boolean;
     labelPosition?: LabelPosition;
+    labelJustify?: LabelJustify;
     variant?: Variant;
     readOnly?: boolean;
 };

package/ui/index.es.js

@@ -28693,8 +28693,9 @@ const U4e = z.div`
   labelPosition: e
 }) => e === "left" ? "row" : e === "right" ? "row-reverse" : "column"};
   justify-content: ${({
-  labelPosition: e
-}) => e === "right" ? "flex-end" : "flex-start"};
+  labelPosition: e,
+  labelJustify: t
+}) => e === "right" ? "flex-end" : t === "between" ? "space-between" : "flex-start"};
   ${({
   labelPosition: e
 }) => eP(e) ? "margin-top: 1rem" : ""}
@@ -28781,15 +28782,16 @@ const U4e = z.div`
   spaceAround: a = !1,
   disabled: o = !1,
   labelPosition: s = "default",
-  variant: l = "primary",
-  spaceBetween: u = !1,
-  readOnly: f,
-  ...A
-}) => /* @__PURE__ */ p.jsxs(K4e, { spaceBetween: u, spaceAround: a, labelPosition: s, children: [
+  labelJustify: l,
+  variant: u = "primary",
+  spaceBetween: f = !1,
+  readOnly: A,
+  ...h
+}) => /* @__PURE__ */ p.jsxs(K4e, { spaceBetween: f, spaceAround: a, labelPosition: s, labelJustify: l, children: [
   t && /* @__PURE__ */ p.jsx(q4e, { htmlFor: r, labelPosition: s, children: t }),
-  /* @__PURE__ */ p.jsxs(rve, { "data-appearance": l, children: [
-    /* @__PURE__ */ p.jsx(tve, { id: r, name: r, type: "checkbox", checked: n, $enabled: !o, defaultChecked: i, onChange: o ? void 0 : e, disabled: o, "data-cy": `${r}Switch`, readOnly: f }),
-    /* @__PURE__ */ p.jsx(eve, { active: !!n, disabled: o, ...A, children: /* @__PURE__ */ p.jsx(l3, {}) })
+  /* @__PURE__ */ p.jsxs(rve, { "data-appearance": u, children: [
+    /* @__PURE__ */ p.jsx(tve, { id: r, name: r, type: "checkbox", checked: n, $enabled: !o, defaultChecked: i, onChange: o ? void 0 : e, disabled: o, "data-cy": `${r}Switch`, readOnly: A }),
+    /* @__PURE__ */ p.jsx(eve, { active: !!n, disabled: o, ...h, children: /* @__PURE__ */ p.jsx(l3, {}) })
   ] })
 ] }), tP = z.div`
   padding-right: 12px;

package/ui/index.umd.js

@@ -2109,7 +2109,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
 `,Pfe=({name:e,label:t,onChange:r,checked:n,defaultChecked:i,size:a=4,className:o,disabled:s,inputRef:l,readOnly:u,minusIcon:f=!1})=>{const A=at(),h=R.fontSize(a)({theme:A}),g=x.useId();return p.jsxs(kfe,{size:h,className:o,children:[p.jsx("input",{type:"checkbox",ref:l,name:e,checked:n,defaultChecked:i,disabled:s,onChange:r,value:"",readOnly:u,"data-cy":e&&`${e}Checkbox`,id:g}),p.jsx(k3,{size:h,children:p.jsx(Ife,{icon:f?"minus":"check",size:h})}),t&&p.jsx(Ofe,{htmlFor:g,children:t})]})},Dc=x.memo(Pfe),tE=e=>e&&["left","right"].includes(e),Tfe=G(Io)`
   display: flex;
   flex-direction: ${({labelPosition:e})=>e==="left"?"row":e==="right"?"row-reverse":"column"};
-  justify-content: ${({labelPosition:e})=>e==="right"?"flex-end":"flex-start"};
+  justify-content: ${({labelPosition:e,labelJustify:t})=>e==="right"?"flex-end":t==="between"?"space-between":"flex-start"};
   ${({labelPosition:e})=>tE(e)?"margin-top: 1rem":""}
 `,Mfe=G(ic)`
   cursor: pointer;
@@ -2179,7 +2179,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       height: 12px;
     }
   }
-`,Lc=({onChange:e,label:t,name:r,checked:n,defaultChecked:i,spaceAround:a=!1,disabled:o=!1,labelPosition:s="default",variant:l="primary",spaceBetween:u=!1,readOnly:f,...A})=>p.jsxs(Tfe,{spaceBetween:u,spaceAround:a,labelPosition:s,children:[t&&p.jsx(Mfe,{htmlFor:r,labelPosition:s,children:t}),p.jsxs(Bfe,{"data-appearance":l,children:[p.jsx(Nfe,{id:r,name:r,type:"checkbox",checked:n,$enabled:!o,defaultChecked:i,onChange:o?void 0:e,disabled:o,"data-cy":`${r}Switch`,readOnly:f}),p.jsx(Lfe,{active:!!n,disabled:o,...A,children:p.jsx(O3,{})})]})]}),rE=G.div`
+`,Lc=({onChange:e,label:t,name:r,checked:n,defaultChecked:i,spaceAround:a=!1,disabled:o=!1,labelPosition:s="default",labelJustify:l,variant:u="primary",spaceBetween:f=!1,readOnly:A,...h})=>p.jsxs(Tfe,{spaceBetween:f,spaceAround:a,labelPosition:s,labelJustify:l,children:[t&&p.jsx(Mfe,{htmlFor:r,labelPosition:s,children:t}),p.jsxs(Bfe,{"data-appearance":u,children:[p.jsx(Nfe,{id:r,name:r,type:"checkbox",checked:n,$enabled:!o,defaultChecked:i,onChange:o?void 0:e,disabled:o,"data-cy":`${r}Switch`,readOnly:A}),p.jsx(Lfe,{active:!!n,disabled:o,...h,children:p.jsx(O3,{})})]})]}),rE=G.div`
   padding-right: 12px;
 `,jfe=G.div`
   display: flex;