@navinc/base-react-components
Version:
Nav's Pattern Library
73 lines • 4.17 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;
`;
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.navStatusPositive : theme.navNeutral200)};
border-radius: 50vh;
`;
const CompScaleLabeled = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CompScaleLabeled", componentId: "brc-sc-bj6a3d" }) `
display: flex;
width: 33%;
flex-direction: column;
align-items: center;
margin: 0.16667em;
`;
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.
*/
const ComparisonScale = (_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 })] }, optLabel))) })));
};
exports.ComparisonScale = ComparisonScale;
const CompScaleWithInfoContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CompScaleWithInfoContainer", componentId: "brc-sc-1aee0s2" }) ``;
const CompScaleInfo = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CompScaleInfo", componentId: "brc-sc-1r09gke" }) `
font-style: normal;
font-weight: 400;
font-size: 0.85em;
margin-left: 0.16667em;
margin-bottom: 0.5em;
`;
/**
* 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.
*/
const ComparisonScaleWithInfo = (_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))] })));
};
exports.ComparisonScaleWithInfo = ComparisonScaleWithInfo;
exports.default = { ComparisonScaleWithInfo: exports.ComparisonScaleWithInfo, ComparisonScale: exports.ComparisonScale };
//# sourceMappingURL=comparison-scale.js.map