@synerise/ds-switch 0.4.52 → 0.4.53

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.53](https://github.com/synerise/synerise-design/compare/@synerise/ds-switch@0.4.52...@synerise/ds-switch@0.4.53) (2023-12-13)
+
+
+### Bug Fixes
+
+* **switch:** styled switch ([80d89fc](https://github.com/synerise/synerise-design/commit/80d89fcb49bf1b42b4beafd4763e31f689aa062c))
+
+
+
+
+
 ## [0.4.52](https://github.com/synerise/synerise-design/compare/@synerise/ds-switch@0.4.51...@synerise/ds-switch@0.4.52) (2023-12-11)
 
 **Note:** Version bump only for package @synerise/ds-switch

package/README.md

@@ -15,22 +15,25 @@ Based on [Ant Design Switch](https://ant.design/components/switch/)
 
 ### Props
 
-| Property          | Description                                       | Type                                     | Default   |
-| ----------------- | ------------------------------------------------- | ---------------------------------------- | --------- |
-| autoFocus         | get focus when component mounted                  | boolean                                  | `false`   |
-| checked           | determine whether the Switch is checked           | boolean                                  | `false`   |
-| checkedChildren   | content to be shown when the state is checked     | string / React.ReactNode                 | -         |
-| className         | additional class to Switch                        | string                                   | -         |
-| defaultChecked    | to set the initial state                          | boolean                                  | `false`   |
-| disabled          | Disable switch                                    | boolean                                  | `false`   |
-| description       | Switch description                                | string                                   | -         |
-| errorText         | Error message, when provided changes switch style | string                                   | -         |
-| label             | switch label                                      | string                                   | -         |
-| loading           | loading state of switch                           | boolean                                  | `false`   |
+| Property          | Description                                       | Type                                    | Default   |
+|-------------------|---------------------------------------------------|-----------------------------------------|-----------|
+| autoFocus         | get focus when component mounted                  | boolean                                 | `false`   |
+| checked           | determine whether the Switch is checked           | boolean                                 | `false`   |
+| checkedChildren   | content to be shown when the state is checked     | string / React.ReactNode                | -         |
+| className         | additional class to Switch                        | string                                  | -         |
+| defaultChecked    | to set the initial state                          | boolean                                 | `false`   |
+| disabled          | Disable switch                                    | boolean                                 | `false`   |
+| description       | Switch description                                | string                                  | -         |
+| errorText         | Error message, when provided changes switch style | string                                  | -         |
+| label             | switch label                                      | string                                  | -         |
+| tooltip           | tooltip next to label                             | string | null                      | `null`    |
+| tooltipIcon       | icon for tooltip                                  | React.ReactNode                         | -         |
+| tooltipConfig     | configuration of tooltip                          | React.ReactNode                         | -         |
+| loading           | loading state of switch                           | boolean                                 | `false`   |
 | onChange          | trigger when the checked state is changing        | (checked: boolean, event: Event) => void | -         |
 | onClick           | trigger when clicked                              | (checked: boolean, event: Event) => void | -         |
-| unCheckedChildren | content to be shown when the state is unchecked   | string / React.ReactNode                 | -         |
-| size              | the size of the Switch,                           | `small` / `default`                      | `default` |
+| unCheckedChildren | content to be shown when the state is unchecked   | string / React.ReactNode                | -         |
+| size              | the size of the Switch,                           | `small` | `default`                      | `default` |
 
 ### Methods
 

package/dist/Switch.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import '@synerise/ds-core/dist/js/style';
 import './style/index.less';
 import { Props } from './Switch.types';
-export declare const Switch: React.FC<Props>;
+export declare const Switch: ({ errorText, label, description, onChange, withFormElementMargin, tooltipIcon, tooltip, className, ...antdSwitchProps }: Props) => JSX.Element;
 export default Switch;

package/dist/Switch.js

@@ -1,11 +1,13 @@
-var _excluded = ["errorText", "label", "description", "onChange"];
+var _excluded = ["errorText", "label", "description", "onChange", "withFormElementMargin", "tooltipIcon", "tooltip", "className"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import * as React from 'react';
+import React, { useRef } from 'react';
+import classnames from 'classnames';
 import '@synerise/ds-core/dist/js/style';
+import Label from '@synerise/ds-input/dist/Label/Label';
 import { v4 as uuid } from 'uuid';
 import "./style/index.css";
 import AntdSwitch from 'antd/lib/switch';
@@ -17,13 +19,18 @@ export var Switch = function Switch(_ref) {
       label = _ref.label,
       description = _ref.description,
       _onChange = _ref.onChange,
+      withFormElementMargin = _ref.withFormElementMargin,
+      tooltipIcon = _ref.tooltipIcon,
+      tooltip = _ref.tooltip,
+      className = _ref.className,
       antdSwitchProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var id = uuid();
-  var switchElement = React.useRef(null);
+  var switchElement = useRef(null);
   return /*#__PURE__*/React.createElement(S.SwitchWrapper, {
-    className: "ds-switch"
-  }, /*#__PURE__*/React.createElement(ExtendedAntdSwitchComponent // eslint-disable-next-line react/jsx-props-no-spreading
+    className: classnames(['ds-switch', className]),
+    formElementMargin: Boolean(withFormElementMargin)
+  }, /*#__PURE__*/React.createElement(S.LabelSwitchWrapper, null, /*#__PURE__*/React.createElement(ExtendedAntdSwitchComponent // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, antdSwitchProps, {
     size: "small",
     className: errorText ? 'error' : '',
@@ -38,10 +45,16 @@ export var Switch = function Switch(_ref) {
   })), /*#__PURE__*/React.createElement(S.Texts, {
     className: "switch-texts"
   }, /*#__PURE__*/React.createElement(S.Label, {
+    className: "switch-texts"
+  }, /*#__PURE__*/React.createElement(Label, {
+    id: id,
     className: "switch-label",
-    htmlFor: id
-  }, label), /*#__PURE__*/React.createElement(S.BelowLabel, null, errorText && /*#__PURE__*/React.createElement(S.Error, null, errorText), description && /*#__PURE__*/React.createElement(S.Description, {
+    label: label,
+    tooltip: tooltip
+  })))), (errorText || description) && /*#__PURE__*/React.createElement(S.DescriptionWrapper, null, /*#__PURE__*/React.createElement(S.Texts, {
+    className: "switch-texts"
+  }, /*#__PURE__*/React.createElement(S.BelowLabel, null, errorText && /*#__PURE__*/React.createElement(S.Error, null, errorText), description && /*#__PURE__*/React.createElement(S.Description, {
     className: "switch-description"
-  }, description))));
+  }, description)))));
 };
 export default Switch;

