sag_components 1.0.85 → 1.0.86-7.2

package/dist/stories/components/ProductsVariety/ProductsVariety.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MenuItemOpenIcon = require("../../icons/MenuItemOpenIcon");
+var _MenuItemUpIcon = require("../../icons/MenuItemUpIcon");
+var _SpotlightProductIcon = require("../../icons/SpotlightProductIcon");
+var _BannersDropdown = require("../BannersDropdown/BannersDropdown");
+var _ProductsVariety = require("./ProductsVariety.style");
+const ProductsVariety = props => {
+  const {
+    title,
+    subTitle,
+    productsData,
+    showBannersDropdown,
+    onSpotlightProductClick,
+    onClickBannersDropdown
+  } = props;
+  const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
+  const displayBannersDropdown = () => /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
+    banners: [{
+      checked: true,
+      name: 'StopAndShop'
+    }, {
+      checked: true,
+      name: 'FoodLion'
+    }, {
+      checked: true,
+      name: 'GiantFood'
+    }, {
+      checked: true,
+      name: 'TheGiantCompany'
+    }, {
+      checked: true,
+      name: 'Hannaford'
+    }],
+    onClick: banners => {
+      onClickBannersDropdown({
+        banners
+      });
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyMainContainer, {
+    id: "ProductsVarietyMainContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyContainer, {
+    id: "ProductsVarietyContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyTitleContainer, {
+    id: "ProductsVarietyTitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyTitle, {
+    id: "ProductsVarietyTitle"
+  }, title), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietySubTitle, {
+    id: "ProductsVarietySubTitle"
+  }, "|"), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietySubTitle, {
+    id: "ProductsVarietySubTitle"
+  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), showBannersDropdown && displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
+    id: "ProductButtonContainer",
+    onClick: () => {
+      setIsProductsListOpen(!IsProductsListOpen);
+    }
+  }, IsProductsListOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
+    color: "#212121"
+  }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
+    color: "#212121"
+  }))), IsProductsListOpen && /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyContentContainer, {
+    id: "ProductsVarietyContentContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsTitle, {
+    id: "ProductsTitle"
+  }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductContainer, {
+    id: "ProductContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.Product, {
+    id: "Product"
+  }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
+    id: "ProductButtonContainer",
+    background: "#F8CD00",
+    onClick: () => {
+      onSpotlightProductClick({
+        value: item.value,
+        label: item.label
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
+};
+var _default = exports.default = ProductsVariety;
+ProductsVariety.defaultProps = {
+  title: 'Products Variety',
+  subTitle: 'Product Name',
+  showBannersDropdown: true,
+  onSpotlightProductClick: () => {},
+  onClickBannersDropdown: () => {}
+};

package/dist/stories/components/ProductsVariety/ProductsVariety.stories.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ThreeProducts = exports.FiveProducts = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ProductsVariety = _interopRequireDefault(require("./ProductsVariety"));
+const productsData1 = [{
+  value: '1',
+  label: 'Sweet Potat Smoky BBQ Crisps',
+  ShowSpotlightProductButton: true
+}, {
+  value: '2',
+  label: 'Sweet Potato Sea Salt Crisps',
+  ShowSpotlightProductButton: false
+}, {
+  value: '3',
+  label: 'Homestyle Ranch',
+  ShowSpotlightProductButton: true
+}];
+const productsData2 = [{
+  value: '1',
+  label: 'Sweet Potat Smoky BBQ Crisps',
+  ShowSpotlightProductButton: true
+}, {
+  value: '2',
+  label: 'Sweet Potato Sea Salt Crisps',
+  ShowSpotlightProductButton: false
+}, {
+  value: '3',
+  label: 'Homestyle Ranch',
+  ShowSpotlightProductButton: true
+}, {
+  value: '4',
+  label: 'Sweet BBQ Potato Sea Potat Smoky BBQ Crisps',
+  ShowSpotlightProductButton: true
+}, {
+  value: '5',
+  label: ' BBQ Crisps Potato Sea Salt Crisps',
+  ShowSpotlightProductButton: false
+}];
+var _default = exports.default = {
+  title: 'SAG BI/ProductsVariety',
+  component: _ProductsVariety.default,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      name: 'title',
+      control: {
+        type: 'text'
+      },
+      description: 'title text ',
+      defaultValue: ''
+    },
+    subTitle: {
+      name: 'subTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'subTitle text ',
+      defaultValue: ''
+    },
+    productsData: {
+      description: 'array [] of objects: {value: string, label: string } to fill the product items. '
+    },
+    onSpotlightProductClick: {
+      action: 'onSpotlightProductClick',
+      description: 'returns an event onSpotlightProductClick object when user clicks on a button'
+    },
+    onClickBannersDropdown: {
+      action: 'onClickBannersDropdown',
+      description: 'returns an event onClickBannersDropdown object when user clicks on a button'
+    }
+  }
+};
+const ThreeProducts = exports.ThreeProducts = {
+  args: {
+    title: 'Products Variety',
+    subTitle: 'Product Name',
+    productsData: productsData1
+  }
+};
+const FiveProducts = exports.FiveProducts = {
+  args: {
+    title: 'Products Variety',
+    subTitle: 'Product Name',
+    productsData: productsData2
+  }
+};

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductsVarietyTitleContainer = exports.ProductsVarietyTitle = exports.ProductsVarietySubTitle = exports.ProductsVarietyMainContainer = exports.ProductsVarietyContentContainer = exports.ProductsVarietyContainer = exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = 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, _templateObject9, _templateObject10;
+const ProductsVarietyMainContainer = exports.ProductsVarietyMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  position: relative;\n  margin: 0;\n  padding: 10px;\n  background: #ffffff;\n  border-radius: 12px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n"])));
+const ProductsVarietyContainer = exports.ProductsVarietyContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0 10px;\n"])));
+const ProductsVarietyTitleContainer = exports.ProductsVarietyTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 10px;\n  gap: 15px;\n"])));
+const ProductsVarietyTitle = exports.ProductsVarietyTitle = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 20px;\n  margin: 0;\n"])));
+const ProductsVarietySubTitle = exports.ProductsVarietySubTitle = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #757171;\n  font-weight: 500;\n  font-size: 20px;\n  margin: 0;\n"])));
+const ProductsVarietyContentContainer = exports.ProductsVarietyContentContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 10px;\n  padding: 10px 20px 20px 50px;\n  font-size: 20px;\n  line-height: 25px;\n"])));
+const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 10px 0;\n"])));
+const ProductContainer = exports.ProductContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-bottom: 1px solid #00000010;\n  width: 100%;\n  gap: 20px;\n"])));
+const Product = exports.Product = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  border-radius: 12px;\n"])));
+const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: space-between;\n  height: 25px;\n  padding: 0 15px;\n  user-select: none;\n  border-radius: 12px;\n  background: ", ";\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n"])), props => props.background || '#ffffff');

