sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/KpiFilter.stories.js

@@ -0,0 +1,401 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SelectAllIgnoreList = exports.SagTheme = exports.HidePeriod = exports.AdusaTheme = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _KpiFilter = require("./components/KpiFilter");
+const kpiDataColumn1 = [{
+  label: 'Event Name',
+  checked: true,
+  disabled: true
+}, {
+  label: 'Event Description',
+  checked: false,
+  disabled: false,
+  secondButtonLabel: '%',
+  secondButtonChecked: false,
+  secondButtonDisabled: false
+}, {
+  label: 'Event Start Date',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Event End Date',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Event ID',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Event Type',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn2 = [{
+  label: 'Retailer',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Category',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Supplier',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Brand',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Item',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn3 = [{
+  label: 'Total Cost',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Package Cost',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Redemption Cost',
+  checked: false,
+  disabled: false,
+  marginBottom: '20px'
+}, {
+  label: 'Actual Sales ROI',
+  checked: false,
+  disabled: false
+}, {
+  label: 'INC Baseline ROI',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Inc. STLY ROI',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn4 = [{
+  label: 'Actual Sales',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Baseline Sales',
+  checked: false,
+  disabled: false
+}, {
+  label: 'STLY Sales',
+  checked: false,
+  disabled: false,
+  marginBottom: '20px'
+}, {
+  label: 'Actual Units',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Baseline Units',
+  checked: false,
+  disabled: false
+}, {
+  label: 'STLY Units',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Participating Units',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn5 = [{
+  label: 'INC Sales Baseline',
+  checked: true,
+  disabled: false
+}, {
+  label: 'INC Sales STLY',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Basket Lift',
+  checked: false,
+  disabled: false,
+  marginBottom: '20px'
+}, {
+  label: 'INC Baseline Units',
+  checked: false,
+  disabled: false
+}, {
+  label: 'INC STLY Units',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn6 = [{
+  label: 'Total Shoppers',
+  checked: true,
+  disabled: false
+}, {
+  label: 'New Shoppers',
+  checked: true,
+  disabled: false,
+  secondButtonLabel: '%',
+  secondButtonChecked: false,
+  secondButtonDisabled: false
+}, {
+  label: 'Existing Shoppers',
+  checked: true,
+  disabled: false,
+  secondButtonLabel: '%',
+  secondButtonChecked: false,
+  secondButtonDisabled: false,
+  marginBottom: '20px'
+}, {
+  label: 'Redeemers',
+  checked: false,
+  disabled: false
+}, {
+  label: 'New Redeemers',
+  checked: false,
+  disabled: false,
+  secondButtonLabel: '%',
+  secondButtonChecked: false,
+  secondButtonDisabled: false
+}, {
+  label: 'Existing Redeemers',
+  checked: false,
+  disabled: false,
+  secondButtonLabel: '%',
+  secondButtonChecked: false,
+  secondButtonDisabled: false
+}, {
+  label: 'Redemptions',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn7 = [{
+  label: 'New Repeaters',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Existing Repeaters',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Basket $ Chg - Existing Repeaters',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Basket Units Chg - Existing Repeaters',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Visits Chg - Existing Repeaters',
+  checked: false,
+  disabled: false
+}];
+const kpiData1 = [{
+  columnTitle: 'Event Attributes',
+  buttonsArray: kpiDataColumn1
+}, {
+  columnTitle: 'Data Resolution',
+  buttonsArray: kpiDataColumn2,
+  rightBorder: true
+}, {
+  columnTitle: 'Cost and ROI',
+  buttonsArray: kpiDataColumn3
+}, {
+  columnTitle: 'Sales and Units',
+  buttonsArray: kpiDataColumn4
+}, {
+  columnTitle: 'Incrementality',
+  buttonsArray: kpiDataColumn5,
+  rightBorder: true
+}, {
+  columnTitle: 'Shoppers and Redeemers',
+  buttonsArray: kpiDataColumn6
+}, {
+  columnTitle: 'Post Event',
+  buttonsArray: kpiDataColumn7
+}];
+var _default = exports.default = {
+  title: 'SAG BI/KpiFilter',
+  component: _KpiFilter.KpiFilter,
+  tags: ['autodocs'],
+  argTypes: {
+    mainTitle: {
+      name: 'mainTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'main title'
+    },
+    periodTitle: {
+      name: 'periodTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'period Title '
+    },
+    kpiData: {
+      name: 'kpiData',
+      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} '
+    },
+    // onClickIncludeBenchmark: {
+    //   action: "onClickIncludeBenchmark",
+    //   description:
+    //     "onClick Include Benchmark event - returns an object of check box {true/false} ",
+    // },
+
+    onClickPeriod: {
+      action: 'onClickPeriod',
+      description: ' onClickPeriod event  '
+    },
+    buttonsIconColor: {
+      name: 'buttonsIconColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets icons Color '
+      }
+    },
+    buttonsBorderColor: {
+      name: 'buttonsBorderColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets buttons border Color '
+      }
+    },
+    buttonsTextColorChecked: {
+      name: 'buttonsTextColorChecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text Checked Color '
+      }
+    },
+    buttonsTextColorUnchecked: {
+      name: 'buttonsTextColorUnchecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text Unchecked Color '
+      }
+    },
+    buttonsBackgroundColorChecked: {
+      name: 'buttonsBackgroundColorChecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text background Checked Color '
+      }
+    },
+    buttonsBackgroundColorUnchecked: {
+      name: 'buttonsBackgroundColorUnchecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text background Unchecked Color '
+      }
+    },
+    selectAllIgnoreList: {
+      name: 'selectAllIgnoreList',
+      control: {
+        type: 'object'
+      },
+      description: ' array of strings: selectAll Ignore List '
+    },
+    hidePeriod: {
+      name: 'hidePeriod',
+      control: {
+        type: 'boolean'
+      },
+      description: 'hide Period Buttons'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_KpiFilter.KpiFilter, args);
+const SagTheme = exports.SagTheme = Template.bind({});
+SagTheme.args = {
+  mainTitle: 'Select Table Columns',
+  periodTitle: 'Pre and Post Event Period',
+  kpiData: kpiData1,
+  width: '100%',
+  height: '100%',
+  buttonsIconColor: '#1B30AA',
+  buttonsBorderColor: '#1B30AA',
+  buttonsTextColorChecked: '#212121',
+  buttonsTextColorUnchecked: '#212121',
+  buttonsBackgroundColorChecked: '#E9F1FF',
+  buttonsBackgroundColorUnchecked: '#F2F2F2'
+};
+const AdusaTheme = exports.AdusaTheme = Template.bind({});
+AdusaTheme.args = {
+  mainTitle: 'Select Table Columns',
+  periodTitle: 'Pre and Post Event Period',
+  kpiData: kpiData1,
+  width: '100%',
+  height: '100%',
+  buttonsIconColor: '#90CE9C',
+  buttonsBorderColor: '#90CE9C',
+  buttonsTextColorChecked: '#212121',
+  buttonsTextColorUnchecked: '#212121',
+  buttonsBackgroundColorChecked: '#E9F5EB',
+  buttonsBackgroundColorUnchecked: '#F2F2F2'
+};
+const SelectAllIgnoreList = exports.SelectAllIgnoreList = Template.bind({});
+SelectAllIgnoreList.args = {
+  mainTitle: 'Select Table Columns',
+  periodTitle: 'Pre and Post Event Period',
+  kpiData: kpiData1,
+  width: '100%',
+  height: '100%',
+  buttonsIconColor: '#90CE9C',
+  buttonsBorderColor: '#90CE9C',
+  buttonsTextColorChecked: '#212121',
+  buttonsTextColorUnchecked: '#212121',
+  buttonsBackgroundColorChecked: '#E9F5EB',
+  buttonsBackgroundColorUnchecked: '#F2F2F2',
+  selectAllIgnoreList: ['Event Name', 'Event Description', 'Event Start Date']
+};
+const HidePeriod = exports.HidePeriod = Template.bind({});
+HidePeriod.args = {
+  mainTitle: 'Select Table Columns',
+  periodTitle: 'Pre and Post Event Period',
+  kpiData: kpiData1,
+  width: '100%',
+  height: '100%',
+  buttonsIconColor: '#90CE9C',
+  buttonsBorderColor: '#90CE9C',
+  buttonsTextColorChecked: '#212121',
+  buttonsTextColorUnchecked: '#212121',
+  buttonsBackgroundColorChecked: '#E9F5EB',
+  buttonsBackgroundColorUnchecked: '#F2F2F2',
+  selectAllIgnoreList: ['Event Name', 'Event Description', 'Event Start Date'],
+  hidePeriod: true
+};

package/dist/stories/LinkButton.stories.js

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SmallButtonTwoIcons = exports.SmallButtonRightIcon = exports.SmallButtonLeftIcon = exports.SecondaryDisabled = exports.SecondaryDefault = exports.PrimaryDisabled = exports.PrimaryDefault = exports.MediumButtonTwoIcons = exports.MediumButtonRightIcon = exports.MediumButtonLeftIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LinkButton = require("./components/LinkButton");
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'SAG/LinkButton',
+  component: _LinkButton.LinkButton,
+  tags: ['autodocs'],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/hhRW9o3Wqj3wF89qGJ2raZ/Sagarmatha--Design-System?m=dev&node-id=299-4075'
+    }
+  },
+  argTypes: {
+    text: {
+      name: 'text',
+      control: {
+        type: 'text'
+      },
+      description: 'text inside of the button'
+    },
+    type: {
+      control: {
+        type: 'radio'
+      },
+      options: ['primary', 'secondary'],
+      description: 'type of the button'
+    },
+    size: {
+      control: {
+        type: 'radio'
+      },
+      options: ['small', 'medium'],
+      description: 'size of the button'
+    },
+    disabled: {
+      name: 'disabled',
+      control: {
+        type: 'boolean'
+      },
+      description: 'changes the button to be enabled/disabled',
+      defaultValue: ''
+    },
+    textColor: {
+      name: 'textColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text Color'
+      }
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'returns an event click object when user clicks on a button'
+    },
+    leftIcon: {
+      name: 'leftIcon',
+      options: ['none', 'ArrowDown', 'ArrowRight', 'Select', 'Bell', 'Document', 'Download', 'Exit', 'Eye', 'Filter', 'Fly', 'Info', 'Maintenance', 'Options'],
+      control: {
+        type: 'select'
+      },
+      description: 'Choose an icon to apear on the button left side'
+    },
+    rightIcon: {
+      name: 'rightIcon',
+      options: ['none', 'ArrowDown', 'ArrowRight', 'Select', 'Bell', 'Document', 'Download', 'Exit', 'Eye', 'Filter', 'Fly', 'Info', 'Maintenance', 'Options'],
+      control: {
+        type: 'select'
+      },
+      description: 'Choose an icon to apear on the button right side'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_LinkButton.LinkButton, args);
+const PrimaryDefault = exports.PrimaryDefault = Template.bind({});
+PrimaryDefault.args = {
+  text: 'LinkButton',
+  type: 'primary',
+  size: 'small',
+  disabled: false,
+  leftIcon: 'none',
+  rightIcon: 'none'
+};
+const PrimaryDisabled = exports.PrimaryDisabled = Template.bind({});
+PrimaryDisabled.args = {
+  text: 'LinkButton',
+  type: 'primary',
+  size: 'small',
+  disabled: true,
+  leftIcon: 'none',
+  rightIcon: 'none'
+};
+const SecondaryDefault = exports.SecondaryDefault = Template.bind({});
+SecondaryDefault.args = {
+  text: 'LinkButton',
+  type: 'secondary',
+  size: 'small',
+  disabled: false,
+  leftIcon: 'none',
+  rightIcon: 'none'
+};
+const SecondaryDisabled = exports.SecondaryDisabled = Template.bind({});
+SecondaryDisabled.args = {
+  text: 'LinkButton',
+  type: 'secondary',
+  size: 'small',
+  disabled: true,
+  leftIcon: 'none',
+  rightIcon: 'none'
+};
+const SmallButtonTwoIcons = exports.SmallButtonTwoIcons = Template.bind({});
+SmallButtonTwoIcons.args = {
+  text: 'LinkButton',
+  type: 'primary',
+  size: 'small',
+  disabled: false,
+  leftIcon: 'Filter',
+  rightIcon: 'Exit'
+};
+const SmallButtonLeftIcon = exports.SmallButtonLeftIcon = Template.bind({});
+SmallButtonLeftIcon.args = {
+  text: 'LinkButton',
+  type: 'primary',
+  size: 'small',
+  disabled: false,
+  leftIcon: 'Download',
+  rightIcon: 'none'
+};
+const SmallButtonRightIcon = exports.SmallButtonRightIcon = Template.bind({});
+SmallButtonRightIcon.args = {
+  text: 'LinkButton',
+  type: 'primary',
+  size: 'small',
+  disabled: false,
+  leftIcon: 'none',
+  rightIcon: 'Exit'
+};
+const MediumButtonTwoIcons = exports.MediumButtonTwoIcons = Template.bind({});
+MediumButtonTwoIcons.args = {
+  text: 'LinkButton',
+  type: 'primary',
+  size: 'medium',
+  disabled: false,
+  leftIcon: 'Filter',
+  rightIcon: 'Exit'
+};
+const MediumButtonLeftIcon = exports.MediumButtonLeftIcon = Template.bind({});
+MediumButtonLeftIcon.args = {
+  text: 'LinkButton',
+  type: 'primary',
+  size: 'medium',
+  disabled: false,
+  leftIcon: 'Download',
+  rightIcon: 'none'
+};
+const MediumButtonRightIcon = exports.MediumButtonRightIcon = Template.bind({});
+MediumButtonRightIcon.args = {
+  text: 'LinkButton',
+  type: 'primary',
+  size: 'medium',
+  disabled: false,
+  leftIcon: 'none',
+  rightIcon: 'Exit'
+};

