kwikid-components-react
Version:
KwikID's Component Library in React
371 lines (359 loc) • 11.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Small = exports.Secondary = exports.Rounded = exports.Rectangle = exports.Outlined = exports.Loading = exports.Link = exports.Large = exports.Disabled = exports.Default = exports.CustomThemed = void 0;
var _react = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("./Button"));
var _Button2 = require("./Button.constants");
var _Button3 = require("./Button.defaults");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* The Button component is used to trigger an action or event, such as submitting a form,
* opening a dialog, canceling an action, or performing a delete operation.
*
* ## Usage
*
* ```jsx
* import { KwikUIButton } from 'react-kwikui';
*
* <KwikUIButton
* appearance="primary"
* onClick={handleClick}
* >
* Click Me
* </KwikUIButton>
* ```
*/
var _default = exports.default = {
title: "KwikUI/Buttons/Button",
component: _Button.default,
parameters: {
componentSubtitle: "A clickable button element to trigger actions",
docs: {
description: {
component: "The Button component is a versatile interactive element that can be customized with different appearances, shapes, and sizes."
}
},
a11y: {
config: {
rules: [{
id: "button-name",
enabled: true
}]
}
}
},
argTypes: {
appearance: {
control: "radio",
options: _Button2.KWIKUI_BUTTON__APPEARANCE__OPTIONS,
description: "The visual style of the button",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Button3.KWIKUI_BUTTON__DEFAULTS.appearance
}
}
},
shape: {
control: "radio",
options: _Button2.KWIKUI_BUTTON__SHAPE__OPTIONS,
description: "The shape of the button",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Button3.KWIKUI_BUTTON__DEFAULTS.shape
}
}
},
size: {
control: "radio",
options: _Button2.KWIKUI_BUTTON__SIZE__OPTIONS,
description: "The size of the button",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Button3.KWIKUI_BUTTON__DEFAULTS.size
}
}
},
disabled: {
control: "boolean",
description: "Whether the button is disabled",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Button3.KWIKUI_BUTTON__DEFAULTS.disabled
}
}
},
loading: {
control: "boolean",
description: "Whether the button is in a loading state",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Button3.KWIKUI_BUTTON__DEFAULTS.loading
}
}
},
disableHover: {
control: "boolean",
description: "Whether to disable hover effects",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Button3.KWIKUI_BUTTON__DEFAULTS.disableHover
}
}
},
id: {
control: "text",
description: "The ID of the button element",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Button3.KWIKUI_BUTTON__DEFAULTS.id
}
}
},
children: {
control: "text",
description: "The content to display inside the button",
table: {
type: {
summary: "ReactNode"
},
defaultValue: {
summary: _Button3.KWIKUI_BUTTON__DEFAULTS.children
}
}
},
onClick: {
action: "clicked",
description: "Function called when the button is clicked",
table: {
type: {
summary: "(id: string | number) => void"
},
defaultValue: {
summary: "undefined"
}
}
},
customStyles: {
control: "object",
description: "Custom styles to apply to the button",
table: {
type: {
summary: "object"
},
defaultValue: {
summary: "{}"
}
}
}
}
};
/**
* Template for rendering the Button component
*/
const Template = args => {
// Ensure we have the children or use a default if not provided in controls
const buttonChildren = args.children || "Button";
return /*#__PURE__*/_react.default.createElement(_Button.default, args, buttonChildren);
};
/**
* Primary button for initiating VideoKYC process
*/
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _Button3.KWIKUI_BUTTON__DEFAULTS), {}, {
children: "Start VideoKYC"
});
Default.parameters = {
docs: {
description: {
story: "Primary button used to initiate the VideoKYC verification process for new customer onboarding at Think360.AI."
}
}
};
/**
* Secondary button for KYC document upload
*/
const Secondary = exports.Secondary = Template.bind({});
Secondary.args = _objectSpread(_objectSpread({}, _Button3.KWIKUI_BUTTON__DEFAULTS), {}, {
appearance: "secondary",
children: "Upload Aadhaar Card"
});
Secondary.parameters = {
docs: {
description: {
story: "Secondary button for uploading Aadhaar documents during the eKYC process."
}
}
};
/**
* Outlined button for optional actions
*/
const Outlined = exports.Outlined = Template.bind({});
Outlined.args = _objectSpread(_objectSpread({}, _Button3.KWIKUI_BUTTON__DEFAULTS), {}, {
appearance: "outlined",
children: "Update PAN Details"
});
Outlined.parameters = {
docs: {
description: {
story: "Outlined button used for optional actions like updating PAN card information in the KwikID verification system."
}
}
};
/**
* Link button for navigation
*/
const Link = exports.Link = Template.bind({});
Link.args = _objectSpread(_objectSpread({}, _Button3.KWIKUI_BUTTON__DEFAULTS), {}, {
appearance: "link",
children: "View RBI Guidelines"
});
Link.parameters = {
docs: {
description: {
story: "Link-style button for navigating to related information such as RBI KYC guidelines or verification policies."
}
}
};
/**
* Disabled button state
*/
const Disabled = exports.Disabled = Template.bind({});
Disabled.args = _objectSpread(_objectSpread({}, _Button3.KWIKUI_BUTTON__DEFAULTS), {}, {
disabled: true,
children: "Submit for Verification"
});
Disabled.parameters = {
docs: {
description: {
story: "Button in a disabled state used when all required documents haven't been uploaded for the KYC verification process."
}
}
};
/**
* Loading button state for verification
*/
const Loading = exports.Loading = Template.bind({});
Loading.args = _objectSpread(_objectSpread({}, _Button3.KWIKUI_BUTTON__DEFAULTS), {}, {
loading: true,
children: "Verifying Identity"
});
Loading.parameters = {
docs: {
description: {
story: "Loading state shown during identity verification process when the system is checking Aadhaar or PAN details with government databases."
}
}
};
/**
* Small button for compact UIs
*/
const Small = exports.Small = Template.bind({});
Small.args = _objectSpread(_objectSpread({}, _Button3.KWIKUI_BUTTON__DEFAULTS), {}, {
size: "s",
children: "Refresh OTP"
});
Small.parameters = {
docs: {
description: {
story: "Small button used for ancillary actions like refreshing OTP during mobile verification in the KwikID customer onboarding flow."
}
}
};
/**
* Large button for primary actions
*/
const Large = exports.Large = Template.bind({});
Large.args = _objectSpread(_objectSpread({}, _Button3.KWIKUI_BUTTON__DEFAULTS), {}, {
size: "l",
children: "Complete Onboarding"
});
Large.parameters = {
docs: {
description: {
story: "Large button for important call-to-action like completing the customer onboarding process after successful identity verification."
}
}
};
/**
* Rounded button for modern interfaces
*/
const Rounded = exports.Rounded = Template.bind({});
Rounded.args = _objectSpread(_objectSpread({}, _Button3.KWIKUI_BUTTON__DEFAULTS), {}, {
shape: "rounded",
children: "Connect to Agent"
});
Rounded.parameters = {
docs: {
description: {
story: "Rounded button used in the Think360.AI KwikID mobile app to connect customers with verification agents when assistance is needed."
}
}
};
/**
* Rectangle button for traditional interfaces
*/
const Rectangle = exports.Rectangle = Template.bind({});
Rectangle.args = _objectSpread(_objectSpread({}, _Button3.KWIKUI_BUTTON__DEFAULTS), {}, {
shape: "rectangle",
children: "Download Verification Report"
});
Rectangle.parameters = {
docs: {
description: {
story: "Rectangular button used in the admin dashboard for KYC officers to download verification reports and audit trails."
}
}
};
/**
* Custom themed button for special actions
*/
const CustomThemed = exports.CustomThemed = Template.bind({});
CustomThemed.args = _objectSpread(_objectSpread({}, _Button3.KWIKUI_BUTTON__DEFAULTS), {}, {
customStyles: {
backgroundColor: "#FF6B35",
color: "#FFFFFF",
hoverBackgroundColor: "#E04F16",
hoverColor: "#FFFFFF",
borderColor: "#FF6B35",
borderRadius: "4px",
fontSize: "14px",
fontWeight: "600",
padding: "10px 16px"
},
children: "Escalate to Baiju Dodhia"
});
CustomThemed.parameters = {
docs: {
description: {
story: "Custom themed button used in the VideoKYC dashboard for escalating verification issues to the KwikID team lead, Baiju Dodhia, at Think360.AI in Mumbai."
}
}
};