sag_components 2.0.0-beta26 → 2.0.0-beta28

package/dist/stories/Button.stories.js

@@ -0,0 +1,255 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SubmitButton = 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 _Button = require("./components/Button");
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'SAG/Button',
+  component: _Button.Button,
+  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: ''
+    },
+    backgroundColor: {
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets Background Color'
+      }
+    },
+    hoverBorderColor: {
+      name: 'hoverBorderColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets hover Border Color'
+      }
+    },
+    hoverTextColor: {
+      name: 'hoverTextColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets hover text Color'
+      }
+    },
+    hoverBackgroundColor: {
+      name: 'hoverBackgroundColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets hover background Color'
+      }
+    },
+    borderColor: {
+      name: 'borderColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets border Color'
+      }
+    },
+    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', 'Arrow', 'Bell', 'Document', 'Download', 'Exit', 'Eye', 'Filter', 'Fly', 'Maintenance', 'Options'],
+      control: {
+        type: 'select'
+      },
+      description: 'Choose an icon to apear on the button left side'
+    },
+    rightIcon: {
+      name: 'rightIcon',
+      options: ['none', 'Arrow', 'Bell', 'Document', 'Download', 'Exit', 'Eye', 'Filter', 'Fly', 'Maintenance', 'Options', 'Reselect'],
+      control: {
+        type: 'select'
+      },
+      description: 'Choose an icon to apear on the button right side'
+    },
+    isSubmitButton: {
+      name: 'isSubmitButton',
+      control: {
+        type: 'boolean'
+      },
+      description: 'use Submit instead of onClick. Please note: when this option is TRUE, the Button component does not support left and right icons, even if the icon is selected! '
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_Button.Button, args);
+const PrimaryDefault = exports.PrimaryDefault = Template.bind({});
+PrimaryDefault.args = {
+  text: 'Button',
+  type: 'primary',
+  size: 'small',
+  disabled: false,
+  leftIcon: 'none',
+  rightIcon: 'none',
+  isSubmitButton: false
+  // textColor: '#ffffff',
+  // backgroundColor: '#229E38',
+  // borderColor: '#229E38',
+  // hoverTextColor: '#ffffff',
+  // hoverBackgroundColor: '#92CF17',
+  // hoverBorderColor: '#92CF17',
+  // disabledTextColor: '#B1B1B1',
+  // disabledBackgroundColor: '#E3E4E5',
+  // disabledBorderColor: '#E3E4E5',
+};
+const PrimaryDisabled = exports.PrimaryDisabled = Template.bind({});
+PrimaryDisabled.args = {
+  text: 'Button',
+  type: 'primary',
+  size: 'small',
+  disabled: true,
+  leftIcon: 'none',
+  rightIcon: 'none',
+  isSubmitButton: false
+};
+const SecondaryDefault = exports.SecondaryDefault = Template.bind({});
+SecondaryDefault.args = {
+  text: 'Button',
+  type: 'secondary',
+  size: 'small',
+  disabled: false,
+  leftIcon: 'none',
+  rightIcon: 'none',
+  // textColor: '#212121',
+  // borderColor: '#B1B1B1',
+  // backgroundColor: '#ffffff',
+  // hoverTextColor: '#229E38',
+  // hoverBackgroundColor: '#E8F5EB',
+  // hoverBorderColor: '#229E38',
+  // disabledTextColor: '#B1B1B1',
+  // disabledBackgroundColor: '#ffffff',
+  // disabledBorderColor: '#E3E4E5',
+  isSubmitButton: false
+};
+const SecondaryDisabled = exports.SecondaryDisabled = Template.bind({});
+SecondaryDisabled.args = {
+  text: 'Button',
+  type: 'secondary',
+  size: 'small',
+  disabled: true,
+  leftIcon: 'none',
+  rightIcon: 'none',
+  isSubmitButton: false
+};
+const SmallButtonTwoIcons = exports.SmallButtonTwoIcons = Template.bind({});
+SmallButtonTwoIcons.args = {
+  text: 'Button',
+  type: 'primary',
+  size: 'small',
+  disabled: false,
+  leftIcon: 'Filter',
+  rightIcon: 'Exit',
+  isSubmitButton: false
+};
+const SmallButtonLeftIcon = exports.SmallButtonLeftIcon = Template.bind({});
+SmallButtonLeftIcon.args = {
+  text: 'Button',
+  type: 'primary',
+  size: 'small',
+  disabled: false,
+  leftIcon: 'Download',
+  rightIcon: 'none',
+  isSubmitButton: false
+};
+const SmallButtonRightIcon = exports.SmallButtonRightIcon = Template.bind({});
+SmallButtonRightIcon.args = {
+  text: 'Button',
+  type: 'primary',
+  size: 'small',
+  disabled: false,
+  leftIcon: 'none',
+  rightIcon: 'Exit',
+  isSubmitButton: false
+};
+const MediumButtonTwoIcons = exports.MediumButtonTwoIcons = Template.bind({});
+MediumButtonTwoIcons.args = {
+  text: 'Button',
+  type: 'primary',
+  size: 'medium',
+  disabled: false,
+  leftIcon: 'Filter',
+  rightIcon: 'Exit',
+  isSubmitButton: false
+};
+const MediumButtonLeftIcon = exports.MediumButtonLeftIcon = Template.bind({});
+MediumButtonLeftIcon.args = {
+  text: 'Button',
+  type: 'primary',
+  size: 'medium',
+  disabled: false,
+  leftIcon: 'Download',
+  rightIcon: 'none',
+  isSubmitButton: false
+};
+const MediumButtonRightIcon = exports.MediumButtonRightIcon = Template.bind({});
+MediumButtonRightIcon.args = {
+  text: 'Button',
+  type: 'primary',
+  size: 'medium',
+  disabled: false,
+  leftIcon: 'none',
+  rightIcon: 'Exit',
+  isSubmitButton: false
+};
+const SubmitButton = exports.SubmitButton = Template.bind({});
+SubmitButton.args = {
+  text: 'Submit',
+  type: 'primary',
+  size: 'medium',
+  disabled: false,
+  leftIcon: 'none',
+  rightIcon: 'none',
+  isSubmitButton: true
+};

package/dist/stories/CampaignDemoReport.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CampaignDemoReport = _interopRequireDefault(require("./components/CampaignTool/CampaignDemoReport"));
+var _default = exports.default = {
+  title: 'Campaign Tool/CampaignDemoReport',
+  component: _CampaignDemoReport.default,
+  tags: ['autodocs'],
+  argTypes: {
+    topHeadline: {
+      name: 'Top Headline',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    topLabels: {
+      name: 'Top Labels',
+      control: {
+        type: 'array'
+      }
+    },
+    bottomHeadline: {
+      name: 'Bottom Headline',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    bottomLabels: {
+      name: 'Bottom Labels',
+      control: {
+        type: 'array'
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.default, args);
+const Example = exports.Example = Template.bind({});
+Example.args = {
+  topHeadline: 'Live Campaigns This Week:',
+  topLabels: [{
+    icon: 'Label 1',
+    value: 'Monthly 2'
+  }, {
+    icon: 'Label 2',
+    value: 'Healthy Summer'
+  }, {
+    icon: 'Label 3',
+    value: 'Game Night'
+  }],
+  bottomHeadline: 'Upcoming Campaigns:',
+  bottomLabels: [{
+    icon: 'none',
+    value: 'Monthly 2'
+  }, {
+    icon: 'none',
+    value: 'Healthy Summer'
+  }]
+};

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'
+};