sag_components 1.0.629 → 1.0.630

package/.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: 'airbnb',
+  extends: ['airbnb','eslint:recommended'],
   overrides: [
     {
       env: {
@@ -17,6 +17,10 @@ module.exports = {
       },
     },
   ],
+  plugins: [
+    'react',
+    'jest',
+  ],
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',

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/setupTests.js

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

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

@@ -85,7 +85,6 @@ var _default = exports.default = {
     // },
   }
 };
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_Card.default, args);
 const SingleCard = exports.SingleCard = Template.bind({});
 _Card.default.args = {

package/dist/stories/CampaignTool/PopupContent.stories.js

@@ -0,0 +1,284 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExamplePopupContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PopupContent = _interopRequireDefault(require("../components/CampaignTool/PopupContent"));
+const FieldsDataRow1 = [{
+  name: "FundationSource",
+  label: "Fundation Source",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Source",
+  dropdownOptions: [{
+    value: 1,
+    label: "Source 1"
+  }, {
+    value: 2,
+    label: "Source 2"
+  }, {
+    value: 3,
+    label: "Source 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Category",
+  label: "Category",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category 1"
+  }, {
+    value: 2,
+    label: "Category 2"
+  }, {
+    value: 3,
+    label: "Category 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Supplier",
+  label: "Supplier",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Supplier",
+  dropdownOptions: [{
+    value: 1,
+    label: "Supplier 1"
+  }, {
+    value: 2,
+    label: "Supplier 2"
+  }, {
+    value: 3,
+    label: "Supplier 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "ContactName",
+  label: "Contact Name",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Name",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow2 = [{
+  name: "BrandName",
+  label: "Brand Name",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Brand",
+  dropdownOptions: [{
+    value: 1,
+    label: "Brand 1"
+  }, {
+    value: 2,
+    label: "Brand 2"
+  }, {
+    value: 3,
+    label: "Brand 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Budget",
+  label: "Budget",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Budget",
+  dropdownOptions: [{
+    value: 1,
+    label: "Budget 1"
+  }, {
+    value: 2,
+    label: "Budget 2"
+  }, {
+    value: 3,
+    label: "Budget 3"
+  }],
+  dropdownDefaultValue: {
+    value: 1,
+    label: "Budget 1"
+  }
+}, {
+  name: "CategoryManager",
+  label: "Category Manager",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category Manager",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category Manager 1"
+  }, {
+    value: 2,
+    label: "Category Manager 2"
+  }, {
+    value: 3,
+    label: "Category Manager 3"
+  }],
+  dropdownDefaultValue: {
+    value: 3,
+    label: "Category Manager 3"
+  }
+}, {
+  name: "ContactEmail",
+  label: "Contact Email",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Email",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow3 = [{
+  name: "Broker",
+  label: "Broker",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Broker",
+  dropdownOptions: [{
+    value: 1,
+    label: "Broker 1"
+  }, {
+    value: 2,
+    label: "Broker 2"
+  }, {
+    value: 3,
+    label: "Broker 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "SupplierOfferID",
+  label: "Supplier Offer ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Supplier Offer ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "VendorID",
+  label: "Vendor ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Vendor ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "ContactPhone",
+  label: "Contact Phone",
+  disabled: false,
+  required: true,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Phone",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const RowsData1 = [{
+  fieldsArray: FieldsDataRow1
+}, {
+  fieldsArray: FieldsDataRow2
+}, {
+  fieldsArray: FieldsDataRow3
+}];
+var _default = exports.default = {
+  title: "Campaign Tool/PopupContent",
+  component: _PopupContent.default,
+  tags: ["autodocs"],
+  argTypes: {
+    FieldsData: {
+      name: "FieldsData",
+      control: {
+        type: "object"
+      },
+      description: " object: to fill kpi columns and buttons "
+    },
+    width: {
+      name: "width",
+      control: {
+        type: "text"
+      },
+      description: "width of the control (in px / %)"
+    },
+    height: {
+      name: "height",
+      control: {
+        type: "text"
+      },
+      description: "height of the control (in px / % )"
+    },
+    onClick: {
+      action: "onClick",
+      description: "onClick event - returns an object of check box {true/false} "
+    },
+    onChange: {
+      action: "onChange",
+      description: "onChange event  "
+    },
+    borderColor: {
+      name: "borderColor",
+      description: "Sets the border color",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_PopupContent.default, args);
+const ExamplePopupContent = exports.ExamplePopupContent = Template.bind({});
+ExamplePopupContent.args = {
+  rowsData: RowsData1,
+  borderColor: "#066768",
+  width: "100%",
+  height: "100%"
+};