package/dist/stories/LinnerDataBox.stories.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LinnerDataBoxDefault = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LinnerDataBox = require("./components/LinnerDataBox");
+const data = [{
+  title: 'Total Cost',
+  value: null,
+  sign: '$',
+  extraInfo: [{
+    value: 7000,
+    title: 'Package cost'
+  }, {
+    value: null,
+    title: 'Redemption cost'
+  }]
+}, {
+  title: 'Actual Sales',
+  value: 150000.6,
+  sign: '$',
+  extraInfo: []
+}, {
+  title: 'Incremental Sales',
+  value: undefined,
+  sign: '$',
+  extraInfo: []
+}, {
+  title: 'Actual Sales ROI',
+  value: undefined,
+  sign: 'x',
+  extraInfo: []
+}, {
+  title: 'Incremental Sales ROI',
+  value: null,
+  sign: 'x',
+  extraInfo: []
+}];
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'SAG/LinnerDataBox',
+  component: _LinnerDataBox.LinnerDataBox,
+  tags: ['autodocs'],
+  argTypes: {
+    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 / %)'
+    },
+    backgroundColor: {
+      name: 'Background Color',
+      control: {
+        type: 'color'
+      },
+      description: 'Background color of the control'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.LinnerDataBox, args);
+const LinnerDataBoxDefault = exports.LinnerDataBoxDefault = Template.bind({});
+LinnerDataBoxDefault.args = {
+  data,
+  width: '100%',
+  height: 'auto',
+  backgroundColor: 'white'
+};