sag_components 1.0.85 → 1.0.86-7.2

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

@@ -0,0 +1,269 @@
+"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("./Button");
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'SAG Core/Button',
+  component: _Button.Button,
+  tags: ['autodocs'],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/hhRW9o3Wqj3wF89qGJ2raZ/Sagarmatha--Design-System?node-id=299-4075&t=xKolv44KqyAdlKND-4'
+    }
+  },
+  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', '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', 'Bell', 'Document', 'Download', 'Exit', 'Eye', 'Filter', 'Fly', 'Maintenance', 'Options'],
+      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 PrimaryDefault = exports.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 = {
+  args: {
+    text: 'Button',
+    type: 'primary',
+    size: 'small',
+    disabled: true,
+    leftIcon: 'none',
+    rightIcon: 'none',
+    isSubmitButton: false
+  }
+};
+const SecondaryDefault = exports.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 = {
+  args: {
+    text: 'Button',
+    type: 'secondary',
+    size: 'small',
+    disabled: true,
+    leftIcon: 'none',
+    rightIcon: 'none',
+    isSubmitButton: false
+  }
+};
+const SmallButtonTwoIcons = exports.SmallButtonTwoIcons = {
+  args: {
+    text: 'Button',
+    type: 'primary',
+    size: 'small',
+    disabled: false,
+    leftIcon: 'Filter',
+    rightIcon: 'Exit',
+    isSubmitButton: false
+  }
+};
+const SmallButtonLeftIcon = exports.SmallButtonLeftIcon = {
+  args: {
+    text: 'Button',
+    type: 'primary',
+    size: 'small',
+    disabled: false,
+    leftIcon: 'Download',
+    rightIcon: 'none',
+    isSubmitButton: false
+  }
+};
+const SmallButtonRightIcon = exports.SmallButtonRightIcon = {
+  args: {
+    text: 'Button',
+    type: 'primary',
+    size: 'small',
+    disabled: false,
+    leftIcon: 'none',
+    rightIcon: 'Exit',
+    isSubmitButton: false
+  },
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/hhRW9o3Wqj3wF89qGJ2raZ/Sagarmatha--Design-System?node-id=299-4075&t=xKolv44KqyAdlKND-4'
+  }
+};
+const MediumButtonTwoIcons = exports.MediumButtonTwoIcons = {
+  args: {
+    text: 'Button',
+    type: 'primary',
+    size: 'medium',
+    disabled: false,
+    leftIcon: 'Filter',
+    rightIcon: 'Exit',
+    isSubmitButton: false
+  }
+};
+const MediumButtonLeftIcon = exports.MediumButtonLeftIcon = {
+  args: {
+    text: 'Button',
+    type: 'primary',
+    size: 'medium',
+    disabled: false,
+    leftIcon: 'Download',
+    rightIcon: 'none',
+    isSubmitButton: false
+  }
+};
+const MediumButtonRightIcon = exports.MediumButtonRightIcon = {
+  args: {
+    text: 'Button',
+    type: 'primary',
+    size: 'medium',
+    disabled: false,
+    leftIcon: 'none',
+    rightIcon: 'Exit',
+    isSubmitButton: false
+  }
+};
+const SubmitButton = exports.SubmitButton = {
+  args: {
+    text: 'Submit',
+    type: 'primary',
+    size: 'medium',
+    disabled: false,
+    leftIcon: 'none',
+    rightIcon: 'none',
+    isSubmitButton: true
+  }
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = exports.InputCommit = exports.IconWrapper = exports.ButtonItem = exports.ButtonContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  //position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n  width: ", ";\n  height: ", ";\n"])), props => props.width, props => props.height);
+const ButtonItem = exports.ButtonItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n  flex-wrap: nowrap;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  background-color: ", ";\n  box-sizing: border-box;\n  gap: 8px;\n  padding: ", ";\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n    cursor: ", ";\n  }\n  &.ButtonItem-clicked {\n    background-color: ", ";\n    cursor: pointer;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n    transition: background-color 0.3s, color 0.3s;\n  }\n"])), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
+const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\";\n  font-style: normal;\n  font-weight: 400;\n  pointer-events: none;\n  font-size: 14px;\n  user-select: none;\n"])));
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n"])));
+const InputCommit = exports.InputCommit = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  border: ", ";\n  border-radius: 8px;\n  font-weight: 400;\n  font-size: 14px;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  background-color: ", ";\n  cursor: pointer;\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n    cursor: ", ";\n  }\n  &.InputCommit-clicked {\n    background-color: ", ";\n    cursor: pointer;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n    transition: background-color 0.3s, color 0.3s;\n  }\n"])), props => "0px solid ".concat(props.disabled ? props.disabled_border_color : props.hover_border_color), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);

package/dist/stories/components/Button.js

