@stokr/components-library 2.3.65-beta.2 → 2.3.65-beta.4

package/dist/components/StatusTag/StatusTag.stories.js

@@ -0,0 +1,262 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithTooltips = exports.WithHoverColor = exports.UsingChildren = exports.TableUniformity = exports.Default = exports.CustomIcon = exports.Clickable = exports.AllVariants = exports.AllStatesInRow = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StatusTag = _interopRequireDefault(require("./StatusTag"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _Icon = require("../Icon/Icon.style");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Components Library/StatusTag',
+  component: _StatusTag.default,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select'
+      },
+      options: ['pending', 'initiated', 'confirmed', 'declined', 'paid', null],
+      description: 'Built-in variant (uses default icon and colors)'
+    },
+    text: {
+      control: 'text',
+      description: 'Text to display next to the icon'
+    },
+    icon: {
+      control: false,
+      description: 'Custom icon component (overrides variant icon)'
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Tooltip text (uses InfoIcon)'
+    },
+    iconColor: {
+      control: 'color',
+      description: 'Default icon color (defaults to grey)'
+    },
+    hoverColor: {
+      control: 'color',
+      description: 'Icon color on hover'
+    },
+    disableHoverColor: {
+      control: 'boolean',
+      description: 'Disable hover color change (for pre-colored icons)',
+      defaultValue: false
+    },
+    minWidth: {
+      control: 'text',
+      description: 'Minimum width (for table uniformity)'
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Click handler'
+    }
+  }
+}; // Default example
+const Default = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending"
+}));
+
+// All variants
+exports.Default = Default;
+const AllVariants = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "initiated",
+  text: "Initiated"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "confirmed",
+  text: "Confirmed"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "declined",
+  text: "Declined"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid",
+  text: "Paid"
+})));
+
+// Using children instead of text prop
+exports.AllVariants = AllVariants;
+const UsingChildren = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending"
+}, "Pending"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "initiated"
+}, "Initiated"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid"
+}, "Paid")));
+
+// With hover color change
+exports.UsingChildren = UsingChildren;
+const WithHoverColor = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+  style: {
+    marginBottom: '8px',
+    fontSize: '14px'
+  }
+}, "Pending (hover to see color change)"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending"
+})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+  style: {
+    marginBottom: '8px',
+    fontSize: '14px'
+  }
+}, "Custom hover color"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Custom Hover",
+  hoverColor: _colors.default.blue
+}))));
+
+// Custom icon
+exports.WithHoverColor = WithHoverColor;
+const CustomIcon = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: _Icon.iconsMap.check,
+    size: 12
+  }),
+  text: "Custom Icon",
+  hoverColor: _colors.default.freshGreen
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: _Icon.iconsMap.warning,
+    size: 12
+  }),
+  text: "Warning",
+  hoverColor: _colors.default.warningOrange
+})));
+
+// With tooltips
+exports.CustomIcon = CustomIcon;
+const WithTooltips = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending",
+  tooltip: "This transaction is awaiting confirmation"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "initiated",
+  text: "Initiated",
+  tooltip: "Transaction has been initiated and is in progress"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid",
+  text: "Paid",
+  tooltip: "Payment has been successfully completed"
+})));
+
+// Table uniformity
+exports.WithTooltips = WithTooltips;
+const TableUniformity = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px'
+  }
+}, /*#__PURE__*/_react.default.createElement("h4", {
+  style: {
+    marginBottom: '8px',
+    fontSize: '14px'
+  }
+}, "All tags with same minWidth (for table columns)"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending",
+  minWidth: "120px",
+  center: true
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "initiated",
+  text: "Initiated",
+  minWidth: "120px",
+  center: true
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "confirmed",
+  text: "Confirmed",
+  minWidth: "120px",
+  center: true
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "declined",
+  text: "Declined",
+  minWidth: "120px",
+  center: true
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid",
+  text: "Paid",
+  minWidth: "120px",
+  center: true
+})));
+
+// Clickable
+exports.TableUniformity = TableUniformity;
+const Clickable = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Clickable Pending",
+  onClick: () => alert('Clicked!')
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid",
+  text: "Clickable Paid",
+  onClick: () => alert('Paid clicked!')
+})));
+
+// All states in a row
+exports.Clickable = Clickable;
+const AllStatesInRow = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '12px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "initiated",
+  text: "Initiated"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "confirmed",
+  text: "Confirmed"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "declined",
+  text: "Declined"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid",
+  text: "Paid"
+})));
+exports.AllStatesInRow = AllStatesInRow;

