sag_components 2.0.0-beta27 → 2.0.0-beta28

package/dist/App.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./App.css");
+var _react = _interopRequireDefault(require("react"));
+var _Heatmap = _interopRequireDefault(require("./stories/components/Heatmap"));
+/* eslint-disable no-unused-vars */
+
+function App() {
+  const data1 = [{
+    value: 28.6441,
+    label: 'Homestyle Ranch',
+    color: '#066768'
+  }, {
+    value: 23.4555,
+    label: 'Sweet Potato Sea Salt Crisps',
+    color: '#066768CC'
+  }, {
+    value: 16.4022,
+    label: 'Farmhouse Cheddar Crisps',
+    color: '#066768B2'
+  }, {
+    value: 12.5,
+    label: 'Sweet Potato Sea',
+    color: '#74AAAA'
+  }, {
+    value: 11.1234,
+    label: 'Potato Sea Salt Crisps',
+    color: '#76B4B4'
+  }, {
+    value: 5.2211,
+    label: 'Farmhouse Cheddar Sea Salt Crisps',
+    color: '#229E7B'
+  }, {
+    value: 3.11122,
+    label: 'Farmhouse Homestyle Ranch',
+    color: '#229E38'
+  }];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      margin: '20px',
+      fontSize: '16px',
+      width: '500px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Heatmap.default, {
+    title: "Sales Split - Low Limit",
+    data: data1,
+    lowLimit: 5,
+    barHeight: "184px"
+  }));
+}
+var _default = exports.default = App;

package/dist/App.test.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = require("@testing-library/react");
+var _App = _interopRequireDefault(require("./App"));
+test('renders learn react link', function () {
+  (0, _react.render)( /*#__PURE__*/React.createElement(_App.default, null));
+  var linkElement = _react.screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

package/dist/Button.test.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Button = _interopRequireDefault(require("./stories/components/Button"));
+require("@testing-library/jest-dom");
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/no-unresolved */
+/* eslint-disable no-undef */
+
+test('Button Check text', () => {
+  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "test",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "none",
+    rightIcon: "none"
+  }));
+  const buttonElement = _react2.screen.getByText(/test/i);
+  expect(buttonElement).toBeInTheDocument();
+});
+test('Button Check type functionality: when "primary" type selected then background color must be specified as "rgb(146, 207, 23)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "none",
+    rightIcon: "none"
+  }));
+  const buttonElement = container.querySelector('.ButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.getPropertyValue('background-color')).toBe('rgb(146, 207, 23)');
+});
+test('Button Check type functionality: when "secondary" type selected then background color must be specified as  "rgb(232, 245, 235)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "secondary",
+    size: "small",
+    disabled: false,
+    leftIcon: "none",
+    rightIcon: "none"
+  }));
+  const buttonElement = container.querySelector('.ButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.getPropertyValue('background-color')).toBe('rgb(232, 245, 235)');
+});
+test('Button Check disabled functionality: when disabled prop is true, button textColor should be "rgb(177, 177, 177)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: true,
+    leftIcon: "none",
+    rightIcon: "none"
+  }));
+  const buttonElement = container.querySelector('.ButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.getPropertyValue('color')).toBe('rgb(177, 177, 177)');
+});
+test('Button Check leftIcon functionality: when "Filter"  icons is specified as the leftIcon  props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "Filter",
+    rightIcon: "Exit"
+  }));
+  const elementFilter = container.querySelector('.FilterIcon');
+  expect(elementFilter).toBeInTheDocument();
+});
+test('Button Check rightIcon functionality: when "Exit" icons is specified as the rightIcon props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "Filter",
+    rightIcon: "Exit"
+  }));
+  const elementExit = container.querySelector('.ExitIcon');
+  expect(elementExit).toBeInTheDocument();
+});
+test('Button Check leftIcon and rightIcon functionality: when "Filter" and "Exit" icons is specified as the leftIcon and rightIcon props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "Filter",
+    rightIcon: "Exit"
+  }));
+  const elementFilter = container.querySelector('.FilterIcon');
+  expect(elementFilter).toBeInTheDocument();
+  const elementExit = container.querySelector('.ExitIcon');
+  expect(elementExit).toBeInTheDocument();
+});
+test('Button Check small/medium functionality: when "small" the height must be "33px" ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "none",
+    rightIcon: "none"
+  }));
+  const elementButtonContainer = container.querySelector('.ButtonContainer');
+  expect(elementButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementButtonContainer);
+  expect(computedStyle.height).toBe('33px');
+});
+test('Button Check small/medium functionality: when "medium" the height must be "45px" ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "medium",
+    disabled: false
+  }));
+  const elementButtonContainer = container.querySelector('.ButtonContainer');
+  expect(elementButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementButtonContainer);
+  expect(computedStyle.height).toBe('45px');
+});
+test('Button Check specific height and width functionality: when height = 100px and width = 200px it should override  small/medium functionality ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    height: "100px",
+    width: "200px"
+  }));
+  const elementButtonContainer = container.querySelector('.ButtonContainer');
+  expect(elementButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementButtonContainer);
+  expect(computedStyle.height).toBe('100px');
+  expect(computedStyle.width).toBe('200px');
+});

