@navinc/base-react-components
Version:
Nav's Pattern Library
85 lines • 4.14 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PasswordStrengthMeter = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importStar(require("styled-components"));
const copy_js_1 = require("./copy.js");
const is_rebrand_js_1 = __importDefault(require("./is-rebrand.js"));
const text_js_1 = require("./text.js");
const getPasswordScoreDefinition = (value, requiredScore, theme) => {
if (value >= requiredScore) {
return {
label: 'Strong',
color: (0, is_rebrand_js_1.default)(theme) ? theme.navStatusPositive500 : theme.good,
};
}
else if (value === 0) {
return {
label: 'Weak',
color: (0, is_rebrand_js_1.default)(theme) ? theme.navStatusNegative500 : theme.poor,
};
}
else if (value < requiredScore) {
return {
label: 'Fair',
color: (0, is_rebrand_js_1.default)(theme) ? theme.navSecondary500 : theme.fair,
};
}
else {
return {
label: 'Weak',
color: (0, is_rebrand_js_1.default)(theme) ? theme.navStatusNegative500 : theme.poor,
};
}
};
const StyledPasswordMeterSection = styled_components_1.default.div.withConfig({ displayName: "brc-sc-StyledPasswordMeterSection", componentId: "brc-sc-d3i94i" }) `
display: grid;
grid-gap: 8px;
`;
const StyledProgress = styled_components_1.default.progress.withConfig({ displayName: "brc-sc-StyledProgress", componentId: "brc-sc-10easn9" }) `
appearance: none;
&::-webkit-progress-bar {
background-color: ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navSecondary300 : theme.neutral100)};
border-radius: 12px;
}
&::-webkit-progress-value {
border-radius: 12px;
background-color: ${({ value, max, theme }) => getPasswordScoreDefinition(value, max, theme).color};
}
height: 8px;
width: 100%;
`;
const PasswordStrengthMeter = ({ requiredPasswordScore, passwordStrengthScore, className, }) => {
const theme = (0, styled_components_1.useTheme)();
return ((0, jsx_runtime_1.jsxs)(StyledPasswordMeterSection, Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(StyledProgress, { max: requiredPasswordScore, value: passwordStrengthScore }), (0, jsx_runtime_1.jsxs)(copy_js_1.Copy, Object.assign({ size: "sm" }, { children: ["Password strength:", ' ', (0, jsx_runtime_1.jsx)(text_js_1.Text, Object.assign({ "$bold": true }, { children: getPasswordScoreDefinition(passwordStrengthScore, requiredPasswordScore, theme).label }))] }))] })));
};
exports.PasswordStrengthMeter = PasswordStrengthMeter;
const StyledPasswordStrengthMeter = (0, styled_components_1.default)(exports.PasswordStrengthMeter).withConfig({ displayName: "brc-sc-StyledPasswordStrengthMeter", componentId: "brc-sc-9trdul" }) ``;
exports.default = StyledPasswordStrengthMeter;
//# sourceMappingURL=password-strength-meter.js.map