@synerise/ds-switch 0.4.51 → 0.4.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +17 -14
  3. package/dist/Switch.d.ts +1 -2
  4. package/dist/Switch.js +21 -8
  5. package/dist/Switch.styles.d.ts +5 -1
  6. package/dist/Switch.styles.js +17 -7
  7. package/dist/Switch.types.d.ts +13 -7
  8. package/package.json +7 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **switch:** styled switch ([80d89fc](https://github.com/synerise/synerise-design/commit/80d89fcb49bf1b42b4beafd4763e31f689aa062c))
12
+
13
+
14
+
15
+
16
+
17
+ ## [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)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-switch
20
+
21
+
22
+
23
+
24
+
6
25
  ## [0.4.51](https://github.com/synerise/synerise-design/compare/@synerise/ds-switch@0.4.50...@synerise/ds-switch@0.4.51) (2023-12-06)
7
26
 
8
27
  **Note:** Version bump only for package @synerise/ds-switch
package/README.md CHANGED
@@ -15,22 +15,25 @@ Based on [Ant Design Switch](https://ant.design/components/switch/)
15
15
 
16
16
  ### Props
17
17
 
18
- | Property | Description | Type | Default |
19
- | ----------------- | ------------------------------------------------- | ---------------------------------------- | --------- |
20
- | autoFocus | get focus when component mounted | boolean | `false` |
21
- | checked | determine whether the Switch is checked | boolean | `false` |
22
- | checkedChildren | content to be shown when the state is checked | string / React.ReactNode | - |
23
- | className | additional class to Switch | string | - |
24
- | defaultChecked | to set the initial state | boolean | `false` |
25
- | disabled | Disable switch | boolean | `false` |
26
- | description | Switch description | string | - |
27
- | errorText | Error message, when provided changes switch style | string | - |
28
- | label | switch label | string | - |
29
- | loading | loading state of switch | boolean | `false` |
18
+ | Property | Description | Type | Default |
19
+ |-------------------|---------------------------------------------------|-----------------------------------------|-----------|
20
+ | autoFocus | get focus when component mounted | boolean | `false` |
21
+ | checked | determine whether the Switch is checked | boolean | `false` |
22
+ | checkedChildren | content to be shown when the state is checked | string / React.ReactNode | - |
23
+ | className | additional class to Switch | string | - |
24
+ | defaultChecked | to set the initial state | boolean | `false` |
25
+ | disabled | Disable switch | boolean | `false` |
26
+ | description | Switch description | string | - |
27
+ | errorText | Error message, when provided changes switch style | string | - |
28
+ | label | switch label | string | - |
29
+ | tooltip | tooltip next to label | string | null | `null` |
30
+ | tooltipIcon | icon for tooltip | React.ReactNode | - |
31
+ | tooltipConfig | configuration of tooltip | React.ReactNode | - |
32
+ | loading | loading state of switch | boolean | `false` |
30
33
  | onChange | trigger when the checked state is changing | (checked: boolean, event: Event) => void | - |
31
34
  | onClick | trigger when clicked | (checked: boolean, event: Event) => void | - |
32
- | unCheckedChildren | content to be shown when the state is unchecked | string / React.ReactNode | - |
33
- | size | the size of the Switch, | `small` / `default` | `default` |
35
+ | unCheckedChildren | content to be shown when the state is unchecked | string / React.ReactNode | - |
36
+ | size | the size of the Switch, | `small` | `default` | `default` |
34
37
 
35
38
  ### Methods
36
39
 
package/dist/Switch.d.ts CHANGED
@@ -1,6 +1,5 @@
1
- import * as React from 'react';
2
1
  import '@synerise/ds-core/dist/js/style';
3
2
  import './style/index.less';
4
3
  import { Props } from './Switch.types';
5
- export declare const Switch: React.FC<Props>;
4
+ export declare const Switch: ({ errorText, label, description, onChange, withFormElementMargin, tooltipIcon, tooltip, className, ...antdSwitchProps }: Props) => JSX.Element;
6
5
  export default Switch;
package/dist/Switch.js CHANGED
@@ -1,11 +1,13 @@
1
- var _excluded = ["errorText", "label", "description", "onChange"];
1
+ var _excluded = ["errorText", "label", "description", "onChange", "withFormElementMargin", "tooltipIcon", "tooltip", "className"];
2
2
 
3
3
  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); }
4
4
 
5
5
  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; }
6
6
 