package/dist/Switch.styles.d.ts

@@ -1,6 +1,10 @@
-export declare const SwitchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SwitchWrapper: import("styled-components").StyledComponent<"div", any, {
+    formElementMargin: boolean;
+}, never>;
 export declare const Texts: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const BelowLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LabelSwitchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Error: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Switch.styles.js

@@ -3,28 +3,38 @@ import { macro } from '@synerise/ds-typography';
 export var SwitchWrapper = styled.div.withConfig({
   displayName: "Switchstyles__SwitchWrapper",
   componentId: "sc-1gmh4sk-0"
-})(["display:flex;margin:0 0 16px 0;"]);
+})(["display:flex;gap:3px 0;flex-direction:column;justify-content:space-between;", ";"], function (props) {
+  return props.formElementMargin ? 'margin: 0 0 16px 0' : '';
+});
 export var Texts = styled.div.withConfig({
   displayName: "Switchstyles__Texts",
   componentId: "sc-1gmh4sk-1"
-})(["margin-left:16px;"]);
+})(["margin-left:16px;display:flex;flex-direction:row;justify-content:space-between;"]);
 export var Label = styled.label.withConfig({
   displayName: "Switchstyles__Label",
   componentId: "sc-1gmh4sk-2"
-})(["", ";cursor:pointer;transition:0.3s ease;"], macro.heading);
+})(["", ";cursor:pointer;transition:0.3s ease;width:100%;display:flex;align-items:center;"], macro.heading);
 export var BelowLabel = styled.div.withConfig({
   displayName: "Switchstyles__BelowLabel",
   componentId: "sc-1gmh4sk-3"
-})(["margin-top:3px;"]);
+})([""]);
+export var LabelSwitchWrapper = styled.div.withConfig({
+  displayName: "Switchstyles__LabelSwitchWrapper",
+  componentId: "sc-1gmh4sk-4"
+})(["display:flex;flex-direction:row;justify-content:flex-start;align-items:center;"]);
 export var Error = styled.div.withConfig({
   displayName: "Switchstyles__Error",
-  componentId: "sc-1gmh4sk-4"
+  componentId: "sc-1gmh4sk-5"
 })(["color:", ";margin-bottom:4px;"], function (props) {
   return props.theme.palette['red-600'];
 });
 export var Description = styled.div.withConfig({
   displayName: "Switchstyles__Description",
-  componentId: "sc-1gmh4sk-5"
+  componentId: "sc-1gmh4sk-6"
 })(["color:", ";transition:0.3s ease;"], function (props) {
   return props.theme.palette['grey-600'];
-});
+});
+export var DescriptionWrapper = styled.div.withConfig({
+  displayName: "Switchstyles__DescriptionWrapper",
+  componentId: "sc-1gmh4sk-7"
+})(["justify-content:space-between;padding-left:28px;"]);

package/dist/Switch.types.d.ts

@@ -1,7 +1,13 @@
-import { SwitchProps } from 'antd/lib/switch';
-import * as React from 'react';
-export interface Props extends Omit<SwitchProps, 'size'> {
-    errorText?: string | React.ReactNode;
-    label: string | React.ReactNode;
-    description?: string | React.ReactNode;
-}
+import { SwitchProps as AntdSwitchProps } from 'antd/lib/switch';
+import { ReactNode } from 'react';
+type TooltipProps = {
+    tooltipIcon?: ReactNode;
+    tooltip?: ReactNode;
+};
+export type Props = Omit<AntdSwitchProps, 'size'> & {
+    errorText?: ReactNode;
+    label: ReactNode;
+    description?: ReactNode;
+    withFormElementMargin?: boolean;
+} & TooltipProps;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-switch",
-  "version": "0.4.52",
+  "version": "0.4.53",
   "description": "Switch UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -33,8 +33,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@synerise/ds-input": "^0.19.12",
     "@synerise/ds-typography": "^0.14.1",
-    "@synerise/ds-utils": "^0.24.22",
+    "@synerise/ds-utils": "^0.24.23",
+    "classnames": "2.3.2",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
@@ -46,5 +48,5 @@
   "devDependencies": {
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "5ab278e69cd049334216bc9867cca2ce6a5fc218"
+  "gitHead": "76edb4723a30c59f1a54f666f66fcd814de0af70"
 }