package/dist/components/StatusTag/StatusTag.styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusText = exports.StatusTagWrapper = exports.StatusTagContainer = exports.PaidIconWrapper = exports.IconWrapper = exports.DeclinedIconWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StatusTagContainer = exports.StatusTagContainer = _styledComponents.default.div.withConfig({
+  displayName: "StatusTagstyles__StatusTagContainer",
+  componentId: "sc-24azs1-0"
+})(["display:inline-flex;cursor:", ";transition:opacity 0.2s ease;&:hover{opacity:", ";}"], props => props.hasClick ? 'pointer' : 'default', props => props.hasClick ? 0.8 : 1);
+const StatusTagWrapper = exports.StatusTagWrapper = _styledComponents.default.div.withConfig({
+  displayName: "StatusTagstyles__StatusTagWrapper",
+  componentId: "sc-24azs1-1"
+})(["display:flex;align-items:center;gap:6px;padding:6px 10px;background-color:transparent;border:1px solid ", ";border-radius:4px;white-space:nowrap;min-width:", ";justify-content:", ";"], _colors.default.lightGrey, props => props.minWidth || 'auto', props => props.center ? 'center' : 'flex-start');
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "StatusTagstyles__IconWrapper",
+  componentId: "sc-24azs1-2"
+})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;color:", ";transition:color 0.2s ease;svg{width:100%;height:100%;display:block;}", " ", ""], props => props.iconColor || _colors.default.grey2, props => !props.isCustomIcon && "\n    svg path,\n    svg circle,\n    svg rect,\n    svg line {\n      ".concat(!props.disableHoverColor ? "fill: currentColor;" : '', "\n    }\n  "), props => !props.disableHoverColor && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      color: ").concat(props.hoverColor, ";\n    }\n  "));
+const StatusText = exports.StatusText = _styledComponents.default.span.withConfig({
+  displayName: "StatusTagstyles__StatusText",
+  componentId: "sc-24azs1-3"
+})(["font-size:12px;font-weight:600;line-height:18px;color:", ";letter-spacing:0.6px;"], _colors.default.black);
+
+// Paid icon wrapper (check + green circle)
+const PaidIconWrapper = exports.PaidIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "StatusTagstyles__PaidIconWrapper",
+  componentId: "sc-24azs1-4"
+})(["width:12px;height:12px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.2s ease;svg{width:8px;height:8px;}svg path{stroke:", ";}", ""], props => props.iconColor || _colors.default.grey2, _colors.default.white, props => !props.disableHoverColor && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      background-color: ").concat(props.hoverColor, ";\n    }\n  "));
+
+// Declined icon wrapper (cross + red circle)
+const DeclinedIconWrapper = exports.DeclinedIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "StatusTagstyles__DeclinedIconWrapper",
+  componentId: "sc-24azs1-5"
+})(["width:12px;height:12px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.2s ease;svg{width:6px;height:6px;}svg path{stroke:", ";}", ""], props => props.iconColor || _colors.default.grey2, _colors.default.white, props => !props.disableHoverColor && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      background-color: ").concat(props.hoverColor, ";\n    }\n  "));

package/dist/index.js

@@ -608,6 +608,17 @@ Object.keys(_NewVentureModal).forEach(function (key) {
     }
   });
 });
+var _SideModal = require("./components/Modal/SideModal");
+Object.keys(_SideModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SideModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SideModal[key];
+    }
+  });
+});
 var _MultiProgressBar = require("./components/MultiProgressBar/MultiProgressBar");
 Object.keys(_MultiProgressBar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1443,4 +1454,15 @@ Object.keys(_TimelineStep).forEach(function (key) {
       return _TimelineStep[key];
     }
   });
+});
+var _StatusTag = require("./components/StatusTag/StatusTag");
+Object.keys(_StatusTag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StatusTag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StatusTag[key];
+    }
+  });
 });

package/dist/static/images/document-icon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.08578 1.58578C1.5 2.17157 1.5 3.11438 1.5 5V7C1.5 8.8856 1.5 9.82845 2.08578 10.4142C2.67157 11 3.61438 11 5.5 11H6.5C8.3856 11 9.32845 11 9.9142 10.4142C10.5 9.82845 10.5 8.8856 10.5 7V5C10.5 3.11438 10.5 2.17157 9.9142 1.58578C9.32845 1 8.3856 1 6.5 1H5.5C3.61438 1 2.67157 1 2.08578 1.58578ZM4 4.625C3.7929 4.625 3.625 4.79289 3.625 5C3.625 5.2071 3.7929 5.375 4 5.375H8C8.2071 5.375 8.375 5.2071 8.375 5C8.375 4.79289 8.2071 4.625 8 4.625H4ZM4 6.625C3.7929 6.625 3.625 6.7929 3.625 7C3.625 7.2071 3.7929 7.375 4 7.375H6.5C6.7071 7.375 6.875 7.2071 6.875 7C6.875 6.7929 6.7071 6.625 6.5 6.625H4Z" fill="#0050CA"/>
+</svg>

package/dist/static/images/search-icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.33333 4C9.17427 4 10.6667 5.49239 10.6667 7.33333M11.1059 11.1033L14 14M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z" stroke="#9B9B9B" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/static/images/sent-icon.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4481_24713)">
+<path d="M11.9389 0.491782C11.8855 0.44493 11.8095 0.43406 11.7451 0.463943L0.103795 5.8728C0.0411228 5.90193 0.000764077 5.96446 1.07135e-05 6.03356C-0.00074265 6.10265 0.0382887 6.16604 0.100352 6.1965L3.39481 7.81329C3.45522 7.84296 3.52726 7.83625 3.58121 7.79593L6.78433 5.40188L4.26975 7.98843C4.23388 8.02534 4.21558 8.07589 4.21953 8.12719L4.46989 11.3878C4.47545 11.46 4.52389 11.5218 4.59273 11.5444C4.61113 11.5505 4.63004 11.5534 4.64873 11.5534C4.69999 11.5534 4.74986 11.5314 4.78455 11.4912L6.53314 9.46498L8.69475 10.4978C8.74168 10.5202 8.79599 10.5212 8.84367 10.5004C8.89135 10.4797 8.92765 10.4393 8.94322 10.3897L11.9918 0.680374C12.0131 0.612571 11.9923 0.538634 11.9389 0.491782Z" fill="#0050CA"/>
+</g>
+<defs>
+<clipPath id="clip0_4481_24713">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.65-beta.2",
+  "version": "2.3.65-beta.4",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",