sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/Benchmark/Benchmark.stories.js

@@ -1,147 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LessAvarage = exports.GreaterAvarage = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Benchmark = require("./Benchmark");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'SAG BI/Benchmark',
-  component: _Benchmark.Benchmark,
-  tags: ['autodocs'],
-  argTypes: {
-    currentValue: {
-      name: 'currentValue',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100000000000000
-      },
-      description: 'curent value (<=100%) '
-    },
-    totalValue: {
-      name: 'totalValue',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100000000000000
-      },
-      description: 'total value (100%) '
-    },
-    benchmarkValue: {
-      name: 'benchmarkValue',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100000000000000
-      },
-      description: 'benchmark value - defines benchmark line relative position '
-    },
-    width: {
-      name: 'width',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 600
-      },
-      description: 'width of the control (in px)'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 600
-      },
-      description: 'height of the control (in px)'
-    },
-    color: {
-      name: 'color',
-      description: 'Sets the color of current value when it is greater then 50% of total value',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    linearGradientColor: {
-      name: 'linearGradientColor',
-      description: 'Sets the linear-Gradient color of current value when it is greater then 50% of total value',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    underAvarageColor: {
-      name: 'underAvarageColor',
-      description: 'Sets the color of current value when it is under 50% of total value',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    linearGradientUnderAvarageColor: {
-      name: 'linearGradientUnderAvarageColor',
-      description: 'Sets the linear-Gradient color of current value when it is under 50% of total value',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    backgroundColor: {
-      name: 'backgroundColor',
-      description: 'Sets the background color of the control',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    tooltipLabel: {
-      name: 'tooltipLabel',
-      control: {
-        type: 'text'
-      },
-      description: 'label of tooltip'
-    },
-    tooltipDirection: {
-      name: 'tooltipDirection',
-      control: {
-        type: 'radio'
-      },
-      options: ['top', 'left', 'right', 'bottom'],
-      description: 'tooltip direction'
-    }
-  }
-};
-const Template = args => <_Benchmark.Benchmark {...args} />;
-const GreaterAvarage = exports.GreaterAvarage = Template.bind({});
-GreaterAvarage.args = {
-  totalValue: 100000,
-  currentValue: 60000,
-  benchmarkValue: 30000,
-  width: 100,
-  height: 12,
-  color: '#79DB95',
-  linearGradientColor: '#C3EFD0',
-  underAvarageColor: '#FD5959',
-  linearGradientUnderAvarageColor: '#FDB1B1',
-  backgroundColor: '#F2F2F2',
-  tooltipLabel: 'Benchmark',
-  tooltipDirection: 'bottom'
-};
-const LessAvarage = exports.LessAvarage = Template.bind({});
-LessAvarage.args = {
-  totalValue: 1000,
-  currentValue: 400,
-  benchmarkValue: 500,
-  width: 100,
-  height: 12,
-  color: '#79DB95',
-  linearGradientColor: '#C3EFD0',
-  underAvarageColor: '#FD5959',
-  linearGradientUnderAvarageColor: '#FDB1B1',
-  backgroundColor: '#F2F2F2',
-  tooltipLabel: 'Value',
-  tooltipDirection: 'right'
-};

package/dist/components/Benchmark/Benchmark.style.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CurrentValueRectangle = exports.ControlsContainer = exports.Controls = exports.BackgroundValueRectangle = exports.AvarageDelimiter = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  display: flex;
-  position: relative;
-  margin: 0px 0 0px;
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  width: ${props => props.width.toString().concat('', 'px')};
-  height: ${props => props.height.toString().concat('', 'px')};
-  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 100px;
-  //border: 1px solid red;
-  align-items: center;
-`;
-const Controls = exports.Controls = _styledComponents.default.div`
-  position: relative;
-  border-radius: 100px;
-  width: ${props => props.width.toString().concat('', 'px')};
-  height: ${props => props.height.toString().concat('', 'px')};
-  //background: #ffffff;
-  //border: 1px solid blue;
-`;
-const BackgroundValueRectangle = exports.BackgroundValueRectangle = _styledComponents.default.div`
-  position: absolute;
-  width: ${props => props.width.toString().concat('', 'px')};
-  height: ${props => props.height.toString().concat('', 'px')};
-  top: 0px;
-  left: 0px;
-  border-radius: 100px;
-  background: ${props => props.color};
-  //border: 1px solid orange;
-`;
-const CurrentValueRectangle = exports.CurrentValueRectangle = _styledComponents.default.div`
-  position: absolute;
-  width: ${props => props.width.toString().concat('', 'px')};
-  height: ${props => props.height.toString().concat('', 'px')};
-  top: 0px;
-  left: 0px;
-  border-radius: 100px;
-  background: linear-gradient(
-    90deg,
-    ${props => props.lineargradientcolor} 0%,
-    ${props => props.color} 100%
-  );
-  //border: 1px solid green;
-`;
-const AvarageDelimiter = exports.AvarageDelimiter = _styledComponents.default.div`
-  position: absolute;
-  height: ${props => props.height.toString().concat('', 'px')};
-  width: ${props => props.width.toString().concat('', 'px')};
-  top: ${props => props.top.toString().concat('', 'px')};
-  left: ${props => props.left.toString().concat('', 'px')};
-  border: 1px solid #212121;
-`;

package/dist/components/Button/Button.js

@@ -1,181 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Button = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Button = require("./Button.style");
-var _FilterIcon = require("../../icons/FilterIcon");
-var _OptionsIcon = require("../../icons/OptionsIcon");
-var _DownloadIcon = require("../../icons/DownloadIcon");
-var _DocumentIcon = require("../../icons/DocumentIcon");
-var _FlyIcon = require("../../icons/FlyIcon");
-var _BellIcon = require("../../icons/BellIcon");
-var _MaintenanceIcon = require("../../icons/MaintenanceIcon");
-var _ExitIcon = require("../../icons/ExitIcon");
-var _EyeIcon = require("../../icons/EyeIcon");
-var _ButtonArrowRight = require("../../icons/ButtonArrowRight");
-var _ReselectIcon = require("../../icons/ReselectIcon");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Button = ({
-  text = '',
-  type = 'primary',
-  size = 'small',
-  height = '',
-  width = '',
-  disabled = false,
-  textColor = '',
-  backgroundColor = '',
-  borderColor = '',
-  hoverTextColor = '',
-  hoverBackgroundColor = '',
-  hoverBorderColor = '',
-  disabledTextColor = '',
-  disabledBackgroundColor = '',
-  disabledBorderColor = '',
-  onClick,
-  leftIcon = 'none',
-  rightIcon = 'none',
-  isSubmitButton = false
-}) => {
-  const [clicked, setClicked] = (0, _react.useState)(false);
-  const [hover, setHover] = (0, _react.useState)(false);
-  const handleSubmitButtonOnClick = () => {
-    setClicked(true);
-    onClick(`SubmitButtonOnClick: ${text}`);
-    setTimeout(() => {
-      setClicked(false);
-    }, 300);
-  };
-  const handleButtonClick = event => {
-    setClicked(true);
-    onClick(event);
-    setTimeout(() => {
-      setClicked(false);
-    }, 300);
-  };
-  const getIcon = icon => {
-    const iconHeight = '16px';
-    const iconWidth = '16px';
-    const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#ffffff');
-    const newHoverTextColor = hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff');
-    const newDisabledTextColor = disabledTextColor || '#B1B1B1';
-    const newEnabledTextColor = hover ? newHoverTextColor : newTextColor;
-    const color = disabled ? newDisabledTextColor : newEnabledTextColor;
-    switch (icon.toLowerCase()) {
-      case 'arrow':
-        return <_Button.IconWrapper className="ArrowRightIcon">
-            <_ButtonArrowRight.ButtonArrowRight height={iconHeight} width={iconWidth} color={color} />
-          </_Button.IconWrapper>;
-      case 'filter':
-        return <_Button.IconWrapper className="FilterIcon">
-            <_FilterIcon.FilterIcon height="150px" width={iconWidth} color={color} />
-          </_Button.IconWrapper>;
-      case 'options':
-        return <_Button.IconWrapper className="OptionsIcon">
-            <_OptionsIcon.OptionsIcon height={iconHeight} width={iconWidth} color={color} />
-          </_Button.IconWrapper>;
-      case 'download':
-        return <_Button.IconWrapper className="DownloadIcon">
-            <_DownloadIcon.DownloadIcon height={iconHeight} width={iconWidth} color={color} />
-          </_Button.IconWrapper>;
-      case 'document':
-        return <_Button.IconWrapper className="DocumentIcon">
-            <_DocumentIcon.DocumentIcon height={iconHeight} width={iconWidth} color={color} />
-          </_Button.IconWrapper>;
-      case 'fly':
-        return <_Button.IconWrapper className="FlyIcon">
-            <_FlyIcon.FlyIcon height={iconHeight} width={iconWidth} color={color} />
-          </_Button.IconWrapper>;
-      case 'bell':
-        return <_Button.IconWrapper className="BellIcon">
-            <_BellIcon.BellIcon height={iconHeight} width={iconWidth} color={color} />
-          </_Button.IconWrapper>;
-      case 'maintenance':
-        return <_Button.IconWrapper className="MaintenanceIcon">
-            <_MaintenanceIcon.MaintenanceIcon height={iconHeight} width={iconWidth} color={color} />
-          </_Button.IconWrapper>;
-      case 'exit':
-        return <_Button.IconWrapper className="ExitIcon">
-            <_ExitIcon.ExitIcon height={iconHeight} width={iconWidth} color={color} />
-          </_Button.IconWrapper>;
-      case 'eye':
-        return <_Button.IconWrapper className="EyeIcon">
-            <_EyeIcon.EyeIcon height={iconHeight} width={iconWidth} color={color} />
-          </_Button.IconWrapper>;
-      case 'reselect':
-        return <_Button.IconWrapper className="ReselectIcon">
-            <_ReselectIcon.ReselectIcon height={iconHeight} width={iconWidth} color={color} />
-          </_Button.IconWrapper>;
-      default:
-        return '';
-    }
-  };
-  const getLeftIcon = () => {
-    if (!leftIcon || leftIcon === 'none') return '';
-    return getIcon(leftIcon);
-  };
-  const getRightIcon = () => {
-    if (!rightIcon || rightIcon === 'none') return '';
-    return getIcon(rightIcon);
-  };
-  return <_Button.ButtonContainer className="ButtonContainer" width={width || null} height={height || (size === 'small' ? '33px' : '45px')}>
-      {isSubmitButton ? <_Button.InputCommit className={clicked ? 'InputCommit-clicked' : 'InputCommit'} value={text} type="submit" width={width || null} height={height || (size === 'small' ? '33px' : '45px')} disabled={disabled} text_color={textColor || (type === 'secondary' ? '#212121' : '#ffffff')} background_color={backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38')} border_color={borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38')} hover_text_color={hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff')} hover_background_color={hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17')} hover_border_color={hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17')} disabled_text_color={disabledTextColor || '#B1B1B1'} disabled_background_color={disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5')} disabled_border_color={disabledBorderColor || '#E3E4E5'} padding={size === 'small' ? '0 16px' : '0 20px'} onClick={!disabled ? handleSubmitButtonOnClick : null} /> : <_Button.ButtonItem className={clicked ? 'ButtonItem-clicked' : 'ButtonItem'} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={event => !disabled ? handleButtonClick(event) : null} width={width || null} height={height || (size === 'small' ? '33px' : '45px')} disabled={disabled} text_color={textColor || (type === 'secondary' ? '#212121' : '#ffffff')} background_color={backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38')} border_color={borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38')} hover_text_color={hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff')} hover_background_color={hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17')} hover_border_color={hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17')} disabled_text_color={disabledTextColor || '#B1B1B1'} disabled_background_color={disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5')} disabled_border_color={disabledBorderColor || '#E3E4E5'} padding={size === 'small' ? '0 16px' : '0 20px'}>
-          {getLeftIcon()}
-
-          <_Button.Label className="Label" disabled={disabled}>
-            {text}
-          </_Button.Label>
-
-          {getRightIcon()}
-        </_Button.ButtonItem>}
-
-    </_Button.ButtonContainer>;
-};
-exports.Button = Button;
-var _default = exports.default = Button; // Button.propTypes = {
-//   text: PropTypes.string,
-//   type: PropTypes.string,
-//   size: PropTypes.string,
-//   height: PropTypes.string,
-//   width: PropTypes.string,
-//   disabled: PropTypes.bool,
-//   textColor: PropTypes.string,
-//   backgroundColor: PropTypes.string,
-//   borderColor: PropTypes.string,
-//   hoverTextColor: PropTypes.string,
-//   hoverBackgroundColor: PropTypes.string,
-//   hoverBorderColor: PropTypes.string,
-//   disabledTextColor: PropTypes.string,
-//   disabledBackgroundColor: PropTypes.string,
-//   disabledBorderColor: PropTypes.string,
-//   onClick: PropTypes.func,
-//   leftIcon: PropTypes.string,
-//   rightIcon: PropTypes.string,
-//   isSubmitButton: PropTypes.bool,
-// };
-// Button.defaultProps = {
-//   text: '',
-//   type: 'primary',
-//   size: 'small',
-//   height: '',
-//   width: '',
-//   disabled: false,
-//   textColor: '',
-//   backgroundColor: '',
-//   borderColor: '',
-//   hoverTextColor: '',
-//   hoverBackgroundColor: '',
-//   hoverBorderColor: '',
-//   disabledTextColor: '',
-//   disabledBackgroundColor: '',
-//   disabledBorderColor: '',
-//   onClick: () => { },
-//   leftIcon: 'none',
-//   rightIcon: 'none',
-//   isSubmitButton: false,
-// };

package/dist/components/Button/Button.stories.js

@@ -1,255 +0,0 @@
-"use strict";
-
-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("./Button");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// 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 => <_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
-};