sag_components 1.0.721 → 1.0.724

package/dist/stories/components/BarChart.js

@@ -29,7 +29,11 @@ const BarChart = props => {
     height,
     barChartColor,
     showLegend,
-    legendData
+    legendData,
+    showReferenceLine,
+    referenceLinePoint,
+    referenceLineColor,
+    referenceLineDashed
   } = props;
 
   // const [BarChartContainerWidth, setBarChartContainerWidth] = useState(0);
@@ -149,12 +153,17 @@ const BarChart = props => {
       bottom: 25,
       left: -5
     }
-  }, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
+  }, showReferenceLine && /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
+    y: referenceLinePoint,
+    stroke: referenceLineColor,
+    strokeDasharray: referenceLineDashed
+  }), /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
     dataKey: "title",
     tick: CustomizedTickBarChart,
     tickLine: false,
     height: 120,
-    stroke: "#D0D0D0"
+    stroke: "#D0D0D0",
+    domain: [0, 'auto']
   }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
   }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
@@ -205,5 +214,9 @@ BarChart.defaultProps = {
     title: 'Incremental Sales',
     iconType: ICON_TYPE_SQUARE,
     iconColor: '#BD9EFF'
-  }]
+  }],
+  showReferenceLine: true,
+  referenceLinePoint: 0,
+  referenceLineColor: '#212121',
+  referenceLineDashed: '5'
 };

package/dist/stories/components/BarChartTwoRows.js

@@ -101,26 +101,20 @@ const BarChartTwoRows = props => {
       value
     } = props;
     return /*#__PURE__*/_react.default.createElement("text", {
-      x: x,
+      x: x + 30,
       y: y,
       dy: -8,
       fill: stroke,
-      fontSize: 14
+      fontSize: 14,
+      textAnchor: "middle"
     }, displayFormattedValue(value));
   };
   return /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.ControlsContainer, {
     className: className,
-    id: "ControlsContainer",
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Controls, {
-    id: "Controls"
-  }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.TitleAndValueContainer, {
-    id: "TitleAndValueContainer"
-  }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Title, {
-    id: "Title"
-  }, title)), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+  }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Controls, null, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.TitleAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Title, null, title)), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
     id: "ResponsiveContainer",
     width: "100%",
     height: showLegend ? '80%' : '86%'

package/dist/stories/components/DropdownMultiNew.js

@@ -29,7 +29,8 @@ const DropdownMultiNew = _ref => {
     errorMessage,
     labelColor,
     xIconShow,
-    checkBoxColor
+    checkBoxColor,
+    showLabelOnTop
   } = _ref;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [showOptions, setShowOptions] = (0, _react.useState)(false);
@@ -142,6 +143,32 @@ const DropdownMultiNew = _ref => {
     }, selectedOptions.length - 2, "+") : '');
     return content;
   };
+  const getLabel = () => {
+    if (!showLabelOnTop && isFocused) {
+      return '';
+    }
+    if ((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0) {
+      return label;
+    }
+    return labelEmptyValue;
+    // selectedOptions?.length > 0 ?  label : labelEmptyValue}
+  };
+  const getRequired = () => {
+    if (!showLabelOnTop && isFocused) {
+      return '';
+    }
+    if (!showLabelOnTop && !label && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0) {
+      return '';
+    }
+    if (required) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          color: 'red'
+        }
+      }, "*");
+    }
+    return '';
+  };
   return /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.DropdownWrapper, {
     className: "DropdownWrapper",
     width: width,
@@ -169,11 +196,7 @@ const DropdownMultiNew = _ref => {
     error: error,
     errorMessage: errorMessage,
     onClick: handleLabelClick
-  }, (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 ? label : labelEmptyValue, required && /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      color: 'red'
-    }
-  }, "*")), displaySelectedOptions(), showOptions ? /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.StyledInput, {
+  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.StyledInput, {
     className: "StyledInput",
     ref: inputRef,
     value: inputValue,
@@ -248,5 +271,6 @@ DropdownMultiNew.defaultProps = {
   options: [],
   selectedValue: [],
   xIconShow: true,
-  onChange: () => {}
+  onChange: () => {},
+  showLabelOnTop: true
 };

package/dist/stories/components/DropdownNew.js

@@ -27,7 +27,8 @@ const DropdownNew = _ref => {
     errorMessage,
     labelColor,
     checkBoxColor,
-    xIconShow
+    xIconShow,
+    showLabelOnTop
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownMain, {
     className: "DropdownMain",
@@ -46,7 +47,8 @@ const DropdownNew = _ref => {
     error: error,
     errorMessage: errorMessage,
     selectedValue: selectedValue,
-    onChange: onChange
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop
   }) : /*#__PURE__*/_react.default.createElement(_DropdownSingleNew.DropdownSingleNew, {
     className: "DropdownSingleNew",
     placeHolder: placeHolder,
@@ -62,7 +64,8 @@ const DropdownNew = _ref => {
     errorMessage: errorMessage,
     selectedValue: selectedValue,
     xIconShow: xIconShow,
-    onChange: onChange
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop
   }));
 };
 exports.DropdownNew = DropdownNew;
@@ -81,5 +84,6 @@ DropdownNew.defaultProps = {
   options: [],
   selectedValue: [],
   xIconShow: true,
-  onChange: () => {}
+  onChange: () => {},
+  showLabelOnTop: true
 };

package/dist/stories/components/DropdownSingleNew.js

@@ -26,7 +26,8 @@ const DropdownSingleNew = _ref => {
     error,
     errorMessage,
     xIconShow,
-    labelColor
+    labelColor,
+    showLabelOnTop
   } = _ref;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [showOptions, setShowOptions] = (0, _react.useState)(false);
@@ -110,6 +111,32 @@ const DropdownSingleNew = _ref => {
       newValue: []
     });
   };
+  const getLabel = () => {
+    if (!showLabelOnTop && isFocused) {
+      return '';
+    }
+    if ((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0) {
+      return label;
+    }
+    return labelEmptyValue;
+    // selectedOptions?.length > 0 ?  label : labelEmptyValue}
+  };
+  const getRequired = () => {
+    if (!showLabelOnTop && isFocused) {
+      return '';
+    }
+    if (!showLabelOnTop && !label && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0) {
+      return '';
+    }
+    if (required) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          color: 'red'
+        }
+      }, "*");
+    }
+    return '';
+  };
   return /*#__PURE__*/_react.default.createElement(_DropdownSingleNew.DropdownWrapper, {
     className: "DropdownWrapper",
     width: width,
@@ -137,11 +164,7 @@ const DropdownSingleNew = _ref => {
     error: error,
     errorMessage: errorMessage,
     onClick: handleLabelClick
-  }, (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 ? label : labelEmptyValue, required && /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      color: 'red'
-    }
-  }, "*")), /*#__PURE__*/_react.default.createElement(_DropdownSingleNew.StyledInput, {
+  }, getLabel(), getRequired()), /*#__PURE__*/_react.default.createElement(_DropdownSingleNew.StyledInput, {
     className: "StyledInput",
     ref: inputRef
     // eslint-disable-next-line no-nested-ternary
@@ -207,5 +230,6 @@ DropdownSingleNew.defaultProps = {
   options: [],
   selectedValue: [],
   xIconShow: true,
-  onChange: () => {}
+  onChange: () => {},
+  showLabelOnTop: true
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.721",
+  "version": "1.0.724",
   "description": "",
   "main": "dist/index.js",
   "scripts": {