kwikid-components-react
Version:
KwikID's Component Library in React
291 lines (284 loc) • 7.76 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Sizes = exports.Shapes = exports.Secondary = exports.Outlined = exports.Default = exports.CustomStyles = void 0;
var _react = _interopRequireDefault(require("react"));
var _Badge = _interopRequireDefault(require("./Badge"));
var _Badge2 = require("./Badge.constants");
var _Badge3 = require("./Badge.defaults");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* The Badge component is used to highlight or categorize items, display counts,
* or indicate status. They're often used to draw attention to new or updated elements.
*
* ## Usage
*
* ```jsx
* import { KwikUIBadge } from 'react-kwikui';
*
* <KwikUIBadge
* appearance="primary"
* size="m"
* >
* New
* </KwikUIBadge>
* ```
*/
var _default = exports.default = {
title: "KwikUI/Display/Badge",
component: _Badge.default,
parameters: {
componentSubtitle: "A visual indicator for status, counts, or categories",
docs: {
description: {
component: "Badges are small elements that communicate status, attributes, or verification states in KwikID's identity verification flows. They're especially useful for indicating document verification status, customer risk levels, and compliance with RBI KYC guidelines."
}
},
a11y: {
config: {
rules: [{
id: "color-contrast",
enabled: true
}]
}
}
},
argTypes: {
appearance: {
control: "radio",
options: _Badge2.KWIKUI_BADGE_APPEARANCE_OPTIONS,
description: "The visual style of the badge",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Badge3.KWIKUI_BADGE_DEFAULTS.appearance
}
}
},
shape: {
control: "radio",
options: _Badge2.KWIKUI_BADGE_SHAPE_OPTIONS,
description: "The shape of the badge",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Badge3.KWIKUI_BADGE_DEFAULTS.shape
}
}
},
size: {
control: "radio",
options: _Badge2.KWIKUI_BADGE_SIZE_OPTIONS,
description: "The size of the badge",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Badge3.KWIKUI_BADGE_DEFAULTS.size
}
}
},
id: {
control: "text",
description: "The ID of the badge element",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Badge3.KWIKUI_BADGE_DEFAULTS.id
}
}
},
children: {
control: "text",
description: "The content to display inside the badge",
table: {
type: {
summary: "ReactNode"
},
defaultValue: {
summary: _Badge3.KWIKUI_BADGE_DEFAULTS.children
}
}
},
customStyles: {
control: "object",
description: "Custom styles to apply to the badge",
table: {
type: {
summary: "object"
},
defaultValue: {
summary: "{}"
}
}
}
}
};
/**
* Template for rendering the Badge component
*/
const Template = _ref => {
let {
children = "Badge",
...args
} = _ref;
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1rem"
}
}, /*#__PURE__*/_react.default.createElement(_Badge.default, args, children));
};
/**
* Default badge with primary appearance
*/
const Default = exports.Default = Template.bind({});
Default.args = {
..._Badge3.KWIKUI_BADGE_DEFAULTS,
children: "Verified"
};
Default.parameters = {
docs: {
description: {
story: "Default verification badge used in the Think360.AI KwikID platform to indicate successfully verified identity documents."
}
}
};
/**
* Secondary badge variant
*/
const Secondary = exports.Secondary = Template.bind({});
Secondary.args = {
..._Badge3.KWIKUI_BADGE_DEFAULTS,
appearance: "secondary",
children: "Pending Approval"
};
Secondary.parameters = {
docs: {
description: {
story: "Secondary badge used to indicate documents or verifications that are pending approval from KYC officers at Think360.AI in Mumbai."
}
}
};
/**
* Outlined badge variant
*/
const Outlined = exports.Outlined = Template.bind({});
Outlined.args = {
..._Badge3.KWIKUI_BADGE_DEFAULTS,
appearance: "outlined",
children: "Manual Review"
};
Outlined.parameters = {
docs: {
description: {
story: "Outlined badge indicating that a verification requires manual review by the KwikID team under UIDAI or RBI guidelines."
}
}
};
/**
* Different badge sizes for verification statuses
*/
const Sizes = () => {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1rem"
}
}, /*#__PURE__*/_react.default.createElement(_Badge.default, {
size: "xs",
appearance: "secondary"
}, "Mobile Verified"), /*#__PURE__*/_react.default.createElement(_Badge.default, {
size: "s"
}, "PAN Verified"), /*#__PURE__*/_react.default.createElement(_Badge.default, {
size: "m",
appearance: "outlined"
}, "Aadhaar Pending"), /*#__PURE__*/_react.default.createElement(_Badge.default, {
size: "l",
appearance: "secondary"
}, "Address Verified"), /*#__PURE__*/_react.default.createElement(_Badge.default, {
size: "xl"
}, "KYC Complete"), /*#__PURE__*/_react.default.createElement(_Badge.default, {
size: "xxl",
customStyles: {
backgroundColor: "#006666",
color: "white"
}
}, "Video KYC Ready"));
};
exports.Sizes = Sizes;
Sizes.parameters = {
docs: {
description: {
story: "Different badge sizes used in the KwikID dashboard to display various verification statuses at different prominence levels."
},
controls: {
disable: true
} // Disable controls for this demo
}
};
/**
* Different badge shapes for verification types
*/
const Shapes = () => {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "1rem"
}
}, /*#__PURE__*/_react.default.createElement(_Badge.default, {
shape: "curved",
appearance: "secondary"
}, "e-KYC Verified"), /*#__PURE__*/_react.default.createElement(_Badge.default, {
shape: "rectangle"
}, "V-CIP Compliant"), /*#__PURE__*/_react.default.createElement(_Badge.default, {
shape: "rounded",
appearance: "outlined"
}, "RBI Approved"));
};
exports.Shapes = Shapes;
Shapes.parameters = {
docs: {
description: {
story: "Badge shapes used to differentiate between verification types in the Think360.AI FinTech ecosystem. Curved badges for e-KYC, rectangle for V-CIP compliance, and rounded for regulatory approvals."
},
controls: {
disable: true
} // Disable controls for this demo
}
};
/**
* Badge with brand-specific styles
*/
const CustomStyles = exports.CustomStyles = Template.bind({});
CustomStyles.args = {
..._Badge3.KWIKUI_BADGE_DEFAULTS,
children: "Verified by Baiju Dodhia",
customStyles: {
backgroundColor: "#673AB7",
// Think360.AI brand purple
color: "white",
padding: "8px 16px",
fontWeight: "bold",
borderRadius: "4px",
boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
}
};
CustomStyles.parameters = {
docs: {
description: {
story: "Custom badge indicating verification by KwikID team member Baiju Dodhia at Think360.AI, styled in the company's brand colors."
}
}
};