@navinc/base-react-components
Version:
Nav's Pattern Library
82 lines • 4.42 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComparisonScaleWithInfo = exports.ComparisonScale = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const CompScaleContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CompScaleContainer", componentId: "brc-sc-rrblcm" }) `
display: flex;
flex-direction: row;
gap: 0.16667em;
`;
const CompScalePill = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CompScalePill", componentId: "brc-sc-ujjw3n" }) `
width: 100%;
height: 0.5em;
background: ${({ $selected, theme }) => ($selected ? theme.navPrimary400 : theme.navNeutral200)};
border-radius: 50vh;
`;
const CompScaleLabeled = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CompScaleLabeled", componentId: "brc-sc-bj6a3d" }) `
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: flex-end;
`;
const CompScaleLabel = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CompScaleLabel", componentId: "brc-sc-1ozrmr1" }) `
font-style: normal;
font-weight: 400;
font-size: 0.75em;
`;
/**
* Creates a 'progress bar' of given inputs.
* Options are displayed left to right, highlighting if they are at an index position equal to or lesser than the provided 'selected' index.
* If equal to the index, the option label is displayed in text below the bar.
*/
exports.ComparisonScale = (0, styled_components_1.default)((_a) => {
var { selected, options } = _a, props = __rest(_a, ["selected", "options"]);
return ((0, jsx_runtime_1.jsx)(CompScaleContainer, Object.assign({ "data-testid": "comparison-scale" }, props, { children: options === null || options === void 0 ? void 0 : options.map((optLabel, index) => ((0, jsx_runtime_1.jsxs)(CompScaleLabeled, { children: [(0, jsx_runtime_1.jsx)(CompScalePill, { "$selected": index <= selected }), (0, jsx_runtime_1.jsx)(CompScaleLabel, { children: (index === selected && optLabel) || '\u00A0' })] }, optLabel))) })));
}).withConfig({ displayName: "brc-sc-ComparisonScale", componentId: "brc-sc-3eauc0" }) ``;
const CompScaleWithInfoContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CompScaleWithInfoContainer", componentId: "brc-sc-1mkgnmq" }) `
display: flex;
flex-direction: column;
& > ${CompScaleContainer} {
flex: 1;
justify-content: flex-end;
}
height: 100%;
flex-grow: 1;
`;
const CompScaleInfo = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CompScaleInfo", componentId: "brc-sc-16whs5u" }) `
font-style: normal;
font-weight: 400;
font-size: 0.85em;
margin-left: 0.16667em;
margin-bottom: 0.5em;
flex-grow: 1;
`;
/**
* Creates a 'progress bar' of given inputs.
* Options are displayed left to right, highlighting if they are at an index position equal to or lesser than the provided 'selected' index.
* If equal to the index, the option label is displayed in text below the bar.
* Info is added as a head to the scale.
*/
exports.ComparisonScaleWithInfo = (0, styled_components_1.default)((_a) => {
var { selected, options, info } = _a, props = __rest(_a, ["selected", "options", "info"]);
const argsInput = { selected, options };
return ((0, jsx_runtime_1.jsxs)(CompScaleWithInfoContainer, Object.assign({ "data-testid": "comparison-scale-with-info" }, props, { children: [(0, jsx_runtime_1.jsx)(CompScaleInfo, { children: info }), (0, jsx_runtime_1.jsx)(exports.ComparisonScale, Object.assign({}, argsInput))] })));
}).withConfig({ displayName: "brc-sc-ComparisonScaleWithInfo", componentId: "brc-sc-101hrpf" }) ``;
//# sourceMappingURL=comparison-scale.js.map