contentoh-components-library 0.1.1

package/dist/components/atoms/DropDownButton/DropDownButton.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DropDownButtonGeneral = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/DropDownButton",
+  component: _index.DropDownButton,
+  argTypes: {
+    active: {
+      options: [true, false],
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.DropDownButton, args);
+};
+
+var DropDownButtonGeneral = Template.bind({});
+exports.DropDownButtonGeneral = DropDownButtonGeneral;
+DropDownButtonGeneral.args = {
+  active: false
+};

package/dist/components/atoms/DropDownButton/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropDownButton = void 0;
+
+var _styles = require("./styles");
+
+var _dropDownArrowButton = _interopRequireDefault(require("../../../assets/images/dropDownButton/dropDownArrowButton.svg"));
+
+var DropDownButton = function DropDownButton(_ref) {
+  var active = _ref.active;
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: active && "active"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _dropDownArrowButton.default,
+    alt: "V"
+  }));
+};
+
+exports.DropDownButton = DropDownButton;

package/dist/components/atoms/DropDownButton/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 22px;\n  width: 10px;\n  border-left: 1px solid #342b3f;\n  padding-left: 3px;\n\n  img {\n    width: 7px;\n    vertical-align: middle;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/atoms/FeatureTag/FeatureTag.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FeatureTagDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/FeatureTag",
+  label: "Feature Tag",
+  component: _index.FeatureTag
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.FeatureTag, args);
+};
+
+var FeatureTagDefault = Template.bind({});
+exports.FeatureTagDefault = FeatureTagDefault;
+FeatureTagDefault.args = {
+  feature: "Feature",
+  value: "Value"
+};

package/dist/components/atoms/FeatureTag/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FeatureTag = void 0;
+
+var _styles = require("./styles");
+
+var FeatureTag = function FeatureTag(_ref) {
+  var feature = _ref.feature,
+      value = _ref.value;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("p", {
+    className: "feature-name"
+  }, feature), /*#__PURE__*/React.createElement("p", {
+    className: "feature-value"
+  }, value));
+};
+
+exports.FeatureTag = FeatureTag;

package/dist/components/atoms/FeatureTag/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+require("../../../global-files/global-styles.css");
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #f0eef2;\n  border-radius: 3px;\n  display: flex;\n  width: fit-content;\n  height: 26px;\n  padding: 5px;\n  align-items: center;\n\n  .feature-name {\n    font-size: 14px;\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 18px;\n    color: ", ";\n\n    & + * {\n      margin-left: 5px;\n    }\n  }\n  .feature-value {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 16px;\n    height: 12px;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.original_magenta, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/atoms/GeneralButton/GeneralButton.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GeneralButton = void 0;
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _default = {
+  title: "Components/atoms/Button",
+  label: "Button Default",
+  component: _index.Button,
+  argTypes: {
+    buttonType: {
+      options: ["general-default-button", "general-green-button", "general-white-button", "general-purple-button", "general-transparent-button", "open-modal-button", "close-button", "circular-button accept-button", "circular-button reject-button", "circular-button null-button", "grid-layout", "row-layout"],
+      control: {
+        type: "select"
+      }
+    },
+    buttonFont: {
+      options: Object.values(_variables.FontFamily),
+      control: {
+        type: "select"
+      }
+    },
+    image: {
+      control: {
+        type: "file"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.Button, args);
+};
+
+var GeneralButton = Template.bind({});
+exports.GeneralButton = GeneralButton;
+GeneralButton.args = {
+  buttonType: "default-button",
+  label: "Button",
+  image: undefined,
+  altText: undefined
+}; // export const PurpleButton = Template.bind({});
+// PurpleButton.args = {
+//   title: "Purple Button",
+//   buttonType: "purple-button",
+//   label: "Purple Button",
+//   image: undefined,
+//   altText: undefined,
+// };
+// export const TransparentButton = Template.bind({});
+// TransparentButton.args = {
+//   title: "Transparent Button",
+//   buttonType: "transparent-button",
+//   label: "Transparent Button",
+//   image: undefined,
+//   altText: undefined,
+// };
+// export const GreenButton = Template.bind({});
+// GreenButton.args = {
+//   title: "Green Button",
+//   buttonType: "green-button",
+//   label: "Green Button",
+//   image: undefined,
+//   altText: undefined,
+// };

package/dist/components/atoms/GeneralButton/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+
+var _styles = require("./styles");
+
+var Button = function Button(_ref) {
+  var buttonType = _ref.buttonType,
+      label = _ref.label,
+      image = _ref.image,
+      altText = _ref.altText,
+      buttonFont = _ref.buttonFont,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: buttonType,
+    buttonFont: buttonFont,
+    onClick: onClick
+  }, buttonType.includes("general") && label, image && /*#__PURE__*/React.createElement("img", {
+    src: image,
+    alt: altText
+  }));
+};
+
+exports.Button = Button;
+Button.defaultProps = {
+  buttonType: "purple-button",
+  buttonFont: "Avenir Next"
+};

