@navinc/base-react-components
Version:
Nav's Pattern Library
55 lines • 2.47 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { useTheme } from 'styled-components';
import { Copy } from './copy.js';
import isRebrand from './is-rebrand.js';
import { Text } from './text.js';
const getPasswordScoreDefinition = (value, requiredScore, theme) => {
if (value >= requiredScore) {
return {
label: 'Strong',
color: isRebrand(theme) ? theme.navStatusPositive500 : theme.good,
};
}
else if (value === 0) {
return {
label: 'Weak',
color: isRebrand(theme) ? theme.navStatusNegative500 : theme.poor,
};
}
else if (value < requiredScore) {
return {
label: 'Fair',
color: isRebrand(theme) ? theme.navSecondary500 : theme.fair,
};
}
else {
return {
label: 'Weak',
color: isRebrand(theme) ? theme.navStatusNegative500 : theme.poor,
};
}
};
const StyledPasswordMeterSection = styled.div.withConfig({ displayName: "brc-sc-StyledPasswordMeterSection", componentId: "brc-sc-d3i94i" }) `
display: grid;
grid-gap: 8px;
`;
const StyledProgress = styled.progress.withConfig({ displayName: "brc-sc-StyledProgress", componentId: "brc-sc-10easn9" }) `
appearance: none;
&::-webkit-progress-bar {
background-color: ${({ theme }) => (isRebrand(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%;
`;
export const PasswordStrengthMeter = ({ requiredPasswordScore, passwordStrengthScore, className, }) => {
const theme = useTheme();
return (_jsxs(StyledPasswordMeterSection, Object.assign({ className: className }, { children: [_jsx(StyledProgress, { max: requiredPasswordScore, value: passwordStrengthScore }), _jsxs(Copy, Object.assign({ size: "sm" }, { children: ["Password strength:", ' ', _jsx(Text, Object.assign({ "$bold": true }, { children: getPasswordScoreDefinition(passwordStrengthScore, requiredPasswordScore, theme).label }))] }))] })));
};
const StyledPasswordStrengthMeter = styled(PasswordStrengthMeter).withConfig({ displayName: "brc-sc-StyledPasswordStrengthMeter", componentId: "brc-sc-9trdul" }) ``;
export default StyledPasswordStrengthMeter;
//# sourceMappingURL=password-strength-meter.js.map