package/dist/stories/components/ProductsVariety.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
+var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
+var _SpotlightProductIcon = require("./icons/SpotlightProductIcon");
+var _BannersDropdown = require("./BannersDropdown");
+var _ProductsVariety = require("./ProductsVariety.style");
+const ProductsVariety = props => {
+  const {
+    title,
+    subTitle,
+    productsData,
+    showBannersDropdown,
+    onSpotlightProductClick,
+    onClickBannersDropdown
+  } = props;
+  const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
+  const displayBannersDropdown = () => /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
+    banners: [{
+      checked: true,
+      name: 'StopAndShop'
+    }, {
+      checked: true,
+      name: 'FoodLion'
+    }, {
+      checked: true,
+      name: 'GiantFood'
+    }, {
+      checked: true,
+      name: 'TheGiantCompany'
+    }, {
+      checked: true,
+      name: 'Hannaford'
+    }],
+    onClick: banners => {
+      onClickBannersDropdown({
+        banners
+      });
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyMainContainer, {
+    id: "ProductsVarietyMainContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyContainer, {
+    id: "ProductsVarietyContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyTitleContainer, {
+    id: "ProductsVarietyTitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyTitle, {
+    id: "ProductsVarietyTitle"
+  }, title), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietySubTitle, {
+    id: "ProductsVarietySubTitle"
+  }, "|"), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietySubTitle, {
+    id: "ProductsVarietySubTitle"
+  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), showBannersDropdown && displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
+    id: "ProductButtonContainer",
+    onClick: () => {
+      setIsProductsListOpen(!IsProductsListOpen);
+    }
+  }, IsProductsListOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
+    color: "#212121"
+  }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
+    color: "#212121"
+  }))), IsProductsListOpen && /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyContentContainer, {
+    id: "ProductsVarietyContentContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsTitle, {
+    id: "ProductsTitle"
+  }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductContainer, {
+    id: "ProductContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.Product, {
+    id: "Product"
+  }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
+    id: "ProductButtonContainer",
+    background: "#F8CD00",
+    onClick: () => {
+      onSpotlightProductClick({
+        value: item.value,
+        label: item.label
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
+};
+var _default = exports.default = ProductsVariety;
+ProductsVariety.defaultProps = {
+  title: 'Products Variety',
+  subTitle: 'Product Name',
+  showBannersDropdown: true,
+  onSpotlightProductClick: () => {},
+  onClickBannersDropdown: () => {}
+};

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductsVarietyTitleContainer = exports.ProductsVarietyTitle = exports.ProductsVarietySubTitle = exports.ProductsVarietyMainContainer = exports.ProductsVarietyContentContainer = exports.ProductsVarietyContainer = exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = 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, _templateObject9, _templateObject10;
+const ProductsVarietyMainContainer = exports.ProductsVarietyMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  position: relative;\n  margin: 0;\n  padding: 10px;\n  background: #ffffff;\n  border-radius: 12px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n"])));
+const ProductsVarietyContainer = exports.ProductsVarietyContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0 10px;\n"])));
+const ProductsVarietyTitleContainer = exports.ProductsVarietyTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 10px;\n  gap: 15px;\n"])));
+const ProductsVarietyTitle = exports.ProductsVarietyTitle = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 20px;\n  margin: 0;\n"])));
+const ProductsVarietySubTitle = exports.ProductsVarietySubTitle = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #757171;\n  font-weight: 500;\n  font-size: 20px;\n  margin: 0;\n"])));
+const ProductsVarietyContentContainer = exports.ProductsVarietyContentContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 10px;\n  padding: 10px 20px 20px 50px;\n  font-size: 20px;\n  line-height: 25px;\n"])));
+const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 10px 0;\n"])));
+const ProductContainer = exports.ProductContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-bottom: 1px solid #00000010;\n  width: 100%;\n  gap: 20px;\n"])));
+const Product = exports.Product = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  border-radius: 12px;\n"])));
+const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: space-between;\n  height: 25px;\n  padding: 0 15px;\n  user-select: none;\n  border-radius: 12px;\n  background: ", ";\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n"])), props => props.background || '#ffffff');

package/dist/stories/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ProgressBar = require("./ProgressBar.style");
+const ProgressBar = props => {
+  const {
+    progressPercent,
+    refreshInterval,
+    height,
+    width,
+    color
+  } = props;
+  const [progress, setProgress] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    const timer = setInterval(() => {
+      setProgress(currentProgress => {
+        const newProgress = currentProgress + 1;
+        if (newProgress > 100) {
+          clearInterval(timer);
+          return 100;
+        }
+        return newProgress;
+      });
+    }, refreshInterval);
+    return () => clearInterval(timer);
+  }, [progressPercent, refreshInterval]);
+  (0, _react.useEffect)(() => {
+    setProgress(progressPercent);
+  }, [progressPercent]);
+  return /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBarContainer, {
+    className: "ProgressBarContainer",
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBarFiller, {
+    className: "ProgressBarFiller",
+    color: color,
+    progress: progress
+  }));
+};
+var _default = exports.default = ProgressBar;
+ProgressBar.defaultProps = {
+  progressPercent: 0,
+  refreshInterval: 100,
+  width: '100%',
+  height: '9px',
+  color: '#066768'
+};

