sag_components 2.0.0-beta27 → 2.0.0-beta28

package/dist/stories/SingleBarLineCharts.stories.js

@@ -0,0 +1,310 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutTotals = exports.TotalCostSales = exports.NullValues = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SingleBarLineCharts = require("./components/SingleBarLineCharts");
+const totalsData1 = [{
+  value: 374,
+  sign: '$',
+  extraInfo: []
+}, {
+  value: 1.6,
+  sign: '',
+  extraInfo: []
+}];
+const data1 = [{
+  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
+}, {
+  retailer: 'The Giant Company',
+  period: '15.01.24-31.01.24',
+  lineValue: 2.6,
+  barValue: 77.92,
+  secondBarValue: 23.95
+}, {
+  retailer: 'Giant Food',
+  period: '02.01.24-15.01.24',
+  lineValue: 'N/A',
+  barValue: 122.99,
+  secondBarValue: 78.89
+}, {
+  retailer: 'Stop&Shop',
+  offerType: '20% Off',
+  period: '02.01.24-15.01.24',
+  lineValue: 0.2,
+  barValue: 44.22
+  // secondBarValue: 56,
+}];
+const legendData1 = [{
+  iconColor: '#1F7677',
+  iconType: 'Square',
+  title: 'Dark Green'
+}, {
+  iconColor: '#90CE9C',
+  iconType: 'Square',
+  title: 'Light Green'
+}, {
+  iconColor: '#e89e68',
+  iconType: 'LegendUnionIcon',
+  title: 'Incremental Sales ROI'
+}];
+var _default = exports.default = {
+  title: 'SAG BI/SingleBarLineCharts',
+  component: _SingleBarLineCharts.SingleBarLineCharts,
+  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 / %)'
+    },
+    title: {
+      name: 'Title',
+      control: {
+        type: 'text'
+      },
+      description: 'Title of the control'
+    },
+    data: {
+      name: 'Data',
+      description: 'array [] of objects: to fill the barcharts'
+    },
+    totalsData: {
+      name: 'Totals Data',
+      description: 'array [] of objects: to fill the totals on top of the component'
+    },
+    legendData: {
+      name: 'Legend Data',
+      description: 'array [] of objects: to fill the legend on bottom of the component'
+    },
+    maxBarRange: {
+      name: 'Max Range',
+      control: {
+        type: 'number'
+      },
+      description: 'max range of the control'
+    },
+    showLineChart: {
+      name: 'Show Line Chart',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - show/hide line chart'
+    },
+    lineRange: {
+      name: 'Line Range',
+      control: {
+        type: 'number'
+      },
+      description: 'Line range of the control'
+    },
+    barSize: {
+      name: 'Bar Size',
+      control: {
+        type: 'number'
+      },
+      description: 'Width size of the bar'
+    },
+    barChartHeight: {
+      name: 'Bar Chart Height',
+      control: {
+        type: 'number'
+      },
+      description: 'height of the control (in px)'
+    },
+    lineChartHeight: {
+      name: 'Line Chart Height',
+      control: {
+        type: 'number'
+      },
+      description: 'height of the control (in px)'
+    },
+    isLineChartCurrency: {
+      name: 'Set Line Value with Currency Sign',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - show/hide currency sign'
+    },
+    isLineChartBolded: {
+      name: 'Set Line Text Bolded',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - value bolded'
+    },
+    setLineChartTooltip: {
+      name: 'Set Line Chart Tooltip',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - show/hide line chart tooltip'
+    },
+    isTopBarPercent: {
+      name: 'Set Top Bar Value Percent',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Add Percent sign aside top bars value'
+    },
+    showSecondBar: {
+      name: 'Show Second Bar',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - show/hide second bar'
+    },
+    showPeriod: {
+      name: 'Show Period',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - show/hide period'
+    },
+    currencySignLine: {
+      name: 'Currency Sign Line',
+      control: {
+        type: 'text'
+      },
+      description: 'Currency sign for the line chart'
+    },
+    currencySign: {
+      name: 'Currency Sign',
+      options: ['', '$', '€'],
+      control: {
+        type: 'select'
+      },
+      description: 'What currency sign to put aside the top bar value'
+    },
+    noDataText: {
+      name: 'No Data Text',
+      control: {
+        type: 'text'
+      },
+      description: 'text to display when no data found'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.SingleBarLineCharts, args);
+const TotalCostSales = exports.TotalCostSales = Template.bind({});
+TotalCostSales.args = {
+  width: '100%',
+  height: '100%',
+  title: 'Total Cost Sales',
+  data: data1,
+  totalsData: totalsData1,
+  legendData: legendData1,
+  maxBarRange: 1.3,
+  lineRange: 3,
+  barSize: 60,
+  barChartHeight: 255,
+  lineChartHeight: 85,
+  isLineChartCurrency: false,
+  isLineChartBolded: false,
+  setLineChartTooltip: true,
+  isTopBarPercent: true,
+  showSecondBar: true,
+  showPeriod: true,
+  currencySignLine: '',
+  currencySign: '$',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there are no redemptions or redemption units to display.'
+};
+const WithoutTotals = exports.WithoutTotals = Template.bind({});
+WithoutTotals.args = {
+  width: '800px',
+  height: '500px',
+  title: 'Without Top Totals',
+  data: [{
+    retailer: 'Food Lion',
+    period: '15.01.24-31.01.24',
+    lineValue: 16.5,
+    barValue: 45
+    // secondBarValue: 87,
+  }, {
+    retailer: 'Hannaford',
+    period: '02.01.24-15.01.24',
+    lineValue: 36.6,
+    barValue: 32
+    // secondBarValue: 99,
+  }, {
+    retailer: 'Stop&Shop',
+    period: '02.01.24-15.01.24',
+    lineValue: 5.3,
+    barValue: 44
+    // secondBarValue: 56,
+  }],
+  totalsData: totalsData1,
+  legendData: legendData1,
+  maxBarRange: 1.3,
+  lineRange: 1,
+  barSize: 60,
+  barChartHeight: 255,
+  lineChartHeight: 85,
+  isLineChartCurrency: false,
+  isLineChartBolded: false,
+  setLineChartTooltip: false,
+  isTopBarPercent: false,
+  showSecondBar: false,
+  showLineChart: false,
+  showPeriod: true,
+  currencySignLine: '',
+  currencySign: '',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there are no redemptions or redemption units to display.'
+};
+const NullValues = exports.NullValues = Template.bind({});
+NullValues.args = {
+  width: '100%',
+  height: '100%',
+  title: 'Null Values',
+  data: [{
+    retailer: 'Food Lion',
+    period: '15.01.24-31.01.24',
+    lineValue: 16.5,
+    barValue: null,
+    secondBarValue: null
+  }, {
+    retailer: 'Hannaford',
+    period: '02.01.24-15.01.24',
+    lineValue: 6.6,
+    barValue: null,
+    secondBarValue: null
+  }],
+  totalsData: totalsData1,
+  legendData: legendData1,
+  maxBarRange: 1,
+  lineRange: 1,
+  barSize: 45,
+  barChartHeight: 250,
+  lineChartHeight: 80,
+  isLineChartCurrency: false,
+  isLineChartBolded: false,
+  setLineChartTooltip: false,
+  isTopBarPercent: false,
+  showSecondBar: true,
+  showPeriod: true,
+  currencySignLine: '',
+  currencySign: '$',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there are no redemptions or redemption units to display.'
+};

