@synerise/ds-card-tabs 0.8.72 → 0.8.76

package/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.8.76](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.8.74...@synerise/ds-card-tabs@0.8.76) (2021-10-26)
+
+
+### Bug Fixes
+
+* **card-tabs:** add colorDot and fix props ([e8a9577](https://github.com/Synerise/synerise-design/commit/e8a9577e7f07a4aa05d0e1bb139fb1a07e967b53))
+* **card-tabs:** add colorDot and fix props ([e779c6a](https://github.com/Synerise/synerise-design/commit/e779c6a433bbd7755171afc42a63e8e3410e8a82))
+* **card-tabs:** add ghost color when is draggable ([87b7239](https://github.com/Synerise/synerise-design/commit/87b7239628b0ddd6643e59a1a887f829e2d654d7))
+* **card-tabs:** fix color active state dotand add tooltip ([9f69e73](https://github.com/Synerise/synerise-design/commit/9f69e73e05bd4b446c6ab23ba2e01f72fba4d6ca))
+* **card-tabs:** fix color dot ([596af8c](https://github.com/Synerise/synerise-design/commit/596af8c7e4c6e64ac187e61ee50f81bbff9de581))
+* **card-tabs:** fix knobs and styles in inline edit ([ae7bb6a](https://github.com/Synerise/synerise-design/commit/ae7bb6a82a88845bb540603cc580db2111a785c3))
+* **card-tabs:** fix styles ([f81193a](https://github.com/Synerise/synerise-design/commit/f81193a5ce6b4a06a7905f8f9da7ea94a6f08061))
+* **card-tabs:** update documantation ([37c2f87](https://github.com/Synerise/synerise-design/commit/37c2f87a6fcffdee2f89263be007f2ba9d9d5868))
+
+
+
+
+
+## [0.8.75](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.8.74...@synerise/ds-card-tabs@0.8.75) (2021-10-19)
+
+
+### Bug Fixes
+
+* **card-tabs:** add colorDot and fix props ([e8a9577](https://github.com/Synerise/synerise-design/commit/e8a9577e7f07a4aa05d0e1bb139fb1a07e967b53))
+* **card-tabs:** add colorDot and fix props ([e779c6a](https://github.com/Synerise/synerise-design/commit/e779c6a433bbd7755171afc42a63e8e3410e8a82))
+* **card-tabs:** add ghost color when is draggable ([87b7239](https://github.com/Synerise/synerise-design/commit/87b7239628b0ddd6643e59a1a887f829e2d654d7))
+* **card-tabs:** fix color active state dotand add tooltip ([9f69e73](https://github.com/Synerise/synerise-design/commit/9f69e73e05bd4b446c6ab23ba2e01f72fba4d6ca))
+* **card-tabs:** fix color dot ([596af8c](https://github.com/Synerise/synerise-design/commit/596af8c7e4c6e64ac187e61ee50f81bbff9de581))
+* **card-tabs:** fix knobs and styles in inline edit ([ae7bb6a](https://github.com/Synerise/synerise-design/commit/ae7bb6a82a88845bb540603cc580db2111a785c3))
+* **card-tabs:** fix styles ([f81193a](https://github.com/Synerise/synerise-design/commit/f81193a5ce6b4a06a7905f8f9da7ea94a6f08061))
+* **card-tabs:** update documantation ([37c2f87](https://github.com/Synerise/synerise-design/commit/37c2f87a6fcffdee2f89263be007f2ba9d9d5868))
+
+
+
+
+
+## [0.8.74](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.8.73...@synerise/ds-card-tabs@0.8.74) (2021-10-19)
+
+**Note:** Version bump only for package @synerise/ds-card-tabs
+
+
+
+
+
+## [0.8.73](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.8.72...@synerise/ds-card-tabs@0.8.73) (2021-09-21)
+
+**Note:** Version bump only for package @synerise/ds-card-tabs
+
+
+
+
+
 ## [0.8.72](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.8.71...@synerise/ds-card-tabs@0.8.72) (2021-09-15)
 
 **Note:** Version bump only for package @synerise/ds-card-tabs

package/README.md

@@ -99,6 +99,7 @@ import CardTabs from '@synerise/ds-card-tabs'
 | onChangeName   | Callback fired when the edit name input blur                                    | (id: number, newName: string)                                                                          | -        |
 | texts          | Translations of CrudButtons tooltips                                            | CardTabTexts                                                                                           | -        |
 | color          | Color of CardTab                                                                | `red`/ `green`/ `grey`/ `yellow`/ `blue`/ `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple`/ `violet` | `yellow` |
+| colorDot       | single color dot                                                                | React.ReactNode                                                                                        | -        |
 
 #### CardTabTexts
 

package/dist/CardTab/CardTab.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CardTabProps } from './CardTab.types';
-declare const _default: React.ForwardRefExoticComponent<Pick<CardTabProps, "color" | "id" | "name" | "draggable" | "prefix" | "disabled" | "invalidName" | "active" | "invalid" | "greyBackground" | "tag" | "prefixIcon" | "onDuplicateTab" | "onRemoveTab" | "texts" | "suffixIcon" | "onChangeName" | "onSelectTab"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<CardTabProps, "color" | "id" | "name" | "draggable" | "prefix" | "disabled" | "invalidName" | "active" | "invalid" | "greyBackground" | "tag" | "prefixIcon" | "colorDot" | "onDuplicateTab" | "onRemoveTab" | "texts" | "suffixIcon" | "onChangeName" | "onSelectTab"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<CardTabProps>;

package/dist/CardTab/CardTab.js

@@ -20,6 +20,7 @@ import * as React from 'react';
 import Icon from '@synerise/ds-icon';
 import InlineEdit from '@synerise/ds-inline-edit/dist/InlineEdit';
 import { injectIntl } from 'react-intl';
+import Tooltip from '@synerise/ds-tooltip';
 import * as S from './CardTab.styles';
 import CardTabPrefix from './CardTabPrefix/CardTabPrefix';
 import CardTabActions from './CardTabActions/CardTabActions';
@@ -44,7 +45,8 @@ var CardTab = function CardTab(_ref) {
       onRemoveTab = _ref.onRemoveTab,
       texts = _ref.texts,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'yellow' : _ref$color;
+      color = _ref$color === void 0 ? 'yellow' : _ref$color,
+      colorDot = _ref.colorDot;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -125,6 +127,7 @@ var CardTab = function CardTab(_ref) {
     "data-id": id,
     "data-testid": "card-tab-container"
   }, React.createElement(CardTabPrefix, {
+    colorDot: colorDot,
     draggable: draggable,
     prefixIcon: prefixIcon,
     prefix: prefix,
@@ -144,18 +147,20 @@ var CardTab = function CardTab(_ref) {
       onChange: handleChangeName
     },
     "data-testid": "card-tab-edit-input"
-  }) : React.createElement(S.CardTabName, {
+  }) : React.createElement(Tooltip, {
+    title: name
+  }, React.createElement(S.CardTabName, {
     "data-testid": "card-tab-name"
-  }, name)), showCardActions() && React.createElement(CardTabActions, {
+  }, name))), showCardActions() && React.createElement(CardTabActions, {
     enterEditNameMode: handleEditName,
     changeNameAvailable: Boolean(onChangeName),
     onDuplicateTab: handleDuplicate,
     onRemoveTab: handleRemove,
     texts: getTexts
-  }), suffixIcon && React.createElement(Icon, {
+  }), suffixIcon && React.createElement(S.CardSuffixWrapper, null, React.createElement(Icon, {
     className: "ds-card-tabs__suffix-icon",
     component: suffixIcon
-  }));
+  })));
 };
 
 export default injectIntl(CardTab);

package/dist/CardTab/CardTab.styles.d.ts

@@ -6,13 +6,19 @@ declare type CardTabContainerProps = {
     color: string;
     disabled: boolean;
     edited: boolean;
+    draggable?: boolean;
 };
 export declare const CardTabSuffix: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardTabName: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CardSuffixWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const CardTabLabel: import("styled-components").StyledComponent<"span", any, {
     invalidName: boolean;
 }, never>;
 export declare const CardTabTag: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardDotPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardDot: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardTabPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardDragPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardIconPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardTabContainer: import("styled-components").StyledComponent<"div", any, CardTabContainerProps, never>;
 export {};

package/dist/CardTab/CardTab.styles.js

@@ -27,9 +27,13 @@ export var CardTabName = styled.span.withConfig({
   displayName: "CardTabstyles__CardTabName",
   componentId: "sc-1n86s98-1"
 })(["max-width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]);
+export var CardSuffixWrapper = styled.span.withConfig({
+  displayName: "CardTabstyles__CardSuffixWrapper",
+  componentId: "sc-1n86s98-2"
+})(["display:none;"]);
 export var CardTabLabel = styled.span.withConfig({
   displayName: "CardTabstyles__CardTabLabel",
-  componentId: "sc-1n86s98-2"
+  componentId: "sc-1n86s98-3"
 })(["", ";color:", ";line-height:20px;position:relative;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:flex-start;&&&{", "{background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:", ";}}", "{input{font-weight:500;font-size:14px;line-height:20px;color:", ";background-image:linear-gradient( to right,", " 0%,", " 33%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 100% );}}"], macro.h300, function (props) {
   return props.theme.palette['grey-600'];
 }, CardTabName, function (props) {
@@ -43,130 +47,194 @@ export var CardTabLabel = styled.span.withConfig({
 });
 export var CardTabTag = styled.div.withConfig({
   displayName: "CardTabstyles__CardTabTag",
-  componentId: "sc-1n86s98-3"
+  componentId: "sc-1n86s98-4"
 })(["", " color:", ";display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:3px;"], macro.h200, function (_ref5) {
   var theme = _ref5.theme;
   return theme.palette.white;
 });
+export var CardDotPrefix = styled.div.withConfig({
+  displayName: "CardTabstyles__CardDotPrefix",
+  componentId: "sc-1n86s98-5"
+})(["", " color:", ";display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;"], macro.h200, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.palette.white;
+});
+export var CardDot = styled.div.withConfig({
+  displayName: "CardTabstyles__CardDot",
+  componentId: "sc-1n86s98-6"
+})(["", " display:flex;align-items:center;justify-content:center;width:8px;height:8px;border-radius:50%;"], macro.h200);
 export var CardTabPrefix = styled.div.withConfig({
   displayName: "CardTabstyles__CardTabPrefix",
-  componentId: "sc-1n86s98-4"
+  componentId: "sc-1n86s98-7"
 })(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;"]);
+export var CardDragPrefix = styled.div.withConfig({
+  displayName: "CardTabstyles__CardDragPrefix",
+  componentId: "sc-1n86s98-8"
+})(["display:none;"]);
+export var CardIconPrefix = styled.div.withConfig({
+  displayName: "CardTabstyles__CardIconPrefix",
+  componentId: "sc-1n86s98-9"
+})(["display:flex;"]);
 export var CardTabContainer = styled.div.withConfig({
   displayName: "CardTabstyles__CardTabContainer",
-  componentId: "sc-1n86s98-5"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px;width:180px;height:48px;user-select:none;background-color:", ";box-shadow:", ";border-radius:3px;border-width:1px;border-color:", ";border-style:solid;pointer-events:", ";", "{background-color:", ";color:", ";}&:hover{cursor:pointer;background-color:", ";", "{display:", ";}", "{color:", ";}", "{background-color:", ";color:", ";}", "{svg{color:", " !important;fill:", " !important;}}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", ";}}}&.pressed{background-color:", ";}", "{color:", ";opacity:", ";}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", ";}opacity:", ";}", "{opacity:", ";.ds-card-tabs__handle-icon{svg{color:", ";fill:", ";}}svg{color:", ";fill:", ";}", "{opacity:", ";}}"], function (_ref6) {
-  var theme = _ref6.theme,
-      active = _ref6.active,
-      invalid = _ref6.invalid,
-      color = _ref6.color,
-      greyBackground = _ref6.greyBackground,
-      edited = _ref6.edited;
+  componentId: "sc-1n86s98-10"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px;width:180px;height:48px;user-select:none;background-color:", ";box-shadow:", ";border-radius:3px;border-width:1px;border-color:", ";border-style:solid;pointer-events:", ";", "{background-color:", ";color:", ";}", "{background-color:", ";}", "{height:", ";width:", ";border-width:", ";border-color:", ";border-style:solid;}&:hover{cursor:pointer;box-shadow:", ";background-color:", ";", "{display:", ";}", "{display:", ";}", "{color:", ";}", "{background-color:", ";color:", ";display:none;}", "{svg{color:", ";fill:", ";}}", "{display:flex;svg{color:", ";fill:", " !important;}}", "{display:none;}", "{display:none;svg{color:", ";fill:", ";}}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", ";}}}&.pressed{background-color:", ";}", "{color:", ";opacity:", ";}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", ";}opacity:", ";}", "{opacity:", ";.ds-card-tabs__handle-icon{svg{color:", ";fill:", ";}}svg{color:", ";fill:", ";}", "{opacity:", ";}}"], function (_ref7) {
+  var theme = _ref7.theme,
+      active = _ref7.active,
+      invalid = _ref7.invalid,
+      color = _ref7.color,
+      greyBackground = _ref7.greyBackground,
+      edited = _ref7.edited;
   if (invalid && active) return theme.palette['red-600'];
-  if (active && !edited) return theme.palette["".concat(color, "-600")];
+  if (active && !edited) return theme.palette["".concat(color)];
   if (greyBackground) return theme.palette.white;
   return theme.palette['grey-050'];
-}, function (_ref7) {
-  var greyBackground = _ref7.greyBackground;
-  return greyBackground ? '0 4px 12px 0 rgba(35, 41, 54, 0.04)' : '0';
 }, function (_ref8) {
-  var theme = _ref8.theme,
-      active = _ref8.active,
-      invalid = _ref8.invalid,
-      color = _ref8.color,
-      edited = _ref8.edited;
-  if (invalid) return theme.palette['red-600'];
-  return getColor(active && !edited, theme.palette["".concat(color, "-600")], theme.palette['grey-050']);
+  var greyBackground = _ref8.greyBackground;
+  return greyBackground ? '0 4px 12px 0 rgba(35, 41, 54, 0.04)' : '0';
 }, function (_ref9) {
-  var disabled = _ref9.disabled;
+  var theme = _ref9.theme,
+      active = _ref9.active,
+      invalid = _ref9.invalid,
+      color = _ref9.color,
+      edited = _ref9.edited;
+  if (invalid) return theme.palette['red-600'];
+  if (edited) return theme.palette['blue-600'];
+  return getColor(active && !edited, theme.palette["".concat(color)], theme.palette['grey-300']);
+}, function (_ref10) {
+  var disabled = _ref10.disabled;
   return disabled ? 'none' : 'all';
-}, CardTabTag, function (_ref10) {
-  var theme = _ref10.theme,
-      active = _ref10.active,
-      color = _ref10.color,
-      edited = _ref10.edited;
-  return getColor(active && !edited, theme.palette.white, theme.palette["".concat(color, "-600")]);
-}, function (_ref11) {
+}, CardTabTag, function (_ref11) {
   var theme = _ref11.theme,
       active = _ref11.active,
       color = _ref11.color,
       edited = _ref11.edited;
-  return getColor(active && !edited, theme.palette["".concat(color, "-600")], theme.palette.white);
+  return getColor(active && !edited, theme.palette.white, theme.palette["".concat(color)]);
 }, function (_ref12) {
   var theme = _ref12.theme,
-      greyBackground = _ref12.greyBackground;
+      active = _ref12.active,
+      color = _ref12.color,
+      edited = _ref12.edited;
+  return getColor(active && !edited, theme.palette["".concat(color)], theme.palette.white);
+}, CardDot, function (_ref13) {
+  var theme = _ref13.theme,
+      active = _ref13.active,
+      color = _ref13.color,
+      edited = _ref13.edited,
+      invalid = _ref13.invalid;
+  if (active && invalid) return theme.palette["".concat(color)];
+  return getColor(active && !edited, 'transparent', theme.palette["".concat(color)]);
+}, CardDotPrefix, function (_ref14) {
+  var active = _ref14.active,
+      edited = _ref14.edited;
+  return active && !edited ? '12px' : '24px';
+}, function (_ref15) {
+  var active = _ref15.active,
+      edited = _ref15.edited;
+  return active && !edited ? '12px' : '24px';
+}, function (_ref16) {
+  var active = _ref16.active,
+      edited = _ref16.edited;
+  return active && !edited ? '2px' : '0px';
+}, function (_ref17) {
+  var theme = _ref17.theme,
+      active = _ref17.active,
+      edited = _ref17.edited;
+  return active && !edited ? theme.palette.white : 'none';
+}, function (_ref18) {
+  var greyBackground = _ref18.greyBackground,
+      theme = _ref18.theme;
+  return greyBackground ? '0px 10px 13px -7px #000000,-25px 20px 19px -16px rgba(0,0,0,0)' : "0px 4px 8px 5px ".concat(theme.palette["grey-050"]);
+}, function (_ref19) {
+  var theme = _ref19.theme,
+      greyBackground = _ref19.greyBackground;
   return greyBackground ? theme.palette.white : theme.palette['grey-050'];
-}, CardTabSuffix, function (_ref13) {
-  var edited = _ref13.edited;
+}, CardTabSuffix, function (_ref20) {
+  var edited = _ref20.edited;
+  return edited ? 'none' : 'flex';
+}, CardSuffixWrapper, function (_ref21) {
+  var edited = _ref21.edited;
   return edited ? 'none' : 'flex';
-}, CardTabLabel, function (_ref14) {
-  var theme = _ref14.theme,
-      invalidName = _ref14.invalidName;
+}, CardTabLabel, function (_ref22) {
+  var theme = _ref22.theme,
+      invalidName = _ref22.invalidName;
   return invalidName ? theme.palette['red-600'] : theme.palette['grey-800'];
-}, CardTabTag, function (_ref15) {
-  var theme = _ref15.theme,
-      color = _ref15.color;
-  return theme.palette["".concat(color, "-600")];
-}, function (_ref16) {
-  var theme = _ref16.theme;
+}, CardTabTag, function (_ref23) {
+  var theme = _ref23.theme,
+      color = _ref23.color;
+  return theme.palette["".concat(color)];
+}, function (_ref24) {
+  var theme = _ref24.theme;
   return theme.palette.white;
-}, CardTabPrefix, function (_ref17) {
-  var theme = _ref17.theme;
+}, CardTabPrefix, function (_ref25) {
+  var theme = _ref25.theme;
   return theme.palette['grey-600'];
-}, function (_ref18) {
-  var theme = _ref18.theme;
+}, function (_ref26) {
+  var theme = _ref26.theme;
   return theme.palette['grey-600'];
-}, function (_ref19) {
-  var theme = _ref19.theme;
+}, CardDragPrefix, function (_ref27) {
+  var theme = _ref27.theme;
+  return theme.palette['grey-600'];
+}, function (_ref28) {
+  var theme = _ref28.theme;
+  return theme.palette['grey-600'];
+}, CardDotPrefix, CardIconPrefix, function (_ref29) {
+  var theme = _ref29.theme;
+  return theme.palette['grey-600'];
+}, function (_ref30) {
+  var theme = _ref30.theme;
   return theme.palette['grey-600'];
-}, function (_ref20) {
-  var theme = _ref20.theme;
+}, function (_ref31) {
+  var theme = _ref31.theme;
+  return theme.palette['grey-600'];
+}, function (_ref32) {
+  var theme = _ref32.theme;
   return theme.palette['grey-600'];
-}, function (_ref21) {
-  var theme = _ref21.theme,
-      greyBackground = _ref21.greyBackground;
+}, function (_ref33) {
+  var theme = _ref33.theme,
+      greyBackground = _ref33.greyBackground;
   return !greyBackground ? theme.palette['grey-100'] : theme.palette.white;
-}, CardTabLabel, function (_ref22) {
-  var theme = _ref22.theme,
-      active = _ref22.active,
-      invalidName = _ref22.invalidName;
+}, CardTabLabel, function (_ref34) {
+  var theme = _ref34.theme,
+      active = _ref34.active,
+      invalidName = _ref34.invalidName;
   if (invalidName) return theme.palette['red-600'];
   if (active) return theme.palette.white;
   return theme.palette['grey-600'];
-}, function (_ref23) {
-  var disabled = _ref23.disabled;
+}, function (_ref35) {
+  var disabled = _ref35.disabled;
   return disabled ? 0.4 : 1;
-}, function (_ref24) {
-  var theme = _ref24.theme,
-      active = _ref24.active;
+}, function (_ref36) {
+  var theme = _ref36.theme,
+      active = _ref36.active;
   return getColor(active, theme.palette.white, theme.palette['grey-600']);
-}, function (_ref25) {
-  var theme = _ref25.theme,
-      active = _ref25.active;
+}, function (_ref37) {
+  var theme = _ref37.theme,
+      active = _ref37.active;
   return getColor(active, theme.palette.white, theme.palette['grey-600']);
-}, function (_ref26) {
-  var disabled = _ref26.disabled;
+}, function (_ref38) {
+  var disabled = _ref38.disabled;
   return disabled ? 0.4 : 1;
-}, CardTabPrefix, function (_ref27) {
-  var disabled = _ref27.disabled;
+}, CardTabPrefix, function (_ref39) {
+  var disabled = _ref39.disabled;
   return disabled ? 0.4 : 1;
-}, function (_ref28) {
-  var theme = _ref28.theme,
-      active = _ref28.active;
+}, function (_ref40) {
+  var theme = _ref40.theme,
+      active = _ref40.active;
   return getColor(active, theme.palette.white, theme.palette['grey-400']);
-}, function (_ref29) {
-  var theme = _ref29.theme,
-      active = _ref29.active;
+}, function (_ref41) {
+  var theme = _ref41.theme,
+      active = _ref41.active;
   return getColor(active, theme.palette.white, theme.palette['grey-400']);
-}, function (_ref30) {
-  var theme = _ref30.theme,
-      active = _ref30.active;
+}, function (_ref42) {
+  var theme = _ref42.theme,
+      active = _ref42.active;
   return getColor(active, theme.palette.white, theme.palette['grey-600']);
-}, function (_ref31) {
-  var theme = _ref31.theme,
-      active = _ref31.active;
+}, function (_ref43) {
+  var theme = _ref43.theme,
+      active = _ref43.active;
   return getColor(active, theme.palette.white, theme.palette['grey-600']);
-}, CardTabSuffix, function (_ref32) {
-  var disabled = _ref32.disabled;
+}, CardTabSuffix, function (_ref44) {
+  var disabled = _ref44.disabled;
   return disabled ? 0.4 : 1;
 });

package/dist/CardTab/CardTab.types.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { IntlShape } from 'react-intl';
 export declare enum prefixType {
     TAG = 0,
-    ICON = 1
+    ICON = 1,
+    DOT = 2
 }
 export declare type Color = 'red' | 'green' | 'grey' | 'yellow' | 'blue' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
 export declare type CardTabTexts = {
@@ -16,6 +17,7 @@ export interface CardTabProps {
     name: string;
     tag: string;
     prefix: prefixType;
+    colorDot: React.ReactNode;
     color?: Color;
     active?: boolean;
     draggable?: boolean;

package/dist/CardTab/CardTab.types.js

@@ -3,4 +3,5 @@ export var prefixType;
 (function (prefixType) {
   prefixType[prefixType["TAG"] = 0] = "TAG";
   prefixType[prefixType["ICON"] = 1] = "ICON";
+  prefixType[prefixType["DOT"] = 2] = "DOT";
 })(prefixType || (prefixType = {}));

package/dist/CardTab/CardTabPrefix/CardTabPrefix.js

@@ -9,18 +9,22 @@ var CardTabPrefix = function CardTabPrefix(_ref) {
   var prefix = _ref.prefix,
       draggable = _ref.draggable,
       tag = _ref.tag,
-      prefixIcon = _ref.prefixIcon;
+      prefixIcon = _ref.prefixIcon,
+      colorDot = _ref.colorDot;
   return React.createElement(S.CardTabPrefix, {
     "data-testid": "card-tab-prefix"
-  }, !draggable && prefix === prefixType.TAG && tag && React.createElement(S.CardTabTag, {
+  }, prefix === prefixType.TAG && tag && React.createElement(S.CardTabTag, {
+    draggable: draggable,
     "data-testid": "card-tab-tag"
-  }, tag), !draggable && prefix === prefixType.ICON && prefixIcon && React.createElement(Icon, {
+  }, tag), prefix === prefixType.ICON && prefixIcon && React.createElement(S.CardIconPrefix, null, React.createElement(Icon, {
     component: prefixIcon,
     color: theme.palette['grey-600']
-  }), draggable && React.createElement(Icon, {
+  })), prefix === prefixType.DOT && colorDot && React.createElement(S.CardDotPrefix, {
+    "data-testid": "card-dot-tag"
+  }, colorDot), draggable && React.createElement(S.CardDragPrefix, null, React.createElement(Icon, {
     className: "ds-card-tabs__handle-icon",
     component: React.createElement(DragHandleM, null)
-  }));
+  }), ' '));
 };
 
 export default CardTabPrefix;

package/dist/CardTab/CardTabPrefix/CardTabPrefix.types.d.ts

@@ -5,4 +5,5 @@ export interface Props {
     draggable?: boolean;
     tag?: string;
     prefixIcon?: React.ReactNode;
+    colorDot?: React.ReactNode;
 }

package/dist/CardTab/ColorsTabs.d.ts

@@ -0,0 +1 @@
+export declare const COLORS_TABS: string[];

package/dist/CardTab/ColorsTabs.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export var COLORS_TABS = ['blue-600', 'green-600', 'mars-600', 'purple-600', 'cyan-600', 'yellow-600', 'violet-600', 'blue-700', 'green-700', 'mars-700', 'purple-700', 'cyan-700', 'yellow-700', 'violet-700', 'blue-500', 'green-500', 'mars-500', 'purple-500', 'cyan-500', 'yellow-500', 'violet-500'];

package/dist/CardTabs.js

@@ -1,3 +1,5 @@
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -8,6 +10,13 @@ import * as React from 'react';
 import { ReactSortable } from 'react-sortablejs-typescript';
 import Button from '@synerise/ds-button';
 import * as S from './CardTabs.styles';
+import { COLORS_TABS } from './CardTab/ColorsTabs';
+var SORTABLE_CONFIG = {
+  ghostClass: 'sortable-card-ghost-element',
+  className: 'sortable-card',
+  animation: 150,
+  group: 'column-manager'
+};
 
 var CardTabs = function CardTabs(_ref) {
   var className = _ref.className,
@@ -23,19 +32,28 @@ var CardTabs = function CardTabs(_ref) {
     }));
   };
 
+  var renderChildren = function renderChildren() {
+    return React.Children.map(children, function (child, i) {
+      var colorTabs = React.cloneElement(child, {
+        color: COLORS_TABS[i % COLORS_TABS.length]
+      });
+      return colorTabs;
+    });
+  };
+
   return React.createElement(S.CardTabsContainer, {
     className: "ds-card-tabs ".concat(className || ''),
     "data-testid": "card-tabs-container"
   }, onChangeOrder ? React.createElement("div", {
     "data-testid": "card-tabs-sortable"
-  }, React.createElement(ReactSortable, {
+  }, React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
     className: "ds-card-tags-sortable",
     list: children,
     setList: handleChangeOrder
-  }, children)) : React.createElement("div", {
+  }), renderChildren())) : React.createElement("div", {
     className: "ds-card-tags-sortable",
     "data-testid": "card-tabs-static"
-  }, children), onAddTab && React.createElement("span", {
+  }, renderChildren()), onAddTab && React.createElement("span", {
     "data-testid": "card-tabs-add-button"
   }, React.createElement(Button.Creator, {
     disabled: !!maxTabsCount && React.Children.toArray(children).length >= maxTabsCount,

package/dist/CardTabs.styles.js

@@ -4,4 +4,10 @@ import { CardTabContainer } from './CardTab/CardTab.styles'; // eslint-disable-n
 export var CardTabsContainer = styled.div.withConfig({
   displayName: "CardTabsstyles__CardTabsContainer",
   componentId: "sc-1uu9dja-0"
-})(["display:flex;flex-direction:row;algin-items:flex-start;justify-content:flex-start;width:100%;", "{margin-right:16px;margin-bottom:24px;}.ds-card-tags-sortable{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;}"], CardTabContainer);
+})(["display:flex;flex-direction:row;algin-items:flex-start;justify-content:flex-start;width:100%;", "{margin-right:12px;margin-bottom:24px;}.ds-card-tags-sortable{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;}.sortable-chosen{cursor:grabbing;background-color:", ";opacity:1;}.sortable-drag{opacity:1 !important;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);}.sortable-card-ghost-element{background-color:", ";&:hover{background-color:", ";}opacity:1;cursor:grabbing;*{visibility:hidden;}}"], CardTabContainer, function (props) {
+  return props.theme.palette.white;
+}, function (props) {
+  return props.theme.palette['blue-300'];
+}, function (props) {
+  return props.theme.palette['blue-050'];
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card-tabs",
-  "version": "0.8.72",
+  "version": "0.8.76",
   "description": "CardTabs UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,10 +32,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.13.65",
-    "@synerise/ds-cruds": "^0.2.45",
-    "@synerise/ds-inline-edit": "^0.4.34",
-    "@synerise/ds-typography": "^0.11.8",
+    "@synerise/ds-button": "^0.15.0",
+    "@synerise/ds-cruds": "^0.2.49",
+    "@synerise/ds-inline-edit": "^0.4.38",
+    "@synerise/ds-typography": "^0.11.9",
     "react-sortablejs-typescript": "2.0.3",
     "sortablejs": "^1.10.1"
   },
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@types/lodash": "4.14.149"
   },
-  "gitHead": "00bb4d7ce228e089b53dfe998b8424984d048784"
+  "gitHead": "daaf50ad62081d7ad77eb4ac65100173df77c731"
 }