package/dist/stories/components/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WideBlue = exports.SmallGreen = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
+var _default = exports.default = {
+  title: 'SAG Core/ProgressBar',
+  component: _ProgressBar.default,
+  tags: ['autodocs'],
+  argTypes: {
+    progressPercent: {
+      name: 'progressPercent',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100
+      },
+      description: 'progressPercent - set this value to increase or decrease progress current value - in percent 0% - 100%. Allows control of the progressBar'
+    },
+    refreshInterval: {
+      name: 'refreshInterval',
+      control: {
+        type: 'number'
+      },
+      description: 'refreshInterval - in miliseconds - speed of progress bar'
+    },
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the progress bar'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the progress bar'
+    },
+    color: {
+      name: 'color',
+      description: 'Sets the color of bar',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    }
+  }
+};
+const SmallGreen = exports.SmallGreen = {
+  args: {
+    progressPercent: 0,
+    refreshInterval: 100,
+    width: '200px',
+    height: '9px',
+    color: '#92CF17'
+  }
+};
+const WideBlue = exports.WideBlue = {
+  args: {
+    progressPercent: 0,
+    refreshInterval: 100,
+    width: '800px',
+    height: '9px',
+    color: '#1B30AA'
+  }
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBarFiller = exports.ProgressBarContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+// Styled-components for the progress container and the filler
+const ProgressBarContainer = exports.ProgressBarContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["  \n  width: ", ";\n  background-color: #F2F2F2;\n  border-radius: 12px;\n  height:  ", ";\n  margin: 5px 0;  \n"])), props => props.width, props => props.height);
+const ProgressBarFiller = exports.ProgressBarFiller = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 100%;\n  text-align: center;\n  border-radius: 12px;\n  transition: width 0.5s ease-in-out;\n  width: ", "%;\n"])), props => props.color, props => props.progress);

