@stokr/components-library/dist/components/Checklist/ChecklistCard.stories.js

STOKR - Components Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithOnClick = exports.WithLink = exports.Missing = exports.InProgress = exports.GridOfCards = exports.DoneVerified = exports.DoneRegistered = exports.DoneApproved = exports.Disabled = void 0;
var _react = _interopRequireDefault(require("react"));
var _ChecklistCard = _interopRequireDefault(require("./ChecklistCard"));
var _global = _interopRequireDefault(require("../../styles/global"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// Adjust path as needed
var _default = exports.default = {
  title: 'Checklist/ChecklistCard',
  component: _ChecklistCard.default,
  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))]
};
const DoneRegistered = () => /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "done",
  iconCopy: "REGISTERED",
  title: "Country of Residence",
  description: "We ask for your country of residence to ensure legal access to the right investment opportunities."
});
exports.DoneRegistered = DoneRegistered;
const DoneVerified = () => /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "done",
  iconCopy: "VERIFIED",
  title: "Verify Identity",
  description: "KYC is required to confirm your identity before you can invest or trade."
});
exports.DoneVerified = DoneVerified;
const DoneApproved = () => /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "done",
  iconCopy: "APPROVED",
  title: "Tax ID",
  description: "Some offers require you to provide your Tax ID before being able to invest in."
});
exports.DoneApproved = DoneApproved;
const Missing = () => /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "missing",
  iconCopy: "MISSING STEP",
  title: "Liquid Address",
  description: "This is your wallet address on the Liquid Network, required for token delivery."
});
exports.Missing = Missing;
const InProgress = () => /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "in_progress",
  iconCopy: "IN PROGRESS",
  title: "Verify Identity",
  description: "Our anti-fraud squad is still working."
});
exports.InProgress = InProgress;
const WithLink = () => /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "missing",
  iconCopy: "MISSING STEP",
  title: "Liquid Address",
  description: "Clicking this card will take you to the registration page.",
  link: "/register-liquid"
});
exports.WithLink = WithLink;
const WithOnClick = () => /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "done",
  iconCopy: "VERIFIED",
  title: "Clickable Card",
  description: "This card is clickable and calls an onClick handler.",
  onClick: () => alert('Card clicked!')
});
exports.WithOnClick = WithOnClick;
const Disabled = () => /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "missing",
  iconCopy: "MISSING STEP",
  title: "Disabled Card",
  description: "This card is disabled and not interactive.",
  disabled: true
});
exports.Disabled = Disabled;
const Grid = _styledComponents.default.div.withConfig({
  displayName: "ChecklistCardstories__Grid",
  componentId: "sc-no624-0"
})(["display:grid;grid-template-columns:repeat(4,1fr);gap:32px;@media (max-width:900px){grid-template-columns:1fr;}"]);
const GridOfCards = () => /*#__PURE__*/_react.default.createElement(Grid, null, /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "done",
  iconCopy: "REGISTERED",
  title: "Country of Residence",
  description: "We ask for your country of residence to ensure legal access to the right investment opportunities."
}), /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "done",
  iconCopy: "VERIFIED",
  title: "Verify Identity",
  description: "KYC is required to confirm your identity before you can invest or trade."
}), /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "missing",
  iconCopy: "MISSING STEP",
  title: "Liquid Address",
  description: "This is your wallet address on the Liquid Network, required for token delivery."
}), /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
  iconState: "in_progress",
  iconCopy: "IN PROGRESS",
  title: "Tax ID",
  description: "Some offers require you to provide your Tax ID before being able to invest in."
}));
exports.GridOfCards = GridOfCards;