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

package/dist/components/Payment/PaymentDetailsCard.stories.js

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutSeparators = exports.WithTooltips = exports.WithPlaceholders = exports.WithCustomInfoSection = exports.WithCustomAmountSection = exports.WithBitcoin = exports.DetailsOnly = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PaymentDetailsCard = _interopRequireDefault(require("./PaymentDetailsCard"));
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StoryContainer = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCardstories__StoryContainer",
+  componentId: "sc-1bzi48y-0"
+})(["max-width:500px;padding:20px;background:", ";"], _colors.default.offWhite);
+var _default = exports.default = {
+  title: 'Components Library/Payment/PaymentDetailsCard',
+  component: _PaymentDetailsCard.default,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(StoryContainer, null, /*#__PURE__*/_react.default.createElement(Story, null))))]
+};
+const Default = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  title: "Payment Details",
+  amountSection: {
+    label: 'Amount to pay',
+    amount: 1250.5,
+    currency: 'USDC'
+  },
+  details: [{
+    label: 'Reference',
+    value: 'INV-2024-001234'
+  }, {
+    label: 'Date',
+    value: 'Dec 19, 2024'
+  }, {
+    label: 'Status',
+    value: 'Pending'
+  }]
+});
+exports.Default = Default;
+const WithBitcoin = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  amountSection: {
+    label: 'Transfer amount',
+    amount: 0.054321,
+    currency: 'BTC'
+  },
+  details: [{
+    label: 'Network',
+    value: 'Bitcoin Mainnet'
+  }, {
+    label: 'Fee',
+    value: '0.00001 BTC'
+  }, {
+    label: 'Confirmations',
+    value: '3/6'
+  }]
+});
+exports.WithBitcoin = WithBitcoin;
+const WithTooltips = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  amountSection: {
+    label: 'Investment amount',
+    amount: 50000,
+    currency: 'USDT'
+  },
+  details: [{
+    label: 'Token price',
+    value: '$1.25',
+    tooltip: 'Current token price at the time of investment'
+  }, {
+    label: 'Tokens received',
+    value: '40,000 TKN',
+    tooltip: 'Number of tokens you will receive'
+  }, {
+    label: 'Lock-up period',
+    value: '12 months',
+    tooltip: 'Tokens will be locked for this period'
+  }]
+});
+exports.WithTooltips = WithTooltips;
+const WithPlaceholders = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  title: "Pending Payment",
+  amountSection: {
+    label: 'Amount',
+    amount: 500,
+    currency: 'USDC'
+  },
+  details: [{
+    label: 'Transaction ID',
+    value: null,
+    placeholder: 'Awaiting confirmation'
+  }, {
+    label: 'Recipient',
+    value: 'John Doe'
+  }, {
+    label: 'Status',
+    value: null,
+    placeholder: 'Processing...'
+  }]
+});
+exports.WithPlaceholders = WithPlaceholders;
+const WithCustomInfoSection = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  title: "Order Confirmation",
+  amountSection: {
+    label: 'Total amount',
+    amount: 2500,
+    currency: 'USDC'
+  },
+  details: [{
+    label: 'Order ID',
+    value: 'ORD-789456'
+  }, {
+    label: 'Items',
+    value: '3 tokens'
+  }],
+  infoSection: /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '12px',
+      background: _colors.default.lightGrey,
+      borderRadius: '4px',
+      fontSize: '14px',
+      color: _colors.default.grey2
+    }
+  }, "\u24D8 Your payment will be processed within 24 hours. You will receive a confirmation email once complete.")
+});
+exports.WithCustomInfoSection = WithCustomInfoSection;
+const WithoutSeparators = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  title: "Compact View",
+  amountSection: {
+    label: 'Amount',
+    amount: 100,
+    currency: 'USDC'
+  },
+  details: [{
+    label: 'From',
+    value: 'Wallet A'
+  }, {
+    label: 'To',
+    value: 'Wallet B'
+  }],
+  showSeparators: false
+});
+exports.WithoutSeparators = WithoutSeparators;
+const DetailsOnly = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  title: "Account Information",
+  details: [{
+    label: 'Account holder',
+    value: 'Jane Smith'
+  }, {
+    label: 'Account type',
+    value: 'Premium'
+  }, {
+    label: 'Member since',
+    value: 'Jan 2023'
+  }, {
+    label: 'Total investments',
+    value: '$125,000'
+  }]
+});
+exports.DetailsOnly = DetailsOnly;
+const WithCustomAmountSection = () => {
+  const CustomAmount = () => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: 'center',
+      padding: '20px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '14px',
+      color: _colors.default.grey2,
+      marginBottom: '8px'
+    }
+  }, "You are investing"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '48px',
+      fontWeight: '800',
+      color: _colors.default.black
+    }
+  }, "$10,000"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '14px',
+      color: _colors.default.freshGreen,
+      marginTop: '8px'
+    }
+  }, "\u2713 Best rate available"));
+  return /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+    title: "Custom Investment",
+    amountSection: /*#__PURE__*/_react.default.createElement(CustomAmount, null),
+    details: [{
+      label: 'Exchange rate',
+      value: '1 USD = 0.92 EUR'
+    }, {
+      label: 'Fees',
+      value: '$0.00'
+    }]
+  });
+};
+exports.WithCustomAmountSection = WithCustomAmountSection;