package/dist/stories/components/ProgressBar.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ProgressBar = require("./ProgressBar.style");
+const ProgressBar = props => {
+  const {
+    progressPercent,
+    refreshInterval,
+    height,
+    width,
+    color
+  } = props;
+  const [progress, setProgress] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    const timer = setInterval(() => {
+      setProgress(currentProgress => {
+        const newProgress = currentProgress + 1;
+        if (newProgress > 100) {
+          clearInterval(timer);
+          return 100;
+        }
+        return newProgress;
+      });
+    }, refreshInterval);
+    return () => clearInterval(timer);
+  }, [progressPercent, refreshInterval]);
+  (0, _react.useEffect)(() => {
+    setProgress(progressPercent);
+  }, [progressPercent]);
+  return /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBarContainer, {
+    className: "ProgressBarContainer",
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBarFiller, {
+    className: "ProgressBarFiller",
+    color: color,
+    progress: progress
+  }));
+};
+var _default = exports.default = ProgressBar;
+ProgressBar.defaultProps = {
+  progressPercent: 0,
+  refreshInterval: 100,
+  width: '100%',
+  height: '9px',
+  color: '#066768'
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBarFiller = exports.ProgressBarContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+// Styled-components for the progress container and the filler
+const ProgressBarContainer = exports.ProgressBarContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["  \n  width: ", ";\n  background-color: #F2F2F2;\n  border-radius: 12px;\n  height:  ", ";\n  margin: 5px 0;  \n"])), props => props.width, props => props.height);
+const ProgressBarFiller = exports.ProgressBarFiller = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 100%;\n  text-align: center;\n  border-radius: 12px;\n  transition: width 0.5s ease-in-out;\n  width: ", "%;\n"])), props => props.color, props => props.progress);