@synerise/ds-button 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.21.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.20.1...@synerise/ds-button@0.21.0) (2024-06-21)
+
+
+### Features
+
+* **button:** disabled tooltip for button ([74fca04](https://github.com/synerise/synerise-design/commit/74fca04c9c02088c8bc59e055c7ffae0469e6355))
+
+
+
+
+
+## [0.20.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.20.0...@synerise/ds-button@0.20.1) (2024-05-29)
+
+
+### Bug Fixes
+
+* **button:** add type to ButtonWithStar ([173e81b](https://github.com/synerise/synerise-design/commit/173e81b60667fd3334c9695aa9cfdf124f3a71c2))
+
+
+
+
+
 # [0.20.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.19.9...@synerise/ds-button@0.20.0) (2024-05-16)
 
 

package/README.md

@@ -54,19 +54,19 @@ import { AngleDownS } from '@synerise/ds-icon';
 
 ## Button
 
-| Property       | Description                                                                  | Type                                                                                                                                      | Default     |
-| -------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| color          | Defines color of `custom-color` button.                                      | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet`                                      | `red`       |
-| disabled       | Defines if the button is disabled.                                           | boolean                                                                                                                                   | `false`     |
-| groupVariant   | Defines shape of the button                                                  | `left-rounded` / `squared` / `right-rounded`                                                                                              | -           |
-| justifyContent | Defines justify of content in button.                                        | JustifyContentProperty (React.CSSPRroperties)                                                                                             | -           |
-| loading        | Sets the loading status of button.                                           | boolean / `{ delay?: number }`                                                                                                            | `false`     |
-| mode           | Defines the mode of the button content. It affects content inside the button | `single-icon` / `split` / `two-icons` /`label-icon` / `icon-label`                                                                        | -           |
-| onClick        | Callback executed after clicking the button                                  | (event: React.MouseEvent) => void                                                                                                         | -           |
-| type           | Defines the type of the button.                                              | `primary` / `secondary`/ `tertiary`/ `tertiary-white` / `ghost-primary` / `ghost` / `ghost-white` / `custom-color` / `custom-color-ghost` | `secondary` |
-| iconColor      | Defines color of `icon` in button.                                           | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet`                                      | `grey`      |
-| error          | Defines if the button has error button styles .                              | boolean                                                                                                                                   | `false`     |
-| activated      | Defines if the button has activated button styles .                          | boolean                                                                                                                                   | `false`     |
+| Property             | Description                                                                  | Type                                                                                                                                      | Default     |
+| -------------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| color                | Defines color of `custom-color` button.                                      | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet`                                      | `red`       |
+| disabled             | Defines if the button is disabled.                                           | boolean                                                                                                                                   | `false`     |
+| groupVariant         | Defines shape of the button                                                  | `left-rounded` / `squared` / `right-rounded`                                                                                              | -           |
+| justifyContent       | Defines justify of content in button.                                        | JustifyContentProperty (React.CSSPRroperties)                                                                                             | -           |
+| loading              | Sets the loading status of button.                                           | boolean / `{ delay?: number }`                                                                                                            | `false`     |
+| mode                 | Defines the mode of the button content. It affects content inside the button | `single-icon` / `split` / `two-icons` /`label-icon` / `icon-label`                                                                        | -           |
+| onClick              | Callback executed after clicking the button                                  | (event: React.MouseEvent) => void                                                                                                         | -           |
+| type                 | Defines the type of the button.                                              | `primary` / `secondary`/ `tertiary`/ `tertiary-white` / `ghost-primary` / `ghost` / `ghost-white` / `custom-color` / `custom-color-ghost` | `secondary` |
+| iconColor            | Defines color of `icon` in button.                                           | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet`                                      | `grey`      |
+| error                | Defines if the button has error button styles .                              | boolean                                                                                                                                   | `false`     |
+| activated            | Defines if the button has activated button styles .                          | boolean                                                                                                                                   | `false`     |
 
 ## Button.Creator
 

package/dist/Button.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 import '@synerise/ds-core/dist/js/style';
 import './style/index.less';
-import { Props } from './Button.types';
-declare const Button: React.FC<Props>;
+import { ButtonProps } from './Button.types';
+declare const Button: ({ type, mode, justifyContent, groupVariant, loading, onClick, className, color, error, activated, ...antdProps }: ButtonProps) => React.JSX.Element;
 export default Button;

package/dist/Button.js

@@ -4,7 +4,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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, { useEffect, useState, useMemo, useRef } from 'react';
 import '@synerise/ds-core/dist/js/style';
 import "./style/index.css";
 import Icon, { SpinnerM } from '@synerise/ds-icon';
@@ -28,17 +28,17 @@ var Button = function Button(_ref) {
       activated = _ref.activated,
       antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var rippleRef = React.useRef(null);
+  var rippleRef = useRef(null);
 
-  var _React$useState = React.useState(''),
-      rippleClassName = _React$useState[0],
-      setRippleClassName = _React$useState[1];
+  var _useState = useState(''),
+      rippleClassName = _useState[0],
+      setRippleClassName = _useState[1];
 
-  var _React$useState2 = React.useState(false),
-      pressed = _React$useState2[0],
-      setPressed = _React$useState2[1];
+  var _useState2 = useState(false),
+      pressed = _useState2[0],
+      setPressed = _useState2[1];
 
-  React.useEffect(function () {
+  useEffect(function () {
     if (rippleClassName !== '') {
       setTimeout(function () {
         setRippleClassName('');
@@ -63,7 +63,7 @@ var Button = function Button(_ref) {
     }
   };
 
-  var classNameString = React.useMemo(function () {
+  var classNameString = useMemo(function () {
     var modeStringifed = mode || '';
     var readOnlyStringifed = antdProps.readOnly ? 'read-only' : '';
     var classNameStringifed = className || '';

package/dist/Button.styles.d.ts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 export declare const RIPPLE_ANIMATION_TIME = 500;
 export declare const Spinner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RippleEffect: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ButtonFocus: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AntdButton: import("styled-components").StyledComponent<({ mode, type, loading, justifyContent, groupVariant, customColor, rightIconSize, leftIconSize, pressed, size, iconColor, error, activated, ...rest }: any) => JSX.Element, any, {}, never>;
+export declare const AntdButton: import("styled-components").StyledComponent<({ mode, type, loading, justifyContent, groupVariant, customColor, rightIconSize, leftIconSize, pressed, size, iconColor, error, activated, ...rest }: any) => React.JSX.Element, any, {}, never>;

package/dist/Button.types.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { ButtonProps } from 'antd/lib/button';
+import { ElementType, MouseEvent } from 'react';
+import { ButtonProps as AntdButtonProps } from 'antd/lib/button';
 import { JustifyContentProperty } from 'csstype';
-export type Props = Omit<ButtonProps, 'type'> & {
+export type ButtonProps = Omit<AntdButtonProps, 'type'> & {
     /**
      * Defines the type of the button. It affects the button color
      *
@@ -38,13 +38,14 @@ export type Props = Omit<ButtonProps, 'type'> & {
     /**
      * Sets the handler to handle `click` event
      */
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
     iconColor?: string | 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
     error?: boolean;
     activated?: boolean;
     readOnly?: boolean;
 };
+export type Props = ButtonProps;
 export type ButtonSubComponents = {
-    Expander: React.ElementType;
-    Creator: React.ElementType;
+    Expander: ElementType;
+    Creator: ElementType;
 };

package/dist/Creator/Creator.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { CreatorProps } from './Creator.types';
-declare const Creator: ({ onClick, disabled, label, block, status, className }: CreatorProps) => JSX.Element;
+declare const Creator: ({ onClick, disabled, label, block, status, className }: CreatorProps) => React.JSX.Element;
 export default Creator;

package/dist/Creator/Creator.styles.d.ts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 export declare const CreatorLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Creator: import("styled-components").StyledComponent<({ status, pressed, withLabel, ...rest }: any) => JSX.Element, any, {
+export declare const Creator: import("styled-components").StyledComponent<({ status, pressed, withLabel, ...rest }: any) => React.JSX.Element, any, {
     withLabel: boolean;
     pressed: boolean;
     status: string;

package/dist/Expander/Expander.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ExpanderProps } from './Expander.types';
-declare const Expander: ({ size, expanded, disabled, onClick, className }: ExpanderProps) => JSX.Element;
+declare const Expander: ({ size, expanded, disabled, onClick, className }: ExpanderProps) => React.JSX.Element;
 export default Expander;

package/dist/Expander/Expander.styles.d.ts

@@ -1,4 +1,5 @@
 import { Keyframes } from 'styled-components';
+import * as React from 'react';
 import { ThemeProps } from '@synerise/ds-core';
 export type ExpanderProps = {
     onClick: () => void;
@@ -7,4 +8,4 @@ export type ExpanderProps = {
     expanded: boolean;
 };
 export declare const focusAnimation: ({ theme }: ThemeProps) => Keyframes;
-export declare const Expander: import("styled-components").StyledComponent<({ children, expanded, size, ...rest }: any) => JSX.Element, any, {}, never>;
+export declare const Expander: import("styled-components").StyledComponent<({ children, expanded, size, ...rest }: any) => React.JSX.Element, any, {}, never>;

package/dist/Star/Star.js

@@ -1,4 +1,4 @@
-var _excluded = ["hasError", "active"];
+var _excluded = ["hasError", "active", "type"];
 
 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); }
 
@@ -12,6 +12,8 @@ import * as S from './Star.styles';
 var StarButton = function StarButton(props) {
   var hasError = props.hasError,
       active = props.active,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'ghost' : _props$type,
       restProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   return /*#__PURE__*/React.createElement(Button, _extends({
@@ -22,7 +24,7 @@ var StarButton = function StarButton(props) {
       transition: 'none'
     },
     tabIndex: 0,
-    type: "ghost"
+    type: type
   }, restProps), /*#__PURE__*/React.createElement(S.IconWrapper, {
     active: active,
     error: hasError

package/dist/Star/Star.types.d.ts

@@ -4,5 +4,6 @@ export type StarButtonProps = ButtonPropsOmitted & {
     active?: boolean;
     hasError?: boolean;
     className?: string;
+    type?: string;
 };
 export {};

package/dist/index.d.ts

@@ -7,10 +7,10 @@ import * as ExpanderStyles from './Expander/Expander.styles';
 import * as StarStyles from './Star/Star.styles';
 declare class Button extends React.Component<ButtonProps> {
     static readonly Checkbox: (props: import("./Checkbox/Checkbox.types").CheckboxButtonProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    static readonly Creator: ({ onClick, disabled, label, block, status, className }: import("./Creator/Creator.types").CreatorProps) => JSX.Element;
-    static readonly Expander: ({ size, expanded, disabled, onClick, className }: import("./Expander/Expander.types").ExpanderProps) => JSX.Element;
+    static readonly Creator: ({ onClick, disabled, label, block, status, className }: import("./Creator/Creator.types").CreatorProps) => React.JSX.Element;
+    static readonly Expander: ({ size, expanded, disabled, onClick, className }: import("./Expander/Expander.types").ExpanderProps) => React.JSX.Element;
     static readonly Star: (props: import("./Star/Star.types").StarButtonProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Button;
 export type { CreatorProps } from './Creator/Creator.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-button",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Button UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -33,19 +33,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.61.0",
+    "@synerise/ds-icon": "^0.62.1",
     "classnames": "2.3.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "antd": "4.7.0",
-    "react": ">=16.9.0 < 17.0.0",
+    "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "devDependencies": {
-    "@synerise/ds-utils": "^0.26.6",
-    "@testing-library/react": "10.0.1",
-    "csstype": "2.6.9"
-  },
-  "gitHead": "fc089bbf34c691a313b3fa648851d7831a23e3d0"
+  "gitHead": "ef835e848d4f02cca258130baa6c9f44dfa15dd0"
 }