package/dist/LinkButton.test.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _LinkButton = _interopRequireDefault(require("./stories/components/LinkButton"));
+require("@testing-library/jest-dom");
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/no-unresolved */
+/* eslint-disable no-undef */
+
+test('LinkButton Check text', () => {
+  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "test",
+    type: "secondary",
+    size: "small",
+    disabled: false
+  }));
+  const buttonElement = _react2.screen.getByText(/test/i);
+  expect(buttonElement).toBeInTheDocument();
+});
+test('LinkButton Check type functionality: when "primary" type selected then text color must be specified as "rgb(146, 207, 23)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false
+  }));
+  const buttonElement = container.querySelector('.LinkButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.color).toBe('rgb(34, 158, 56)');
+});
+test('LinkButton Check type functionality: when "secondary" type selected then background color must be specified as  "rgb(232, 245, 235)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "secondary",
+    size: "small",
+    disabled: false
+  }));
+  const buttonElement = container.querySelector('.LinkButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.color).toBe('rgb(33, 33, 33)');
+});
+test('LinkButton Check disabled functionality: when disabled prop is true, button textColor should be "rgb(177, 177, 177)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: true
+  }));
+  const buttonElement = container.querySelector('.LinkButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.color).toBe('rgb(177, 177, 177)');
+});
+test('LinkButton Check leftIcon and rightIcon functionality: when "Filter" and "Exit" icons is specified as the leftIcon and rightIcon props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "Filter",
+    rightIcon: "Exit"
+  }));
+  const elementFilter = container.querySelector('.FilterIcon');
+  expect(elementFilter).toBeInTheDocument();
+  const elementExit = container.querySelector('.ExitIcon');
+  expect(elementExit).toBeInTheDocument();
+});
+test('LinkButton Check rightIcon functionality: when "Exit" icons is specified as the rightIcon props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    rightIcon: "Exit"
+  }));
+  const elementExit = container.querySelector('.ExitIcon');
+  expect(elementExit).toBeInTheDocument();
+});
+test('LinkButton Check leftIcon  functionality: when "Filter" icons is specified as the leftIcon props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "Filter"
+  }));
+  const elementFilter = container.querySelector('.FilterIcon');
+  expect(elementFilter).toBeInTheDocument();
+});
+test('LinkButton Check small/medium functionality: when "small" the font-size must be "14px" ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false
+  }));
+  const elementLinkButtonContainer = container.querySelector('.LinkButtonItem');
+  expect(elementLinkButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementLinkButtonContainer);
+  expect(computedStyle.fontSize).toBe('14px');
+});
+test('LinkButton Check small/medium functionality: when "medium" the font-size must be "16px" ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "medium",
+    disabled: false
+  }));
+  const elementLinkButtonContainer = container.querySelector('.LinkButtonItem');
+  expect(elementLinkButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementLinkButtonContainer);
+  expect(computedStyle.fontSize).toBe('16px');
+});
+test('LinkButton Check specific height and width functionality: when height = 100px and width = 200px it should override  small/medium functionality ', () => {
+  const {
+    container
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    height: "100px",
+    width: "200px"
+  }));
+  const elementLinkButtonContainer = container.querySelector('.LinkButtonContainer');
+  expect(elementLinkButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementLinkButtonContainer);
+  expect(computedStyle.height).toBe('100px');
+  expect(computedStyle.width).toBe('200px');
+});

