Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 2x 2x 2x 2x 2x 2x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 27x 26x 2x 16x 16x 2x 16x 1x 14x 1x 2x | import * as React from "react";
import styled from "styled-components";
import colorTokens from "../../tokens/colors.json";
import { BreadcrumbsProps } from "./Breadcrumbs.types";
import { useTheme } from "../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../helpers/helpers";
const Breadcrumbs: React.FunctionComponent<BreadcrumbsProps> = ({
children,
delimiter,
color = colorTokens.default.primary.main,
size = "medium",
variant = "contained",
//Test Props
"data-testid": dataTestId,
...props
}) => {
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
return (
<div style={{ display: "inline-flex", flexWrap: "wrap", rowGap: "0.25rem" }} data-testid={dataTestId} {...props}>
{React.Children.map(children, (child, index) => {
if (!React.isValidElement(child)) return child;
return (
<>
{React.cloneElement(child as React.ReactElement, {
...(!child.props.variant && variant && { variant: variant }),
...(!child.props.size && size && { size: size }),
...(!child.props.color && color && { color: color }),
})}
{index < React.Children.count(children) - 1 && (
<StyledDelimiterSpan $size={size} $colorPalette={colorPalette} $color={color}>
{delimiter ?? ">"}
</StyledDelimiterSpan>
)}
</>
);
})}
</div>
);
};
const StyledDelimiterSpan = styled.span<{ $size: BreadcrumbsProps["size"], $colorPalette: any, $color: string }>`
display: inline-flex;
justify-content: center;
align-items: center;
margin: ${props => sizeHandler(props.$size)};
color: ${props => props.$colorPalette[props.$color].accentScale[10]};
`;
const sizeHandler = (size: BreadcrumbsProps["size"]) => {
switch (size) {
case "small":
return "0 0.25rem";
case "medium":
return "0 0.25rem";
case "large":
return "0 0.5rem";
}
};
export default Breadcrumbs;
|