package/dist/stories/TabMenu.stories.js

@@ -0,0 +1,224 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TabMenu = _interopRequireDefault(require("./components/TabMenu"));
+var _LinkButton = _interopRequireDefault(require("./components/LinkButton"));
+var _default = exports.default = {
+  title: 'SAG/TabMenu',
+  component: _TabMenu.default,
+  argTypes: {
+    color: {
+      name: 'Selected Tab Color',
+      control: {
+        type: 'color'
+      },
+      description: 'Selected tab color'
+    },
+    tabs: {
+      name: 'Tabs',
+      control: {
+        type: 'object'
+      },
+      description: 'Array of tabs'
+    },
+    currentTab: {
+      name: 'Current Tab',
+      control: {
+        type: 'number'
+      },
+      description: 'Index of the current tab'
+    },
+    onTabChange: {
+      name: 'Tab Change',
+      action: 'tabChange',
+      description: 'Action for tab change'
+    },
+    showFilterButton: {
+      name: 'Show Filter Button',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Show filter button'
+    },
+    activeColor: {
+      name: 'Filter Icon Color',
+      control: {
+        type: 'color'
+      }
+    },
+    panelIsOpen: {
+      name: 'Panel Is Open',
+      control: {
+        type: 'boolean'
+      },
+      description: 'State of the panel'
+    },
+    onFilterButtonClick: {
+      name: 'Filter Button Click',
+      action: 'filterButtonClick',
+      description: 'Action for filter button click'
+    },
+    headlineInsteadTabs: {
+      name: 'Headline Instead Tabs',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Show headline instead of tabs'
+    },
+    headlineText: {
+      name: 'Headline Text',
+      control: {
+        type: 'text'
+      },
+      description: 'Text for the headline'
+    },
+    setTopRightButton: {
+      name: 'Top Right Button',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Set top right button'
+    },
+    buttonHoverColor: {
+      name: 'Button Hover Color',
+      control: {
+        type: 'color'
+      },
+      description: 'Button Hover Color'
+    },
+    disabledButton: {
+      name: 'Disabled Button',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Disable top button'
+    },
+    rightButtonText: {
+      name: 'Right Button Text',
+      control: {
+        type: 'text'
+      },
+      description: 'Text for right button',
+      defaultValue: 'Button'
+    },
+    rightButtonIcon: {
+      name: 'Right Button Icon',
+      control: {
+        type: 'text'
+      },
+      description: 'Icon for the right button'
+    },
+    onTopButtonClick: {
+      name: 'Top Button Click',
+      action: 'topButtonClick',
+      description: 'Action for top button'
+    },
+    showActions: {
+      name: 'Show Actions',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Show search and filter buttons'
+    },
+    showLabel: {
+      name: 'Show Label',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Show label for the tabs'
+    },
+    showViewOptionsButton: {
+      name: 'Show View Options Button',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Show view options button'
+    },
+    showSearchInput: {
+      name: 'Show Search Input',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Show search input'
+    },
+    inputWidth: {
+      name: 'Input Width',
+      control: {
+        type: 'text'
+      },
+      description: 'Width of the input field'
+    },
+    onSearchFieldTyping: {
+      name: 'Search Field Typing',
+      action: 'searchFieldTyping',
+      description: 'Action for typing in the search field'
+    },
+    children: {
+      name: 'Children',
+      control: {
+        type: 'text'
+      },
+      description: 'Children elements'
+    },
+    setBackground: {
+      name: 'Set Background',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Set background for the tab menu'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_TabMenu.default, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  color: '#229E38',
+  tabs: [{
+    title: 'Tab 1',
+    content: 'Content for Tab 1'
+  }, {
+    title: 'Tab 2',
+    content: 'Content for Tab 2'
+  }, {
+    title: 'Tab 3',
+    content: 'Content for Tab 3'
+  }],
+  currentTab: 0,
+  onTabChange: () => {
+    console.log('Tab changed');
+  },
+  showFilterButton: true,
+  activeColor: '#229E38',
+  panelIsOpen: false,
+  onFilterButtonClick: () => {
+    console.log('Filter button clicked');
+  },
+  headlineInsteadTabs: false,
+  headlineText: 'Headline',
+  setTopRightButton: false,
+  buttonHoverColor: "#92CF17",
+  disabledButton: false,
+  rightButtonText: 'Button',
+  rightButtonIcon: 'arrow',
+  onTopButtonClick: () => {
+    console.log('Top button clicked');
+  },
+  showActions: true,
+  showLabel: true,
+  showViewOptionsButton: true,
+  showSearchInput: true,
+  inputWidth: '100%',
+  onSearchFieldTyping: () => {
+    console.log('Typing in search field');
+  },
+  children: /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "Export",
+    leftIcon: "Download"
+  }),
+  setBackground: false
+};

