sag_components 1.0.921 → 1.0.923

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

@@ -42,7 +42,7 @@ const Button = props => {
   const [hover, setHover] = (0, _react.useState)(false);
   const handleSubmitButtonOnClick = () => {
     setClicked(true);
-    onClick("SubmitButtonOnClick: ".concat(text));
+    onClick(`SubmitButtonOnClick: ${text}`);
     setTimeout(() => {
       setClicked(false);
     }, 300);

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

@@ -5,11 +5,86 @@ 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);
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div`
+  //position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  width: ${props => props.width};
+  height: ${props => props.height};
+`;
+const ButtonItem = exports.ButtonItem = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  color: ${props => props.disabled ? props.disabled_text_color : props.text_color};
+  border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
+  border-radius: 12px;
+  background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
+  box-sizing: border-box;
+  gap: 8px;
+  padding: ${props => props.padding};
+  &:hover {
+    background-color: ${props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color};
+    border-color: ${props => props.disabled ? props.disabled_border_color : props.hover_border_color};
+    color: ${props => props.disabled ? props.disabled_text_color : props.hover_text_color};
+    box-shadow: ${props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)'};
+    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
+  }
+  &.ButtonItem-clicked {
+    background-color: ${props => props.background_color};
+    cursor: pointer;
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.3s, color 0.3s;
+  }
+`;
+const Label = exports.Label = _styledComponents.default.label`
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  pointer-events: none;
+  font-size: 14px;
+  user-select: none;
+`;
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+`;
+const InputCommit = exports.InputCommit = _styledComponents.default.input`
+  font-family: "Poppins", sans-serif;
+  border: ${props => `0px solid ${props.disabled ? props.disabled_border_color : props.hover_border_color}`};
+  border-radius: 8px;
+  font-weight: 400;
+  font-size: 14px;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  color: ${props => props.disabled ? props.disabled_text_color : props.text_color};
+  border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
+  border-radius: 12px;
+  background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
+  cursor: pointer;
+  padding: ${props => props.padding};
+
+  &:hover {
+    background-color: ${props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color};
+    border-color: ${props => props.disabled ? props.disabled_border_color : props.hover_border_color};
+    color: ${props => props.disabled ? props.disabled_text_color : props.hover_text_color};
+    box-shadow: ${props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)'};
+    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
+  }
+  &.InputCommit-clicked {
+    background-color: ${props => props.background_color};
+    cursor: pointer;
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.3s, color 0.3s;
+  }
+`;

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;

package/dist/stories/components/CampaignDemoReport/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("./CampaignDemoReport"));
+var _default = exports.default = {
+  title: 'Sag Campaign Tool/Campaign Demo Report',
+  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 Example = exports.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/components/CampaignDemoReport/CampaignDemoReport.style.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Line = exports.LabelsContainer = exports.Label = exports.Headline = exports.ComponentContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const ComponentContainer = exports.ComponentContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    padding: 20px;\n    font-family: \"Poppins\", sans-serif;\n    background-color: white;\n"])));
+const Headline = exports.Headline = _styledComponents.default.h3(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: #212121;\n    font-size: 20px;\n    font-weight: 500;\n    margin: 0 0 16px;\n"])));
+const LabelsContainer = exports.LabelsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: 16px;\n"])));
+const Label = exports.Label = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n  padding: 8px;\n  color: #212121;\n  background-color: #F2F2F2;\n   > span {\n      font-weight: 400;\n    }\n\n    &.icon-label {\n        display: flex;\n        gap: 8px;\n        color: #1B30AA;\n        border-radius: 4px;\n        background-color: #F0F5FF;\n        > span {\n            font-weight: 500;\n        }\n    }\n"])));
+const Line = exports.Line = _styledComponents.default.hr(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #D0D0D0;\n    width: 100%;\n    margin: 28px 0;\n"])));

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

@@ -5,11 +5,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Line = exports.LabelsContainer = exports.Label = exports.Headline = exports.ComponentContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const ComponentContainer = exports.ComponentContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    padding: 20px;\n    font-family: \"Poppins\", sans-serif;\n    background-color: white;\n"])));
-const Headline = exports.Headline = _styledComponents.default.h3(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: #212121;\n    font-size: 20px;\n    font-weight: 500;\n    margin: 0 0 16px;\n"])));
-const LabelsContainer = exports.LabelsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: 16px;\n"])));
-const Label = exports.Label = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n  padding: 8px;\n  color: #212121;\n  background-color: #F2F2F2;\n   > span {\n      font-weight: 400;\n    }\n\n    &.icon-label {\n        display: flex;\n        gap: 8px;\n        color: #1B30AA;\n        border-radius: 4px;\n        background-color: #F0F5FF;\n        > span {\n            font-weight: 500;\n        }\n    }\n"])));
-const Line = exports.Line = _styledComponents.default.hr(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #D0D0D0;\n    width: 100%;\n    margin: 28px 0;\n"])));
+const ComponentContainer = exports.ComponentContainer = _styledComponents.default.div`
+    padding: 20px;
+    font-family: "Poppins", sans-serif;
+    background-color: white;
+`;
+const Headline = exports.Headline = _styledComponents.default.h3`
+    color: #212121;
+    font-size: 20px;
+    font-weight: 500;
+    margin: 0 0 16px;
+`;
+const LabelsContainer = exports.LabelsContainer = _styledComponents.default.div`
+    display: flex;
+    gap: 16px;
+`;
+const Label = exports.Label = _styledComponents.default.div`
+  font-size: 12px;
+  padding: 8px;
+  color: #212121;
+  background-color: #F2F2F2;
+   > span {
+      font-weight: 400;
+    }
+
+    &.icon-label {
+        display: flex;
+        gap: 8px;
+        color: #1B30AA;
+        border-radius: 4px;
+        background-color: #F0F5FF;
+        > span {
+            font-weight: 500;
+        }
+    }
+`;
+const Line = exports.Line = _styledComponents.default.hr`
+    background-color: #D0D0D0;
+    width: 100%;
+    margin: 28px 0;
+`;

package/dist/stories/components/CampaignTool/Card.style.js

@@ -5,15 +5,63 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SegmentsContainer = exports.Segment = exports.CardTitle = exports.CardFrame = exports.CardDetails = exports.CardDetailText = exports.ButtonWrap = exports.Button = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 /* eslint-disable import/prefer-default-export */
-const CardFrame = exports.CardFrame = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: \"Poppins\", sans-serif;\n    background-color: white;\n    border: 1px solid gray;\n    border-left: 5px solid #6e9eed;\n    margin-bottom: 10px;\n    display: flex;\n    justify-content: space-between;\n    align-items: stretch;\n    width: ", ";\n    height: ", ";\n"])), props => props.width, props => props.height);
-const CardDetails = exports.CardDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 16px 20px;\n"])));
-const CardTitle = exports.CardTitle = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: 22px;\n    margin: 0;\n"])));
-const CardDetailText = exports.CardDetailText = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: block;\n    font-size: 12px;\n"])));
-const SegmentsContainer = exports.SegmentsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    display: grid;\n    flex-grow: 1;\n    gap: 20px;\n    flex-wrap: wrap;\n    padding: 16px;\n    grid-template-rows: repeat(2, 1fr);\n    grid-template-columns: repeat(3, 1fr);\n"])));
-const Segment = exports.Segment = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 0px;\n    display: flex;\n    gap: 8px;\n    font-size: 12px;\n    border: 1px solid gray;\n    padding: 8px;\n"])));
-const ButtonWrap = exports.ButtonWrap = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: center;\n    padding: 30px;\n    background-color: bisque;\n"])));
-const Button = exports.Button = _styledComponents.default.button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: 20px;\n    color: white;\n    background-color: gray;\n    border: none;\n    padding: 8px 16px;\n    cursor: pointer;\n    &:hover, &:focus {\n        background-color: rebeccapurple;\n    }\n"])));
+
+const CardFrame = exports.CardFrame = _styledComponents.default.div`
+    font-family: "Poppins", sans-serif;
+    background-color: white;
+    border: 1px solid gray;
+    border-left: 5px solid #6e9eed;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    width: ${props => props.width};
+    height: ${props => props.height};
+`;
+const CardDetails = exports.CardDetails = _styledComponents.default.div`
+    padding: 16px 20px;
+`;
+const CardTitle = exports.CardTitle = _styledComponents.default.h3`
+    font-size: 22px;
+    margin: 0;
+`;
+const CardDetailText = exports.CardDetailText = _styledComponents.default.span`
+    display: block;
+    font-size: 12px;
+`;
+const SegmentsContainer = exports.SegmentsContainer = _styledComponents.default.div`
+    display: grid;
+    flex-grow: 1;
+    gap: 20px;
+    flex-wrap: wrap;
+    padding: 16px;
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+`;
+const Segment = exports.Segment = _styledComponents.default.div`
+    flex: 1 1 0px;
+    display: flex;
+    gap: 8px;
+    font-size: 12px;
+    border: 1px solid gray;
+    padding: 8px;
+`;
+const ButtonWrap = exports.ButtonWrap = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    padding: 30px;
+    background-color: bisque;
+`;
+const Button = exports.Button = _styledComponents.default.button`
+    font-size: 20px;
+    color: white;
+    background-color: gray;
+    border: none;
+    padding: 8px 16px;
+    cursor: pointer;
+    &:hover, &:focus {
+        background-color: rebeccapurple;
+    }
+`;