7
- import * as React from 'react';
7
+ import React, { useRef } from 'react';
8
+ import classnames from 'classnames';
8
9
  import '@synerise/ds-core/dist/js/style';
10
+ import Label from '@synerise/ds-input/dist/Label/Label';
9
11
  import { v4 as uuid } from 'uuid';
10
12
  import "./style/index.css";
11
13
  import AntdSwitch from 'antd/lib/switch';
@@ -17,13 +19,18 @@ export var Switch = function Switch(_ref) {
17
19
  label = _ref.label,
18
20
  description = _ref.description,
19
21
  _onChange = _ref.onChange,
22
+ withFormElementMargin = _ref.withFormElementMargin,
23
+ tooltipIcon = _ref.tooltipIcon,
24
+ tooltip = _ref.tooltip,
25
+ className = _ref.className,
20
26
  antdSwitchProps = _objectWithoutPropertiesLoose(_ref, _excluded);
21
27
 
22
28
  var id = uuid();
23
- var switchElement = React.useRef(null);
29
+ var switchElement = useRef(null);
24
30
  return /*#__PURE__*/React.createElement(S.SwitchWrapper, {
25
- className: "ds-switch"
26
- }, /*#__PURE__*/React.createElement(ExtendedAntdSwitchComponent // eslint-disable-next-line react/jsx-props-no-spreading
31
+ className: classnames(['ds-switch', className]),
32
+ formElementMargin: Boolean(withFormElementMargin)
33
+ }, /*#__PURE__*/React.createElement(S.LabelSwitchWrapper, null, /*#__PURE__*/React.createElement(ExtendedAntdSwitchComponent // eslint-disable-next-line react/jsx-props-no-spreading
27
34
  , _extends({}, antdSwitchProps, {
28
35
  size: "small",
29
36
  className: errorText ? 'error' : '',
@@ -38,10 +45,16 @@ export var Switch = function Switch(_ref) {
38
45
  })), /*#__PURE__*/React.createElement(S.Texts, {
39
46
  className: "switch-texts"
40
47
  }, /*#__PURE__*/React.createElement(S.Label, {
48
+ className: "switch-texts"
49
+ }, /*#__PURE__*/React.createElement(Label, {
50
+ id: id,
41
51
  className: "switch-label",
42
- htmlFor: id
43
- }, label), /*#__PURE__*/React.createElement(S.BelowLabel, null, errorText && /*#__PURE__*/React.createElement(S.Error, null, errorText), description && /*#__PURE__*/React.createElement(S.Description, {
52
+ label: label,
53
+ tooltip: tooltip
54
+ })))), (errorText || description) && /*#__PURE__*/React.createElement(S.DescriptionWrapper, null, /*#__PURE__*/React.createElement(S.Texts, {
55
+ className: "switch-texts"
56
+ }, /*#__PURE__*/React.createElement(S.BelowLabel, null, errorText && /*#__PURE__*/React.createElement(S.Error, null, errorText), description && /*#__PURE__*/React.createElement(S.Description, {
44
57
  className: "switch-description"
45
- }, description))));
58
+ }, description)))));
46
59
  };
47
60
  export default Switch;
package/dist/Switch.styles.d.ts CHANGED
@@ -1,6 +1,10 @@
1
- export declare const SwitchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
1
+ export declare const SwitchWrapper: import("styled-components").StyledComponent<"div", any, {
2
+ formElementMargin: boolean;
3
+ }, never>;
2
4
  export declare const Texts: import("styled-components").StyledComponent<"div", any, {}, never>;
3
5
  export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
4
6
  export declare const BelowLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const LabelSwitchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
5
8
  export declare const Error: import("styled-components").StyledComponent<"div", any, {}, never>;
6
9
  export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/Switch.styles.js CHANGED
