@navinc/base-react-components
Version:
Nav's Pattern Library
77 lines (76 loc) • 3.81 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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
const CompScaleContainer = styled.div.withConfig({ displayName: "brc-sc-CompScaleContainer", componentId: "brc-sc-rrblcm" }) `
display: flex;
flex-direction: row;
gap: 0.1667em;
`;
const CompScalePill = styled.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.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.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.
*/
export const ComparisonScale = styled((_a) => {
var { selected, options } = _a, props = __rest(_a, ["selected", "options"]);
return (_jsx(CompScaleContainer, Object.assign({ "data-testid": "comparison-scale" }, props, { children: options === null || options === void 0 ? void 0 : options.map((optLabel, index) => (_jsxs(CompScaleLabeled, { children: [_jsx(CompScalePill, { "$selected": index <= selected }), _jsx(CompScaleLabel, { children: (index === selected && optLabel) || '\u00A0' })] }, optLabel))) })));
}).withConfig({ displayName: "brc-sc-ComparisonScale", componentId: "brc-sc-3eauc0" }) ``;
const CompScaleWithInfoContainer = styled.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.div.withConfig({ displayName: "brc-sc-CompScaleInfo", componentId: "brc-sc-16whs5u" }) `
font-style: normal;
font-weight: 400;
font-size: 0.85em;
margin-left: 0.1667em;
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.
*/
export const ComparisonScaleWithInfo = styled((_a) => {
var { selected, options, info } = _a, props = __rest(_a, ["selected", "options", "info"]);
const argsInput = { selected, options };
return (_jsxs(CompScaleWithInfoContainer, Object.assign({ "data-testid": "comparison-scale-with-info" }, props, { children: [_jsx(CompScaleInfo, { children: info }), _jsx(ComparisonScale, Object.assign({}, argsInput))] })));
}).withConfig({ displayName: "brc-sc-ComparisonScaleWithInfo", componentId: "brc-sc-101hrpf" }) ``;
//# sourceMappingURL=comparison-scale.js.map