package/dist/SingleBar.test.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _SingleBarLineCharts = _interopRequireDefault(require("./stories/components/SingleBarLineCharts"));
+require("@testing-library/jest-dom");
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/no-unresolved */
+/* eslint-disable no-undef */
+
+const data = [{
+  retailer: 'Food Lion',
+  period: '15.01.24-31.01.24',
+  lineValue: 23.6,
+  barValue: 82.11,
+  secondBarValue: -138
+}, {
+  retailer: 'Hannaford',
+  period: '02.01.24-15.01.24',
+  lineValue: -4.6,
+  barValue: -149.9,
+  secondBarValue: 51.94
+}];
+const totalsData1 = [{
+  value: 374,
+  sign: '$',
+  extraInfo: []
+}, {
+  value: 1.6,
+  sign: '',
+  extraInfo: []
+}];
+const legendData1 = [{
+  iconColor: '#1F7677',
+  iconType: 'Square',
+  title: 'Dark Green'
+}, {
+  iconColor: '#90CE9C',
+  iconType: 'Square',
+  title: 'Light Green'
+}, {
+  iconColor: '#e89e68',
+  iconType: 'LegendUnionIcon',
+  title: 'Incremental Sales ROI'
+}];
+test('SingleBarLineCharts Check if title data is rendered', async () => {
+  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
+    width: "100%",
+    height: "100%",
+    title: "Total Cost Sales",
+    data: data,
+    totalsData: totalsData1,
+    legendData: legendData1,
+    maxBarRange: 1.3,
+    lineRange: 3,
+    barSize: 60,
+    barChartColor: "#1F7677",
+    secondBarChartColor: "#90CE9C",
+    barChartHeight: 255,
+    tooltipBarchartLabel: "Label",
+    lineChartHeight: 85,
+    isLineChartCurrency: false,
+    setLineChartTooltip: true,
+    lineChartColor: "#1F7677",
+    isLineChartPercent: false,
+    isLineChartBolded: false,
+    isTopBarPercent: true,
+    showSecondBar: true,
+    showPeriod: true,
+    currencySign: "\u20AC",
+    noDataText: "No data",
+    currencySignLine: ""
+  }));
+
+  // Use findByText to handle async rendering
+  const titleElement = await _react2.screen.findByText(content => content.includes('Total Cost Sales'));
+  const total1Element = await _react2.screen.findByText(content => content.includes('374'));
+  const total2Element = await _react2.screen.findByText(content => content.includes('1.6'));
+  expect(titleElement).toBeInTheDocument();
+  expect(total1Element).toBeInTheDocument();
+  expect(total2Element).toBeInTheDocument();
+});
+test('SingleBarLineCharts Check if legend data is rendered', async () => {
+  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
+    width: "100%",
+    height: "100%",
+    title: "Total Cost Sales",
+    data: data,
+    totalsData: totalsData1,
+    legendData: legendData1,
+    maxBarRange: 1.3,
+    lineRange: 3,
+    barSize: 60,
+    barChartColor: "#1F7677",
+    secondBarChartColor: "#90CE9C",
+    barChartHeight: 255,
+    tooltipBarchartLabel: "Label",
+    lineChartHeight: 85,
+    isLineChartCurrency: false,
+    setLineChartTooltip: true,
+    lineChartColor: "#1F7677",
+    isLineChartPercent: false,
+    isLineChartBolded: false,
+    isTopBarPercent: true,
+    showSecondBar: true,
+    showPeriod: true,
+    currencySign: "\u20AC",
+    noDataText: "No data",
+    currencySignLine: ""
+  }));
+
+  // Use findByText to handle async rendering
+  const legend1Element = await _react2.screen.findByText(content => content.includes('Dark Green'));
+  const legend2Element = await _react2.screen.findByText(content => content.includes('Light Green'));
+  const legend3Element = await _react2.screen.findByText(content => content.includes('Incremental Sales ROI'));
+  expect(legend1Element).toBeInTheDocument();
+  expect(legend2Element).toBeInTheDocument();
+  expect(legend3Element).toBeInTheDocument();
+});