@@ -3,28 +3,38 @@ import { macro } from '@synerise/ds-typography';
3
3
  export var SwitchWrapper = styled.div.withConfig({
4
4
  displayName: "Switchstyles__SwitchWrapper",
5
5
  componentId: "sc-1gmh4sk-0"
6
- })(["display:flex;margin:0 0 16px 0;"]);
6
+ })(["display:flex;gap:3px 0;flex-direction:column;justify-content:space-between;", ";"], function (props) {
7
+ return props.formElementMargin ? 'margin: 0 0 16px 0' : '';
8
+ });
7
9
  export var Texts = styled.div.withConfig({
8
10
  displayName: "Switchstyles__Texts",
9
11
  componentId: "sc-1gmh4sk-1"
10
- })(["margin-left:16px;"]);
12
+ })(["margin-left:16px;display:flex;flex-direction:row;justify-content:space-between;"]);
11
13
  export var Label = styled.label.withConfig({
12
14
  displayName: "Switchstyles__Label",
13
15
  componentId: "sc-1gmh4sk-2"
14
- })(["", ";cursor:pointer;transition:0.3s ease;"], macro.heading);
16
+ })(["", ";cursor:pointer;transition:0.3s ease;width:100%;display:flex;align-items:center;"], macro.heading);
15
17
  export var BelowLabel = styled.div.withConfig({
16
18
  displayName: "Switchstyles__BelowLabel",
17
19
  componentId: "sc-1gmh4sk-3"
18
- })(["margin-top:3px;"]);
20
+ })([""]);
21
+ export var LabelSwitchWrapper = styled.div.withConfig({
22
+ displayName: "Switchstyles__LabelSwitchWrapper",
23
+ componentId: "sc-1gmh4sk-4"
24
+ })(["display:flex;flex-direction:row;justify-content:flex-start;align-items:center;"]);
19
25
  export var Error = styled.div.withConfig({
20
26
  displayName: "Switchstyles__Error",
21
- componentId: "sc-1gmh4sk-4"
27
+ componentId: "sc-1gmh4sk-5"
22
28
  })(["color:", ";margin-bottom:4px;"], function (props) {
23
29
  return props.theme.palette['red-600'];
24
30
  });
25
31
  export var Description = styled.div.withConfig({
26
32
  displayName: "Switchstyles__Description",
27
- componentId: "sc-1gmh4sk-5"
33
+ componentId: "sc-1gmh4sk-6"
28
34
  })(["color:", ";transition:0.3s ease;"], function (props) {
29
35
  return props.theme.palette['grey-600'];
30
- });
36
+ });
37
+ export var DescriptionWrapper = styled.div.withConfig({
38
+ displayName: "Switchstyles__DescriptionWrapper",
39
+ componentId: "sc-1gmh4sk-7"
40
+ })(["justify-content:space-between;padding-left:28px;"]);
package/dist/Switch.types.d.ts CHANGED
@@ -1,7 +1,13 @@
1
- import { SwitchProps } from 'antd/lib/switch';
2
- import * as React from 'react';
3
- export interface Props extends Omit<SwitchProps, 'size'> {
4
- errorText?: string | React.ReactNode;
5
- label: string | React.ReactNode;
6
- description?: string | React.ReactNode;
7
- }
1
+ import { SwitchProps as AntdSwitchProps } from 'antd/lib/switch';
2
+ import { ReactNode } from 'react';
3
+ type TooltipProps = {
4
+ tooltipIcon?: ReactNode;
5
+ tooltip?: ReactNode;
6
+ };
7
+ export type Props = Omit<AntdSwitchProps, 'size'> & {
8
+ errorText?: ReactNode;
9
+ label: ReactNode;
10
+ description?: ReactNode;
11
+ withFormElementMargin?: boolean;
12
+ } & TooltipProps;
13
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-switch",
3
- "version": "0.4.51",
3
+ "version": "0.4.53",
4
4
  "description": "Switch UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -18,7 +18,7 @@
18
18
  "scripts": {
19
19
  "build": "npm run build:js && npm run build:css && npm run defs",
20
20
  "build:css": "node ../../../scripts/style/less.js",
21
- "build:js": "babel --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
21
+ "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
22
22
  "build:watch": "npm run build:js -- --watch",
23
23
  "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
24
24
  "pack:ci": "npm pack --pack-destination ../../portal/storybook-static/static",
@@ -33,8 +33,10 @@
33
33
  ],
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
- "@synerise/ds-typography": "^0.14.0",
37
- "@synerise/ds-utils": "^0.24.21",
36
+ "@synerise/ds-input": "^0.19.12",
37
+ "@synerise/ds-typography": "^0.14.1",
38
+ "@synerise/ds-utils": "^0.24.23",
39
+ "classnames": "2.3.2",
38
40
  "uuid": "^8.3.2"
39
41
  },
40
42
  "peerDependencies": {
@@ -46,5 +48,5 @@
46
48
  "devDependencies": {
47
49
  "@testing-library/react": "10.0.1"
48
50
  },
49
- "gitHead": "b5c243a1f88351e9bc0185d35fc35ea3673dab89"
51
+ "gitHead": "76edb4723a30c59f1a54f666f66fcd814de0af70"
50
52
  }