sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/FormattedValue.stories.js

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Units = exports.TwoTitles = exports.TotalCost = exports.Percent = exports.OnlyBottomTitle = exports.NoTitle = exports.NoDotCut = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FormattedValue = require("./components/FormattedValue");
+var _default = exports.default = {
+  title: 'SAG BI/FormattedValue',
+  component: _FormattedValue.FormattedValue,
+  tags: ['autodocs'],
+  parameters: {
+    design: {
+      type: 'figspec'
+      // accessToken: 'figd_vlq2HLcwzTQLvrhLrFWY_Be8CqbuyKcltE9oyHnR',
+    }
+  },
+  argTypes: {
+    title: {
+      name: 'title',
+      control: {
+        type: 'text'
+      },
+      description: 'title on top of the component'
+    },
+    subtitle: {
+      name: 'subtitle',
+      control: {
+        type: 'text'
+      },
+      description: 'title on top of the component'
+    },
+    value: {
+      name: 'value',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100000000000000
+      },
+      description: 'value (total) '
+    },
+    dotCut: {
+      name: 'dotCut',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - format total value with dot cut'
+    },
+    currencySign: {
+      name: 'currencySign',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - show/hide currency sign before total value'
+    },
+    currencyType: {
+      name: 'currencyType',
+      options: ['USD', 'EUR', 'ILS', 'GBP', 'JPY'],
+      control: {
+        type: 'select'
+      }
+    },
+    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 / %)'
+    },
+    textcolor: {
+      name: 'textcolor',
+      description: 'Sets the text color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    isPercent: {
+      name: 'isPercent',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - isPercent'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValue, args);
+const TotalCost = exports.TotalCost = Template.bind({});
+TotalCost.args = {
+  title: 'Total Cost',
+  value: 36500,
+  dotCut: true,
+  currencySign: true,
+  currencyType: 'USD',
+  textcolor: '#212121',
+  height: '100%',
+  width: '100%',
+  isPercent: false
+};
+const NoDotCut = exports.NoDotCut = Template.bind({});
+NoDotCut.args = {
+  title: 'Total Cost',
+  value: 36500,
+  dotCut: false,
+  currencySign: true,
+  currencyType: 'USD',
+  textcolor: '#212121',
+  height: '100%',
+  width: '100%',
+  isPercent: false
+};
+const Units = exports.Units = Template.bind({});
+Units.args = {
+  title: 'Total Units',
+  value: 55201,
+  dotCut: true,
+  currencySign: false,
+  currencyType: '',
+  textcolor: '#212121',
+  height: '100%',
+  width: '100%',
+  isPercent: false
+};
+const Percent = exports.Percent = Template.bind({});
+Percent.args = {
+  title: 'Avg. Products Category Penetration',
+  value: 21,
+  dotCut: true,
+  currencySign: false,
+  currencyType: '',
+  textcolor: '#212121',
+  height: '100%',
+  width: '100%',
+  isPercent: true
+};
+const TwoTitles = exports.TwoTitles = Template.bind({});
+TwoTitles.args = {
+  title: 'Total Product Line Triers',
+  subtitle: 'Product Line Triers VS. Repeaters',
+  value: 36500,
+  dotCut: true,
+  currencySign: true,
+  currencyType: 'USD',
+  textcolor: '#212121',
+  height: '100%',
+  width: '100%',
+  isPercent: false
+};
+const OnlyBottomTitle = exports.OnlyBottomTitle = Template.bind({});
+OnlyBottomTitle.args = {
+  title: '',
+  subtitle: 'Product Line Triers VS. Repeaters',
+  value: 36500,
+  dotCut: true,
+  currencySign: true,
+  currencyType: 'USD',
+  textcolor: '#212121',
+  height: '100%',
+  width: '100%',
+  isPercent: false
+};
+const NoTitle = exports.NoTitle = Template.bind({});
+NoTitle.args = {
+  title: '',
+  subtitle: '',
+  value: 36500,
+  dotCut: true,
+  currencySign: true,
+  currencyType: 'USD',
+  textcolor: '#212121',
+  height: '100%',
+  width: '100%',
+  isPercent: false
+};

package/dist/stories/Heatmap.stories.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.CustomLowLimit = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Heatmap = _interopRequireDefault(require("./components/Heatmap"));
+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'
+}];
+var _default = exports.default = {
+  title: 'SAG BI/Heatmap',
+  component: _Heatmap.default,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      name: 'Title',
+      description: 'The title of the control',
+      control: {
+        type: 'text'
+      }
+    },
+    data: {
+      name: 'Data',
+      description: 'Array of data objects containing value, label, and color for each bar',
+      control: {
+        type: 'object',
+        defaultValue: [{
+          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'
+        }]
+      }
+    },
+    lowLimit: {
+      name: 'Low Limit',
+      description: 'The minimum value for the bars to be displayed',
+      control: {
+        type: 'number'
+      },
+      defaultValue: 1
+    },
+    barHeight: {
+      name: 'Bar Height',
+      description: 'The height of the bars',
+      control: {
+        type: 'text'
+      }
+    }
+  }
+}; // Template function to reuse for different stories
+const Template = args => /*#__PURE__*/_react.default.createElement(_Heatmap.default, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  title: 'Sales Split',
+  data: data1,
+  lowLimit: 1,
+  barHeight: '184px'
+};
+const CustomLowLimit = exports.CustomLowLimit = Template.bind({});
+CustomLowLimit.args = {
+  title: 'Sales Split - Low Limit',
+  data: data1,
+  lowLimit: 5,
+  barHeight: '184px'
+};