package/dist/components/atoms/GeneralButton/styles.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+require("../../../global-files/global-styles.css");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _acceptIcon = _interopRequireDefault(require("../../../assets/images/generalButton/acceptIcon.svg"));
+
+var _rejectIcon = _interopRequireDefault(require("../../../assets/images/generalButton/rejectIcon.svg"));
+
+var _nullIcon = _interopRequireDefault(require("../../../assets/images/generalButton/nullIcon.svg"));
+
+var _openModal = _interopRequireDefault(require("../../../assets/images/generalButton/openModal.svg"));
+
+var _closeIcon = _interopRequireDefault(require("../../../assets/images/generalButton/closeIcon.svg"));
+
+var _rowLayout = _interopRequireDefault(require("../../../assets/images/generalButton/rowLayout.svg"));
+
+var _gridLayout = _interopRequireDefault(require("../../../assets/images/generalButton/gridLayout.svg"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", "\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.accept-button {\n    background-image: url(", ");\n  }\n\n  &.reject-button {\n    background-image: url(", ");\n  }\n\n  &.null-button {\n    background-image: url(", ");\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n"])), function (props) {
+  return props.buttonFont;
+}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _closeIcon.default, _openModal.default, _rowLayout.default, _gridLayout.default);
+
+exports.Container = Container;

package/dist/components/atoms/GeneralInput/GeneralInput.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextArea = exports.Input = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/GeneralInput",
+  component: _index.GeneralInput,
+  argTypes: {
+    inputType: {
+      options: ["text", "textarea"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.GeneralInput, args);
+};
+
+var Input = Template.bind({});
+exports.Input = Input;
+Input.args = {
+  inputId: "default-input",
+  inputType: "text",
+  inputPlaceholder: "placeholder text"
+};
+var TextArea = Template.bind({});
+exports.TextArea = TextArea;
+TextArea.args = {
+  inputType: "textarea",
+  inputId: "default-input",
+  inputCols: "50",
+  inputRows: "5",
+  inputName: "text-area-name",
+  inputPlaceholder: "textarea placeholder"
+};

package/dist/components/atoms/GeneralInput/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GeneralInput = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _styles = require("./styles");
+
+var GeneralInput = function GeneralInput(_ref) {
+  var inputType = _ref.inputType,
+      inputId = _ref.inputId,
+      inputCols = _ref.inputCols,
+      inputRows = _ref.inputRows,
+      inputName = _ref.inputName,
+      inputValue = _ref.inputValue,
+      inputPlaceholder = _ref.inputPlaceholder;
+
+  var _useState = (0, _react.useState)({
+    value: inputValue
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      textValue = _useState2[0],
+      setTextValue = _useState2[1];
+
+  var onHandleChange = function onHandleChange(e) {
+    setTextValue(function (_ref2) {
+      var value = _ref2.value;
+      return value = e.target.value;
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(_styles.Container, null, inputType === "text" ? /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    id: inputId,
+    className: "general-input",
+    placeholder: inputPlaceholder,
+    value: textValue.value,
+    onChange: onHandleChange
+  }) : /*#__PURE__*/React.createElement("textarea", {
+    name: inputName,
+    id: inputId,
+    cols: inputCols,
+    rows: inputRows,
+    placeholder: inputPlaceholder,
+    value: textValue.value,
+    onChange: onHandleChange
+  }));
+};
+
+exports.GeneralInput = GeneralInput;

package/dist/components/atoms/GeneralInput/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n\n  input,\n  textarea {\n    width: 100%;\n    border: 1px solid ", ";\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 2px;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
+
+exports.Container = Container;

package/dist/components/atoms/GeneralTextBox/GeneralTextBox.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GeneralTextBoxDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/GeneralTextBox",
+  component: _index.GeneralTextBox
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.GeneralTextBox, args);
+};
+
+var GeneralTextBoxDefault = Template.bind({});
+exports.GeneralTextBoxDefault = GeneralTextBoxDefault;
+GeneralTextBoxDefault.args = {
+  name: "Proveedores",
+  number: "1500"
+};

package/dist/components/atoms/GeneralTextBox/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GeneralTextBox = void 0;
+
+var _styles = require("./styles");
+
+var GeneralTextBox = function GeneralTextBox(_ref) {
+  var number = _ref.number,
+      name = _ref.name,
+      onClick = _ref.onClick,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: className,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "number-text"
+  }, number), /*#__PURE__*/React.createElement("p", {
+    className: "name-text"
+  }, name));
+};
+
+exports.GeneralTextBox = GeneralTextBox;

package/dist/components/atoms/GeneralTextBox/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-wrap: wrap;\n    border: 1px solid ", ";\n    border-radius: 10px;\n    flex-direction: column;\n    align-items: center;\n    padding: 20px;\n    background-color: transparent;\n    .number-text{\n        color: ", "; \n        font-family: ", ";\n        font-style: normal;\n        font-weight: normal;\n        font-size: 36px;\n        line-height: 42px;\n        font-feature-settings: 'pnum' on, 'lnum' on;\n    }\n    .name-text{\n        color: ", ";\n        font-family: ", ";\n        font-style: normal;\n        font-weight: 500;\n        font-size: 18px;\n        line-height: 21px;\n    }\n    &:hover{ \n        border: 2px solid ", ";\n    }\n    &.active{\n        border: 1px solid ", ";\n    }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.original_purpura, _variables.FontFamily.Raleway, _variables.GlobalColors.s4, _variables.FontFamily.Raleway, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2);
+
+exports.Container = Container;