package/dist/components/StatusTag/StatusTag.js

@@ -11,6 +11,7 @@ var _checkIcon = require("../../static/images/check-icon.svg");
 var _crossIcon = require("../../static/images/cross-icon.svg");
 var _sentIcon = require("../../static/images/sent-icon.svg");
 var _documentIcon = require("../../static/images/document-icon.svg");
+var _transferIcon = require("../../static/images/transfer-icon.svg");
 var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _StatusTag = require("./StatusTag.styles");
 const _excluded = ["variant", "icon", "text", "tooltip", "tooltipProps", "iconColor", "hoverColor", "disableHoverColor", "minWidth", "className", "containerStyle", "iconStyle", "textStyle", "onClick", "center"];
@@ -83,10 +84,16 @@ const variantConfig = {
     disableHoverColor: false
   },
   paid: {
-    icon: (iconColor, hoverColor, disableHoverColor) => /*#__PURE__*/_react.default.createElement(PaidIcon, {
-      iconColor: iconColor,
-      hoverColor: hoverColor,
-      disableHoverColor: disableHoverColor
+    // icon: (iconColor, hoverColor, disableHoverColor) => (
+    //   <PaidIcon
+    //     iconColor={iconColor}
+    //     hoverColor={hoverColor}
+    //     disableHoverColor={disableHoverColor}
+    //   />
+    // ),
+    icon: /*#__PURE__*/_react.default.createElement(_transferIcon.ReactComponent, {
+      width: 14,
+      height: 14
     }),
     iconColor: _colors.default.grey2,
     hoverColor: _colors.default.freshGreen,

package/dist/components/TextLink/TextLink.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.AsButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _TextLink = require("./TextLink.styles");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Components Library/TextLink',
+  component: _TextLink.TextLink,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(Story, null)))]
+};
+const Default = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TextLink.TextLink, {
+  to: "/example"
+}, "View Details"));
+exports.Default = Default;
+const AsButton = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TextLink.TextButton, {
+  onClick: () => alert('Clicked!')
+}, "Click Me"));
+exports.AsButton = AsButton;

package/dist/index.js

@@ -399,6 +399,17 @@ Object.keys(_Select).forEach(function (key) {
     }
   });
 });
+var _MultiSelect = require("./components/Input/MultiSelect");
+Object.keys(_MultiSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MultiSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MultiSelect[key];
+    }
+  });
+});
 var _OtpInput = require("./components/Input/OtpInput");
 Object.keys(_OtpInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;