package/dist/stories/IconButton.stories.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Maintenance = exports.Exit = exports.DownloadProcess = exports.Download = exports.Document = exports.Bell = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _IconButton = require("./components/IconButton");
+var _default = exports.default = {
+  title: 'SAG/IconButton',
+  component: _IconButton.IconButton,
+  tags: ['autodocs'],
+  argTypes: {
+    iconName: {
+      name: 'Icon Name',
+      options: ['download', 'document', 'fly', 'bell', 'maintenance', 'exit', 'eye'],
+      control: {
+        type: 'select'
+      },
+      description: 'select icon from list to fill into the button'
+    },
+    buttonText: {
+      name: 'buttonText',
+      control: {
+        type: 'text'
+      },
+      description: 'Button text aside icon'
+    },
+    iconWidth: {
+      name: 'Icon Width',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 600
+      },
+      description: 'width of the icon (in px)'
+    },
+    iconHeight: {
+      name: 'Icon Height',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 600
+      },
+      description: 'height of the icon (in px)'
+    },
+    showProcess: {
+      name: 'Show Process',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Add visual progress on the button'
+    },
+    disabled: {
+      name: 'Disabled',
+      control: {
+        type: 'boolean'
+      },
+      description: 'changes the button to be enabled/disabled'
+    },
+    // downloadStatus: {
+    //   name: 'Download status',
+    //   control: { type: 'radio' },
+    //   options: ['in progress', 'success', 'fail'],
+    //   defaultValue: 'success',
+    //   description: 'The state of the button when progress exist',
+    // },
+
+    onClick: {
+      action: 'onClick',
+      description: 'returns an event click object when user clicks on a button'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, args);
+const Exit = exports.Exit = Template.bind({});
+Exit.args = {
+  iconName: 'exit',
+  iconWidth: 30,
+  iconHeight: 30,
+  showProcess: false,
+  disabled: false
+};
+const Download = exports.Download = Template.bind({});
+Download.args = {
+  iconName: 'download',
+  iconWidth: 30,
+  iconHeight: 30,
+  showProcess: false,
+  disabled: false
+};
+const DownloadProcess = exports.DownloadProcess = Template.bind({});
+Download.args = {
+  iconName: 'download',
+  iconWidth: 30,
+  iconHeight: 30,
+  buttonText: 'Download',
+  // downloadStatus: 'in progress',
+  showProcess: true,
+  disabled: false
+};
+const Document = exports.Document = Template.bind({});
+Document.args = {
+  iconName: 'document',
+  iconWidth: 18,
+  iconHeight: 18,
+  showProcess: false,
+  disabled: false
+};
+const Bell = exports.Bell = Template.bind({});
+Bell.args = {
+  iconName: 'bell',
+  iconWidth: 60,
+  iconHeight: 60,
+  showProcess: false,
+  disabled: false
+};
+const Maintenance = exports.Maintenance = Template.bind({});
+Maintenance.args = {
+  iconName: 'maintenance',
+  iconWidth: 40,
+  iconHeight: 40,
+  showProcess: false,
+  disabled: false
+};