@synerise/ds-card-tabs 0.13.9 → 0.13.12

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.13.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.13.8...@synerise/ds-card-tabs@0.13.9) (2022-08-04)
+## [0.13.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.13.11...@synerise/ds-card-tabs@0.13.12) (2022-08-25)
 
 **Note:** Version bump only for package @synerise/ds-card-tabs
 
@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.13.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.13.5...@synerise/ds-card-tabs@0.13.8) (2022-08-04)
+## [0.13.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.13.6...@synerise/ds-card-tabs@0.13.11) (2022-08-11)
 
 **Note:** Version bump only for package @synerise/ds-card-tabs
 
@@ -19,9 +19,13 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.13.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.13.5...@synerise/ds-card-tabs@0.13.7) (2022-08-04)
+## [0.13.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.13.5...@synerise/ds-card-tabs@0.13.6) (2022-07-28)
 
-**Note:** Version bump only for package @synerise/ds-card-tabs
+
+### Bug Fixes
+
+* **card-tabs:** add option of custom color to pick ([8504ed6](https://github.com/Synerise/synerise-design/commit/8504ed6a7a50a75851973ad2062d1a9c65e33489))
+* **card-tabs:** width for 3 card tabs and width lte 588px ([e80e56f](https://github.com/Synerise/synerise-design/commit/e80e56f6f4ea3d8029f066e02570423f589f0e9e))
 
 
 

package/dist/CardTab/CardTab.styles.js

@@ -78,7 +78,7 @@ export var CardIconPrefix = styled.div.withConfig({
 export var CardTabContainer = styled.div.withConfig({
   displayName: "CardTabstyles__CardTabContainer",
   componentId: "sc-1n86s98-10"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px;width:180px;height:40px;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:", ";}", "{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) {
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px;width:180px;@media (max-width:588px){max-width:145px;}height:40px;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:", ";}", "{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,

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IntlShape } from 'react-intl';
+import { DefaultColor } from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
 export declare enum prefixType {
     TAG = 0,
     ICON = 1,
@@ -18,7 +19,7 @@ export interface CardTabProps {
     tag: string;
     prefix: prefixType;
     colorDot: React.ReactNode;
-    color?: Color;
+    color?: Color | DefaultColor | string;
     active?: boolean;
     draggable?: boolean;
     prefixIcon?: React.ReactNode;

package/dist/CardTabs.js

@@ -9,8 +9,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import { ReactSortable } from 'react-sortablejs-typescript';
 import Button from '@synerise/ds-button';
+import { defaultColorsOrder } from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
 import * as S from './CardTabs.styles';
-import { COLORS_TABS } from './CardTab/ColorsTabs';
 var SORTABLE_CONFIG = {
   ghostClass: 'sortable-card-ghost-element',
   className: 'sortable-card',
@@ -35,10 +35,11 @@ var CardTabs = function CardTabs(_ref) {
 
   var renderChildren = function renderChildren() {
     return React.Children.map(children, function (child, i) {
-      return React.cloneElement(child, {
-        color: COLORS_TABS[i % COLORS_TABS.length],
+      return React.cloneElement(child, _objectSpread({}, child.props.color ? {} : {
+        color: defaultColorsOrder[i % defaultColorsOrder.length]
+      }, {
         draggable: Boolean(onChangeOrder) || child.props.draggable
-      });
+      }));
     });
   };
 
@@ -57,6 +58,7 @@ var CardTabs = function CardTabs(_ref) {
   }, renderChildren()), onAddTab && /*#__PURE__*/React.createElement("span", {
     "data-testid": "card-tabs-add-button"
   }, /*#__PURE__*/React.createElement(Button.Creator, {
+    block: true,
     disabled: !!maxTabsCount && React.Children.toArray(children).length >= maxTabsCount,
     label: addTabLabel != null ? addTabLabel : '',
     onClick: onAddTab

package/dist/CardTabs.styles.js

@@ -1,13 +1,14 @@
 import styled from 'styled-components';
+import * as CreatorStyles from '@synerise/ds-button/dist/Creator/Creator.styles';
 import { CardTabContainer } from './CardTab/CardTab.styles'; // eslint-disable-next-line import/prefer-default-export
 
 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:12px;margin-bottom:16px;}.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) {
+})(["display:flex;flex-direction:row;algin-items:flex-start;justify-content:flex-start;width:100%;", "{margin-right:12px;margin-bottom:16px;}.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;}}@media (max-width:588px){.ds-button-creator{", "{display:none;}}}"], CardTabContainer, function (props) {
   return props.theme.palette.white;
 }, function (props) {
   return props.theme.palette['blue-300'];
 }, function (props) {
   return props.theme.palette['blue-050'];
-});
+}, CreatorStyles.CreatorLabel);

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default } from './CardTabs';
+export { default as CardTab } from './CardTab/CardTab';

package/dist/index.js

@@ -1 +1,2 @@
-export { default } from './CardTabs';
+export { default } from './CardTabs';
+export { default as CardTab } from './CardTab/CardTab';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card-tabs",
-  "version": "0.13.9",
+  "version": "0.13.12",
   "description": "CardTabs UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,11 +32,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.17.5",
-    "@synerise/ds-cruds": "^0.3.13",
-    "@synerise/ds-icon": "^0.49.3",
-    "@synerise/ds-inline-edit": "^0.6.21",
-    "@synerise/ds-typography": "^0.12.5",
+    "@synerise/ds-button": "^0.17.8",
+    "@synerise/ds-cruds": "^0.3.16",
+    "@synerise/ds-icon": "^0.50.0",
+    "@synerise/ds-inline-edit": "^0.6.24",
+    "@synerise/ds-typography": "^0.12.7",
     "react-sortablejs-typescript": "2.0.3",
     "sortablejs": "^1.10.1"
   },
@@ -48,5 +48,5 @@
   "devDependencies": {
     "@types/lodash": "4.14.149"
   },
-  "gitHead": "28486eab4b37b485cbe2a383e3ae9b8e9d789862"
+  "gitHead": "c9530f0548fa244796b0c6b1ea5fa3d6330e84ea"
 }