package/dist/stories/TextField.stories.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RegularField = exports.Password = exports.DefaultValue = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TextField = require("./components/TextField");
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'SAG/TextField',
+  component: _TextField.TextField,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the input field'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the input field'
+    },
+    label: {
+      name: 'label',
+      control: {
+        type: 'text'
+      },
+      description: 'notify the user how to type a text',
+      defaultValue: 'Type...'
+    },
+    focusColor: {
+      name: 'focusColor',
+      control: {
+        type: 'color'
+      },
+      defaultValue: 'blue'
+    },
+    placeHolder: {
+      name: 'placeHolder',
+      control: {
+        type: 'text'
+      },
+      description: 'place holder of the input field'
+    },
+    shape: {
+      control: {
+        type: 'radio'
+      },
+      options: ['round', 'square'],
+      description: 'shape: round/square'
+    },
+    size: {
+      control: {
+        type: 'radio'
+      },
+      options: ['small', 'large'],
+      description: 'size: small/large'
+    },
+    passwordField: {
+      name: 'passwordField',
+      control: {
+        type: 'boolean'
+      },
+      description: 'defines if this field is for input password '
+    },
+    required: {
+      name: 'required',
+      control: {
+        type: 'boolean'
+      },
+      description: 'defines if this field is required'
+    },
+    defaultValue: {
+      name: 'defaultValue',
+      control: {
+        type: 'text'
+      },
+      description: 'sets default value',
+      defaultValue: 'Type...'
+    },
+    resetDefaultValue: {
+      name: 'resetDefaultValue',
+      control: {
+        type: 'boolean'
+      },
+      description: 'change this to reset default value'
+    },
+    allowedInput: {
+      name: 'allowedInput',
+      control: {
+        type: 'radio'
+      },
+      options: ['alpha', 'numeric', 'alphaNumeric', 'all'],
+      description: 'allowed input characters: numbers, alphabet ot both'
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'returns an option (object) selected by the user'
+    },
+    onInputChange: {
+      action: 'onInputChange',
+      description: 'returns a value (string) displayed in the textbox'
+    },
+    multiline: {
+      name: 'multiline',
+      control: {
+        type: 'boolean'
+      },
+      description: 'enable multiline'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_TextField.TextField, args);
+const RegularField = exports.RegularField = Template.bind({});
+RegularField.args = {
+  width: '100%',
+  height: '100%',
+  defaultValue: undefined,
+  label: 'Email',
+  placeHolder: 'Enter your email address',
+  shape: 'round',
+  size: 'small',
+  passwordField: false,
+  required: false,
+  allowedInput: 'all',
+  multiline: true
+};
+const DefaultValue = exports.DefaultValue = Template.bind({});
+DefaultValue.args = {
+  width: '100%',
+  height: '100%',
+  defaultValue: '',
+  label: 'Email',
+  placeHolder: 'Enter your email address',
+  shape: 'round',
+  size: 'small',
+  passwordField: false,
+  required: false,
+  allowedInput: 'all'
+};
+const Password = exports.Password = Template.bind({});
+Password.args = {
+  width: '100%',
+  height: '100%',
+  defaultValue: '9999',
+  label: 'Password',
+  placeHolder: undefined,
+  shape: 'round',
+  size: 'small',
+  passwordField: true,
+  required: false,
+  allowedInput: 'alphaNumeric'
+};