sag_components 1.0.85 → 1.0.86-7.2

package/chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:66a20fee679a2fff9bb06589",
+  "zip": true
+}

package/dist/Button.test.js

@@ -0,0 +1,158 @@
+"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");
+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,146 @@
+"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");
+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,72 @@
+"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 */
+
+test('SingleBarLineCharts Check if data is rendered', () => {
+  const data = [{
+    retailer: 'Retailer 1',
+    offerType: 'Offer 1',
+    period: 'Period 1',
+    lineValue: 10,
+    barValue: 20,
+    secondBarValue: 30
+  }, {
+    retailer: 'Retailer 2',
+    offerType: 'Offer 2',
+    period: 'Period 2',
+    lineValue: 15,
+    barValue: 25,
+    secondBarValue: 35
+  }];
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
+    width: "100%",
+    height: "100%",
+    barChartColor: "#1F7677",
+    secondBarChartColor: "#90CE9C",
+    barChartHeight: 250,
+    tooltipBarchartLabel: "Label",
+    lineChartHeight: 50,
+    lineChartColor: "#1F7677",
+    isLineChartPercent: false,
+    isLineChartBolded: false,
+    isTopBarPercent: true,
+    currencySign: "\u20AC",
+    data: data,
+    totalsData: [],
+    legendData: [],
+    noDataText: "No data"
+  }));
+  const retailer1Element = _react2.screen.getByText(/Retailer 1/i);
+  const retailer2Element = _react2.screen.getByText(/Retailer 2/i);
+  expect(retailer1Element).toBeInTheDocument();
+  expect(retailer2Element).toBeInTheDocument();
+});
+test('SingleBarLineCharts Check if no data message is rendered', () => {
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
+    width: "100%",
+    height: "100%",
+    barChartColor: "#1F7677",
+    secondBarChartColor: "#90CE9C",
+    barChartHeight: 250,
+    tooltipBarchartLabel: "Label",
+    lineChartHeight: 50,
+    lineChartColor: "#1F7677",
+    isLineChartPercent: false,
+    isLineChartBolded: false,
+    isTopBarPercent: true,
+    currencySign: "\u20AC",
+    data: [],
+    totalsData: [],
+    legendData: [],
+    noDataText: "No data"
+  }));
+  const noDataElement = _react2.screen.getByText(/No data/i);
+  expect(noDataElement).toBeInTheDocument();
+});

package/dist/index.js

@@ -5,7 +5,7 @@ var _react = _interopRequireDefault(require("react"));
 var _client = _interopRequireDefault(require("react-dom/client"));
 require("./index.css");
 var _App = _interopRequireDefault(require("./App"));
-var root = _client.default.createRoot(document.getElementById('root'));
+const root = _client.default.createRoot(document.getElementById('root'));
 root.render( /*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_App.default, null)));
 
 // If you want to start measuring performance in your app, pass a function

package/dist/setupTests.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@testing-library/jest-dom");

package/dist/stories/CampaignTool/Card.stories.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SingleCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Card = _interopRequireDefault(require("../components/CampaignTool/Card"));
+const data = [{
+  key: '1',
+  icon: 'cart',
+  label: 'Products',
+  value: 335
+}, {
+  key: '2',
+  icon: 'gift',
+  label: 'Brands',
+  value: 161
+}, {
+  key: '3',
+  icon: 'label',
+  label: 'Offers',
+  value: 223
+}, {
+  key: '4',
+  icon: 'truck',
+  label: 'Suppliers',
+  value: 246
+}, {
+  key: '5',
+  icon: '',
+  label: 'Total budget',
+  value: 45
+}, {
+  key: '6',
+  icon: '',
+  label: 'Self-funded budget',
+  value: 146
+}];
+var _default = exports.default = {
+  title: 'Campaign Tool/Card',
+  component: _Card.default,
+  tags: ['autodocs'],
+  argTypes: {
+    cardTitle: {
+      name: 'cardTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'Card title'
+    },
+    buttonText: {
+      name: 'buttonText',
+      control: {
+        type: 'text'
+      },
+      description: 'Button text'
+    },
+    width: {
+      name: 'Width',
+      control: {
+        type: 'text'
+      },
+      description: 'Table width'
+    },
+    height: {
+      name: 'Height',
+      control: {
+        type: 'text'
+      },
+      description: 'Table height'
+    },
+    onCardButtonClick: {
+      name: 'Button event',
+      action: 'onClick',
+      description: 'Click on a side big button'
+    }
+
+    // showPagination: {
+    //   name: 'Show Pagination',
+    //   control: { type: 'boolean' },
+    //   description: 'hide/show pagination',
+    //   defaultValue: true,
+    // },
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_Card.default, args);
+const SingleCard = exports.SingleCard = Template.bind({});
+_Card.default.args = {
+  data
+};

package/dist/stories/CampaignTool/MultipleCard.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CardsList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _MultipleCard = _interopRequireDefault(require("../components/CampaignTool/MultipleCard"));
+var _default = exports.default = {
+  title: 'Campaign Tool/MultipleCard',
+  component: _MultipleCard.default,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      name: 'Width',
+      control: {
+        type: 'text'
+      },
+      description: 'Table width'
+    },
+    height: {
+      name: 'Height',
+      control: {
+        type: 'text'
+      },
+      description: 'Table height'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_MultipleCard.default, args);
+const CardsList = exports.CardsList = Template.bind({});
+CardsList.args = {};

package/dist/stories/CampaignTool/PageFilterBar.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OffersPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PageFilterBar = _interopRequireDefault(require("../components/CampaignTool/PageFilterBar"));
+var _default = exports.default = {
+  title: 'Campaign Tool/PageFilterBar',
+  component: _PageFilterBar.default,
+  argTypes: {
+    pageHeadline: {
+      name: 'Headline Text',
+      control: {
+        type: 'text'
+      },
+      description: 'Headline text',
+      defaultValue: ''
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_PageFilterBar.default, args);
+const OffersPage = exports.OffersPage = Template.bind({});
+OffersPage.args = {
+  pageHeadline: 'Offers'
+};