@synerise/ds-button 0.13.62 → 0.13.66

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.13.66](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.13.65...@synerise/ds-button@0.13.66) (2021-09-21)
+
+
+### Bug Fixes
+
+* **button:** add new prop and fix styles ([d09b804](https://github.com/synerise/synerise-design/commit/d09b8040a2f7a4df6e046ea29b307beb0238661e))
+* **button:** add prop activated to button ([a59a371](https://github.com/synerise/synerise-design/commit/a59a371f3d4b52aef549bbcd6127cea5fda583d3))
+* **button:** delete prop ([2d31f61](https://github.com/synerise/synerise-design/commit/2d31f61c9efdba5aefe774fa2e53f9ba8da2f35a))
+* **button:** fix styles ([bac6b4a](https://github.com/synerise/synerise-design/commit/bac6b4a8733de192fc72d9c29d139ad277f0a2e6))
+* **button:** fix styles ([45c1ff9](https://github.com/synerise/synerise-design/commit/45c1ff917739339dbd087dd6de8bf59aa38e777b))
+* **button:** fix styles to prop activated ([fdb004c](https://github.com/synerise/synerise-design/commit/fdb004c1ad0db133bc4c06c81a10d2f339029946))
+* change background-color on hover and border color in creator button ([563331d](https://github.com/synerise/synerise-design/commit/563331d95dd51fe7fc3aa74f4b07bc8f8119b7db))
+* change border, background color in creator button and uploader ([b35c306](https://github.com/synerise/synerise-design/commit/b35c306051abf8ac0d8488551b65330a1510ca23))
+
+
+
+
+
+## [0.13.65](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.13.64...@synerise/ds-button@0.13.65) (2021-09-03)
+
+**Note:** Version bump only for package @synerise/ds-button
+
+
+
+
+
+## [0.13.64](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.13.63...@synerise/ds-button@0.13.64) (2021-09-01)
+
+**Note:** Version bump only for package @synerise/ds-button
+
+
+
+
+
+## [0.13.63](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.13.62...@synerise/ds-button@0.13.63) (2021-08-31)
+
+**Note:** Version bump only for package @synerise/ds-button
+
+
+
+
+
 ## [0.13.62](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.13.61...@synerise/ds-button@0.13.62) (2021-07-30)
 
 **Note:** Version bump only for package @synerise/ds-button

package/README.md

@@ -65,6 +65,8 @@ import { AngleDownS } from '@synerise/ds-icon/dist/icons';
 | 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.js

@@ -38,7 +38,8 @@ var Button = function Button(_ref) {
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'red' : _ref$color,
       error = _ref.error,
-      antdProps = _objectWithoutProperties(_ref, ["type", "mode", "justifyContent", "groupVariant", "loading", "onClick", "className", "color", "error"]);
+      activated = _ref.activated,
+      antdProps = _objectWithoutProperties(_ref, ["type", "mode", "justifyContent", "groupVariant", "loading", "onClick", "className", "color", "error", "activated"]);
 
   var rippleRef = React.useRef(null);
 
@@ -78,8 +79,8 @@ var Button = function Button(_ref) {
   };
 
   var classNameString = React.useMemo(function () {
-    var modeStringifed = !mode ? "" : mode;
-    var classNameStringifed = !className ? "" : className;
+    var modeStringifed = !mode ? '' : mode;
+    var classNameStringifed = !className ? '' : className;
     return "ds-button ".concat(modeStringifed, " ").concat(classNameStringifed);
   }, [mode, className]);
   return React.createElement(S.AntdButton, _extends({
@@ -87,6 +88,7 @@ var Button = function Button(_ref) {
     type: type || 'secondary',
     mode: mode,
     error: error,
+    activated: activated,
     groupVariant: groupVariant,
     loading: loading,
     onClick: handleClick,

package/dist/Button.styles.d.ts

@@ -3,4 +3,4 @@ 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, ...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) => JSX.Element, any, {}, never>;

package/dist/Button.styles.js

@@ -54,7 +54,8 @@ export var AntdButton = styled(function (_ref) {
       size = _ref.size,
       iconColor = _ref.iconColor,
       error = _ref.error,
-      rest = _objectWithoutProperties(_ref, ["mode", "type", "loading", "justifyContent", "groupVariant", "customColor", "rightIconSize", "leftIconSize", "pressed", "size", "iconColor", "error"]);
+      activated = _ref.activated,
+      rest = _objectWithoutProperties(_ref, ["mode", "type", "loading", "justifyContent", "groupVariant", "customColor", "rightIconSize", "leftIconSize", "pressed", "size", "iconColor", "error", "activated"]);
 
   // eslint-disable-next-line react/jsx-props-no-spreading
   return React.createElement(Button, _extends({
@@ -64,7 +65,7 @@ export var AntdButton = styled(function (_ref) {
 }).withConfig({
   displayName: "Buttonstyles__AntdButton",
   componentId: "sc-3lgta1-3"
-})(["   &&{-webkit-mask-image:-webkit-radial-gradient(white,black);border:0;display:inline-flex;align-items:center;padding:0 12px;position:relative;overflow:hidden;justify-content:", ";", ";> *:not(.btn-focus){position:relative;}> .ds-icon{display:flex;align-items:center;justify-content:center;margin:0;width:24px;height:24px;}&:disabled{&&{", "{box-shadow:none;}}};&&.ant-btn-default:not(.ds-expander):not(.ds-button-creator),&&.ant-btn-secondary:not(.ds-expander):not(.ds-button-creator){&:active{", "}&:focus:not(:active){color:", ";svg{fill:", ";}background:", ";}&:hover:not(:disabled):not(:focus){background-color:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}> span:not(.btn-focus) +.ds-icon:before{background-color:", ";}", "}&:active{color:", ";svg{fill:", ";!important;}}}", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "}"], function (props) {
+})(["   &&{-webkit-mask-image:-webkit-radial-gradient(white,black);border:0;display:inline-flex;align-items:center;padding:0 12px;position:relative;overflow:hidden;justify-content:", ";", ";> *:not(.btn-focus){position:relative;}> .ds-icon{display:flex;align-items:center;justify-content:center;margin:0;width:24px;height:24px;}&:disabled{&&{", "{box-shadow:none;}}};&&.ant-btn-default:not(.ds-expander):not(.ds-button-creator),&&.ant-btn-secondary:not(.ds-expander):not(.ds-button-creator){&:active{", "}&:focus:not(:active){color:", ";svg{fill:", ";}background:", ";}&:hover:not(:disabled):not(:focus){background-color:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}> span:not(.btn-focus) +.ds-icon:before{background-color:", ";}", "}&:active{color:", ";svg{fill:", ";!important;}}}", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "}"], function (props) {
   return props.justifyContent;
 }, function (props) {
   return props.shape && props.shape === 'circle' && css(["border-radius:50%;"]);
@@ -111,7 +112,9 @@ export var AntdButton = styled(function (_ref) {
 }, function (props) {
   return props.groupVariant === 'right-rounded' && css(["&.ant-btn{border-radius:0 3px 3px 0;}"]);
 }, function (props) {
-  return props.error && css(["&.ant-btn{background-color:", ";box-shadow:inset 0 0 0 1px ", ";span{color:", ";}svg{fill:", ";}&&&:hover:not(:disabled):not(:focus){background-color:", ";box-shadow:inset 0 0 0 1px ", ";span{color:", ";}svg{fill:", " !important;}}&:active{background-color:", ";span{color:", ";}svg{fill:", ";}}&&&:focus:not(:active){border:none !important;background-color:", ";span{color:", "};}svg{fill:", ";}}&&&:focus{&&&:active{border:none !important;background-color:", ";span{color:", ";}svg{fill:", ";}}}", "{background-color:", ";}"], props.theme.palette["red-050"], props.theme.palette['red-600'], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-200"], props.theme.palette['red-600'], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette.white, props.theme.palette.white, props.theme.palette["red-050"], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette.white, props.theme.palette.white, RippleEffect, props.theme.palette["red-700"]);
+  return props.activated && css(["&&&.ant-btn{background-color:", ";span{color:", ";}svg{fill:", ";}&&&:focus{background-color:", ";span{color:", ";}svg{fill:", ";}&&&:hover:not(:active){background-color:", ";}}}&.ant-btn .btn-focus{box-shadow:none;}"], props.theme.palette["blue-050"], props.theme.palette['blue-600'], props.theme.palette['blue-600'], props.theme.palette["blue-050"], props.theme.palette['blue-600'], props.theme.palette['blue-600'], props.theme.palette["blue-100"]);
+}, function (props) {
+  return props.error && css(["&.ant-btn{background-color:", ";box-shadow:inset 0 0 0 1px ", ";span{color:", ";}svg{fill:", ";}&&&:hover:not(:disabled):not(:focus){background-color:", ";box-shadow:inset 0 0 0 1px ", ";span{color:", ";}svg{fill:", " !important;}}&:active{background-color:", ";span{color:", ";}svg{fill:", ";}}&&&:focus:not(:active){border:none !important;background-color:", ";span{color:", ";}}svg{fill:", ";}}&&&:focus{&&&:active{border:none !important;background-color:", ";span{color:", ";}svg{fill:", ";}}}", "{background-color:", ";}"], props.theme.palette["red-050"], props.theme.palette['red-600'], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-200"], props.theme.palette['red-600'], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette.white, props.theme.palette.white, props.theme.palette["red-050"], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette.white, props.theme.palette.white, RippleEffect, props.theme.palette["red-700"]);
 }, function (props) {
   return props.error && props.type === 'secondary' && css(["&&&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", " !important;&&&:hover{background-color:", ";}&&&:active{background-color:", ";box-shadow:inset 0 0 0 2px ", ";span{color:", ";}svg{fill:", ";}}", "{background-color:", ";}}"], props.theme.palette['red-600'], props.theme.palette["red-200"], props.theme.palette["red-600"], props.theme.palette['blue-600'], props.theme.palette.white, props.theme.palette.white, RippleEffect, props.theme.palette["red-700"]);
 }, function (props) {

package/dist/Button.types.d.ts

@@ -41,6 +41,7 @@ export declare type Props = Omit<ButtonProps, 'type'> & {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     iconColor?: string | 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
     error?: boolean;
+    activated?: boolean;
 };
 export declare type ButtonSubComponents = {
     Expander: React.ElementType;

package/dist/Creator/Creator.js

@@ -28,7 +28,7 @@ var Creator = function Creator(_ref) {
       setPressed = _React$useState2[1];
 
   var onPress = React.useCallback(function () {
-    setPressed(false);
+    setPressed(true);
   }, []);
   var onRelease = React.useCallback(function () {
     setPressed(false);

package/dist/Creator/Creator.styles.js

@@ -5,6 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { IconContainer } from '@synerise/ds-icon/dist/Icon.styles';
+import { hexToRgba } from '@synerise/ds-utils';
 import Button from '../Button';
 import { ButtonFocus, RippleEffect } from '../Button.styles';
 import { CreatorStatus } from './Creator.types';
@@ -43,7 +44,7 @@ export var Creator = styled(function (_ref3) {
   return props.withLabel && !props.block && "min-width: 200px;";
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.palette['grey-300'];
+  return theme.palette['grey-400'];
 }, function (_ref5) {
   var theme = _ref5.theme;
   return theme.palette.white;
@@ -66,9 +67,9 @@ export var Creator = styled(function (_ref3) {
   return theme.palette['grey-400'];
 }, function (_ref7) {
   var theme = _ref7.theme;
-  return theme.palette.white;
+  return hexToRgba(theme.palette['grey-200'], 0.2);
 }, function (props) {
-  return props.pressed && "background-color: ".concat(props.theme.palette['grey-050'], ";");
+  return props.pressed && "&&{ background-color: ".concat(hexToRgba(props.theme.palette['grey-200'], 0.4), "; }");
 }, function (props) {
   return props.theme.palette['grey-400'];
 }, function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-button",
-  "version": "0.13.62",
+  "version": "0.13.66",
   "description": "Button UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -32,7 +32,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.44.11"
+    "@synerise/ds-icon": "^0.45.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -40,8 +40,8 @@
     "react": ">=16.9.0 < 17.0.0"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^0.16.10",
+    "@synerise/ds-utils": "^0.18.1",
     "csstype": "2.6.9"
   },
-  "gitHead": "e397d78cbb04f3e07582cd2ace6c03bbfcfa86ce"
+  "gitHead": "a9b2577e3c7e6b51625ab3ecca84600819ad0eeb"
 }