@synerise/ds-filter 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.6.4...@synerise/ds-filter@0.7.0) (2022-04-05)
+
+
+### Bug Fixes
+
+* fix eslint errors ([7cce9b9](https://github.com/Synerise/synerise-design/commit/7cce9b94f8dea533b3c36a0f0cfd5145d4737166))
+
+
+### Features
+
+* **filter:** fixes bugs ([b862ddd](https://github.com/Synerise/synerise-design/commit/b862dddbce1293c2a5381663fc903bb574edd135))
+* **filter:** updates styles ([a826761](https://github.com/Synerise/synerise-design/commit/a826761de845a47f8436d22a7307f2c03bb197e0))
+
+
+
+
+
+## [0.6.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.6.3...@synerise/ds-filter@0.6.4) (2022-03-30)
+
+**Note:** Version bump only for package @synerise/ds-filter
+
+
+
+
+
+## [0.6.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.6.2...@synerise/ds-filter@0.6.3) (2022-03-24)
+
+**Note:** Version bump only for package @synerise/ds-filter
+
+
+
+
+
 ## [0.6.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.6.1...@synerise/ds-filter@0.6.2) (2022-03-24)
 
 **Note:** Version bump only for package @synerise/ds-filter

package/dist/Filter.js

@@ -20,7 +20,8 @@ var SORTABLE_CONFIG = {
   className: 'sortable-list',
   handle: '.step-card-drag-handler',
   animation: 200,
-  forceFallback: true
+  forceFallback: true,
+  filter: '.ds-matching-toggle, .ds-cruds'
 };
 var component = {
   LOGIC: Logic,
@@ -95,7 +96,34 @@ var Filter = function Filter(_ref) {
       }
     });
   }, [formatMessage, texts]);
+  var getContextTypeTexts = React.useCallback(function (expression) {
+    var contextType = expression.expressionType;
+    return {
+      matching: contextType === 'attribute' ? formatMessage({
+        id: 'DS.MATCHING.HAVE',
+        defaultMessage: 'Have'
+      }) : formatMessage({
+        id: 'DS.MATCHING.PERFORMED',
+        defaultMessage: 'Performed'
+      }),
+      notMatching: contextType === 'attribute' ? formatMessage({
+        id: 'DS.MATCHING.NOT-HAVE',
+        defaultMessage: 'Not have'
+      }) : formatMessage({
+        id: 'DS.MATCHING.NOT-PERFORMED',
+        defaultMessage: 'Not performed'
+      }),
+      conditionType: contextType === 'attribute' ? formatMessage({
+        id: 'DS.MATCHING.EXPRESSION-TYPE.ATTRIBUTE',
+        defaultMessage: 'attribute'
+      }) : formatMessage({
+        id: 'DS.MATCHING.EXPRESSION-TYPE.EVENT',
+        defaultMessage: 'event'
+      })
+    };
+  }, [formatMessage]);
   var componentProps = React.useCallback(function (expression) {
+    var contextTypeTexts = getContextTypeTexts(expression);
     var props = {
       LOGIC: {
         onChange: function onChange(value) {
@@ -117,11 +145,11 @@ var Filter = function Filter(_ref) {
         },
         footer: renderStepFooter && renderStepFooter(expression),
         children: renderStepContent && renderStepContent(expression),
-        texts: text.step
+        texts: _objectSpread({}, text.step, {}, contextTypeTexts)
       }
     };
     return props[expression.type];
-  }, [onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, text]);
+  }, [getContextTypeTexts, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, text.step]);
   var renderExpression = React.useCallback(function (expression, index) {
     var Component = component[expression.type];
     var LogicComponent = expression.logic && component[expression.logic.type];

package/dist/Filter.styles.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import { Body, Footer } from '@synerise/ds-step-card/dist/StepCard.styles';
+import { Body, DragIcon, Footer } from '@synerise/ds-step-card/dist/StepCard.styles';
 export var FilterWrapper = styled.div.withConfig({
   displayName: "Filterstyles__FilterWrapper",
   componentId: "w5f27p-0"
-})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:auto;"]);
+})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;"]);
 export var MatchingWrapper = styled.div.withConfig({
   displayName: "Filterstyles__MatchingWrapper",
   componentId: "w5f27p-1"
@@ -11,16 +11,16 @@ export var MatchingWrapper = styled.div.withConfig({
 export var LogicWrapper = styled.div.withConfig({
   displayName: "Filterstyles__LogicWrapper",
   componentId: "w5f27p-2"
-})(["margin-top:24px;"]);
+})(["margin:22px 0;"]);
 export var ExpressionWrapper = styled.div.withConfig({
   displayName: "Filterstyles__ExpressionWrapper",
   componentId: "w5f27p-3"
-})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:", ";&.sortable-chosen{cursor:grabbing;width:100%;opacity:1 !important;height:50px;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 16px 32px 0 #23293619;", "{display:none;}", "{display:none;}", "{display:none;}}&.ghost-element{cursor:grabbing;width:100%;background-color:", ";border:1px dashed ", ";border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:24px;height:70px;box-shadow:none;position:relative;&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}*{display:none;}}"], function (props) {
+})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:", ";&.sortable-chosen{cursor:grabbing;width:100%;opacity:1 !important;height:50px;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 16px 32px 0 #23293619;", "{visibility:visible;opacity:1;}", "{display:none;}", "{display:none;}", "{display:none;}}&.ghost-element{cursor:grabbing;width:100%;background-color:", ";border-left:2px solid ", ";border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:24px;height:68px;box-shadow:none;position:relative;&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}*{display:none;}}"], function (props) {
   return 1000 - props.index;
-}, Body, Footer, LogicWrapper, function (props) {
+}, DragIcon, Body, Footer, LogicWrapper, function (props) {
   return props.theme.palette['blue-050'];
 }, function (props) {
-  return props.theme.palette['blue-300'];
+  return props.theme.palette['blue-600'];
 }, function (props) {
   return props.theme.palette['blue-600'];
 });

package/dist/Filter.types.d.ts

@@ -12,6 +12,7 @@ declare type StepType = {
     id: string;
     data: Partial<StepCardProps>;
     logic?: LogicType;
+    expressionType?: 'attribute' | 'event';
 };
 export declare type Expression = LogicType | StepType;
 export declare type FilterProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-filter",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Filter 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.17.1",
-    "@synerise/ds-icon": "^0.48.0",
-    "@synerise/ds-logic": "^0.6.2",
-    "@synerise/ds-step-card": "^0.5.7",
+    "@synerise/ds-button": "^0.17.2",
+    "@synerise/ds-icon": "^0.49.0",
+    "@synerise/ds-logic": "^0.7.0",
+    "@synerise/ds-step-card": "^0.6.0",
     "react-sortablejs": "^6.0.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
     "@synerise/ds-step-card": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "7f696cdfd31f36bbeeb750df44b0f6d2010d0c9d"
+  "gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0"
 }