@@ -1,59 +1,217 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Button = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
-var _excluded = ["text", "shape", "size", "disabled", "radius", "textColor", "backgroundColor", "onClick"];
-var Button = function Button(_ref) {
-  var text = _ref.text,
-    shape = _ref.shape,
-    size = _ref.size,
-    disabled = _ref.disabled,
-    radius = _ref.radius,
-    textColor = _ref.textColor,
-    backgroundColor = _ref.backgroundColor,
-    _onClick = _ref.onClick,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var getTextColor = function getTextColor() {
-    if (!textColor || textColor == "" || textColor == "none") {
-      //default when parameter was not set
-      if (shape === "contained") {
-        return "white";
-      } else {
-        return "black";
-      }
-    } else {
-      return textColor;
-    }
+var _react = _interopRequireWildcard(require("react"));
+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");
+const Button = props => {
+  const {
+    text,
+    type,
+    size,
+    height,
+    width,
+    disabled,
+    textColor,
+    backgroundColor,
+    borderColor,
+    hoverTextColor,
+    hoverBackgroundColor,
+    hoverBorderColor,
+    disabledTextColor,
+    disabledBackgroundColor,
+    disabledBorderColor,
+    leftIcon,
+    rightIcon,
+    onClick,
+    isSubmitButton
+  } = props;
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const [hover, setHover] = (0, _react.useState)(false);
+  const handleSubmitButtonOnClick = () => {
+    setClicked(true);
+    onClick("SubmitButtonOnClick: ".concat(text));
+    setTimeout(() => {
+      setClicked(false);
+    }, 300);
+  };
+  const handleButtonClick = event => {
+    setClicked(true);
+    onClick(event);
+    setTimeout(() => {
+      setClicked(false);
+    }, 300);
   };
-  return /*#__PURE__*/React.createElement(_Stack.default, {
-    direction: "row",
-    spacing: 2
-  }, /*#__PURE__*/React.createElement(_Button.default, {
-    sx: {
-      textTransform: "none",
-      borderRadius: radius * 0.05,
-      color: getTextColor(),
-      //  shape === "contained" ? "white" : "black",
-      backgroundColor: {
-        backgroundColor: backgroundColor
-      }
-    },
-    variant: shape,
-    size: size,
-    disabled: disabled ? true : false,
-    onClick: function onClick(event) {
-      _onClick(event);
+  const getIcon = icon => {
+    const iconHeight = '12px';
+    const iconWidth = '12px';
+    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 'filter':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "FilterIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'options':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "OptionsIcon"
+        }, /*#__PURE__*/_react.default.createElement(_OptionsIcon.OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'download':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "DownloadIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'document':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "DocumentIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'fly':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "FlyIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'bell':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "BellIcon"
+        }, /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'maintenance':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "MaintenanceIcon"
+        }, /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'exit':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "ExitIcon"
+        }, /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'eye':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "EyeIcon"
+        }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      default:
+        return '';
     }
-  }, text));
+  };
+  const getLeftIcon = () => {
+    if (!leftIcon || leftIcon === 'none') return '';
+    return getIcon(leftIcon);
+  };
+  const getRightIcon = () => {
+    if (!rightIcon || rightIcon === 'none') return '';
+    return getIcon(rightIcon);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Button.ButtonContainer, {
+    className: "ButtonContainer",
+    width: width || null,
+    height: height || (size === 'small' ? '33px' : '45px')
+  }, isSubmitButton ? /*#__PURE__*/_react.default.createElement(_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
+  }) : /*#__PURE__*/_react.default.createElement(_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(), /*#__PURE__*/_react.default.createElement(_Button.Label, {
+    className: "Label",
+    disabled: disabled
+  }, text), getRightIcon()));
 };
 exports.Button = Button;
-var _default = Button;
-exports.default = _default;
+var _default = exports.default = Button;
+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/stories/components/Button.style.js

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DropdownContainer = void 0;
+exports.Label = exports.InputCommit = exports.IconWrapper = exports.ButtonItem = exports.ButtonContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n"])), function (props) {
-  return props.width;
-});
-exports.DropdownContainer = DropdownContainer;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  //position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n  width: ", ";\n  height: ", ";\n"])), props => props.width, props => props.height);
+const ButtonItem = exports.ButtonItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n  flex-wrap: nowrap;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  background-color: ", ";\n  box-sizing: border-box;\n  gap: 8px;\n  padding: ", ";\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n    cursor: ", ";\n  }\n  &.ButtonItem-clicked {\n    background-color: ", ";\n    cursor: pointer;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n    transition: background-color 0.3s, color 0.3s;\n  }\n"])), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
+const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\";\n  font-style: normal;\n  font-weight: 400;\n  pointer-events: none;\n  font-size: 14px;\n  user-select: none;\n"])));
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n"])));
+const InputCommit = exports.InputCommit = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  border: ", ";\n  border-radius: 8px;\n  font-weight: 400;\n  font-size: 14px;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  background-color: ", ";\n  cursor: pointer;\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n    cursor: ", ";\n  }\n  &.InputCommit-clicked {\n    background-color: ", ";\n    cursor: pointer;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n    transition: background-color 0.3s, color 0.3s;\n  }\n"])), props => "0px solid ".concat(props.disabled ? props.disabled_border_color : props.hover_border_color), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);

package/dist/stories/components/CampaignDemoReport/CampaignDemoReport.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CampaignDemoReport = require("./CampaignDemoReport.style");
+var _ShoutIcon = _interopRequireDefault(require("../../icons/ShoutIcon"));
+const CampaignDemoReport = props => {
+  const {
+    topHeadline,
+    topLabels,
+    bottomHeadline,
+    bottomLabels
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.ComponentContainer, null, /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Headline, null, topHeadline), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.LabelsContainer, null, topLabels.map(label => /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Label, {
+    key: label.value,
+    className: "icon-label"
+  }, /*#__PURE__*/_react.default.createElement(_ShoutIcon.default, {
+    fill: "#1B30AA"
+  }), /*#__PURE__*/_react.default.createElement("span", null, label.value)))), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Line, null), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Headline, null, bottomHeadline), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.LabelsContainer, null, bottomLabels.map(label => /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Label, {
+    key: label.value
+  }, /*#__PURE__*/_react.default.createElement("span", null, label.value)))));
+};
+CampaignDemoReport.defaultProps = {
+  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'
+  }]
+};
+var _default = exports.default = CampaignDemoReport;