package/dist/components/atoms/GradientPanel/GradientPanel.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GradientPanelDefault = void 0;
+
+var _index = require("./index");
+
+var _index2 = require("../../atoms/ScreenHeader/index");
+
+var _index3 = require("../../atoms/CustomerTypeImage/index");
+
+var _index4 = require("../../atoms/GeneralButton/index");
+
+var _variables = require("../../../global-files/variables");
+
+var _default = {
+  title: "Components/atoms/GradientPanel",
+  component: _index.GradientPanel
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.GradientPanel, args);
+};
+
+var GradientPanelDefault = Template.bind({});
+exports.GradientPanelDefault = GradientPanelDefault;
+GradientPanelDefault.args = {
+  componentsArray: [/*#__PURE__*/React.createElement(_index2.ScreenHeader, {
+    fontFamily: _variables.FontFamily.Raleway_600,
+    color: _variables.GlobalColors.white,
+    text: "Cadena"
+  }), /*#__PURE__*/React.createElement(_index3.CustomerTypeImages, null), /*#__PURE__*/React.createElement("p", null, "Elige esta opci\xF3n si eres una Cadena Retailer."), /*#__PURE__*/React.createElement(_index4.Button, {
+    buttonType: "general-white-button",
+    label: "Seleccionar"
+  })],
+  panelType: "home-panel"
+};

package/dist/components/atoms/GradientPanel/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GradientPanel = void 0;
+
+var _styles = require("./styles");
+
+var GradientPanel = function GradientPanel(_ref) {
+  var panelColor = _ref.panelColor,
+      _ref$componentsArray = _ref.componentsArray,
+      componentsArray = _ref$componentsArray === void 0 ? [] : _ref$componentsArray,
+      panelType = _ref.panelType;
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    panelColor: panelColor,
+    className: panelType
+  }, componentsArray.map(function (component) {
+    return component;
+  }));
+};
+
+exports.GradientPanel = GradientPanel;

package/dist/components/atoms/GradientPanel/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  height: 100%;\n\n  \n  &.home-panel {\n    \n    text-align: center;\n    padding: 80px;\n    h2 {\n      & + * {\n        margin-top: 5px;\n      }\n    }\n    p{\n      font-family:", ";\n      color: ", ";\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n"])), function (_ref) {
+  var panelColor = _ref.panelColor;
+  return panelColor ? panelColor : "linear-gradient(180deg, #E33AA9 0%, #3B1366 100%)";
+}, _variables.FontFamily.AvenirNext, function (_ref2) {
+  var panelColor = _ref2.panelColor;
+  return panelColor ? _variables.GlobalColors.s4 : "#FBFBFB";
+});
+
+exports.Container = Container;

package/dist/components/atoms/PriorityFlag/PriorityFlag.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PriorityFlagDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/PriorityFlag",
+  component: _index.PriorityFlag,
+  argTypes: {
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.PriorityFlag, args);
+};
+
+var PriorityFlagDefault = Template.bind({});
+exports.PriorityFlagDefault = PriorityFlagDefault;
+PriorityFlagDefault.args = {
+  priority: "no priority"
+};

package/dist/components/atoms/PriorityFlag/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PriorityFlag = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _styles = require("./styles");
+
+var _noPriority = _interopRequireDefault(require("../../../assets/images/flags/noPriority.svg"));
+
+var _highPriority = _interopRequireDefault(require("../../../assets/images/flags/highPriority.svg"));
+
+var _mediumPriority = _interopRequireDefault(require("../../../assets/images/flags/mediumPriority.svg"));
+
+var _lowPriority = _interopRequireDefault(require("../../../assets/images/flags/lowPriority.svg"));
+
+var PriorityFlag = function PriorityFlag(_ref) {
+  var _PriorityFlags;
+
+  var priority = _ref.priority;
+  var PriorityFlags = (_PriorityFlags = {}, (0, _defineProperty2.default)(_PriorityFlags, "no priority", _noPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "low", _lowPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "medium", _mediumPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "high", _highPriority.default), _PriorityFlags);
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("img", {
+    src: PriorityFlags[priority],
+    alt: priority
+  }));
+};
+
+exports.PriorityFlag = PriorityFlag;